From 08ea5c364cd8c4639de362bff7d9df660bb2a69f Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Thu, 20 Nov 2025 19:29:37 +0530
Subject: [PATCH] SimpleChatTCRV:MultipleImages: Icon only buttons

Instead of having texts submit and image, replace them with equiv
unicode icons.

Adjust the size of these buttons to be smaller, given that now they
only contain icons in them.

Switch from btn+inputfile+img to btn+inputfile wrt image loading btn
given that the image will be shown in seperate dynamically created
images in the user in div.
---
 tools/server/public_simplechat/index.html     |  2 +-
 tools/server/public_simplechat/simplechat.css | 13 +++++++------
 tools/server/public_simplechat/simplechat.js  |  3 ++-
 tools/server/public_simplechat/ui.mjs         |  8 +++++---
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html
index 35ca8a9ee0..9c2a466db8 100644
--- a/tools/server/public_simplechat/index.html
+++ b/tools/server/public_simplechat/index.html
@@ -65,7 +65,7 @@
                 <div id="user-in-imgs"></div>
                 <div class="sameline">
                 <textarea id="user-in" class="flex-grow" rows="2" placeholder="enter your query to the ai model here" ></textarea>
-                <button id="user-btn">submit</button>
+                <button id="user-btn" title="submit">&#x1F4AC;</button>
                 </div>
             </div>
 
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 219e49d919..27fc5039d6 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -122,10 +122,6 @@ body {
     max-width: fit-content;
     max-height: 20vh;
 }
-#user-in-imgs img {
-    max-width: 12vmin;
-    max-height: 12vmin;
-}
 #popover-chatmsg {
     position:fixed;
     position-area: span-top span-left;
@@ -182,6 +178,10 @@ body {
     border-color: black;
     border-style: solid;
 }
+#user-in-imgs img {
+    max-width: 12vmin;
+    max-height: 12vmin;
+}
 #user-in {
     background-color: #ffffff;
     padding: 1.6vmin 2vmin;
@@ -193,10 +193,11 @@ body {
     background-color: lightyellow;
 }
 #user-in-div button {
-    padding-inline: 2vmin;
+    padding-inline: 1vmin;
     border-radius: 2vmin;
-    min-height: 3vmin;
+    min-height: 1vmin;
 }
+
 button {
     padding-inline: 2vmin;
     border-radius: 1vmin;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 4be599da57..4063896ca4 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -1085,7 +1085,7 @@ class MultiChatUI {
         // Save any placeholder set by default like through html, to restore where needed
         this.elInUser.dataset.placeholder = this.elInUser.placeholder
         // Setup Image loading button and flow
-        this.elInFileX = ui.el_creatediv_inputfileimgbtn('image', 'image', '', ".jpg, .jpeg, .png", ()=>{
+        this.elInFileX = ui.el_creatediv_inputfilebtn('image', '&#x1F4F7;', '&#x1F4F7;', '', ".jpg, .jpeg, .png", ()=>{
             let f0 = this.elInFileX.el.files?.item(0);
             if (!f0) {
                 return
@@ -1100,6 +1100,7 @@ class MultiChatUI {
             }
             fR.readAsDataURL(f0)
         }, 'user-in')
+        this.elInFileX.elB.title = "Image"
         this.elBtnUser.parentElement?.appendChild(this.elInFileX.elB)
 
         this.validate_element(this.elInSystem, "system-in");
diff --git a/tools/server/public_simplechat/ui.mjs b/tools/server/public_simplechat/ui.mjs
index ed05b91315..f56d0c7a9b 100644
--- a/tools/server/public_simplechat/ui.mjs
+++ b/tools/server/public_simplechat/ui.mjs
@@ -44,6 +44,7 @@ export function el_children_config_class(elBase, idSelected, classSelected, clas
 
 /**
  * Create button and set it up.
+ * If innerHTML specified, it takes priority over any innerText specified.
  * @param {string} id
  * @param {(this: HTMLButtonElement, ev: MouseEvent) => any} callback
  * @param {string | undefined} name
@@ -241,12 +242,13 @@ export function el_creatediv_input(id, label, type, defaultValue, cb, className=
  * which hides input and shows a button which chains to underlying file type input.
  * @param {string} id
  * @param {string} label
+ * @param {string} labelBtnHtml
  * @param {any} defaultValue
  * @param {string} acceptable
  * @param {(arg0: any) => void} cb
  * @param {string} className
  */
-export function el_creatediv_inputfilebtn(id, label, defaultValue, acceptable, cb, className) {
+export function el_creatediv_inputfilebtn(id, label, labelBtnHtml, defaultValue, acceptable, cb, className) {
     let elX = el_creatediv_input(id, label, "file", defaultValue, cb, className)
     elX.el.hidden = true
     elX.el.accept = acceptable
@@ -254,7 +256,7 @@ export function el_creatediv_inputfilebtn(id, label, defaultValue, acceptable, c
     let elB = el_create_button(idB, (mev) => {
         elX.el.value = ""
         elX.el.click()
-    }, idB, label, `<p>${label}</p>`)
+    }, idB, undefined, labelBtnHtml)
     return { div: elX.div, el: elX.el, elB: elB };
 }
 
@@ -270,7 +272,7 @@ export function el_creatediv_inputfilebtn(id, label, defaultValue, acceptable, c
  * @param {string} className
  */
 export function el_creatediv_inputfileimgbtn(id, label, defaultValue, acceptable, cb, className) {
-    let elX = el_creatediv_inputfilebtn(id, label, defaultValue, acceptable, cb, className);
+    let elX = el_creatediv_inputfilebtn(id, label, `<p>${label}</p>`, defaultValue, acceptable, cb, className);
     let elImg = document.createElement('img')
     elImg.classList.add(`${className}-img`)
     elX.elB.appendChild(elImg)