feat: add delete history button and improved few ui styling

Author: bajrangCoder

src/pages/aiAssistant/assistant.js

@@ -2,6 +2,7 @@ import { isAIMessageChunk } from "@langchain/core/messages";
 import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
 import { MemorySaver } from "@langchain/langgraph-checkpoint";
 import { createReactAgent } from "@langchain/langgraph/prebuilt";
+import confirm from "dialogs/confirm";
 import select from "dialogs/select";
 import he from "he";
 import Ref from "html-tag-js/ref";
@@ -340,26 +341,51 @@ export default function openAIAssistantPage() {
 		if (!historyItemsContainer) return;
 		historyItemsContainer.innerHTML = "";
 		conversations.forEach((conv) => {
-			const item = document.createElement("div");
-			item.className = `history-item ${conv.id === currentConversationId ? "active" : ""}`;
-			item.onclick = () => {
-				if (conv.id !== currentConversationId) {
-					loadOrCreateConversation(conv.id);
-					toggleHistorySidebar();
-				}
-			};
+			const item = (
+				<div
+					className={`history-item ${conv.id === currentConversationId ? "active" : ""}`}
+					onclick={() => {
+						if (conv.id !== currentConversationId) {
+							loadOrCreateConversation(conv.id);
+							toggleHistorySidebar();
+						}
+					}}
+				/>
+			);
+
+			const iconWrapper = (
+				<div className="history-icon">
+					<i
+						className={`icon ${conv.profile === "write" ? "edit" : "chat_bubble"}`}
+					></i>
+				</div>
+			);
 
-			const iconWrapper = document.createElement("div");
-			iconWrapper.className = "history-icon";
-			const icon = document.createElement("i");
-			icon.className = `icon ${conv.profile === "write" ? "edit" : "chat_bubble"}`;
-			iconWrapper.appendChild(icon);
+			const text = (
+				<div className="history-text">{conv.title || "Untitled Chat"}</div>
+			);
 
-			const text = document.createElement("div");
-			text.className = "history-text";
-			text.textContent = conv.title || "Untitled Chat";
+			const deleteBtn = (
+				<button className="btn btn-icon history-delete" title="Delete chat">
+					<i className="icon delete"></i>
+				</button>
+			);
+			deleteBtn.onclick = async (e) => {
+				e.stopPropagation();
+				const confirmation = await confirm(
+					"Delete Chat",
+					`Are you sure you want to delete "<strong>${conv.title || "Untitled Chat"}</strong>"? This action cannot be undone.`,
+					true,
+				);
+				if (!confirmation) return;
+				await deleteConversation(conv.id);
+				if (conv.id === currentConversationId) {
+					await loadOrCreateConversation(null);
+				}
+				await updateHistorySidebar();
+			};
 
-			item.append(iconWrapper, text);
+			item.append(iconWrapper, text, deleteBtn);
 			historyItemsContainer.appendChild(item);
 		});
 	}
@@ -696,9 +722,12 @@ export default function openAIAssistantPage() {
 				>
 					<div className="sidebar-header">
 						<h3 className="sidebar-title">CHAT HISTORY</h3>
-						<button className="btn btn-icon" title="New Chat from Sidebar">
+						<button
+							className="btn btn-icon"
+							title="New Chat from Sidebar"
+							onclick={() => loadOrCreateConversation(null)}
+						>
 							<i className="icon add"></i>
-							{/* onclick={() => loadOrCreateConversation(null)} */}
 						</button>
 					</div>
 					<div className="chat-history">

src/pages/aiAssistant/assistant.module.scss

@@ -92,20 +92,24 @@
         cursor: pointer;
         margin-bottom: 0.25rem;
         transition: all 0.2s ease;
+        position: relative;
 
         &:hover {
           background-color: color-mix(
             in srgb,
-            var(--popup-background-color) 20%,
-            transparent
+            var(--popup-background-color) 70%,
+            white
           );
         }
+        &:hover .history-delete {
+          opacity: 1;
+        }
 
         &.active {
           background-color: color-mix(
             in srgb,
-            var(--popup-background-color) 20%,
-            transparent
+            var(--popup-background-color) 70%,
+            white
           );
         }
 
@@ -123,6 +127,25 @@
           overflow: hidden;
           text-overflow: ellipsis;
         }
+
+        .history-delete {
+          opacity: 0;
+          transition: all 0.2s ease;
+          margin-left: auto;
+          width: 1.25rem;
+          height: 1.25rem;
+          padding: 0;
+          color: color-mix(
+            in srgb,
+            var(--secondary-text-color) 70%,
+            transparent
+          );
+
+          &:hover {
+            color: var(--error-text-color);
+            background-color: rgba(229, 62, 62, 0.1);
+          }
+        }
       }
     }
 
@@ -138,6 +161,55 @@
       width: calc(100% - 240px);
     }
 
+    .edit-container {
+      margin-top: 0.75rem;
+      padding: 0.75rem;
+      background-color: color-mix(
+        in srgb,
+        var(--popup-background-color) 20%,
+        transparent
+      );
+      border-radius: 0.375rem;
+      border: 1px solid var(--border-color);
+    }
+
+    .edit-textarea {
+      width: 100%;
+      min-height: 100px;
+      padding: 0.75rem;
+      background-color: var(--primary-color);
+      border: 1px solid var(--border-color);
+      border-radius: 0.375rem;
+      color: var(--primary-text-color);
+      font-size: 0.875rem;
+      resize: vertical;
+      transition: all 0.2s ease;
+    }
+
+    .edit-textarea:focus {
+      outline: none;
+      border-color: var(--active-color);
+      box-shadow: 0 0 0 2px rgba(35, 116, 225, 0.1);
+    }
+
+    .edit-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 0.75rem;
+      gap: 0.5rem;
+    }
+
+    .edit-info {
+      font-size: 0.75rem;
+      color: color-mix(in srgb, var(--secondary-text-color) 70%, transparent);
+    }
+
+    .edit-buttons {
+      display: flex;
+      gap: 0.5rem;
+    }
+
     .messages-container {
       height: 100%;
       overflow-y: auto;