Add copy to clipboard function to chat messages

Author: corebonts

llamafile/server/www/chatbot.css

@@ -96,28 +96,75 @@ ul li:first-child {
 }
 
 .message {
-  margin-bottom: 1rem;
   padding: 0.75rem;
   border-radius: 8px;
-  max-width: 80%;
   word-wrap: break-word;
+  background: var(--message-background);
 }
 
-.message.user {
-  background: #e9ecef;
+.message-wrapper.user {
+  --message-background: #e9ecef;
   margin-left: auto;
+  max-width: 80%;
 }
 
-.message.assistant {
-  background: #f8f9fa;
+.message-wrapper.assistant {
   margin-right: auto;
+  /* Not needed because of the message controls */
+  margin-bottom: 0;
+  max-width: 90%;
 }
 
-.message.system {
-  background: #f8e3fa;
+.message-wrapper.system {
+  --message-background: #f8e3fa;
   margin-right: auto;
 }
 
+.message-wrapper {
+  position: relative;
+  overflow: visible;
+  margin-bottom: 1rem;
+}
+
+.message-controls {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.message-wrapper.user .message-controls {
+  right: 0;
+}
+
+.message-controls button, .copy-button {
+  position: static;
+  padding: 0.25rem;
+  border-radius: 4px;
+  border: 1px solid #dee2e6;
+  background: white;
+  transition: all 0.1s;
+  cursor: pointer;
+  box-sizing: content-box;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  line-height: 16px;
+  text-align: center;
+}
+
+.message-controls button:hover,
+.message-controls button:focus,
+.copy-button:hover,
+.copy-button:focus {
+  border-color: #aaa;
+}
+
+.message-controls button img, .copy-button svg {
+  width: 16px;
+  height: 16px;
+}
+
 .message img {
   max-width: 100%;
   height: auto;
@@ -264,12 +311,15 @@ button.complete-button:disabled {
 
 .message pre {
   margin: 1rem auto;
-  background: #fefefe;
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
   padding: 0.5rem;
   border-radius: 4px;
   overflow-x: auto;
   position: relative;
   white-space: pre-wrap;
+  min-height: 1.5rem;
+  box-sizing: content-box;
 }
 
 .message blockquote {
@@ -289,27 +339,14 @@ button.complete-button:disabled {
   margin-left: 1rem;
 }
 
-.copy-button {
+pre .copy-button {
   position: absolute;
   top: 0.5rem;
   right: 0.5rem;
-  padding: 0.25rem;
-  background: #fff;
-  border: 1px solid #dee2e6;
-  border-radius: 4px;
-  cursor: pointer;
-  opacity: 0.8;
-  transition: opacity 0.2s;
   z-index: 1;
 }
 
-.copy-button:hover {
-  opacity: 1;
-}
-
 .copy-button svg {
-  width: 16px;
-  height: 16px;
   display: block;
 }
 

llamafile/server/www/chatbot.js

@@ -62,9 +62,22 @@ function generateId() {
   return Date.now().toString(36) + Math.random().toString(36).substring(2);
 }
 
-function createMessageElement(content, role) {
+function wrapMessageElement(messageElement, role) {
+  const wrapper = document.createElement("div");
+  wrapper.appendChild(messageElement);
+  if (role == "assistant") {
+    const controlContainer = document.createElement("div");
+    controlContainer.appendChild(createCopyButton(() => messageElement.textContent, () => messageElement.innerHTML));
+    controlContainer.classList.add("message-controls");
+    wrapper.appendChild(controlContainer);
+  }
+  wrapper.classList.add("message-wrapper", role);
+  return wrapper;
+}
+
+function createMessageElement(content) {
   const messageDiv = document.createElement("div");
-  messageDiv.classList.add("message", role);
+  messageDiv.classList.add("message");
   let hdom = new HighlightDom(messageDiv);
   const high = new RenderMarkdown(hdom);
   high.feed(content);
@@ -105,6 +118,7 @@ async function handleChatStream(response) {
   const decoder = new TextDecoder();
   let buffer = "";
   let currentMessageElement = null;
+  let currentMessageWrapper = null;
   let messageAppended = false;
   let finishReason = null;
   let hdom = null;
@@ -144,8 +158,9 @@ async function handleChatStream(response) {
             }
 
             if (content && !messageAppended) {
-              currentMessageElement = createMessageElement("", "assistant");
-              chatMessages.appendChild(currentMessageElement);
+              currentMessageElement = createMessageElement("");
+              currentMessageWrapper = wrapMessageElement(currentMessageElement, "assistant");
+              chatMessages.appendChild(currentMessageWrapper);
               hdom = new HighlightDom(currentMessageElement);
               high = new RenderMarkdown(hdom);
               messageAppended = true;
@@ -220,8 +235,8 @@ async function sendMessage() {
   abortController = new AbortController();
 
   // add user message to chat
-  const userMessageElement = createMessageElement(message, "user");
-  chatMessages.appendChild(userMessageElement);
+  const userMessageElement = createMessageElement(message);
+  chatMessages.appendChild(wrapMessageElement(userMessageElement, "user"));
   scrollToBottom();
 
   // update chat history
@@ -253,16 +268,16 @@ async function sendMessage() {
         chatHistory.push({ role: "assistant", content: lastMessage });
     } else {
       console.error("sendMessage() failed due to server error", response);
-      chatMessages.appendChild(createMessageElement(
-        `Server replied with error code ${response.status} ${response.statusText}`,
+      chatMessages.appendChild(wrapMessageElement(createMessageElement(
+        `Server replied with error code ${response.status} ${response.statusText}`),
         "system"));
       cleanupAfterMessage();
     }
   } catch (error) {
     if (error.name !== "AbortError") {
       console.error("sendMessage() failed due to unexpected exception", error);
-      chatMessages.appendChild(createMessageElement(
-        "There was an error processing your request.",
+      chatMessages.appendChild(wrapMessageElement(createMessageElement(
+        "There was an error processing your request."),
         "system"));
     }
     cleanupAfterMessage();
@@ -449,8 +464,8 @@ function startChat(history) {
   for (let i = 0; i < chatHistory.length; i++) {
     if (flagz.no_display_prompt && chatHistory[i].role == "system")
       continue;
-    chatMessages.appendChild(createMessageElement(chatHistory[i].content,
-                                                  chatHistory[i].role));
+    chatMessages.appendChild(wrapMessageElement(createMessageElement(chatHistory[i].content),
+      chatHistory[i].role));
   }
   scrollToBottom();
 }

llamafile/server/www/clipboard.js

@@ -37,6 +37,7 @@ function createCopyButton(textProviderFunction, htmlProviderFunction) {
   const copyButton = document.createElement('button');
   copyButton.className = 'copy-button';
   copyButton.innerHTML = clipboardIcon;
+  copyButton.title = "Copy to clipboard";
   copyButton.addEventListener('click', async function () {
     try {
       await copyTextToClipboard(textProviderFunction(), htmlProviderFunction ? htmlProviderFunction() : null);