SimpleChatTCRV:Basic skeleton to load a dataUrl

tools/server/public_simplechat/index.html

@@ -60,7 +60,7 @@
             <hr>
             <div class="sameline">
                 <textarea id="user-in" class="flex-grow" rows="2" placeholder="enter your query to the ai model here" ></textarea>
-                <input id="file-btn" type="file">file</button>
+                <!-- input id="file-btn" type="file">file</input -->
                 <button id="user-btn">submit</button>
             </div>
 

tools/server/public_simplechat/simplechat.js

@@ -954,7 +954,22 @@ class MultiChatUI {
         this.elInToolName = /** @type{HTMLInputElement} */(document.getElementById("toolname-in"));
         this.elInToolArgs = /** @type{HTMLInputElement} */(document.getElementById("toolargs-in"));
 
+        // Save any placeholder set by default like through html, to restore where needed
         this.elInUser.dataset.placeholder = this.elInUser.placeholder
+        this.elInFileX = ui.el_creatediv_inputfile('file', 'file', '', ()=>{
+            let f0 = this.elInFileX.el.files?.item(0);
+            if (!f0) {
+                return
+            }
+            console.log(`DBUG:InFileX:${f0?.name}`)
+            let fR = new FileReader()
+            fR.onload = () => {
+                this.me.dataURLs.push(fR.result)
+                console.log(`INFO:InFileX:Loaded file ${f0.name}`)
+            }
+            fR.readAsDataURL(f0)
+        }, "")
+        this.elBtnUser.parentElement?.appendChild(this.elInFileX.elB)
 
         this.validate_element(this.elInSystem, "system-in");
         this.validate_element(this.elDivChat, "chat-div");
@@ -1552,6 +1567,10 @@ export class Me {
             //"presence_penalty": 1.2,
         };
         this.toolsMgr = new mTools.ToolsManager()
+        /**
+         * @type {(string | ArrayBuffer | null)[]}
+         */
+        this.dataURLs = []
     }
 
     /**

tools/server/public_simplechat/ui.mjs

@@ -232,6 +232,26 @@ export function el_creatediv_input(id, label, type, defaultValue, cb, className=
 }
 
 
+/**
+ * Create a div wrapped input of type file,
+ * which hides input and shows a button which chains to underlying file type input.
+ * @param {string} id
+ * @param {string} label
+ * @param {any} defaultValue
+ * @param {(arg0: any) => void} cb
+ * @param {string} className
+ */
+export function el_creatediv_inputfile(id, label, defaultValue, cb, className) {
+    let elX = el_creatediv_input(id, label, "file", defaultValue, cb, className)
+    elX.el.hidden = true
+    let idB = `${id}-button`
+    let elB = el_create_button(idB, (mev) => {
+        elX.el.click()
+    }, idB, label)
+    return { div: elX.div, el: elX.el, elB: elB };
+}
+
+
 /**
  * Auto create ui input elements for specified fields/properties in given object
  * Currently supports text, number, boolean field types.