SimpleChatTCRV:Vision:Show images as part of the message

tools/server/public_simplechat/readme.md

@@ -725,6 +725,8 @@ sliding window based drop off or even before they kick in, this can help in many
     * follow the openai format/template wrt these mixed content messages.
   * Usage: specify a mmproj file directly or through -hf, additionally had to set --batch-size to 8k
     and ubatch-size to 2k wrt gemma3-4b-it
+  * when showing chat instantiate img elements to show image_urls.
+    * limit horizontally to max width and vertically to 20% of the height
 
 * SimpleChat class now allows extra fields to be specified while adding, in a generic way using a
   object/literal object or equivalent.

tools/server/public_simplechat/simplechat.css

@@ -75,6 +75,10 @@
     word-break: break-word;
     hyphens: auto;
 }
+.chat-message-img {
+    max-width: fit-content;
+    max-height: 20vh;
+}
 
 
 .gridx2 {

tools/server/public_simplechat/simplechat.js

@@ -1130,6 +1130,13 @@ class MultiChatUI {
                 entry.classList.add(`chat-message-${name}`)
             }
         }
+        // Handle Image
+        if (msg.ns.image_url) {
+            let img = document.createElement('img')
+            img.classList.add('chat-message-img')
+            img.src = msg.ns.image_url
+            secContents?.append(img)
+        }
         // Handle tool call ui, if reqd
         let bTC = false
         let bAuto = false