Update static/index.html

static/index.html

@@ -22,6 +22,7 @@
             --quote-color: #4CAF50;
         }
 
+        /* Reset and Base Styles */
         * {
             box-sizing: border-box;
             margin: 0;
@@ -30,7 +31,7 @@
 
         html, body {
             height: 100%;
-            overflow: hidden;
+            overflow: hidden; /* Prevent scrolling on main body */
         }
 
         body {
@@ -48,22 +49,26 @@
             flex-direction: column;
             height: 100%;
             width: 100%;
-            max-width: 800px;
-            margin: 0 auto;
+            max-width: 800px; /* Max width for larger screens */
+            margin: 0 auto; /* Center the container */
+            border-left: 1px solid var(--border-color); /* Optional: add subtle borders */
+            border-right: 1px solid var(--border-color);
         }
 
         .chat-area {
-            flex-grow: 1;
-            overflow-y: auto;
+            flex-grow: 1; /* Takes remaining vertical space */
+            overflow-y: auto; /* Enable scrolling for chat messages */
             padding: 20px 16px;
             display: flex;
             flex-direction: column;
         }
 
+        /* Welcome Screen */
         .welcome-screen {
             text-align: center;
-            margin: auto;
+            margin: auto; /* Center content vertically and horizontally */
             color: var(--placeholder-color);
+            padding: 20px;
         }
 
         .welcome-screen h2 {
@@ -72,75 +77,53 @@
             margin-bottom: 10px;
         }
         
+        .welcome-screen p {
+            font-size: 1rem;
+            line-height: 1.5;
+        }
+
         .welcome-screen.hidden {
-            display: none;
+            display: none; /* Hide when chat starts */
         }
 
+        /* Message Bubbles */
         .message {
-            max-width: 85%;
+            max-width: 85%; /* Limit bubble width */
             padding: 12px 16px;
             border-radius: 18px;
             margin-bottom: 12px;
-            word-wrap: break-word;
+            word-wrap: break-word; /* Ensure long words wrap */
             line-height: 1.6;
             font-size: 1rem;
+            position: relative; /* For audio button positioning */
+            animation: fadeIn 0.3s ease-out; /* Fade in animation for new messages */
         }
 
         .user-message {
             background-color: var(--user-bubble-color);
-            align-self: flex-end;
-            border-bottom-right-radius: 4px;
+            align-self: flex-end; /* Align user messages to the right */
+            border-bottom-right-radius: 4px; /* Slight variation for visual appeal */
         }
 
         .ai-message {
             background-color: var(--ai-bubble-color);
-            align-self: flex-start;
-            border-bottom-left-radius: 4px;
+            align-self: flex-start; /* Align AI messages to the left */
+            border-bottom-left-radius: 4px; /* Slight variation for visual appeal */
+            padding-bottom: 30px; /* Space for audio button at the bottom */
         }
 
-        /* Enhanced AI message styling */
+        /* AI Message Content Styling (for markdown-converted HTML) */
         .ai-message-content {
-            overflow: hidden;
-        }
-
-        .ai-message-content p {
-            margin-bottom: 12px;
-        }
-
-        .ai-message-content p:last-child {
-            margin-bottom: 0;
-        }
-
-        .ai-message-content strong {
-            color: #ffffff;
-            font-weight: 600;
-        }
-
-        .ai-message-content em {
-            color: #d1d1d1;
-            font-style: italic;
-        }
-
-        .ai-message-content a {
-            color: var(--link-color);
-            text-decoration: none;
-            word-break: break-all;
-        }
-
-        .ai-message-content a:hover {
-            text-decoration: underline;
-        }
-
-        .ai-message-content ul,
-        .ai-message-content ol {
-            padding-left: 24px;
-            margin-bottom: 12px;
-        }
-
-        .ai-message-content li {
-            margin-bottom: 6px;
-        }
-
+            overflow: hidden; /* Contains floats/margins */
+        }
+        .ai-message-content p { margin-bottom: 12px; }
+        .ai-message-content p:last-child { margin-bottom: 0; } /* No bottom margin on last paragraph */
+        .ai-message-content strong { color: #ffffff; font-weight: 600; }
+        .ai-message-content em { color: #d1d1d1; font-style: italic; }
+        .ai-message-content a { color: var(--link-color); text-decoration: none; word-break: break-all; }
+        .ai-message-content a:hover { text-decoration: underline; }
+        .ai-message-content ul, .ai-message-content ol { padding-left: 24px; margin-bottom: 12px; }
+        .ai-message-content li { margin-bottom: 6px; }
         .ai-message-content blockquote {
             border-left: 3px solid var(--quote-color);
             padding-left: 12px;
@@ -148,15 +131,14 @@
             color: #bdbdbd;
             margin-bottom: 12px;
         }
-
+        /* Code Blocks */
         .ai-message-content pre {
             background-color: var(--code-bg-color);
             border-radius: 6px;
             padding: 12px;
-            overflow-x: auto;
+            overflow-x: auto; /* Enable horizontal scrolling for long code lines */
             margin-bottom: 12px;
         }
-
         .ai-message-content code {
             font-family: 'Courier New', Courier, monospace;
             background-color: var(--code-bg-color);
@@ -164,29 +146,73 @@
             border-radius: 3px;
             color: var(--code-text-color);
             font-size: 0.9em;
+            white-space: pre-wrap; /* Preserve whitespace and wrap long lines */
+        }
+        /* Inline code styling specific for the `code-block` class which is on `pre` */
+        .ai-message-content .code-block code {
+            padding: 0; /* Code inside pre shouldn't have extra padding */
+            background-color: transparent; /* No background for code inside pre */
+            color: inherit; /* Inherit color from pre */
         }
 
-        .ai-message-content .code-block {
-            display: block;
-            white-space: pre-wrap;
-            padding: 12px;
-            border-radius: 6px;
-            background-color: var(--code-bg-color);
-            margin-bottom: 12px;
+        /* Audio Button Styling */
+        .audio-button {
+            position: absolute;
+            bottom: 6px;
+            right: 8px;
+            background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
+            border: none;
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            z-index: 10; /* Ensure it's above message content */
         }
-        
+        .audio-button:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .audio-button svg {
+            width: 18px;
+            height: 18px;
+            fill: var(--icon-color);
+            transition: fill 0.2s;
+        }
+        .audio-button:hover svg {
+            fill: white; /* Icon brighter on hover */
+        }
+        /* Loading spinner for audio button */
+        .audio-button.loading .speaker-icon {
+            display: none; /* Hide speaker icon when loading */
+        }
+        .audio-button .loader {
+            display: none; /* Hidden by default */
+            width: 18px;
+            height: 18px;
+            border: 2px solid #f3f3f3; /* Light grey border */
+            border-top: 2px solid var(--send-button-color); /* Green top border for spinner */
+            border-radius: 50%;
+            animation: spin 1s linear infinite; /* Spin animation */
+        }
+        .audio-button.loading .loader {
+            display: block; /* Show spinner when loading */
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Typing Indicator */
         .typing-indicator {
             display: flex;
             align-items: center;
             padding: 12px 16px;
         }
         .typing-indicator span {
-            height: 8px;
-            width: 8px;
-            background-color: var(--icon-color);
-            border-radius: 50%;
-            display: inline-block;
-            margin: 0 2px;
+            height: 8px; width: 8px; background-color: var(--icon-color); border-radius: 50%; display: inline-block; margin: 0 2px;
             animation: bounce 1.4s infinite both;
         }
         .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
@@ -197,46 +223,40 @@
             40% { transform: scale(1.0); }
         }
 
+        /* Input Area */
         .input-area {
             display: flex;
-            align-items: flex-end;
+            align-items: flex-end; /* Align items to the bottom (textarea can grow) */
             padding: 10px 16px;
             border-top: 1px solid var(--border-color);
             background-color: var(--input-area-color);
-            flex-shrink: 0;
+            flex-shrink: 0; /* Prevent shrinking */
         }
-
         .input-wrapper {
             display: flex;
             align-items: center;
             width: 100%;
             background-color: var(--user-bubble-color);
-            border-radius: 24px;
+            border-radius: 24px; /* Pill-shaped input */
             padding: 4px;
         }
-
         .input-area textarea {
-            flex-grow: 1;
+            flex-grow: 1; /* Takes up available space */
             border: none;
             background: transparent;
             color: var(--text-color);
-            resize: none;
+            resize: none; /* Disable manual resize */
             font-size: 1rem;
             line-height: 1.5;
-            max-height: 120px;
-            overflow-y: auto;
+            max-height: 120px; /* Max height for textarea */
+            overflow-y: auto; /* Scroll if content exceeds max height */
             padding: 8px 12px;
-            font-family: inherit;
-        }
-
-        .input-area textarea:focus {
-            outline: none;
-        }
-
-        .input-area textarea::placeholder {
-            color: var(--placeholder-color);
+            font-family: inherit; /* Inherit font from body */
+            outline: none; /* Remove focus outline */
         }
+        .input-area textarea::placeholder { color: var(--placeholder-color); }
 
+        /* Icon Buttons (Attach, Send) */
         .input-area .icon-button {
             background: none;
             border: none;
@@ -245,53 +265,43 @@
             display: flex;
             align-items: center;
             justify-content: center;
+            transition: opacity 0.2s;
         }
-
-        .input-area .icon-button svg {
-            width: 24px;
-            height: 24px;
-            fill: var(--icon-color);
+        .input-area .icon-button:hover {
+            opacity: 0.8;
         }
+        .input-area .icon-button svg { width: 24px; height: 24px; fill: var(--icon-color); }
         
         .send-button {
             background-color: var(--send-button-color);
             border-radius: 50%;
             padding: 8px;
-            transition: background-color 0.2s;
+            transition: background-color 0.2s, opacity 0.2s;
         }
-        
         .send-button.disabled {
             background-color: #555;
             cursor: not-allowed;
+            opacity: 0.6;
         }
-        
         .send-button.disabled svg {
             fill: #888;
         }
-
-        .send-button svg {
-            fill: white;
-            width: 24px;
-            height: 24px;
-        }
+        .send-button svg { fill: white; width: 24px; height: 24px; }
 
         /* Animation for new messages */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
             to { opacity: 1; transform: translateY(0); }
         }
-
-        .message {
-            animation: fadeIn 0.3s ease-out;
-        }
     </style>
 </head>
 <body>
     <div class="chat-container">
         <main class="chat-area">
             <div class="welcome-screen">
-                <h2>What can I help with?</h2>
-                <p>Ask me anything - I can explain concepts, generate ideas, or help with coding!</p>
+                <h2>Welcome to AstroChat!</h2>
+                <p>Hello! I'm your AI assistant powered by Gemini. Ask me anything - I can explain concepts, generate ideas, or help with coding!</p>
+                <p>Try asking me something like: <em>"Explain quantum computing in simple terms"</em> or <em>"Help me debug this Python code"</em></p>
             </div>
         </main>
 
@@ -317,45 +327,60 @@
             const sendButton = document.getElementById('send-button');
             const attachButton = document.getElementById('attach-button');
 
-            // Auto-resize textarea
+            // Global variable to hold the currently playing audio object
+            let currentAudio = null;
+
+            // Adjusts the height of the textarea based on content
             const adjustTextareaHeight = () => {
-                messageInput.style.height = 'auto';
-                messageInput.style.height = `${messageInput.scrollHeight}px`;
-                updateSendButtonState();
+                messageInput.style.height = 'auto'; // Reset height
+                messageInput.style.height = `${messageInput.scrollHeight}px`; // Set to scroll height
+                updateSendButtonState(); // Update send button state after height adjustment
             };
 
-            // Update send button state
+            // Updates the disabled state of the send button
             const updateSendButtonState = () => {
-                if (messageInput.value.trim() === '') {
-                    sendButton.classList.add('disabled');
-                    sendButton.disabled = true;
-                } else {
-                    sendButton.classList.remove('disabled');
-                    sendButton.disabled = false;
-                }
+                const isDisabled = messageInput.value.trim() === '';
+                sendButton.classList.toggle('disabled', isDisabled);
+                sendButton.disabled = isDisabled;
             };
             
-            // Scroll to bottom of chat
+            // Scrolls the chat area to the bottom
             const scrollToBottom = () => {
                 chatArea.scrollTop = chatArea.scrollHeight;
             };
 
-            // Add message to chat
-            const addMessage = (content, sender, isHTML = false) => {
-                if (!welcomeScreen.classList.contains('hidden')) {
-                    welcomeScreen.classList.add('hidden');
-                }
+            // Adds a message to the chat area
+            // `plainText` is used specifically for audio generation, keeping original text without HTML
+            const addMessage = (content, sender, isHTML = false, plainText = '') => {
+                welcomeScreen.classList.add('hidden'); // Hide welcome screen once chat begins
                 
                 const messageElement = document.createElement('div');
                 messageElement.classList.add('message', `${sender}-message`);
                 
+                const contentDiv = document.createElement('div');
                 if (isHTML) {
-                    const contentDiv = document.createElement('div');
                     contentDiv.classList.add(`${sender}-message-content`);
-                    contentDiv.innerHTML = content;
-                    messageElement.appendChild(contentDiv);
+                    contentDiv.innerHTML = content; // Set innerHTML for HTML content
                 } else {
-                    messageElement.textContent = content;
+                    contentDiv.textContent = content; // Set textContent for plain text
+                }
+                messageElement.appendChild(contentDiv);
+
+                // Add audio button for AI messages
+                if (sender === 'ai' && plainText) {
+                    const audioButton = document.createElement('button');
+                    audioButton.classList.add('audio-button');
+                    // Store the plain text directly on the button for easy retrieval
+                    audioButton.dataset.plainText = plainText; 
+                    audioButton.innerHTML = `
+                        <svg class="speaker-icon" viewBox="0 0 24 24">
+                            <path d="M3 10v4c0 .55.45 1 1 1h3.5l5.5 5V5L7.5 9H4c-.55 0-1 .45-1 1zm14 0h-1.5c-2.31 0-4.22-1.74-4.47-4H10v12h1.5v-2.22c.25-2.26 2.16-4.22 4.47-4.22H17c1.1 0 2 .9 2 2s-.9 2-2 2h-1.5v2H17c2.21 0 4-1.79 4-4s-1.79-4-4-4z"/>
+                        </svg>
+                        <div class="loader"></div>
+                    `;
+                    audioButton.title = "Listen to response"; // Add tooltip
+                    audioButton.addEventListener('click', () => playAudio(audioButton, plainText));
+                    messageElement.appendChild(audioButton);
                 }
                 
                 chatArea.appendChild(messageElement);
@@ -363,19 +388,72 @@
                 return messageElement;
             };
             
-            // Show typing indicator
+            // Displays a typing indicator for the AI
             const showTypingIndicator = () => {
                 const indicatorElement = document.createElement('div');
                 indicatorElement.classList.add('message', 'ai-message', 'typing-indicator');
                 indicatorElement.innerHTML = '<span></span><span></span><span></span>';
                 chatArea.appendChild(indicatorElement);
                 scrollToBottom();
-                return indicatorElement;
+                return indicatorElement; // Return element to remove it later
             };
 
-            // Get AI response from backend
+            // Plays audio for a given text
+            const playAudio = async (buttonElement, text) => {
+                // Stop any currently playing audio
+                if (currentAudio) {
+                    currentAudio.pause();
+                    currentAudio.currentTime = 0;
+                    currentAudio = null;
+                }
+
+                buttonElement.classList.add('loading'); // Show loading spinner
+                buttonElement.disabled = true; // Disable button during loading
+
+                try {
+                    const response = await fetch('/generate-audio', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ text: text })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.error) {
+                        throw new Error(data.error);
+                    }
+                    
+                    currentAudio = new Audio(data.audio_url);
+                    currentAudio.play();
+
+                    // Remove loading state when audio ends
+                    currentAudio.onended = () => {
+                        buttonElement.classList.remove('loading');
+                        buttonElement.disabled = false;
+                        currentAudio = null;
+                    };
+
+                    // Handle audio playback errors
+                    currentAudio.onerror = () => {
+                        console.error("Error playing audio.");
+                        alert("Could not play audio. Please try again.");
+                        buttonElement.classList.remove('loading');
+                        buttonElement.disabled = false;
+                        currentAudio = null;
+                    };
+                    
+                } catch (error) {
+                    console.error("Error generating audio:", error);
+                    alert("Failed to generate audio. " + (error.message || "Please try again."));
+                    buttonElement.classList.remove('loading');
+                    buttonElement.disabled = false;
+                }
+            };
+
+
+            // Fetches AI response from the backend
             const getAIResponse = async (userMessage) => {
-                const indicator = showTypingIndicator();
+                const indicator = showTypingIndicator(); // Show typing indicator
                 
                 try {
                     const response = await fetch('/chat', {
@@ -392,68 +470,65 @@
                         throw new Error(data.error);
                     }
                     
+                    // Remove typing indicator before adding the actual message
                     chatArea.removeChild(indicator);
-                    addMessage(data.response, 'ai', true);
+                    // Add AI message with both HTML and plain text
+                    addMessage(data.response_html, 'ai', true, data.response_text);
                     
                 } catch (error) {
-                    chatArea.removeChild(indicator);
+                    chatArea.removeChild(indicator); // Remove indicator on error too
                     addMessage("Sorry, I encountered an error. Please try again.", 'ai');
                     console.error("Error:", error);
                 }
             };
 
-            // Handle form submission
+            // Event listener for form submission
             chatForm.addEventListener('submit', async (e) => {
-                e.preventDefault();
+                e.preventDefault(); // Prevent default form submission behavior (page reload)
                 const message = messageInput.value.trim();
                 
                 if (message) {
-                    addMessage(message, 'user');
-                    messageInput.value = '';
-                    adjustTextareaHeight();
+                    addMessage(message, 'user'); // Add user message to chat
+                    messageInput.value = ''; // Clear input field
+                    adjustTextareaHeight(); // Reset textarea height
                     
-                    await getAIResponse(message);
+                    await getAIResponse(message); // Get AI response
                 }
             });
 
-            // Handle Enter key
+            // Event listener for Enter key (send message) and Shift+Enter (new line)
             messageInput.addEventListener('keydown', (e) => {
                 if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    chatForm.dispatchEvent(new Event('submit'));
+                    e.preventDefault(); // Prevent new line
+                    chatForm.dispatchEvent(new Event('submit')); // Trigger form submission
                 }
             });
 
-            // Textarea input events
+            // Event listener for input changes to adjust textarea height and send button state
             messageInput.addEventListener('input', adjustTextareaHeight);
             
-            // Attach button placeholder
+            // Attach button (placeholder functionality)
             attachButton.addEventListener('click', () => {
-                // Future implementation for file attachments
-                messageInput.focus();
+                // In a real app, this would open a file dialog
+                alert("Attachment feature not implemented yet!");
+                messageInput.focus(); // Keep focus on message input
             });
             
-            // Initial setup
-            updateSendButtonState();
-            messageInput.focus();
+            // Initial setup on page load
+            updateSendButtonState(); // Set initial state of send button
+            messageInput.focus(); // Focus on the input field
 
-            // Example first message on first load
+            // Optional: Initial welcome message from AI on first visit
             const isFirstVisit = !localStorage.getItem('chatVisited');
             if (isFirstVisit) {
                 localStorage.setItem('chatVisited', 'true');
+                // Use a timeout to allow page to load fully before first message appears
                 setTimeout(() => {
-                    const welcomeMessage = `
-                    <p>Hello! I'm your AI assistant powered by Gemini. I can help with:</p>
-                    <ul>
-                        <li>Answering questions</li>
-                        <li>Explaining concepts</li>
-                        <li>Generating ideas</li>
-                        <li>Coding help</li>
-                    </ul>
-                    <p>Try asking me something like: <em>"Explain quantum computing in simple terms"</em> or <em>"Help me debug this Python code"</em></p>
-                    `;
-                    addMessage(welcomeMessage, 'ai', true);
-                }, 1000);
+                    // The welcome screen now has content, so we just let it display initially.
+                    // If you want an AI message to appear *after* the welcome screen and replace it,
+                    // you'd use addMessage here instead of directly rendering text in welcome-screen div.
+                    // For now, the welcome screen itself has the initial greeting.
+                }, 500);
             }
         });
     </script>