Add save button to code blocks.

static/chat.css

@@ -490,4 +490,42 @@
 }
 .code-block:hover .copy-btn {
     display: block;
+}
+
+
+.save-btn {
+    background-color: var(--button-background);
+    font-size: var(--font-size-small);
+    border-radius: 5px;
+    border: 1px solid var(--button-border);
+    color: var(--button-textcolor);
+    position: absolute;
+    top: 10px;
+    right: 82px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 4px;
+    padding-bottom: 0px;
+    height: 30px;
+    display: none;
+    cursor: pointer;
+}
+
+.save-btn.clicked {
+    padding-top: 0px;
+    background-color: var(--button-disabled-background);
+    border: 1px solid var(--button-disabled-border);
+}
+
+.save-btn.clicked:hover {
+    cursor: unset;
+    filter: unset;
+}
+
+.save-btn:hover {
+    filter: brightness(var(--hover-brightness));
+    cursor: pointer;
+}
+.code-block:hover .save-btn {
+    display: block;
 }

static/chat.js

@@ -31,7 +31,8 @@ renderer.code = function(code, infostring, escaped) {
     return `
         <div class="code-block">
             <pre><code>${escapedCode}</code></pre>
-            <button id="${uniqueId}" data-clipboard-text="${escape(code)}" class="copy-btn">🗎 Copy</button>
+            <button id="save-${uniqueId}" data-text="${escape(code)}" class="save-btn">🖫 Save...</button>
+            <button id="copy-${uniqueId}" data-clipboard-text="${escape(code)}" class="copy-btn">🗎 Copy</button>
         </div>
     `;
 };
@@ -63,7 +64,7 @@ export class Chat {
         this.labels = new Map();
         this.currentView = null;
 
-        // Handle copy button in any dynamically added child elements
+        // Handle copy and save buttons in any dynamically added child elements
 
         layout.addEventListener('click', function(event) {
             if (event.target && event.target.classList.contains('copy-btn')) {
@@ -76,15 +77,25 @@ export class Chat {
                     console.error('Error in copying text: ', err);
                 });
             }
+
+            if (event.target && event.target.classList.contains('save-btn')) {
+                const text = unescape(event.target.getAttribute('data-text'));
+                util.saveStringDialog(text);
+            }
         });
 
         layout.addEventListener('mouseleave', function(event) {
             if (event.target && event.target.classList.contains('code-block')) {
-                const button = event.target.querySelector('.copy-btn');
+                let button = event.target.querySelector('.copy-btn');
                 if (button) {
                     button.textContent = '🗎 Copy'; // Revert button text to "Copy"
                     button.classList.remove("clicked");
                 }
+                button = event.target.querySelector('.save-btn');
+                if (button) {
+                    button.textContent = '🖫 Save...'; // Revert button text to "Copy"
+                    button.classList.remove("clicked");
+                }
             }
         }, true);
 

static/util.js

@@ -196,4 +196,16 @@ export function escape(str) {
         .replace(/\f/g, '\\f')
 //        .replace(/"/g, '\\"')
 //        .replace(/'/g, "\\'");
-}
+}
+
+export function saveStringDialog(textString) {
+    const textBlob = new Blob([textString], { type: 'text/plain' });
+    const textUrl = URL.createObjectURL(textBlob);
+    const downloadLink = document.createElement("a");
+    downloadLink.download = "codeblock.txt";
+    downloadLink.href = textUrl;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+    URL.revokeObjectURL(textUrl);
+}