Add copy button to messages and fix model/voice persistence

- Add copy button after edit button for all messages
- Fix model/voice settings persistence when creating new rooms
- Save model/voice selections to localStorage for better state management
- Ensure settings are loaded from localStorage if not in URL parameters

templates/base.html

@@ -649,6 +649,22 @@
         
         // Get current URL parameters to maintain username, model, voice, etc.
         const urlParams = new URLSearchParams(window.location.search);
+        
+        // Also check localStorage for model and voice if not in URL
+        if (!urlParams.has('model')) {
+            const storedModel = localStorage.getItem('selectedModel');
+            if (storedModel && storedModel !== 'None') {
+                urlParams.set('model', storedModel);
+            }
+        }
+        
+        if (!urlParams.has('voice')) {
+            const storedVoice = localStorage.getItem('selectedVoice');
+            if (storedVoice) {
+                urlParams.set('voice', storedVoice);
+            }
+        }
+        
         const currentParams = urlParams.toString();
         
         // Navigate to the new room using the slugified name

templates/chat.html

@@ -130,6 +130,21 @@ function sanitizeUsername(username) {
     return username.split(',')[0].trim();
 }
 
+// Function to copy message content to clipboard
+function copyMessageContent(content) {
+    navigator.clipboard.writeText(content).then(() => {
+        // Optional: show a temporary success message
+        const button = event.currentTarget;
+        const originalText = button.textContent;
+        button.textContent = 'Copied!';
+        setTimeout(() => {
+            button.textContent = originalText;
+        }, 2000);
+    }).catch(err => {
+        console.error('Error copying text: ', err);
+    });
+}
+
 // Function to sync all inputs and update the query string
 function syncInputsAndQueryString() {
     const usernameInputDesktop = document.getElementById("username-input");
@@ -240,9 +255,13 @@ document.addEventListener('DOMContentLoaded', (event) => {
         userHasScrolledUp = distanceFromBottom > 5;
     });
 
+    // Load model and voice from localStorage if not in URL
+    const storedModel = localStorage.getItem('selectedModel');
+    const storedVoice = localStorage.getItem('selectedVoice');
+    
     // Set initial model, voice, and username from URL, localStorage, or defaults
-    const initialModel = urlParams.get("model") || localStorage.getItem('selectedModel') || "None";
-    const initialVoice = urlParams.get("voice") || localStorage.getItem('selectedVoice') || "onyx";
+    const initialModel = urlParams.get("model") || storedModel || "None";
+    const initialVoice = urlParams.get("voice") || storedVoice || "onyx";
     const initialUsername = username; // Already set to URL param or "guest"
     
     modelSelectDesktop.value = initialModel;
@@ -702,6 +721,13 @@ socket.on("chat_message", (data) => {
         editButton.onclick = () => editMessage(data.id, newMessage, data.content);
         buttonContainer.appendChild(editButton);
 
+        // Create the copy button
+        const copyButton = document.createElement("button");
+        copyButton.textContent = "Copy";
+        copyButton.className = "copy-button";
+        copyButton.onclick = () => copyMessageContent(data.content);
+        buttonContainer.appendChild(copyButton);
+
         // Create the play button for TTS
         const playButton = document.createElement("button");
         playButton.textContent = "Play";
@@ -786,6 +812,13 @@ socket.on("previous_messages", (data) => {
     editButton.onclick = () => editMessage(data.id, newMessage);
     buttonContainer.appendChild(editButton);
 
+    // Create the copy button
+    const copyButton = document.createElement("button");
+    copyButton.textContent = "Copy";
+    copyButton.className = "copy-button";
+    copyButton.onclick = () => copyMessageContent(data.content);
+    buttonContainer.appendChild(copyButton);
+
     // Create the play button for TTS
     const playButton = document.createElement("button");
     playButton.textContent = "Play";
@@ -921,6 +954,13 @@ socket.on("message_chunk", (data) => {
         editButton.onclick = () => editMessage(data.id, targetMessageElement);
         buttonContainer.appendChild(editButton);
 
+        // Create the copy button
+        const copyButton = document.createElement("button");
+        copyButton.textContent = "Copy";
+        copyButton.className = "copy-button";
+        copyButton.onclick = () => copyMessageContent(messageBuffers[data.id]);
+        buttonContainer.appendChild(copyButton);
+
         // Create the play button for TTS
         const playButton = document.createElement("button");
         playButton.textContent = "Play";