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

@@ -44,9 +44,9 @@
                 <p> You need to have javascript enabled.</p>
             </div>
 
-            <div id="popover-edit" popover="auto">
+            <div id="popover-chatmsg" popover="auto">
-                <button id="popover-edit-del"> &#x274C; </button>
+                <button id="popover-chatmsg-del"> &#x274C; </button>
-                <button id="popover-edit-copy"> &#x1F4CB; </button>
+                <button id="popover-chatmsg-copy"> &#x1F4CB; </button>
             </div>
 
             <div id="tool-div">

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;

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) {
+    get_chatmessage(uniqId) {
-        let index = this.xchat.findIndex((msg)=>{
+        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])
+        })
+
     }
 
     /**