2023-09-06 19:04:18 +00:00
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0 maximum-scale=1.0" >
< title > Khoj - Chat< / title >
< link rel = "icon" type = "image/png" sizes = "128x128" href = "./assets/icons/favicon-128x128.png" >
< link rel = "manifest" href = "/static/khoj_chat.webmanifest" >
< link rel = "stylesheet" href = "./assets/khoj.css" >
< / head >
2023-11-27 19:45:36 +00:00
< script type = "text/javascript" src = "./assets/markdown-it.min.js" > < / script >
2023-11-04 01:13:37 +00:00
< script src = "./utils.js" > < / script >
2023-11-03 12:11:41 +00:00
2023-09-06 19:04:18 +00:00
< script >
let chatOptions = [];
function copyProgrammaticOutput(event) {
// Remove the first 4 characters which are the "Copy" button
2023-11-27 21:05:31 +00:00
const originalCopyText = event.target.parentNode.textContent.trim().slice(0, 4);
2023-09-06 19:04:18 +00:00
const programmaticOutput = event.target.parentNode.textContent.trim().slice(4);
navigator.clipboard.writeText(programmaticOutput).then(() => {
2023-11-27 21:05:31 +00:00
event.target.textContent = "✅ Copied to clipboard!";
setTimeout(() => {
event.target.textContent = originalCopyText;
}, 1000);
2023-09-06 19:04:18 +00:00
}).catch((error) => {
console.error("Error copying programmatic output to clipboard:", error);
2023-11-27 21:05:31 +00:00
event.target.textContent = "⛔️ Failed to copy!";
setTimeout(() => {
event.target.textContent = originalCopyText;
}, 1000);
2023-09-06 19:04:18 +00:00
});
}
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(reference, index) {
// Escape reference for HTML rendering
let escaped_ref = reference.replaceAll('"', '" ');
// Generate HTML for Chat Reference
2023-11-07 00:18:41 +00:00
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');
2023-12-22 12:41:49 +00:00
referenceButton.textContent = short_ref;
2023-11-07 00:18:41 +00:00
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");
2023-12-22 12:41:49 +00:00
this.textContent = escaped_ref;
2023-11-07 00:18:41 +00:00
} else {
this.classList.add("collapsed");
this.classList.remove("expanded");
2023-12-22 12:41:49 +00:00
this.textContent = short_ref;
2023-11-07 00:18:41 +00:00
}
});
return referenceButton;
2023-09-06 19:04:18 +00:00
}
2023-11-18 00:41:28 +00:00
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 = `< 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.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 + `< br > < br > ${question + snippet}`;
} else {
this.classList.add("collapsed");
this.classList.remove("expanded");
this.innerHTML = linkElement.outerHTML;
}
});
return referenceButton;
}
2023-12-18 15:01:50 +00:00
function renderMessage(message, by, dt=null, annotations=null, raw=false) {
2023-09-06 19:04:18 +00:00
let message_time = formatDate(dt ?? new Date());
let by_name = by == "khoj" ? "🏮 Khoj" : "🤔 You";
2023-12-18 15:01:50 +00:00
let formattedMessage = formatHTMLMessage(message, raw);
2023-11-07 00:18:41 +00:00
let chatBody = document.getElementById("chat-body");
// 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}`;
2023-11-27 19:45:36 +00:00
chatMessageText.appendChild(formattedMessage);
2023-11-07 00:18:41 +00:00
chatMessage.appendChild(chatMessageText);
// Append annotations div to the chat message
if (annotations) {
chatMessageText.appendChild(annotations);
}
// Append chat message div to chat body
chatBody.appendChild(chatMessage);
2023-09-06 19:04:18 +00:00
// Scroll to bottom of chat-body element
2023-11-07 00:18:41 +00:00
chatBody.scrollTop = chatBody.scrollHeight;
2023-09-06 19:04:18 +00:00
}
2023-11-18 00:41:28 +00:00
function processOnlineReferences(referenceSection, onlineContext) {
let numOnlineReferences = 0;
2023-11-20 23:19:15 +00:00
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);
}
2023-11-18 00:41:28 +00:00
}
2023-11-20 23:19:15 +00:00
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);
}
2023-11-18 00:41:28 +00:00
}
2023-11-20 23:19:15 +00:00
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);
}
2023-11-18 00:41:28 +00:00
}
}
return numOnlineReferences;
}
2023-12-17 15:32:55 +00:00
function renderMessageWithReference(message, by, context=null, dt=null, onlineContext=null, intentType=null, inferredQueries=null) {
2023-12-05 01:56:35 +00:00
if (intentType === "text-to-image") {
2023-12-05 03:55:22 +00:00
let imageMarkdown = ``;
2023-12-17 15:32:55 +00:00
imageMarkdown += "\n\n";
if (inferredQueries) {
const inferredQuery = inferredQueries?.[0];
imageMarkdown += `**Inferred Query**: ${inferredQuery}`;
}
2023-12-05 01:56:35 +00:00
renderMessage(imageMarkdown, by, dt);
return;
}
2023-11-18 00:41:28 +00:00
if (context == null & & onlineContext == null) {
renderMessage(message, by, dt);
return;
}
if ((context & & context.length == 0) & & (onlineContext == null || (onlineContext & & Object.keys(onlineContext).length == 0))) {
2023-11-07 00:18:41 +00:00
renderMessage(message, by, dt);
return;
}
let references = document.createElement('div');
let referenceExpandButton = document.createElement('button');
referenceExpandButton.classList.add("reference-expand-button");
2023-11-18 00:41:28 +00:00
let numReferences = 0;
if (context) {
numReferences += context.length;
}
2023-11-07 00:18:41 +00:00
references.appendChild(referenceExpandButton);
let referenceSection = document.createElement('div');
referenceSection.classList.add("reference-section");
referenceSection.classList.add("collapsed");
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");
}
});
references.classList.add("references");
2023-09-06 19:04:18 +00:00
if (context) {
2023-11-07 00:18:41 +00:00
for (let index in context) {
let reference = context[index];
let polishedReference = generateReference(reference, index);
referenceSection.appendChild(polishedReference);
}
2023-09-06 19:04:18 +00:00
}
2023-11-18 00:41:28 +00:00
if (onlineContext) {
numReferences += processOnlineReferences(referenceSection, onlineContext);
}
let expandButtonText = numReferences == 1 ? "1 reference" : `${numReferences} references`;
referenceExpandButton.innerHTML = expandButtonText;
2023-11-07 00:18:41 +00:00
references.appendChild(referenceSection);
2023-09-06 19:04:18 +00:00
2023-11-07 00:18:41 +00:00
renderMessage(message, by, dt, references);
2023-09-06 19:04:18 +00:00
}
2023-12-18 15:01:50 +00:00
function formatHTMLMessage(htmlMessage, raw=false) {
2023-11-27 19:45:36 +00:00
var md = window.markdownit();
let newHTML = htmlMessage;
2023-11-04 08:09:35 +00:00
// 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, '');
2023-11-27 19:45:36 +00:00
2023-12-05 01:56:35 +00:00
// 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
2023-12-05 03:55:22 +00:00
return self.renderToken(tokens, idx, options);
2023-12-05 01:56:35 +00:00
};
2023-11-27 19:45:36 +00:00
// Render markdown
2023-12-18 15:01:50 +00:00
newHTML = raw ? newHTML : md.render(newHTML);
2023-11-27 19:45:36 +00:00
// Get any elements with a class that starts with "language"
let element = document.createElement('div');
element.innerHTML = newHTML;
let codeBlockElements = element.querySelectorAll('[class^="language-"]');
// For each element, add a parent div with the class "programmatic-output"
codeBlockElements.forEach((codeElement) => {
// 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
let copyButton = document.createElement('button');
copyButton.classList.add("copy-button");
copyButton.innerHTML = "Copy";
copyButton.addEventListener('click', copyProgrammaticOutput);
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) => {
// Add the class "inline-chat-link" to each element
anchorElement.classList.add("inline-chat-link");
});
return element
2023-09-06 19:04:18 +00:00
}
async function chat() {
// Extract required fields for search from form
let query = document.getElementById("chat-input").value.trim();
let resultsCount = localStorage.getItem("khojResultsCount") || 5;
console.log(`Query: ${query}`);
// Short circuit on empty query
if (query.length === 0)
return;
// Add message by user to chat body
renderMessage(query, "you");
document.getElementById("chat-input").value = "";
autoResize();
document.getElementById("chat-input").setAttribute("disabled", "disabled");
let hostURL = await window.hostURLAPI.getURL();
// Generate backend API URL to execute query
let url = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&n=${resultsCount}&client=web&stream=true`;
2023-10-26 19:33:03 +00:00
const khojToken = await window.tokenAPI.getToken();
const headers = { 'Authorization': `Bearer ${khojToken}` };
2023-09-06 19:04:18 +00:00
let chat_body = document.getElementById("chat-body");
let new_response = document.createElement("div");
new_response.classList.add("chat-message", "khoj");
new_response.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
chat_body.appendChild(new_response);
let newResponseText = document.createElement("div");
newResponseText.classList.add("chat-message-text", "khoj");
new_response.appendChild(newResponseText);
// Temporary status message to indicate that Khoj is thinking
let loadingSpinner = document.createElement("div");
loadingSpinner.classList.add("spinner");
newResponseText.appendChild(loadingSpinner);
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
let chatTooltip = document.getElementById("chat-tooltip");
chatTooltip.style.display = "none";
let chatInput = document.getElementById("chat-input");
chatInput.classList.remove("option-enabled");
2023-12-05 06:03:52 +00:00
// Call specified Khoj API
2023-12-05 05:41:16 +00:00
let response = await fetch(url, { headers });
let rawResponse = "";
2023-12-05 06:03:52 +00:00
const contentType = response.headers.get("content-type");
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.
rawResponse += ``;
2023-12-17 15:32:55 +00:00
rawResponse += "\n\n";
const inferredQueries = responseAsJson.inferredQueries?.[0];
if (inferredQueries) {
rawResponse += `**Inferred Query**: ${inferredQueries}`;
}
2023-12-05 05:41:16 +00:00
}
2023-12-05 06:03:52 +00:00
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 {
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse));
2023-09-06 19:04:18 +00:00
2023-12-05 06:03:52 +00:00
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
document.getElementById("chat-input").removeAttribute("disabled");
}
} else {
// Handle streamed response of type text/event-stream or text/plain
const reader = response.body.getReader();
const decoder = new TextDecoder();
let references = null;
readStream();
function readStream() {
reader.read().then(({ done, value }) => {
if (done) {
// Append any references after all the data has been streamed
if (references != null) {
newResponseText.appendChild(references);
}
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
document.getElementById("chat-input").removeAttribute("disabled");
return;
}
2023-09-06 19:04:18 +00:00
2023-12-05 06:03:52 +00:00
// Decode message chunk from stream
const chunk = decoder.decode(value, { stream: true });
2023-11-07 00:18:41 +00:00
2023-12-05 06:03:52 +00:00
if (chunk.includes("### compiled references:")) {
const additionalResponse = chunk.split("### compiled references:")[0];
rawResponse += additionalResponse;
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse));
2023-11-07 00:18:41 +00:00
2023-12-05 06:03:52 +00:00
const rawReference = chunk.split("### compiled references:")[1];
const rawReferenceAsJson = JSON.parse(rawReference);
references = document.createElement('div');
references.classList.add("references");
2023-11-07 00:18:41 +00:00
2023-12-05 06:03:52 +00:00
let referenceExpandButton = document.createElement('button');
referenceExpandButton.classList.add("reference-expand-button");
2023-11-20 23:19:15 +00:00
2023-12-05 06:03:52 +00:00
let referenceSection = document.createElement('div');
referenceSection.classList.add("reference-section");
referenceSection.classList.add("collapsed");
2023-11-20 23:19:15 +00:00
2023-12-05 06:03:52 +00:00
let numReferences = 0;
2023-11-20 23:19:15 +00:00
2023-12-05 06:03:52 +00:00
// If rawReferenceAsJson is a list, then count the length
if (Array.isArray(rawReferenceAsJson)) {
numReferences = rawReferenceAsJson.length;
2023-12-05 05:41:16 +00:00
2023-12-05 06:03:52 +00:00
rawReferenceAsJson.forEach((reference, index) => {
let polishedReference = generateReference(reference, index);
referenceSection.appendChild(polishedReference);
});
2023-09-06 19:04:18 +00:00
} else {
2023-12-05 06:03:52 +00:00
numReferences += processOnlineReferences(referenceSection, rawReferenceAsJson);
2023-12-05 05:41:16 +00:00
}
2023-12-05 06:03:52 +00:00
references.appendChild(referenceExpandButton);
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");
2023-11-25 05:55:16 +00:00
}
2023-12-05 06:03:52 +00:00
});
let expandButtonText = numReferences == 1 ? "1 reference" : `${numReferences} references`;
referenceExpandButton.innerHTML = expandButtonText;
references.appendChild(referenceSection);
readStream();
} else {
// Display response from Khoj
if (newResponseText.getElementsByClassName("spinner").length > 0) {
newResponseText.removeChild(loadingSpinner);
}
// Try to parse the chunk as a JSON object. It will be a JSON object if there is an error.
if (chunk.startsWith("{") & & chunk.endsWith("}")) {
try {
const responseAsJson = JSON.parse(chunk);
if (responseAsJson.image) {
2023-12-17 15:32:55 +00:00
// If response has image field, response is a generated image.
2023-12-05 06:03:52 +00:00
rawResponse += ``;
2023-12-17 15:32:55 +00:00
rawResponse += "\n\n";
const inferredQueries = responseAsJson.inferredQueries?.[0];
if (inferredQueries) {
rawResponse += `**Inferred Query**: ${inferredQueries}`;
}
2023-12-05 06:03:52 +00:00
}
if (responseAsJson.detail) {
rawResponse += responseAsJson.detail;
}
} catch (error) {
// If the chunk is not a JSON object, just display it as is
rawResponse += chunk;
} finally {
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse));
2023-12-05 05:41:16 +00:00
}
2023-12-05 06:03:52 +00:00
} else {
2023-12-05 05:41:16 +00:00
// If the chunk is not a JSON object, just display it as is
rawResponse += chunk;
newResponseText.innerHTML = "";
newResponseText.appendChild(formatHTMLMessage(rawResponse));
2023-12-05 06:03:52 +00:00
readStream();
}
2023-12-05 05:41:16 +00:00
}
2023-12-05 06:03:52 +00:00
// Scroll to bottom of chat window as chat response is streamed
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
});
}
2023-12-05 05:41:16 +00:00
}
2023-09-06 19:04:18 +00:00
}
function incrementalChat(event) {
if (!event.shiftKey & & event.key === 'Enter') {
2023-11-04 08:09:35 +00:00
event.preventDefault();
2023-09-06 19:04:18 +00:00
chat();
}
}
function onChatInput() {
let chatInput = document.getElementById("chat-input");
chatInput.value = chatInput.value.trimStart();
2023-11-20 23:21:06 +00:00
let questionStarterSuggestions = document.getElementById("question-starters");
questionStarterSuggestions.style.display = "none";
2023-09-06 19:04:18 +00:00
if (chatInput.value.startsWith("/") & & chatInput.value.split(" ").length === 1) {
let chatTooltip = document.getElementById("chat-tooltip");
chatTooltip.style.display = "block";
let helpText = "< div > ";
const command = chatInput.value.split(" ")[0].substring(1);
for (let key in chatOptions) {
if (!!!command || key.startsWith(command)) {
helpText += "< b > /" + key + "< / b > : " + chatOptions[key] + "< br > ";
}
}
chatTooltip.innerHTML = helpText;
} else if (chatInput.value.startsWith("/")) {
const firstWord = chatInput.value.split(" ")[0];
if (firstWord.substring(1) in chatOptions) {
chatInput.classList.add("option-enabled");
} else {
chatInput.classList.remove("option-enabled");
}
let chatTooltip = document.getElementById("chat-tooltip");
chatTooltip.style.display = "none";
} else {
let chatTooltip = document.getElementById("chat-tooltip");
chatTooltip.style.display = "none";
chatInput.classList.remove("option-enabled");
}
autoResize();
}
function autoResize() {
const textarea = document.getElementById('chat-input');
const scrollTop = textarea.scrollTop;
textarea.style.height = '0';
2024-01-19 15:10:04 +00:00
const scrollHeight = textarea.scrollHeight + 8; // +8 accounts for padding
2023-09-06 19:04:18 +00:00
textarea.style.height = Math.min(scrollHeight, 200) + 'px';
textarea.scrollTop = scrollTop;
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
}
window.addEventListener('load', async() => {
await loadChat();
});
async function loadChat() {
const hostURL = await window.hostURLAPI.getURL();
2023-10-26 19:33:03 +00:00
const khojToken = await window.tokenAPI.getToken();
const headers = { 'Authorization': `Bearer ${khojToken}` };
2023-11-20 23:19:15 +00:00
fetch(`${hostURL}/api/chat/history?client=desktop`, { headers })
2023-09-06 19:04:18 +00:00
.then(response => response.json())
.then(data => {
if (data.detail) {
// If the server returns a 500 error with detail, render a setup hint.
2023-11-16 06:33:50 +00:00
first_run_message = `Hi 👋🏾, to get started:
< ol >
< li > Generate an API token in the < a class = 'inline-chat-link' href = "#" onclick = "window.navigateAPI.navigateToWebSettings()" > Khoj Web settings< / a > < / li >
< li > Paste it into the API Key field in the < a class = 'inline-chat-link' href = "#" onclick = "window.navigateAPI.navigateToSettings()" > Khoj Desktop settings< / a > < / li >
< / ol > `
.trim()
.replace(/(\r\n|\n|\r)/gm, "");
2023-12-18 15:01:50 +00:00
renderMessage(first_run_message, "khoj", null, null, true);
2023-09-06 19:04:18 +00:00
// Disable chat input field and update placeholder text
document.getElementById("chat-input").setAttribute("disabled", "disabled");
document.getElementById("chat-input").setAttribute("placeholder", "Configure Khoj to enable chat");
} else {
// Set welcome message on load
renderMessage("Hey 👋🏾, what's up?", "khoj");
}
return data.response;
})
.then(response => {
// Render conversation history, if any
response.forEach(chat_log => {
2023-12-17 15:32:55 +00:00
renderMessageWithReference(chat_log.message, chat_log.by, chat_log.context, new Date(chat_log.created), chat_log.onlineContext, chat_log.intent?.type, chat_log.intent?.["inferred-queries"]);
2023-09-06 19:04:18 +00:00
});
})
.catch(err => {
return;
});
2023-11-20 23:21:06 +00:00
fetch(`${hostURL}/api/chat/starters?client=desktop`, { headers })
.then(response => response.json())
.then(data => {
// Render chat options, if any
2024-01-19 21:57:18 +00:00
if (data.length > 0) {
2023-11-20 23:21:06 +00:00
let questionStarterSuggestions = document.getElementById("question-starters");
for (let index in data) {
let questionStarter = data[index];
let questionStarterButton = document.createElement('button');
questionStarterButton.innerHTML = questionStarter;
questionStarterButton.classList.add("question-starter");
questionStarterButton.addEventListener('click', function() {
questionStarterSuggestions.style.display = "none";
document.getElementById("chat-input").value = questionStarter;
chat();
});
questionStarterSuggestions.appendChild(questionStarterButton);
}
questionStarterSuggestions.style.display = "grid";
}
})
.catch(err => {
return;
});
2023-10-26 19:33:03 +00:00
fetch(`${hostURL}/api/chat/options`, { headers })
2023-09-06 19:04:18 +00:00
.then(response => response.json())
.then(data => {
// Render chat options, if any
if (data) {
chatOptions = data;
}
})
.catch(err => {
return;
});
// Fill query field with value passed in URL query parameters, if any.
var query_via_url = new URLSearchParams(window.location.search).get("q");
if (query_via_url) {
document.getElementById("chat-input").value = query_via_url;
chat();
}
}
2023-11-22 11:18:29 +00:00
2023-11-26 09:08:38 +00:00
function flashStatusInChatInput(message) {
// Get chat input element and original placeholder
let chatInput = document.getElementById("chat-input");
let originalPlaceholder = chatInput.placeholder;
// Set placeholder to message
chatInput.placeholder = message;
// Reset placeholder after 2 seconds
setTimeout(() => {
chatInput.placeholder = originalPlaceholder;
}, 2000);
}
2023-11-22 11:18:29 +00:00
async function clearConversationHistory() {
let chatInput = document.getElementById("chat-input");
let originalPlaceholder = chatInput.placeholder;
let chatBody = document.getElementById("chat-body");
const hostURL = await window.hostURLAPI.getURL();
const khojToken = await window.tokenAPI.getToken();
const headers = { 'Authorization': `Bearer ${khojToken}` };
fetch(`${hostURL}/api/chat/history?client=desktop`, { method: "DELETE", headers })
.then(response => response.ok ? response.json() : Promise.reject(response))
.then(data => {
chatBody.innerHTML = "";
loadChat();
2023-11-26 09:08:38 +00:00
flashStatusInChatInput("🗑 Cleared conversation history");
2023-11-22 11:18:29 +00:00
})
.catch(err => {
2023-11-26 09:08:38 +00:00
flashStatusInChatInput("⛔️ Failed to clear conversation history");
2023-11-22 11:18:29 +00:00
})
}
2023-11-26 08:26:21 +00:00
2024-01-20 07:24:31 +00:00
let sendMessageTimeout;
2023-11-22 10:19:22 +00:00
let mediaRecorder;
2024-01-20 07:24:31 +00:00
async function speechToText(event) {
event.preventDefault();
2023-11-22 10:19:22 +00:00
const speakButtonImg = document.getElementById('speak-button-img');
2024-01-19 15:10:04 +00:00
const stopRecordButtonImg = document.getElementById('stop-record-button-img');
2024-01-20 07:24:31 +00:00
const sendButtonImg = document.getElementById('send-button-img');
const stopSendButtonImg = document.getElementById('stop-send-button-img');
2023-11-22 10:19:22 +00:00
const chatInput = document.getElementById('chat-input');
const hostURL = await window.hostURLAPI.getURL();
2023-11-26 13:58:07 +00:00
let url = `${hostURL}/api/transcribe?client=desktop`;
2023-11-22 10:19:22 +00:00
const khojToken = await window.tokenAPI.getToken();
const headers = { 'Authorization': `Bearer ${khojToken}` };
const sendToServer = (audioBlob) => {
const formData = new FormData();
formData.append('file', audioBlob);
fetch(url, { method: 'POST', body: formData, headers})
.then(response => response.ok ? response.json() : Promise.reject(response))
2024-01-19 14:35:29 +00:00
.then(data => { chatInput.value += data.text.trimStart(); autoResize(); })
2024-01-20 07:24:31 +00:00
.then(() => {
// Don't auto-send empty messages
if (chatInput.value.length === 0) return;
// Send message after 3 seconds, unless stop send button is clicked
sendButtonImg.style.display = 'none';
stopSendButtonImg.style.display = 'initial';
// Start the countdown timer UI
document.getElementById('countdown-circle').style.animation = "countdown 3s linear 1 forwards";
sendMessageTimeout = setTimeout(() => {
// Revert to showing send-button and hide the stop-send-button
sendButtonImg.style.display = 'initial';
stopSendButtonImg.style.display = 'none';
// Stop the countdown timer UI
document.getElementById('countdown-circle').style.animation = "none";
// Send message
chat();
}, 3000);
})
2023-11-26 09:08:38 +00:00
.catch(err => {
2023-12-05 06:29:36 +00:00
if (err.status === 501) {
flashStatusInChatInput("⛔️ Configure speech-to-text model on server.")
} else if (err.status === 422) {
flashStatusInChatInput("⛔️ Audio file to large to process.")
} else {
flashStatusInChatInput("⛔️ Failed to transcribe audio.")
}
2023-11-26 09:08:38 +00:00
});
2023-11-22 10:19:22 +00:00
};
const handleRecording = (stream) => {
const audioChunks = [];
const recordingConfig = { mimeType: 'audio/webm' };
mediaRecorder = new MediaRecorder(stream, recordingConfig);
mediaRecorder.addEventListener("dataavailable", function(event) {
if (event.data.size > 0) audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", function() {
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
sendToServer(audioBlob);
2023-11-22 11:18:29 +00:00
});
2023-11-22 10:19:22 +00:00
mediaRecorder.start();
2024-01-19 15:10:04 +00:00
speakButtonImg.style.display = 'none';
stopRecordButtonImg.style.display = 'initial';
2023-11-22 10:19:22 +00:00
};
// Toggle recording
2024-01-20 15:58:20 +00:00
if (!mediaRecorder || mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
2023-11-22 10:19:22 +00:00
navigator.mediaDevices
2024-01-20 15:58:20 +00:00
?.getUserMedia({ audio: true })
2023-11-22 10:19:22 +00:00
.then(handleRecording)
.catch((e) => {
2023-11-26 09:08:38 +00:00
flashStatusInChatInput("⛔️ Failed to access microphone");
2023-11-22 10:19:22 +00:00
});
2024-01-20 15:58:20 +00:00
} else if (mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
2023-11-22 10:19:22 +00:00
mediaRecorder.stop();
2023-11-27 04:33:26 +00:00
mediaRecorder.stream.getTracks().forEach(track => track.stop());
mediaRecorder = null;
2024-01-19 15:10:04 +00:00
speakButtonImg.style.display = 'initial';
stopRecordButtonImg.style.display = 'none';
2023-11-22 10:19:22 +00:00
}
2023-11-22 11:18:29 +00:00
}
2023-11-22 10:19:22 +00:00
2024-01-20 07:24:31 +00:00
function cancelSendMessage() {
// Cancel the chat() call if the stop-send-button is clicked
clearTimeout(sendMessageTimeout);
// Revert to showing send-button and hide the stop-send-button
document.getElementById('stop-send-button-img').style.display = 'none';
document.getElementById('send-button-img').style.display = 'initial';
// Stop the countdown timer UI
document.getElementById('countdown-circle').style.animation = "none";
};
2023-09-06 19:04:18 +00:00
< / script >
< body >
2023-11-05 00:17:04 +00:00
< div id = "khoj-empty-container" class = "khoj-empty-container" >
2023-09-06 19:04:18 +00:00
< / div >
2023-11-05 00:17:04 +00:00
2023-09-06 19:04:18 +00:00
<!-- Add Header Logo and Nav Pane -->
< div class = "khoj-header" >
< a class = "khoj-logo" href = "/" >
< img class = "khoj-logo" src = "./assets/icons/khoj-logo-sideways-500.png" alt = "Khoj" > < / img >
< / a >
< nav class = "khoj-nav" >
2023-10-26 19:33:03 +00:00
< a class = "khoj-nav khoj-nav-selected" href = "./chat.html" > 💬 Chat< / a >
2023-11-03 03:40:35 +00:00
< a class = "khoj-nav" href = "./search.html" > 🔎 Search< / a >
2023-10-26 19:33:03 +00:00
< a class = "khoj-nav" href = "./config.html" > ⚙️ Settings< / a >
2023-09-06 19:04:18 +00:00
< / nav >
< / div >
<!-- Chat Body -->
< div id = "chat-body" > < / div >
2023-11-20 23:21:06 +00:00
<!-- Chat Suggestions -->
< div id = "question-starters" style = "display: none;" > < / div >
2023-09-06 19:04:18 +00:00
<!-- Chat Footer -->
< div id = "chat-footer" >
< div id = "chat-tooltip" style = "display: none;" > < / div >
2023-11-22 11:18:29 +00:00
< div id = "input-row" >
2024-01-19 15:10:04 +00:00
< button id = "clear-chat-button" class = "input-row-button" onclick = "clearConversationHistory()" >
< svg class = "input-row-button-img" alt = "Clear Chat History" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 256 256" >
< rect width = "128" height = "128" fill = "none" / >
< line x1 = "216" y1 = "56" x2 = "40" y2 = "56" fill = "none" stroke = "#000" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "12" / >
< line x1 = "104" y1 = "104" x2 = "104" y2 = "168" fill = "none" stroke = "#000" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "12" / >
< line x1 = "152" y1 = "104" x2 = "152" y2 = "168" fill = "none" stroke = "#000" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "12" / >
< path d = "M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill = "none" stroke = "#000" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "12" / >
< path d = "M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56" fill = "none" stroke = "#000" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "12" / >
< / svg >
< / button >
< textarea id = "chat-input" class = "option" oninput = "onChatInput()" onkeydown = incrementalChat(event) autofocus = "autofocus" placeholder = "Message" > < / textarea >
2024-01-20 07:24:31 +00:00
< button id = "speak-button" class = "input-row-button"
2024-01-20 15:58:20 +00:00
ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
2024-01-19 15:10:04 +00:00
< svg id = "speak-button-img" class = "input-row-button-img" alt = "Transcribe" xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16" >
< path d = "M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z" / >
< path d = "M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z" / >
< / svg >
< svg id = "stop-record-button-img" style = "display: none" class = "input-row-button-img" alt = "Stop Transcribing" xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16" >
< path d = "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" / >
< path d = "M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z" / >
< / svg >
2023-11-26 08:26:21 +00:00
< / button >
2024-01-20 07:24:31 +00:00
< button id = "send-button" class = "input-row-button" alt = "Send message" >
< svg id = "send-button-img" onclick = "chat()" class = "input-row-button-img" xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16" >
2024-01-19 15:10:04 +00:00
< path fill-rule = "evenodd" d = "M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" / >
< / svg >
2024-01-20 07:24:31 +00:00
< svg id = "stop-send-button-img" onclick = "cancelSendMessage()" style = "display: none" class = "input-row-button-img" alt = "Stop Message Send" xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" viewBox = "0 0 16 16" >
< circle id = "countdown-circle" class = "countdown-circle" cx = "8" cy = "8" r = "7" / >
< path d = "M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z" / >
< / svg >
2023-11-22 11:18:29 +00:00
< / button >
< / div >
2023-09-06 19:04:18 +00:00
< / div >
< / body >
< style >
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
body {
display: grid;
2023-11-03 07:14:07 +00:00
background: var(--background-color);
2023-11-04 05:14:00 +00:00
color: var(--main-text-color);
2023-09-06 19:04:18 +00:00
text-align: center;
2024-01-20 17:43:33 +00:00
font-family: var(--font-family);
2023-09-06 19:04:18 +00:00
font-size: small;
font-weight: 300;
line-height: 1.5em;
}
body > * {
padding: 10px;
margin: 10px;
}
#chat-body {
font-size: small;
margin: 0px;
line-height: 20px;
overflow-y: scroll; /* Make chat body scroll to see history */
}
/* add chat metatdata to bottom of bubble */
.chat-message::after {
content: attr(data-meta);
display: block;
font-size: x-small;
color: #475569;
margin: -8px 4px 0 -5px;
}
/* move message by khoj to left */
.chat-message.khoj {
margin-left: auto;
text-align: left;
}
/* move message by you to right */
.chat-message.you {
margin-right: auto;
text-align: right;
}
/* basic style chat message text */
.chat-message-text {
margin: 10px;
border-radius: 10px;
padding: 10px;
position: relative;
display: inline-block;
max-width: 80%;
text-align: left;
}
/* color chat bubble by khoj blue */
.chat-message-text.khoj {
color: var(--primary-inverse);
background: var(--primary);
margin-left: auto;
}
/* Spinner symbol when the chat message is loading */
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid var(--primary-inverse);
border-radius: 50%;
width: 12px;
height: 12px;
animation: spin 2s linear infinite;
margin: 0px 0px 0px 10px;
display: inline-block;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* add left protrusion to khoj chat bubble */
.chat-message-text.khoj:after {
content: '';
position: absolute;
bottom: -2px;
left: -7px;
border: 10px solid transparent;
border-top-color: var(--primary);
border-bottom: 0;
transform: rotate(-60deg);
}
/* color chat bubble by you dark grey */
.chat-message-text.you {
color: #f8fafc;
background: #475569;
margin-right: auto;
}
/* add right protrusion to you chat bubble */
.chat-message-text.you:after {
content: '';
position: absolute;
top: 91%;
right: -2px;
border: 10px solid transparent;
border-left-color: #475569;
border-right: 0;
margin-top: -10px;
transform: rotate(-60deg)
}
2023-12-05 01:56:35 +00:00
img.text-to-image {
max-width: 60%;
}
2023-09-06 19:04:18 +00:00
#chat-footer {
padding: 0;
2023-11-22 11:18:29 +00:00
margin: 8px;
2023-09-06 19:04:18 +00:00
display: grid;
grid-template-columns: minmax(70px, 100%);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
2023-11-22 11:18:29 +00:00
#input-row {
display: grid;
2024-01-19 15:10:04 +00:00
grid-template-columns: 32px auto 32px 40px;
2023-11-22 11:18:29 +00:00
grid-column-gap: 10px;
grid-row-gap: 10px;
2024-01-19 14:35:29 +00:00
background: #f9fafc;
align-items: center;
2023-09-06 19:04:18 +00:00
}
.option:hover {
box-shadow: 0 0 11px #aaa;
}
#chat-input {
2024-01-20 17:43:33 +00:00
font-family: var(--font-family);
2023-09-06 19:04:18 +00:00
font-size: small;
2024-01-19 15:10:04 +00:00
height: 36px;
border-radius: 16px;
2023-09-06 19:04:18 +00:00
resize: none;
overflow-y: hidden;
max-height: 200px;
box-sizing: border-box;
2024-01-19 15:10:04 +00:00
padding: 7px 0 0 12px;
2023-09-06 19:04:18 +00:00
line-height: 1.5em;
margin: 0;
}
#chat-input:focus {
outline: none !important;
}
2023-11-22 11:18:29 +00:00
.input-row-button {
background: var(--background-color);
2024-01-19 15:10:04 +00:00
border: none;
box-shadow: none;
border-radius: 50%;
2023-11-22 11:18:29 +00:00
font-size: 14px;
font-weight: 300;
2023-12-17 15:32:55 +00:00
padding: 0;
2023-11-22 11:18:29 +00:00
line-height: 1.5em;
cursor: pointer;
transition: background 0.3s ease-in-out;
2024-01-19 15:10:04 +00:00
width: 40px;
height: 40px;
margin-top: -2px;
margin-left: -5px;
2023-11-22 11:18:29 +00:00
}
.input-row-button:hover {
background: var(--primary-hover);
}
.input-row-button:active {
background: var(--primary-active);
}
.input-row-button-img {
width: 24px;
2024-01-19 15:10:04 +00:00
height: 24px;
}
#send-button {
2024-01-20 07:24:31 +00:00
padding: 0;
position: relative;
2024-01-19 15:10:04 +00:00
}
#send-button-img {
width: 28px;
height: 28px;
background: var(--primary-hover);
border-radius: 50%;
2023-11-22 11:18:29 +00:00
}
2024-01-20 07:24:31 +00:00
#stop-send-button-img {
position: absolute;
top: 6px;
right: 6px;
width: 28px;
height: 28px;
transform: rotateY(-180deg) rotateZ(-90deg);
}
#countdown-circle {
stroke-dasharray: 44px; /* The circumference of the circle with 7px radius */
stroke-dashoffset: 0px;
stroke-linecap: round;
stroke-width: 1px;
stroke: var(--main-text-color);
fill: none;
}
@keyframes countdown {
from {
stroke-dashoffset: 0px;
}
to {
stroke-dashoffset: -44px; /* The circumference of the circle with 7px radius */
}
}
2023-09-06 19:04:18 +00:00
.option-enabled {
box-shadow: 0 0 12px rgb(119, 156, 46);
}
2023-11-07 00:18:41 +00:00
div.collapsed {
display: none;
}
div.expanded {
display: block;
}
div.reference {
display: grid;
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 10px;
}
div.expanded.reference-section {
display: grid;
grid-template-rows: auto;
grid-auto-flow: row;
grid-column-gap: 10px;
grid-row-gap: 10px;
margin: 10px;
}
2023-11-20 23:21:06 +00:00
div#question-starters {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-column-gap: 8px;
}
button.question-starter {
background: var(--background-color);
color: var(--main-text-color);
border: 1px solid var(--main-text-color);
2024-01-19 19:19:22 +00:00
border-radius: 16px;
2023-11-20 23:21:06 +00:00
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
cursor: pointer;
transition: background 0.2s ease-in-out;
text-align: left;
max-height: 75px;
transition: max-height 0.3s ease-in-out;
overflow: hidden;
}
2024-01-19 19:19:22 +00:00
button.question-starter:hover {
background: var(--primary-hover);
}
2023-11-20 23:21:06 +00:00
2023-11-17 19:04:36 +00:00
code.chat-response {
background: var(--primary-hover);
color: var(--primary-inverse);
border-radius: 5px;
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
}
2023-11-07 00:18:41 +00:00
button.reference-button {
background: var(--background-color);
color: var(--main-text-color);
border: 1px solid var(--main-text-color);
border-radius: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
cursor: pointer;
transition: background 0.2s ease-in-out;
text-align: left;
2023-11-11 02:29:52 +00:00
max-height: 75px;
2023-11-07 00:18:41 +00:00
transition: max-height 0.3s ease-in-out;
overflow: hidden;
}
button.reference-button.expanded {
2023-11-11 01:49:20 +00:00
max-height: none;
2023-11-30 21:16:48 +00:00
white-space: pre-wrap;
2023-11-07 00:18:41 +00:00
}
button.reference-button::before {
content: "▶";
margin-right: 5px;
display: inline-block;
transition: transform 0.3s ease-in-out;
}
button.reference-button:active:before,
button.reference-button[aria-expanded="true"]::before {
transform: rotate(90deg);
}
button.reference-expand-button {
background: var(--background-color);
color: var(--main-text-color);
border: 1px dotted var(--main-text-color);
border-radius: 5px;
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
cursor: pointer;
transition: background 0.4s ease-in-out;
text-align: left;
}
button.reference-expand-button:hover {
background: var(--primary-hover);
}
2023-09-06 19:04:18 +00:00
.option-enabled:focus {
outline: none !important;
border:1px solid #475569;
box-shadow: 0 0 16px var(--primary);
}
a.inline-chat-link {
color: #475569;
text-decoration: none;
border-bottom: 1px dotted #475569;
}
2023-11-27 19:45:36 +00:00
a.reference-link {
color: var(--main-text-color);
border-bottom: 1px dotted var(--main-text-color);
}
button.copy-button {
display: block;
border-radius: 4px;
background-color: var(--background-color);
}
button.copy-button:hover {
background: #f5f5f5;
cursor: pointer;
}
pre {
text-wrap: unset;
}
2023-11-05 00:17:04 +00:00
div.khoj-empty-container {
padding: 0;
margin: 0;
}
2023-09-06 19:04:18 +00:00
@media (pointer: coarse), (hover: none) {
abbr[title] {
position: relative;
padding-left: 4px; /* space references out to ease tapping */
}
abbr[title]:focus:after {
content: attr(title);
/* position tooltip */
position: absolute;
left: 16px; /* open tooltip to right of ref link, instead of on top of it */
width: auto;
z-index: 1; /* show tooltip above chat messages */
/* style tooltip */
background-color: #aaa;
color: #f8fafc;
border-radius: 2px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
2024-01-19 15:10:04 +00:00
font-size: small;
2023-09-06 19:04:18 +00:00
padding: 2px 4px;
}
}
@media only screen and (max-width: 600px) {
body {
grid-template-columns: 1fr;
grid-template-rows: auto auto minmax(80px, 100%) auto;
}
body > * {
grid-column: 1;
}
#chat-footer {
padding: 0;
margin: 4px;
grid-template-columns: auto;
}
2023-12-05 01:56:35 +00:00
img.text-to-image {
max-width: 100%;
}
2024-01-19 15:10:04 +00:00
#clear-chat-button {
margin-left: 0;
}
2023-09-06 19:04:18 +00:00
}
@media only screen and (min-width: 600px) {
body {
grid-template-columns: auto min(70vw, 100%) auto;
grid-template-rows: auto auto minmax(80px, 100%) auto;
}
body > * {
grid-column: 2;
}
}
div#chat-tooltip {
text-align: left;
font-size: medium;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
a.khoj-logo {
text-align: center;
}
2023-11-27 19:45:36 +00:00
p {
margin: 0;
}
2023-09-06 19:04:18 +00:00
div.programmatic-output {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
color: #333;
font-family: monospace;
font-size: small;
line-height: 1.5;
margin: 10px 0;
overflow-x: auto;
padding: 10px;
white-space: pre-wrap;
}
< / style >
< / html >
