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

@@ -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>
 

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;

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', '📷', '📷', '', ".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");

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)