Update playground.html

playground.html

@@ -463,6 +463,24 @@
         .message-appear {
             animation: messageAppear 0.3s ease-out forwards;
         }
+          @keyframes fullscreenIn {
+      from { transform: scale(0.95); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+    .fullscreen-animate {
+      animation: fullscreenIn 0.3s ease-out;
+    }
+    /* Resize handle style */
+    #resizeHandle {
+      width: 1.5rem;
+      height: 1.5rem;
+      background-color: #9CA3AF; /* gray-400 */
+      cursor: se-resize;
+      position: absolute;
+      right: 0.5rem;
+      bottom: 0.5rem;
+      z-index: 50;
+    }
     </style>
 </head>
 
@@ -481,123 +499,153 @@
     <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-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-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-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-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-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-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>
-            </div>
+ <div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 opacity-0 transform translate-y-4 relative" id="chatWrapper">
+    <!-- Header with Logo -->
+    <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-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-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-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-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-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>
+      </div>
+    </div>
 
-        <!-- Initial Input -->
-        <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
-            <h2 class="text-2xl font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
-            <div class="w-full max-w-2xl relative">
-                <input type="text" id="initialChatInput" 
-                       class="w-full p-4 pr-12 rounded-xl border-2 border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white text-gray-800 shadow-lg transition-all"
-                       placeholder="What can I help you with today?">
-                <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>
+    <!-- Initial Input -->
+    <div class="flex flex-col items-center justify-center space-y-6 py-12" id="initialInput">
+      <h2 class="text-2xl font-bold bg-gradient-to-r from-primary to-primary-light bg-clip-text text-transparent">Welcome to LOKI.AI</h2>
+      <div class="w-full max-w-2xl relative">
+        <input type="text" id="initialChatInput" class="w-full p-4 pr-12 rounded-xl border-2 border-light-darker dark:border-dark-input bg-light-input dark:bg-dark-lighter focus:outline-none focus:ring-2 focus:ring-primary-light dark:text-white text-gray-800 shadow-lg transition-all"
+          placeholder="What can I help you with today?">
+        <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-light-card dark:bg-dark-lighter rounded-xl shadow-lg overflow-hidden border border-light-darker dark:border-dark-input" id="chatContainer">
-    <!-- Fullscreen Button -->
-    <button id="fullscreenButton" class="absolute right-4 top-4 z-10 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Fullscreen">
+    <!-- Chat Area -->
+    <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">
+      <!-- Fullscreen Button -->
+      <button id="fullscreenButton" class="absolute right-4 top-4 z-10 text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors" aria-label="Fullscreen">
         <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="M4 4h6M4 4v6M4 4l6 6M20 20h-6M20 20v-6M20 20l-6-6" />
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+            d="M4 4h6M4 4v6M4 4l6 6M20 20h-6M20 20v-6M20 20l-6-6" />
         </svg>
-    </button>
+      </button>
 
-    <!-- Messages Area -->
-    <div class="flex-1 overflow-y-auto p-4 space-y-5" id="chatMessages"></div>
-    
-    <!-- Input Area -->
-    <div class="border-t border-light-darker dark:border-dark-input p-4 bg-light-card dark:bg-dark-lighter">
+      <!-- Messages Area -->
+      <div class="flex-1 overflow-y-auto p-4 space-y-5" id="chatMessages"></div>
+      
+      <!-- Input Area -->
+      <div class="border-t border-light-darker dark:border-dark-input p-4 bg-light-card dark:bg-dark-lighter">
         <div class="relative">
-            <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>
-                <div id="sendLoader" class="hidden">
-                    <div class="w-5 h-5 border-2 border-primary-light border-t-transparent rounded-full animate-spin"></div>
-                </div>
-            </button>
+          <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>
+            <div id="sendLoader" class="hidden">
+              <div class="w-5 h-5 border-2 border-primary-light border-t-transparent rounded-full animate-spin"></div>
+            </div>
+          </button>
         </div>
         <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>
+          <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>
-
-<script>
-    const chatContainer = document.getElementById('chatContainer');
+    <!-- Resize Handle -->
+    <div id="resizeHandle"></div>
+  </div>
+  <script>
+       const chatContainer = document.getElementById('chatContainer');
     const fullscreenButton = document.getElementById('fullscreenButton');
+    const chatWrapper = document.getElementById('chatWrapper');
+    const resizeHandle = document.getElementById('resizeHandle');
 
+    // Fullscreen animation
     fullscreenButton.addEventListener('click', () => {
-        if (!document.fullscreenElement) {
-            chatContainer.requestFullscreen();
-        } else {
-            document.exitFullscreen();
-        }
+      if (!document.fullscreenElement) {
+        chatContainer.requestFullscreen().then(() => {
+          chatContainer.classList.add('fullscreen-animate');
+          setTimeout(() => {
+            chatContainer.classList.remove('fullscreen-animate');
+          }, 300);
+        });
+      } else {
+        document.exitFullscreen();
+      }
     });
-</script>
 
-        </div>
-    </div>
+    // Resize functionality
+    let isResizing = false;
+    let lastDownX, lastDownY;
+
+    resizeHandle.addEventListener('mousedown', (e) => {
+      isResizing = true;
+      lastDownX = e.clientX;
+      lastDownY = e.clientY;
+      e.preventDefault();
+    });
 
+    document.addEventListener('mousemove', (e) => {
+      if (!isResizing) return;
+      const dx = e.clientX - lastDownX;
+      const dy = e.clientY - lastDownY;
+      const newWidth = chatWrapper.offsetWidth + dx;
+      const newHeight = chatWrapper.offsetHeight + dy;
+      chatWrapper.style.width = newWidth + 'px';
+      chatWrapper.style.height = newHeight + 'px';
+      lastDownX = e.clientX;
+      lastDownY = e.clientY;
+    });
+
+    document.addEventListener('mouseup', () => {
+      isResizing = false;
+    });
+  </script>
     <!-- Watermark -->
     <div class="fixed bottom-2 right-4 text-sm text-gray-500 font-mono font-bold">
         Built By <span class="text-primary-light">🔥</span> Parth Sadaria