From 71f2d542583591cea347788d25a5594405a2b1f2 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Sun, 26 Nov 2023 18:36:48 -0800 Subject: [PATCH] Render chat response as markdown while streaming on Web, Desktop clients --- src/interface/desktop/chat.html | 15 +++++++++------ src/khoj/interface/web/chat.html | 15 ++++++++------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index ae17c637..34f78951 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -292,14 +292,13 @@ .then(response => { const reader = response.body.getReader(); const decoder = new TextDecoder(); + let rawResponse = ""; let references = null; function readStream() { reader.read().then(({ done, value }) => { if (done) { - // Evaluate the contents of new_response_text.innerHTML after all the data has been streamed - const currentHTML = newResponseText.innerHTML; - newResponseText.innerHTML = formatHTMLMessage(currentHTML); + // Append any references after all the data has been streamed newResponseText.appendChild(references); document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; return; @@ -310,14 +309,15 @@ if (chunk.includes("### compiled references:")) { const additionalResponse = chunk.split("### compiled references:")[0]; - newResponseText.innerHTML += additionalResponse; + rawResponse += additionalResponse; + newResponseText.innerHTML = ""; + newResponseText.appendChild(formatHTMLMessage(rawResponse)); const rawReference = chunk.split("### compiled references:")[1]; const rawReferenceAsJson = JSON.parse(rawReference); references = document.createElement('div'); references.classList.add("references"); - let referenceExpandButton = document.createElement('button'); referenceExpandButton.classList.add("reference-expand-button"); @@ -362,7 +362,10 @@ newResponseText.removeChild(loadingSpinner); } - newResponseText.innerHTML += chunk; + rawResponse += chunk; + newResponseText.innerHTML = ""; + newResponseText.appendChild(formatHTMLMessage(rawResponse)); + readStream(); } diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index 256193a7..f62af230 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -330,15 +330,13 @@ To get started, just start typing below. You can also type / to see a list of co .then(response => { const reader = response.body.getReader(); const decoder = new TextDecoder(); + let rawResponse = ""; let references = null; function readStream() { reader.read().then(({ done, value }) => { if (done) { - // Evaluate the contents of new_response_text.innerHTML after all the data has been streamed - const currentHTML = newResponseText.innerHTML; - newResponseText.innerHTML = ""; - newResponseText.appendChild(formatHTMLMessage(currentHTML)); + // Append any references after all the data has been streamed if (references != null) { newResponseText.appendChild(references); } @@ -352,7 +350,9 @@ To get started, just start typing below. You can also type / to see a list of co if (chunk.includes("### compiled references:")) { const additionalResponse = chunk.split("### compiled references:")[0]; - newResponseText.innerHTML += additionalResponse; + rawResponse += additionalResponse; + newResponseText.innerHTML = ""; + newResponseText.appendChild(formatHTMLMessage(rawResponse)); const rawReference = chunk.split("### compiled references:")[1]; const rawReferenceAsJson = JSON.parse(rawReference); @@ -362,7 +362,6 @@ To get started, just start typing below. You can also type / to see a list of co let referenceExpandButton = document.createElement('button'); referenceExpandButton.classList.add("reference-expand-button"); - let referenceSection = document.createElement('div'); referenceSection.classList.add("reference-section"); referenceSection.classList.add("collapsed"); @@ -403,7 +402,9 @@ To get started, just start typing below. You can also type / to see a list of co newResponseText.removeChild(loadingSpinner); } - newResponseText.innerHTML += chunk; + rawResponse += chunk; + newResponseText.innerHTML = ""; + newResponseText.appendChild(formatHTMLMessage(rawResponse)); readStream(); }