Update public/index.html

public/index.html

@@ -234,4 +234,201 @@
                 document.getElementById('current-chat-title').innerText = 'Select or create a chat';
                 document.getElementById('edit-title-btn').classList.add('hidden');
                 updateTokenDisplay(0, 0, 0);
-                loadSid
+                loadSidebar();
+            }
+        }
+
+        async function selectChat(id) {
+            currentChatId = id;
+            clearInterval(pollingInterval);
+            const res = await fetch(`/api/chats/${id}`);
+            const chat = await res.json();
+            
+            document.getElementById('current-chat-title').innerText = chat.title;
+            document.getElementById('edit-title-btn').classList.remove('hidden'); 
+            
+            updateTokenDisplay(chat.totalTokens, chat.inputTokens, chat.outputTokens);
+            
+            cancelTitleEdit(); 
+            renderMessages(chat.messages);
+            loadSidebar(); 
+
+            if(window.innerWidth < 1024 && !document.getElementById('sidebar').classList.contains('-translate-x-full')) {
+                toggleSidebar();
+            }
+            if (chat.isGenerating) pollGeneratingChat(id);
+        }
+
+        function renderMessages(messages) {
+            const container = document.getElementById('chat-window');
+            container.innerHTML = messages.map(m => {
+                let html = '';
+                if (m.reasoning) {
+                    html += `<div class="reasoning-block"><i>Thinking Process</i><br/>${marked.parse(m.reasoning)}</div>`;
+                }
+                if (m.content) {
+                    html += DOMPurify.sanitize(marked.parse(m.content));
+                }
+                
+                return `
+                    <div class="flex ${m.role === 'user' ? 'justify-end' : 'justify-start'} w-full">
+                        <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl p-4 shadow-sm ${m.role === 'user' ? 'bg-blue-600 text-white rounded-br-sm' : 'bg-gray-850 border border-gray-800 text-gray-200 markdown-body rounded-bl-sm'}">
+                            ${m.role === 'user' ? `<div class="whitespace-pre-wrap">${m.content}</div>` : html}
+                        </div>
+                    </div>
+                `;
+            }).join('');
+            
+            document.querySelectorAll('.markdown-body pre').forEach(pre => {
+                if (!pre.querySelector('.copy-btn')) {
+                    const btn = document.createElement('button');
+                    btn.className = 'copy-btn';
+                    btn.innerText = 'Copy';
+                    btn.onclick = () => {
+                        const codeText = pre.querySelector('code')?.innerText || pre.innerText.replace('Copy', '');
+                        navigator.clipboard.writeText(codeText.trim());
+                        btn.innerText = 'Copied!';
+                        setTimeout(() => btn.innerText = 'Copy', 2000);
+                    };
+                    pre.appendChild(btn);
+                }
+            });
+            container.scrollTop = container.scrollHeight;
+        }
+
+        function pollGeneratingChat(id) {
+            pollingInterval = setInterval(async () => {
+                const res = await fetch(`/api/chats/${id}`);
+                const chat = await res.json();
+                renderMessages(chat.messages);
+                updateTokenDisplay(chat.totalTokens, chat.inputTokens, chat.outputTokens);
+                
+                if (chat.title !== document.getElementById('current-chat-title').innerText && document.getElementById('title-display').classList.contains('hidden') === false) {
+                     document.getElementById('current-chat-title').innerText = chat.title;
+                     loadSidebar();
+                }
+                if (!chat.isGenerating) clearInterval(pollingInterval);
+            }, 1500);
+        }
+
+        function handleImageSelect(event) {
+            const files = event.target.files;
+            const container = document.getElementById('image-preview-container');
+            container.classList.remove('hidden');
+            
+            Array.from(files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    attachedImages.push(e.target.result);
+                    container.innerHTML += `
+                        <div class="relative group">
+                            <img src="${e.target.result}" class="h-14 w-14 object-cover rounded-lg border border-gray-600 shadow-sm">
+                        </div>`;
+                };
+                reader.readAsDataURL(file);
+            });
+        }
+
+        async function sendMessage() {
+            const input = document.getElementById('message-input');
+            const text = input.value.trim();
+            if (!text || !currentChatId) return;
+
+            const payload = {
+                model: document.getElementById('model-select').value,
+                prompt: text,
+                images: attachedImages
+            };
+
+            const container = document.getElementById('chat-window');
+            container.innerHTML += `
+                <div class="flex justify-end w-full">
+                    <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl rounded-br-sm p-4 bg-blue-600 text-white shadow-sm whitespace-pre-wrap">${text}</div>
+                </div>
+                <div class="flex justify-start w-full" id="temp-ai-wrapper">
+                    <div class="max-w-[95%] lg:max-w-[85%] rounded-2xl rounded-bl-sm p-4 bg-gray-850 border border-gray-800 text-gray-200 markdown-body shadow-sm" id="temp-ai-msg">
+                        <span class="flex items-center gap-2 text-gray-400">
+                            <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                            Thinking...
+                        </span>
+                    </div>
+                </div>
+            `;
+            container.scrollTop = container.scrollHeight;
+            
+            input.value = '';
+            input.style.height = 'auto'; 
+            attachedImages =[];
+            document.getElementById('image-preview-container').innerHTML = '';
+            document.getElementById('image-preview-container').classList.add('hidden');
+            document.getElementById('send-btn').disabled = true;
+
+            try {
+                const response = await fetch(`/api/chats/${currentChatId}/stream`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let aiContent = "";
+                let aiReasoning = "";
+
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+                    
+                    const chunkText = decoder.decode(value, { stream: true });
+                    const chunks = chunkText.split(/(__THINK__|__USAGE__)/);
+                    let i = 0;
+                    
+                    while (i < chunks.length) {
+                        if (chunks[i] === '__THINK__') {
+                            aiReasoning += chunks[i+1];
+                            i += 2;
+                        } else if (chunks[i] === '__USAGE__') {
+                            const usageData = JSON.parse(chunks[i+1]);
+                            // Update the live token state globally
+                            updateTokenDisplay(
+                                currentTokens.total + usageData.totalTokens,
+                                currentTokens.in + usageData.inputTokens,
+                                currentTokens.out + usageData.outputTokens
+                            );
+                            i += 2;
+                        } else {
+                            aiContent += chunks[i];
+                            i++;
+                        }
+                    }
+
+                    let tempHtml = "";
+                    if (aiReasoning) tempHtml += `<div class="reasoning-block"><i>Thinking Process</i><br/>${marked.parse(aiReasoning)}</div>`;
+                    if (aiContent) tempHtml += DOMPurify.sanitize(marked.parse(aiContent));
+                    
+                    document.getElementById('temp-ai-msg').innerHTML = tempHtml || "<span class='animate-pulse text-gray-400'>Thinking...</span>";
+                    container.scrollTop = container.scrollHeight;
+                }
+
+                // Force final refresh of states from db
+                selectChat(currentChatId);
+
+            } catch (error) {
+                console.error(error);
+                document.getElementById('temp-ai-msg').innerHTML = "<span class='text-red-400'>Error connecting to API.</span>";
+            } finally {
+                document.getElementById('send-btn').disabled = false;
+            }
+        }
+
+        document.getElementById('message-input').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) { 
+                e.preventDefault(); 
+                sendMessage(); 
+            }
+        });
+
+        loadSidebar();
+    </script>
+</body>
+</html>