From 804c04f7b909139a2e715deb75b5bc9c67a7b2d8 Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Wed, 10 Apr 2024 14:46:38 +0530 Subject: [PATCH] Do not render copy message button on every Khoj thinking step Only render copy chat message button once, after message text is rendered --- src/interface/desktop/chat.html | 44 ++++++++++++++++------------- src/khoj/interface/web/chat.html | 48 +++++++++++++++++--------------- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index 521d2e0c..92554e13 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -300,7 +300,7 @@ renderMessage(message, by, dt, references); } - function formatHTMLMessage(htmlMessage, raw=false) { + function formatHTMLMessage(htmlMessage, raw=false, willReplace=true) { var md = window.markdownit(); let newHTML = htmlMessage; @@ -326,20 +326,22 @@ element.className = "chat-message-text-response"; // Add a copy button to each chat message - let copyButton = document.createElement('button'); - copyButton.classList.add("copy-button"); - copyButton.title = "Copy Message"; - let copyIcon = document.createElement("img"); - copyIcon.src = "./assets/icons/copy-button.svg"; - copyIcon.classList.add("copy-icon"); - copyButton.appendChild(copyIcon); - copyButton.addEventListener('click', copyParentText); - element.append(copyButton); + if (willReplace === true) { + let copyButton = document.createElement('button'); + copyButton.classList.add("copy-button"); + copyButton.title = "Copy Message"; + let copyIcon = document.createElement("img"); + copyIcon.src = "./assets/icons/copy-button.svg"; + copyIcon.classList.add("copy-icon"); + copyButton.appendChild(copyIcon); + copyButton.addEventListener('click', copyParentText); + element.append(copyButton); + } // Get any elements with a class that starts with "language" let codeBlockElements = element.querySelectorAll('[class^="language-"]'); // For each element, add a parent div with the class "programmatic-output" - codeBlockElements.forEach((codeElement) => { + codeBlockElements.forEach((codeElement, key) => { // Create the parent div let parentDiv = document.createElement('div'); parentDiv.classList.add("programmatic-output"); @@ -348,15 +350,17 @@ // Move the code element into the parent div parentDiv.appendChild(codeElement); // Add a copy button to each element - let copyButton = document.createElement('button'); - copyButton.classList.add("copy-button"); - copyButton.title = "Copy Code"; - let copyIcon = document.createElement("img"); - copyIcon.src = "./assets/icons/copy-button.svg"; - copyIcon.classList.add("copy-icon"); - copyButton.appendChild(copyIcon); - copyButton.addEventListener('click', copyParentText); - codeElement.prepend(copyButton); + if (willReplace === true) { + let copyButton = document.createElement('button'); + copyButton.classList.add("copy-button"); + copyButton.title = "Copy Code"; + let copyIcon = document.createElement("img"); + copyIcon.src = "./assets/icons/copy-button.svg"; + copyIcon.classList.add("copy-icon"); + copyButton.appendChild(copyIcon); + copyButton.addEventListener('click', copyParentText); + codeElement.prepend(copyButton); + } }); // Get all code elements that have no class. diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index d56f6c9a..f71a80e4 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -327,7 +327,7 @@ To get started, just start typing below. You can also type / to see a list of co renderMessage(message, by, dt, references); } - function formatHTMLMessage(htmlMessage, raw=false) { + function formatHTMLMessage(htmlMessage, raw=false, willReplace=true) { var md = window.markdownit(); let newHTML = htmlMessage; @@ -352,16 +352,18 @@ To get started, just start typing below. You can also type / to see a list of co element.innerHTML = newHTML; element.className = "chat-message-text-response"; - // Add a copy button to each chat message - let copyButton = document.createElement('button'); - copyButton.classList.add("copy-button"); - copyButton.title = "Copy Message"; - let copyIcon = document.createElement("img"); - copyIcon.src = "/static/assets/icons/copy-button.svg"; - copyIcon.classList.add("copy-icon"); - copyButton.appendChild(copyIcon); - copyButton.addEventListener('click', copyParentText); - element.append(copyButton); + // Add a copy button to each chat message, if it doesn't already exist + if (willReplace === true) { + let copyButton = document.createElement('button'); + copyButton.classList.add("copy-button"); + copyButton.title = "Copy Message"; + let copyIcon = document.createElement("img"); + copyIcon.src = "/static/assets/icons/copy-button.svg"; + copyIcon.classList.add("copy-icon"); + copyButton.appendChild(copyIcon); + copyButton.addEventListener('click', copyParentText); + element.append(copyButton); + } // Get any elements with a class that starts with "language" let codeBlockElements = element.querySelectorAll('[class^="language-"]'); @@ -374,16 +376,18 @@ To get started, just start typing below. You can also type / to see a list of co codeElement.parentNode.insertBefore(parentDiv, codeElement); // Move the code element into the parent div parentDiv.appendChild(codeElement); - // Add a copy button to each element - let copyButton = document.createElement('button'); - copyButton.classList.add("copy-button"); - copyButton.title = "Copy Code"; - let copyIcon = document.createElement("img"); - copyIcon.src = "/static/assets/icons/copy-button.svg"; - copyIcon.classList.add("copy-icon"); - copyButton.appendChild(copyIcon); - copyButton.addEventListener('click', copyParentText); - codeElement.prepend(copyButton); + // Add a copy button to each code block, if it doesn't already exist + if (willReplace === true) { + let copyButton = document.createElement('button'); + copyButton.classList.add("copy-button"); + copyButton.title = "Copy Code"; + let copyIcon = document.createElement("img"); + copyIcon.src = "/static/assets/icons/copy-button.svg"; + copyIcon.classList.add("copy-icon"); + copyButton.appendChild(copyIcon); + copyButton.addEventListener('click', copyParentText); + codeElement.prepend(copyButton); + } }); // Get all code elements that have no class. @@ -589,7 +593,7 @@ To get started, just start typing below. You can also type / to see a list of co if (replace) { newResponseElement.innerHTML = ""; } - newResponseElement.appendChild(formatHTMLMessage(rawResponse)); + newResponseElement.appendChild(formatHTMLMessage(rawResponse, false, replace)); document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; }