From 39c08145bcd40e2110e43b9680d36b9b77498872 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 23:24:44 +0000
Subject: [PATCH 1/3] Add confirmation dialog for chat deletion
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Created DeleteChatDialog component with "Are you sure?" message
- Updated ChatHistoryList to show confirmation before deleting chats
- Dialog displays chat title and has Cancel/Delete buttons
- Applies to both regular and archived chats

Fixes #269

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/ChatHistoryList.tsx  | 39 +++++++++++----
 frontend/src/components/DeleteChatDialog.tsx | 51 ++++++++++++++++++++
 2 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/DeleteChatDialog.tsx

diff --git a/frontend/src/components/ChatHistoryList.tsx b/frontend/src/components/ChatHistoryList.tsx
index c86bc3af3..67c1a6152 100644
--- a/frontend/src/components/ChatHistoryList.tsx
+++ b/frontend/src/components/ChatHistoryList.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
 import { RenameChatDialog } from "@/components/RenameChatDialog";
+import { DeleteChatDialog } from "@/components/DeleteChatDialog";
 import { useOpenAI } from "@/ai/useOpenAi";
 import { useOpenSecret } from "@opensecret/react";
 import { useRouter } from "@tanstack/react-router";
@@ -47,6 +48,7 @@ export function ChatHistoryList({
   const queryClient = useQueryClient();
   const localState = useContext(LocalStateContext);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [selectedChat, setSelectedChat] = useState<{ id: string; title: string } | null>(null);
   const [isArchivedExpanded, setIsArchivedExpanded] = useState(false);
 
@@ -330,6 +332,17 @@ export function ChatHistoryList({
     setIsRenameDialogOpen(true);
   }, []);
 
+  const handleOpenDeleteDialog = useCallback((conv: Conversation) => {
+    const title = conv.metadata?.title || "Untitled Chat";
+    setSelectedChat({ id: conv.id, title });
+    setIsDeleteDialogOpen(true);
+  }, []);
+
+  const handleOpenDeleteDialogArchived = useCallback((chat: ArchivedChat) => {
+    setSelectedChat({ id: chat.id, title: chat.title });
+    setIsDeleteDialogOpen(true);
+  }, []);
+
   // Handle conversation renaming via API
   const handleRenameConversation = useCallback(
     async (conversationId: string, newTitle: string) => {
@@ -467,7 +480,7 @@ export function ChatHistoryList({
                   <Pencil className="mr-2 h-4 w-4" />
                   <span>Rename Chat</span>
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleDeleteConversation(conv.id)}>
+                <DropdownMenuItem onClick={() => handleOpenDeleteDialog(conv)}>
                   <Trash className="mr-2 h-4 w-4" />
                   <span>Delete Chat</span>
                 </DropdownMenuItem>
@@ -544,7 +557,7 @@ export function ChatHistoryList({
                           <Pencil className="mr-2 h-4 w-4" />
                           <span>Rename Chat</span>
                         </DropdownMenuItem>
-                        <DropdownMenuItem onClick={() => handleDeleteConversation(chat.id)}>
+                        <DropdownMenuItem onClick={() => handleOpenDeleteDialogArchived(chat)}>
                           <Trash className="mr-2 h-4 w-4" />
                           <span>Delete Chat</span>
                         </DropdownMenuItem>
@@ -560,13 +573,21 @@ export function ChatHistoryList({
       )}
 
       {selectedChat && (
-        <RenameChatDialog
-          open={isRenameDialogOpen}
-          onOpenChange={setIsRenameDialogOpen}
-          chatId={selectedChat.id}
-          currentTitle={selectedChat.title}
-          onRename={handleRenameConversation}
-        />
+        <>
+          <RenameChatDialog
+            open={isRenameDialogOpen}
+            onOpenChange={setIsRenameDialogOpen}
+            chatId={selectedChat.id}
+            currentTitle={selectedChat.title}
+            onRename={handleRenameConversation}
+          />
+          <DeleteChatDialog
+            open={isDeleteDialogOpen}
+            onOpenChange={setIsDeleteDialogOpen}
+            chatTitle={selectedChat.title}
+            onConfirm={() => handleDeleteConversation(selectedChat.id)}
+          />
+        </>
       )}
     </>
   );
diff --git a/frontend/src/components/DeleteChatDialog.tsx b/frontend/src/components/DeleteChatDialog.tsx
new file mode 100644
index 000000000..a66498ea0
--- /dev/null
+++ b/frontend/src/components/DeleteChatDialog.tsx
@@ -0,0 +1,51 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@/components/ui/alert-dialog";
+
+interface DeleteChatDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  chatTitle: string;
+}
+
+export function DeleteChatDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  chatTitle
+}: DeleteChatDialogProps) {
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure you want to delete this chat?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete "{chatTitle}". This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+          >
+            Delete
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

From ddd65f13675c7d90b2418ea8bd7e715447b37e35 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Tue, 14 Oct 2025 01:11:38 +0000
Subject: [PATCH 2/3] Fix double-closing behavior in DeleteChatDialog

- Add e.preventDefault() to prevent AlertDialogAction's auto-close
- Ensures proper sequencing: callback executes before manual close
- Resolves potential double-close issue identified in code review

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/ComparisonChart.tsx  | 8 +++-----
 frontend/src/components/DeleteChatDialog.tsx | 3 ++-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ComparisonChart.tsx b/frontend/src/components/ComparisonChart.tsx
index e9176c924..d13187aa9 100644
--- a/frontend/src/components/ComparisonChart.tsx
+++ b/frontend/src/components/ComparisonChart.tsx
@@ -169,13 +169,11 @@ export function ComparisonChart() {
               {/* Header Row */}
               <div
                 className="grid border-b border-[hsl(var(--marketing-card-border))]"
-                style={{ 
+                style={{
                   gridTemplateColumns: "minmax(200px, 1.5fr) repeat(6, minmax(80px, 1fr))"
                 }}
               >
-                <div className="p-3 font-medium text-foreground bg-[hsl(var(--marketing-card-highlight))]/30 text-sm">
-                  
-                </div>
+                <div className="p-3 font-medium text-foreground bg-[hsl(var(--marketing-card-highlight))]/30 text-sm"></div>
                 {products.map((product) => (
                   <div
                     key={product.key}
@@ -197,7 +195,7 @@ export function ComparisonChart() {
                   className={`grid border-b border-[hsl(var(--marketing-card-border))] ${
                     index % 2 === 0 ? "bg-[hsl(var(--marketing-card-highlight))]/20" : ""
                   }`}
-                  style={{ 
+                  style={{
                     gridTemplateColumns: "minmax(200px, 1.5fr) repeat(6, minmax(80px, 1fr))"
                   }}
                 >
diff --git a/frontend/src/components/DeleteChatDialog.tsx b/frontend/src/components/DeleteChatDialog.tsx
index a66498ea0..89e1bcdf7 100644
--- a/frontend/src/components/DeleteChatDialog.tsx
+++ b/frontend/src/components/DeleteChatDialog.tsx
@@ -22,7 +22,8 @@ export function DeleteChatDialog({
   onConfirm,
   chatTitle
 }: DeleteChatDialogProps) {
-  const handleConfirm = () => {
+  const handleConfirm = (e: React.MouseEvent) => {
+    e.preventDefault();
     onConfirm();
     onOpenChange(false);
   };

From 0e4948d987f4b2a9275c6a3b224a1a8f0ebd984f Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Tue, 14 Oct 2025 01:20:43 +0000
Subject: [PATCH 3/3] Fix delete button styling to use white text on red
 background

Changed text-destructive-foreground to text-white to match other destructive
AlertDialogAction buttons in the codebase (TeamMembersList, ApiKeysList).
This fixes the red-on-red contrast issue.

Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
---
 frontend/src/components/DeleteChatDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/DeleteChatDialog.tsx b/frontend/src/components/DeleteChatDialog.tsx
index 89e1bcdf7..d9ee8b41d 100644
--- a/frontend/src/components/DeleteChatDialog.tsx
+++ b/frontend/src/components/DeleteChatDialog.tsx
@@ -41,7 +41,7 @@ export function DeleteChatDialog({
           <AlertDialogCancel>Cancel</AlertDialogCancel>
           <AlertDialogAction
             onClick={handleConfirm}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            className="bg-destructive text-white hover:bg-destructive/90"
           >
             Delete
           </AlertDialogAction>