From b104c989a53f804bf1be8236a8c1c29f3083c2b6 Mon Sep 17 00:00:00 2001
From: Adrien <adrien.bouvais.pro@gmail.com>
Date: Sat, 11 May 2024 16:34:31 +0200
Subject: [PATCH] Copy code or full message

---
 static/style.css                     |  5 +--
 utils.go                             |  2 +-
 views/layouts/main.html              | 65 ++++++++++++++++++++++++++++
 views/partials/message-bot.html      | 17 +++++++-
 views/partials/popover-models.html   |  2 +-
 views/partials/popover-settings.html |  2 +-
 views/partials/popover-usage.html    |  2 +-
 7 files changed, 86 insertions(+), 9 deletions(-)

diff --git a/static/style.css b/static/style.css
index 4365e62..099606a 100644
--- a/static/style.css
+++ b/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 {
diff --git a/utils.go b/utils.go
index c7b64f3..a2adfdb 100644
--- a/utils.go
+++ b/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[^>]*>)`
diff --git a/views/layouts/main.html b/views/layouts/main.html
index d26ff71..8be7c1f 100644
--- a/views/layouts/main.html
+++ b/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>
\ No newline at end of file
diff --git a/views/partials/message-bot.html b/views/partials/message-bot.html
index 8fe6ccc..e55d2d2 100644
--- a/views/partials/message-bot.html
+++ b/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>
diff --git a/views/partials/popover-models.html b/views/partials/popover-models.html
index 0261c98..804e2a5 100644
--- a/views/partials/popover-models.html
+++ b/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>
diff --git a/views/partials/popover-settings.html b/views/partials/popover-settings.html
index dfc7ca8..bc490d5 100644
--- a/views/partials/popover-settings.html
+++ b/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>
diff --git a/views/partials/popover-usage.html b/views/partials/popover-usage.html
index 8e41cb1..967d558 100644
--- a/views/partials/popover-usage.html
+++ b/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>