sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2025-02-17 08:04:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Put loading spinner at bottom of chat message in web client

Browse source
This commit is contained in:
Debanjum Singh Solanky 2024-07-23 17:59:41 +05:30
parent fc33162ec6
commit fafc467173
1 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/khoj/interface/web/chat.html
View file

@ -683,13 +683,19 @@ To get started, just start typing below. You can also type / to see a list of co
} }
function handleStreamResponse(newResponseElement, rawResponse, rawQuery, loadingEllipsis, replace=true) { function handleStreamResponse(newResponseElement, rawResponse, rawQuery, loadingEllipsis, replace=true) {
if (newResponseElement.getElementsByClassName("lds-ellipsis").length > 0 && loadingEllipsis) { if (!newResponseElement) return;
// Remove loading ellipsis if it exists
if (newResponseElement.getElementsByClassName("lds-ellipsis").length > 0 && loadingEllipsis)
newResponseElement.removeChild(loadingEllipsis); newResponseElement.removeChild(loadingEllipsis);
} // Clear the response element if replace is true
if (replace) { if (replace) newResponseElement.innerHTML = "";
newResponseElement.innerHTML = "";
} // Append response to the response element
newResponseElement.appendChild(formatHTMLMessage(rawResponse, false, replace, rawQuery)); newResponseElement.appendChild(formatHTMLMessage(rawResponse, false, replace, rawQuery));
// Append loading ellipsis if it exists
if (!replace && loadingEllipsis) newResponseElement.appendChild(loadingEllipsis);
// Scroll to bottom of chat view
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
} }
@ -777,7 +783,7 @@ To get started, just start typing below. You can also type / to see a list of co
if (chunk.type ==='status') { if (chunk.type ==='status') {
console.log(`status: ${chunk.data}`); console.log(`status: ${chunk.data}`);
const statusMessage = chunk.data; const statusMessage = chunk.data;
handleStreamResponse(chatMessageState.newResponseTextEl, statusMessage, chatMessageState.rawQuery, null, false); handleStreamResponse(chatMessageState.newResponseTextEl, statusMessage, chatMessageState.rawQuery, chatMessageState.loadingEllipsis, false);
} else if (chunk.type === 'start_llm_response') { } else if (chunk.type === 'start_llm_response') {
console.log("Started streaming", new Date()); console.log("Started streaming", new Date());
} else if (chunk.type === 'end_llm_response') { } else if (chunk.type === 'end_llm_response') {