From 275950c98cf108eb67438ba71d3463447a940ef9 Mon Sep 17 00:00:00 2001 From: Otto-AGPT Date: Tue, 17 Feb 2026 04:17:18 +0000 Subject: [PATCH] refactor(copilot): Replace legacy delete dialog with molecules/Dialog Updates the session delete confirmation in CoPilot to use the new Dialog component from molecules/Dialog instead of the legacy DeleteConfirmDialog. Changes: - ChatSidebar: Use Dialog component for delete confirmation - CopilotPage: Use Dialog component for mobile delete confirmation - Dialog stays open during deletion with loading state on button - Cancel button disabled while delete is in progress - Delete button shows loading spinner during deletion The new Dialog component provides consistent styling and behavior across desktop (modal) and mobile (drawer) views. --- .../app/(platform)/copilot/CopilotPage.tsx | 52 ++++++++++++++--- .../components/ChatSidebar/ChatSidebar.tsx | 57 ++++++++++++++++--- 2 files changed, 91 insertions(+), 18 deletions(-) diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx b/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx index 35b34890ce..cb940c1a11 100644 --- a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx +++ b/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx @@ -1,8 +1,8 @@ "use client"; +import { Button } from "@/components/atoms/Button/Button"; +import { Dialog } from "@/components/molecules/Dialog/Dialog"; import { SidebarProvider } from "@/components/ui/sidebar"; -// TODO: Replace with modern Dialog component when available -import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog"; import { ChatContainer } from "./components/ChatContainer/ChatContainer"; import { ChatSidebar } from "./components/ChatSidebar/ChatSidebar"; import { MobileDrawer } from "./components/MobileDrawer/MobileDrawer"; @@ -97,13 +97,47 @@ export function CopilotPage() { )} {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */} {isMobile && ( - !open && handleCancelDelete()} - onDoDelete={handleConfirmDelete} - /> + { + if (!open && !isDeleting) { + handleCancelDelete(); + } + }, + }} + onClose={handleCancelDelete} + > + +

+ Are you sure you want to delete{" "} + + "{sessionToDelete?.title || "Untitled chat"}" + + ? This action cannot be undone. +

+ + + + +
+
)} ); 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 8e785dd9d3..8537774b07 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,9 +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"; -// TODO: Replace with modern Dialog component when available -import DeleteConfirmDialog from "@/components/__legacy__/delete-confirm-dialog"; import { Sidebar, SidebarContent, @@ -92,6 +91,12 @@ export function ChatSidebar() { } } + function handleCancelDelete() { + if (!isDeleting) { + setSessionToDelete(null); + } + } + function formatDate(dateString: string) { const date = new Date(dateString); const now = new Date(); @@ -257,13 +262,47 @@ export function ChatSidebar() { )} - !open && setSessionToDelete(null)} - onDoDelete={handleConfirmDelete} - /> + { + if (!open && !isDeleting) { + setSessionToDelete(null); + } + }, + }} + onClose={handleCancelDelete} + > + +

+ Are you sure you want to delete{" "} + + "{sessionToDelete?.title || "Untitled chat"}" + + ? This action cannot be undone. +

+ + + + +
+
); }