thepopebot 1.2.27 → 1.2.28

package/lib/chat/components/chats-page.js

@@ -5,6 +5,7 @@ import { PageLayout } from "./page-layout.js";
 import { MessageIcon, TrashIcon, SearchIcon, PlusIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from "./icons.js";
 import { getChats, deleteChat, renameChat, starChat } from "../actions.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu.js";
+import { ConfirmDialog } from "./ui/confirm-dialog.js";
 import { cn } from "../utils.js";
 function groupChatsByDate(chats) {
   const now = /* @__PURE__ */ new Date();
@@ -150,10 +151,13 @@ function ChatsPage({ session }) {
   ] });
 }
 function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
-  const [showMenu, setShowMenu] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(chat.title || "");
   const inputRef = useRef(null);
+  const showMenu = hovered || dropdownOpen;
   useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
@@ -179,8 +183,8 @@ function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
     "div",
     {
       className: "relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md",
-      onMouseEnter: () => setShowMenu(true),
-      onMouseLeave: () => setShowMenu(false),
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
       onClick: () => !editing && onNavigate(chat.id),
       children: [
         /* @__PURE__ */ jsx(MessageIcon, { size: 16 }),
@@ -216,15 +220,17 @@ function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
             timeAgo(chat.updatedAt)
           ] })
         ] }),
-        showMenu && !editing && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        !editing && /* @__PURE__ */ jsx("div", { className: cn(
+          "shrink-0",
+          showMenu ? "opacity-100" : "opacity-0 pointer-events-none"
+        ), children: /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsx(
             "button",
             {
               className: cn(
-                "shrink-0 rounded-md p-1.5",
+                "rounded-md p-1.5",
                 "text-muted-foreground hover:text-foreground hover:bg-muted"
               ),
-              onClick: (e) => e.stopPropagation(),
               "aria-label": "Chat options",
               children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { size: 14 })
             }
@@ -263,7 +269,7 @@ function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
                 className: "text-destructive hover:text-destructive",
                 onClick: (e) => {
                   e.stopPropagation();
-                  onDelete(chat.id);
+                  setConfirmDelete(true);
                 },
                 children: [
                   /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
@@ -272,7 +278,21 @@ function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
               }
             )
           ] })
-        ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            open: confirmDelete,
+            title: "Delete chat?",
+            description: "This will permanently delete this chat and all its messages.",
+            confirmLabel: "Delete",
+            onConfirm: () => {
+              setConfirmDelete(false);
+              onDelete(chat.id);
+            },
+            onCancel: () => setConfirmDelete(false)
+          }
+        )
       ]
     }
   );

package/lib/chat/components/chats-page.jsx

@@ -5,6 +5,7 @@ import { PageLayout } from './page-layout.js';
 import { MessageIcon, TrashIcon, SearchIcon, PlusIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from './icons.js';
 import { getChats, deleteChat, renameChat, starChat } from '../actions.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
+import { ConfirmDialog } from './ui/confirm-dialog.js';
 import { cn } from '../utils.js';
 
 function groupChatsByDate(chats) {
@@ -190,11 +191,15 @@ export function ChatsPage({ session }) {
 }
 
 function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
-  const [showMenu, setShowMenu] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(chat.title || '');
   const inputRef = useRef(null);
 
+  const showMenu = hovered || dropdownOpen;
+
   useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
@@ -223,8 +228,8 @@ function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
   return (
     <div
       className="relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md"
-      onMouseEnter={() => setShowMenu(true)}
-      onMouseLeave={() => setShowMenu(false)}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
       onClick={() => !editing && onNavigate(chat.id)}
     >
       <MessageIcon size={16} />
@@ -258,53 +263,68 @@ function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
           Last message {timeAgo(chat.updatedAt)}
         </span>
       </div>
-      {showMenu && !editing && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button
-              className={cn(
-                'shrink-0 rounded-md p-1.5',
-                'text-muted-foreground hover:text-foreground hover:bg-muted'
-              )}
-              onClick={(e) => e.stopPropagation()}
-              aria-label="Chat options"
-            >
-              <MoreHorizontalIcon size={14} />
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" side="bottom">
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                onStar(chat.id);
-              }}
-            >
-              {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
-              {chat.starred ? 'Unstar' : 'Star'}
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={(e) => {
-                e.stopPropagation();
-                startRename();
-              }}
-            >
-              <PencilIcon size={14} />
-              Rename
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              className="text-destructive hover:text-destructive"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDelete(chat.id);
-              }}
-            >
-              <TrashIcon size={14} />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+      {!editing && (
+        <div className={cn(
+          'shrink-0',
+          showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}>
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger>
+              <button
+                className={cn(
+                  'rounded-md p-1.5',
+                  'text-muted-foreground hover:text-foreground hover:bg-muted'
+                )}
+                aria-label="Chat options"
+              >
+                <MoreHorizontalIcon size={14} />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="bottom">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStar(chat.id);
+                }}
+              >
+                {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
+                {chat.starred ? 'Unstar' : 'Star'}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  startRename();
+                }}
+              >
+                <PencilIcon size={14} />
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmDelete(true);
+                }}
+              >
+                <TrashIcon size={14} />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       )}
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete chat?"
+        description="This will permanently delete this chat and all its messages."
+        confirmLabel="Delete"
+        onConfirm={() => {
+          setConfirmDelete(false);
+          onDelete(chat.id);
+        }}
+        onCancel={() => setConfirmDelete(false)}
+      />
     </div>
   );
 }

package/lib/chat/components/sidebar-history-item.js

@@ -4,15 +4,19 @@ import { useState, useEffect, useRef } from "react";
 import { MessageIcon, TrashIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from "./icons.js";
 import { SidebarMenuButton, SidebarMenuItem, useSidebar } from "./ui/sidebar.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu.js";
+import { ConfirmDialog } from "./ui/confirm-dialog.js";
 import { useChatNav } from "./chat-nav-context.js";
 import { cn } from "../utils.js";
 function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename }) {
   const { navigateToChat } = useChatNav();
   const { setOpenMobile } = useSidebar();
-  const [showMenu, setShowMenu] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(chat.title || "");
   const inputRef = useRef(null);
+  const showMenu = hovered || dropdownOpen;
   useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
@@ -34,115 +38,133 @@ function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename }) {
     setEditing(false);
     setEditTitle(chat.title || "");
   };
-  return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "relative group",
-      onMouseEnter: () => setShowMenu(true),
-      onMouseLeave: () => setShowMenu(false),
-      children: [
-        editing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1", children: [
-          /* @__PURE__ */ jsx(MessageIcon, { size: 14 }),
-          /* @__PURE__ */ jsx(
-            "input",
+  return /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative group",
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        children: [
+          editing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2 py-1", children: [
+            /* @__PURE__ */ jsx(MessageIcon, { size: 14 }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: editTitle,
+                onChange: (e) => setEditTitle(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") saveRename();
+                  if (e.key === "Escape") cancelRename();
+                },
+                onBlur: saveRename,
+                className: "flex-1 min-w-0 text-sm bg-background border border-input rounded px-1.5 py-0.5 focus:outline-none focus:ring-2 focus:ring-ring"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            SidebarMenuButton,
             {
-              ref: inputRef,
-              type: "text",
-              value: editTitle,
-              onChange: (e) => setEditTitle(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") saveRename();
-                if (e.key === "Escape") cancelRename();
+              isActive,
+              onClick: () => {
+                navigateToChat(chat.id);
+                setOpenMobile(false);
               },
-              onBlur: saveRename,
-              className: "flex-1 min-w-0 text-sm bg-background border border-input rounded px-1.5 py-0.5 focus:outline-none focus:ring-2 focus:ring-ring"
+              children: [
+                /* @__PURE__ */ jsx(MessageIcon, { size: 14 }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "truncate flex-1",
+                    onDoubleClick: (e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      startRename();
+                    },
+                    children: chat.title
+                  }
+                )
+              ]
             }
-          )
-        ] }) : /* @__PURE__ */ jsxs(
-          SidebarMenuButton,
-          {
-            isActive,
-            onClick: () => {
-              navigateToChat(chat.id);
-              setOpenMobile(false);
-            },
-            children: [
-              /* @__PURE__ */ jsx(MessageIcon, { size: 14 }),
-              /* @__PURE__ */ jsx(
-                "span",
+          ),
+          !editing && /* @__PURE__ */ jsx("div", { className: cn(
+            "absolute right-1 top-1/2 -translate-y-1/2 z-10",
+            showMenu ? "opacity-100" : "opacity-0 pointer-events-none"
+          ), children: /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: cn(
+                  "rounded-md p-1",
+                  "text-muted-foreground hover:text-foreground hover:bg-muted"
+                ),
+                "aria-label": "Chat options",
+                children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { size: 14 })
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
                 {
-                  className: "truncate flex-1",
-                  onDoubleClick: (e) => {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onStar(chat.id);
+                  },
+                  children: [
+                    chat.starred ? /* @__PURE__ */ jsx(StarFilledIcon, { size: 14 }) : /* @__PURE__ */ jsx(StarIcon, { size: 14 }),
+                    chat.starred ? "Unstar" : "Star"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  onClick: (e) => {
                     e.stopPropagation();
-                    e.preventDefault();
                     startRename();
                   },
-                  children: chat.title
+                  children: [
+                    /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
+                    "Rename"
+                  ]
                 }
-              )
-            ]
-          }
-        ),
-        showMenu && !editing && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: cn(
-                "absolute right-1 top-1/2 -translate-y-1/2 rounded-md p-1",
-                "text-muted-foreground hover:text-foreground hover:bg-muted"
               ),
-              onClick: (e) => e.stopPropagation(),
-              "aria-label": "Chat options",
-              children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { size: 14 })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [
-            /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onStar(chat.id);
-                },
-                children: [
-                  chat.starred ? /* @__PURE__ */ jsx(StarFilledIcon, { size: 14 }) : /* @__PURE__ */ jsx(StarIcon, { size: 14 }),
-                  chat.starred ? "Unstar" : "Star"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  startRename();
-                },
-                children: [
-                  /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
-                  "Rename"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ jsxs(
-              DropdownMenuItem,
-              {
-                className: "text-destructive hover:text-destructive",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onDelete(chat.id);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
-                  "Delete"
-                ]
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  ) });
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs(
+                DropdownMenuItem,
+                {
+                  className: "text-destructive hover:text-destructive",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setConfirmDelete(true);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
+                    "Delete"
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirmDelete,
+        title: "Delete chat?",
+        description: "This will permanently delete this chat and all its messages.",
+        confirmLabel: "Delete",
+        onConfirm: () => {
+          setConfirmDelete(false);
+          onDelete(chat.id);
+        },
+        onCancel: () => setConfirmDelete(false)
+      }
+    )
+  ] });
 }
 export {
   SidebarHistoryItem

package/lib/chat/components/sidebar-history-item.jsx

@@ -4,17 +4,22 @@ import { useState, useEffect, useRef } from 'react';
 import { MessageIcon, TrashIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from './icons.js';
 import { SidebarMenuButton, SidebarMenuItem, useSidebar } from './ui/sidebar.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
+import { ConfirmDialog } from './ui/confirm-dialog.js';
 import { useChatNav } from './chat-nav-context.js';
 import { cn } from '../utils.js';
 
 export function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename }) {
   const { navigateToChat } = useChatNav();
   const { setOpenMobile } = useSidebar();
-  const [showMenu, setShowMenu] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
   const [editing, setEditing] = useState(false);
   const [editTitle, setEditTitle] = useState(chat.title || '');
   const inputRef = useRef(null);
 
+  const showMenu = hovered || dropdownOpen;
+
   useEffect(() => {
     if (editing && inputRef.current) {
       inputRef.current.focus();
@@ -44,8 +49,8 @@ export function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename
     <SidebarMenuItem>
       <div
         className="relative group"
-        onMouseEnter={() => setShowMenu(true)}
-        onMouseLeave={() => setShowMenu(false)}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
       >
         {editing ? (
           <div className="flex items-center gap-2 px-2 py-1">
@@ -85,54 +90,69 @@ export function SidebarHistoryItem({ chat, isActive, onDelete, onStar, onRename
           </SidebarMenuButton>
         )}
 
-        {showMenu && !editing && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <button
-                className={cn(
-                  'absolute right-1 top-1/2 -translate-y-1/2 rounded-md p-1',
-                  'text-muted-foreground hover:text-foreground hover:bg-muted'
-                )}
-                onClick={(e) => e.stopPropagation()}
-                aria-label="Chat options"
-              >
-                <MoreHorizontalIcon size={14} />
-              </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" side="bottom">
-              <DropdownMenuItem
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onStar(chat.id);
-                }}
-              >
-                {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
-                {chat.starred ? 'Unstar' : 'Star'}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                onClick={(e) => {
-                  e.stopPropagation();
-                  startRename();
-                }}
-              >
-                <PencilIcon size={14} />
-                Rename
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                className="text-destructive hover:text-destructive"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete(chat.id);
-                }}
-              >
-                <TrashIcon size={14} />
-                Delete
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+        {!editing && (
+          <div className={cn(
+            'absolute right-1 top-1/2 -translate-y-1/2 z-10',
+            showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          )}>
+            <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+              <DropdownMenuTrigger>
+                <button
+                  className={cn(
+                    'rounded-md p-1',
+                    'text-muted-foreground hover:text-foreground hover:bg-muted'
+                  )}
+                  aria-label="Chat options"
+                >
+                  <MoreHorizontalIcon size={14} />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="bottom">
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onStar(chat.id);
+                  }}
+                >
+                  {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
+                  {chat.starred ? 'Unstar' : 'Star'}
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    startRename();
+                  }}
+                >
+                  <PencilIcon size={14} />
+                  Rename
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="text-destructive hover:text-destructive"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setConfirmDelete(true);
+                  }}
+                >
+                  <TrashIcon size={14} />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         )}
       </div>
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete chat?"
+        description="This will permanently delete this chat and all its messages."
+        confirmLabel="Delete"
+        onConfirm={() => {
+          setConfirmDelete(false);
+          onDelete(chat.id);
+        }}
+        onCancel={() => setConfirmDelete(false)}
+      />
     </SidebarMenuItem>
   );
 }

package/lib/chat/components/ui/confirm-dialog.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../../utils.js";
+function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel = "Delete", cancelLabel = "Cancel", variant = "destructive" }) {
+  const cancelRef = useRef(null);
+  useEffect(() => {
+    if (open && cancelRef.current) {
+      cancelRef.current.focus();
+    }
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onCancel();
+    };
+    document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [open, onCancel]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 bg-black/50", onClick: onCancel }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-50 w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-lg", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: description }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: cancelRef,
+            onClick: onCancel,
+            className: "rounded-md px-3 py-1.5 text-sm font-medium border border-input bg-background hover:bg-muted",
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onConfirm,
+            className: cn(
+              "rounded-md px-3 py-1.5 text-sm font-medium text-white",
+              variant === "destructive" ? "bg-destructive hover:bg-destructive/90" : "bg-foreground hover:bg-foreground/90"
+            ),
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ConfirmDialog
+};

package/lib/chat/components/ui/confirm-dialog.jsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { cn } from '../../utils.js';
+
+export function ConfirmDialog({ open, onConfirm, onCancel, title, description, confirmLabel = 'Delete', cancelLabel = 'Cancel', variant = 'destructive' }) {
+  const cancelRef = useRef(null);
+
+  useEffect(() => {
+    if (open && cancelRef.current) {
+      cancelRef.current.focus();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') onCancel();
+    };
+    document.addEventListener('keydown', handleEsc);
+    return () => document.removeEventListener('keydown', handleEsc);
+  }, [open, onCancel]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="fixed inset-0 bg-black/50" onClick={onCancel} />
+      <div className="relative z-50 w-full max-w-sm rounded-lg border border-border bg-background p-6 shadow-lg" onClick={(e) => e.stopPropagation()}>
+        <h3 className="text-lg font-semibold">{title}</h3>
+        {description && (
+          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
+        )}
+        <div className="mt-4 flex justify-end gap-2">
+          <button
+            ref={cancelRef}
+            onClick={onCancel}
+            className="rounded-md px-3 py-1.5 text-sm font-medium border border-input bg-background hover:bg-muted"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            onClick={onConfirm}
+            className={cn(
+              'rounded-md px-3 py-1.5 text-sm font-medium text-white',
+              variant === 'destructive'
+                ? 'bg-destructive hover:bg-destructive/90'
+                : 'bg-foreground hover:bg-foreground/90'
+            )}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thepopebot",
-  "version": "1.2.27",
+  "version": "1.2.28",
   "type": "module",
   "description": "Create autonomous AI agents with a two-layer architecture: Next.js Event Handler + Docker Agent.",
   "bin": {