Spaces:
Running
Running
Update playground.html
Browse files- playground.html +43 -20
playground.html
CHANGED
@@ -207,23 +207,43 @@
|
|
207 |
border-radius: 15px;
|
208 |
}
|
209 |
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
214 |
-
|
215 |
-
|
216 |
-
|
217 |
-
|
218 |
-
|
219 |
-
|
220 |
-
|
221 |
-
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
227 |
|
228 |
.message {
|
229 |
max-width: 80%;
|
@@ -402,7 +422,10 @@
|
|
402 |
|
403 |
let currentStreamingMessage = null;
|
404 |
let conversationHistory = [];
|
405 |
-
|
|
|
|
|
|
|
406 |
function appendMessage(content, type = 'bot', isStreaming = false) {
|
407 |
if (type === 'bot' && isStreaming) {
|
408 |
if (!currentStreamingMessage) {
|
@@ -448,14 +471,14 @@
|
|
448 |
const userMessage = initialChatInput.value.trim();
|
449 |
const selectedModel = modelSelect.value;
|
450 |
if (!userMessage) return;
|
451 |
-
|
452 |
initialInput.style.display = 'none';
|
453 |
chatContainer.style.display = 'flex';
|
454 |
chatWrapper.classList.add('active');
|
455 |
|
456 |
appendMessage(userMessage, 'user');
|
457 |
initialChatInput.value = '';
|
458 |
-
|
459 |
try {
|
460 |
await callApi(userMessage, selectedModel);
|
461 |
} catch (error) {
|
|
|
207 |
border-radius: 15px;
|
208 |
}
|
209 |
|
210 |
+
.chat-container {
|
211 |
+
display: none;
|
212 |
+
flex-direction: column;
|
213 |
+
height: 100%;
|
214 |
+
position: relative;
|
215 |
+
}
|
216 |
+
|
217 |
+
.chat-messages {
|
218 |
+
flex: 1;
|
219 |
+
overflow-y: auto;
|
220 |
+
padding: 20px;
|
221 |
+
display: flex;
|
222 |
+
flex-direction: column;
|
223 |
+
gap: 16px;
|
224 |
+
background-color: var(--bg-dark);
|
225 |
+
font-family: 'JetBrains Mono', monospace;
|
226 |
+
overscroll-behavior: contain;
|
227 |
+
max-height: calc(90vh - 120px); /* Adjust based on header and input height */
|
228 |
+
position: absolute;
|
229 |
+
top: 0;
|
230 |
+
left: 0;
|
231 |
+
right: 0;
|
232 |
+
bottom: 70px; /* Space for input area */
|
233 |
+
}
|
234 |
+
|
235 |
+
.chat-input {
|
236 |
+
position: absolute;
|
237 |
+
bottom: 0;
|
238 |
+
left: 0;
|
239 |
+
right: 0;
|
240 |
+
display: flex;
|
241 |
+
gap: 12px;
|
242 |
+
padding: 16px;
|
243 |
+
background-color: var(--bg-darker);
|
244 |
+
border-top: 1px solid var(--border-color);
|
245 |
+
z-index: 10;
|
246 |
+
}
|
247 |
|
248 |
.message {
|
249 |
max-width: 80%;
|
|
|
422 |
|
423 |
let currentStreamingMessage = null;
|
424 |
let conversationHistory = [];
|
425 |
+
function scrollToBottom() {
|
426 |
+
const chatMessages = document.getElementById('chatMessages');
|
427 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
428 |
+
}
|
429 |
function appendMessage(content, type = 'bot', isStreaming = false) {
|
430 |
if (type === 'bot' && isStreaming) {
|
431 |
if (!currentStreamingMessage) {
|
|
|
471 |
const userMessage = initialChatInput.value.trim();
|
472 |
const selectedModel = modelSelect.value;
|
473 |
if (!userMessage) return;
|
474 |
+
|
475 |
initialInput.style.display = 'none';
|
476 |
chatContainer.style.display = 'flex';
|
477 |
chatWrapper.classList.add('active');
|
478 |
|
479 |
appendMessage(userMessage, 'user');
|
480 |
initialChatInput.value = '';
|
481 |
+
scrollToBottom();
|
482 |
try {
|
483 |
await callApi(userMessage, selectedModel);
|
484 |
} catch (error) {
|