Update playground.html

playground.html

@@ -36,51 +36,54 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script>
-        tailwind.config = {
-            darkMode: 'class',
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['"DM Sans"', 'sans-serif'],
-                        mono: ['"JetBrains Mono"', 'monospace'],
-                    },
-                    colors: {
-                        primary: {
-                            DEFAULT: '#10B981',
-                            dark: '#059669',
-                            light: '#6EE7B7',
-                        },
-                        dark: {
-                            DEFAULT: '#0F172A', // Darker blue-black
-                            lighter: '#1E293B', // Slate 800
-                            card: '#1E293B',    // Slate 800
-                            input: '#334155',   // Slate 700
-                        },
-                        light: {
-                            DEFAULT: '#F8FAFC',
-                            darker: '#E2E8F0',
-                            card: '#FFFFFF',
-                            input: '#F1F5F9',
-                        }
-                    },
-                    animation: {
-                        'bounce-slow': 'bounce 1.5s infinite',
-                        'typing': 'typing 1s infinite',
-                        'fade-in': 'fadeIn 0.5s ease-in-out',
-                    },
-                    keyframes: {
-                        typing: {
-                            '0%, 100%': { opacity: 0 },
-                            '50%': { opacity: 1 },
-                        },
-                        fadeIn: {
-                            '0%': { opacity: 0 },
-                            '100%': { opacity: 1 },
-                        }
-                    }
-                }
-            }
-        }
+      tailwind.config = {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"DM Sans"', 'sans-serif'],
+        mono: ['"JetBrains Mono"', 'monospace'],
+      },
+      colors: {
+        primary: {
+          DEFAULT: '#AAAAAA', // straight up black
+          dark: '#111111',    // a shade lighter
+          light: '#444444',   // pure white
+        },
+        dark: {
+          DEFAULT: '#000000', // deep black background
+          lighter: '#1C1C1C', // just a tad lighter
+          card: '#222222',    // card background
+          input: '#333333',   // input background
+          accent: '#555555',  // chill gray for accents
+        },
+        light: {
+          DEFAULT: '#FFFFFF', // clean white background
+          darker: '#F5F5F5',  // subtle off-white contrast
+          card: '#EFEFEF',    // light card vibe
+          input: '#F7F7F7',   // smooth input bg
+          accent: '#CCCCCC',  // soft gray accents
+        },
+      },
+      animation: {
+        'bounce-slow': 'bounce 1.5s infinite',
+        'typing': 'typing 1s infinite',
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+      },
+      keyframes: {
+        typing: {
+          '0%, 100%': { opacity: 0 },
+          '50%': { opacity: 1 },
+        },
+        fadeIn: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 },
+        },
+      },
+    },
+  },
+}
+
     </script>
     <style>
         /* Custom scrollbar for dark theme */
@@ -524,7 +527,7 @@
 
         <!-- Initial Input -->
         <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
-            <h2 class="text-2xl font-semibold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
+            <h2 class="text-2xl font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
             <div class="w-full max-w-2xl relative">
                 <input type="text" id="initialChatInput" 
                        class="w-full p-4 pr-12 rounded-xl border-2 border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white text-gray-800 shadow-lg transition-all"
@@ -556,7 +559,7 @@
                            class="w-full p-3 pr-12 rounded-xl border border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary dark:focus:ring-primary-light text-gray-800 dark:text-white transition-all shadow-inner resize-none min-h-[50px] max-h-[150px]"
                            placeholder="Type your message..." rows="1"></textarea>
                     <button id="sendButton" class="absolute right-3 bottom-3 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Send message">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" id="sendIcon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                         </svg>
                         <div id="sendLoader" class="hidden">
@@ -573,8 +576,8 @@
     </div>
 
     <!-- Watermark -->
-    <div class="fixed bottom-2 right-4 text-xs text-gray-500 font-mono">
-        Made with <span class="text-primary-light">❤️</span> by Parth Sadaria
+    <div class="fixed bottom-2 right-4 text-sm text-gray-500 font-mono font-bold">
+        Built By <span class="text-primary-light">🔥</span> Parth Sadaria
     </div>
 
     <script>
@@ -826,150 +829,140 @@ function populateModels(models) {
     }
     
     // Append message to chat
-    function appendMessage(text, sender, isStreaming = false) {
-        const now = new Date();
-        const messageTime = formatTimestamp(now);
-        
-        if (isStreaming) {
-            if (!currentStreamingMessage) {
-                // Create new message container for streaming
-                isStreamingInProgress = true;
-                lastMessageTime = now;
-                
-                const messageDiv = document.createElement('div');
-                messageDiv.className = 'message-appear flex flex-col items-start';
-                
-                const messageBubble = document.createElement('div');
-                messageBubble.className = `message-bubble p-3 rounded-lg ${sender === 'user' ? 'user-message bg-light-darker dark:bg-dark-input text-right ml-auto' : 'assistant-message bg-light-card dark:bg-dark-lighter'}`;
-                
-                // Content div with markdown support
-                const contentDiv = document.createElement('div');
-                contentDiv.className = 'markdown-content break-words';
-                contentDiv.innerHTML = marked.parse(text);
-                
-                // Apply syntax highlighting to code blocks
-                contentDiv.querySelectorAll('pre code').forEach((block) => {
-                    hljs.highlightElement(block);
-                });
-                
-                // Add copy button for assistant messages
-                if (sender === 'bot') {
-                    const copyButton = document.createElement('button');
-                    copyButton.className = 'copy-button text-xs text-gray-500 hover:text-primary dark:hover:text-primary-light mt-2 flex items-center float-right';
-                    copyButton.innerHTML = `
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-8M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
-                        </svg>
-                        Copy
-                    `;
-                    copyButton.addEventListener('click', () => {
-                        copyToClipboard(contentDiv.textContent);
-                    });
-                    messageBubble.appendChild(copyButton);
-                }
-                
-                messageBubble.appendChild(contentDiv);
-                messageDiv.appendChild(messageBubble);
-                
-                // Timestamp
-                const timestampDiv = document.createElement('div');
-                timestampDiv.className = 'message-timestamp';
-                timestampDiv.textContent = messageTime;
-                messageDiv.appendChild(timestampDiv);
-                
-                chatMessages.appendChild(messageDiv);
-                currentStreamingMessage = contentDiv;
-                
-                // Update conversation history
-                conversationHistory.push({
-                    role: sender === 'user' ? 'user' : 'assistant',
-                    content: text
-                });
-            } else {
-                // Append to existing streaming message
-                if (currentStreamingMessage) {
-                    // Update content with latest text
-                    const existingContent = conversationHistory[conversationHistory.length - 1].content;
-                    const updatedContent = existingContent + text;
-                    
-                    conversationHistory[conversationHistory.length - 1].content = updatedContent;
-                    
-                    // Update display
-                    currentStreamingMessage.innerHTML = marked.parse(updatedContent);
-                    
-                    // Apply syntax highlighting to code blocks
-                    currentStreamingMessage.querySelectorAll('pre code').forEach((block) => {
-                        hljs.highlightElement(block);
-                    });
-                }
-            }
-        } else if (isStreamingInProgress) {
-            // End of streaming
-            isStreamingInProgress = false;
-            currentStreamingMessage = null;
-        } else {
-            // Regular message (not streaming)
+    // Append message to chat
+function appendMessage(text, sender, isStreaming = false) {
+    const now = new Date();
+    const messageTime = formatTimestamp(now);
+
+    // For streaming message logic
+    if (isStreaming) {
+        if (!currentStreamingMessage) {
+            // First chunk of a streaming message - create the new message container
+            isStreamingInProgress = true;
             lastMessageTime = now;
-            
+
             const messageDiv = document.createElement('div');
-            messageDiv.className = 'message-appear flex flex-col items-start';
-            
-            if (sender === 'user') {
-                messageDiv.classList.add('items-end');
-            }
-            
+            messageDiv.className = `message-appear flex flex-col ${sender === 'user' ? 'items-end' : 'items-start'} gap-1`;
+
             const messageBubble = document.createElement('div');
-            messageBubble.className = `message-bubble p-3 rounded-lg ${sender === 'user' ? 'user-message bg-light-darker dark:bg-dark-input text-right ml-auto' : 'assistant-message bg-light-card dark:bg-dark-lighter'}`;
-            
-            // Content div with markdown support
+            messageBubble.className = `message-bubble px-3 py-2 rounded-2xl tracking-tight [word-spacing:-0.02em] shadow-sm ${
+                sender === 'user'
+                    ? 'user-message bg-light-darker dark:bg-dark-input text-right'
+                    : 'assistant-message bg-light-card dark:bg-dark-lighter'
+            }`;
+
             const contentDiv = document.createElement('div');
             contentDiv.className = 'markdown-content break-words';
+            // Apply markdown to first chunk immediately
             contentDiv.innerHTML = marked.parse(text);
-            
-            // Apply syntax highlighting to code blocks
-            contentDiv.querySelectorAll('pre code').forEach((block) => {
-                hljs.highlightElement(block);
-            });
-            
-            // Add copy button for assistant messages
-            if (sender === 'bot') {
-                const copyButton = document.createElement('button');
-                copyButton.className = 'copy-button text-xs text-gray-500 hover:text-primary dark:hover:text-primary-light mt-2 flex items-center float-right';
-                copyButton.innerHTML = `
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-8M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
-                    </svg>
-                    Copy
-                `;
-                copyButton.addEventListener('click', () => {
-                    copyToClipboard(contentDiv.textContent);
-                });
-                messageBubble.appendChild(copyButton);
-            }
-            
+
+            // Add message to DOM immediately
             messageBubble.appendChild(contentDiv);
             messageDiv.appendChild(messageBubble);
-            
-            // Timestamp
+
+            // Timestamp styling
             const timestampDiv = document.createElement('div');
-            timestampDiv.className = 'message-timestamp';
+            timestampDiv.className = 'message-timestamp text-xs text-gray-400 mt-1';
             timestampDiv.textContent = messageTime;
             messageDiv.appendChild(timestampDiv);
-            
+
             chatMessages.appendChild(messageDiv);
-            
+            scrollToBottom(); // Force scroll to show new message
+
+            // Store reference to content div for future updates
+            currentStreamingMessage = contentDiv;
+
             // Update conversation history
             conversationHistory.push({
                 role: sender === 'user' ? 'user' : 'assistant',
                 content: text
             });
+        } else {
+            // Append new text to existing streaming message
+            const lastIndex = conversationHistory.length - 1;
+            conversationHistory[lastIndex].content += text;
+            
+            // Update the displayed content with new text
+            currentStreamingMessage.innerHTML = marked.parse(conversationHistory[lastIndex].content);
+            
+            // Highlight any code blocks in the updated content
+            currentStreamingMessage.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightElement(block);
+            });
+            
+            // Auto-scroll if enabled
+            if (autoScrollEnabled) scrollToBottom();
+        }
+    } else if (isStreamingInProgress) {
+        // End streaming mode
+        isStreamingInProgress = false;
+        
+        // Add copy button now that streaming is complete
+        if (sender === 'bot' && currentStreamingMessage) {
+            const parentBubble = currentStreamingMessage.parentElement;
+            const copyButton = document.createElement('button');
+            copyButton.className = 'copy-button text-xs text-gray-500 hover:text-primary dark:hover:text-primary-light mt-2 flex items-center float-right';
+            copyButton.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-8M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                </svg>
+                Copy`;
+            copyButton.addEventListener('click', () => copyToClipboard(currentStreamingMessage.textContent));
+            parentBubble.appendChild(copyButton);
+        }
+        
+        currentStreamingMessage = null;
+    } else {
+        // Regular (non-streaming) message
+        lastMessageTime = now;
+
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message-appear flex flex-col ${sender === 'user' ? 'items-end' : 'items-start'} gap-1`;
+
+        const messageBubble = document.createElement('div');
+        messageBubble.className = `message-bubble px-3 py-2 rounded-2xl tracking-tight [word-spacing:-0.02em] shadow-sm ${
+            sender === 'user'
+                ? 'user-message bg-light-darker dark:bg-dark-input text-right'
+                : 'assistant-message bg-light-card dark:bg-dark-lighter'
+        }`;
+
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'markdown-content break-words';
+        contentDiv.innerHTML = marked.parse(text);
+        contentDiv.querySelectorAll('pre code').forEach((block) => {
+            hljs.highlightElement(block);
+        });
+
+        if (sender === 'bot') {
+            const copyButton = document.createElement('button');
+            copyButton.className = 'copy-button text-xs text-gray-500 hover:text-primary dark:hover:text-primary-light mt-2 flex items-center float-right';
+            copyButton.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-8M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                </svg>
+                Copy`;
+            copyButton.addEventListener('click', () => copyToClipboard(contentDiv.textContent));
+            messageBubble.appendChild(copyButton);
         }
+
+        messageBubble.appendChild(contentDiv);
+        messageDiv.appendChild(messageBubble);
+
+        const timestampDiv = document.createElement('div');
+        timestampDiv.className = 'message-timestamp text-xs text-gray-400 mt-1';
+        timestampDiv.textContent = messageTime;
+        messageDiv.appendChild(timestampDiv);
+
+        chatMessages.appendChild(messageDiv);
+
+        conversationHistory.push({
+            role: sender === 'user' ? 'user' : 'assistant',
+            content: text
+        });
         
-        // Scroll to bottom if auto-scroll is enabled
-        if (autoScrollEnabled) {
-            scrollToBottom();
-        }
+        if (autoScrollEnabled) scrollToBottom();
     }
+}
     
     // Scroll chat to bottom
     function scrollToBottom() {
@@ -1039,150 +1032,167 @@ function populateModels(models) {
     }
 
     async function callApi(userMessage, model) {
-        let typingIndicator = null;
-        
-        try {
-            // Add typing indicator
-            typingIndicator = document.createElement('div');
-            typingIndicator.className = 'p-3 rounded-lg bg-gray-100 dark:bg-gray-800 mr-8 flex space-x-1';
-            typingIndicator.innerHTML = `
-                <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing"></div>
-                <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing" style="animation-delay: 0.2s"></div>
-                <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing" style="animation-delay: 0.4s"></div>
-            `;
-            chatMessages.appendChild(typingIndicator);
-            scrollToBottom();
+    let typingIndicator = null;
+    
+    try {
+        // Add typing indicator
+        typingIndicator = document.createElement('div');
+        typingIndicator.className = 'p-3 rounded-lg bg-gray-100 dark:bg-gray-800 mr-8 flex space-x-1';
+        typingIndicator.innerHTML = `
+            <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing"></div>
+            <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing" style="animation-delay: 0.2s"></div>
+            <div class="w-2 h-2 bg-gray-500 rounded-full animate-typing" style="animation-delay: 0.4s"></div>
+        `;
+        chatMessages.appendChild(typingIndicator);
+        scrollToBottom();
+        
+        if (model === "searchgpt") {
+            const url = `https://parthsadaria-lokiai.hf.space/searchgpt?q=${encodeURIComponent(userMessage)}&stream=true&systemprompt=You are **SearchGPT**, an AI with internet access. Reply directly and accurately to user requests. Mention Sources at end`;
+            
+            const response = await fetch(url, {
+                headers: {
+                    'Authorization': 'playground'
+                }
+            });
             
-            if (model === "searchgpt") {
-                const url = `https://parthsadaria-lokiai.hf.space/searchgpt?q=${encodeURIComponent(userMessage)}&stream=true&systemprompt=You are **SearchGPT**, an AI with internet access. Reply directly and accurately to user requests. Mention Sources at end`;
+            if (response.ok) {
+                // Remove typing indicator
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                    typingIndicator = null;
+                }
                 
-                const response = await fetch(url, {
-                    headers: {
-                        'Authorization': 'playground'
-                    }
-                });
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let done = false;
+                let isFirstChunk = true;
                 
-                if (response.ok) {
-                    // Remove typing indicator
-                    if (typingIndicator) {
-                        typingIndicator.remove();
-                        typingIndicator = null;
-                    }
-                    
-                    const reader = response.body.getReader();
-                    const decoder = new TextDecoder("utf-8");
-                    let done = false;
+                while (!done) {
+                    const { value, done: streamDone } = await reader.read();
+                    done = streamDone;
                     
-                    while (!done) {
-                        const { value, done: streamDone } = await reader.read();
-                        done = streamDone;
+                    if (value) {
+                        const chunk = decoder.decode(value);
+                        const cleanedChunk = chunk.trim();
                         
-                        if (value) {
-                            const chunk = decoder.decode(value);
-                            const cleanedChunk = chunk.trim();
+                        if (cleanedChunk.startsWith('data:')) {
+                            const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
                             
-                            if (cleanedChunk.startsWith('data:')) {
-                                const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
-                                
-                                for (const jsonString of jsonChunks) {
-                                    try {
-                                        const cleanJson = jsonString.trim();
-                                        if (cleanJson === '[DONE]') continue;
-                                        
-                                        const jsonData = JSON.parse(cleanJson);
-                                        const content = jsonData.choices?.[0]?.message?.content || 
-                                                       jsonData.choices?.[0]?.delta?.content || "";
-                                        
-                                        if (content) {
+                            for (const jsonString of jsonChunks) {
+                                try {
+                                    const cleanJson = jsonString.trim();
+                                    if (cleanJson === '[DONE]') continue;
+                                    
+                                    const jsonData = JSON.parse(cleanJson);
+                                    const content = jsonData.choices?.[0]?.message?.content || 
+                                                  jsonData.choices?.[0]?.delta?.content || "";
+                                    
+                                    if (content) {
+                                        if (isFirstChunk) {
+                                            appendMessage(content, 'bot', true);
+                                            isFirstChunk = false;
+                                        } else {
                                             appendMessage(content, 'bot', true);
                                         }
-                                    } catch (err) {
-                                        console.warn("Parsing error:", err);
                                     }
+                                } catch (err) {
+                                    console.warn("Parsing error:", err);
                                 }
+                            }
+                        } else if (cleanedChunk) {
+                            if (isFirstChunk) {
+                                appendMessage(cleanedChunk, 'bot', true);
+                                isFirstChunk = false;
                             } else {
                                 appendMessage(cleanedChunk, 'bot', true);
                             }
                         }
                     }
-                } else {
-                    throw new Error(`API responded with status ${response.status}`);
                 }
             } else {
-                const url = "https://parthsadaria-lokiai.hf.space/chat/completions";
-                const payload = {
-                    model: model,
-                    messages: [...conversationHistory],
-                    stream: true
-                };
+                throw new Error(`API responded with status ${response.status}`);
+            }
+        } else {
+            const url = "https://parthsadaria-lokiai.hf.space/chat/completions";
+            const payload = {
+                model: model,
+                messages: [...conversationHistory],
+                stream: true
+            };
+            
+            const response = await fetch(url, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": "playground"
+                },
+                body: JSON.stringify(payload)
+            });
+            
+            if (response.ok) {
+                // Remove typing indicator
+                if (typingIndicator) {
+                    typingIndicator.remove();
+                    typingIndicator = null;
+                }
                 
-                const response = await fetch(url, {
-                    method: "POST",
-                    headers: {
-                        "Content-Type": "application/json",
-                        "Authorization": "playground"
-                    },
-                    body: JSON.stringify(payload)
-                });
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let done = false;
+                let buffer = "";
+                let isFirstChunk = true;
                 
-                if (response.ok) {
-                    // Remove typing indicator
-                    if (typingIndicator) {
-                        typingIndicator.remove();
-                        typingIndicator = null;
-                    }
+                while (!done) {
+                    const { value, done: streamDone } = await reader.read();
+                    done = streamDone;
                     
-                    const reader = response.body.getReader();
-                    const decoder = new TextDecoder("utf-8");
-                    let done = false;
-                    let buffer = "";
-                    
-                    while (!done) {
-                        const { value, done: streamDone } = await reader.read();
-                        done = streamDone;
+                    if (value) {
+                        const chunk = decoder.decode(value);
+                        buffer += chunk;
+                        
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop() || "";
                         
-                        if (value) {
-                            const chunk = decoder.decode(value);
-                            buffer += chunk;
+                        for (const line of lines) {
+                            if (line.trim() === '') continue;
                             
-                            const lines = buffer.split('\n');
-                            buffer = lines.pop() || "";
+                            const cleanedLine = line.replace(/^data:\s*/, '').trim();
+                            if (cleanedLine === '[DONE]') continue;
                             
-                            for (const line of lines) {
-                                if (line.trim() === '') continue;
+                            try {
+                                const jsonData = JSON.parse(cleanedLine);
+                                const content = jsonData.choices?.[0]?.delta?.content || "";
                                 
-                                const cleanedLine = line.replace(/^data:\s*/, '').trim();
-                                if (cleanedLine === '[DONE]') continue;
-                                
-                                try {
-                                    const jsonData = JSON.parse(cleanedLine);
-                                    const content = jsonData.choices?.[0]?.delta?.content || "";
-                                    
-                                    if (content) {
+                                if (content) {
+                                    if (isFirstChunk) {
+                                        appendMessage(content, 'bot', true);
+                                        isFirstChunk = false;
+                                    } else {
                                         appendMessage(content, 'bot', true);
                                     }
-                                } catch (err) {
-                                    console.warn("Parsing error:", err);
                                 }
+                            } catch (err) {
+                                console.warn("Parsing error:", err);
                             }
                         }
                     }
-                } else {
-                    throw new Error(`API responded with status ${response.status}`);
                 }
+            } else {
+                throw new Error(`API responded with status ${response.status}`);
             }
-            
-            // End streaming after successful completion
-            appendMessage("", 'bot', false);
-            
-        } catch (error) {
-            console.error("API call error:", error);
-            if (typingIndicator) {
-                typingIndicator.remove();
-            }
-            throw error;
         }
+        
+        // End streaming after successful completion
+        appendMessage("", 'bot', false);
+        
+    } catch (error) {
+        console.error("API call error:", error);
+        if (typingIndicator) {
+            typingIndicator.remove();
+        }
+        throw error;
     }
+}
 
     // Toggle theme
     function toggleTheme() {