Update playground.html

playground.html

@@ -6,16 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Loki.AI Playground</title>
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link
-        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap"
-        rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Encode+Sans:[email protected]&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Protest+Revolution&display=swap');
-
         :root {
             --bg-dark: #0a0a0f;
             --bg-darker: #040409;
@@ -60,7 +54,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            min-height: 100vh;
             overflow: hidden;
             perspective: 2000px;
         }
@@ -139,7 +133,6 @@
             width: 100%;
             padding: 12px 16px;
             padding-right: 50px;
-            /* Space for send icon */
             background-color: rgba(30, 30, 50, 0.8);
             border: 1px solid var(--border-color);
             border-radius: 12px;
@@ -285,7 +278,7 @@
             font-size: 14px;
             cursor: pointer;
             transition: all 0.3s ease;
-            max-width: 150px;
+            max-width: 240px;
             overflow-y: auto;
             -webkit-appearance: none;
             -moz-appearance: none;
@@ -341,176 +334,219 @@
             opacity: 0.8;
         }
 
-        @media screen and (max-width: 768px) {
-            .chat-header {
-                padding: 8px 12px;
-                height: auto;
-                min-height: 50px;
-            }
-
-            .header-actions {
-                gap: 8px;
-            }
-
-            .model-select {
-                font-size: 12px;
-                padding: 6px 24px 6px 8px;
-                max-width: 120px;
-            }
-
-            .clear-chat {
-                width: 32px;
-                height: 32px;
-                padding: 6px;
-            }
-
-            .clear-chat svg {
-                width: 16px;
-                height: 16px;
-            }
-
-            .chat-input {
-                padding: 8px;
-                height: auto;
-                min-height: 60px;
-            }
+        /* Loading spinner */
+        .loader {
+            display: none;
+            width: 24px;
+            height: 24px;
+            border: 3px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--primary-blue);
+            animation: spin 1s ease-in-out infinite;
+        }
 
-            .chat-input input {
-                padding: 10px 12px;
-                font-size: 14px;
-                height: 40px;
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
             }
         }
 
-        @media screen and (max-width: 480px) {
-            .chat-header h2 {
-                font-size: 14px;
-            }
+        .github-link {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            z-index: 999;
+            border-radius: 8px;
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            transition: all 0.3s ease;
+            color: var(--text-light);
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            margin: 10px;
+        }
 
-            .message {
-                font-size: 12px;
-            }
+        .github-link:hover {
+            background-color: var(--hover-color);
+            transform: translateY(-2px);
+        }
 
-            .header-actions {
-                flex-direction: row;
-                gap: 6px;
-            }
+        .github-link svg {
+            width: 22px;
+            height: 22px;
+        }
 
-            .model-select {
-                max-width: 100px;
-                font-size: 11px;
-            }
+        /* Enhanced select dropdown */
+        .custom-select-wrapper {
+            position: relative;
+            min-width: 180px;
+        }
 
-            .clear-chat {
-                width: 28px;
-                height: 28px;
-                padding: 5px;
-            }
+        .custom-select {
+            position: relative;
+            background-color: rgba(20, 20, 40, 0.9);
+            color: var(--text-light);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 8px 35px 8px 12px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            max-width: 240px;
+        }
 
-            .clear-chat svg {
-                width: 14px;
-                height: 14px;
-            }
+        .custom-select:after {
+            content: '';
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 0;
+            height: 0;
+            border-left: 5px solid transparent;
+            border-right: 5px solid transparent;
+            border-top: 5px solid var(--text-light);
+        }
 
-            .chat-input input {
-                font-size: 13px;
-                height: 36px;
-            }
+        .custom-select-options {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background-color: rgba(15, 15, 30, 0.95);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            margin-top: 4px;
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 1000;
+            display: none;
+            backdrop-filter: blur(10px);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
 
-            .initial-input input {
-                font-size: 15px;
-            }
+        .custom-option {
+            padding: 8px 12px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
 
-            .initial-input h2 {
-                font-size: 20px;
-            }
+        .custom-option:hover {
+            background-color: rgba(74, 108, 247, 0.2);
         }
 
-        /* Additional responsive adjustments to existing CSS */
-        * {
-            -webkit-tap-highlight-color: transparent;
+        .model-group {
+            padding: 5px 10px;
+            font-size: 10px;
+            color: var(--text-muted);
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            margin-top: 5px;
         }
 
-        body {
-            touch-action: manipulation;
+        /* Dark mode toggle */
+        .theme-toggle {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            color: var(--text-light);
         }
 
-        input,
-        button {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
+        .theme-toggle:hover {
+            background-color: var(--hover-color);
         }
 
-        @media (hover: hover) {
-            .send-icon:hover {
-                background-color: var(--accent-color);
-                transform: translateY(-50%) scale(1.05);
-                border-radius: 15px;
+        /* Mobile optimizations */
+        @media screen and (max-width: 768px) {
+            .chat-wrapper {
+                height: 100vh;
+                border-radius: 0;
             }
-        }
 
-        @media (pointer: coarse) {
-            .send-icon {
-                width: 45px;
-                height: 45px;
+            .custom-select {
+                font-size: 12px;
+                max-width: 140px;
             }
 
-            .chat-input input {
-                font-size: 16px;
-                /* Larger font for touch devices */
+            .chat-input {
+                padding: 10px;
             }
         }
 
-        .model-select::-webkit-scrollbar {
-            width: 4px;
+        /* Markdown styling */
+        .bot pre {
+            background-color: rgba(15, 15, 30, 0.6);
+            padding: 10px;
+            border-radius: 6px;
+            overflow-x: auto;
+            margin: 10px 0;
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
 
-        .model-select::-webkit-scrollbar-track {
-            background: var(--bg-dark);
+        .bot code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
         }
 
-        .model-select::-webkit-scrollbar-thumb {
-            background-color: var(--primary-blue);
-            border-radius: 4px;
+        .bot p {
+            margin-bottom: 8px;
         }
 
-        .chat-input input:focus,
-        .initial-input input:focus,
-        .model-select:focus,
-        .clear-chat:focus,
-        .send-icon:focus {
-            outline: 2px solid var(--primary-blue);
-            outline-offset: 2px;
+        .bot ul, .bot ol {
+            margin-left: 20px;
+            margin-bottom: 8px;
+        }
+        
+        /* Typing indicator */
+        .typing-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            padding: 5px 10px;
+        }
+        
+        .typing-indicator span {
+            width: 6px;
+            height: 6px;
+            background-color: var(--text-muted);
+            border-radius: 50%;
+            display: inline-block;
+            animation: pulse 1.5s infinite ease-in-out;
+        }
+        
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        
+        @keyframes pulse {
+            0%, 100% {
+                transform: scale(0.8);
+                opacity: 0.5;
+            }
+            50% {
+                transform: scale(1.2);
+                opacity: 1;
+            }
         }
-        .github-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    z-index: 999;
-    border-radius: 8px;
-    background-color: transparent;
-    border: 1px solid var(--border-color);
-    transition: all 0.3s ease;
-    color: var(--text-light);
-    position: absolute; /* Allows placement in the corner */
-    bottom: 0; /* Aligns to the top */
-    left: 0; /* Aligns to the left */
-    margin: 10px; /* Adds spacing from the edges */
-}
-
-.github-link:hover {
-    background-color: var(--hover-color);
-    transform: translateY(-2px);
-}
-
-.github-link svg {
-    width: 22px;
-    height: 22px;
-}
-
     </style>
 </head>
 
@@ -524,25 +560,13 @@
         <div class="chat-header">
             <h2 style="font-family: 'JetBrains Mono', monospace;">LOKI.AI Playground</h2>
             <div class="header-actions">
-                <select id="modelSelect" class="model-select">
-                    <option value="gpt-4o-mini">GPT-4o Mini</option>
-                    <option value="o1-preview">O1-preview</option>
-                    <option value="gpt-4o">GPT-4o</option>
-                    <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
-                    <option value="searchgpt">SearchGPT(Web-access)</option>
-                    <option value="claude-sonnet-3.5">Claude 3.5 Sonnet</option> 
-                    <option value="claude-3-5-sonnet">Claude 3.5 Sonnet (2)</option> 
-                    <option value="claude-3-haiku">Claude 3 Haiku</option>
-                    <option value="llama-3.1-8b">Llama 3.1 8B</option>
-                    <option value="llama-3.1-70b">Llama 3.1 70B</option>
-                    <option value="llama-3.1-405b">Llama 3.1 405b</option>
-                    <option value="nvidia/Llama-3.1-Nemotron-70B-Instruct">LLama 3.1 Nemotron 70B</option>
-                    <option value="gemini-1.5-flash">Gemini 1.5 Flash</option>
-                    <option value="gemini-pro">Gemini Pro</option>
-                    <option value="mistral">Mistral(Uncensored)</option>
-                    <option value="mistral-large">Mistral-large(Uncensored)</option>
-                    <option value="mixtral-8x7b">Mixtral 8x7b</option>
-                </select>
+                <div class="custom-select-wrapper">
+                    <div class="custom-select" id="modelSelectDisplay">Select Model</div>
+                    <div class="custom-select-options" id="modelOptions">
+                        <!-- Models will be loaded here -->
+                        <div class="loader" id="modelLoader" style="margin: 10px auto;"></div>
+                    </div>
+                </div>
                 <button id="clearChatButton" class="clear-chat">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -552,6 +576,11 @@
                         <line x1="14" y1="11" x2="14" y2="17"></line>
                     </svg>
                 </button>
+                <button id="themeToggle" class="theme-toggle">
+                    <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>
+                </button>
             </div>
         </div>
 
@@ -572,244 +601,508 @@
         <div class="chat-container" id="chatContainer">
             <div class="chat-messages" id="chatMessages"></div>
             <div class="chat-input">
-                <input type="text" id="chatInput" placeholder="Type your message...">
-                <button id="sendButton"
-                    style="padding: 10px 10px; background-color: black;color: #e0e0e8; font-family: 'JetBrains Mono'; border: solid #1a1a2e 2px; border-radius: 15px;">Send</button>
+                <div class="chat-input-container">
+                    <input type="text" id="chatInput" placeholder="Type your message...">
+                    <div class="send-icon" id="sendButtonIcon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="22" y1="2" x2="11" y2="13"></line>
+                            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                        </svg>
+                        <div class="loader" id="sendLoader"></div>
+                    </div>
+                </div>
             </div>
-	<p style="display: block; text-align: center; color: grey; font-size: 9px; z-index: 99; padding-bottom:5px;">
-	Models can make mistakes. Check important info.
-	</p>
+            <p style="display: block; text-align: center; color: grey; font-size: 9px; z-index: 99; padding-bottom:5px;">
+                Models can make mistakes. Check important info.
+            </p>
         </div>
     </div>
     <div class="watermark">
         Made with ❤️ by Parth Sadaria
     </div>
     <script>
-        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 sendButton = document.getElementById('sendButton');
-        const modelSelect = document.getElementById('modelSelect');
-        const clearChatButton = document.getElementById('clearChatButton');
-        let currentStreamingMessage = null;
-        let isStreamingInProgress = false;
-        let conversationHistory = [{ role: "system", content: "You are a AI assistant. Assist the user effectively." }]; //doesnt work idk
-        function scrollToBottom() {
+        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');
-            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: ''
-                        });
-                        isStreamingInProgress = true;
+            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'
+                        }
+                    });
+                    
+                    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';
                 }
+            }
 
-                const formattedContent = content
-                    .replace(/(\d+)\.\s*/g, '<br>$1. ')
-                    .replace(/\n/g, '<br>')
-                    .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
-
-                currentStreamingMessage.innerHTML += formattedContent;
-
-                // Update the last message in conversation history
-                if (conversationHistory.length > 0) {
-                    conversationHistory[conversationHistory.length - 1].content += content;
+            // 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';
+                    });
+                });
+            }
 
+            function scrollToBottom() {
                 chatMessages.scrollTop = chatMessages.scrollHeight;
-            } else {
-                if (currentStreamingMessage) {
-                    isStreamingInProgress = false;
-                    currentStreamingMessage = null;
-                }
+            }
 
-                const messageBox = document.createElement('div');
-                messageBox.className = `message ${type}`;
+            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;
+        }
 
-                const formattedContent = content
-                    .replace(/(\d+)\.\s*/g, '<br>$1. ')
-                    .replace(/\n/g, '<br>')
-                    .replace(/\*\*(.*?)\*\*/g, (match, p1) => '<strong>' + p1 + '</strong>');
+        // 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);
+        currentStreamingMessage.innerHTML += formattedContent;
 
-                // Add to conversation history only for new messages
-                if (type === 'user') {
-                    conversationHistory.push({
-                        role: 'user',
-                        content: content
-                    });
-                }
-
-                chatMessages.scrollTop = chatMessages.scrollHeight;
-            }
+        // Update the last message in conversation history
+        if (conversationHistory.length > 0) {
+            conversationHistory[conversationHistory.length - 1].content += content;
         }
-        function clearChat() {
-            chatMessages.innerHTML = '';
-            conversationHistory = [];
-            initialInput.style.display = 'flex';
-            chatContainer.style.display = 'none';
-            chatWrapper.classList.remove('active');
-        }
-        async function sendInitialMessage() {
-            const userMessage = initialChatInput.value.trim();
-            const selectedModel = modelSelect.value;
-            if (!userMessage) return;
-            initialInput.style.display = 'none';
-            chatContainer.style.display = 'flex';
-            chatWrapper.classList.add('active');
-            appendMessage(userMessage, 'user');
-            initialChatInput.value = '';
-            scrollToBottom();
-            try {
-                await callApi(userMessage, selectedModel);
-            } catch (error) {
-                appendMessage("Oops! Something went wrong.", 'bot');
-                console.error("API Error:", error);
-            }
+
+        scrollToBottom();
+    } else {
+        if (currentStreamingMessage) {
+            isStreamingInProgress = false;
+            currentStreamingMessage = null;
         }
-        async function sendMessage() {
-            const userMessage = chatInput.value.trim();
-            const selectedModel = modelSelect.value;
-            if (!userMessage) return;
-            appendMessage(userMessage, 'user');
-            chatInput.value = '';
-            try {
-                await callApi(userMessage, selectedModel);
-            } catch (error) {
-                appendMessage("Oops! Something went wrong.", 'bot');
-                console.error("API Error:", error);
-            }
+
+        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
+            });
         }
-        async function callApi(userMessage, model) {
-            let fullResponse = "";
-            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`;
-                try {
-                    const response = await fetch(url);
-                    if (response.ok) {
-                        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;
-                            if (value) {
-                                const chunk = decoder.decode(value);
-                                const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
-                                const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
-                                jsonChunks.forEach(jsonString => {
-                                    try {
-                                        const jsonData = JSON.parse(jsonString);
-                                        const content = jsonData.choices?.[0]?.message?.content || "";
-                                        if (content) {
-                                            // Comprehensive newline conversion
-                                            const formattedContent = content
-                                                .replace(/\r\n/g, '<br>')   // Windows-style newlines
-                                                .replace(/\n/g, '<br>')     // Unix/Linux-style newlines
-                                                .replace(/\r/g, '<br>');    // Old Mac-style newlines
-                                            appendMessage(formattedContent, 'bot', true);
-                                        }
-                                    } catch (err) {
-                                        console.warn("Parsing error:", err);
-                                    }
-                                });
+
+        scrollToBottom();
+    }
+}
+
+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 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`;
+        try {
+            const response = await fetch(url, {
+                headers: {
+                    'Authorization': 'playground'
+                }
+            });
+            
+            if (response.ok) {
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder("utf-8");
+                let done = false;
+                
+                // 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();
+                
+                while (!done) {
+                    const { value, done: streamDone } = await reader.read();
+                    done = streamDone;
+                    
+                    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);
+                        
+                        for (const jsonString of jsonChunks) {
+                            try {
+                                const jsonData = JSON.parse(jsonString);
+                                const content = jsonData.choices?.[0]?.message?.content || "";
+                                if (content) {
+                                    appendMessage(content, 'bot', true);
+                                }
+                            } catch (err) {
+                                console.warn("Parsing error:", err);
                             }
                         }
-                    } 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"
-                };
-                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;
-                        while (!done) {
-                            const { value, done: streamDone } = await reader.read();
-                            done = streamDone;
-                            if (value) {
-                                const chunk = decoder.decode(value);
-                                const cleanedChunk = chunk.trim().replace(/^data:\s*/, '');
-                                const jsonChunks = cleanedChunk.split("data:").filter(Boolean);
-                                jsonChunks.forEach(jsonString => {
-                                    try {
-                                        const jsonData = JSON.parse(jsonString);
-                                        const delta = jsonData.choices?.[0]?.delta || {};
-                                        let content = delta.content || "";
-
-                                        // Comprehensive newline conversion
-                                        content = content
-                                            .replace(/\r\n/g, '<br>')   // Windows-style newlines
-                                            .replace(/\n/g, '<br>')     // Unix/Linux-style newlines
-                                            .replace(/\r/g, '<br>');    // Old Mac-style newlines
-                                        if (content) {
-                                            appendMessage(content, 'bot', true);
-                                        }
-                                    } catch (err) {
-                                        console.warn("Parsing error:", err);
-                                    }
-                                });
+                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;
+                
+                // 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();
+                
+                while (!done) {
+                    const { value, done: streamDone } = await reader.read();
+                    done = streamDone;
+                    
+                    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);
+                        
+                        for (const jsonString of jsonChunks) {
+                            try {
+                                const jsonData = JSON.parse(jsonString);
+                                const delta = jsonData.choices?.[0]?.delta || {};
+                                const content = delta.content || "";
+                                
+                                if (content) {
+                                    appendMessage(content, 'bot', true);
+                                }
+                            } catch (err) {
+                                console.warn("Parsing error:", err);
                             }
                         }
-                    } else {
-                        throw new Error(`API responded with status ${response.status}`);
                     }
-                } catch (error) {
-                    console.error("API call error:", error);
-                    throw error;
                 }
+            } else {
+                throw new Error(`API responded with status ${response.status}`);
             }
-            return fullResponse.trim();
-        }
-        // Event Listeners
-        initialSendIcon.addEventListener('click', sendInitialMessage);
-        initialChatInput.addEventListener('keypress', (event) => {
-            if (event.key === 'Enter') sendInitialMessage();
-        });
-        sendButton.addEventListener('click', sendMessage);
-        chatInput.addEventListener('keypress', (event) => {
-            if (event.key === 'Enter') sendMessage();
-        });
-        // Clear Chat Button Event Listener
-        clearChatButton.addEventListener('click', clearChat);
-    </script>
+        } catch (error) {
+            console.error("API call error:", error);
+            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';
+    }
+});
+
+// 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';
+    }
+});
+
+});
+</script>
 </body>
-<!-- hehe go to networks tab to find cool stuff :) -->
 </html>