From ec0c35b7edf89d498dc6303605c9557571498a4e Mon Sep 17 00:00:00 2001 From: Debanjum Singh Solanky Date: Fri, 15 Mar 2024 13:49:47 +0530 Subject: [PATCH] Improve delete, rename chat session UX in Desktop, Web app - 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 --- src/interface/desktop/chat.html | 53 +++++++++++++++++--------------- src/khoj/interface/web/chat.html | 6 +++- 2 files changed, 34 insertions(+), 25 deletions(-) diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index c1341290..94cde782 100644 --- a/src/interface/desktop/chat.html +++ b/src/interface/desktop/chat.html @@ -794,7 +794,6 @@ chatBody.dataset.conversationId = ""; chatBody.dataset.conversationTitle = ""; loadChat(); - flashStatusInChatInput("🗑 Cleared previous conversation history"); }) .catch(err => { flashStatusInChatInput("⛔️ Failed to clear conversation history"); @@ -856,28 +855,6 @@ let conversationMenu = document.createElement('div'); 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'); editTitleButton.innerHTML = "Rename"; editTitleButton.classList.add("edit-title-button"); @@ -903,12 +880,13 @@ conversationTitleInput.addEventListener('click', function(event) { event.stopPropagation(); + }); + conversationTitleInput.addEventListener('keydown', function(event) { if (event.key === "Enter") { event.preventDefault(); conversationTitleInputButton.click(); } }); - conversationTitleInputBox.appendChild(conversationTitleInput); let conversationTitleInputButton = document.createElement('button'); conversationTitleInputButton.innerHTML = "Save"; @@ -931,8 +909,35 @@ conversationTitleInputBox.appendChild(conversationTitleInputButton); conversationMenu.appendChild(conversationTitleInputBox); }); + conversationMenu.appendChild(editTitleButton); 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); conversationButton.appendChild(threeDotMenu); diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html index c251bff2..35047c31 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -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) { event.stopPropagation(); + }); + conversationTitleInput.addEventListener('keydown', function(event) { if (event.key === "Enter") { event.preventDefault(); 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("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(deleteURL , { method: "DELETE" }) .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.conversationTitle = ""; loadChat(); - flashStatusInChatInput("🗑 Cleared previous conversation history"); }) .catch(err => { flashStatusInChatInput("⛔️ Failed to clear conversation history");