Update playground.html

playground.html

@@ -38,15 +38,26 @@
                             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 },
                         }
                     }
                 }
@@ -73,14 +84,97 @@
             background: #64748B;
         }
         
-        /* Markdown styles */
-        .markdown-content h1 {
+        /* Custom scrollbar for light theme */
+        ::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        
+        ::-webkit-scrollbar-track {
+            background: #E2E8F0;
+        }
+        
+        ::-webkit-scrollbar-thumb {
+            background: #94A3B8;
+            border-radius: 4px;
+        }
+        
+        ::-webkit-scrollbar-thumb:hover {
+            background: #64748B;
+        }
+        
+        /* Markdown styles - Dark */
+        .dark .markdown-content h1 {
             font-size: 1.8rem;
             font-weight: 700;
             margin-top: 1.5rem;
             margin-bottom: 1rem;
             border-bottom: 1px solid #334155;
             padding-bottom: 0.5rem;
+            color: #F1F5F9;
+        }
+        
+        .dark .markdown-content h2 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-top: 1.2rem;
+            margin-bottom: 0.8rem;
+            color: #F1F5F9;
+        }
+        
+        .dark .markdown-content h3 {
+            font-size: 1.3rem;
+            font-weight: 600;
+            margin-top: 1rem;
+            margin-bottom: 0.7rem;
+            color: #F1F5F9;
+        }
+        
+        .dark .markdown-content p {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+            color: #E2E8F0;
+        }
+        
+        .dark .markdown-content ul, .dark .markdown-content ol {
+            margin-top: 0.5rem;
+            margin-bottom: 1rem;
+            padding-left: 1.5rem;
+            color: #E2E8F0;
+        }
+        
+        .dark .markdown-content ul {
+            list-style-type: disc;
+        }
+        
+        .dark .markdown-content ol {
+            list-style-type: decimal;
+        }
+        
+        .dark .markdown-content li {
+            margin-bottom: 0.5rem;
+        }
+        
+        .dark .markdown-content blockquote {
+            border-left: 4px solid #6EE7B7;
+            padding-left: 1rem;
+            margin: 1rem 0;
+            font-style: italic;
+            background-color: rgba(30, 41, 59, 0.5);
+            padding: 0.5rem 1rem;
+            border-radius: 0 4px 4px 0;
+            color: #CBD5E1;
+        }
+        
+        /* Markdown styles - Light */
+        .markdown-content h1 {
+            font-size: 1.8rem;
+            font-weight: 700;
+            margin-top: 1.5rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid #E2E8F0;
+            padding-bottom: 0.5rem;
+            color: #0F172A;
         }
         
         .markdown-content h2 {
@@ -88,6 +182,7 @@
             font-weight: 600;
             margin-top: 1.2rem;
             margin-bottom: 0.8rem;
+            color: #0F172A;
         }
         
         .markdown-content h3 {
@@ -95,17 +190,20 @@
             font-weight: 600;
             margin-top: 1rem;
             margin-bottom: 0.7rem;
+            color: #0F172A;
         }
         
         .markdown-content p {
             margin-bottom: 1rem;
             line-height: 1.6;
+            color: #334155;
         }
         
         .markdown-content ul, .markdown-content ol {
             margin-top: 0.5rem;
             margin-bottom: 1rem;
             padding-left: 1.5rem;
+            color: #334155;
         }
         
         .markdown-content ul {
@@ -121,14 +219,14 @@
         }
         
         .markdown-content blockquote {
-            border-left: 4px solid #6EE7B7;
+            border-left: 4px solid #10B981;
             padding-left: 1rem;
-            margin-left: 0;
-            margin-right: 0;
+            margin: 1rem 0;
             font-style: italic;
-            background-color: rgba(30, 41, 59, 0.5);
+            background-color: rgba(241, 245, 249, 0.5);
             padding: 0.5rem 1rem;
             border-radius: 0 4px 4px 0;
+            color: #475569;
         }
         
         .markdown-content img {
@@ -144,22 +242,37 @@
             margin: 1rem 0;
         }
         
+        .dark .markdown-content table th,
+        .dark .markdown-content table td {
+            padding: 0.5rem;
+            border: 1px solid #334155;
+        }
+        
+        .dark .markdown-content table th {
+            background-color: #1E293B;
+            font-weight: 600;
+        }
+        
+        .dark .markdown-content table tr:nth-child(even) {
+            background-color: rgba(30, 41, 59, 0.5);
+        }
+        
         .markdown-content table th,
         .markdown-content table td {
             padding: 0.5rem;
-            border: 1px solid #334155;
+            border: 1px solid #E2E8F0;
         }
         
         .markdown-content table th {
-            background-color: #1E293B;
+            background-color: #F1F5F9;
             font-weight: 600;
         }
         
         .markdown-content table tr:nth-child(even) {
-            background-color: rgba(30, 41, 59, 0.5);
+            background-color: rgba(241, 245, 249, 0.5);
         }
         
-        .markdown-content pre {
+        .dark .markdown-content pre {
             margin: 1rem 0;
             padding: 1rem;
             border-radius: 8px;
@@ -167,7 +280,15 @@
             overflow-x: auto;
         }
         
-        .markdown-content code {
+        .markdown-content pre {
+            margin: 1rem 0;
+            padding: 1rem;
+            border-radius: 8px;
+            background-color: #F1F5F9 !important;
+            overflow-x: auto;
+        }
+        
+        .dark .markdown-content code {
             font-family: 'JetBrains Mono', monospace;
             font-size: 0.9rem;
             background-color: #334155;
@@ -175,6 +296,20 @@
             border-radius: 4px;
         }
         
+        .markdown-content code {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            background-color: #E2E8F0;
+            padding: 0.2rem 0.4rem;
+            border-radius: 4px;
+        }
+        
+        .dark .markdown-content pre code {
+            background-color: transparent;
+            padding: 0;
+            border-radius: 0;
+        }
+        
         .markdown-content pre code {
             background-color: transparent;
             padding: 0;
@@ -190,22 +325,127 @@
         .message-bubble {
             border-radius: 1rem;
             max-width: 90%;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
         
-        .user-message {
+        .dark .message-bubble {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        }
+        
+        .dark .user-message {
             background-color: #334155;
             margin-left: auto;
             border-top-right-radius: 0.25rem;
         }
         
-        .assistant-message {
+        .user-message {
+            background-color: #E2E8F0;
+            margin-left: auto;
+            border-top-right-radius: 0.25rem;
+            color: #0F172A;
+        }
+        
+        .dark .assistant-message {
             background-color: #0F172A;
             border-top-left-radius: 0.25rem;
         }
+        
+        .assistant-message {
+            background-color: #FFFFFF;
+            border-top-left-radius: 0.25rem;
+            color: #334155;
+            border: 1px solid #E2E8F0;
+        }
+        
+        .copy-button {
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+        }
+        
+        .message-bubble:hover .copy-button {
+            opacity: 1;
+        }
+        
+        /* Toast notification */
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            background-color: #334155;
+            color: white;
+            z-index: 50;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+        
+        .toast.show {
+            opacity: 1;
+        }
+        
+        /* Dropdown transition */
+        .dropdown-transition {
+            transition: opacity 0.2s ease, transform 0.2s ease;
+        }
+        
+        /* Message timestamp */
+        .message-timestamp {
+            font-size: 0.7rem;
+            color: #64748B;
+            margin-top: 0.25rem;
+        }
+        
+        .message-transition-enter {
+            opacity: 0;
+            transform: translateY(10px);
+        }
+        
+        .message-transition-enter-active {
+            opacity: 1;
+            transform: translateY(0px);
+            transition: opacity 300ms, transform 300ms;
+        }
+        
+        /* Mobile responsiveness */
+        @media (max-width: 640px) {
+            .message-bubble {
+                max-width: 85%;
+            }
+            
+            .markdown-content pre {
+                max-width: 100%;
+                overflow-x: auto;
+            }
+        }
+        
+        /* Focus states for accessibility */
+        button:focus, input:focus {
+            outline: 2px solid #10B981;
+            outline-offset: 2px;
+        }
+        
+        /* Animation for message appearance */
+        @keyframes messageAppear {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .message-appear {
+            animation: messageAppear 0.3s ease-out forwards;
+        }
     </style>
 </head>
 
-<body class="dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300 font-sans">
+<body class="bg-light-DEFAULT dark:bg-dark dark:text-gray-200 min-h-screen transition-colors duration-300 font-sans">
     <!-- GitHub Link -->
     <a href="https://github.com/ParthSadaria" target="_blank" rel="noopener noreferrer" 
        class="fixed top-4 right-4 text-gray-500 hover:text-primary-light transition-colors duration-300 z-10" 
@@ -216,38 +456,48 @@
         </svg>
     </a>
 
+    <!-- Toast Notification -->
+    <div id="toast" class="toast">Message copied to clipboard!</div>
+
     <!-- Chat Container -->
     <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 opacity-0 transform translate-y-4" id="chatWrapper">
         <!-- Header with Logo -->
-        <div class="flex justify-between items-center mb-6 p-4 bg-dark-lighter rounded-xl shadow-lg border border-dark-input">
+        <div class="flex justify-between items-center mb-6 p-4 bg-light-darker dark:bg-dark-lighter rounded-xl shadow-lg border border-light-darker dark:border-dark-input">
             <div class="flex items-center">
                 <span class="text-xl font-mono font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">LOKI.AI</span>
-                <span class="ml-2 text-sm bg-dark-input px-2 py-0.5 rounded-full text-gray-300">Playground</span>
+                <span class="ml-2 text-sm bg-light-input dark:bg-dark-input px-2 py-0.5 rounded-full text-gray-600 dark:text-gray-300">Playground</span>
             </div>
             <div class="flex space-x-2">
                 <!-- Model Selector -->
                 <div class="relative" id="modelSelector">
-                    <button class="px-3 py-2 bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-700 transition-colors shadow-sm" id="modelSelectButton">
+                    <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-md text-sm flex items-center space-x-1 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm" id="modelSelectButton" aria-label="Select AI model">
                         <span id="modelSelectDisplay">Select Model</span>
                         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                         </svg>
                     </button>
-                    <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20" id="modelOptions">
-                        <div class="py-2 px-3 text-sm text-gray-400" id="modelLoader">Loading models...</div>
+                    <div class="absolute mt-1 w-56 rounded-md shadow-lg bg-light-card dark:bg-dark-card ring-1 ring-black ring-opacity-5 hidden max-h-64 overflow-y-auto z-20 dropdown-transition" id="modelOptions">
+                        <div class="py-2 px-3 text-sm text-gray-600 dark:text-gray-400" id="modelLoader">Loading models...</div>
                     </div>
                 </div>
                 
                 <!-- Clear Chat Button -->
-                <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-700 transition-colors bg-dark-input shadow-sm group">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="clearChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group" aria-label="Clear chat history">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                     </svg>
                 </button>
                 
+                <!-- Export Chat Button -->
+                <button id="exportChatButton" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group" aria-label="Export conversation">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                    </svg>
+                </button>
+                
                 <!-- Theme Toggle Button -->
-                <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-700 transition-colors bg-dark-input shadow-sm group">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <button id="themeToggle" class="p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors bg-light-input dark:bg-dark-input shadow-sm group" aria-label="Toggle theme">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500 group-hover:text-primary dark:text-gray-400 dark:group-hover:text-primary-light transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                     </svg>
                 </button>
@@ -259,28 +509,35 @@
             <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>
             <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-dark-input bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white shadow-lg transition-all"
+                       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"
                        placeholder="What can I help you with today?">
-                <button id="initialSendIcon" class="absolute right-4 top-4 text-gray-400 hover:text-primary-light transition-colors">
+                <button id="initialSendIcon" class="absolute right-4 top-4 text-gray-400 hover:text-primary transition-colors" aria-label="Send message">
                     <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>
                 </button>
             </div>
+            <!-- Model suggestions -->
+            <div class="flex flex-wrap justify-center gap-2 max-w-2xl">
+                <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Explain quantum computing</button>
+                <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Write a poem about AI</button>
+                <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Help debug my code</button>
+                <button class="px-3 py-2 bg-light-input dark:bg-dark-input rounded-full text-sm hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors shadow-sm text-gray-600 dark:text-gray-300 quick-prompt">Recommend a book</button>
+            </div>
         </div>
 
         <!-- Chat Area -->
-        <div class="hidden flex-col h-[70vh] bg-dark-lighter rounded-xl shadow-lg overflow-hidden border border-dark-input" id="chatContainer">
+        <div class="hidden flex-col h-[70vh] bg-light-card dark:bg-dark-lighter rounded-xl shadow-lg overflow-hidden border border-light-darker dark:border-dark-input" id="chatContainer">
             <!-- Messages Area -->
             <div class="flex-1 overflow-y-auto p-4 space-y-5" id="chatMessages"></div>
             
             <!-- Input Area -->
-            <div class="border-t border-dark-input p-4">
+            <div class="border-t border-light-darker dark:border-dark-input p-4 bg-light-card dark:bg-dark-lighter">
                 <div class="relative">
-                    <input type="text" id="chatInput" 
-                           class="w-full p-3 pr-12 rounded-xl border border-dark-input bg-dark-input focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white transition-all shadow-inner"
-                           placeholder="Type your message...">
-                    <button id="sendButton" class="absolute right-3 top-3 text-gray-400 hover:text-primary-light transition-colors">
+                    <textarea id="chatInput" 
+                           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">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                         </svg>
@@ -289,7 +546,10 @@
                         </div>
                     </button>
                 </div>
-                <p class="text-center text-gray-500 text-xs mt-2">Models can make mistakes. Check important information.</p>
+                <div class="flex justify-between items-center mt-2">
+                    <p class="text-gray-500 text-xs">Ctrl+Enter to send</p>
+                    <p class="text-gray-500 text-xs">Models may make mistakes. Check important information.</p>
+                </div>
             </div>
         </div>
     </div>
@@ -313,11 +573,14 @@ document.addEventListener('DOMContentLoaded', function() {
     const sendIcon = document.getElementById('sendIcon');
     const sendLoader = document.getElementById('sendLoader');
     const clearChatButton = document.getElementById('clearChatButton');
+    const exportChatButton = document.getElementById('exportChatButton');
     const modelSelectButton = document.getElementById('modelSelectButton');
     const modelSelectDisplay = document.getElementById('modelSelectDisplay');
     const modelOptions = document.getElementById('modelOptions');
     const modelLoader = document.getElementById('modelLoader');
     const themeToggle = document.getElementById('themeToggle');
+    const toast = document.getElementById('toast');
+    const quickPromptButtons = document.querySelectorAll('.quick-prompt');
     
     // State variables
     let currentStreamingMessage = null;
@@ -326,6 +589,8 @@ document.addEventListener('DOMContentLoaded', function() {
     let selectedModel = '';
     let modelsList = [];
     let isDarkMode = true;
+    let autoScrollEnabled = true;
+    let lastMessageTime = null;
 
     // Initialize with animation
     anime({
@@ -336,11 +601,92 @@ document.addEventListener('DOMContentLoaded', function() {
         duration: 800
     });
 
-    // Fetch models from API
+    // Auto-resize textarea
+    function autoResizeTextarea(textarea) {
+        textarea.style.height = 'auto';
+        const newHeight = Math.min(Math.max(textarea.scrollHeight, 50), 150);
+        textarea.style.height = newHeight + 'px';
+    }
+
+    chatInput.addEventListener('input', function() {
+        autoResizeTextarea(this);
+    });
+
+    // Quick prompt buttons
+    quickPromptButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            initialChatInput.value = this.textContent;
+            initialChatInput.focus();
+        });
+    });
+
+    // Show toast notification
+    function showToast(message, duration = 2000) {
+        toast.textContent = message;
+        toast.classList.add('show');
+        
+        setTimeout(() => {
+            toast.classList.remove('show');
+        }, duration);
+    }
+
+    // Copy text to clipboard
+    function copyToClipboard(text) {
+        navigator.clipboard.writeText(text).then(() => {
+            showToast('Copied to clipboard!');
+        }).catch(err => {
+            console.error('Failed to copy: ', err);
+            showToast('Failed to copy text');
+        });
+    }
+
+    // Export conversation as markdown or JSON
+    function exportConversation(format = 'markdown') {
+        if (conversationHistory.length <= 1) {
+            showToast('No conversation to export');
+            return;
+        }
+        
+        let content = '';
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+        let filename = '';
+        
+        if (format === 'markdown') {
+            content = '# LOKI.AI Conversation\n\n';
+            content += `*Exported on: ${new Date().toLocaleString()}*\n\n`;
+            
+            for (let i = 1; i < conversationHistory.length; i++) {
+                const message = conversationHistory[i];
+                if (message.role === 'user') {
+                    content += `## User\n\n${message.content}\n\n`;
+                } else if (message.role === 'assistant') {
+                    content += `## Assistant\n\n${message.content}\n\n`;
+                }
+            }
+            
+            filename = `loki-ai-conversation-${timestamp}.md`;
+        } else if (format === 'json') {
+            content = JSON.stringify(conversationHistory, null, 2);
+            filename = `loki-ai-conversation-${timestamp}.json`;
+        }
+        
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        
+        showToast(`Exported as ${format}`);
+    }
+    
+    // Fetch available models
     async function fetchModels() {
         try {
             const response = await fetch('https://parthsadaria-lokiai.hf.space/models', {
-                method: 'GET',
                 headers: {
                     'Authorization': 'playground'
                 }
@@ -348,271 +694,270 @@ document.addEventListener('DOMContentLoaded', function() {
             
             if (response.ok) {
                 const data = await response.json();
-                modelsList = data;
-                populateModels(data);
+                modelsList = data.data || [];
+                
+                // Add search GPT option
+                modelsList.push({
+                    id: 'searchgpt',
+                    displayName: 'SearchGPT (with internet)',
+                    description: 'GPT model with internet search capability'
+                });
+                
+                populateModelOptions(modelsList);
             } else {
-                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);
+                modelLoader.textContent = 'Failed to load models';
             }
         } catch (error) {
             console.error('Error fetching models:', error);
-            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);
+            modelLoader.textContent = 'Error loading models';
         }
     }
-
-    // Organize and display models
-    function populateModels(models) {
-        // Group models by provider
-        const providers = {};
+    
+    // Populate model dropdown
+    function populateModelOptions(models) {
+        modelOptions.innerHTML = '';
+        
+        if (models.length === 0) {
+            const noModels = document.createElement('div');
+            noModels.className = 'py-2 px-4 text-sm text-gray-600 dark:text-gray-400';
+            noModels.textContent = 'No models available';
+            modelOptions.appendChild(noModels);
+            return;
+        }
+        
         models.forEach(model => {
-            const modelName = model.id;
-            let provider = 'Other';
+            const option = document.createElement('div');
+            option.className = 'py-2 px-4 text-sm hover:bg-light-input dark:hover:bg-dark-input cursor-pointer';
+            option.dataset.modelId = model.id;
             
-            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';
+            const modelName = document.createElement('div');
+            modelName.className = 'font-medium text-gray-800 dark:text-gray-200';
+            modelName.textContent = model.displayName || model.id;
             
-            if (!providers[provider]) providers[provider] = [];
-            providers[provider].push(model);
-        });
-        
-        // Clear existing options
-        modelOptions.innerHTML = '';
-        
-        // Add special option for web search
-        const searchOption = document.createElement('div');
-        searchOption.className = 'px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
-        searchOption.textContent = 'SearchGPT (Web-access)';
-        searchOption.dataset.value = 'searchgpt';
-        modelOptions.appendChild(searchOption);
-        
-        // Add a separator
-        const separator = document.createElement('div');
-        separator.className = 'px-4 py-1 text-xs font-semibold text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400';
-        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 = 'px-4 py-1 text-xs font-semibold text-gray-500 bg-gray-50 dark:bg-gray-800 dark:text-gray-400';
-            providerGroup.textContent = provider;
-            modelOptions.appendChild(providerGroup);
+            const modelDesc = document.createElement('div');
+            modelDesc.className = 'text-xs text-gray-500 dark:text-gray-400';
+            modelDesc.textContent = model.description || '';
             
-            providers[provider].sort((a, b) => a.id.localeCompare(b.id)).forEach(model => {
-                const option = document.createElement('div');
-                option.className = 'px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer';
-                option.textContent = model.id;
-                option.dataset.value = model.id;
-                modelOptions.appendChild(option);
+            option.appendChild(modelName);
+            option.appendChild(modelDesc);
+            
+            option.addEventListener('click', function() {
+                selectModel(model);
             });
+            
+            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;
-            }
+        // Default to first model if available
+        if (models.length > 0 && !selectedModel) {
+            selectModel(models[0]);
         }
-        
-        // Add event listeners to options
-        document.querySelectorAll('#modelOptions > div').forEach(option => {
-            if (option.dataset.value) {
-                option.addEventListener('click', function() {
-                    selectedModel = this.dataset.value;
-                    modelSelectDisplay.textContent = this.textContent;
-                    modelOptions.classList.add('hidden');
-                });
-            }
-        });
     }
-
-    function scrollToBottom() {
-        chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    // Select a model
+    function selectModel(model) {
+        selectedModel = model.id;
+        modelSelectDisplay.textContent = model.displayName || model.id;
+        modelOptions.classList.add('hidden');
     }
-  marked.setOptions({
-            highlight: function(code, lang) {
-                if (lang && hljs.getLanguage(lang)) {
-                    return hljs.highlight(code, { language: lang }).value;
-                }
-                return hljs.highlightAuto(code).value;
-            },
-            breaks: true,
-            gfm: true
-        });
-
-    function createMessageElement(message, sender) {
-            const messageEl = document.createElement('div');
-            messageEl.className = `message-bubble p-4 ${sender === 'user' ? 'user-message' : 'assistant-message'}`;
-            
-            if (sender === 'assistant') {
-                // Use markdown parsing for assistant messages
-                messageEl.classList.add('markdown-content');
-                messageEl.innerHTML = marked.parse(message);
+    
+    // Format timestamp
+    function formatTimestamp(timestamp) {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    
+    // 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
-                messageEl.querySelectorAll('pre code').forEach((block) => {
+                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 {
-                // For user messages, just use the plain text
-                messageEl.textContent = message;
+                // 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)
+            lastMessageTime = now;
             
-            const wrapperEl = document.createElement('div');
-            wrapperEl.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
-            wrapperEl.appendChild(messageEl);
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message-appear flex flex-col items-start';
             
-            return wrapperEl;
-        }
-
-    function appendMessage(content, type = 'bot', isStreaming = false) {
-        if (type === 'bot' && isStreaming) {
-            if (!currentStreamingMessage) {
-                currentStreamingMessage = createMessageElement(type);
-                chatMessages.appendChild(currentStreamingMessage);
-
-                // Add to conversation history only at the start of streaming
-                if (!isStreamingInProgress) {
-                    conversationHistory.push({
-                        role: 'assistant',
-                        content: ''
-                    });
-                    isStreamingInProgress = true;
-                }
+            if (sender === 'user') {
+                messageDiv.classList.add('items-end');
             }
-
-            // Format content
-            const formattedContent = content
-                .replace(/```([\s\S]*?)```/g, (match, code) => `<pre class="bg-gray-900 text-gray-100 p-2 rounded my-2 overflow-x-auto">${code}</pre>`)
-                .replace(/`([^`]+)`/g, '<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded text-sm">$1</code>')
-                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                .replace(/\n/g, '<br>');
-
-            currentStreamingMessage.innerHTML += formattedContent;
-
-            // Update the last message in conversation history
-            if (conversationHistory.length > 0) {
-                conversationHistory[conversationHistory.length - 1].content += content;
+            
+            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);
+            
+            // Update conversation history
+            conversationHistory.push({
+                role: sender === 'user' ? 'user' : 'assistant',
+                content: text
+            });
+        }
+        
+        // Scroll to bottom if auto-scroll is enabled
+        if (autoScrollEnabled) {
             scrollToBottom();
-        } else {
-            if (type === 'bot' && currentStreamingMessage) {
-                isStreamingInProgress = false;
-                currentStreamingMessage = null;
-            } else {
-                const messageBox = createMessageElement(type);
-
-                // Format content
-                const formattedContent = content
-                    .replace(/```([\s\S]*?)```/g, (match, code) => `<pre class="bg-gray-900 text-gray-100 p-2 rounded my-2 overflow-x-auto">${code}</pre>`)
-                    .replace(/`([^`]+)`/g, '<code class="bg-gray-200 dark:bg-gray-700 px-1 rounded text-sm">$1</code>')
-                    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                    .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                    .replace(/\n/g, '<br>');
-
-                messageBox.innerHTML = formattedContent;
-                chatMessages.appendChild(messageBox);
-
-                // Add to conversation history
-                if (type === 'user') {
-                    conversationHistory.push({
-                        role: 'user',
-                        content: content
-                    });
-                } else if (type === 'bot' && !isStreamingInProgress) {
-                    conversationHistory.push({
-                        role: 'assistant',
-                        content: content
-                    });
-                }
-
-                scrollToBottom();
-            }
         }
     }
-
+    
+    // Scroll chat to bottom
+    function scrollToBottom() {
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+    
+    // Clear chat history
     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';
-        
-        // Animation for initial input
-        anime({
-            targets: '#initialInput',
-            opacity: [0, 1],
-            translateY: [20, 0],
-            easing: 'easeOutExpo',
-            duration: 500
-        });
+        if (isStreamingInProgress) {
+            showToast('Cannot clear chat while message is streaming');
+            return;
+        }
+        
+        if (conversationHistory.length <= 1) {
+            showToast('Chat is already empty');
+            return;
+        }
+        
+        // Confirm before clearing
+        if (confirm('Are you sure you want to clear the chat history?')) {
+            chatMessages.innerHTML = '';
+            conversationHistory = [conversationHistory[0]]; // Keep system message
+            currentStreamingMessage = null;
+            isStreamingInProgress = false;
+            showToast('Chat cleared');
+        }
     }
-
-    async function sendInitialMessage() {
+    
+    // Handle initial message submission
+    function sendInitialMessage() {
         const userMessage = initialChatInput.value.trim();
-        if (!userMessage || !selectedModel) return;
+        if (!userMessage || !selectedModel) {
+            if (!selectedModel) showToast('Please select a model first');
+            return;
+        }
         
+        // Hide initial input and show chat container
         initialInput.style.display = 'none';
         chatContainer.style.display = 'flex';
         
-        // Animation for chat container
-        anime({
-            targets: '#chatContainer',
-            opacity: [0, 1],
-            easing: 'easeOutExpo',
-            duration: 500
-        });
-        
-        appendMessage(userMessage, 'user');
+        // Copy message to chat input and send
+        chatInput.value = userMessage;
         initialChatInput.value = '';
-        
-        // Show loader, hide send icon
-        sendLoader.style.display = 'block';
-        sendIcon.style.display = 'none';
-        
-        try {
-            await callApi(userMessage, selectedModel);
-        } catch (error) {
-            appendMessage("Oops! Something went wrong. Please try again.", 'bot');
-        } finally {
-            // Hide loader, show send icon
-            sendLoader.style.display = 'none';
-            sendIcon.style.display = 'block';
-        }
+        sendMessage();
     }
-
+    
     async function sendMessage() {
         const userMessage = chatInput.value.trim();
         if (!userMessage || !selectedModel) return;
@@ -808,10 +1153,57 @@ document.addEventListener('DOMContentLoaded', function() {
 
     sendButton.addEventListener('click', sendMessage);
     chatInput.addEventListener('keypress', (event) => {
-        if (event.key === 'Enter') sendMessage();
+        if ((event.key === 'Enter' && !event.shiftKey) || (event.ctrlKey && event.key === 'Enter')) {
+            event.preventDefault();
+            sendMessage();
+        }
     });
 
     clearChatButton.addEventListener('click', clearChat);
+    
+    exportChatButton.addEventListener('click', function() {
+        const formatOptions = document.createElement('div');
+        formatOptions.className = 'absolute mt-1 w-40 rounded-md shadow-lg bg-light-card dark:bg-dark-card ring-1 ring-black ring-opacity-5 py-1 z-20';
+        formatOptions.style.right = '0';
+        
+        const markdownOption = document.createElement('div');
+        markdownOption.className = 'px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-light-input dark:hover:bg-dark-input cursor-pointer';
+        markdownOption.textContent = 'Export as Markdown';
+        markdownOption.addEventListener('click', () => {
+            exportConversation('markdown');
+            formatOptions.remove();
+        });
+        
+        const jsonOption = document.createElement('div');
+        jsonOption.className = 'px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-light-input dark:hover:bg-dark-input cursor-pointer';
+        jsonOption.textContent = 'Export as JSON';
+        jsonOption.addEventListener('click', () => {
+            exportConversation('json');
+            formatOptions.remove();
+        });
+        
+        formatOptions.appendChild(markdownOption);
+        formatOptions.appendChild(jsonOption);
+        
+        // Remove existing format options if any
+        const existingOptions = document.querySelector('.export-format-options');
+        if (existingOptions) existingOptions.remove();
+        
+        formatOptions.classList.add('export-format-options');
+        exportChatButton.parentNode.appendChild(formatOptions);
+        
+        // Close when clicking outside
+        const closeFormatOptions = (e) => {
+            if (!formatOptions.contains(e.target) && !exportChatButton.contains(e.target)) {
+                formatOptions.remove();
+                document.removeEventListener('click', closeFormatOptions);
+            }
+        };
+        
+        setTimeout(() => {
+            document.addEventListener('click', closeFormatOptions);
+        }, 0);
+    });
 
     // Model selector
     modelSelectButton.addEventListener('click', function(e) {
@@ -827,74 +1219,14 @@ document.addEventListener('DOMContentLoaded', function() {
     // Theme toggle
     themeToggle.addEventListener('click', toggleTheme);
 
+    // Message scroll event to detect if user has scrolled up
+    chatMessages.addEventListener('scroll', function() {
+        const isScrolledToBottom = chatMessages.scrollHeight - chatMessages.clientHeight <= chatMessages.scrollTop + 10;
+        autoScrollEnabled = isScrolledToBottom;
+    });
+
     // Initialize
-  // Initialize
     fetchModels();
-    
-    // Add event listeners to prevent propagation within model options
-    modelOptions.addEventListener('click', function(e) {
-        e.stopPropagation();
-    });
-    
-    // Add responsive behavior
-    function resizeChat() {
-        if (window.innerWidth < 640) {
-            chatContainer.style.height = 'calc(100vh - 180px)';
-        } else {
-            chatContainer.style.height = '70vh';
-        }
-    }
-      function showTypingIndicator() {
-            const typingEl = document.createElement('div');
-            typingEl.className = 'message-bubble assistant-message p-3 typing-indicator flex';
-            typingEl.innerHTML = `
-                <span class="h-2 w-2 bg-primary-light rounded-full mx-0.5" style="--dot-index: 0"></span>
-                <span class="h-2 w-2 bg-primary-light rounded-full mx-0.5" style="--dot-index: 1"></span>
-                <span class="h-2 w-2 bg-primary-light rounded-full mx-0.5" style="--dot-index: 2"></span>
-            `;
-            
-            const wrapperEl = document.createElement('div');
-            wrapperEl.className = 'flex justify-start typing-wrapper';
-            wrapperEl.appendChild(typingEl);
-            
-            document.getElementById('chatMessages').appendChild(wrapperEl);
-            document.getElementById('chatMessages').scrollTop = document.getElementById('chatMessages').scrollHeight;
-            
-            return wrapperEl;
-        }
-        
-        // Function to remove typing indicator
-        function removeTypingIndicator() {
-            const typingWrapper = document.querySelector('.typing-wrapper');
-            if (typingWrapper) {
-                typingWrapper.remove();
-            }
-        }
-    window.addEventListener('resize', resizeChat);
-    resizeChat();
-    
-    // Check for saved theme preference
-    if (localStorage.getItem('darkMode') === 'false') {
-        toggleTheme();
-    }
-    
-    // Save theme preference when changed
-    themeToggle.addEventListener('click', function() {
-        localStorage.setItem('darkMode', isDarkMode);
-    });
-    
-    // Keyboard shortcuts
-    document.addEventListener('keydown', function(event) {
-        // Ctrl+Enter to send in chat area
-        if (event.ctrlKey && event.key === 'Enter' && document.activeElement === chatInput) {
-            sendMessage();
-        }
-        
-        // Escape to close model dropdown
-        if (event.key === 'Escape') {
-            modelOptions.classList.add('hidden');
-        }
-    });
 });
     </script>
 </body>