mirror of
https://github.com/khoj-ai/khoj.git
synced 2025-02-17 08:04:21 +00:00
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
This commit is contained in:
Debanjum Singh Solanky
parent
924b1215ce
commit
ec0c35b7ed
2 changed files with 34 additions and 25 deletions
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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");
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue