Update static/script.js

static/script.js

@@ -1,40 +1,227 @@
-async function fetchMessageFromAI() {
-    const messageInput = document.getElementById("user-message");
-    const responseParagraph = document.getElementById("ai-response");
-    const typingIndicator = document.getElementById("typing-indicator");
+    let isRecording = false;
+    let recognition;
+    let responsesHistory = {}; // Holds all responses per prompt
+    let currentIndex = {};     // Track current response index
 
-    const message = messageInput.value;
+    function initSpeechRecognition() {
+        window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        recognition = new SpeechRecognition();
+        recognition.lang = 'en-US';
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
 
-    if (!message) {
-        responseParagraph.innerText = "Please enter a message.";
-        return;
+        recognition.onresult = function(event) {
+            const transcript = event.results[0][0].transcript;
+            sendMessageFromVoice(transcript);
+        };
+        recognition.onerror = function(event) {
+            console.log("Speech recognition error:", event.error);
+        };
     }
 
-    typingIndicator.style.display = "block";
+    const micIcon = document.getElementById('mic-icon');
+    micIcon.addEventListener('mousedown', function() {
+        isRecording = true;
+        micIcon.textContent = 'mic_off';
+        recognition.start();
+    });
 
-    try {
-        const response = await fetch("/message", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({ text: message }),
-        });
+    micIcon.addEventListener('mouseup', function() {
+        isRecording = false;
+        micIcon.textContent = 'mic';
+        recognition.stop();
+    });
+
+    function appendMessage(text, className) {
+        let chatbox = document.getElementById('chatbox');
+        let messageDiv = document.createElement('div');
+        messageDiv.className = 'message ' + className;
+        messageDiv.innerHTML = text;
+        chatbox.appendChild(messageDiv);
+        chatbox.scrollTop = chatbox.scrollHeight;
+    }
+
+    function sendMessageFromVoice(message) {
+        appendMessage(message, 'user');
+        fetchMessageFromAI(message);
+    }
 
+    function sendMessage() {
+        let userInput = document.getElementById('user-input');
+        let message = userInput.value.trim();
+        if (message === '') return;
+        appendMessage(message, 'user');
+        userInput.value = '';
+        fetchMessageFromAI(message);
+    }
+
+function fetchMessageFromAI(message) {
+    document.getElementById('typing-indicator').style.display = 'flex';
+
+    fetch('/message', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ text: message })
+    })
+    .then(response => {
         if (!response.ok) {
             throw new Error(`Server error: ${response.statusText}`);
         }
-
-        const data = await response.json();
-        typingIndicator.style.display = "none";
+        return response.json();
+    })
+    .then(data => {
+        document.getElementById('typing-indicator').style.display = 'none';
 
         if (data.response) {
-            responseParagraph.innerText = data.response;
+            addAIResponse(data.response, message);
         } else {
-            responseParagraph.innerText = "No response from the AI.";
+            console.error("No response from the server.");
         }
-    } catch (error) {
-        typingIndicator.style.display = "none";
-        responseParagraph.innerText = `Error: ${error.message}`;
-    }
+    })
+    .catch(error => {
+        document.getElementById('typing-indicator').style.display = 'none';
+        console.error('Error:', error);
+        appendMessage("An error occurred. Please try again later.", 'ai');
+    });
 }
+
+
+
+function addAIResponse(responseText, userPrompt) {
+        const responseId = Date.now();
+        responsesHistory[responseId] = [responseText];
+        currentIndex[responseId] = 0;
+        renderAIResponse(responseText, responseId, userPrompt);
+    }
+
+function renderAIResponse(responseText, responseId, userPrompt) {
+        let chatbox = document.getElementById('chatbox');
+        let messageDiv = document.createElement('div');
+        messageDiv.className = 'message ai';
+        messageDiv.dataset.responseId = responseId;
+        messageDiv.dataset.userPrompt = userPrompt; // Store the prompt
+
+        let responseTextDiv = document.createElement('div');
+        responseTextDiv.className = 'response-text';
+        responseTextDiv.innerHTML = responseText;
+        messageDiv.appendChild(responseTextDiv);
+
+        let iconsDiv = document.createElement('div');
+        iconsDiv.className = 'icons';
+
+        let speakerIcon = document.createElement('span');
+        speakerIcon.className = 'material-icons';
+        speakerIcon.innerText = 'volume_up';
+        speakerIcon.onclick = () => speakText(responseId);
+
+        let copyIcon = document.createElement('span');
+        copyIcon.className = 'material-icons';
+        copyIcon.innerText = 'content_copy';
+        copyIcon.onclick = () => copyResponse(responseId);
+
+        let regenerateIcon = document.createElement('span');
+        regenerateIcon.className = 'material-icons';
+        regenerateIcon.innerText = 'replay';
+        regenerateIcon.onclick = () => regenerateResponse(responseId, responseTextDiv, iconsDiv);
+
+        iconsDiv.appendChild(speakerIcon);
+        iconsDiv.appendChild(copyIcon);
+        iconsDiv.appendChild(regenerateIcon);
+        messageDiv.appendChild(iconsDiv);
+        chatbox.appendChild(messageDiv);
+        chatbox.scrollTop = chatbox.scrollHeight;
+    }
+
+    function regenerateResponse(responseId, responseTextDiv, iconsDiv) {
+        responseTextDiv.innerHTML = 'Generating new response...';
+
+        // Get the original prompt from the dataset
+        const messageDiv = document.querySelector(`[data-response-id="${responseId}"]`);
+        const originalPrompt = messageDiv.dataset.userPrompt;
+
+        fetch('/message', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ text: originalPrompt }) // Use the original prompt
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.response) {
+                responsesHistory[responseId].push(data.response);
+                currentIndex[responseId] = responsesHistory[responseId].length - 1;
+                displayUpdatedResponse(responseId, data.response, iconsDiv);
+            } else {
+                responseTextDiv.innerHTML = 'Error generating response';
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            responseTextDiv.innerHTML = 'Error generating response';
+        });
+    }
+
+    function displayUpdatedResponse(responseId, newResponse, iconsDiv) {
+        let messageDiv = document.querySelector(`[data-response-id="${responseId}"]`);
+        let responseTextDiv = messageDiv.querySelector('.response-text');
+        responseTextDiv.innerHTML = newResponse;
+
+        // Remove existing navigation if present
+        const existingNav = messageDiv.querySelector('.navigation');
+        if (existingNav) {
+            existingNav.remove();
+        }
+
+        let navigationDiv = document.createElement('div');
+        navigationDiv.className = 'navigation';
+        iconsDiv.appendChild(navigationDiv);
+
+        let backIcon = document.createElement('span');
+        backIcon.className = 'material-icons';
+        backIcon.innerText = 'arrow_back';
+        backIcon.onclick = () => navigateResponse(responseId, -1, responseTextDiv, navigationDiv);
+
+        let nextIcon = document.createElement('span');
+        nextIcon.className = 'material-icons';
+        nextIcon.innerText = 'arrow_forward';
+        nextIcon.onclick = () => navigateResponse(responseId, 1, responseTextDiv, navigationDiv);
+
+        let responseIndexText = document.createElement('span');
+        responseIndexText.className = 'response-index';
+
+        navigationDiv.appendChild(backIcon);
+        navigationDiv.appendChild(responseIndexText);
+        navigationDiv.appendChild(nextIcon);
+
+        updateResponseIndex(responseId, responseIndexText);
+    }
+
+    function navigateResponse(responseId, direction, responseTextDiv, navigationDiv) {
+        currentIndex[responseId] += direction;
+        currentIndex[responseId] = Math.max(0, Math.min(currentIndex[responseId], responsesHistory[responseId].length - 1));
+        responseTextDiv.innerHTML = responsesHistory[responseId][currentIndex[responseId]];
+        updateResponseIndex(responseId, navigationDiv.querySelector('.response-index'));
+    }
+
+    function updateResponseIndex(responseId, responseIndexText) {
+        responseIndexText.innerText = `${currentIndex[responseId] + 1}/${responsesHistory[responseId].length}`;
+    }
+
+    // Updated function to speak the current response
+    function speakText(responseId) {
+        const text = responsesHistory[responseId][currentIndex[responseId]];
+        const utterance = new SpeechSynthesisUtterance(text);
+        speechSynthesis.speak(utterance);
+    }
+
+    // Updated function to copy the current response
+    function copyResponse(responseId) {
+        const text = responsesHistory[responseId][currentIndex[responseId]];
+        navigator.clipboard.writeText(text);
+        alert("Copied: " + text);
+    }
+
+    document.addEventListener('DOMContentLoaded', initSpeechRecognition);