From 62fb992e0e5e15dc7d6160be9e66a8c949c78b15 Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Thu, 13 Nov 2025 23:29:29 +0530
Subject: [PATCH] SimpleChatTCRV:CMPopOver: show within chatmessage, del logic

Trap the mouseenter and mouseleave events wrt the chatmessage
block to show the chatmessage-popover ui inturn within the
corresponding chatmessage.

When ever user clicks the popover menu's delete button, the
uniqId associated with each chat message, is now used to
delete the user selected chat message.

Initial skeleton wrt clipboard copy.
---
 tools/server/public_simplechat/index.html     |  6 +--
 tools/server/public_simplechat/simplechat.css |  6 +--
 tools/server/public_simplechat/simplechat.js  | 49 +++++++++++++++++--
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html
index 658e2385a9..47203e8338 100644
--- a/tools/server/public_simplechat/index.html
+++ b/tools/server/public_simplechat/index.html
@@ -44,9 +44,9 @@
                 <p> You need to have javascript enabled.</p>
             </div>
 
-            <div id="popover-edit" popover="auto">
-                <button id="popover-edit-del"> &#x274C; </button>
-                <button id="popover-edit-copy"> &#x1F4CB; </button>
+            <div id="popover-chatmsg" popover="auto">
+                <button id="popover-chatmsg-del"> &#x274C; </button>
+                <button id="popover-chatmsg-copy"> &#x1F4CB; </button>
             </div>
 
             <div id="tool-div">
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 40dbb582ce..ed94361ef0 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -92,13 +92,13 @@
     max-width: 20vmin;
     max-height: 20vmin;
 }
-#popover-edit {
+#popover-chatmsg {
     position:absolute;
     background-color: transparent;
     padding: 0;
     border-width: 0;
 }
-#popover-edit button {
+#popover-chatmsg button {
     padding: 0;
 }
 
@@ -122,7 +122,7 @@
 }
 
 #chat-div {
-    overflow-y: auto;
+    overflow: auto;
     flex-grow: 1;
     flex-shrink: 1;
     min-height: 40vh;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 4e1855e7c1..74d675eba7 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -663,16 +663,24 @@ class SimpleChat {
     }
 
     /**
-     * Delete a chat message in place using chat message uniqId.
+     * Get xchat index corresponding to given chat message uniqId.
      * @param {number} uniqId
      */
-    delete(uniqId) {
-        let index = this.xchat.findIndex((msg)=>{
+    get_chatmessage(uniqId) {
+        return this.xchat.findIndex((msg)=>{
             if (msg.uniqId == uniqId) {
                 return true
             }
             return false
         })
+    }
+
+    /**
+     * Delete a chat message in place using chat message uniqId.
+     * @param {number} uniqId
+     */
+    delete(uniqId) {
+        let index = this.get_chatmessage(uniqId);
         if (index >= 0) {
             this.xchat.splice(index, 1)
         }
@@ -1027,7 +1035,12 @@ class MultiChatUI {
         this.elBtnTool = /** @type{HTMLButtonElement} */(document.getElementById("tool-btn"));
         this.elInToolName = /** @type{HTMLInputElement} */(document.getElementById("toolname-in"));
         this.elInToolArgs = /** @type{HTMLInputElement} */(document.getElementById("toolargs-in"));
-        this.elPopoverEdit = /** @type{HTMLElement} */(document.getElementById("popover-edit"));
+
+        // chat message popover menu related
+        this.elPopoverChatMsg = /** @type{HTMLElement} */(document.getElementById("popover-chatmsg"));
+        this.elPopoverChatMsgCopyBtn = /** @type{HTMLElement} */(document.getElementById("popover-chatmsg-copy"));
+        this.elPopoverChatMsgDelBtn = /** @type{HTMLElement} */(document.getElementById("popover-chatmsg-del"));
+        this.uniqIdChatMsgPO = -1;
 
         // Save any placeholder set by default like through html, to restore where needed
         this.elInUser.dataset.placeholder = this.elInUser.placeholder
@@ -1197,6 +1210,19 @@ class MultiChatUI {
         let secMain = document.createElement('section')
         secMain.classList.add(`role-${msg.ns.role}`)
         secMain.classList.add('chat-message')
+        secMain.addEventListener('mouseenter', (ev)=>{
+            let trect = secMain.getBoundingClientRect();
+            let prect = this.elPopoverChatMsg.getBoundingClientRect();
+            this.elPopoverChatMsg.style.top = `${trect.top+2}px`
+            this.elPopoverChatMsg.style.left = `${((trect.width)*0.9) - prect.width}px`
+            this.uniqIdChatMsgPO = msg.uniqId
+            // @ts-ignore
+            this.elPopoverChatMsg.showPopover({source: secMain})
+        })
+        secMain.addEventListener('mouseleave', (ev)=>{
+            this.elPopoverChatMsg.hidePopover()
+            //this.uniqIdChatMsgPO = -1
+        })
         elParent?.append(secMain)
         this.elLastChatMessage = secMain;
         // Create role para
@@ -1399,6 +1425,21 @@ class MultiChatUI {
             }
         });
 
+        // ChatMessage edit popover menu
+
+        this.elPopoverChatMsgDelBtn.addEventListener('click', (ev) => {
+            console.log(`DBUG:MCUI:ChatMsgPO:Del:${this.curChatId}:${this.uniqIdChatMsgPO}`)
+            this.simpleChats[this.curChatId].delete(this.uniqIdChatMsgPO)
+            this.chat_show(this.curChatId)
+        })
+
+        this.elPopoverChatMsgCopyBtn.addEventListener('click', (ev) => {
+            console.log(`DBUG:MCUI:ChatMsgPO:Copy:${this.curChatId}:${this.uniqIdChatMsgPO}`)
+            let index = this.simpleChats[this.curChatId].get_chatmessage(this.uniqIdChatMsgPO)
+            let items = new ClipboardItem({ });
+            navigator.clipboard.write([items])
+        })
+
     }
 
     /**