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

Improve delete, rename chat session UX in Desktop, Web app

Browse Source 
- Ask for Confirmation before deleting chat session in Desktop, Web app
- Save chat session rename on hitting enter in title edit input box
- No need to flash previous conversation cleared status message
- Move chat session delete button after rename button in Desktop app
This commit is contained in:
Debanjum Singh Solanky
2024-03-15 13:49:47 +05:30
parent 924b1215ce
commit ec0c35b7ed
2 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -794,7 +794,6 @@
chatBody.dataset.conversationId = ""; chatBody.dataset.conversationId = "";
chatBody.dataset.conversationTitle = ""; chatBody.dataset.conversationTitle = "";
loadChat(); loadChat();
flashStatusInChatInput("🗑 Cleared previous conversation history");
}) })
.catch(err => { .catch(err => {
flashStatusInChatInput("⛔️ Failed to clear conversation history"); flashStatusInChatInput("⛔️ Failed to clear conversation history");
@@ -856,28 +855,6 @@
let conversationMenu = document.createElement('div'); let conversationMenu = document.createElement('div');
conversationMenu.classList.add("conversation-menu"); conversationMenu.classList.add("conversation-menu");
let deleteButton = document.createElement('button');
deleteButton.innerHTML = "Delete";
deleteButton.classList.add("delete-conversation-button");
deleteButton.classList.add("three-dot-menu-button-item");
deleteButton.addEventListener('click', function() {
let deleteURL = `/api/chat/history?client=web&conversation_id=${incomingConversationId}`;
fetch(`${hostURL}${deleteURL}` , { method: "DELETE", headers })
.then(response => response.ok ? response.json() : Promise.reject(response))
.then(data => {
let chatBody = document.getElementById("chat-body");
chatBody.innerHTML = "";
chatBody.dataset.conversationId = "";
chatBody.dataset.conversationTitle = "";
loadChat();
})
.catch(err => {
return;
});
});
conversationMenu.appendChild(deleteButton);
threeDotMenu.appendChild(conversationMenu);
let editTitleButton = document.createElement('button'); let editTitleButton = document.createElement('button');
editTitleButton.innerHTML = "Rename"; editTitleButton.innerHTML = "Rename";
editTitleButton.classList.add("edit-title-button"); editTitleButton.classList.add("edit-title-button");
@@ -903,12 +880,13 @@
conversationTitleInput.addEventListener('click', function(event) { conversationTitleInput.addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
});
conversationTitleInput.addEventListener('keydown', function(event) {
if (event.key === "Enter") { if (event.key === "Enter") {
event.preventDefault(); event.preventDefault();
conversationTitleInputButton.click(); conversationTitleInputButton.click();
} }
}); });
conversationTitleInputBox.appendChild(conversationTitleInput); conversationTitleInputBox.appendChild(conversationTitleInput);
let conversationTitleInputButton = document.createElement('button'); let conversationTitleInputButton = document.createElement('button');
conversationTitleInputButton.innerHTML = "Save"; conversationTitleInputButton.innerHTML = "Save";
@@ -931,8 +909,35 @@
conversationTitleInputBox.appendChild(conversationTitleInputButton); conversationTitleInputBox.appendChild(conversationTitleInputButton);
conversationMenu.appendChild(conversationTitleInputBox); conversationMenu.appendChild(conversationTitleInputBox);
}); });
conversationMenu.appendChild(editTitleButton); conversationMenu.appendChild(editTitleButton);
threeDotMenu.appendChild(conversationMenu); threeDotMenu.appendChild(conversationMenu);
let deleteButton = document.createElement('button');
deleteButton.innerHTML = "Delete";
deleteButton.classList.add("delete-conversation-button");
deleteButton.classList.add("three-dot-menu-button-item");
deleteButton.addEventListener('click', function() {
// Ask for confirmation before deleting chat session
let confirmation = confirm('Are you sure you want to delete this chat session?');
if (!confirmation) return;
let deleteURL = `/api/chat/history?client=web&conversation_id=${incomingConversationId}`;
fetch(`${hostURL}${deleteURL}` , { method: "DELETE", headers })
.then(response => response.ok ? response.json() : Promise.reject(response))
.then(data => {
let chatBody = document.getElementById("chat-body");
chatBody.innerHTML = "";
chatBody.dataset.conversationId = "";
chatBody.dataset.conversationTitle = "";
loadChat();
})
.catch(err => {
return;
});
});
conversationMenu.appendChild(deleteButton);
threeDotMenu.appendChild(conversationMenu);
}); });
threeDotMenu.appendChild(threeDotMenuButton); threeDotMenu.appendChild(threeDotMenuButton);
conversationButton.appendChild(threeDotMenu); conversationButton.appendChild(threeDotMenu);

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

@@ -1008,6 +1008,8 @@ To get started, just start typing below. You can also type / to see a list of co
conversationTitleInput.addEventListener('click', function(event) { conversationTitleInput.addEventListener('click', function(event) {
event.stopPropagation(); event.stopPropagation();
});
conversationTitleInput.addEventListener('keydown', function(event) {
if (event.key === "Enter") { if (event.key === "Enter") {
event.preventDefault(); event.preventDefault();
conversationTitleInputButton.click(); conversationTitleInputButton.click();
@@ -1044,6 +1046,9 @@ To get started, just start typing below. You can also type / to see a list of co
deleteButton.classList.add("delete-conversation-button"); deleteButton.classList.add("delete-conversation-button");
deleteButton.classList.add("three-dot-menu-button-item"); deleteButton.classList.add("three-dot-menu-button-item");
deleteButton.addEventListener('click', function() { deleteButton.addEventListener('click', function() {
// Ask for confirmation before deleting chat session
let confirmation = confirm('Are you sure you want to delete this chat session?');
if (!confirmation) return;
let deleteURL = `/api/chat/history?client=web&conversation_id=${incomingConversationId}`; let deleteURL = `/api/chat/history?client=web&conversation_id=${incomingConversationId}`;
fetch(deleteURL , { method: "DELETE" }) fetch(deleteURL , { method: "DELETE" })
.then(response => response.ok ? response.json() : Promise.reject(response)) .then(response => response.ok ? response.json() : Promise.reject(response))
@@ -1053,7 +1058,6 @@ To get started, just start typing below. You can also type / to see a list of co
chatBody.dataset.conversationId = ""; chatBody.dataset.conversationId = "";
chatBody.dataset.conversationTitle = ""; chatBody.dataset.conversationTitle = "";
loadChat(); loadChat();
flashStatusInChatInput("🗑 Cleared previous conversation history");
}) })
.catch(err => { .catch(err => {
flashStatusInChatInput("⛔️ Failed to clear conversation history"); flashStatusInChatInput("⛔️ Failed to clear conversation history");