Update playground.html

playground.html

@@ -622,486 +622,526 @@
         Made with ❤️ by Parth Sadaria
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const chatWrapper = document.querySelector('.chat-wrapper');
-            const initialInput = document.querySelector('.initial-input');
-            const chatContainer = document.getElementById('chatContainer');
-            const initialChatInput = document.getElementById('initialChatInput');
-            const initialSendIcon = document.getElementById('initialSendIcon');
-            const chatMessages = document.getElementById('chatMessages');
-            const chatInput = document.getElementById('chatInput');
-            const sendButtonIcon = document.getElementById('sendButtonIcon');
-            const sendLoader = document.getElementById('sendLoader');
-            const clearChatButton = document.getElementById('clearChatButton');
-            const modelSelectDisplay = document.getElementById('modelSelectDisplay');
-            const modelOptions = document.getElementById('modelOptions');
-            const modelLoader = document.getElementById('modelLoader');
-            const themeToggle = document.getElementById('themeToggle');
+document.addEventListener('DOMContentLoaded', function() {
+    const chatWrapper = document.querySelector('.chat-wrapper');
+    const initialInput = document.querySelector('.initial-input');
+    const chatContainer = document.getElementById('chatContainer');
+    const initialChatInput = document.getElementById('initialChatInput');
+    const initialSendIcon = document.getElementById('initialSendIcon');
+    const chatMessages = document.getElementById('chatMessages');
+    const chatInput = document.getElementById('chatInput');
+    const sendButtonIcon = document.getElementById('sendButtonIcon');
+    const sendLoader = document.getElementById('sendLoader');
+    const clearChatButton = document.getElementById('clearChatButton');
+    const modelSelectDisplay = document.getElementById('modelSelectDisplay');
+    const modelOptions = document.getElementById('modelOptions');
+    const modelLoader = document.getElementById('modelLoader');
+    const themeToggle = document.getElementById('themeToggle');
+    
+    let currentStreamingMessage = null;
+    let isStreamingInProgress = false;
+    let conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
+    let selectedModel = '';
+    let modelsList = [];
+    let isDarkMode = true;
+
+    // Fetch models from API
+    async function fetchModels() {
+        modelLoader.style.display = 'block';
+        try {
+            const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
+                method: 'GET',
+                headers: {
+                    'Authorization': 'playground'
+                }
+            });
             
-            let currentStreamingMessage = null;
-            let isStreamingInProgress = false;
-            let conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
-            let selectedModel = '';
-            let modelsList = [];
-            let isDarkMode = true;
-
-            // Fetch models from API
-            async function fetchModels() {
-                modelLoader.style.display = 'block';
-                try {
-                    const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
-                        method: 'GET',
-                        headers: {
-                            'Authorization': 'playground'
-                        }
-                    });
-                    
-                    if (response.ok) {
-                        const data = await response.json();
-                        modelsList = data;
-                        populateModels(data);
-                    } else {
-                        console.error('Failed to fetch models:', response.status);
-                        // Fallback to some default models
-                        const fallbackModels = [
-                            { id: "gpt-4o", object: "model" },
-                            { id: "gpt-3.5-turbo", object: "model" },
-                            { id: "claude-3-5-sonnet", object: "model" },
-                            { id: "claude-3-haiku", object: "model" },
-                            { id: "llama-3.1-70b", object: "model" }
-                        ];
-                        populateModels(fallbackModels);
-                    }
-                } catch (error) {
-                    console.error('Error fetching models:', error);
-                    // Use the same fallback
-                    const fallbackModels = [
-                        { id: "gpt-4o", object: "model" },
-                        { id: "gpt-3.5-turbo", object: "model" },
-                        { id: "claude-3-5-sonnet", object: "model" },
-                        { id: "claude-3-haiku", object: "model" },
-                        { id: "llama-3.1-70b", object: "model" }
-                    ];
-                    populateModels(fallbackModels);
-                } finally {
-                    modelLoader.style.display = 'none';
+            if (response.ok) {
+                const data = await response.json();
+                modelsList = data;
+                populateModels(data);
+            } else {
+                console.error('Failed to fetch models:', response.status);
+                // Fallback to some default models
+                const fallbackModels = [
+                    { id: "gpt-4o", object: "model" },
+                    { id: "gpt-3.5-turbo", object: "model" },
+                    { id: "claude-3-5-sonnet", object: "model" },
+                    { id: "claude-3-haiku", object: "model" },
+                    { id: "llama-3.1-70b", object: "model" }
+                ];
+                populateModels(fallbackModels);
+            }
+        } catch (error) {
+            console.error('Error fetching models:', error);
+            // Use the same fallback
+            const fallbackModels = [
+                { id: "gpt-4o", object: "model" },
+                { id: "gpt-3.5-turbo", object: "model" },
+                { id: "claude-3-5-sonnet", object: "model" },
+                { id: "claude-3-haiku", object: "model" },
+                { id: "llama-3.1-70b", object: "model" }
+            ];
+            populateModels(fallbackModels);
+        } finally {
+            modelLoader.style.display = 'none';
+        }
+    }
+
+    // Organize and display models
+    function populateModels(models) {
+        // Group models by provider
+        const providers = {};
+        models.forEach(model => {
+            const modelName = model.id;
+            let provider = 'Other';
+            
+            if (modelName.includes('gpt')) provider = 'OpenAI';
+            else if (modelName.includes('claude')) provider = 'Anthropic';
+            else if (modelName.includes('llama')) provider = 'Meta';
+            else if (modelName.includes('gemini')) provider = 'Google';
+            else if (modelName.includes('mistral')) provider = 'Mistral';
+            else if (modelName.includes('yi')) provider = 'Yi';
+            
+            if (!providers[provider]) providers[provider] = [];
+            providers[provider].push(model);
+        });
+        
+        // Clear existing options
+        modelOptions.innerHTML = '';
+        
+        // Add special option for web search
+        const webSearchOption = document.createElement('div');
+        webSearchOption.className = 'custom-option';
+        webSearchOption.textContent = 'SearchGPT (Web-access)';
+        webSearchOption.dataset.value = 'searchgpt';
+        modelOptions.appendChild(webSearchOption);
+        
+        // Add a separator
+        const separator = document.createElement('div');
+        separator.className = 'model-group';
+        separator.textContent = 'AI Models';
+        modelOptions.appendChild(separator);
+        
+        // Create and append provider groups and their models
+        Object.keys(providers).sort().forEach(provider => {
+            const providerGroup = document.createElement('div');
+            providerGroup.className = 'model-group';
+            providerGroup.textContent = provider;
+            modelOptions.appendChild(providerGroup);
+            
+            providers[provider].sort((a, b) => a.id.localeCompare(b.id)).forEach(model => {
+                const option = document.createElement('div');
+                option.className = 'custom-option';
+                option.textContent = model.id;
+                option.dataset.value = model.id;
+                modelOptions.appendChild(option);
+            });
+        });
+        
+        // Set default model if none selected yet
+        if (!selectedModel && models.length > 0) {
+            const preferredModels = ['gpt-4o', 'gpt-4', 'claude-3-5-sonnet', 'gpt-3.5-turbo'];
+            
+            // Find the first preferred model that exists in our list
+            for (const preferred of preferredModels) {
+                const match = models.find(m => m.id.includes(preferred));
+                if (match) {
+                    selectedModel = match.id;
+                    modelSelectDisplay.textContent = selectedModel;
+                    break;
                 }
             }
+            
+            // If no preferred model found, use the first one in the list
+            if (!selectedModel) {
+                selectedModel = models[0].id;
+                modelSelectDisplay.textContent = selectedModel;
+            }
+        }
+        
+        // Add event listeners to options
+        document.querySelectorAll('.custom-option').forEach(option => {
+            option.addEventListener('click', function() {
+                selectedModel = this.dataset.value;
+                modelSelectDisplay.textContent = this.textContent;
+                modelOptions.style.display = 'none';
+            });
+        });
+    }
 
-            // Organize and display models
-            function populateModels(models) {
-                // Group models by provider
-                const providers = {};
-                models.forEach(model => {
-                    const modelName = model.id;
-                    let provider = 'Other';
-                    
-                    if (modelName.includes('gpt')) provider = 'OpenAI';
-                    else if (modelName.includes('claude')) provider = 'Anthropic';
-                    else if (modelName.includes('llama')) provider = 'Meta';
-                    else if (modelName.includes('gemini')) provider = 'Google';
-                    else if (modelName.includes('mistral')) provider = 'Mistral';
-                    else if (modelName.includes('yi')) provider = 'Yi';
-                    
-                    if (!providers[provider]) providers[provider] = [];
-                    providers[provider].push(model);
-                });
-                
-                // Clear existing options
-                modelOptions.innerHTML = '';
-                
-                // Add special option for web search
-                const webSearchOption = document.createElement('div');
-                webSearchOption.className = 'custom-option';
-                webSearchOption.textContent = 'SearchGPT (Web-access)';
-                webSearchOption.dataset.value = 'searchgpt';
-                modelOptions.appendChild(webSearchOption);
-                
-                // Add a separator
-                const separator = document.createElement('div');
-                separator.className = 'model-group';
-                separator.textContent = 'AI Models';
-                modelOptions.appendChild(separator);
-                
-                // Create and append provider groups and their models
-                Object.keys(providers).sort().forEach(provider => {
-                    const providerGroup = document.createElement('div');
-                    providerGroup.className = 'model-group';
-                    providerGroup.textContent = provider;
-                    modelOptions.appendChild(providerGroup);
-                    
-                    providers[provider].sort((a, b) => a.id.localeCompare(b.id)).forEach(model => {
-                        const option = document.createElement('div');
-                        option.className = 'custom-option';
-                        option.textContent = model.id;
-                        option.dataset.value = model.id;
-                        modelOptions.appendChild(option);
+    function scrollToBottom() {
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    function appendMessage(content, type = 'bot', isStreaming = false) {
+        if (type === 'bot' && isStreaming) {
+            if (!currentStreamingMessage) {
+                currentStreamingMessage = document.createElement('div');
+                currentStreamingMessage.className = `message ${type}`;
+                chatMessages.appendChild(currentStreamingMessage);
+
+                // Add to conversation history only at the start of streaming
+                if (!isStreamingInProgress) {
+                    conversationHistory.push({
+                        role: 'assistant',
+                        content: ''
                     });
-                });
-                
-                // Set default model if none selected yet
-                if (!selectedModel && models.length > 0) {
-                    const preferredModels = ['gpt-4o', 'gpt-4', 'claude-3-5-sonnet', 'gpt-3.5-turbo'];
-                    
-                    // Find the first preferred model that exists in our list
-                    for (const preferred of preferredModels) {
-                        const match = models.find(m => m.id.includes(preferred));
-                        if (match) {
-                            selectedModel = match.id;
-                            modelSelectDisplay.textContent = selectedModel;
-                            break;
-                        }
-                    }
-                    
-                    // If no preferred model found, use the first one in the list
-                    if (!selectedModel) {
-                        selectedModel = models[0].id;
-                        modelSelectDisplay.textContent = selectedModel;
-                    }
+                    isStreamingInProgress = true;
                 }
-                
-                // Add event listeners to options
-                document.querySelectorAll('.custom-option').forEach(option => {
-                    option.addEventListener('click', function() {
-                        selectedModel = this.dataset.value;
-                        modelSelectDisplay.textContent = this.textContent;
-                        modelOptions.style.display = 'none';
-                    });
-                });
             }
 
-            function scrollToBottom() {
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-            }
+            // Apply markdown-like formatting
+            const formattedContent = content
+                .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
+                .replace(/(\d+)\.\s*/g, '<br>$1. ')
+                .replace(/\n/g, '<br>')
+                .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
 
-            function appendMessage(content, type = 'bot', isStreaming = false) {
-                if (type === 'bot' && isStreaming) {
-                    if (!currentStreamingMessage) {
-                        currentStreamingMessage = document.createElement('div');
-                        currentStreamingMessage.className = `message ${type}`;
-                        chatMessages.appendChild(currentStreamingMessage);
-
-                        // Add to conversation history only at the start of streaming
-                        if (!isStreamingInProgress) {
-                          conversationHistory.push({
-                role: 'assistant',
-                content: ''
-            });
-            isStreamingInProgress = true;
-        }
+            currentStreamingMessage.innerHTML += formattedContent;
 
-        // Apply markdown-like formatting
-        const formattedContent = content
-            .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
-            .replace(/(\d+)\.\s*/g, '<br>$1. ')
-            .replace(/\n/g, '<br>')
-            .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
+            // Update the last message in conversation history
+            if (conversationHistory.length > 0) {
+                conversationHistory[conversationHistory.length - 1].content += content;
+            }
 
-        currentStreamingMessage.innerHTML += formattedContent;
+            scrollToBottom();
+        } else {
+            if (type === 'bot' && currentStreamingMessage) {
+                isStreamingInProgress = false;
+                currentStreamingMessage = null;
+            } else {
+                const messageBox = document.createElement('div');
+                messageBox.className = `message ${type}`;
+
+                // Apply markdown-like formatting
+                const formattedContent = content
+                    .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
+                    .replace(/(\d+)\.\s*/g, '<br>$1. ')
+                    .replace(/\n/g, '<br>')
+                    .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
+
+                messageBox.innerHTML = formattedContent;
+                chatMessages.appendChild(messageBox);
+
+                // Add to conversation history only for new messages
+                if (type === 'user') {
+                    conversationHistory.push({
+                        role: 'user',
+                        content: content
+                    });
+                } else if (type === 'bot' && !isStreamingInProgress) {
+                    conversationHistory.push({
+                        role: 'assistant',
+                        content: content
+                    });
+                }
 
-        // Update the last message in conversation history
-        if (conversationHistory.length > 0) {
-            conversationHistory[conversationHistory.length - 1].content += content;
+                scrollToBottom();
+            }
         }
+    }
 
-        scrollToBottom();
-    } else {
-        if (currentStreamingMessage) {
-            isStreamingInProgress = false;
-            currentStreamingMessage = null;
-        }
-
-        const messageBox = document.createElement('div');
-        messageBox.className = `message ${type}`;
-
-        // Apply markdown-like formatting
-        const formattedContent = content
-            .replace(/```([\s\S]*?)```/g, (match, code) => `<pre><code>${code}</code></pre>`)
-            .replace(/(\d+)\.\s*/g, '<br>$1. ')
-            .replace(/\n/g, '<br>')
-            .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
-
-        messageBox.innerHTML = formattedContent;
-        chatMessages.appendChild(messageBox);
-
-        // Add to conversation history only for new messages
-        if (type === 'user') {
-            conversationHistory.push({
-                role: 'user',
-                content: content
-            });
-        } else if (type === 'bot' && !isStreamingInProgress) {
-            conversationHistory.push({
-                role: 'assistant',
-                content: content
-            });
-        }
+    function clearChat() {
+        chatMessages.innerHTML = '';
+        conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
+        initialInput.style.display = 'flex';
+        chatContainer.style.display = 'none';
+    }
 
+    async function sendInitialMessage() {
+        const userMessage = initialChatInput.value.trim();
+        if (!userMessage || !selectedModel) return;
+        
+        initialInput.style.display = 'none';
+        chatContainer.style.display = 'flex';
+        
+        appendMessage(userMessage, 'user');
+        initialChatInput.value = '';
         scrollToBottom();
+        
+        // Show the loader, hide the send icon
+        sendLoader.style.display = 'block';
+        sendButtonIcon.querySelector('svg').style.display = 'none';
+        
+        try {
+            await callApi(userMessage, selectedModel);
+        } catch (error) {
+            appendMessage("Oops! Something went wrong. Please try again.", 'bot');
+            console.error("API Error:", error);
+        } finally {
+            // Hide loader, show send icon
+            sendLoader.style.display = 'none';
+            sendButtonIcon.querySelector('svg').style.display = 'block';
+        }
     }
-}
-
-function clearChat() {
-    chatMessages.innerHTML = '';
-    conversationHistory = [{ role: "system", content: "You are a helpful AI assistant. Assist the user effectively." }];
-    initialInput.style.display = 'flex';
-    chatContainer.style.display = 'none';
-}
-
-async function sendInitialMessage() {
-    const userMessage = initialChatInput.value.trim();
-    if (!userMessage || !selectedModel) return;
-    
-    initialInput.style.display = 'none';
-    chatContainer.style.display = 'flex';
-    
-    appendMessage(userMessage, 'user');
-    initialChatInput.value = '';
-    scrollToBottom();
-    
-    // Show the loader, hide the send icon
-    sendLoader.style.display = 'block';
-    sendButtonIcon.querySelector('svg').style.display = 'none';
-    
-    try {
-        await callApi(userMessage, selectedModel);
-    } catch (error) {
-        appendMessage("Oops! Something went wrong. Please try again.", 'bot');
-        console.error("API Error:", error);
-    } finally {
-        // Hide loader, show send icon
-        sendLoader.style.display = 'none';
-        sendButtonIcon.querySelector('svg').style.display = 'block';
-    }
-}
 
-async function sendMessage() {
-    const userMessage = chatInput.value.trim();
-    if (!userMessage || !selectedModel) return;
-    
-    appendMessage(userMessage, 'user');
-    chatInput.value = '';
-    
-    // Show the loader, hide the send icon
-    sendLoader.style.display = 'block';
-    sendButtonIcon.querySelector('svg').style.display = 'none';
-    
-    try {
-        await callApi(userMessage, selectedModel);
-    } catch (error) {
-        appendMessage("Oops! Something went wrong. Please try again.", 'bot');
-        console.error("API Error:", error);
-    } finally {
-        // Hide loader, show send icon
-        sendLoader.style.display = 'none';
-        sendButtonIcon.querySelector('svg').style.display = 'block';
+    async function sendMessage() {
+        const userMessage = chatInput.value.trim();
+        if (!userMessage || !selectedModel) return;
+        
+        appendMessage(userMessage, 'user');
+        chatInput.value = '';
+        
+        // Show the loader, hide the send icon
+        sendLoader.style.display = 'block';
+        sendButtonIcon.querySelector('svg').style.display = 'none';
+        
+        try {
+            await callApi(userMessage, selectedModel);
+        } catch (error) {
+            appendMessage("Oops! Something went wrong. Please try again.", 'bot');
+            console.error("API Error:", error);
+        } finally {
+            // Hide loader, show send icon
+            sendLoader.style.display = 'none';
+            sendButtonIcon.querySelector('svg').style.display = 'block';
+        }
     }
-}
 
-async function callApi(userMessage, model) {
-    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`;
+    async function callApi(userMessage, model) {
+        let typingIndicator = null;
+        
         try {
-            const response = await fetch(url, {
-                headers: {
-                    'Authorization': 'playground'
-                }
-            });
+            // Add typing indicator before any API call
+            typingIndicator = document.createElement('div');
+            typingIndicator.className = 'message bot typing-indicator';
+            typingIndicator.innerHTML = '<span></span><span></span><span></span>';
+            chatMessages.appendChild(typingIndicator);
+            scrollToBottom();
             
-            if (response.ok) {
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder("utf-8");
-                let done = false;
+            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`;
                 
-                // Add typing indicator
-                const typingIndicator = document.createElement('div');
-                typingIndicator.className = 'message bot typing-indicator';
-                typingIndicator.innerHTML = '<span></span><span></span><span></span>';
-                chatMessages.appendChild(typingIndicator);
-                scrollToBottom();
+                const response = await fetch(url, {
+                    headers: {
+                        'Authorization': 'playground'
+                    }
+                });
                 
-                while (!done) {
-                    const { value, done: streamDone } = await reader.read();
-                    done = streamDone;
+                if (response.ok) {
+                    // Remove typing indicator
+                    if (typingIndicator) {
+                        typingIndicator.remove();
+                        typingIndicator = null;
+                    }
                     
-                    if (value) {
-                        // Remove typing indicator when data starts coming
-                        if (typingIndicator) {
-                            typingIndicator.remove();
-                        }
-                        
-                        const chunk = decoder.decode(value);
-                        const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
-                        const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
+                    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;
                         
-                        for (const jsonString of jsonChunks) {
-                            try {
-                                const jsonData = JSON.parse(jsonString);
-                                const content = jsonData.choices?.[0]?.message?.content || "";
-                                if (content) {
-                                    appendMessage(content, 'bot', true);
+                        if (value) {
+                            const chunk = decoder.decode(value);
+                            const cleanedChunk = chunk.trim();
+                            
+                            // Handle different API response formats
+                            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) {
+                                            appendMessage(content, 'bot', true);
+                                        }
+                                    } catch (err) {
+                                        console.warn("Parsing error:", err, "for chunk:", jsonString);
+                                    }
                                 }
-                            } catch (err) {
-                                console.warn("Parsing error:", err);
+                            } else {
+                                // Handle plain text response
+                                appendMessage(cleanedChunk, 'bot', true);
                             }
                         }
                     }
+                } else {
+                    throw new Error(`API responded with status ${response.status}`);
                 }
             } else {
-                throw new Error(`API responded with status ${response.status}`);
-            }
-        } catch (error) {
-            console.error("API call error:", error);
-            throw error;
-        }
-    } else {
-        const url = "https://parthsadaria-lokiai.hf.space/chat/completions";
-        const payload = {
-            model: model,
-            messages: [...conversationHistory],
-            stream: true
-        };
-        
-        const headers = {
-            "Content-Type": "application/json",
-            "Authorization": "playground"
-        };
-        
-        try {
-            const response = await fetch(url, {
-                method: "POST",
-                headers: headers,
-                body: JSON.stringify(payload)
-            });
-            
-            if (response.ok) {
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder("utf-8");
-                let done = false;
+                const url = "https://parthsadaria-lokiai.hf.space/chat/completions";
+                const payload = {
+                    model: model,
+                    messages: [...conversationHistory],
+                    stream: true
+                };
                 
-                // Add typing indicator
-                const typingIndicator = document.createElement('div');
-                typingIndicator.className = 'message bot typing-indicator';
-                typingIndicator.innerHTML = '<span></span><span></span><span></span>';
-                chatMessages.appendChild(typingIndicator);
-                scrollToBottom();
+                const headers = {
+                    "Content-Type": "application/json",
+                    "Authorization": "playground"
+                };
+                
+                const response = await fetch(url, {
+                    method: "POST",
+                    headers: headers,
+                    body: JSON.stringify(payload)
+                });
                 
-                while (!done) {
-                    const { value, done: streamDone } = await reader.read();
-                    done = streamDone;
+                if (response.ok) {
+                    // Remove typing indicator
+                    if (typingIndicator) {
+                        typingIndicator.remove();
+                        typingIndicator = null;
+                    }
                     
-                    if (value) {
-                        // Remove typing indicator when data starts coming
-                        if (typingIndicator) {
-                            typingIndicator.remove();
-                        }
-                        
-                        const chunk = decoder.decode(value);
-                        const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
-                        const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
+                    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;
                         
-                        for (const jsonString of jsonChunks) {
-                            try {
-                                const jsonData = JSON.parse(jsonString);
-                                const delta = jsonData.choices?.[0]?.delta || {};
-                                const content = delta.content || "";
+                        if (value) {
+                            const chunk = decoder.decode(value);
+                            buffer += chunk;
+                            
+                            // Process complete data chunks
+                            const lines = buffer.split('\n');
+                            buffer = lines.pop() || "";  // Keep the last incomplete line in buffer
+                            
+                            for (const line of lines) {
+                                if (line.trim() === '') continue;
+                                
+                                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) {
+                                        appendMessage(content, 'bot', true);
+                                    }
+                                } catch (err) {
+                                    console.warn("Parsing error:", err, "for line:", cleanedLine);
+                                }
+                            }
+                        }
+                    }
+                    
+                    // Handle any remaining data in buffer
+                    if (buffer.trim() !== '') {
+                        try {
+                            const cleanedBuffer = buffer.replace(/^data:\s*/, '').trim();
+                            if (cleanedBuffer !== '[DONE]') {
+                                const jsonData = JSON.parse(cleanedBuffer);
+                                const content = jsonData.choices?.[0]?.delta?.content || "";
                                 
                                 if (content) {
                                     appendMessage(content, 'bot', true);
                                 }
-                            } catch (err) {
-                                console.warn("Parsing error:", err);
                             }
+                        } catch (err) {
+                            console.warn("Parsing error for remaining buffer:", 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);
+            // Remove typing indicator if still present
+            if (typingIndicator) {
+                typingIndicator.remove();
+            }
             throw error;
         }
     }
-}
-
-// Toggle theme
-function toggleTheme() {
-    isDarkMode = !isDarkMode;
-    document.body.classList.toggle('light-mode');
-    
-    // Update icon based on current theme
-    if (isDarkMode) {
-        themeToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-        </svg>`;
-    } else {
-        themeToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="12" cy="12" r="5"></circle>
-            <line x1="12" y1="1" x2="12" y2="3"></line>
-            <line x1="12" y1="21" x2="12" y2="23"></line>
-            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
-            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
-            <line x1="1" y1="12" x2="3" y2="12"></line>
-            <line x1="21" y1="12" x2="23" y2="12"></line>
-            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
-            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-        </svg>`;
-    }
-}
-
-// Event Listeners
-initialSendIcon.addEventListener('click', sendInitialMessage);
-initialChatInput.addEventListener('keypress', (event) => {
-    if (event.key === 'Enter') sendInitialMessage();
-});
-
-sendButtonIcon.addEventListener('click', sendMessage);
-chatInput.addEventListener('keypress', (event) => {
-    if (event.key === 'Enter') sendMessage();
-});
-
-// Clear Chat Button Event Listener
-clearChatButton.addEventListener('click', clearChat);
-
-// Model selector dropdown event listeners
-modelSelectDisplay.addEventListener('click', function() {
-    if (modelOptions.style.display === 'block') {
-        modelOptions.style.display = 'none';
-    } else {
-        modelOptions.style.display = 'block';
-    }
-});
 
-// Close dropdown when clicking outside
-document.addEventListener('click', function(event) {
-    if (!event.target.closest('.custom-select-wrapper') && modelOptions.style.display === 'block') {
-        modelOptions.style.display = 'none';
+    // Toggle theme
+    function toggleTheme() {
+        isDarkMode = !isDarkMode;
+        document.body.classList.toggle('light-mode');
+        
+        // Update icon based on current theme
+        if (isDarkMode) {
+            themeToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>`;
+        } else {
+            themeToggle.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+            </svg>`;
+        }
     }
-});
-
-// Theme toggle event listener
-themeToggle.addEventListener('click', toggleTheme);
-
-// Initialize the app
-fetchModels();
 
-// Add an animation to the chat wrapper
-anime({
-    targets: '.chat-wrapper',
-    translateY: [50, 0],
-    opacity: [0, 1],
-    easing: 'easeOutExpo',
-    duration: 1000
-});
-
-// Detect escape key to close model selector
-document.addEventListener('keydown', function(event) {
-    if (event.key === 'Escape' && modelOptions.style.display === 'block') {
-        modelOptions.style.display = 'none';
+    // Event Listeners
+    initialSendIcon.addEventListener('click', sendInitialMessage);
+    initialChatInput.addEventListener('keypress', (event) => {
+        if (event.key === 'Enter') sendInitialMessage();
+    });
+
+    sendButtonIcon.addEventListener('click', sendMessage);
+    chatInput.addEventListener('keypress', (event) => {
+        if (event.key === 'Enter') sendMessage();
+    });
+
+    // Clear Chat Button Event Listener
+    clearChatButton.addEventListener('click', clearChat);
+
+    // Model selector dropdown event listeners
+    modelSelectDisplay.addEventListener('click', function() {
+        if (modelOptions.style.display === 'block') {
+            modelOptions.style.display = 'none';
+        } else {
+            modelOptions.style.display = 'block';
+        }
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', function(event) {
+        if (!event.target.closest('.custom-select-wrapper') && modelOptions.style.display === 'block') {
+            modelOptions.style.display = 'none';
+        }
+    });
+
+    // Theme toggle event listener
+    themeToggle.addEventListener('click', toggleTheme);
+
+    // Initialize the app
+    fetchModels();
+
+    // Add an animation to the chat wrapper
+    if (typeof anime !== 'undefined') {
+        anime({
+            targets: '.chat-wrapper',
+            translateY: [50, 0],
+            opacity: [0, 1],
+            easing: 'easeOutExpo',
+            duration: 1000
+        });
     }
-});
 
+    // Detect escape key to close model selector
+    document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape' && modelOptions.style.display === 'block') {
+            modelOptions.style.display = 'none';
+        }
+    });
 });
 </script>
 </body>