Copy code or full message

static/style.css

@@ -11,6 +11,7 @@ html {
     white-space: pre;
     max-width: 662px;
     position: relative;
+    border-radius: 8px;
 }
 
 #chat-messages .message-content pre code {
@@ -23,10 +24,6 @@ html {
     position: absolute;
     top: 5px;
     right: 5px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
-    padding: 5px 10px;
 }
 
 .content {

utils.go

@@ -25,7 +25,7 @@ func markdownToHTML(markdownText string) string {
 }
 
 func addCopyButtonsToCode(htmlContent string) string {
-	buttonHTML := `<button class="copy-button" onclick="copyCode(this)"><i class="fa-solid fa-copy"></i></button>`
+	buttonHTML := `<button class="copy-button button is-small is-primary is-outlined" onclick="copyToClipboardCode(this)"><i class="fa-solid fa-copy"></i></button>`
 
 	// Regular expression pattern to match <pre> elements and insert the button right before <code>
 	pattern := `(<pre[^>]*>)`

views/layouts/main.html

@@ -22,6 +22,71 @@
 
     {{embed}}
 
+    <script>
+        function copyToClipboardCode(button) {
+            // Get the code element next to the button
+            var codeElement = button.nextElementSibling;
+
+            // Create a temporary textarea element
+            var tempTextarea = document.createElement('textarea');
+            tempTextarea.value = codeElement.textContent;
+
+            // Append the temporary textarea to the document body
+            document.body.appendChild(tempTextarea);
+
+            // Select the text in the temporary textarea
+            tempTextarea.select();
+
+            // Copy the selected text to the clipboard
+            document.execCommand('copy');
+
+            // Remove the temporary textarea from the document body
+            document.body.removeChild(tempTextarea);
+
+            // Change the button text to indicate successful copy
+            var originalText = button.innerHTML;
+            button.innerHTML = '<i class="fa-solid fa-check"></i>';
+
+            // Revert the button text after a short delay
+            setTimeout(function () {
+                button.innerHTML = originalText;
+            }, 2000);
+        }
+
+        function copyToClipboard(button) {
+            // Get the container element for all the message content
+            var messageContentContainer = button.closest('.message-bot').querySelector('#content-column .content');
+
+            // Get the text content of all the messages
+            var messageContent = messageContentContainer.textContent.trim();
+
+            // Create a temporary textarea element
+            var tempTextarea = document.createElement('textarea');
+            tempTextarea.value = messageContent;
+
+            // Append the temporary textarea to the document body
+            document.body.appendChild(tempTextarea);
+
+            // Select the text in the temporary textarea
+            tempTextarea.select();
+
+            // Copy the selected text to the clipboard
+            document.execCommand('copy');
+
+            // Remove the temporary textarea from the document body
+            document.body.removeChild(tempTextarea);
+
+            // Change the button text to indicate successful copy
+            var originalText = button.innerHTML;
+            button.innerHTML = '<i class="fa-solid fa-check"></i>';
+
+            // Revert the button text after a short delay
+            setTimeout(function () {
+                button.innerHTML = originalText;
+            }, 2000);
+        }
+    </script>
+
 </body>
 
 </html>

views/partials/message-bot.html

@@ -31,7 +31,8 @@
             </div>
             <div class="is-flex is-justify-content mt-2">
                 {% if not NotClickable %}
-                <button class="button is-small is-primary message-button is-outlined mr-5">
+                <button class="button is-small is-primary message-button is-outlined mr-5"
+                    onclick="copyToClipboard(this)">
                     <span class="icon">
                         <i class="fa-solid fa-copy"></i>
                     </span>
@@ -48,6 +49,20 @@
                 </button>
                 {% endfor %}
                 {% endif %}
+
+                {% if IsPlaceholder %}
+                <hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
+                    hx-target="#chat-container">
+                </hx>
+
+                <div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
+                    <div class="message-body">
+                        <div class="content">
+                            <img id="spinner" class="htmx-indicator" src="/puff.svg" />
+                        </div>
+                    </div>
+                </div>
+                {% endif %}
             </div>
         </div>
     </div>

views/partials/popover-models.html

@@ -1,4 +1,4 @@
-<div class="dropdown is-hoverable is-up">
+<div class="dropdown is-hoverable is-up is-right">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
             <span class="icon"><i class="fa-solid fa-robot"></i></span>

views/partials/popover-settings.html

@@ -1,4 +1,4 @@
-<div class="dropdown is-hoverable is-up">
+<div class="dropdown is-hoverable is-up is-right">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
             <span class="icon"><i class="fa-solid fa-key"></i></span>

views/partials/popover-usage.html

@@ -1,4 +1,4 @@
-<div class="dropdown is-hoverable is-up">
+<div class="dropdown is-hoverable is-up is-right">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
             <span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>