AdrienB134 commited on
Commit
0800c82
·
verified ·
1 Parent(s): 1869a15

Update templates/chat.html

Browse files
Files changed (1) hide show
  1. templates/chat.html +49 -0
templates/chat.html CHANGED
@@ -77,6 +77,39 @@
77
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
78
  }
79
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
  .input-container {
81
  display: flex;
82
  gap: 12px;
@@ -263,6 +296,7 @@
263
  messageDiv.textContent = message;
264
  chatContainer.appendChild(messageDiv);
265
  chatContainer.scrollTop = chatContainer.scrollHeight;
 
266
  }
267
 
268
  function updateSources(sources) {
@@ -284,6 +318,16 @@
284
  addMessage(message, true);
285
  messageInput.value = '';
286
 
 
 
 
 
 
 
 
 
 
 
287
  try {
288
  const response = await fetch('/chat', {
289
  method: 'POST',
@@ -295,6 +339,9 @@
295
 
296
  const data = await response.json();
297
 
 
 
 
298
  if (data.error) {
299
  addMessage(data.error, false);
300
  return;
@@ -317,6 +364,8 @@
317
  updateSources(data.answer[1]);
318
  }
319
  } catch (error) {
 
 
320
  console.error('Error:', error);
321
  addMessage('Sorry, there was an error processing your message.', false);
322
  }
 
77
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
78
  }
79
 
80
+ .loading-dots {
81
+ display: inline-block;
82
+ }
83
+
84
+ @keyframes dots {
85
+ 0% {
86
+ content: '';
87
+ }
88
+
89
+ 25% {
90
+ content: '.';
91
+ }
92
+
93
+ 50% {
94
+ content: '..';
95
+ }
96
+
97
+ 75% {
98
+ content: '...';
99
+ }
100
+
101
+ 100% {
102
+ content: '';
103
+ }
104
+ }
105
+
106
+ .loading-dots::after {
107
+ content: '';
108
+ animation: dots 2s infinite;
109
+ display: inline-block;
110
+ width: 1em;
111
+ }
112
+
113
  .input-container {
114
  display: flex;
115
  gap: 12px;
 
296
  messageDiv.textContent = message;
297
  chatContainer.appendChild(messageDiv);
298
  chatContainer.scrollTop = chatContainer.scrollHeight;
299
+ return messageDiv;
300
  }
301
 
302
  function updateSources(sources) {
 
318
  addMessage(message, true);
319
  messageInput.value = '';
320
 
321
+ // Add loading message
322
+ const loadingDiv = document.createElement('div');
323
+ loadingDiv.className = 'message bot-message';
324
+ const loadingSpan = document.createElement('span');
325
+ loadingSpan.className = 'loading-dots';
326
+ loadingSpan.textContent = 'Thinking';
327
+ loadingDiv.appendChild(loadingSpan);
328
+ chatContainer.appendChild(loadingDiv);
329
+ chatContainer.scrollTop = chatContainer.scrollHeight;
330
+
331
  try {
332
  const response = await fetch('/chat', {
333
  method: 'POST',
 
339
 
340
  const data = await response.json();
341
 
342
+ // Remove loading message
343
+ chatContainer.removeChild(loadingDiv);
344
+
345
  if (data.error) {
346
  addMessage(data.error, false);
347
  return;
 
364
  updateSources(data.answer[1]);
365
  }
366
  } catch (error) {
367
+ // Remove loading message
368
+ chatContainer.removeChild(loadingDiv);
369
  console.error('Error:', error);
370
  addMessage('Sorry, there was an error processing your message.', false);
371
  }