From 2f07288e4061652622e03ed069377fa78f9158fc Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Wed, 29 Oct 2025 15:39:32 +0530
Subject: [PATCH] SimpleChatTC:ShowMessage: containers, role, contents

Seperate out the message ui block into a container containing
a role block and contents container block.

This will allow themeing of these seperately, if required.
As part of same, currently the role has been put to the side
of the message with vertical text flow.
---
 tools/server/public_simplechat/simplechat.css | 17 +++++++++++++
 tools/server/public_simplechat/simplechat.js  | 25 +++++++++++++++----
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 98e88d99fb..9125771d5b 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -28,6 +28,23 @@
     background-color: lightpink;
 }
 
+.chat-message {
+    border-style: solid;
+    border-color: grey;
+    border-width: thin;
+    border-radius: 2px;
+    display: flex;
+}
+.chat-message-role {
+    border-style: dotted;
+    border-color: black;
+    border-width: thin;
+    border-radius: 4px;
+    writing-mode: vertical-lr;
+    padding-inline: 1vmin;
+}
+
+
 .gridx2 {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 53adbb28d4..cb0d373cc1 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -879,20 +879,35 @@ class MultiChatUI {
      * * Assistant which contains a tool req, shows tool call ui if needed. ie
      *   * if it is the last message OR
      *   * if it is the last but one message and there is a ToolTemp message next
+     * @param {HTMLElement | undefined} elParent
      * @param {ChatMessageEx} msg
      * @param {number} iFromLast
      * @param {ChatMessageEx | undefined} nextMsg
      */
-    show_message(msg, iFromLast, nextMsg) {
+    show_message(elParent, msg, iFromLast, nextMsg) {
+        // Handle ToolTemp
         if (msg.ns.role === Roles.ToolTemp) {
             if (iFromLast == 0) {
                 this.elInUser.value = msg.ns.content;
             }
             return
         }
-        let entry = ui.el_create_append_p(`[[ ${msg.ns.role} ]]: ${msg.content_equiv()}`, this.elDivChat);
-        entry.className = `role-${msg.ns.role}`;
-        this.elLastChatMessage = entry;
+        // Create main section
+        let secMain = document.createElement('section')
+        secMain.classList.add(`role-${msg.ns.role}`)
+        secMain.classList.add('chat-message')
+        elParent?.append(secMain)
+        this.elLastChatMessage = secMain;
+        // Create role para
+        let entry = ui.el_create_append_p(`${msg.ns.role}`, secMain);
+        entry.className = `chat-message-role`;
+        // Create content section
+        let secContent = document.createElement('section')
+        secContent.classList.add('chat-message-content')
+        secMain.append(secContent)
+        // Add the content
+        entry = ui.el_create_append_p(`${msg.content_equiv()}`, secContent);
+        // Handle tool call ui, if reqd
         if (msg.ns.role === Roles.Assistant) {
             let bTC = false
             if (iFromLast == 0) {
@@ -942,7 +957,7 @@ class MultiChatUI {
             if (iFromLast == 1) {
                 nextMsg = chatToShow[i+1]
             }
-            this.show_message(x, iFromLast, nextMsg)
+            this.show_message(this.elDivChat, x, iFromLast, nextMsg)
         }
         if (this.elLastChatMessage != null) {
             /** @type{HTMLElement} */(this.elLastChatMessage).scrollIntoView(false); // Stupid ts-check js-doc intersection ???