action buttons sticky

webui/components/messages/action-buttons/simple-action-buttons.css

@@ -2,87 +2,88 @@
 
 /* Main action buttons container - precise positioning */
 .action-buttons {
-  position: absolute;
+  position: sticky;
+  height:0;
+  width:fit-content;
+  overflow: visible;
   top: 0.3em;
-  right: 0;
+  margin-right:0.1em;
+  margin-left: auto;
   display: none;
   flex-direction: row;
   gap: 0;
-  background: var(--color-panel);
-  border: 1px solid var(--color-border);
   border-radius: 6px;
   transition: opacity var(--transition-speed) ease-in-out;
   z-index: 10;
-  overflow: hidden;
 }
 
 /* Individual action button - precise hit area */
-.action-button {
+.action-buttons .action-button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 26px;
   height: 26px;
-  background: transparent;
-  border: none;
   cursor: pointer;
-  transition: background-color var(--transition-speed) ease-in-out;
+  background-color: var(--color-background);
+  /* border: 1px solid var(--color-border); */
+  /* transition: background-color var(--transition-speed) ease-in-out; */
   color: var(--color-text);
   padding: 0;
   font-size: 14px;
-  opacity: 0.7;
+  /* opacity: 0.7; */
   margin: 0;
 }
 
-.action-button:first-child {
+.action-buttons .action-button:first-child {
   border-radius: 5px 0 0 5px;
 }
 
-.action-button:last-child {
+.action-buttons .action-button:last-child {
   border-radius: 0 5px 5px 0;
 }
 
-.action-button:hover {
+.action-buttons .action-button:hover {
   opacity: 1;
-  background: var(--color-background);
+  background: var(--color-panel);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
 }
 
-.action-button:active {
+.action-buttons .action-button:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 /* Material icons - same as original */
-.action-button .material-symbols-outlined {
+.action-buttons .action-button .material-symbols-outlined {
   font-size: 16px;
   line-height: 1;
   font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
 }
 
 /* Success state - same as original */
-.action-button.success {
+.action-buttons .action-button.success {
   background: #4CAF50;
   border-color: #4CAF50;
   color: white;
 }
 
-.action-button.success .material-symbols-outlined {
+.action-buttons .action-button.success .material-symbols-outlined {
   font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
 }
 
 /* Error state - same as original */
-.action-button.error {
+.action-buttons .action-button.error {
   background: var(--color-accent);
   border-color: var(--color-accent);
   color: white;
 }
 
-.action-button.error .material-symbols-outlined {
+.action-buttons .action-button.error .material-symbols-outlined {
   font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 20;
 }
 
 /* Speaking state - same as original */
-.action-button.speaking {
+.action-buttons .action-button.speaking {
   background: var(--color-primary);
   border-color: var(--color-primary);
   color: white;
@@ -97,8 +98,10 @@
 
 /* Show action buttons on hover - simplified, no device detection needed */
 .msg-content:hover .action-buttons,
-.kvps-row:hover .action-buttons,
-.message-text:hover .action-buttons {
+/* .kvps-row:hover .action-buttons, */
+.message-text:hover .action-buttons,
+.kvps-val:hover .action-buttons,
+.message-body:hover > .action-buttons {
   display: flex;
   animation: fadeInAfterDelay 0.3s ease-in-out;
   animation-delay: 0.3s;

webui/components/messages/action-buttons/simple-action-buttons.js

@@ -3,19 +3,23 @@ import { store as speechStore } from "/components/chat/speech/speech-store.js";
 
 // Extract text content from different message types
 function getTextContent(element) {
-  if (element.classList.contains("kvps-row")) {
-    return element.querySelector(".kvps-val")?.innerText || "";
-  } else if (element.classList.contains("message-text")) {
-    return (
-      element.querySelector("pre")?.innerText ||
-      element.querySelector("span")?.innerText ||
-      ""
-    );
-  } else {
-    return element.querySelector("span")?.innerText || "";
+  // Get all children except action buttons
+  const textParts = [];
+  // Loop through all child elements
+  for (const child of element.children) {
+    // Skip action buttons
+    if (child.classList.contains("action-buttons")) continue;
+    // Get text content from the child
+    const text = child.innerText || "";
+    if (text.trim()) {
+      textParts.push(text.trim());
+    }
   }
+  // Join all text parts with double newlines
+  return textParts.join("\n\n");
 }
 
+
 // Create and add action buttons to element
 export function addActionButtonsToElement(element) {
   // Skip if buttons already exist
@@ -116,5 +120,10 @@ export function addActionButtonsToElement(element) {
   };
 
   container.append(copyBtn, speakBtn);
-  element.appendChild(container);
+  // Add container as the first child instead of appending it
+  if (element.firstChild) {
+    element.insertBefore(container, element.firstChild);
+  } else {
+    element.appendChild(container);
+  }
 }

webui/css/messages.css

@@ -318,7 +318,7 @@
 }
 
 .kvps-val {
-  margin: 0.65rem 0 0.65rem 0.4rem;
+  /* margin: 0.65rem 0 0.65rem 0.4rem; */
   white-space: pre-wrap;
 }
 

webui/index.css

@@ -16,7 +16,7 @@
   --color-accent-dark: #cf6679;
   --color-message-bg-dark: #2d2d2d;
   --color-message-text-dark: #e0e0e0;
-  --color-panel-dark: #171717;
+  --color-panel-dark: #1a1a1a;
   --color-border-dark: #444444a8;
   --color-input-dark: #131313;
   --color-input-focus-dark: #101010;

webui/js/messages.js

@@ -219,7 +219,7 @@ export function _drawMessage(
       }
 
       // Ensure action buttons exist
-      addActionButtonsToElement(contentDiv);
+      addActionButtonsToElement(bodyDiv);
       adjustMarkdownRender(contentDiv);
 
     } else {
@@ -244,7 +244,7 @@ export function _drawMessage(
       spanElement.innerHTML = convertHTML(content);
 
       // Ensure action buttons exist
-      addActionButtonsToElement(preElement);
+      addActionButtonsToElement(bodyDiv);
 
     }
   } else {
@@ -693,6 +693,8 @@ function drawKvps(container, kvps, latex) {
         addValue(value);
       }
 
+      addActionButtonsToElement(tdiv);
+
       // autoscroll the KVP value if needed
       // if (getAutoScroll()) #TODO needs a better redraw system
       setTimeout(() => {
@@ -720,7 +722,6 @@ function drawKvps(container, kvps, latex) {
           span.innerHTML = convertHTML(value);
           pre.appendChild(span);
           tdiv.appendChild(pre);
-          addActionButtonsToElement(row);
 
           // KaTeX rendering for markdown
           if (latex) {
@@ -794,6 +795,8 @@ function drawKvpsIncremental(container, kvps, latex) {
       // Clear and rebuild content (for now - could be optimized further)
       tdiv.innerHTML = "";
 
+      addActionButtonsToElement(tdiv);
+
       if (Array.isArray(value)) {
         for (const item of value) {
           addValue(item, tdiv);
@@ -836,10 +839,10 @@ function drawKvpsIncremental(container, kvps, latex) {
         tdiv.appendChild(pre);
 
         // Add action buttons to the row
-        const row = tdiv.closest(".kvps-row");
-        if (row) {
-          addActionButtonsToElement(row);
-        }
+        // const row = tdiv.closest(".kvps-row");
+        // if (row) {
+          // addActionButtonsToElement(pre);
+        // }
 
         // KaTeX rendering for markdown
         if (latex) {