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

Clear Conversation History from the Desktop Client

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2023-11-22 03:18:29 -08:00
parent 3096544cf2
commit d5a4830761
2 changed files with 59 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/interface/desktop/assets/icons/trash-solid.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 503 B

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

@@ -377,6 +377,32 @@
chat(); chat();
} }
} }
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();
chatInput.placeholder = "Cleared conversation history";
})
.catch(err => {
chatInput.placeholder = "Failed to clear conversation history";
})
.finally(() => {
setTimeout(() => {
chatInput.placeholder = originalPlaceholder;
}, 2000);
});
}
</script> </script>
<body> <body>
<div id="khoj-empty-container" class="khoj-empty-container"> <div id="khoj-empty-container" class="khoj-empty-container">
@@ -400,7 +426,12 @@
<!-- Chat Footer --> <!-- Chat Footer -->
<div id="chat-footer"> <div id="chat-footer">
<div id="chat-tooltip" style="display: none;"></div> <div id="chat-tooltip" style="display: none;"></div>
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea> <div id="input-row">
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
<button class="input-row-button" onclick="clearConversationHistory()">
<img class="input-rown-button-img" src="./assets/icons/trash-solid.svg" alt="Clear Chat History"></img>
</button>
</div>
</div> </div>
</body> </body>
@@ -514,15 +545,17 @@
#chat-footer { #chat-footer {
padding: 0; padding: 0;
margin: 8px;
display: grid; display: grid;
grid-template-columns: minmax(70px, 100%); grid-template-columns: minmax(70px, 100%);
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 10px; grid-row-gap: 10px;
} }
#chat-footer > * { #input-row {
padding: 15px; display: grid;
border-radius: 5px; grid-template-columns: auto 32px;
border: 1px solid #475569; grid-column-gap: 10px;
grid-row-gap: 10px;
background: #f9fafc background: #f9fafc
} }
.option:hover { .option:hover {
@@ -543,6 +576,26 @@
#chat-input:focus { #chat-input:focus {
outline: none !important; outline: none !important;
} }
.input-row-button {
background: var(--background-color);
border: none;
border-radius: 5px;
padding: 5px;
font-size: 14px;
font-weight: 300;
line-height: 1.5em;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.input-row-button:hover {
background: var(--primary-hover);
}
.input-row-button:active {
background: var(--primary-active);
}
.input-row-button-img {
width: 24px;
}
.option-enabled { .option-enabled {
box-shadow: 0 0 12px rgb(119, 156, 46); box-shadow: 0 0 12px rgb(119, 156, 46);