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

Suffix chat response element vars with "El" in chat.html of web, desktop apps

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-04-17 22:21:51 +05:30
parent 98d0ffecf1
commit 648f1a5c71
2 changed files with 41 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/interface/desktop/chat.html
View File

@@ -465,14 +465,14 @@
// Generate backend API URL to execute query // Generate backend API URL to execute query
let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&n=${resultsCount}&client=web&stream=true&conversation_id=${conversationID}&region=${region}&city=${city}&country=${countryName}`; let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&n=${resultsCount}&client=web&stream=true&conversation_id=${conversationID}&region=${region}&city=${city}&country=${countryName}`;
let new_response = document.createElement("div"); let newResponseEl = document.createElement("div");
new_response.classList.add("chat-message", "khoj"); newResponseEl.classList.add("chat-message", "khoj");
new_response.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
chat_body.appendChild(new_response); chat_body.appendChild(newResponseEl);
let newResponseText = document.createElement("div"); let newResponseTextEl = document.createElement("div");
newResponseText.classList.add("chat-message-text", "khoj"); newResponseTextEl.classList.add("chat-message-text", "khoj");
new_response.appendChild(newResponseText); newResponseEl.appendChild(newResponseTextEl);
// Temporary status message to indicate that Khoj is thinking // Temporary status message to indicate that Khoj is thinking
let loadingEllipsis = document.createElement("div"); let loadingEllipsis = document.createElement("div");
@@ -495,7 +495,7 @@
loadingEllipsis.appendChild(thirdEllipsis); loadingEllipsis.appendChild(thirdEllipsis);
loadingEllipsis.appendChild(fourthEllipsis); loadingEllipsis.appendChild(fourthEllipsis);
newResponseText.appendChild(loadingEllipsis); newResponseTextEl.appendChild(loadingEllipsis);
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
let chatTooltip = document.getElementById("chat-tooltip"); let chatTooltip = document.getElementById("chat-tooltip");
@@ -540,11 +540,11 @@
// If the chunk is not a JSON object, just display it as is // If the chunk is not a JSON object, just display it as is
rawResponse += chunk; rawResponse += chunk;
} finally { } finally {
newResponseText.innerHTML = ""; newResponseTextEl.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse)); newResponseTextEl.appendChild(formatHTMLMessage(rawResponse));
if (references != null) { if (references != null) {
newResponseText.appendChild(references); newResponseTextEl.appendChild(references);
} }
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
@@ -563,7 +563,7 @@
if (done) { if (done) {
// Append any references after all the data has been streamed // Append any references after all the data has been streamed
if (references != {}) { if (references != {}) {
newResponseText.appendChild(createReferenceSection(references)); newResponseTextEl.appendChild(createReferenceSection(references));
} }
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
document.getElementById("chat-input").removeAttribute("disabled"); document.getElementById("chat-input").removeAttribute("disabled");
@@ -576,8 +576,8 @@
if (chunk.includes("### compiled references:")) { if (chunk.includes("### compiled references:")) {
const additionalResponse = chunk.split("### compiled references:")[0]; const additionalResponse = chunk.split("### compiled references:")[0];
rawResponse += additionalResponse; rawResponse += additionalResponse;
newResponseText.innerHTML = ""; newResponseTextEl.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse)); newResponseTextEl.appendChild(formatHTMLMessage(rawResponse));
const rawReference = chunk.split("### compiled references:")[1]; const rawReference = chunk.split("### compiled references:")[1];
const rawReferenceAsJson = JSON.parse(rawReference); const rawReferenceAsJson = JSON.parse(rawReference);
@@ -589,14 +589,14 @@
readStream(); readStream();
} else { } else {
// Display response from Khoj // Display response from Khoj
if (newResponseText.getElementsByClassName("lds-ellipsis").length > 0) { if (newResponseTextEl.getElementsByClassName("lds-ellipsis").length > 0) {
newResponseText.removeChild(loadingEllipsis); newResponseTextEl.removeChild(loadingEllipsis);
} }
// If the chunk is not a JSON object, just display it as is // If the chunk is not a JSON object, just display it as is
rawResponse += chunk; rawResponse += chunk;
newResponseText.innerHTML = ""; newResponseTextEl.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse)); newResponseTextEl.appendChild(formatHTMLMessage(rawResponse));
readStream(); readStream();
} }

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

@@ -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 waitingForLocation = true;
let websocketState = { let websocketState = {
newResponseText: null, newResponseTextEl: null,
newResponseElement: null, newResponseEl: null,
loadingEllipsis: null, loadingEllipsis: null,
references: {}, references: {},
rawResponse: "", 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() { async function chat() {
// Extract required fields for search from form
if (websocket) { if (websocket) {
sendMessageViaWebSocket(); sendMessageViaWebSocket();
return; return;
@@ -899,8 +897,8 @@ To get started, just start typing below. You can also type / to see a list of co
} }
websocketState = { websocketState = {
newResponseText: null, newResponseTextEl: null,
newResponseElement: null, newResponseEl: null,
loadingEllipsis: null, loadingEllipsis: null,
references: {}, references: {},
rawResponse: "", 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") { } else if(chunk == "end_llm_response") {
console.log("Stopped streaming", new Date()); console.log("Stopped streaming", new Date());
// Append any references after all the data has been streamed // Append any references after all the data has been streamed
finalizeChatBodyResponse(websocketState.references, websocketState.newResponseText); finalizeChatBodyResponse(websocketState.references, websocketState.newResponseTextEl);
// Reset variables // Reset variables
websocketState = { websocketState = {
newResponseText: null, newResponseTextEl: null,
newResponseElement: null, newResponseEl: null,
loadingEllipsis: null, loadingEllipsis: null,
references: {}, references: {},
rawResponse: "", 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.rawResponse = rawResponse;
websocketState.references = references; websocketState.references = references;
} else if (chunk.type == "status") { } 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") { } else if (chunk.type == "rate_limit") {
handleStreamResponse(websocketState.newResponseText, chunk.message, websocketState.loadingEllipsis, true); handleStreamResponse(websocketState.newResponseTextEl, chunk.message, websocketState.loadingEllipsis, true);
} else { } else {
rawResponse = chunk.response; 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; websocketState.rawResponse += chunk;
} finally { } finally {
if (chunk.type != "status" && chunk.type != "rate_limit") { if (chunk.type != "status" && chunk.type != "rate_limit") {
addMessageToChatBody(websocketState.rawResponse, websocketState.newResponseText, websocketState.references); addMessageToChatBody(websocketState.rawResponse, websocketState.newResponseTextEl, websocketState.references);
} }
} }
} else { } else {
// Handle streamed response of type text/event-stream or text/plain // Handle streamed response of type text/event-stream or text/plain
if (chunk && chunk.includes("### compiled references:")) { 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.rawResponse = rawResponse;
websocketState.references = references; websocketState.references = references;
} else { } else {
// If the chunk is not a JSON object, just display it as is // If the chunk is not a JSON object, just display it as is
websocketState.rawResponse += chunk; websocketState.rawResponse += chunk;
if (websocketState.newResponseText) { if (websocketState.newResponseTextEl) {
handleStreamResponse(websocketState.newResponseText, websocketState.rawResponse, websocketState.loadingEllipsis); 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(); autoResize();
document.getElementById("chat-input").setAttribute("disabled", "disabled"); document.getElementById("chat-input").setAttribute("disabled", "disabled");
let newResponseElement = document.createElement("div"); let newResponseEl = document.createElement("div");
newResponseElement.classList.add("chat-message", "khoj"); newResponseEl.classList.add("chat-message", "khoj");
newResponseElement.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
chatBody.appendChild(newResponseElement); chatBody.appendChild(newResponseEl);
let newResponseText = document.createElement("div"); let newResponseTextEl = document.createElement("div");
newResponseText.classList.add("chat-message-text", "khoj"); newResponseTextEl.classList.add("chat-message-text", "khoj");
newResponseElement.appendChild(newResponseText); newResponseEl.appendChild(newResponseTextEl);
// Temporary status message to indicate that Khoj is thinking // Temporary status message to indicate that Khoj is thinking
let loadingEllipsis = createLoadingEllipse(); let loadingEllipsis = createLoadingEllipse();
newResponseText.appendChild(loadingEllipsis); newResponseTextEl.appendChild(loadingEllipsis);
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
let chatTooltip = document.getElementById("chat-tooltip"); 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 = {}; let references = {};
websocketState = { websocketState = {
newResponseText, newResponseTextEl,
newResponseElement, newResponseEl,
loadingEllipsis, loadingEllipsis,
references, references,
rawResponse, rawResponse,