From 5f55e1cd7ce2385f64f1d237ff2447b2c4badf07 Mon Sep 17 00:00:00 2001
From: Otto <otto@agpt.co>
Date: Tue, 17 Feb 2026 04:37:33 +0000
Subject: [PATCH] refactor(copilot): Extract DeleteChatDialog to own component

Move delete confirmation dialog from ChatSidebar to reusable component:
- Create DeleteChatDialog under app/copilot/components
- Clean props interface: session, isDeleting, onConfirm, onCancel
- Update ChatSidebar to use new component
- All existing tests pass
---
 .../components/ChatSidebar/ChatSidebar.tsx    | 49 ++------------
 .../DeleteChatDialog/DeleteChatDialog.tsx     | 66 +++++++++++++++++++
 .../components/DeleteChatDialog/index.ts      |  1 +
 3 files changed, 74 insertions(+), 42 deletions(-)
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/DeleteChatDialog.tsx
 create mode 100644 autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/index.ts

diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
index 8537774b07..b8a22c1615 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/ChatSidebar/ChatSidebar.tsx
@@ -7,8 +7,8 @@ import {
 import { Button } from "@/components/atoms/Button/Button";
 import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
 import { Text } from "@/components/atoms/Text/Text";
-import { Dialog } from "@/components/molecules/Dialog/Dialog";
 import { toast } from "@/components/molecules/Toast/use-toast";
+import { DeleteChatDialog } from "../DeleteChatDialog";
 import {
   Sidebar,
   SidebarContent,
@@ -262,47 +262,12 @@ export function ChatSidebar() {
         )}
       </Sidebar>
 
-      <Dialog
-        title="Delete chat"
-        controlled={{
-          isOpen: !!sessionToDelete,
-          set: async (open) => {
-            if (!open && !isDeleting) {
-              setSessionToDelete(null);
-            }
-          },
-        }}
-        onClose={handleCancelDelete}
-      >
-        <Dialog.Content>
-          <p className="text-neutral-600">
-            Are you sure you want to delete{" "}
-            <span className="font-medium">
-              &quot;{sessionToDelete?.title || "Untitled chat"}&quot;
-            </span>
-            ? This action cannot be undone.
-          </p>
-          <Dialog.Footer>
-            <Button
-              variant="ghost"
-              size="small"
-              onClick={handleCancelDelete}
-              disabled={isDeleting}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="primary"
-              size="small"
-              onClick={handleConfirmDelete}
-              loading={isDeleting}
-              className="bg-red-600 hover:bg-red-700"
-            >
-              Delete
-            </Button>
-          </Dialog.Footer>
-        </Dialog.Content>
-      </Dialog>
+      <DeleteChatDialog
+        session={sessionToDelete}
+        isDeleting={isDeleting}
+        onConfirm={handleConfirmDelete}
+        onCancel={handleCancelDelete}
+      />
     </>
   );
 }
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/DeleteChatDialog.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/DeleteChatDialog.tsx
new file mode 100644
index 0000000000..08002d5d5a
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/DeleteChatDialog.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { Button } from "@/components/atoms/Button/Button";
+import { Dialog } from "@/components/molecules/Dialog/Dialog";
+
+interface DeleteChatDialogProps {
+  /** The session to delete, or null if dialog should be closed */
+  session: { id: string; title: string | null | undefined } | null;
+  /** Whether deletion is in progress */
+  isDeleting: boolean;
+  /** Called when user confirms deletion */
+  onConfirm: () => void;
+  /** Called when user cancels (only works when not deleting) */
+  onCancel: () => void;
+}
+
+export function DeleteChatDialog({
+  session,
+  isDeleting,
+  onConfirm,
+  onCancel,
+}: DeleteChatDialogProps) {
+  return (
+    <Dialog
+      title="Delete chat"
+      controlled={{
+        isOpen: !!session,
+        set: async (open) => {
+          if (!open && !isDeleting) {
+            onCancel();
+          }
+        },
+      }}
+      onClose={onCancel}
+    >
+      <Dialog.Content>
+        <p className="text-neutral-600">
+          Are you sure you want to delete{" "}
+          <span className="font-medium">
+            &quot;{session?.title || "Untitled chat"}&quot;
+          </span>
+          ? This action cannot be undone.
+        </p>
+        <Dialog.Footer>
+          <Button
+            variant="ghost"
+            size="small"
+            onClick={onCancel}
+            disabled={isDeleting}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="primary"
+            size="small"
+            onClick={onConfirm}
+            loading={isDeleting}
+            className="bg-red-600 hover:bg-red-700"
+          >
+            Delete
+          </Button>
+        </Dialog.Footer>
+      </Dialog.Content>
+    </Dialog>
+  );
+}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/index.ts b/autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/index.ts
new file mode 100644
index 0000000000..a7cec9b0fd
--- /dev/null
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/DeleteChatDialog/index.ts
@@ -0,0 +1 @@
+export { DeleteChatDialog } from "./DeleteChatDialog";