Update playground.html

playground.html

@@ -553,25 +553,46 @@
             <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 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>
+
+        <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>
+
+<script>
+    const chatInput = document.getElementById('chatInput');
+    const fullscreenButton = document.getElementById('fullscreenButton');
+
+    fullscreenButton.addEventListener('click', () => {
+        if (!document.fullscreenElement) {
+            chatInput.requestFullscreen();
+        } else {
+            document.exitFullscreen();
+        }
+    });
+</script>
+
         </div>
     </div>