Update chat.html

chat.html

@@ -668,387 +668,451 @@
             </div>
         </div>
     </div>
-    <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const chatContainer = document.getElementById('chatContainer');
-            const userInput = document.getElementById('userInput'); // This is the textarea
-            const submitButton = document.getElementById('submitButton');
-            const typingIndicator = document.getElementById('typingIndicator');
-            const welcomeMessage = document.getElementById('welcomeMessage');
-            const initialMessage = document.getElementById('initialMessage');
-            const loginPrompt = document.getElementById('loginPrompt');
-            const continueGuest = document.getElementById('continueGuest');
-
-            const addButton = document.getElementById('addButton'); // Get the new add button
-            const attachmentOptionsContainer = document.querySelector('.attachment-options-container'); // Get the options container
-
-            // New elements for file handling
-            const cameraInput = document.getElementById('cameraInput');
-            const galleryInput = document.getElementById('galleryInput');
-            const filesInput = document.getElementById('filesInput');
-            const attachedFilePreviewContainer = document.getElementById('attachedFilePreviewContainer');
-            const inputContainer = document.getElementById('inputContainer'); // The .gemini-input-container
-
-            let messageCount = 0;
-            let attachedFiles = []; // Array to store File objects
-
-            // --- Textarea Auto-Grow & Scroll Logic (Enhanced) ---
-            const style = getComputedStyle(userInput);
-            const lineHeight = parseFloat(style.lineHeight);
-            const minHeight = lineHeight; // Height for one line of text
-            const maxHeight = lineHeight * 5; // Height for 5 lines of text
-
-            // Initial padding values for the input container, adjusted for icons
-            const initialInputContainerPaddingTop = parseFloat(getComputedStyle(inputContainer).paddingTop);
-            const initialInputContainerPaddingBottom = parseFloat(getComputedStyle(inputContainer).paddingBottom);
-            const initialActionButtonsHeight = document.querySelector('.gemini-input-actions').offsetHeight; // Height of mic/send icons
-
-            function autoGrowTextarea() {
-                if (!userInput) {
-                    console.error("autoGrowTextarea called but userInput element not found.");
-                    return;
-                }
-
-                // Reset height to auto to get the true scrollHeight
-                userInput.style.height = 'auto';
-                const scrollHeight = userInput.scrollHeight;
-
-                // Calculate actual textarea height based on content, respecting min/max
-                let newTextareaHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
-                userInput.style.height = newTextareaHeight + 'px';
-
-                // Adjust padding of the input container if files are present
-                if (attachedFiles.length > 0) {
-                    // The `attachedFilePreviewContainer` already has height, we need space below it for the textarea
-                    // The overall `inputContainer` needs to grow, and `userInput`'s height is part of that.
-                    // The gap between chips and textarea is handled by `gap` on `inputContainer`.
-                    // We need to ensure the textarea's padding is minimal, and its effective content area is what's used.
-                    userInput.style.paddingTop = '0px';
-                    userInput.style.paddingBottom = '0px';
-                    inputContainer.style.alignItems = 'flex-start'; // Align content to the top
-                } else {
-                    // Reset to default alignment and padding if no files
-                    userInput.style.paddingTop = '0px'; // Controlled by the overall inputContainer padding
-                    userInput.style.paddingBottom = '0px'; // Controlled by the overall inputContainer padding
-                    inputContainer.style.alignItems = 'flex-end'; // Align to bottom for default state
-                }
-
-                // Manage overflow-y based on whether it hits max height
-                if (scrollHeight > maxHeight) {
-                    userInput.style.overflowY = 'auto';
-                } else {
-                    userInput.style.overflowY = 'hidden';
-                }
+  <script>
+document.addEventListener('DOMContentLoaded', function() {
+    const chatContainer = document.getElementById('chatContainer');
+    const userInput = document.getElementById('userInput'); // textarea
+    const submitButton = document.getElementById('submitButton');
+    const typingIndicator = document.getElementById('typingIndicator');
+    const welcomeMessage = document.getElementById('welcomeMessage');
+    const initialMessage = document.getElementById('initialMessage');
+    const loginPrompt = document.getElementById('loginPrompt');
+    const continueGuest = document.getElementById('continueGuest');
+
+    const addButton = document.getElementById('addButton');
+    const attachmentOptionsContainer = document.querySelector('.attachment-options-container');
+
+    const cameraInput = document.getElementById('cameraInput');
+    const galleryInput = document.getElementById('galleryInput');
+    const filesInput = document.getElementById('filesInput');
+    const attachedFilePreviewContainer = document.getElementById('attachedFilePreviewContainer');
+    const inputContainer = document.getElementById('inputContainer');
+
+    let messageCount = 0;
+    let attachedFiles = [];
+
+    // Simple login flag (set in auth flow: localStorage.setItem("gakr_is_logged_in","true"))
+    const isLoggedIn = localStorage.getItem("gakr_is_logged_in") === "true";
+
+    // --- Textarea Auto-Grow & Scroll Logic (original, kept) ---
+    const style = getComputedStyle(userInput);
+    const lineHeight = parseFloat(style.lineHeight);
+    const minHeight = lineHeight;
+    const maxHeight = lineHeight * 5;
+
+    const initialInputContainerPaddingTop = parseFloat(getComputedStyle(inputContainer).paddingTop);
+    const initialInputContainerPaddingBottom = parseFloat(getComputedStyle(inputContainer).paddingBottom);
+    const initialActionButtonsHeight = document.querySelector('.gemini-input-actions').offsetHeight;
+
+    function autoGrowTextarea() {
+        if (!userInput) {
+            console.error("autoGrowTextarea called but userInput element not found.");
+            return;
+        }
 
-                // Enable submit button if there's text or attached files
-                if (userInput.value.trim().length > 0 || attachedFiles.length > 0) {
-                    submitButton.classList.remove('disabled');
-                } else {
-                    submitButton.classList.add('disabled');
-                }
-            }
+        userInput.style.height = 'auto';
+        const scrollHeight = userInput.scrollHeight;
 
-            userInput.addEventListener('input', autoGrowTextarea);
-            // Run on load to set initial height correctly
-            setTimeout(autoGrowTextarea, 0);
-            // --- End Textarea Auto-Grow & Scroll Logic ---
+        let newTextareaHeight = Math.min(Math.max(scrollHeight, minHeight), maxHeight);
+        userInput.style.height = newTextareaHeight + 'px';
 
+        if (attachedFiles.length > 0) {
+            userInput.style.paddingTop = '0px';
+            userInput.style.paddingBottom = '0px';
+            inputContainer.style.alignItems = 'flex-start';
+        } else {
+            userInput.style.paddingTop = '0px';
+            userInput.style.paddingBottom = '0px';
+            inputContainer.style.alignItems = 'flex-end';
+        }
 
-            // Handle Enter key for sending (allow Shift+Enter for new line)
-            userInput.addEventListener('keydown', function(event) {
-                if (event.key === 'Enter' && !event.shiftKey && !submitButton.classList.contains('disabled')) {
-                    event.preventDefault();
-                    sendMessage();
-                }
-            });
+        if (scrollHeight > maxHeight) {
+            userInput.style.overflowY = 'auto';
+        } else {
+            userInput.style.overflowY = 'hidden';
+        }
 
-            // Handle submit button click
-            submitButton.addEventListener('click', function() {
-                if (!this.classList.contains('disabled')) {
-                    sendMessage();
-                }
-            });
+        // Prompt is required; files alone cannot send
+        if (userInput.value.trim().length > 0) {
+            submitButton.classList.remove('disabled');
+        } else {
+            submitButton.classList.add('disabled');
+        }
+    }
 
-            // Handle continue as guest button click
-            continueGuest.addEventListener('click', function() {
-                loginPrompt.classList.remove('show');
-            });
+    userInput.addEventListener('input', autoGrowTextarea);
+    setTimeout(autoGrowTextarea, 0);
+    // --- End Textarea Auto-Grow & Scroll Logic ---
 
-            // --- Handle Add Button Click ---
-            addButton.addEventListener('click', function(event) {
-                event.stopPropagation();
-                attachmentOptionsContainer.classList.toggle('visible');
-            });
 
-            // --- Handle Attachment Option Clicks ---
-            document.getElementById('cameraOption').addEventListener('click', function() {
-                cameraInput.click();
-                attachmentOptionsContainer.classList.remove('visible');
-            });
+    // Handle Enter key for sending (Shift+Enter = newline)
+    userInput.addEventListener('keydown', function(event) {
+        if (event.key === 'Enter' && !event.shiftKey && !submitButton.classList.contains('disabled')) {
+            event.preventDefault();
+            sendMessage();
+        }
+    });
 
-            document.getElementById('galleryOption').addEventListener('click', function() {
-                galleryInput.click();
-                attachmentOptionsContainer.classList.remove('visible');
-            });
+    // Handle submit button click
+    submitButton.addEventListener('click', function() {
+        if (!this.classList.contains('disabled')) {
+            sendMessage();
+        }
+    });
+
+    // Existing “continue as guest” modal
+    continueGuest.addEventListener('click', function() {
+        loginPrompt.classList.remove('show');
+    });
+
+    // --- Handle Add Button Click ---
+    addButton.addEventListener('click', function(event) {
+        event.stopPropagation();
+        attachmentOptionsContainer.classList.toggle('visible');
+    });
+
+    // --- Attachment Options ---
+    document.getElementById('cameraOption').addEventListener('click', function() {
+        cameraInput.click();
+        attachmentOptionsContainer.classList.remove('visible');
+    });
+
+    document.getElementById('galleryOption').addEventListener('click', function() {
+        galleryInput.click();
+        attachmentOptionsContainer.classList.remove('visible');
+    });
+
+    document.getElementById('filesOption').addEventListener('click', function() {
+        filesInput.click();
+        attachmentOptionsContainer.classList.remove('visible');
+    });
+
+    document.getElementById('driveOption').addEventListener('click', function() {
+        alert("Google Drive integration requires backend setup and Google API access.");
+        attachmentOptionsContainer.classList.remove('visible');
+    });
+
+    // --- File input change (camera/gallery/files) ---
+    [cameraInput, galleryInput, filesInput].forEach(input => {
+        input.addEventListener('change', function(event) {
+            const files = event.target.files;
+            if (files.length > 0) {
+                for (let i = 0; i < files.length; i++) {
+                    attachedFiles.push(files[i]);
+                    addFileChip(files[i]);
+                }
+                autoGrowTextarea();
+                userInput.focus();
+            }
+            event.target.value = '';
+        });
+    });
+
+    function addFileChip(file) {
+        const chip = document.createElement('div');
+        chip.className = 'attached-file-chip';
+        chip.setAttribute('data-filename', file.name);
+
+        let previewElement;
+        if (file.type.startsWith('image/')) {
+            const img = document.createElement('img');
+            img.src = URL.createObjectURL(file);
+            img.alt = file.name;
+            img.onload = () => URL.revokeObjectURL(img.src);
+            previewElement = img;
+        } else {
+            const icon = document.createElement('i');
+            icon.className = 'fas fa-paperclip';
+            previewElement = icon;
+        }
 
-            document.getElementById('filesOption').addEventListener('click', function() {
-                filesInput.click();
-                attachmentOptionsContainer.classList.remove('visible');
-            });
+        const fileNameSpan = document.createElement('span');
+        fileNameSpan.className = 'file-name';
+        fileNameSpan.textContent = file.name;
 
-            document.getElementById('driveOption').addEventListener('click', function() {
-                alert("Google Drive integration requires backend setup and Google API access.");
-                attachmentOptionsContainer.classList.remove('visible');
-            });
+        const removeButton = document.createElement('span');
+        removeButton.className = 'remove-file';
+        removeButton.innerHTML = '&times;';
+        removeButton.addEventListener('click', function() {
+            removeFileChip(file.name);
+        });
 
-            // --- Handle File Input Change ---
-            [cameraInput, galleryInput, filesInput].forEach(input => {
-                input.addEventListener('change', function(event) {
-                    const files = event.target.files;
-                    if (files.length > 0) {
-                        for (let i = 0; i < files.length; i++) {
-                            attachedFiles.push(files[i]);
-                            addFileChip(files[i]);
-                        }
-                        autoGrowTextarea(); // Re-evaluate button state and input height
-                        userInput.focus(); // Keep focus on the textarea
-                    }
-                    // Clear the input so the same file can be selected again
-                    event.target.value = '';
-                });
-            });
+        chip.appendChild(previewElement);
+        chip.appendChild(fileNameSpan);
+        chip.appendChild(removeButton);
 
-            // Function to add a file chip to the input container
-            function addFileChip(file) {
-                const chip = document.createElement('div');
-                chip.className = 'attached-file-chip';
-                chip.setAttribute('data-filename', file.name); // Store filename for removal
-
-                let previewElement;
-                if (file.type.startsWith('image/')) {
-                    const img = document.createElement('img');
-                    img.src = URL.createObjectURL(file);
-                    img.alt = file.name;
-                    img.onload = () => URL.revokeObjectURL(img.src); // Clean up object URL
-                    previewElement = img;
-                } else {
-                    const icon = document.createElement('i');
-                    icon.className = 'fas fa-paperclip'; // Generic file icon
-                    previewElement = icon;
-                }
+        attachedFilePreviewContainer.appendChild(chip);
+        autoGrowTextarea();
+    }
 
-                const fileNameSpan = document.createElement('span');
-                fileNameSpan.className = 'file-name';
-                fileNameSpan.textContent = file.name;
-
-                const removeButton = document.createElement('span');
-                removeButton.className = 'remove-file';
-                removeButton.innerHTML = '&times;'; // 'x' icon
-                removeButton.addEventListener('click', function() {
-                    removeFileChip(file.name);
-                });
-
-                chip.appendChild(previewElement);
-                chip.appendChild(fileNameSpan);
-                chip.appendChild(removeButton);
-
-                attachedFilePreviewContainer.appendChild(chip);
-                // No need to set userInput.style.paddingTop here directly,
-                // autoGrowTextarea will re-evaluate based on the container's contents.
-                autoGrowTextarea(); // Re-run autoGrow to adjust textarea based on new chip height
-            }
+    function removeFileChip(filename) {
+        const chipToRemove = attachedFilePreviewContainer.querySelector(`[data-filename="${filename}"]`);
+        if (chipToRemove) {
+            attachedFilePreviewContainer.removeChild(chipToRemove);
+            attachedFiles = attachedFiles.filter(file => file.name !== filename);
+            autoGrowTextarea();
+        }
+    }
 
-            // Function to remove a file chip
-            function removeFileChip(filename) {
-                const chipToRemove = attachedFilePreviewContainer.querySelector(`[data-filename="${filename}"]`);
-                if (chipToRemove) {
-                    attachedFilePreviewContainer.removeChild(chipToRemove);
-                    attachedFiles = attachedFiles.filter(file => file.name !== filename);
-                    autoGrowTextarea(); // Re-evaluate button state and input height
-                }
-            }
+    // Hide attachment options when clicking outside
+    document.addEventListener('click', function(event) {
+        const isClickInsideAddButton = addButton && addButton.contains(event.target);
+        const isClickInsideOptions = attachmentOptionsContainer && attachmentOptionsContainer.contains(event.target);
 
+        if (attachmentOptionsContainer && attachmentOptionsContainer.classList.contains('visible') && !isClickInsideAddButton && !isClickInsideOptions) {
+            attachmentOptionsContainer.classList.remove('visible');
+        }
+    });
 
-            // --- Hide options when clicking outside ---
-            document.addEventListener('click', function(event) {
-                const isClickInsideAddButton = addButton && addButton.contains(event.target);
-                const isClickInsideOptions = attachmentOptionsContainer && attachmentOptionsContainer.contains(event.target);
+    if (attachmentOptionsContainer) {
+        attachmentOptionsContainer.addEventListener('click', function(event){
+            event.stopPropagation();
+        });
+    }
+
+    // --- Centered login reminder mini-window ---
+    let inlineLoginPromptShown = false;
+    function maybeShowInlineLoginPrompt() {
+        if (isLoggedIn) return;
+        if (inlineLoginPromptShown) return;
+        if (messageCount % 5 !== 0) return;
+
+        inlineLoginPromptShown = true;
+
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.inset = '0';
+        overlay.style.backgroundColor = 'rgba(0,0,0,0.35)';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.zIndex = '9999';
+
+        const card = document.createElement('div');
+        card.style.width = '100%';
+        card.style.maxWidth = '420px';
+        card.style.borderRadius = '16px';
+        card.style.backgroundColor = 'var(--bs-body-bg)';
+        card.style.border = '1px solid var(--bs-border-color)';
+        card.style.boxShadow = '0 16px 40px rgba(0,0,0,0.25)';
+        card.style.padding = '1.25rem 1.5rem';
+        card.style.display = 'flex';
+        card.style.flexDirection = 'column';
+        card.style.gap = '0.75rem';
+
+        const title = document.createElement('div');
+        title.textContent = "Save your conversations";
+        title.style.fontWeight = '600';
+        title.style.fontSize = '1rem';
+
+        const text = document.createElement('div');
+        text.textContent = "Log in to keep your chat history across devices. If you continue as a guest, your conversations may be lost later.";
+        text.style.fontSize = '0.9rem';
+        text.style.opacity = '0.9';
+
+        const buttonRow = document.createElement('div');
+        buttonRow.style.display = 'flex';
+        buttonRow.style.gap = '0.75rem';
+        buttonRow.style.marginTop = '0.5rem';
+
+        const skipBtn = document.createElement('button');
+        skipBtn.textContent = "Continue without login";
+        skipBtn.style.flex = '1';
+        skipBtn.style.borderRadius = '999px';
+        skipBtn.style.border = '1px solid var(--bs-border-color)';
+        skipBtn.style.backgroundColor = 'transparent';
+        skipBtn.style.color = 'var(--bs-body-color)';
+        skipBtn.style.padding = '0.5rem 0.75rem';
+        skipBtn.style.fontSize = '0.85rem';
+        skipBtn.style.cursor = 'pointer';
+
+        const loginBtn = document.createElement('button');
+        loginBtn.textContent = "Log in to save chats";
+        loginBtn.style.flex = '1';
+        loginBtn.style.borderRadius = '999px';
+        loginBtn.style.border = 'none';
+        loginBtn.style.backgroundColor = 'var(--gakr-blue)';
+        loginBtn.style.color = '#fff';
+        loginBtn.style.padding = '0.5rem 0.75rem';
+        loginBtn.style.fontSize = '0.85rem';
+        loginBtn.style.cursor = 'pointer';
+
+        skipBtn.addEventListener('click', function () {
+            overlay.remove();
+        });
 
-                if (attachmentOptionsContainer && attachmentOptionsContainer.classList.contains('visible') && !isClickInsideAddButton && !isClickInsideOptions) {
-                    attachmentOptionsContainer.classList.remove('visible');
-                }
-            });
+        loginBtn.addEventListener('click', function () {
+            window.location.href = 'auth.html';
+        });
 
-            if (attachmentOptionsContainer) {
-                attachmentOptionsContainer.addEventListener('click', function(event){
-                    event.stopPropagation();
-                });
-            }
-            // --- END Hide options when clicking outside ---
+        buttonRow.appendChild(skipBtn);
+        buttonRow.appendChild(loginBtn);
+        card.appendChild(title);
+        card.appendChild(text);
+        card.appendChild(buttonRow);
+        overlay.appendChild(card);
+        document.body.appendChild(overlay);
+    }
+
+    // --- sendMessage: prompt required, files optional, generic error ---
+    async function sendMessage() {
+        const text = userInput.value.trim();
+
+        // Prompt is required; files alone cannot be sent
+        if (!text) {
+            return;
+        }
 
+        if (!welcomeMessage.classList.contains('d-none')) {
+            welcomeMessage.classList.add('d-none');
+        }
 
-            // Function to send message (MODIFIED to include files)
-            async function sendMessage() {
-                const text = userInput.value.trim();
-                if (!text && attachedFiles.length === 0) return; // Don't send empty message with no files
+        if (initialMessage.classList.contains('d-none')) {
+            initialMessage.classList.remove('d-none');
+        }
 
-                if (!welcomeMessage.classList.contains('d-none')) {
-                    welcomeMessage.classList.add('d-none');
-                }
+        const filesSnapshot = [...attachedFiles];
 
-                if (initialMessage.classList.contains('d-none')) {
-                    initialMessage.classList.remove('d-none');
-                }
+        let userMessageContent = text;
+        if (filesSnapshot.length > 0) {
+            const fileNames = filesSnapshot.map(f => f.name).join(', ');
+            userMessageContent += ` (Attached: ${fileNames})`;
+        }
+        addMessage(userMessageContent, 'user');
+        messageCount++;
 
-                // Display user message. If files are attached, mention them.
-                let userMessageContent = text;
-                if (attachedFiles.length > 0) {
-                    const fileNames = attachedFiles.map(f => f.name).join(', ');
-                    userMessageContent += ` (Attached: ${fileNames})`;
-                }
-                addMessage(userMessageContent, 'user');
+        userInput.value = '';
+        attachedFiles = [];
+        attachedFilePreviewContainer.innerHTML = '';
+        autoGrowTextarea();
+        userInput.dispatchEvent(new Event('input', { bubbles: true }));
 
-                userInput.value = '';
-                // Clear attached files and chips
-                attachedFiles = [];
-                attachedFilePreviewContainer.innerHTML = '';
-                // Trigger autoGrow to reset padding and alignment
-                autoGrowTextarea();
-                userInput.dispatchEvent(new Event('input', { bubbles: true }));
+        typingIndicator.classList.remove('d-none');
+        scrollToBottom();
 
+        const formData = new FormData();
+        formData.append('api_key', 'gakr-ai-2025-secret');
+        formData.append('prompt', text);
 
-                typingIndicator.classList.remove('d-none');
-                scrollToBottom();
+        if (filesSnapshot.length > 0) {
+            filesSnapshot.forEach((file) => {
+                formData.append('files', file);
+            });
+        }
 
-                // --- MODIFIED: Create FormData for sending text and files ---
-                const formData = new FormData();
-formData.append('message', text);
-formData.append('api_key', 'gakr-ai-2025-secret');  // ← ADD THIS LINE
-attachedFiles.forEach((file, index) => {
-    formData.append(`file${index}`, file);
-});
+        try {
+            const response = await fetch('/api/analyze', {
+                method: 'POST',
+                body: formData
+            });
 
-                try {
-                    const response = await fetch('/api/chat', {
-                        method: 'POST',
-                        // Do NOT set 'Content-Type': 'application/json' for FormData.
-                        // The browser sets the correct 'Content-Type: multipart/form-data' automatically.
-                        body: formData
-                    });
-
-                    if (!response.ok) {
-                        console.error('HTTP error', response.status);
-                        const errorText = await response.text();
-                        throw new Error(`HTTP error ${response.status}: ${errorText}`);
-                    }
+            if (!response.ok) {
+                typingIndicator.classList.add('d-none');
+                addMessage('There was a server issue. Please try again later.', 'ai');
+                return;
+            }
 
-                    const data = await response.json();
-                    console.log("AI response received:", data);
-
-                    typingIndicator.classList.add('d-none');
-
-                    let responseText = data;
-                    if (typeof data === 'object' && data !== null) {
-                        responseText = data.response;
-                        if (responseText === undefined) {
-                            try {
-                                responseText = JSON.stringify(data, null, 2);
-                            } catch (e) {
-                                responseText = data.toString();
-                            }
-                        }
-                    } else {
-                        responseText = String(data);
+            const data = await response.json();
+            typingIndicator.classList.add('d-none');
+
+            let responseText = data;
+            if (typeof data === 'object' && data !== null) {
+                responseText = data.response;
+                if (responseText === undefined) {
+                    try {
+                        responseText = JSON.stringify(data, null, 2);
+                    } catch (e) {
+                        responseText = data.toString();
                     }
+                }
+            } else {
+                responseText = String(data);
+            }
 
-                    addMessage(responseText, 'ai');
-                    messageCount++;
+            addMessage(responseText, 'ai');
 
-                    if (messageCount === 5 && !loginPrompt.classList.contains('show')) {
-                        loginPrompt.classList.add('show');
-                    }
-                } catch (error) {
-                    console.error('Fetch Error:', error);
-                    typingIndicator.classList.add('d-none');
-                    if (chatContainer) {
-                        addMessage('Sorry, I encountered an error sending your message or files. Please try again.', 'ai');
-                    }
-                } finally {
-                    if (typingIndicator) {
-                        typingIndicator.classList.add('d-none');
-                    }
-                    scrollToBottom();
-                }
+            if (messageCount > 0 && messageCount % 5 === 0) {
+                maybeShowInlineLoginPrompt();
             }
+        } catch (error) {
+            console.error('Fetch Error:', error);
+            typingIndicator.classList.add('d-none');
+            addMessage('There was a server issue. Please try again later.', 'ai');
+        } finally {
+            if (typingIndicator) {
+                typingIndicator.classList.add('d-none');
+            }
+            scrollToBottom();
+        }
+    }
 
-            // Function to add message to chat (keep existing)
-            function addMessage(text, type) {
-                const messageDiv = document.createElement('div');
-                messageDiv.className = `gemini-message gemini-message-${type}`;
+    function addMessage(text, type) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `gemini-message gemini-message-${type}`;
 
-                const headerDiv = document.createElement('div');
-                headerDiv.className = 'gemini-message-header';
+        const headerDiv = document.createElement('div');
+        headerDiv.className = 'gemini-message-header';
 
-                const avatarDiv = document.createElement('div');
-                avatarDiv.className = 'gemini-message-avatar';
+        const avatarDiv = document.createElement('div');
+        avatarDiv.className = 'gemini-message-avatar';
 
-                const avatarIcon = document.createElement('i');
-                avatarIcon.className = type === 'user' ? 'fas fa-user' : 'fas fa-robot';
+        const avatarIcon = document.createElement('i');
+        avatarIcon.className = type === 'user' ? 'fas fa-user' : 'fas fa-robot';
 
-                const nameSpan = document.createElement('span');
-                nameSpan.textContent = type === 'user' ? 'You' : 'GAKR AI';
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = type === 'user' ? 'You' : 'GAKR AI';
 
-                const contentDiv = document.createElement('div');
-                contentDiv.className = 'gemini-message-content';
-                contentDiv.textContent = text; // Use textContent to prevent XSS if text comes from API
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'gemini-message-content';
+        contentDiv.textContent = text;
 
-                avatarDiv.appendChild(avatarIcon);
-                headerDiv.appendChild(avatarDiv);
-                headerDiv.appendChild(nameSpan);
+        avatarDiv.appendChild(avatarIcon);
+        headerDiv.appendChild(avatarDiv);
+        headerDiv.appendChild(nameSpan);
 
-                messageDiv.appendChild(headerDiv);
-                messageDiv.appendChild(contentDiv);
+        messageDiv.appendChild(headerDiv);
+        messageDiv.appendChild(contentDiv);
 
-                chatContainer.appendChild(messageDiv);
+        chatContainer.appendChild(messageDiv);
 
-                scrollToBottom();
-            }
+        scrollToBottom();
+    }
 
-            // Function to scroll chat to bottom (keep existing)
-            function scrollToBottom() {
-                setTimeout(() => {
-                    if (chatContainer) {
-                        chatContainer.scrollTop = chatContainer.scrollHeight;
-                    }
-                }, 0);
+    function scrollToBottom() {
+        setTimeout(() => {
+            if (chatContainer) {
+                chatContainer.scrollTop = chatContainer.scrollHeight;
             }
+        }, 0);
+    }
 
-            // Initialize based on URL query params (keep existing)
-            const urlParams = new URLSearchParams(window.location.search);
-            const initialQuery = urlParams.get('q');
+    // Initialize from URL ?q=...
+    const urlParams = new URLSearchParams(window.location.search);
+    const initialQuery = urlParams.get('q');
 
-            if (initialQuery) {
-                userInput.value = initialQuery;
-                userInput.dispatchEvent(new Event('input', { bubbles: true }));
+    if (initialQuery) {
+        userInput.value = initialQuery;
+        userInput.dispatchEvent(new Event('input', { bubbles: true }));
 
-                setTimeout(function() {
-                    if (submitButton && !submitButton.classList.contains('disabled')) {
-                        submitButton.click();
-                    }
-                }, 100);
+        setTimeout(function() {
+            if (submitButton && !submitButton.classList.contains('disabled')) {
+                submitButton.click();
+            }
+        }, 100);
+    } else {
+        if (userInput) {
+            if (userInput.value.trim().length === 0 && attachedFiles.length === 0) {
+                if (submitButton) submitButton.classList.add('disabled');
             } else {
-                if (userInput) {
-                    // Initial check for submit button state
-                    if (userInput.value.trim().length === 0 && attachedFiles.length === 0) {
-                        if (submitButton) submitButton.classList.add('disabled');
-                    } else {
-                        if (submitButton) submitButton.classList.remove('disabled');
-                    }
-                    // Trigger autoGrowTextarea immediately on load for correct initial height
-                    autoGrowTextarea();
-                }
+                if (submitButton) submitButton.classList.remove('disabled');
             }
-        });
-    </script>
+            autoGrowTextarea();
+        }
+    }
+});
+</script>
+
+
+
 </body>
 </html>