Update app.py

app.py

@@ -240,30 +240,36 @@
             input.value = '';
             
             updateMessagesDisplay();
+            
+            // Add empty assistant message for streaming
+            const assistantMessage = {
+                role: 'assistant',
+                content: '',
+                timestamp: new Date().toISOString()
+            };
+            messages.push(assistantMessage);
+            
             setLoading(true);
+            updateMessagesDisplay(); // Show the empty assistant message with loading
 
             try {
                 const aiResponse = await getAIResponse(message);
-                const assistantMessage = {
-                    role: 'assistant',
-                    content: aiResponse,
-                    timestamp: new Date().toISOString()
-                };
-                messages.push(assistantMessage);
+                
+                // Update the last message with final response
+                messages[messages.length - 1].content = aiResponse;
+                
+                // Remove cursor and show final response
+                updateMessagesDisplay();
                 
                 // Track activity after receiving response
                 trackActivity();
             } catch (error) {
-                const errorMessage = {
-                    role: 'assistant',
-                    content: 'Sorry, I encountered an error. Please try again.',
-                    timestamp: new Date().toISOString()
-                };
-                messages.push(errorMessage);
+                // Replace the empty message with error
+                messages[messages.length - 1].content = 'Sorry, I encountered an error. Please try again.';
+                updateMessagesDisplay();
             }
 
             setLoading(false);
-            updateMessagesDisplay();
         }
 
         async function getAIResponse(userMessage) {
@@ -293,7 +299,7 @@
             const data = {
                 model: selectedModel,
                 messages: apiMessages,
-                stream: false,
+                stream: true, // Enable streaming
                 max_tokens: 2000,
                 temperature: 0.7
             };
@@ -309,11 +315,61 @@
                 throw new Error("API Error: " + response.status + " - " + errorText);
             }
 
-            const result = await response.json();
-            const aiResponse = result.choices[0].message.content;
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let fullResponse = "";
+            
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+                    
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            const data = line.slice(6);
+                            if (data === '[DONE]') {
+                                const modelName = models[selectedModel] || "AI";
+                                return fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
+                            }
+                            
+                            try {
+                                const parsed = JSON.parse(data);
+                                const delta = parsed.choices?.[0]?.delta?.content || '';
+                                if (delta) {
+                                    fullResponse += delta;
+                                    // Update the display in real-time
+                                    updateStreamingResponse(fullResponse);
+                                }
+                            } catch (e) {
+                                // Skip invalid JSON
+                                continue;
+                            }
+                        }
+                    }
+                }
+            } finally {
+                reader.releaseLock();
+            }
+            
             const modelName = models[selectedModel] || "AI";
+            return fullResponse + "\n\n---\n*Response created by: **" + modelName + "***";
+        }
+
+        function updateStreamingResponse(partialResponse) {
+            // Find the last message area and update it with streaming text
+            const messagesArea = document.getElementById('messages-area');
+            const messageElements = messagesArea.children;
             
-            return aiResponse + "\n\n---\n*Response created by: **" + modelName + "***";
+            if (messageElements.length > 0) {
+                const lastMessage = messageElements[messageElements.length - 1];
+                const contentDiv = lastMessage.querySelector('.flex-1 .whitespace-pre-wrap');
+                if (contentDiv) {
+                    contentDiv.textContent = partialResponse + " ▌"; // Add cursor
+                }
+            }
         }
 
         function setLoading(loading) {
@@ -355,7 +411,10 @@
                 let content = message.content;
                 let attribution = '';
                 
-                if (message.role === 'assistant' && content.includes('---\n*Response created by:')) {
+                // Handle empty assistant messages (streaming in progress)
+                if (message.role === 'assistant' && content === '' && isLoading) {
+                    content = '';
+                } else if (message.role === 'assistant' && content.includes('---\n*Response created by:')) {
                     const parts = content.split('\n\n---\n*Response created by:');
                     content = parts[0];
                     if (parts[1]) {
@@ -377,21 +436,16 @@
                 `;
             });
 
-            if (isLoading) {
-                html += `
-                    <div class="flex gap-4">
-                        <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center flex-shrink-0">
-                            <svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
-                        </div>
-                        <div class="flex-1">
-                            <div class="flex items-center gap-2 text-gray-400">
-                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-1"></div>
-                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-2"></div>
-                                <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-3"></div>
-                            </div>
-                        </div>
+            // Show loading dots if streaming
+            if (isLoading && messages.length > 0 && messages[messages.length - 1].role === 'assistant' && messages[messages.length - 1].content === '') {
+                // Replace the last empty message with loading dots
+                html = html.replace(/<div class="whitespace-pre-wrap text-gray-100"><\/div>/, `
+                    <div class="flex items-center gap-2 text-gray-400">
+                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-1"></div>
+                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-2"></div>
+                        <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce loading-dot-3"></div>
                     </div>
-                `;
+                `);
             }
             
             messagesArea.innerHTML = html;