Update static/script.js

static/script.js

@@ -1,233 +1,746 @@
-document.addEventListener('DOMContentLoaded', () => {
-    
-    // --- DOM Elements ---
-    const chatArea = document.getElementById('chat-area');
-    const closeSidebarBtn = document.getElementById('close-sidebar-btn');
-    const messageInput = document.getElementById('message-input');
-    const sendBtn = document.getElementById('send-btn');
-    const newChatBtn = document.getElementById('new-chat-btn');
-    const chatMessages = document.getElementById('chat-messages');
-    const chatHistoryList = document.getElementById('chat-history-list');
-    const menuToggle = document.getElementById('menu-toggle');
-    const appContainer = document.getElementById('app-container');
-    const chatTitle = document.getElementById('chat-title');
-    const imageUploadBtn = document.getElementById('image-upload-btn');
-    const imageUploadInput = document.getElementById('image-upload-input');
-    const imagePreviewContainer = document.getElementById('image-preview-container');
-    const imagePreview = document.getElementById('image-preview');
-    const removeImageBtn = document.getElementById('remove-image-btn');
-
-    // --- State ---
-    let currentSessionId = null;
-    let conversationsCache = {};
-    let selectedImageFile = null;
-    let imgbbApiKey = '';
-
-    // --- Initialization ---
-    const init = async () => {
-        if (!messageInput || !sendBtn || !imageUploadBtn || !imagePreviewContainer) {
-            console.error("Critical UI elements not found. Check HTML IDs.");
-            return;
-        }
-
-        await fetchConfig();
-        loadCache();
-        await renderChatHistoryFromAPI();
-
-        // Event Listeners
-        sendBtn.addEventListener('click', sendMessage);
-        messageInput.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } });
-        
-        imageUploadBtn.addEventListener('click', () => imageUploadInput.click());
-        imageUploadInput.addEventListener('change', handleImageSelect);
-        removeImageBtn.addEventListener('click', removeSelectedImage);
-
-        // Sidebar Listeners
-        newChatBtn.addEventListener('click', () => { startNewChat(); closeSidebar(); });
-        menuToggle.addEventListener('click', (event) => {
-            event.stopPropagation();
-            appContainer.classList.toggle('sidebar-visible');
-        });
-        closeSidebarBtn.addEventListener('click', (event) => {
-            event.stopPropagation();
-            closeSidebar();
-        });
-        chatArea.addEventListener('click', () => {
-            if (appContainer.classList.contains('sidebar-visible')) {
-                closeSidebar();
-            }
-        });
-    };
-
-    const fetchConfig = async () => {
-        try {
-            const response = await fetch('/config');
-            const config = await response.json();
-            imgbbApiKey = config.imgbb_api_key;
-            if (!imgbbApiKey) { console.error("ImgBB API Key is missing."); }
-        } catch (error) { console.error('Failed to fetch config:', error); }
-    };
-
-    // --- Core Chat Functions ---
-    const sendMessage = async () => {
-        const messageText = messageInput.value.trim();
-        if (!messageText && !selectedImageFile) return;
-        displayMessage({ role: 'user', content: messageText, imageUrl: selectedImageFile });
-        const loadingIndicator = displayMessage({ role: 'assistant', content: 'Thinking...', isLoading: true });
-        try {
-            let permanentImageUrl = null;
-            if (selectedImageFile) { permanentImageUrl = await uploadImageToImgBB(selectedImageFile); }
-            const formData = new FormData();
-            formData.append('message', messageText);
-            formData.append('session_id', currentSessionId);
-            if (permanentImageUrl) { formData.append('image_url', permanentImageUrl); }
-            const response = await fetch('/chat', { method: 'POST', body: formData });
-            if (!response.ok) throw new Error('Network response was not ok.');
-            const data = await response.json();
-            chatMessages.removeChild(loadingIndicator);
-            displayMessage({ role: 'assistant', content: data.response });
-            updateCache(data.session_id, { content: messageText, imageUrl: permanentImageUrl }, { content: data.response });
-        } catch (error) {
-            console.error('Error sending message:', error);
-            loadingIndicator.innerHTML = marked.parse("Sorry, something went wrong.");
-            loadingIndicator.classList.remove('loading');
-        } finally {
-            messageInput.value = ''; messageInput.style.height = 'auto'; removeSelectedImage();
-        }
-    };
-
-    const uploadImageToImgBB = async (imageFile) => {
-        if (!imgbbApiKey) throw new Error("ImgBB API Key not configured.");
-        const formData = new FormData();
-        formData.append('image', imageFile);
-        formData.append('key', imgbbApiKey);
-        const response = await fetch('https://api.imgbb.com/1/upload', { method: 'POST', body: formData });
-        const result = await response.json();
-        if (result.success) { return result.data.url; }
-        else { throw new Error(result.error.message || 'Image upload failed.'); }
-    };
-
-    // --- Caching and State Management ---
-    const startNewChat = () => {
-        currentSessionId = null;
-        chatMessages.innerHTML = `<div class="welcome-message"><h1>EasyFarms Assistant</h1></div>`;
-        chatTitle.textContent = "New Chat";
-        updateActiveChatItem();
-    };
-
-    const switchChat = async (sessionId) => {
-        currentSessionId = sessionId;
-        chatMessages.innerHTML = '';
-        if (conversationsCache[sessionId] && conversationsCache[sessionId].messages) {
-            conversationsCache[sessionId].messages.forEach(displayMessage);
-        } else {
-            const loading = displayMessage({ role: 'assistant', content: 'Loading chat history...', isLoading: true });
-            try {
-                const response = await fetch(`/history/messages/${sessionId}`);
-                const messages = await response.json();
-                if (!conversationsCache[sessionId]) conversationsCache[sessionId] = {};
-                conversationsCache[sessionId].messages = messages;
-                saveCache();
-                chatMessages.removeChild(loading);
-                messages.forEach(displayMessage);
-            } catch (error) {
-                loading.innerHTML = marked.parse("Failed to load chat history.");
-            }
-        }
-        chatTitle.textContent = conversationsCache[sessionId]?.title || "Chat";
-        updateActiveChatItem();
-        closeSidebar();
-    };
-
-    const updateCache = (sessionId, userTurn, assistantTurn) => {
-        const isNewChat = !currentSessionId;
-        currentSessionId = sessionId;
-        if (isNewChat) {
-            const title = (userTurn.content || "Image Query").substring(0, 30) + '...';
-            conversationsCache[sessionId] = { title, messages: [] };
-            const item = document.createElement('div');
-            item.className = 'chat-history-item';
-            item.textContent = title;
-            item.dataset.sessionId = sessionId;
-            item.addEventListener('click', () => switchChat(sessionId));
-            chatHistoryList.prepend(item);
-        }
-        const userMessage = { role: 'user', content: userTurn.content };
-        if (userTurn.imageUrl) userMessage.imageUrl = userTurn.imageUrl;
-        const assistantMessage = { role: 'assistant', content: assistantTurn.content };
-        conversationsCache[sessionId].messages.push(userMessage, assistantMessage);
-        saveCache();
-        updateActiveChatItem();
-    };
-
-    const displayMessage = (message) => {
-        const { role, content, imageUrl, isLoading } = message;
-        const sender = role || message.sender;
-        const messageDiv = document.createElement('div');
-        messageDiv.classList.add('message', `${sender}-message`);
-        let htmlContent = '';
-        const imageSrc = (typeof imageUrl === 'object' && imageUrl instanceof File) ? URL.createObjectURL(imageUrl) : imageUrl;
-        if (imageSrc) { htmlContent += `<img src="${imageSrc}" alt="User upload" class="user-upload">`; }
-        if (content) { htmlContent += marked.parse(content); }
-        messageDiv.innerHTML = htmlContent || (isLoading ? '...' : '');
-        if (isLoading) messageDiv.classList.add('loading');
-        chatMessages.appendChild(messageDiv);
-        chatMessages.scrollTop = chatMessages.scrollHeight;
-        return messageDiv;
-    };
-
-    // --- Image Preview Handling ---
-    const handleImageSelect = (event) => {
-        const file = event.target.files[0];
-        if (file) {
-            selectedImageFile = file;
-            imagePreview.src = URL.createObjectURL(file);
-            imagePreviewContainer.style.display = 'block';
-        }
-    };
-
-    const removeSelectedImage = () => {
-        selectedImageFile = null;
-        imageUploadInput.value = '';
-        imagePreviewContainer.style.display = 'none';
-        imagePreview.src = '#';
-    };
-
-    // --- LocalStorage Cache & Sidebar Rendering ---
-    const saveCache = () => localStorage.setItem('easyfarms_cache', JSON.stringify(conversationsCache));
-    const loadCache = () => {
-        const saved = localStorage.getItem('easyfarms_cache');
-        if (saved) conversationsCache = JSON.parse(saved);
-    };
-
-    const renderChatHistoryFromAPI = async () => {
-        try {
-            const response = await fetch('/history/sessions');
-            const sessions = await response.json();
-            chatHistoryList.innerHTML = '';
-            sessions.reverse().forEach(session => {
-                if (!conversationsCache[session.session_id]) conversationsCache[session.session_id] = {};
-                conversationsCache[session.session_id].title = session.title;
-                const item = document.createElement('div');
-                item.className = 'chat-history-item';
-                item.textContent = session.title;
-                item.dataset.sessionId = session.session_id;
-                item.addEventListener('click', () => switchChat(session.session_id));
-                chatHistoryList.appendChild(item);
-            });
-            saveCache();
-            updateActiveChatItem();
-        } catch (error) { console.error("Failed to render chat history from API:", error); }
-    };
-
-    const updateActiveChatItem = () => {
-        document.querySelectorAll('.chat-history-item').forEach(item => {
-            item.classList.toggle('active', item.dataset.sessionId === currentSessionId);
-        });
-    };
-
-    const closeSidebar = () => appContainer.classList.remove('sidebar-visible');
-
-    // --- Start the Application ---
-    init();
+document.addEventListener('DOMContentLoaded', () => {
+    
+    // --- DOM Elements ---
+    const chatArea = document.getElementById('chat-area');
+    const closeSidebarBtn = document.getElementById('close-sidebar-btn');
+    const messageInput = document.getElementById('message-input');
+    const sendBtn = document.getElementById('send-btn');
+    const newChatBtn = document.getElementById('new-chat-btn');
+    const chatMessages = document.getElementById('chat-messages');
+    const chatHistoryList = document.getElementById('chat-history-list');
+    const menuToggle = document.getElementById('menu-toggle');
+    const appContainer = document.getElementById('app-container');
+    const chatTitle = document.getElementById('chat-title');
+    const imageUploadBtn = document.getElementById('image-upload-btn');
+    const imageUploadInput = document.getElementById('image-upload-input');
+    const imagePreviewContainer = document.getElementById('image-preview-container');
+    const imagePreview = document.getElementById('image-preview');
+    const removeImageBtn = document.getElementById('remove-image-btn');
+
+    // Add search and filter elements (assuming they exist in HTML or create them)
+    let searchInput, clearAllBtn;
+
+    // --- State ---
+    let currentChatId = null;
+    let conversationsCache = {};
+    let selectedImageFile = null;
+    let imgbbApiKey = '';
+    let firebase = null;
+    let firebaseDB = null;
+    let useFirebase = false;
+
+    // --- Firebase Configuration ---
+    const initializeFirebase = async () => {
+        try {
+            // Check if Firebase is available and configured
+            if (typeof firebase !== 'undefined' && window.firebaseConfig) {
+                const { initializeApp } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js');
+                const { getFirestore, collection, doc, setDoc, getDoc, getDocs, deleteDoc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                
+                const app = initializeApp(window.firebaseConfig);
+                firebaseDB = getFirestore(app);
+                useFirebase = true;
+                
+                console.log('Firebase initialized successfully');
+                return { setDoc, getDoc, getDocs, deleteDoc, collection, doc };
+            } else {
+                console.log('Firebase not configured, using localStorage');
+                return null;
+            }
+        } catch (error) {
+            console.error('Firebase initialization failed, falling back to localStorage:', error);
+            return null;
+        }
+    };
+
+    // --- Storage Management ---
+    const saveSessionData = async (chatId, data) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { setDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                await setDoc(doc(firebaseDB, 'chat_sessions', chatId), {
+                    ...data,
+                    updatedAt: new Date().toISOString()
+                });
+                console.log('Session saved to Firebase:', chatId);
+            } else {
+                // Fallback to localStorage
+                const sessions = JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+                sessions[chatId] = {
+                    ...data,
+                    updatedAt: new Date().toISOString()
+                };
+                localStorage.setItem('easyfarms_sessions', JSON.stringify(sessions));
+                console.log('Session saved to localStorage:', chatId);
+            }
+        } catch (error) {
+            console.error('Failed to save session data:', error);
+            // Fallback to localStorage
+            const sessions = JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+            sessions[chatId] = data;
+            localStorage.setItem('easyfarms_sessions', JSON.stringify(sessions));
+        }
+    };
+
+    const loadSessionData = async (chatId) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { getDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                const docRef = doc(firebaseDB, 'chat_sessions', chatId);
+                const docSnap = await getDoc(docRef);
+                if (docSnap.exists()) {
+                    console.log('Session loaded from Firebase:', chatId);
+                    return docSnap.data();
+                }
+            } else {
+                // Fallback to localStorage
+                const sessions = JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+                if (sessions[chatId]) {
+                    console.log('Session loaded from localStorage:', chatId);
+                    return sessions[chatId];
+                }
+            }
+            return null;
+        } catch (error) {
+            console.error('Failed to load session data:', error);
+            // Fallback to localStorage
+            const sessions = JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+            return sessions[chatId] || null;
+        }
+    };
+
+    const loadAllSessions = async () => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { getDocs, collection } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                const querySnapshot = await getDocs(collection(firebaseDB, 'chat_sessions'));
+                const sessions = {};
+                querySnapshot.forEach((doc) => {
+                    sessions[doc.id] = doc.data();
+                });
+                console.log('All sessions loaded from Firebase');
+                return sessions;
+            } else {
+                // Fallback to localStorage
+                const sessions = JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+                console.log('All sessions loaded from localStorage');
+                return sessions;
+            }
+        } catch (error) {
+            console.error('Failed to load all sessions:', error);
+            // Fallback to localStorage
+            return JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+        }
+    };
+
+    const deleteSessionData = async (chatId) => {
+        try {
+            if (useFirebase && firebaseDB) {
+                const { deleteDoc, doc } = await import('https://www.gstatic.com/firebasejs/9.0.0/firebase-firestore.js');
+                await deleteDoc(doc(firebaseDB, 'chat_sessions', chatId));
+                console.log('Session deleted from Firebase:', chatId);
+            } else {
+                // Fallback to localStorage
+                const sessions = JSON.parse(localStorage.getItem('easyfarms_sessions') || '{}');
+                delete sessions[chatId];
+                localStorage.setItem('easyfarms_sessions', JSON.stringify(sessions));
+                console.log('Session deleted from localStorage:', chatId);
+            }
+        } catch (error) {
+            console.error('Failed to delete session data:', error);
+        }
+    };
+
+    // --- Initialization ---
+    const init = async () => {
+        if (!messageInput || !sendBtn || !imageUploadBtn || !imagePreviewContainer) {
+            console.error("Critical UI elements not found. Check HTML IDs.");
+            return;
+        }
+
+        // Initialize Firebase
+        firebase = await initializeFirebase();
+
+        await fetchConfig();
+        await loadCachedSessions();
+        await renderChatHistoryFromAPI();
+        setupSearchAndFilter();
+
+        // Event Listeners
+        sendBtn.addEventListener('click', sendMessage);
+        messageInput.addEventListener('keydown', e => { 
+            if (e.key === 'Enter' && !e.shiftKey) { 
+                e.preventDefault(); 
+                sendMessage(); 
+            } 
+        });
+        
+        imageUploadBtn.addEventListener('click', () => imageUploadInput.click());
+        imageUploadInput.addEventListener('change', handleImageSelect);
+        removeImageBtn.addEventListener('click', removeSelectedImage);
+
+        // Sidebar Listeners
+        newChatBtn.addEventListener('click', () => { startNewChat(); closeSidebar(); });
+        menuToggle.addEventListener('click', (event) => {
+            event.stopPropagation();
+            appContainer.classList.toggle('sidebar-visible');
+        });
+        closeSidebarBtn.addEventListener('click', (event) => {
+            event.stopPropagation();
+            closeSidebar();
+        });
+        chatArea.addEventListener('click', () => {
+            if (appContainer.classList.contains('sidebar-visible')) {
+                closeSidebar();
+            }
+        });
+
+        console.log('EasyFarms Chat initialized with new backend integration');
+    };
+
+    const fetchConfig = async () => {
+        try {
+            const response = await fetch('/config');
+            const config = await response.json();
+            imgbbApiKey = config.imgbb_api_key;
+            if (!imgbbApiKey) { 
+                console.error("ImgBB API Key is missing."); 
+            }
+        } catch (error) { 
+            console.error('Failed to fetch config:', error); 
+        }
+    };
+
+    const setupSearchAndFilter = () => {
+        // Create search input if it doesn't exist
+        if (!searchInput) {
+            searchInput = document.createElement('input');
+            searchInput.type = 'text';
+            searchInput.placeholder = 'Search chats...';
+            searchInput.className = 'search-input';
+            searchInput.style.cssText = `
+                width: 100%;
+                padding: 8px;
+                margin: 10px 0;
+                border: 1px solid #ddd;
+                border-radius: 4px;
+                font-size: 14px;
+            `;
+            
+            // Insert before chat history list
+            chatHistoryList.parentNode.insertBefore(searchInput, chatHistoryList);
+        }
+
+        // Create clear all button if it doesn't exist
+        if (!clearAllBtn) {
+            clearAllBtn = document.createElement('button');
+            clearAllBtn.textContent = 'Clear All Chats';
+            clearAllBtn.className = 'clear-all-btn';
+            clearAllBtn.style.cssText = `
+                width: 100%;
+                padding: 8px;
+                margin: 5px 0;
+                background: #ff4444;
+                color: white;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                font-size: 12px;
+            `;
+            
+            // Insert after search input
+            searchInput.parentNode.insertBefore(clearAllBtn, chatHistoryList);
+        }
+
+        // Add event listeners
+        searchInput.addEventListener('input', filterChats);
+        clearAllBtn.addEventListener('click', confirmClearAllChats);
+    };
+
+    const filterChats = () => {
+        const searchTerm = searchInput.value.toLowerCase();
+        const chatItems = chatHistoryList.querySelectorAll('.chat-history-item');
+        
+        chatItems.forEach(item => {
+            const title = item.textContent.toLowerCase();
+            const shouldShow = title.includes(searchTerm);
+            item.style.display = shouldShow ? 'block' : 'none';
+        });
+        
+        console.log('Filtered chats with term:', searchTerm);
+    };
+
+    const confirmClearAllChats = () => {
+        if (confirm('Are you sure you want to delete all chats? This action cannot be undone.')) {
+            clearAllChats();
+        }
+    };
+
+    const clearAllChats = async () => {
+        try {
+            // Get all chat IDs
+            const allSessions = await loadAllSessions();
+            const chatIds = Object.keys(allSessions);
+            
+            // Delete each chat from backend
+            for (const chatId of chatIds) {
+                try {
+                    const response = await fetch(`/chat/${chatId}`, {
+                        method: 'DELETE'
+                    });
+                    
+                    if (response.ok) {
+                        console.log('Deleted chat from backend:', chatId);
+                    }
+                } catch (error) {
+                    console.error('Failed to delete chat from backend:', chatId, error);
+                }
+                
+                // Delete from local storage
+                await deleteSessionData(chatId);
+            }
+            
+            // Clear UI and cache
+            conversationsCache = {};
+            chatHistoryList.innerHTML = '';
+            startNewChat();
+            
+            console.log('All chats cleared successfully');
+        } catch (error) {
+            console.error('Failed to clear all chats:', error);
+        }
+    };
+
+    // --- Core Chat Functions ---
+    const sendMessage = async () => {
+        const messageText = messageInput.value.trim();
+        if (!messageText && !selectedImageFile) return;
+
+        // Display user message immediately
+        displayMessage({ 
+            role: 'user', 
+            content: messageText, 
+            imageUrl: selectedImageFile 
+        });
+
+        const loadingIndicator = displayMessage({ 
+            role: 'assistant', 
+            content: 'Thinking...', 
+            isLoading: true 
+        });
+
+        try {
+            let permanentImageUrl = null;
+            if (selectedImageFile) { 
+                permanentImageUrl = await uploadImageToImgBB(selectedImageFile); 
+            }
+
+            // Prepare request data
+            const requestData = {
+                query: messageText,
+                session_id: currentChatId,
+            };
+
+            if (permanentImageUrl) {
+                requestData.image_url = permanentImageUrl;
+            }
+
+            // Send to new API endpoint
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestData)
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+
+            const data = await response.json();
+            console.log('Chat response:', data);
+
+            // Remove loading indicator
+            chatMessages.removeChild(loadingIndicator);
+
+            // Display assistant response
+            displayMessage({ 
+                role: 'assistant', 
+                content: data.response,
+                message_id: data.assistant_message_id
+            });
+
+            // Update cache and UI
+            await updateCacheWithNewSystem(
+                data.chat_id,
+                { 
+                    content: messageText, 
+                    imageUrl: permanentImageUrl,
+                    message_id: data.user_message_id
+                },
+                { 
+                    content: data.response,
+                    message_id: data.assistant_message_id
+                },
+                data.is_new_chat
+            );
+
+        } catch (error) {
+            console.error('Error sending message:', error);
+            
+            // Remove loading indicator and show error
+            chatMessages.removeChild(loadingIndicator);
+            
+            // Display mock error response (don't save to database)
+            displayMessage({ 
+                role: 'assistant', 
+                content: "I apologize, but I'm having trouble connecting right now. Please check your internet connection and try again. Your chat session is still active.",
+                isError: true
+            });
+        } finally {
+            messageInput.value = ''; 
+            messageInput.style.height = 'auto'; 
+            removeSelectedImage();
+        }
+    };
+
+    const uploadImageToImgBB = async (imageFile) => {
+        if (!imgbbApiKey) throw new Error("ImgBB API Key not configured.");
+        
+        const formData = new FormData();
+        formData.append('image', imageFile);
+        formData.append('key', imgbbApiKey);
+        
+        const response = await fetch('https://api.imgbb.com/1/upload', { 
+            method: 'POST', 
+            body: formData 
+        });
+        
+        const result = await response.json();
+        if (result.success) { 
+            return result.data.url; 
+        } else { 
+            throw new Error(result.error.message || 'Image upload failed.'); 
+        }
+    };
+
+    // --- Chat Management ---
+    const startNewChat = () => {
+        currentChatId = null;
+        chatMessages.innerHTML = `<div class="welcome-message"><h1>EasyFarms Assistant</h1></div>`;
+        chatTitle.textContent = "New Chat";
+        updateActiveChatItem();
+        console.log('Started new chat');
+    };
+
+    const switchChat = async (chatId) => {
+        console.log('Switching to chat:', chatId);
+        currentChatId = chatId;
+        chatMessages.innerHTML = '';
+
+        // Check cache first
+        if (conversationsCache[chatId] && conversationsCache[chatId].messages) {
+            conversationsCache[chatId].messages.forEach(displayMessage);
+            chatTitle.textContent = conversationsCache[chatId].title || "Chat";
+        } else {
+            // Load from API
+            const loading = displayMessage({ 
+                role: 'assistant', 
+                content: 'Loading chat history...', 
+                isLoading: true 
+            });
+            
+            try {
+                const response = await fetch(`/chat/${chatId}/messages`);
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                
+                const messages = await response.json();
+                console.log('Loaded messages for chat:', chatId, messages);
+                
+                // Update cache
+                if (!conversationsCache[chatId]) conversationsCache[chatId] = {};
+                conversationsCache[chatId].messages = messages;
+                
+                // Save to storage
+                await saveSessionData(chatId, conversationsCache[chatId]);
+                
+                // Remove loading and display messages
+                chatMessages.removeChild(loading);
+                messages.forEach(displayMessage);
+                
+                // Set title from first user message or use cached title
+                const sessionData = await loadSessionData(chatId);
+                chatTitle.textContent = sessionData?.title || conversationsCache[chatId]?.title || "Chat";
+                
+            } catch (error) {
+                console.error('Failed to load chat history:', error);
+                chatMessages.removeChild(loading);
+                displayMessage({ 
+                    role: 'assistant', 
+                    content: "Failed to load chat history. Please try again.",
+                    isError: true
+                });
+            }
+        }
+        
+        updateActiveChatItem();
+        closeSidebar();
+    };
+
+    const deleteChat = async (chatId, chatItem) => {
+        if (!confirm('Are you sure you want to delete this chat?')) return;
+        
+        try {
+            // Delete from backend
+            const response = await fetch(`/chat/${chatId}`, {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                console.log('Chat deleted from backend:', chatId);
+            } else {
+                console.error('Failed to delete chat from backend:', chatId);
+            }
+            
+            // Delete from storage
+            await deleteSessionData(chatId);
+            
+            // Remove from cache
+            delete conversationsCache[chatId];
+            
+            // Remove from UI
+            chatItem.remove();
+            
+            // If this was the current chat, start a new one
+            if (currentChatId === chatId) {
+                startNewChat();
+            }
+            
+            console.log('Chat deleted successfully:', chatId);
+            
+        } catch (error) {
+            console.error('Error deleting chat:', error);
+            alert('Failed to delete chat. Please try again.');
+        }
+    };
+
+    const updateCacheWithNewSystem = async (chatId, userTurn, assistantTurn, isNewChat) => {
+        const previousChatId = currentChatId;
+        currentChatId = chatId;
+        
+        if (isNewChat || !conversationsCache[chatId]) {
+            const title = (userTurn.content || "Image Query").substring(0, 30) + '...';
+            conversationsCache[chatId] = { 
+                title, 
+                messages: [],
+                created_at: new Date().toISOString()
+            };
+            
+            // Add to UI
+            const item = createChatHistoryItem(chatId, title);
+            chatHistoryList.prepend(item);
+            
+            console.log('Created new chat:', chatId);
+        }
+        
+        // Create message objects with IDs
+        const userMessage = { 
+            role: 'user', 
+            content: userTurn.content,
+            message_id: userTurn.message_id,
+            timestamp: new Date().toISOString()
+        };
+        if (userTurn.imageUrl) userMessage.imageUrl = userTurn.imageUrl;
+        
+        const assistantMessage = { 
+            role: 'assistant', 
+            content: assistantTurn.content,
+            message_id: assistantTurn.message_id,
+            timestamp: new Date().toISOString()
+        };
+        
+        // Add to cache
+        conversationsCache[chatId].messages.push(userMessage, assistantMessage);
+        conversationsCache[chatId].updated_at = new Date().toISOString();
+        
+        // Save to storage
+        await saveSessionData(chatId, conversationsCache[chatId]);
+        
+        updateActiveChatItem();
+        chatTitle.textContent = conversationsCache[chatId].title;
+        
+        console.log('Updated cache for chat:', chatId);
+    };
+
+    const createChatHistoryItem = (chatId, title) => {
+        const item = document.createElement('div');
+        item.className = 'chat-history-item';
+        item.dataset.sessionId = chatId;
+        
+        // Create title element
+        const titleElement = document.createElement('span');
+        titleElement.textContent = title;
+        titleElement.className = 'chat-title';
+        
+        // Create delete button
+        const deleteBtn = document.createElement('button');
+        deleteBtn.innerHTML = '×';
+        deleteBtn.className = 'delete-chat-btn';
+        deleteBtn.style.cssText = `
+            float: right;
+            background: none;
+            border: none;
+            color: #999;
+            cursor: pointer;
+            font-size: 18px;
+            padding: 0;
+            width: 20px;
+            height: 20px;
+            line-height: 18px;
+        `;
+        deleteBtn.title = 'Delete chat';
+        
+        // Add event listeners
+        titleElement.addEventListener('click', () => switchChat(chatId));
+        deleteBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            deleteChat(chatId, item);
+        });
+        
+        item.appendChild(titleElement);
+        item.appendChild(deleteBtn);
+        
+        return item;
+    };
+
+    const loadCachedSessions = async () => {
+        try {
+            conversationsCache = await loadAllSessions();
+            console.log('Loaded cached sessions:', Object.keys(conversationsCache).length);
+        } catch (error) {
+            console.error('Failed to load cached sessions:', error);
+            conversationsCache = {};
+        }
+    };
+
+    const displayMessage = (message) => {
+        const { role, content, imageUrl, isLoading, isError, message_id } = message;
+        const sender = role || message.sender;
+        const messageDiv = document.createElement('div');
+        messageDiv.classList.add('message', `${sender}-message`);
+        
+        if (message_id) {
+            messageDiv.dataset.messageId = message_id;
+            console.log('Displayed message with ID:', message_id);
+        }
+        
+        let htmlContent = '';
+        const imageSrc = (typeof imageUrl === 'object' && imageUrl instanceof File) 
+            ? URL.createObjectURL(imageUrl) 
+            : imageUrl;
+            
+        if (imageSrc) { 
+            htmlContent += `<img src="${imageSrc}" alt="User upload" class="user-upload">`; 
+        }
+        if (content) { 
+            htmlContent += marked.parse(content); 
+        }
+        
+        messageDiv.innerHTML = htmlContent || (isLoading ? '...' : '');
+        
+        if (isLoading) messageDiv.classList.add('loading');
+        if (isError) messageDiv.classList.add('error');
+        
+        chatMessages.appendChild(messageDiv);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        return messageDiv;
+    };
+
+    // --- Image Preview Handling ---
+    const handleImageSelect = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            selectedImageFile = file;
+            imagePreview.src = URL.createObjectURL(file);
+            imagePreviewContainer.style.display = 'block';
+            console.log('Image selected:', file.name);
+        }
+    };
+
+    const removeSelectedImage = () => {
+        selectedImageFile = null;
+        imageUploadInput.value = '';
+        imagePreviewContainer.style.display = 'none';
+        imagePreview.src = '#';
+        console.log('Image removed');
+    };
+
+    // --- API Integration ---
+    const renderChatHistoryFromAPI = async () => {
+        try {
+            const response = await fetch('/chats');
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const sessions = await response.json();
+            console.log('Loaded chat sessions from API:', sessions.length);
+            
+            chatHistoryList.innerHTML = '';
+            
+            // Sort by updated_at (most recent first)
+            sessions.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+            
+            sessions.forEach(session => {
+                // Update cache
+                if (!conversationsCache[session.session_id]) {
+                    conversationsCache[session.session_id] = {};
+                }
+                conversationsCache[session.session_id].title = session.title;
+                conversationsCache[session.session_id].message_count = session.message_count;
+                conversationsCache[session.session_id].created_at = session.created_at;
+                conversationsCache[session.session_id].updated_at = session.updated_at;
+                
+                // Create UI item
+                const item = createChatHistoryItem(session.session_id, session.title);
+                chatHistoryList.appendChild(item);
+            });
+            
+            // Save updated cache
+            for (const [chatId, data] of Object.entries(conversationsCache)) {
+                await saveSessionData(chatId, data);
+            }
+            
+            updateActiveChatItem();
+            
+        } catch (error) { 
+            console.error("Failed to render chat history from API:", error); 
+            
+            // Fallback to local cache
+            console.log('Falling back to local cache...');
+            for (const [chatId, data] of Object.entries(conversationsCache)) {
+                if (data.title) {
+                    const item = createChatHistoryItem(chatId, data.title);
+                    chatHistoryList.appendChild(item);
+                }
+            }
+        }
+    };
+
+    const updateActiveChatItem = () => {
+        document.querySelectorAll('.chat-history-item').forEach(item => {
+            item.classList.toggle('active', item.dataset.sessionId === currentChatId);
+        });
+    };
+
+    const closeSidebar = () => appContainer.classList.remove('sidebar-visible');
+
+    // --- Start the Application ---
+    init();
 });