mirror of
https://github.com/khoj-ai/khoj.git
synced 2024-11-27 09:25:06 +01:00
Add OS Level Shortcut Window for Quick Access to Khoj Desktop (#815)
* rough sketch of desktop shortcuts. many bugs to fix still * working MVP of desktop shortcut khoj * UI fixes * UI improvements for editable shortcut message * major rendering fix to prevent clipboard text from getting lost * UI improvements and bug fixes * UI upgrades: custom top bar, edit sent message and color matching * removed debug javascript file * font reverted to Noto Sans * cleaning up the code and removing diffs * UX fixes * cleaning up unused methods from html * front end for button to send user back to main window to continue conversation * UX fix for window and continue conversation support added * migrated common js functions into chatutils.js * Fix window closing issue in macos by 1. Use a helper function to determine if the window is open by seeing if there's a browser window with shortcut.html loaded 2. Use the event listener on the window to handle teardown * removed extra comment and renamed continue convo button --------- Co-authored-by: sabaimran <narmiabas@gmail.com>
This commit is contained in:
Raghav Tirumale
GitHub
parent
870d9ecdbf
commit
24a0d8b073
5 changed files with 981 additions and 351 deletions
|
|
@ -13,7 +13,7 @@
|
|||
<link rel="stylesheet" href="https://assets.khoj.dev/higlightjs/solarized-dark.min.css">
|
||||
<script src="https://assets.khoj.dev/higlightjs/highlight.min.js"></script>
|
||||
<script src="./utils.js"></script>
|
||||
|
||||
<script src="chatutils.js"></script>
|
||||
<script>
|
||||
let chatOptions = [];
|
||||
function createCopyParentText(message) {
|
||||
|
|
@ -58,352 +58,6 @@
|
|||
return;
|
||||
});
|
||||
|
||||
function formatDate(date) {
|
||||
// Format date in HH:MM, DD MMM YYYY format
|
||||
let time_string = date.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: false });
|
||||
let date_string = date.toLocaleString('en-IN', { year: 'numeric', month: 'short', day: '2-digit'}).replaceAll('-', ' ');
|
||||
return `${time_string}, ${date_string}`;
|
||||
}
|
||||
|
||||
function generateReference(referenceJson, index) {
|
||||
let reference = referenceJson.hasOwnProperty("compiled") ? referenceJson.compiled : referenceJson;
|
||||
let referenceFile = referenceJson.hasOwnProperty("file") ? referenceJson.file : null;
|
||||
|
||||
// Escape reference for HTML rendering
|
||||
let escaped_ref = reference.replaceAll('"', '"');
|
||||
|
||||
// Generate HTML for Chat Reference
|
||||
let short_ref = escaped_ref.slice(0, 100);
|
||||
short_ref = short_ref.length < escaped_ref.length ? short_ref + "..." : short_ref;
|
||||
let referenceButton = document.createElement('button');
|
||||
referenceButton.textContent = short_ref;
|
||||
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() {
|
||||
if (this.classList.contains("collapsed")) {
|
||||
this.classList.remove("collapsed");
|
||||
this.classList.add("expanded");
|
||||
this.textContent = escaped_ref;
|
||||
} else {
|
||||
this.classList.add("collapsed");
|
||||
this.classList.remove("expanded");
|
||||
this.textContent = short_ref;
|
||||
}
|
||||
});
|
||||
|
||||
return referenceButton;
|
||||
}
|
||||
|
||||
function generateOnlineReference(reference, index) {
|
||||
|
||||
// Generate HTML for Chat Reference
|
||||
let title = reference.title || reference.link;
|
||||
let link = reference.link;
|
||||
let snippet = reference.snippet;
|
||||
let question = reference.question;
|
||||
if (question) {
|
||||
question = `<b>Question:</b> ${question}<br><br>`;
|
||||
} 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.textContent = 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() {
|
||||
if (this.classList.contains("collapsed")) {
|
||||
this.classList.remove("collapsed");
|
||||
this.classList.add("expanded");
|
||||
this.innerHTML = linkElement.outerHTML + `<br><br>${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, raw=false, renderType="append") {
|
||||
let message_time = formatDate(dt ?? new Date());
|
||||
let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
|
||||
let formattedMessage = formatHTMLMessage(message, raw);
|
||||
|
||||
// Create a new div for the chat message
|
||||
let chatMessage = document.createElement('div');
|
||||
chatMessage.className = `chat-message ${by}`;
|
||||
chatMessage.dataset.meta = `${by_name} at ${message_time}`;
|
||||
|
||||
// Create a new div for the chat message text and append it to the chat message
|
||||
let chatMessageText = document.createElement('div');
|
||||
chatMessageText.className = `chat-message-text ${by}`;
|
||||
chatMessageText.appendChild(formattedMessage);
|
||||
chatMessage.appendChild(chatMessageText);
|
||||
|
||||
// Append annotations div to the chat message
|
||||
if (annotations) {
|
||||
chatMessageText.appendChild(annotations);
|
||||
}
|
||||
|
||||
// Append chat message div to chat body
|
||||
let chatBody = document.getElementById("chat-body");
|
||||
if (renderType === "append") {
|
||||
chatBody.appendChild(chatMessage);
|
||||
// Scroll to bottom of chat-body element
|
||||
chatBody.scrollTop = chatBody.scrollHeight;
|
||||
} else if (renderType === "prepend") {
|
||||
chatBody.insertBefore(chatMessage, chatBody.firstChild);
|
||||
} else if (renderType === "return") {
|
||||
return chatMessage;
|
||||
}
|
||||
|
||||
let chatBodyWrapper = document.getElementById("chat-body-wrapper");
|
||||
chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
|
||||
}
|
||||
|
||||
function processOnlineReferences(referenceSection, onlineContext) {
|
||||
let numOnlineReferences = 0;
|
||||
for (let subquery in onlineContext) {
|
||||
let onlineReference = onlineContext[subquery];
|
||||
if (onlineReference.organic && onlineReference.organic.length > 0) {
|
||||
numOnlineReferences += onlineReference.organic.length;
|
||||
for (let index in onlineReference.organic) {
|
||||
let reference = onlineReference.organic[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
|
||||
if (onlineReference.knowledgeGraph && onlineReference.knowledgeGraph.length > 0) {
|
||||
numOnlineReferences += onlineReference.knowledgeGraph.length;
|
||||
for (let index in onlineReference.knowledgeGraph) {
|
||||
let reference = onlineReference.knowledgeGraph[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
|
||||
if (onlineReference.peopleAlsoAsk && onlineReference.peopleAlsoAsk.length > 0) {
|
||||
numOnlineReferences += onlineReference.peopleAlsoAsk.length;
|
||||
for (let index in onlineReference.peopleAlsoAsk) {
|
||||
let reference = onlineReference.peopleAlsoAsk[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
|
||||
if (onlineReference.webpages && onlineReference.webpages.length > 0) {
|
||||
numOnlineReferences += onlineReference.webpages.length;
|
||||
for (let index in onlineReference.webpages) {
|
||||
let reference = onlineReference.webpages[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return numOnlineReferences;
|
||||
}
|
||||
|
||||
function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null, intentType=null, inferredQueries=null) {
|
||||
let chatEl;
|
||||
if (intentType?.includes("text-to-image")) {
|
||||
let imageMarkdown = generateImageMarkdown(message, intentType, inferredQueries);
|
||||
chatEl = renderMessage(imageMarkdown, by, dt, null, false, "return");
|
||||
} else {
|
||||
chatEl = renderMessage(message, by, dt, null, false, "return");
|
||||
}
|
||||
|
||||
// If no document or online context is provided, render the message as is
|
||||
if ((context == null || context?.length == 0)
|
||||
&& (onlineContext == null || (onlineContext && Object.keys(onlineContext).length == 0))) {
|
||||
return chatEl;
|
||||
}
|
||||
|
||||
// If document or online context is provided, render the message with its references
|
||||
let references = {};
|
||||
if (!!context) references["notes"] = context;
|
||||
if (!!onlineContext) references["online"] = onlineContext;
|
||||
let chatMessageEl = chatEl.getElementsByClassName("chat-message-text")[0];
|
||||
chatMessageEl.appendChild(createReferenceSection(references));
|
||||
|
||||
return chatEl;
|
||||
}
|
||||
|
||||
function generateImageMarkdown(message, intentType, inferredQueries=null) {
|
||||
let imageMarkdown;
|
||||
if (intentType === "text-to-image") {
|
||||
imageMarkdown = ``;
|
||||
} else if (intentType === "text-to-image2") {
|
||||
imageMarkdown = ``;
|
||||
} else if (intentType === "text-to-image-v3") {
|
||||
imageMarkdown = ``;
|
||||
}
|
||||
const inferredQuery = inferredQueries?.[0];
|
||||
if (inferredQuery) {
|
||||
imageMarkdown += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
|
||||
}
|
||||
return imageMarkdown;
|
||||
}
|
||||
|
||||
function formatHTMLMessage(message, raw=false, willReplace=true) {
|
||||
var md = window.markdownit();
|
||||
let newHTML = message;
|
||||
|
||||
// Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
|
||||
newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
|
||||
|
||||
// Customize the rendering of images
|
||||
md.renderer.rules.image = function(tokens, idx, options, env, self) {
|
||||
let token = tokens[idx];
|
||||
|
||||
// Add class="text-to-image" to images
|
||||
token.attrPush(['class', 'text-to-image']);
|
||||
|
||||
// Use the default renderer to render image markdown format
|
||||
return self.renderToken(tokens, idx, options);
|
||||
};
|
||||
|
||||
// Render markdown
|
||||
newHTML = raw ? newHTML : md.render(newHTML);
|
||||
// Sanitize the rendered markdown
|
||||
newHTML = DOMPurify.sanitize(newHTML);
|
||||
// Set rendered markdown to HTML DOM element
|
||||
let element = document.createElement('div');
|
||||
element.innerHTML = newHTML;
|
||||
element.className = "chat-message-text-response";
|
||||
|
||||
// Add a copy button to each chat message
|
||||
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', createCopyParentText(message));
|
||||
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, key) => {
|
||||
// Create the parent div
|
||||
let parentDiv = document.createElement('div');
|
||||
parentDiv.classList.add("programmatic-output");
|
||||
// Add the parent div before the code element
|
||||
codeElement.parentNode.insertBefore(parentDiv, codeElement);
|
||||
// Move the code element into the parent div
|
||||
parentDiv.appendChild(codeElement);
|
||||
|
||||
// Check if hijs has been loaded
|
||||
if (typeof hljs !== 'undefined') {
|
||||
// Highlight the code block
|
||||
hljs.highlightBlock(codeElement);
|
||||
}
|
||||
|
||||
// Add a copy button to each element
|
||||
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.
|
||||
let codeElements = element.querySelectorAll('code:not([class])');
|
||||
codeElements.forEach((codeElement) => {
|
||||
// Add the class "chat-response" to each element
|
||||
codeElement.classList.add("chat-response");
|
||||
});
|
||||
|
||||
let anchorElements = element.querySelectorAll('a');
|
||||
anchorElements.forEach((anchorElement) => {
|
||||
// Tag external links to open in separate window
|
||||
if (
|
||||
!anchorElement.href.startsWith("./") &&
|
||||
!anchorElement.href.startsWith("#") &&
|
||||
!anchorElement.href.startsWith("/")
|
||||
) {
|
||||
anchorElement.setAttribute('target', '_blank');
|
||||
anchorElement.setAttribute('rel', 'noopener noreferrer');
|
||||
}
|
||||
|
||||
// Add the class "inline-chat-link" to each element
|
||||
anchorElement.classList.add("inline-chat-link");
|
||||
});
|
||||
|
||||
return element
|
||||
}
|
||||
|
||||
function createReferenceSection(references) {
|
||||
let referenceSection = document.createElement('div');
|
||||
referenceSection.classList.add("reference-section");
|
||||
referenceSection.classList.add("collapsed");
|
||||
|
||||
let numReferences = 0;
|
||||
|
||||
if (references.hasOwnProperty("notes")) {
|
||||
numReferences += references["notes"].length;
|
||||
|
||||
references["notes"].forEach((reference, index) => {
|
||||
let polishedReference = generateReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
});
|
||||
}
|
||||
if (references.hasOwnProperty("online")){
|
||||
numReferences += processOnlineReferences(referenceSection, references["online"]);
|
||||
}
|
||||
|
||||
let referenceExpandButton = document.createElement('button');
|
||||
referenceExpandButton.classList.add("reference-expand-button");
|
||||
referenceExpandButton.innerHTML = numReferences == 1 ? "1 reference" : `${numReferences} references`;
|
||||
|
||||
referenceExpandButton.addEventListener('click', function() {
|
||||
if (referenceSection.classList.contains("collapsed")) {
|
||||
referenceSection.classList.remove("collapsed");
|
||||
referenceSection.classList.add("expanded");
|
||||
} else {
|
||||
referenceSection.classList.add("collapsed");
|
||||
referenceSection.classList.remove("expanded");
|
||||
}
|
||||
});
|
||||
|
||||
let referencesDiv = document.createElement('div');
|
||||
referencesDiv.classList.add("references");
|
||||
referencesDiv.appendChild(referenceExpandButton);
|
||||
referencesDiv.appendChild(referenceSection);
|
||||
|
||||
return referencesDiv;
|
||||
}
|
||||
|
||||
async function chat() {
|
||||
// Extract required fields for search from form
|
||||
let query = document.getElementById("chat-input").value.trim();
|
||||
|
|
|
|||
366
src/interface/desktop/chatutils.js
Normal file
366
src/interface/desktop/chatutils.js
Normal file
|
|
@ -0,0 +1,366 @@
|
|||
function copyParentText(event, message=null) { //same
|
||||
const button = event.currentTarget;
|
||||
const textContent = message ?? button.parentNode.textContent.trim();
|
||||
navigator.clipboard.writeText(textContent).then(() => {
|
||||
button.firstChild.src = "./assets/icons/copy-button-success.svg";
|
||||
setTimeout(() => {
|
||||
button.firstChild.src = "./assets/icons/copy-button.svg";
|
||||
}, 1000);
|
||||
}).catch((error) => {
|
||||
console.error("Error copying text to clipboard:", error);
|
||||
const originalButtonText = button.innerHTML;
|
||||
button.innerHTML = "⛔️";
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalButtonText;
|
||||
button.firstChild.src = "./assets/icons/copy-button.svg";
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function createCopyParentText(message) { //same
|
||||
return function(event) {
|
||||
copyParentText(event, message);
|
||||
}
|
||||
}
|
||||
function formatDate(date) { //same
|
||||
// Format date in HH:MM, DD MMM YYYY format
|
||||
let time_string = date.toLocaleTimeString('en-IN', { hour: '2-digit', minute: '2-digit', hour12: false });
|
||||
let date_string = date.toLocaleString('en-IN', { year: 'numeric', month: 'short', day: '2-digit'}).replaceAll('-', ' ');
|
||||
return `${time_string}, ${date_string}`;
|
||||
}
|
||||
|
||||
function generateReference(referenceJson, index) { //same
|
||||
let reference = referenceJson.hasOwnProperty("compiled") ? referenceJson.compiled : referenceJson;
|
||||
let referenceFile = referenceJson.hasOwnProperty("file") ? referenceJson.file : null;
|
||||
|
||||
// Escape reference for HTML rendering
|
||||
let escaped_ref = reference.replaceAll('"', '"');
|
||||
|
||||
// Generate HTML for Chat Reference
|
||||
let short_ref = escaped_ref.slice(0, 100);
|
||||
short_ref = short_ref.length < escaped_ref.length ? short_ref + "..." : short_ref;
|
||||
let referenceButton = document.createElement('button');
|
||||
referenceButton.textContent = short_ref;
|
||||
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() {
|
||||
if (this.classList.contains("collapsed")) {
|
||||
this.classList.remove("collapsed");
|
||||
this.classList.add("expanded");
|
||||
this.textContent = escaped_ref;
|
||||
} else {
|
||||
this.classList.add("collapsed");
|
||||
this.classList.remove("expanded");
|
||||
this.textContent = short_ref;
|
||||
}
|
||||
});
|
||||
|
||||
return referenceButton;
|
||||
}
|
||||
|
||||
function generateOnlineReference(reference, index) { //same
|
||||
|
||||
// Generate HTML for Chat Reference
|
||||
let title = reference.title || reference.link;
|
||||
let link = reference.link;
|
||||
let snippet = reference.snippet;
|
||||
let question = reference.question;
|
||||
if (question) {
|
||||
question = `<b>Question:</b> ${question}<br><br>`;
|
||||
} 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.textContent = 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() {
|
||||
if (this.classList.contains("collapsed")) {
|
||||
this.classList.remove("collapsed");
|
||||
this.classList.add("expanded");
|
||||
this.innerHTML = linkElement.outerHTML + `<br><br>${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, raw=false, renderType="append") { //same
|
||||
let message_time = formatDate(dt ?? new Date());
|
||||
let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
|
||||
let formattedMessage = formatHTMLMessage(message, raw);
|
||||
|
||||
// Create a new div for the chat message
|
||||
let chatMessage = document.createElement('div');
|
||||
chatMessage.className = `chat-message ${by}`;
|
||||
chatMessage.dataset.meta = `${by_name} at ${message_time}`;
|
||||
|
||||
// Create a new div for the chat message text and append it to the chat message
|
||||
let chatMessageText = document.createElement('div');
|
||||
chatMessageText.className = `chat-message-text ${by}`;
|
||||
chatMessageText.appendChild(formattedMessage);
|
||||
chatMessage.appendChild(chatMessageText);
|
||||
|
||||
// Append annotations div to the chat message
|
||||
if (annotations) {
|
||||
chatMessageText.appendChild(annotations);
|
||||
}
|
||||
|
||||
// Append chat message div to chat body
|
||||
let chatBody = document.getElementById("chat-body");
|
||||
let body = document.body;
|
||||
if (renderType === "append") {
|
||||
chatBody.appendChild(chatMessage);
|
||||
// Scroll to bottom of chat-body element
|
||||
body.scrollTop = chatBody.scrollHeight;
|
||||
} else if (renderType === "prepend") {
|
||||
chatBody.insertBefore(chatMessage, chatBody.firstChild);
|
||||
} else if (renderType === "return") {
|
||||
return chatMessage;
|
||||
}
|
||||
|
||||
let chatBodyWrapper = document.getElementById("chat-body");
|
||||
chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
|
||||
}
|
||||
|
||||
function processOnlineReferences(referenceSection, onlineContext) { //same
|
||||
let numOnlineReferences = 0;
|
||||
for (let subquery in onlineContext) {
|
||||
let onlineReference = onlineContext[subquery];
|
||||
if (onlineReference.organic && onlineReference.organic.length > 0) {
|
||||
numOnlineReferences += onlineReference.organic.length;
|
||||
for (let index in onlineReference.organic) {
|
||||
let reference = onlineReference.organic[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
|
||||
if (onlineReference.knowledgeGraph && onlineReference.knowledgeGraph.length > 0) {
|
||||
numOnlineReferences += onlineReference.knowledgeGraph.length;
|
||||
for (let index in onlineReference.knowledgeGraph) {
|
||||
let reference = onlineReference.knowledgeGraph[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
|
||||
if (onlineReference.peopleAlsoAsk && onlineReference.peopleAlsoAsk.length > 0) {
|
||||
numOnlineReferences += onlineReference.peopleAlsoAsk.length;
|
||||
for (let index in onlineReference.peopleAlsoAsk) {
|
||||
let reference = onlineReference.peopleAlsoAsk[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
|
||||
if (onlineReference.webpages && onlineReference.webpages.length > 0) {
|
||||
numOnlineReferences += onlineReference.webpages.length;
|
||||
for (let index in onlineReference.webpages) {
|
||||
let reference = onlineReference.webpages[index];
|
||||
let polishedReference = generateOnlineReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return numOnlineReferences;
|
||||
}
|
||||
|
||||
function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null, intentType=null, inferredQueries=null) { //same
|
||||
let chatEl;
|
||||
if (intentType?.includes("text-to-image")) {
|
||||
let imageMarkdown = generateImageMarkdown(message, intentType, inferredQueries);
|
||||
chatEl = renderMessage(imageMarkdown, by, dt, null, false, "return");
|
||||
} else {
|
||||
chatEl = renderMessage(message, by, dt, null, false, "return");
|
||||
}
|
||||
|
||||
// If no document or online context is provided, render the message as is
|
||||
if ((context == null || context?.length == 0)
|
||||
&& (onlineContext == null || (onlineContext && Object.keys(onlineContext).length == 0))) {
|
||||
return chatEl;
|
||||
}
|
||||
|
||||
// If document or online context is provided, render the message with its references
|
||||
let references = {};
|
||||
if (!!context) references["notes"] = context;
|
||||
if (!!onlineContext) references["online"] = onlineContext;
|
||||
let chatMessageEl = chatEl.getElementsByClassName("chat-message-text")[0];
|
||||
chatMessageEl.appendChild(createReferenceSection(references));
|
||||
|
||||
return chatEl;
|
||||
}
|
||||
|
||||
function generateImageMarkdown(message, intentType, inferredQueries=null) { //same
|
||||
let imageMarkdown;
|
||||
if (intentType === "text-to-image") {
|
||||
imageMarkdown = ``;
|
||||
} else if (intentType === "text-to-image2") {
|
||||
imageMarkdown = ``;
|
||||
} else if (intentType === "text-to-image-v3") {
|
||||
imageMarkdown = ``;
|
||||
}
|
||||
const inferredQuery = inferredQueries?.[0];
|
||||
if (inferredQuery) {
|
||||
imageMarkdown += `\n\n**Inferred Query**:\n\n${inferredQuery}`;
|
||||
}
|
||||
return imageMarkdown;
|
||||
}
|
||||
|
||||
function formatHTMLMessage(message, raw=false, willReplace=true) { //same
|
||||
var md = window.markdownit();
|
||||
let newHTML = message;
|
||||
|
||||
// Remove any text between <s>[INST] and </s> tags. These are spurious instructions for the AI chat model.
|
||||
newHTML = newHTML.replace(/<s>\[INST\].+(<\/s>)?/g, '');
|
||||
|
||||
// Customize the rendering of images
|
||||
md.renderer.rules.image = function(tokens, idx, options, env, self) {
|
||||
let token = tokens[idx];
|
||||
|
||||
// Add class="text-to-image" to images
|
||||
token.attrPush(['class', 'text-to-image']);
|
||||
|
||||
// Use the default renderer to render image markdown format
|
||||
return self.renderToken(tokens, idx, options);
|
||||
};
|
||||
|
||||
// Render markdown
|
||||
newHTML = raw ? newHTML : md.render(newHTML);
|
||||
// Sanitize the rendered markdown
|
||||
newHTML = DOMPurify.sanitize(newHTML);
|
||||
// Set rendered markdown to HTML DOM element
|
||||
let element = document.createElement('div');
|
||||
element.innerHTML = newHTML;
|
||||
element.className = "chat-message-text-response";
|
||||
|
||||
// Add a copy button to each chat message
|
||||
if (willReplace === true) {
|
||||
let copyButton = document.createElement('button');
|
||||
copyButton.classList.add("copy-button");
|
||||
copyButton.title = "Copy Message";
|
||||
let copyIcon = document.createElement("img");
|
||||
copyIcon.id = "copy-icon";
|
||||
copyIcon.src = "./assets/icons/copy-button.svg";
|
||||
copyIcon.classList.add("copy-icon");
|
||||
copyButton.appendChild(copyIcon);
|
||||
copyButton.addEventListener('click', createCopyParentText(message));
|
||||
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, key) => {
|
||||
// Create the parent div
|
||||
let parentDiv = document.createElement('div');
|
||||
parentDiv.classList.add("programmatic-output");
|
||||
// Add the parent div before the code element
|
||||
codeElement.parentNode.insertBefore(parentDiv, codeElement);
|
||||
// Move the code element into the parent div
|
||||
parentDiv.appendChild(codeElement);
|
||||
// Add a copy button to each element
|
||||
});
|
||||
|
||||
// Get all code elements that have no class.
|
||||
let codeElements = element.querySelectorAll('code:not([class])');
|
||||
codeElements.forEach((codeElement) => {
|
||||
// Add the class "chat-response" to each element
|
||||
codeElement.classList.add("chat-response");
|
||||
});
|
||||
|
||||
let anchorElements = element.querySelectorAll('a');
|
||||
anchorElements.forEach((anchorElement) => {
|
||||
// Tag external links to open in separate window
|
||||
if (
|
||||
!anchorElement.href.startsWith("./") &&
|
||||
!anchorElement.href.startsWith("#") &&
|
||||
!anchorElement.href.startsWith("/")
|
||||
) {
|
||||
anchorElement.setAttribute('target', '_blank');
|
||||
anchorElement.setAttribute('rel', 'noopener noreferrer');
|
||||
}
|
||||
|
||||
// Add the class "inline-chat-link" to each element
|
||||
anchorElement.classList.add("inline-chat-link");
|
||||
});
|
||||
|
||||
return element
|
||||
}
|
||||
|
||||
function createReferenceSection(references, createLinkerSection=false) {
|
||||
console.log("linker data: ", createLinkerSection);
|
||||
let referenceSection = document.createElement('div');
|
||||
referenceSection.classList.add("reference-section");
|
||||
referenceSection.classList.add("collapsed");
|
||||
|
||||
let numReferences = 0;
|
||||
|
||||
if (references.hasOwnProperty("notes")) {
|
||||
numReferences += references["notes"].length;
|
||||
|
||||
references["notes"].forEach((reference, index) => {
|
||||
let polishedReference = generateReference(reference, index);
|
||||
referenceSection.appendChild(polishedReference);
|
||||
});
|
||||
}
|
||||
if (references.hasOwnProperty("online")){
|
||||
numReferences += processOnlineReferences(referenceSection, references["online"]);
|
||||
}
|
||||
|
||||
let referenceExpandButton = document.createElement('button');
|
||||
referenceExpandButton.id = "reference-expand-button";
|
||||
referenceExpandButton.classList.add("reference-expand-button");
|
||||
referenceExpandButton.innerHTML = numReferences == 1 ? "1 reference" : `${numReferences} references`;
|
||||
|
||||
referenceExpandButton.addEventListener('click', function() {
|
||||
if (referenceSection.classList.contains("collapsed")) {
|
||||
referenceSection.classList.remove("collapsed");
|
||||
referenceSection.classList.add("expanded");
|
||||
} else {
|
||||
referenceSection.classList.add("collapsed");
|
||||
referenceSection.classList.remove("expanded");
|
||||
}
|
||||
});
|
||||
|
||||
let referencesDiv = document.createElement('div');
|
||||
referencesDiv.classList.add("references");
|
||||
referencesDiv.appendChild(referenceExpandButton);
|
||||
if (createLinkerSection) {
|
||||
//add a linker button back to the desktop application
|
||||
let linkerButton = document.createElement('button');
|
||||
linkerButton.innerHTML = "Continue Conversation";
|
||||
linkerButton.id = "linker-button";
|
||||
linkerButton.addEventListener('click', function() {
|
||||
window.routeBackToMainWindowAPI.sendSignal();
|
||||
});
|
||||
referencesDiv.appendChild(linkerButton);
|
||||
console.log("shortcut window");
|
||||
}
|
||||
referencesDiv.appendChild(referenceSection);
|
||||
|
||||
return referencesDiv;
|
||||
}
|
||||
|
|
@ -431,6 +431,9 @@ function addCSPHeaderToSession () {
|
|||
let firstRun = true;
|
||||
let win = null;
|
||||
let titleBarStyle = process.platform === 'win32' ? 'default' : 'hidden';
|
||||
const {globalShortcut, clipboard} = require('electron'); // global shortcut and clipboard dependencies for shortcut window
|
||||
const openShortcutWindowKeyBind = 'CommandOrControl+Shift+K'
|
||||
|
||||
const createWindow = (tab = 'chat.html') => {
|
||||
win = new BrowserWindow({
|
||||
width: 800,
|
||||
|
|
@ -506,6 +509,48 @@ const createWindow = (tab = 'chat.html') => {
|
|||
}
|
||||
}
|
||||
|
||||
const createShortcutWindow = (tab = 'shortcut.html') => {
|
||||
var shortcutWin = new BrowserWindow({
|
||||
width: 400,
|
||||
height: 600,
|
||||
show: false,
|
||||
titleBarStyle: titleBarStyle,
|
||||
autoHideMenuBar: true,
|
||||
frame: false,
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, 'preload.js'),
|
||||
nodeIntegration: true,
|
||||
}
|
||||
});
|
||||
shortcutWin.setMenuBarVisibility(false);
|
||||
shortcutWin.setResizable(false);
|
||||
shortcutWin.setOpacity(0.95);
|
||||
shortcutWin.setBackgroundColor('#f5f4f3');
|
||||
shortcutWin.setHasShadow(true);
|
||||
shortcutWin.setVibrancy('popover');
|
||||
|
||||
shortcutWin.loadFile(tab);
|
||||
shortcutWin.once('ready-to-show', () => {
|
||||
shortcutWin.show();
|
||||
});
|
||||
|
||||
shortcutWin.on('closed', () => {
|
||||
shortcutWin = null;
|
||||
});
|
||||
|
||||
return shortcutWin;
|
||||
};
|
||||
|
||||
function isShortcutWindowOpen() {
|
||||
const windows = BrowserWindow.getAllWindows();
|
||||
for (let i = 0; i < windows.length; i++) {
|
||||
if (windows[i].webContents.getURL().endsWith('shortcut.html')) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
app.whenReady().then(() => {
|
||||
addCSPHeaderToSession();
|
||||
|
||||
|
|
@ -551,14 +596,13 @@ app.whenReady().then(() => {
|
|||
});
|
||||
ipcMain.handle('deleteAllFiles', deleteAllFiles);
|
||||
|
||||
createWindow();
|
||||
|
||||
const mainWindow = createWindow();
|
||||
|
||||
app.setAboutPanelOptions({
|
||||
applicationName: "Khoj",
|
||||
applicationVersion: khojPackage.version,
|
||||
version: khojPackage.version,
|
||||
authors: "Saba Imran, Debanjum Singh Solanky and contributors",
|
||||
authors: "Khoj AI",
|
||||
website: "https://khoj.dev",
|
||||
copyright: "GPL v3",
|
||||
iconPath: path.join(__dirname, 'assets', 'icons', 'favicon-128x128.png')
|
||||
|
|
@ -575,9 +619,43 @@ app.whenReady().then(() => {
|
|||
console.warn("Desktop app update check failed:", e);
|
||||
}
|
||||
})
|
||||
globalShortcut.register(openShortcutWindowKeyBind, () => {
|
||||
console.log("Shortcut key pressed")
|
||||
if(isShortcutWindowOpen()) return;
|
||||
|
||||
const shortcutWin = createShortcutWindow(); // Create a new shortcut window each time the shortcut is triggered
|
||||
shortcutWin.setAlwaysOnTop(true, 'screen-saver', 1);
|
||||
const clipboardText = clipboard.readText();
|
||||
console.log('Sending clipboard text:', clipboardText); // Debug log
|
||||
shortcutWin.webContents.once('dom-ready', () => {
|
||||
shortcutWin.webContents.send('clip', clipboardText);
|
||||
console.log('Message sent to window'); // Debug log
|
||||
});
|
||||
|
||||
// Register a global shortcut for the Escape key for the shortcutWin
|
||||
globalShortcut.register('Escape', () => {
|
||||
if (shortcutWin) {
|
||||
shortcutWin.close();
|
||||
}
|
||||
// Unregister the Escape key shortcut
|
||||
globalShortcut.unregister('Escape');
|
||||
});
|
||||
|
||||
shortcutWin.on('closed', () => {
|
||||
// Unregister the Escape key shortcut
|
||||
globalShortcut.unregister('Escape');
|
||||
});
|
||||
ipcMain.on('continue-conversation-button-clicked', () => {
|
||||
openWindow('chat.html');
|
||||
if (shortcutWin && !shortcutWin.isDestroyed()) {
|
||||
shortcutWin.close();
|
||||
}
|
||||
// Unregister the Escape key shortcut
|
||||
globalShortcut.unregister('Escape');
|
||||
});
|
||||
});
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,20 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
|||
setTitle: (title) => ipcRenderer.send('set-title', title)
|
||||
})
|
||||
|
||||
contextBridge.exposeInMainWorld('clipboardAPI', {
|
||||
sendClipboardText: (callback) => {
|
||||
ipcRenderer.on('clip', (event, message) => {
|
||||
callback(message);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
contextBridge.exposeInMainWorld('routeBackToMainWindowAPI', {
|
||||
sendSignal: () => {
|
||||
ipcRenderer.send('continue-conversation-button-clicked'); // Custom event name
|
||||
}
|
||||
});
|
||||
|
||||
contextBridge.exposeInMainWorld('storeValueAPI', {
|
||||
handleFileOpen: (key) => ipcRenderer.invoke('handleFileOpen', key)
|
||||
})
|
||||
|
|
|
|||
518
src/interface/desktop/shortcut.html
Normal file
518
src/interface/desktop/shortcut.html
Normal file
|
|
@ -0,0 +1,518 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Khoj Mini</title>
|
||||
<style>
|
||||
#title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #f9f5de;
|
||||
color: black;
|
||||
-webkit-app-region: drag;
|
||||
z-index: 9999;
|
||||
margin: 0;
|
||||
padding-left: 7px;
|
||||
padding-right: 7px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
}
|
||||
#loading-dots {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#styled-input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
height: 100px;
|
||||
min-height: 50px;
|
||||
background-color: #475569; /* Blue background */
|
||||
color: #dcdfe4; /* White text */
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
border: none;
|
||||
resize: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-input {
|
||||
margin-top: 10px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 5;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
#input-container {
|
||||
background-color: #475569;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
#send-button {
|
||||
border: none;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin-top: 5px;
|
||||
background-color: #5a6b84;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
/* font-weight: bold; */
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#send-button:hover {
|
||||
background: #7489a9;
|
||||
}
|
||||
|
||||
#edit-button {
|
||||
border: none;
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin-top: 5px;
|
||||
background-color: #5a6b84;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
/* font-weight: bold; */
|
||||
position: relative;
|
||||
}
|
||||
#edit-button:hover {
|
||||
background: #7489a9;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* Width of the scrollbar */
|
||||
height: 5px;
|
||||
}
|
||||
/* * {
|
||||
outline: 1px solid rgb(255, 255, 255);
|
||||
} */
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* Background of the scrollbar track */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #2d2d2d; /* Color of the scrollbar thumb */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #000000; /* Color of the scrollbar thumb on hover */
|
||||
}
|
||||
|
||||
#copy-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#reference-expand-button{
|
||||
background-color: #000000;
|
||||
color: #dcdfe4; /* White text */
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#linker-button{
|
||||
background-color: #fee285;
|
||||
color: black; /* White text */
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
#linker-button:hover {
|
||||
background-color: #f9f5de;
|
||||
}
|
||||
|
||||
|
||||
div.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.expanded {
|
||||
display: block;
|
||||
}
|
||||
/* CSS for the container */
|
||||
.logo-container {
|
||||
/* display: flex; Use flexbox to align items */
|
||||
align-items: center; /* Align items vertically */
|
||||
justify-content: flex;
|
||||
padding: 10px; /* Add padding to the container */
|
||||
}
|
||||
|
||||
/* CSS for the image */
|
||||
img {
|
||||
width: 100px; /* Set the desired width */
|
||||
height: auto; /* Allows the image to scale proportionally */
|
||||
}
|
||||
.clipboardText {
|
||||
font-size: 14px;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
background-color: #475569;
|
||||
color: #dcdfe4;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.reference-button {
|
||||
background-color: #dde5f0;
|
||||
color: #dcdfe4;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
#chat-body {
|
||||
width: 100%;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
word-wrap: break-word;
|
||||
line-height: 20px;
|
||||
}
|
||||
b {
|
||||
font-size: 14px;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 20px;
|
||||
font-family: 'Noto Sans', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
font-family:'Noto Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
scrollbar-width: 5px; /* "auto" or "thin" */
|
||||
scrollbar-color: white white;/* thumb color and track color */
|
||||
height: 300px;
|
||||
overflow: scroll;
|
||||
}
|
||||
#chat-body-wrapper {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
#loading-dots span {
|
||||
display: inline-block;
|
||||
animation: bounce 0.9s infinite alternate;
|
||||
}
|
||||
|
||||
.dot1 {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.dot2 {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.dot3 {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="title-bar">Khoj (Esc to Quit)</div>
|
||||
<div id="chat-body-wrapper">
|
||||
<div id="input-container">
|
||||
<textarea id="styled-input" name="styled-input">Hello World!</textarea>
|
||||
<script>
|
||||
try {
|
||||
if (!window.clipboardAPI) {
|
||||
throw new Error('clipboardAPI is not available');
|
||||
}
|
||||
|
||||
window.clipboardAPI.sendClipboardText((clipboardText) => {
|
||||
try {
|
||||
const styledInput = document.getElementById('styled-input');
|
||||
if (!styledInput) {
|
||||
throw new Error('styled-input element not found');
|
||||
}
|
||||
styledInput.value = clipboardText;
|
||||
console.log("success: ", clipboardText);
|
||||
} catch (error) {
|
||||
console.error('Error handling clipboard text:', error);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error setting up clipboard listener:', error);
|
||||
}
|
||||
</script>
|
||||
<div style="display: flex;">
|
||||
<button id="send-button" onclick="chat()">
|
||||
Send
|
||||
<svg style="margin-left: 3px" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send">
|
||||
<path d="M5 12l10 0-5-5m5 5-5 5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button id="edit-button" onclick="edit()">
|
||||
Edit
|
||||
<svg style="margin-left: 6px; margin-right: 6px;" fill="#fff" height="11px" width="11px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
|
||||
<g>
|
||||
<g>
|
||||
<path d="m455.1,137.9l-32.4,32.4-81-81.1 32.4-32.4c6.6-6.6 18.1-6.6 24.7,0l56.3,56.4c6.8,6.8 6.8,17.9 0,24.7zm-270.7,271l-81-81.1 209.4-209.7 81,81.1-209.4,209.7zm-99.7-42l60.6,60.7-84.4,23.8 23.8-84.5zm399.3-282.6l-56.3-56.4c-11-11-50.7-31.8-82.4,0l-285.3,285.5c-2.5,2.5-4.3,5.5-5.2,8.9l-43,153.1c-2,7.1 0.1,14.7 5.2,20 5.2,5.3 15.6,6.2 20,5.2l153-43.1c3.4-0.9 6.4-2.7 8.9-5.2l285.1-285.5c22.7-22.7 22.7-59.7 0-82.5z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loading-dots" style="display: none;"></div>
|
||||
<div id="chat-body"></div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
<script type="text/javascript" src="./assets/purify.min.js?v={{ khoj_version }}"></script>
|
||||
<script type="text/javascript" src="./assets/markdown-it.min.js"></script>
|
||||
<script src="./utils.js"></script>
|
||||
<script src="./chatutils.js"></script>
|
||||
<script>
|
||||
|
||||
let region = null;
|
||||
let city = null;
|
||||
let countryName = null;
|
||||
let timezone = null;
|
||||
|
||||
fetch("https://ipapi.co/json")
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
region = data.region;
|
||||
city = data.city;
|
||||
countryName = data.country_name;
|
||||
timezone = data.timezone;
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
return;
|
||||
});
|
||||
|
||||
function toggleLoading() {
|
||||
var dots = document.getElementById('loading-dots');
|
||||
if (dots.style.display === 'none') {
|
||||
dots.innerHTML = 'Loading<span class="dot1">.</span><span class="dot2">.</span><span class="dot3">.</span>';
|
||||
dots.style.display = 'inline-block';
|
||||
} else {
|
||||
dots.innerHTML = '';
|
||||
dots.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function edit() {
|
||||
//enable input for text area
|
||||
let inp = document.getElementById("styled-input");
|
||||
inp.removeAttribute('readonly');
|
||||
//put focus on text area
|
||||
inp.focus();
|
||||
}
|
||||
|
||||
async function chat() {
|
||||
//set chat body to empty
|
||||
let chatBody = document.getElementById("chat-body");
|
||||
chatBody.innerHTML = "";
|
||||
toggleLoading();
|
||||
let inp = document.getElementById("styled-input");
|
||||
query = inp.value;
|
||||
inp.setAttribute('readonly', true);
|
||||
let resultsCount = localStorage.getItem("khojResultsCount") || 5;
|
||||
console.log(`Query: ${query}`);
|
||||
|
||||
// Short circuit on empty query
|
||||
if (query.length === 0)
|
||||
return;
|
||||
|
||||
let chat_body = document.getElementById("chat-body");
|
||||
|
||||
let conversationID = chat_body.dataset.conversationId;
|
||||
let hostURL = await window.hostURLAPI.getURL();
|
||||
const khojToken = await window.tokenAPI.getToken();
|
||||
const headers = { 'Authorization': `Bearer ${khojToken}` };
|
||||
|
||||
if (!conversationID) {
|
||||
let response = await fetch(`${hostURL}/api/chat/sessions`, { method: "POST", headers });
|
||||
let data = await response.json();
|
||||
conversationID = data.conversation_id;
|
||||
chat_body.dataset.conversationId = conversationID;
|
||||
}
|
||||
|
||||
// Generate backend API URL to execute query
|
||||
let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&n=${resultsCount}&client=web&stream=true&conversation_id=${conversationID}®ion=${region}&city=${city}&country=${countryName}&timezone=${timezone}`;
|
||||
|
||||
let newResponseEl = document.createElement("div");
|
||||
newResponseEl.classList.add("chat-message", "khoj");
|
||||
newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
|
||||
chat_body.appendChild(newResponseEl);
|
||||
|
||||
let newResponseTextEl = document.createElement("div");
|
||||
newResponseTextEl.classList.add("chat-message-text", "khoj");
|
||||
newResponseEl.appendChild(newResponseTextEl);
|
||||
|
||||
// Temporary status message to indicate that Khoj is thinking
|
||||
let loadingEllipsis = document.createElement("div");
|
||||
loadingEllipsis.classList.add("lds-ellipsis");
|
||||
|
||||
let firstEllipsis = document.createElement("div");
|
||||
firstEllipsis.classList.add("lds-ellipsis-item");
|
||||
|
||||
let secondEllipsis = document.createElement("div");
|
||||
secondEllipsis.classList.add("lds-ellipsis-item");
|
||||
|
||||
let thirdEllipsis = document.createElement("div");
|
||||
thirdEllipsis.classList.add("lds-ellipsis-item");
|
||||
|
||||
let fourthEllipsis = document.createElement("div");
|
||||
fourthEllipsis.classList.add("lds-ellipsis-item");
|
||||
|
||||
loadingEllipsis.appendChild(firstEllipsis);
|
||||
loadingEllipsis.appendChild(secondEllipsis);
|
||||
loadingEllipsis.appendChild(thirdEllipsis);
|
||||
loadingEllipsis.appendChild(fourthEllipsis);
|
||||
|
||||
newResponseTextEl.appendChild(loadingEllipsis);
|
||||
document.body.scrollTop = document.getElementById("chat-body").scrollHeight;
|
||||
|
||||
// Call Khoj chat API
|
||||
let response = await fetch(chatApi, { headers });
|
||||
let rawResponse = "";
|
||||
let references = null;
|
||||
const contentType = response.headers.get("content-type");
|
||||
toggleLoading();
|
||||
if (contentType === "application/json") {
|
||||
// Handle JSON response
|
||||
try {
|
||||
const responseAsJson = await response.json();
|
||||
if (responseAsJson.image) {
|
||||
// If response has image field, response is a generated image.
|
||||
if (responseAsJson.intentType === "text-to-image") {
|
||||
rawResponse += ``;
|
||||
} else if (responseAsJson.intentType === "text-to-image2") {
|
||||
rawResponse += ``;
|
||||
} else if (responseAsJson.intentType === "text-to-image-v3") {
|
||||
rawResponse += ``;
|
||||
}
|
||||
const inferredQueries = responseAsJson.inferredQueries?.[0];
|
||||
if (inferredQueries) {
|
||||
rawResponse += `\n\n**Inferred Query**:\n\n${inferredQueries}`;
|
||||
}
|
||||
}
|
||||
if (responseAsJson.context) {
|
||||
const rawReferenceAsJson = responseAsJson.context;
|
||||
references = createReferenceSection(rawReferenceAsJson, createLinkerSection=true);
|
||||
}
|
||||
if (responseAsJson.detail) {
|
||||
// If response has detail field, response is an error message.
|
||||
rawResponse += responseAsJson.detail;
|
||||
}
|
||||
} catch (error) {
|
||||
// If the chunk is not a JSON object, just display it as is
|
||||
rawResponse += chunk;
|
||||
} finally {
|
||||
newResponseTextEl.innerHTML = "";
|
||||
newResponseTextEl.appendChild(formatHTMLMessage(rawResponse));
|
||||
|
||||
if (references != null) {
|
||||
newResponseTextEl.appendChild(references);
|
||||
}
|
||||
|
||||
document.body.scrollTop = document.getElementById("chat-body").scrollHeight;
|
||||
}
|
||||
} else {
|
||||
// Handle streamed response of type text/event-stream or text/plain
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let references = {};
|
||||
|
||||
readStream();
|
||||
|
||||
function readStream() {
|
||||
reader.read().then(({ done, value }) => {
|
||||
if (done) {
|
||||
// Append any references after all the data has been streamed
|
||||
if (references != {}) {
|
||||
newResponseTextEl.appendChild(createReferenceSection(references, createLinkerSection=true));
|
||||
}
|
||||
document.body.scrollTop = document.getElementById("chat-body").scrollHeight;
|
||||
return;
|
||||
}
|
||||
|
||||
// Decode message chunk from stream
|
||||
const chunk = decoder.decode(value, { stream: true });
|
||||
|
||||
if (chunk.includes("### compiled references:")) {
|
||||
const additionalResponse = chunk.split("### compiled references:")[0];
|
||||
rawResponse += additionalResponse;
|
||||
newResponseTextEl.innerHTML = "";
|
||||
newResponseTextEl.appendChild(formatHTMLMessage(rawResponse));
|
||||
|
||||
const rawReference = chunk.split("### compiled references:")[1];
|
||||
const rawReferenceAsJson = JSON.parse(rawReference);
|
||||
if (rawReferenceAsJson instanceof Array) {
|
||||
references["notes"] = rawReferenceAsJson;
|
||||
} else if (typeof rawReferenceAsJson === "object" && rawReferenceAsJson !== null) {
|
||||
references["online"] = rawReferenceAsJson;
|
||||
}
|
||||
readStream();
|
||||
} else {
|
||||
// Display response from Khoj
|
||||
if (newResponseTextEl.getElementsByClassName("lds-ellipsis").length > 0) {
|
||||
newResponseTextEl.removeChild(loadingEllipsis);
|
||||
}
|
||||
|
||||
// If the chunk is not a JSON object, just display it as is
|
||||
rawResponse += chunk;
|
||||
newResponseTextEl.innerHTML = "";
|
||||
newResponseTextEl.appendChild(formatHTMLMessage(rawResponse));
|
||||
|
||||
readStream();
|
||||
}
|
||||
|
||||
// Scroll to bottom of chat window as chat response is streamed
|
||||
document.body.scrollTop = document.getElementById("chat-body").scrollHeight;
|
||||
});
|
||||
}
|
||||
}
|
||||
document.body.scrollTop = document.getElementById("chat-body").scrollHeight;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue