Compare commits

..

3 Commits

Author SHA1 Message Date
Otto
5f55e1cd7c 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
2026-02-17 04:37:33 +00:00
Otto
1681a84c2f test(copilot): Add integration tests for ChatSidebar delete dialog
- Tests session list rendering and empty state
- Tests date formatting (Today, Yesterday, X days ago)
- Tests delete dialog open/close flow
- Tests delete API call on confirmation
- Tests error handling for deletion failures
- Tests session selection and URL state
- Tests new chat button clearing selection

Reference: MainMarketplacePage/__tests__ pattern
2026-02-17 04:35:53 +00:00
Otto-AGPT
275950c98c 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.
2026-02-17 04:17:18 +00:00
8 changed files with 476 additions and 21 deletions

View File

@@ -139,7 +139,7 @@ jobs:
- name: Upload logs to artifact
if: always()
uses: actions/upload-artifact@v6
uses: actions/upload-artifact@v4
with:
name: test-logs
path: classic/original_autogpt/logs/

View File

@@ -237,7 +237,7 @@ jobs:
- name: Upload logs to artifact
if: always()
uses: actions/upload-artifact@v6
uses: actions/upload-artifact@v4
with:
name: test-logs
path: classic/forge/logs/

View File

@@ -269,7 +269,7 @@ jobs:
- name: Upload Playwright report
if: always()
uses: actions/upload-artifact@v6
uses: actions/upload-artifact@v4
with:
name: playwright-report
path: playwright-report
@@ -278,7 +278,7 @@ jobs:
- name: Upload Playwright test results
if: always()
uses: actions/upload-artifact@v6
uses: actions/upload-artifact@v4
with:
name: playwright-test-results
path: test-results

View File

@@ -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 && (
<DeleteConfirmDialog
entityType="chat"
entityName={sessionToDelete?.title || "Untitled chat"}
open={!!sessionToDelete}
onOpenChange={(open) => !open && handleCancelDelete()}
onDoDelete={handleConfirmDelete}
/>
<Dialog
title="Delete chat"
controlled={{
isOpen: !!sessionToDelete,
set: async (open) => {
if (!open && !isDeleting) {
handleCancelDelete();
}
},
}}
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>
)}
</SidebarProvider>
);

View File

@@ -8,8 +8,7 @@ import { Button } from "@/components/atoms/Button/Button";
import { LoadingSpinner } from "@/components/atoms/LoadingSpinner/LoadingSpinner";
import { Text } from "@/components/atoms/Text/Text";
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 { DeleteChatDialog } from "../DeleteChatDialog";
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,12 +262,11 @@ export function ChatSidebar() {
)}
</Sidebar>
<DeleteConfirmDialog
entityType="chat"
entityName={sessionToDelete?.title || "Untitled chat"}
open={!!sessionToDelete}
onOpenChange={(open) => !open && setSessionToDelete(null)}
onDoDelete={handleConfirmDelete}
<DeleteChatDialog
session={sessionToDelete}
isDeleting={isDeleting}
onConfirm={handleConfirmDelete}
onCancel={handleCancelDelete}
/>
</>
);

View File

@@ -0,0 +1,350 @@
import { expect, test, describe, vi, beforeEach, afterEach } from "vitest";
import {
render,
screen,
waitFor,
fireEvent,
cleanup,
} from "@testing-library/react";
import { ChatSidebar } from "../ChatSidebar";
import { server } from "@/mocks/mock-server";
import {
getGetV2ListSessionsMockHandler,
getDeleteV2DeleteSessionMockHandler204,
getDeleteV2DeleteSessionMockHandler422,
} from "@/app/api/__generated__/endpoints/chat/chat.msw";
import { SidebarProvider } from "@/components/ui/sidebar";
import { NuqsTestingAdapter } from "nuqs/adapters/testing";
import { http, HttpResponse, delay } from "msw";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BackendAPIProvider } from "@/lib/autogpt-server-api/context";
// Mock sessions data
const mockSessions = {
sessions: [
{
id: "session-1",
title: "First Chat",
created_at: new Date().toISOString(),
updated_at: new Date().toISOString(),
},
{
id: "session-2",
title: "Second Chat",
created_at: new Date(Date.now() - 86400000).toISOString(),
updated_at: new Date(Date.now() - 86400000).toISOString(),
},
{
id: "session-3",
title: null,
created_at: new Date(Date.now() - 172800000).toISOString(),
updated_at: new Date(Date.now() - 172800000).toISOString(),
},
],
total: 3,
};
function createTestQueryClient() {
return new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
});
}
function TestWrapper({
children,
searchParams = "",
onUrlUpdate,
}: {
children: React.ReactNode;
searchParams?: string;
onUrlUpdate?: (event: { queryString: string }) => void;
}) {
const queryClient = createTestQueryClient();
return (
<QueryClientProvider client={queryClient}>
<BackendAPIProvider>
<NuqsTestingAdapter
searchParams={searchParams}
hasMemory
onUrlUpdate={onUrlUpdate}
>
<SidebarProvider defaultOpen={true}>{children}</SidebarProvider>
</NuqsTestingAdapter>
</BackendAPIProvider>
</QueryClientProvider>
);
}
function renderChatSidebar(
searchParams = "",
onUrlUpdate?: (event: { queryString: string }) => void,
) {
return render(
<TestWrapper searchParams={searchParams} onUrlUpdate={onUrlUpdate}>
<ChatSidebar />
</TestWrapper>,
);
}
describe("ChatSidebar", () => {
beforeEach(() => {
server.use(
getGetV2ListSessionsMockHandler(() => mockSessions),
getDeleteV2DeleteSessionMockHandler204(),
);
});
afterEach(() => {
cleanup();
});
describe("Sessions List", () => {
test("renders session list correctly", async () => {
renderChatSidebar();
// Use getAllByText since component may render multiple times
await waitFor(() => {
const elements = screen.getAllByText("First Chat");
expect(elements.length).toBeGreaterThan(0);
});
expect(screen.getAllByText("Second Chat").length).toBeGreaterThan(0);
expect(screen.getAllByText("Untitled chat").length).toBeGreaterThan(0);
});
test("shows empty state when no sessions", async () => {
server.use(
getGetV2ListSessionsMockHandler(() => ({
sessions: [],
total: 0,
})),
);
renderChatSidebar();
await waitFor(() => {
expect(
screen.getAllByText("No conversations yet").length,
).toBeGreaterThan(0);
});
});
test("formats dates correctly", async () => {
renderChatSidebar();
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
expect(screen.getAllByText("Today").length).toBeGreaterThan(0);
expect(screen.getAllByText("Yesterday").length).toBeGreaterThan(0);
expect(screen.getAllByText("2 days ago").length).toBeGreaterThan(0);
});
});
describe("Delete Dialog", () => {
test("opens delete dialog when trash button is clicked", async () => {
renderChatSidebar();
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
// Find and click the delete button for the first session
const deleteButtons = screen.getAllByLabelText("Delete chat");
fireEvent.click(deleteButtons[0]);
// Dialog should appear with confirmation text
await waitFor(() => {
expect(
screen.getByText(/Are you sure you want to delete/),
).toBeDefined();
});
});
test("closes dialog when cancel is clicked", async () => {
renderChatSidebar();
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
const deleteButtons = screen.getAllByLabelText("Delete chat");
fireEvent.click(deleteButtons[0]);
await waitFor(() => {
expect(
screen.getByText(/Are you sure you want to delete/),
).toBeDefined();
});
const cancelButton = screen.getByRole("button", { name: "Cancel" });
fireEvent.click(cancelButton);
await waitFor(() => {
expect(
screen.queryByText(/Are you sure you want to delete/),
).toBeNull();
});
});
test("calls delete API when delete button is clicked", async () => {
const deleteMock = vi.fn();
server.use(
http.delete(
"http://localhost:3000/api/proxy/api/chat/sessions/:sessionId",
async ({ params }) => {
deleteMock(params.sessionId);
return new HttpResponse(null, { status: 204 });
},
),
);
renderChatSidebar();
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
const deleteButtons = screen.getAllByLabelText("Delete chat");
fireEvent.click(deleteButtons[0]);
await waitFor(() => {
expect(
screen.getByText(/Are you sure you want to delete/),
).toBeDefined();
});
const deleteButton = screen.getByRole("button", { name: "Delete" });
fireEvent.click(deleteButton);
await waitFor(() => {
expect(deleteMock).toHaveBeenCalledWith("session-1");
});
});
test("closes dialog after successful deletion", async () => {
renderChatSidebar();
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
const deleteButtons = screen.getAllByLabelText("Delete chat");
fireEvent.click(deleteButtons[0]);
await waitFor(() => {
expect(
screen.getByText(/Are you sure you want to delete/),
).toBeDefined();
});
const deleteButton = screen.getByRole("button", { name: "Delete" });
fireEvent.click(deleteButton);
await waitFor(() => {
expect(
screen.queryByText(/Are you sure you want to delete/),
).toBeNull();
});
});
test("handles deletion error gracefully", async () => {
server.use(getDeleteV2DeleteSessionMockHandler422());
renderChatSidebar();
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
const deleteButtons = screen.getAllByLabelText("Delete chat");
fireEvent.click(deleteButtons[0]);
await waitFor(() => {
expect(
screen.getByText(/Are you sure you want to delete/),
).toBeDefined();
});
const deleteButton = screen.getByRole("button", { name: "Delete" });
fireEvent.click(deleteButton);
// Dialog should close even on error
await waitFor(() => {
expect(
screen.queryByText(/Are you sure you want to delete/),
).toBeNull();
});
});
});
describe("Session Selection", () => {
test("highlights currently selected session", async () => {
renderChatSidebar("?sessionId=session-1");
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
// Find the session with selected styling (text-zinc-600 indicates selected)
const selectedSessions = screen.getAllByText("First Chat");
const hasSelectedStyle = selectedSessions.some(
(el) =>
el.className.includes("text-zinc-600") ||
el.closest("div")?.className.includes("bg-zinc-100"),
);
expect(hasSelectedStyle).toBe(true);
});
test("selects session when clicked", async () => {
const urlUpdateSpy = vi.fn();
renderChatSidebar("", urlUpdateSpy);
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
// Find a session button and click it
const sessionElements = screen.getAllByText("First Chat");
const sessionButton = sessionElements[0].closest("button");
if (sessionButton) {
fireEvent.click(sessionButton);
}
await waitFor(() => {
expect(urlUpdateSpy).toHaveBeenCalled();
const lastCall =
urlUpdateSpy.mock.calls[urlUpdateSpy.mock.calls.length - 1];
expect(lastCall[0].queryString).toContain("sessionId=session-1");
});
});
});
describe("New Chat", () => {
test("clears session selection when new chat button is clicked", async () => {
const urlUpdateSpy = vi.fn();
renderChatSidebar("?sessionId=session-1", urlUpdateSpy);
await waitFor(() => {
expect(screen.getAllByText("First Chat").length).toBeGreaterThan(0);
});
const newChatButton = screen.getByRole("button", { name: "New Chat" });
fireEvent.click(newChatButton);
await waitFor(() => {
expect(urlUpdateSpy).toHaveBeenCalled();
const lastCall =
urlUpdateSpy.mock.calls[urlUpdateSpy.mock.calls.length - 1];
expect(lastCall[0].queryString).not.toContain("sessionId=session-1");
});
});
});
});

View File

@@ -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>
);
}

View File

@@ -0,0 +1 @@
export { DeleteChatDialog } from "./DeleteChatDialog";