Update script.js

script.js

@@ -8,13 +8,13 @@ if (!('webkitSpeechRecognition' in window)) {
     recognition.interimResults = false;
     recognition.lang = 'en-IN'; // Default language (can be 'hi-IN' for Hindi)
 
-    const voiceInputBtn = document.getElementById('voiceInputBtn'); // Microphone icon
+    const micButton = document.getElementById('micButton'); // Microphone icon
     const userInput = document.getElementById('userInput'); // Text input field
-    const chatHistory = document.getElementById('chatHistory'); // Chat history container
+    const chatBody = document.getElementById('chatBody'); // Chat history container
 
     // Voice Input Button Click Event
-    voiceInputBtn.addEventListener('click', () => {
-        if (voiceInputBtn.classList.contains('active')) {
+    micButton.addEventListener('click', () => {
+        if (micButton.classList.contains('active')) {
             recognition.stop(); // Stop if already active
         } else {
             recognition.start(); // Start listening
@@ -23,100 +23,143 @@ if (!('webkitSpeechRecognition' in window)) {
 
     // When speech recognition starts
     recognition.onstart = () => {
-        voiceInputBtn.classList.add('active'); // Change mic color to green
-        console.log('Speech recognition started');
+        micButton.classList.add('active'); // Change mic color to green
     };
 
     // When speech recognition ends
     recognition.onend = () => {
-        voiceInputBtn.classList.remove('active'); // Reset mic color to red
-        console.log('Speech recognition ended');
+        micButton.classList.remove('active'); // Reset mic color to red
     };
 
     // When speech recognition result is detected
     recognition.onresult = (event) => {
         const transcript = event.results[0][0].transcript;
-        console.log('Speech recognition result:', transcript);
         userInput.value = transcript; // Fill the input with transcribed text
         sendMessage(); // Call sendMessage after getting the input
     };
 
     // Handle errors during speech recognition
     recognition.onerror = (event) => {
-        console.error('Speech recognition error detected:', event.error);
         alert('Speech recognition error: ' + event.error);
-        voiceInputBtn.classList.remove('active'); // Reset mic color to red if error occurs
+        micButton.classList.remove('active'); // Reset mic color to red if error occurs
     };
 }
 
+// Add an event listener to the input field to detect the Enter key
+const userInput = document.getElementById('userInput');
+
+userInput.addEventListener('keydown', function(event) {
+    // Check if the Enter key (key code 13) is pressed
+    if (event.key === 'Enter') {
+        event.preventDefault(); // Prevent the default behavior (new line)
+        sendMessage(); // Call your send message function
+    }
+});
+
+
+function toggleHistory() {
+    const historyPanel = document.querySelector('.history-panel');
+    const chatHistoryText = document.querySelector('.chat-history-text');
+    
+    // Toggle the width of the history panel
+    if (historyPanel.style.width === '0px') {
+        historyPanel.style.width = '250px'; // Open the panel
+        chatHistoryText.style.display = 'block'; // Show "Chat History" text
+    } else {
+        historyPanel.style.width = '0px'; // Close the panel
+        chatHistoryText.style.display = 'none'; // Hide "Chat History" text
+    }
+}
+
+
+function toggleMenu() {
+    const menu = document.querySelector('.three-dot-menu .menu-options');
+    menu.classList.toggle('active');
+}
+
 // Text-to-Speech function
-function speakText(text) {
-    if ('speechSynthesis' in window) {
-        const speech = new SpeechSynthesisUtterance(text);
-        speech.lang = 'en-IN'; // Can set 'hi-IN' for Hindi response
-        window.speechSynthesis.speak(speech);
+function speakText(text, language) {
+    const utterance = new SpeechSynthesisUtterance(text);
+
+    // Set the correct language for speech synthesis
+    if (language === 'hi') {
+        utterance.lang = 'hi-IN';  // Hindi
     } else {
-        alert('Text-to-Speech not supported in your browser.');
+        utterance.lang = 'en-IN';  // English (India)
     }
+
+    // Speak the text
+    window.speechSynthesis.speak(utterance);
+
+    // if ('speechSynthesis' in window) {
+    //     const speech = new SpeechSynthesisUtterance(text);
+    //     speech.lang = 'en-IN'; // Can set 'hi-IN' for Hindi response
+    //     window.speechSynthesis.speak(speech);
+    // } else {
+    //     alert('Text-to-Speech not supported in your browser.');
+    // }
 }
 
-// Function to handle sending a message (with or without voice)
 function sendMessage() {
-  const message = userInput.value;
-  
-  if (message.trim() !== '') {
-    appendMessage(message, 'user-message');
-    userInput.value = ''; // Clear input
-
-    // Disable the voiceInputBtn to prevent multiple submissions during processing
-    voiceInputBtn.disabled = true;
-    console.log("Sending message to backend:", message); // Debug log
-
-    // Send message to the backend for processing
-    fetch('https://thevera-backendvera.hf.space/generate_result', {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
+    // const message = document.getElementById('userInput').value;
+    const message = userInput.value;
+
+    if (message.trim() !== "") {
+        appendMessage(message, 'user-message')
+        userInput.value = '';
+
+        // Disable the voiceInputBtn to prevent multiple submissions during processing
+        micButton.disabled = true;
+
+        // Send message to the backend for processing
+        fetch('https://thevera-backendvera.hf.space/generate_result', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
         },
         body: JSON.stringify({ message: message })
     })
     .then(response => {
-        console.log("Response status:", response.status); // Check response status
         return response.json();
     })
     .then(data => {
-        console.log("Received data from backend:", data); // Log the received data
         const botResponse = data.response;
+        const language = data.language || 'en';
+
         appendMessage(botResponse, 'bot-message');
-        
+
         // Speak the bot's response using Text-to-Speech
-        speakText(botResponse);
+        speakText(botResponse, language);
 
         // Enable the voiceInputBtn after response
         voiceInputBtn.disabled = false;
     })
     .catch(error => {
-        console.error('Error:', error);
         alert('Failed to connect to the backend. Please try again later.');
-        
         // Enable the voiceInputBtn after error
         voiceInputBtn.disabled = false;
     });
-  }
+    }
 }
 
-// Function to append message in chat history
+let isFirstMessage = true; // Flag to track if it's the first message
+
 function appendMessage(text, className) {
+    // Remove the default message when the user sends the first message
+    if (isFirstMessage) {
+        const welcomeMessage = document.querySelector('.welcome-message');
+        if (welcomeMessage) {
+            welcomeMessage.remove();
+        }
+        isFirstMessage = false;
+    }
     const messageElement = document.createElement('div');
-    messageElement.classList.add('message', className);
+    messageElement.classList.add('user-message', className);
     messageElement.textContent = text;
-    chatHistory.appendChild(messageElement);
-    chatHistory.scrollTop = chatHistory.scrollHeight; // Auto scroll to the latest message
+    chatBody.appendChild(messageElement);
+    chatBody.scrollTop = chatBody.scrollHeight; // Auto scroll to the latest message
 }
 
-// Optionally, you can add a feature to switch languages dynamically (between Hindi and English)
-document.getElementById('languageSwitch').addEventListener('change', (e) => {
-    const selectedLanguage = e.target.value;
-    recognition.lang = selectedLanguage === 'hindi' ? 'hi-IN' : 'en-IN'; // Switch language for speech recognition
-    console.log('Speech recognition language switched to:', recognition.lang);
-});
+function activateVoice() {
+    alert('Voice input activated! This can be integrated with a voice recognition API.');
+}