Update playground.html

playground.html

@@ -207,23 +207,43 @@
             border-radius: 15px;
         }
 
-        .chat-container {
-            display: none;
-            flex-direction: column;
-            height: 100%;
-        }
-
-        .chat-messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px;
-            display: flex;
-            flex-direction: column;
-            gap: 16px;
-            background-color: var(--bg-dark);
-            font-family: 'JetBrains Mono', monospace;
-            overscroll-behavior: contain;
-        }
+.chat-container {
+    display: none;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background-color: var(--bg-dark);
+    font-family: 'JetBrains Mono', monospace;
+    overscroll-behavior: contain;
+    max-height: calc(90vh - 120px); /* Adjust based on header and input height */
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 70px; /* Space for input area */
+}
+
+.chat-input {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    gap: 12px;
+    padding: 16px;
+    background-color: var(--bg-darker);
+    border-top: 1px solid var(--border-color);
+    z-index: 10;
+}
 
         .message {
             max-width: 80%;
@@ -402,7 +422,10 @@
 
         let currentStreamingMessage = null;
         let conversationHistory = [];
-
+        function scrollToBottom() {
+            const chatMessages = document.getElementById('chatMessages');
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+}
         function appendMessage(content, type = 'bot', isStreaming = false) {
             if (type === 'bot' && isStreaming) {
                 if (!currentStreamingMessage) {
@@ -448,14 +471,14 @@
             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) {