klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-10 05:39:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a loading symbol to web chat. Closes #392

Browse Source
This commit is contained in:
sabaimran
2023-07-31 23:35:48 -07:00
parent 8054bdc896
commit c14cbe926a
1 changed files with 21 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/khoj/interface/web/chat.html
View File

@@ -76,7 +76,9 @@
new_response.appendChild(new_response_text); new_response.appendChild(new_response_text);
// Temporary status message to indicate that Khoj is thinking // Temporary status message to indicate that Khoj is thinking
new_response_text.innerHTML = "🤔"; let loading_spinner = document.createElement("div");
loading_spinner.classList.add("spinner");
new_response_text.appendChild(loading_spinner);
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
// Call specified Khoj API which returns a streamed response of type text/plain // Call specified Khoj API which returns a streamed response of type text/plain
@@ -107,10 +109,10 @@
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
} else { } else {
// Display response from Khoj // Display response from Khoj
if (new_response_text.innerHTML === "🤔") { if (new_response_text.getElementsByClassName("spinner").length > 0) {
// Clear temporary status message new_response_text.removeChild(loading_spinner);
new_response_text.innerHTML = "";
} }
new_response_text.innerHTML += chunk; new_response_text.innerHTML += chunk;
readStream(); readStream();
} }
@@ -269,6 +271,21 @@
margin-left: auto; margin-left: auto;
white-space: pre-line; white-space: pre-line;
} }
/* Spinner symbol when the chat message is loading */
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid var(--primary-inverse);
border-radius: 50%;
width: 12px;
height: 12px;
animation: spin 2s linear infinite;
margin: 0px 0px 0px 10px;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* add left protrusion to khoj chat bubble */ /* add left protrusion to khoj chat bubble */
.chat-message-text.khoj:after { .chat-message-text.khoj:after {
content: ''; content: '';