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

Do not render copy message button on every Khoj thinking step

Browse Source 
Only render copy chat message button once, after message text is rendered
This commit is contained in:
Debanjum Singh Solanky
2024-04-10 14:46:38 +05:30
parent cadeaac769
commit 804c04f7b9
2 changed files with 50 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -300,7 +300,7 @@
renderMessage(message, by, dt, references); renderMessage(message, by, dt, references);
} }
function formatHTMLMessage(htmlMessage, raw=false) { function formatHTMLMessage(htmlMessage, raw=false, willReplace=true) {
var md = window.markdownit(); var md = window.markdownit();
let newHTML = htmlMessage; let newHTML = htmlMessage;
@@ -326,20 +326,22 @@
element.className = "chat-message-text-response"; element.className = "chat-message-text-response";
// Add a copy button to each chat message // Add a copy button to each chat message
let copyButton = document.createElement('button'); if (willReplace === true) {
copyButton.classList.add("copy-button"); let copyButton = document.createElement('button');
copyButton.title = "Copy Message"; copyButton.classList.add("copy-button");
let copyIcon = document.createElement("img"); copyButton.title = "Copy Message";
copyIcon.src = "./assets/icons/copy-button.svg"; let copyIcon = document.createElement("img");
copyIcon.classList.add("copy-icon"); copyIcon.src = "./assets/icons/copy-button.svg";
copyButton.appendChild(copyIcon); copyIcon.classList.add("copy-icon");
copyButton.addEventListener('click', copyParentText); copyButton.appendChild(copyIcon);
element.append(copyButton); copyButton.addEventListener('click', copyParentText);
element.append(copyButton);
}
// Get any elements with a class that starts with "language" // Get any elements with a class that starts with "language"
let codeBlockElements = element.querySelectorAll('[class^="language-"]'); let codeBlockElements = element.querySelectorAll('[class^="language-"]');
// For each element, add a parent div with the class "programmatic-output" // For each element, add a parent div with the class "programmatic-output"
codeBlockElements.forEach((codeElement) => { codeBlockElements.forEach((codeElement, key) => {
// Create the parent div // Create the parent div
let parentDiv = document.createElement('div'); let parentDiv = document.createElement('div');
parentDiv.classList.add("programmatic-output"); parentDiv.classList.add("programmatic-output");
@@ -348,15 +350,17 @@
// Move the code element into the parent div // Move the code element into the parent div
parentDiv.appendChild(codeElement); parentDiv.appendChild(codeElement);
// Add a copy button to each element // Add a copy button to each element
let copyButton = document.createElement('button'); if (willReplace === true) {
copyButton.classList.add("copy-button"); let copyButton = document.createElement('button');
copyButton.title = "Copy Code"; copyButton.classList.add("copy-button");
let copyIcon = document.createElement("img"); copyButton.title = "Copy Code";
copyIcon.src = "./assets/icons/copy-button.svg"; let copyIcon = document.createElement("img");
copyIcon.classList.add("copy-icon"); copyIcon.src = "./assets/icons/copy-button.svg";
copyButton.appendChild(copyIcon); copyIcon.classList.add("copy-icon");
copyButton.addEventListener('click', copyParentText); copyButton.appendChild(copyIcon);
codeElement.prepend(copyButton); copyButton.addEventListener('click', copyParentText);
codeElement.prepend(copyButton);
}
}); });
// Get all code elements that have no class. // Get all code elements that have no class.

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

@@ -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); renderMessage(message, by, dt, references);
} }
function formatHTMLMessage(htmlMessage, raw=false) { function formatHTMLMessage(htmlMessage, raw=false, willReplace=true) {
var md = window.markdownit(); var md = window.markdownit();
let newHTML = htmlMessage; 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.innerHTML = newHTML;
element.className = "chat-message-text-response"; element.className = "chat-message-text-response";
// Add a copy button to each chat message // Add a copy button to each chat message, if it doesn't already exist
let copyButton = document.createElement('button'); if (willReplace === true) {
copyButton.classList.add("copy-button"); let copyButton = document.createElement('button');
copyButton.title = "Copy Message"; copyButton.classList.add("copy-button");
let copyIcon = document.createElement("img"); copyButton.title = "Copy Message";
copyIcon.src = "/static/assets/icons/copy-button.svg"; let copyIcon = document.createElement("img");
copyIcon.classList.add("copy-icon"); copyIcon.src = "/static/assets/icons/copy-button.svg";
copyButton.appendChild(copyIcon); copyIcon.classList.add("copy-icon");
copyButton.addEventListener('click', copyParentText); copyButton.appendChild(copyIcon);
element.append(copyButton); copyButton.addEventListener('click', copyParentText);
element.append(copyButton);
}
// Get any elements with a class that starts with "language" // Get any elements with a class that starts with "language"
let codeBlockElements = element.querySelectorAll('[class^="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); codeElement.parentNode.insertBefore(parentDiv, codeElement);
// Move the code element into the parent div // Move the code element into the parent div
parentDiv.appendChild(codeElement); parentDiv.appendChild(codeElement);
// Add a copy button to each element // Add a copy button to each code block, if it doesn't already exist
let copyButton = document.createElement('button'); if (willReplace === true) {
copyButton.classList.add("copy-button"); let copyButton = document.createElement('button');
copyButton.title = "Copy Code"; copyButton.classList.add("copy-button");
let copyIcon = document.createElement("img"); copyButton.title = "Copy Code";
copyIcon.src = "/static/assets/icons/copy-button.svg"; let copyIcon = document.createElement("img");
copyIcon.classList.add("copy-icon"); copyIcon.src = "/static/assets/icons/copy-button.svg";
copyButton.appendChild(copyIcon); copyIcon.classList.add("copy-icon");
copyButton.addEventListener('click', copyParentText); copyButton.appendChild(copyIcon);
codeElement.prepend(copyButton); copyButton.addEventListener('click', copyParentText);
codeElement.prepend(copyButton);
}
}); });
// Get all code elements that have no class. // 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) { if (replace) {
newResponseElement.innerHTML = ""; newResponseElement.innerHTML = "";
} }
newResponseElement.appendChild(formatHTMLMessage(rawResponse)); newResponseElement.appendChild(formatHTMLMessage(rawResponse, false, replace));
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight; document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
} }