ParthSadaria commited on
Commit
37622ca
·
verified ·
1 Parent(s): 17b3166

Update playground.html

Browse files
Files changed (1) hide show
  1. playground.html +43 -20
playground.html CHANGED
@@ -207,23 +207,43 @@
207
  border-radius: 15px;
208
  }
209
 
210
- .chat-container {
211
- display: none;
212
- flex-direction: column;
213
- height: 100%;
214
- }
215
-
216
- .chat-messages {
217
- flex: 1;
218
- overflow-y: auto;
219
- padding: 20px;
220
- display: flex;
221
- flex-direction: column;
222
- gap: 16px;
223
- background-color: var(--bg-dark);
224
- font-family: 'JetBrains Mono', monospace;
225
- overscroll-behavior: contain;
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) {