From 15dcd4a0a33586ee952310962ec6dfbfa8b6609b Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Fri, 21 Nov 2025 01:51:09 +0530
Subject: [PATCH] SimpleChatTCRV:ImagePopOver: To view and if reqd del before
 submit

Also had forgotten to rename to image_urls, when switching from
single image with its corresponding field image_url to image_urls,
wrt removing the same after it has been added to the content array.
---
 tools/server/public_simplechat/index.html     |  4 ++
 tools/server/public_simplechat/readme.md      |  3 ++
 tools/server/public_simplechat/simplechat.css |  4 ++
 tools/server/public_simplechat/simplechat.js  | 48 +++++++++++++++++--
 4 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html
index b8bb1076fc..dc2e66135b 100644
--- a/tools/server/public_simplechat/index.html
+++ b/tools/server/public_simplechat/index.html
@@ -61,6 +61,10 @@
             </div>
 
             <hr>
+            <div id="popover-image" popover="auto">
+                <img id="poimage-img"></img>
+                <button id="poimage-del" title="delete"> &#x274C; </button>
+            </div>
             <div id="user-in-div" class="role-user">
                 <div id="user-in-imgs"></div>
                 <div class="sameline">
diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md
index e48a032b29..6d4f169c5c 100644
--- a/tools/server/public_simplechat/readme.md
+++ b/tools/server/public_simplechat/readme.md
@@ -835,6 +835,9 @@ Cleanup in general
 * Chat button to toggle sessions buttons and system prompt.
 * Use unix date format markers wrt sys_date_time toolcall, also add w (day of week).
 * Free up the useful vertical space by merging chat sessions buttons/tabs into heading
+* Allow user to load multiple images and submit to ai as part of a single user message.
+* Use popover ui to allow user to view larger versions of loaded images as well as remove before submitting
+  to ai, if and when needed.
 
 
 #### ToDo
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 4a720057bc..65b06fb6c6 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -189,6 +189,10 @@ body {
     max-width: 12vmin;
     max-height: 12vmin;
 }
+#poimage-img {
+    max-width: 60vmin;
+    max-height: 60vmin;
+}
 #user-in {
     background-color: #ffffff;
     padding: 1.6vmin 2vmin;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index dda546cb13..231e60fe0b 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -87,6 +87,11 @@ class NSChatMessage {
         this.tool_calls = structuredClone(tool_calls)
         this.tool_call_id = tool_call_id
         this.name = name
+        if (image_urls) {
+            if (image_urls.length <= 0) {
+                image_urls = undefined
+            }
+        }
         this.image_urls = structuredClone(image_urls)
     }
 
@@ -625,7 +630,7 @@ class SimpleChat {
                 }
                 // @ts-ignore
                 tmsg.ns.content = tMixed
-                tmsg.ns_delete("image_url")
+                tmsg.ns_delete("image_urls")
             }
             chat.push(tmsg.ns);
         }
@@ -1085,6 +1090,20 @@ class MultiChatUI {
         this.elPopoverChatMsgDelBtn = /** @type{HTMLElement} */(document.getElementById("popover-chatmsg-del"));
         this.uniqIdChatMsgPO = -1;
 
+        // image popover menu
+        this.elPOImage = /** @type{HTMLElement} */(document.getElementById("popover-image"));
+        this.elPOImageImg = /** @type{HTMLImageElement} */(document.getElementById("poimage-img"));
+        this.elPOImageDel = /** @type{HTMLButtonElement} */(document.getElementById("poimage-del"));
+        this.elPOImageDel.addEventListener('click', (ev)=>{
+            if (this.uniqIdImagePO < 0) {
+                return
+            }
+            this.dataurl_plus_del(this.uniqIdImagePO)
+            this.uniqIdImagePO = -1;
+            this.elPOImage.hidePopover()
+        })
+        this.uniqIdImagePO = -1;
+
         // 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
@@ -1179,11 +1198,29 @@ class MultiChatUI {
         if (typeof(dataUrl) == 'string') {
             this.me.dataURLs.push(dataUrl)
             let elImg = document.createElement('img')
+            let imgIndex = this.me.dataURLs.length-1
+            elImg.id = `uiimg-${imgIndex}`
             elImg.src = dataUrl
+            elImg.addEventListener('click', (ev)=>{
+                this.uniqIdImagePO = imgIndex;
+                this.elPOImageImg.src = /** @type{string} */(this.me.dataURLs[this.uniqIdImagePO]);
+                this.elPOImage.showPopover()
+            })
             this.elDivUserInImgs.appendChild(elImg)
         }
     }
 
+    /**
+     * Remove the dataurl, as well as shown image.
+     * @param {number} imgIndex
+     */
+    dataurl_plus_del(imgIndex) {
+        let id = `uiimg-${imgIndex}`
+        this.me.dataURLs[imgIndex] = null
+        let elImg = document.querySelector(`[id="${id}"]`)
+        elImg?.remove()
+    }
+
     /**
      * Get the stored dataUrl
      * @param {number} index
@@ -1675,9 +1712,14 @@ class MultiChatUI {
                 return;
             }
             try {
-                let images = undefined
+                let images = []
                 if (this.me.dataURLs.length > 0) {
-                    images = /** @type{Array<string>} */(this.me.dataURLs)
+                    for (const img of this.me.dataURLs) {
+                        if (img == null) {
+                            continue
+                        }
+                        images.push(/** @type{string} */(img))
+                    }
                 }
                 this.chatmsg_addsmart_uishow(chat.chatId, new ChatMessageEx(new NSChatMessage(Roles.User, content, undefined, undefined, undefined, undefined, images)))
             } catch (err) {