From a7e00898cbd539522073fd3a1d27c19f30355a99 Mon Sep 17 00:00:00 2001 From: sabaimran Date: Fri, 17 Nov 2023 16:41:28 -0800 Subject: [PATCH] Fix rendering even when no online context references are returned --- src/interface/desktop/chat.html | 104 +++++++++++++++++++++++++++++-- src/khoj/interface/web/chat.html | 2 +- 2 files changed, 100 insertions(+), 6 deletions(-) diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index 09bc6ff7..ad4a2c49 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -60,6 +60,52 @@ return referenceButton; } + function generateOnlineReference(reference, index) { + + // Generate HTML for Chat Reference + let title = reference.title; + let link = reference.link; + let snippet = reference.snippet; + let question = reference.question; + if (question) { + question = `Question: ${question}

`; + } else { + question = ""; + } + + let linkElement = document.createElement('a'); + linkElement.setAttribute('href', link); + linkElement.setAttribute('target', '_blank'); + linkElement.setAttribute('rel', 'noopener noreferrer'); + linkElement.classList.add("inline-chat-link"); + linkElement.classList.add("reference-link"); + linkElement.setAttribute('title', title); + linkElement.innerHTML = title; + + let referenceButton = document.createElement('button'); + referenceButton.innerHTML = linkElement.outerHTML; + referenceButton.id = `ref-${index}`; + referenceButton.classList.add("reference-button"); + referenceButton.classList.add("collapsed"); + referenceButton.tabIndex = 0; + + // Add event listener to toggle full reference on click + referenceButton.addEventListener('click', function() { + console.log(`Toggling ref-${index}`) + if (this.classList.contains("collapsed")) { + this.classList.remove("collapsed"); + this.classList.add("expanded"); + this.innerHTML = linkElement.outerHTML + `

${question + snippet}`; + } else { + this.classList.add("collapsed"); + this.classList.remove("expanded"); + this.innerHTML = linkElement.outerHTML; + } + }); + + return referenceButton; + } + function renderMessage(message, by, dt=null, annotations=null) { let message_time = formatDate(dt ?? new Date()); let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You"; @@ -89,8 +135,45 @@ chatBody.scrollTop = chatBody.scrollHeight; } - function renderMessageWithReference(message, by, context=null, dt=null) { - if (context == null || context.length == 0) { + function processOnlineReferences(referenceSection, onlineContext) { + let numOnlineReferences = 0; + if (onlineContext.organic && onlineContext.organic.length > 0) { + numOnlineReferences += onlineContext.organic.length; + for (let index in onlineContext.organic) { + let reference = onlineContext.organic[index]; + let polishedReference = generateOnlineReference(reference, index); + referenceSection.appendChild(polishedReference); + } + } + + if (onlineContext.knowledgeGraph && onlineContext.knowledgeGraph.length > 0) { + numOnlineReferences += onlineContext.knowledgeGraph.length; + for (let index in onlineContext.knowledgeGraph) { + let reference = onlineContext.knowledgeGraph[index]; + let polishedReference = generateOnlineReference(reference, index); + referenceSection.appendChild(polishedReference); + } + } + + if (onlineContext.peopleAlsoAsk && onlineContext.peopleAlsoAsk.length > 0) { + numOnlineReferences += onlineContext.peopleAlsoAsk.length; + for (let index in onlineContext.peopleAlsoAsk) { + let reference = onlineContext.peopleAlsoAsk[index]; + let polishedReference = generateOnlineReference(reference, index); + referenceSection.appendChild(polishedReference); + } + } + + return numOnlineReferences; + } + + function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null) { + if (context == null && onlineContext == null) { + renderMessage(message, by, dt); + return; + } + + if ((context && context.length == 0) && (onlineContext == null || (onlineContext && Object.keys(onlineContext).length == 0))) { renderMessage(message, by, dt); return; } @@ -99,8 +182,11 @@ let referenceExpandButton = document.createElement('button'); referenceExpandButton.classList.add("reference-expand-button"); - let expandButtonText = context.length == 1 ? "1 reference" : `${context.length} references`; - referenceExpandButton.innerHTML = expandButtonText; + let numReferences = 0; + + if (context) { + numReferences += context.length; + } references.appendChild(referenceExpandButton); @@ -126,6 +212,14 @@ referenceSection.appendChild(polishedReference); } } + + if (onlineContext) { + numReferences += processOnlineReferences(referenceSection, onlineContext); + } + + let expandButtonText = numReferences == 1 ? "1 reference" : `${numReferences} references`; + referenceExpandButton.innerHTML = expandButtonText; + references.appendChild(referenceSection); renderMessage(message, by, dt, references); @@ -352,7 +446,7 @@ .then(response => { // Render conversation history, if any response.forEach(chat_log => { - renderMessageWithReference(chat_log.message, chat_log.by, chat_log.context, new Date(chat_log.created)); + renderMessageWithReference(chat_log.message, chat_log.by, chat_log.context, new Date(chat_log.created), chat_log.onlineContext); }); }) .catch(err => { diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index 4f2b89c8..bc75d6c2 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -183,7 +183,7 @@ To get started, just start typing below. You can also type / to see a list of co return; } - if ((context && context.length == 0) && (onlineContext == null || (onlineContext && onlineContext.organic.length == 0 && onlineContext.knowledgeGraph.length == 0 && onlineContext.peopleAlsoAsk.length == 0))) { + if ((context && context.length == 0) && (onlineContext == null || (onlineContext && Object.keys(onlineContext).length == 0))) { renderMessage(message, by, dt); return; }