sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-12-18 02:27:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 23

Render chat response as markdown while streaming on Web, Desktop clients

Browse source
This commit is contained in:
Debanjum Singh Solanky 2023-11-26 18:36:48 -08:00
parent 9e714d032b
commit 71f2d54258
2 changed files with 17 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/interface/desktop/chat.html
View file

@ -292,14 +292,13 @@
.then(response => { .then(response => {
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder(); const decoder = new TextDecoder();
let rawResponse = "";
let references = null; let references = null;
function readStream() { function readStream() {
reader.read().then(({ done, value }) => { reader.read().then(({ done, value }) => {
if (done) { if (done) {
// Evaluate the contents of new_response_text.innerHTML after all the data has been streamed // Append any references after all the data has been streamed
const currentHTML = newResponseText.innerHTML;
newResponseText.innerHTML = formatHTMLMessage(currentHTML);
newResponseText.appendChild(references); newResponseText.appendChild(references);
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
return; return;
@ -310,14 +309,15 @@
if (chunk.includes("### compiled references:")) { if (chunk.includes("### compiled references:")) {
const additionalResponse = chunk.split("### compiled references:")[0]; 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 rawReference = chunk.split("### compiled references:")[1];
const rawReferenceAsJson = JSON.parse(rawReference); const rawReferenceAsJson = JSON.parse(rawReference);
references = document.createElement('div'); references = document.createElement('div');
references.classList.add("references"); references.classList.add("references");
let referenceExpandButton = document.createElement('button'); let referenceExpandButton = document.createElement('button');
referenceExpandButton.classList.add("reference-expand-button"); referenceExpandButton.classList.add("reference-expand-button");
@ -362,7 +362,10 @@
newResponseText.removeChild(loadingSpinner); newResponseText.removeChild(loadingSpinner);
} }
newResponseText.innerHTML += chunk; rawResponse += chunk;
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse));
readStream(); readStream();
} }

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

@ -330,15 +330,13 @@ To get started, just start typing below. You can also type / to see a list of co
.then(response => { .then(response => {
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder(); const decoder = new TextDecoder();
let rawResponse = "";
let references = null; let references = null;
function readStream() { function readStream() {
reader.read().then(({ done, value }) => { reader.read().then(({ done, value }) => {
if (done) { if (done) {
// Evaluate the contents of new_response_text.innerHTML after all the data has been streamed // Append any references after all the data has been streamed
const currentHTML = newResponseText.innerHTML;
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(currentHTML));
if (references != null) { if (references != null) {
newResponseText.appendChild(references); 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:")) { if (chunk.includes("### compiled references:")) {
const additionalResponse = chunk.split("### compiled references:")[0]; 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 rawReference = chunk.split("### compiled references:")[1];
const rawReferenceAsJson = JSON.parse(rawReference); 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'); let referenceExpandButton = document.createElement('button');
referenceExpandButton.classList.add("reference-expand-button"); referenceExpandButton.classList.add("reference-expand-button");
let referenceSection = document.createElement('div'); let referenceSection = document.createElement('div');
referenceSection.classList.add("reference-section"); referenceSection.classList.add("reference-section");
referenceSection.classList.add("collapsed"); 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.removeChild(loadingSpinner);
} }
newResponseText.innerHTML += chunk; rawResponse += chunk;
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse));
readStream(); readStream();
} }