From 648f1a5c71b70da4320378180ecf6507da642056 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Wed, 17 Apr 2024 22:21:51 +0530 Subject: [PATCH] Suffix chat response element vars with "El" in chat.html of web, desktop apps --- src/interface/desktop/chat.html | 36 ++++++++++++------------ src/khoj/interface/web/chat.html | 48 +++++++++++++++----------------- 2 files changed, 41 insertions(+), 43 deletions(-) diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index aa73df21..a1002ec9 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -465,14 +465,14 @@ // Generate backend API URL to execute query let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&n=${resultsCount}&client=web&stream=true&conversation_id=${conversationID}®ion=${region}&city=${city}&country=${countryName}`; - let new_response = document.createElement("div"); - new_response.classList.add("chat-message", "khoj"); - new_response.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); - chat_body.appendChild(new_response); + let newResponseEl = document.createElement("div"); + newResponseEl.classList.add("chat-message", "khoj"); + newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); + chat_body.appendChild(newResponseEl); - let newResponseText = document.createElement("div"); - newResponseText.classList.add("chat-message-text", "khoj"); - new_response.appendChild(newResponseText); + let newResponseTextEl = document.createElement("div"); + newResponseTextEl.classList.add("chat-message-text", "khoj"); + newResponseEl.appendChild(newResponseTextEl); // Temporary status message to indicate that Khoj is thinking let loadingEllipsis = document.createElement("div"); @@ -495,7 +495,7 @@ loadingEllipsis.appendChild(thirdEllipsis); loadingEllipsis.appendChild(fourthEllipsis); - newResponseText.appendChild(loadingEllipsis); + newResponseTextEl.appendChild(loadingEllipsis); document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; let chatTooltip = document.getElementById("chat-tooltip"); @@ -540,11 +540,11 @@ // If the chunk is not a JSON object, just display it as is rawResponse += chunk; } finally { - newResponseText.innerHTML = ""; - newResponseText.appendChild(formatHTMLMessage(rawResponse)); + newResponseTextEl.innerHTML = ""; + newResponseTextEl.appendChild(formatHTMLMessage(rawResponse)); if (references != null) { - newResponseText.appendChild(references); + newResponseTextEl.appendChild(references); } document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; @@ -563,7 +563,7 @@ if (done) { // Append any references after all the data has been streamed if (references != {}) { - newResponseText.appendChild(createReferenceSection(references)); + newResponseTextEl.appendChild(createReferenceSection(references)); } document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-input").removeAttribute("disabled"); @@ -576,8 +576,8 @@ if (chunk.includes("### compiled references:")) { const additionalResponse = chunk.split("### compiled references:")[0]; rawResponse += additionalResponse; - newResponseText.innerHTML = ""; - newResponseText.appendChild(formatHTMLMessage(rawResponse)); + newResponseTextEl.innerHTML = ""; + newResponseTextEl.appendChild(formatHTMLMessage(rawResponse)); const rawReference = chunk.split("### compiled references:")[1]; const rawReferenceAsJson = JSON.parse(rawReference); @@ -589,14 +589,14 @@ readStream(); } else { // Display response from Khoj - if (newResponseText.getElementsByClassName("lds-ellipsis").length > 0) { - newResponseText.removeChild(loadingEllipsis); + if (newResponseTextEl.getElementsByClassName("lds-ellipsis").length > 0) { + newResponseTextEl.removeChild(loadingEllipsis); } // If the chunk is not a JSON object, just display it as is rawResponse += chunk; - newResponseText.innerHTML = ""; - newResponseText.appendChild(formatHTMLMessage(rawResponse)); + newResponseTextEl.innerHTML = ""; + newResponseTextEl.appendChild(formatHTMLMessage(rawResponse)); readStream(); } diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index 73b626fa..ef35f35d 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -61,8 +61,8 @@ To get started, just start typing below. You can also type / to see a list of co let waitingForLocation = true; let websocketState = { - newResponseText: null, - newResponseElement: null, + newResponseTextEl: null, + newResponseEl: null, loadingEllipsis: null, references: {}, rawResponse: "", @@ -459,8 +459,6 @@ To get started, just start typing below. You can also type / to see a list of co } async function chat() { - // Extract required fields for search from form - if (websocket) { sendMessageViaWebSocket(); return; @@ -899,8 +897,8 @@ To get started, just start typing below. You can also type / to see a list of co } websocketState = { - newResponseText: null, - newResponseElement: null, + newResponseTextEl: null, + newResponseEl: null, loadingEllipsis: null, references: {}, rawResponse: "", @@ -920,12 +918,12 @@ To get started, just start typing below. You can also type / to see a list of co } else if(chunk == "end_llm_response") { console.log("Stopped streaming", new Date()); // Append any references after all the data has been streamed - finalizeChatBodyResponse(websocketState.references, websocketState.newResponseText); + finalizeChatBodyResponse(websocketState.references, websocketState.newResponseTextEl); // Reset variables websocketState = { - newResponseText: null, - newResponseElement: null, + newResponseTextEl: null, + newResponseEl: null, loadingEllipsis: null, references: {}, rawResponse: "", @@ -950,9 +948,9 @@ To get started, just start typing below. You can also type / to see a list of co websocketState.rawResponse = rawResponse; websocketState.references = references; } else if (chunk.type == "status") { - handleStreamResponse(websocketState.newResponseText, chunk.message, null, false); + handleStreamResponse(websocketState.newResponseTextEl, chunk.message, null, false); } else if (chunk.type == "rate_limit") { - handleStreamResponse(websocketState.newResponseText, chunk.message, websocketState.loadingEllipsis, true); + handleStreamResponse(websocketState.newResponseTextEl, chunk.message, websocketState.loadingEllipsis, true); } else { rawResponse = chunk.response; } @@ -961,21 +959,21 @@ To get started, just start typing below. You can also type / to see a list of co websocketState.rawResponse += chunk; } finally { if (chunk.type != "status" && chunk.type != "rate_limit") { - addMessageToChatBody(websocketState.rawResponse, websocketState.newResponseText, websocketState.references); + addMessageToChatBody(websocketState.rawResponse, websocketState.newResponseTextEl, websocketState.references); } } } else { // Handle streamed response of type text/event-stream or text/plain if (chunk && chunk.includes("### compiled references:")) { - ({ rawResponse, references } = handleCompiledReferences(websocketState.newResponseText, chunk, websocketState.references, websocketState.rawResponse)); + ({ rawResponse, references } = handleCompiledReferences(websocketState.newResponseTextEl, chunk, websocketState.references, websocketState.rawResponse)); websocketState.rawResponse = rawResponse; websocketState.references = references; } else { // If the chunk is not a JSON object, just display it as is websocketState.rawResponse += chunk; - if (websocketState.newResponseText) { - handleStreamResponse(websocketState.newResponseText, websocketState.rawResponse, websocketState.loadingEllipsis); + if (websocketState.newResponseTextEl) { + handleStreamResponse(websocketState.newResponseTextEl, websocketState.rawResponse, websocketState.loadingEllipsis); } } @@ -1024,19 +1022,19 @@ To get started, just start typing below. You can also type / to see a list of co autoResize(); document.getElementById("chat-input").setAttribute("disabled", "disabled"); - let newResponseElement = document.createElement("div"); - newResponseElement.classList.add("chat-message", "khoj"); - newResponseElement.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); - chatBody.appendChild(newResponseElement); + let newResponseEl = document.createElement("div"); + newResponseEl.classList.add("chat-message", "khoj"); + newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); + chatBody.appendChild(newResponseEl); - let newResponseText = document.createElement("div"); - newResponseText.classList.add("chat-message-text", "khoj"); - newResponseElement.appendChild(newResponseText); + let newResponseTextEl = document.createElement("div"); + newResponseTextEl.classList.add("chat-message-text", "khoj"); + newResponseEl.appendChild(newResponseTextEl); // Temporary status message to indicate that Khoj is thinking let loadingEllipsis = createLoadingEllipse(); - newResponseText.appendChild(loadingEllipsis); + newResponseTextEl.appendChild(loadingEllipsis); document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; let chatTooltip = document.getElementById("chat-tooltip"); @@ -1051,8 +1049,8 @@ To get started, just start typing below. You can also type / to see a list of co let references = {}; websocketState = { - newResponseText, - newResponseElement, + newResponseTextEl, + newResponseEl, loadingEllipsis, references, rawResponse,