Update playground.html

playground.html

@@ -547,46 +547,48 @@
             </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">
-            <!-- 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">
-        <button id="fullscreenButton" class="absolute right-3 top-3 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" />
-            </svg>
-        </button>
+<!-- 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" />
+        </svg>
+    </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>
+    <!-- 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>
+        </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>
+        </div>
     </div>
 </div>
 
 <script>
-    const chatInput = document.getElementById('chatInput');
+    const chatContainer = document.getElementById('chatContainer');
     const fullscreenButton = document.getElementById('fullscreenButton');
 
     fullscreenButton.addEventListener('click', () => {
         if (!document.fullscreenElement) {
-            chatInput.requestFullscreen();
+            chatContainer.requestFullscreen();
         } else {
             document.exitFullscreen();
         }