Clear Conversation History from the Web Client

This commit is contained in:
Debanjum Singh Solanky 2023-11-22 03:20:12 -08:00
parent d5a4830761
commit fd60db766e

View file

@ -322,7 +322,9 @@ To get started, just start typing below. You can also type / to see a list of co
document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
}
window.onload = function () {
window.onload = loadChat;
function loadChat() {
fetch('/api/chat/history?client=web')
.then(response => response.json())
.then(data => {
@ -369,6 +371,28 @@ To get started, just start typing below. You can also type / to see a list of co
chat();
}
}
function clearConversationHistory() {
let chatInput = document.getElementById("chat-input");
let originalPlaceholder = chatInput.placeholder;
let chatBody = document.getElementById("chat-body");
fetch(`/api/chat/history?client=web`, { method: "DELETE" })
.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>
<body>
<div id="khoj-empty-container" class="khoj-empty-container">
@ -384,7 +408,12 @@ To get started, just start typing below. You can also type / to see a list of co
<!-- Chat Footer -->
<div id="chat-footer">
<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="/static/assets/icons/trash-solid.svg" alt="Clear Chat History"></img>
</button>
</div>
</div>
</body>
<script>
@ -585,10 +614,11 @@ To get started, just start typing below. You can also type / to see a list of co
grid-column-gap: 10px;
grid-row-gap: 10px;
}
#chat-footer > * {
padding: 15px;
border-radius: 5px;
border: 1px solid var(--main-text-color);
#input-row {
display: grid;
grid-template-columns: auto 32px;
grid-column-gap: 10px;
grid-row-gap: 10px;
background: #f9fafc
}
.option:hover {
@ -609,6 +639,27 @@ To get started, just start typing below. You can also type / to see a list of co
#chat-input:focus {
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 {
box-shadow: 0 0 12px rgb(119, 156, 46);