)}
+ {/* Delete confirmation dialog - rendered at top level for proper z-index on mobile */}
+ {isMobile && (
+
!open && handleCancelDelete()}
+ onDoDelete={handleConfirmDelete}
+ />
+ )}
);
}
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 6b7398b4ba..8e785dd9d3 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
@@ -1,8 +1,15 @@
"use client";
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import {
+ getGetV2ListSessionsQueryKey,
+ useDeleteV2DeleteSession,
+ useGetV2ListSessions,
+} from "@/app/api/__generated__/endpoints/chat/chat";
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 {
Sidebar,
SidebarContent,
@@ -12,18 +19,52 @@ import {
useSidebar,
} from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";
-import { PlusCircleIcon, PlusIcon } from "@phosphor-icons/react";
+import { PlusCircleIcon, PlusIcon, TrashIcon } from "@phosphor-icons/react";
+import { useQueryClient } from "@tanstack/react-query";
import { motion } from "framer-motion";
+import { useState } from "react";
import { parseAsString, useQueryState } from "nuqs";
export function ChatSidebar() {
const { state } = useSidebar();
const isCollapsed = state === "collapsed";
const [sessionId, setSessionId] = useQueryState("sessionId", parseAsString);
+ const [sessionToDelete, setSessionToDelete] = useState<{
+ id: string;
+ title: string | null | undefined;
+ } | null>(null);
+
+ const queryClient = useQueryClient();
const { data: sessionsResponse, isLoading: isLoadingSessions } =
useGetV2ListSessions({ limit: 50 });
+ const { mutate: deleteSession, isPending: isDeleting } =
+ useDeleteV2DeleteSession({
+ mutation: {
+ onSuccess: () => {
+ // Invalidate sessions list to refetch
+ queryClient.invalidateQueries({
+ queryKey: getGetV2ListSessionsQueryKey(),
+ });
+ // If we deleted the current session, clear selection
+ if (sessionToDelete?.id === sessionId) {
+ setSessionId(null);
+ }
+ setSessionToDelete(null);
+ },
+ onError: (error) => {
+ toast({
+ title: "Failed to delete chat",
+ description:
+ error instanceof Error ? error.message : "An error occurred",
+ variant: "destructive",
+ });
+ setSessionToDelete(null);
+ },
+ },
+ });
+
const sessions =
sessionsResponse?.status === 200 ? sessionsResponse.data.sessions : [];
@@ -35,6 +76,22 @@ export function ChatSidebar() {
setSessionId(id);
}
+ function handleDeleteClick(
+ e: React.MouseEvent,
+ id: string,
+ title: string | null | undefined,
+ ) {
+ e.stopPropagation(); // Prevent session selection
+ if (isDeleting) return; // Prevent double-click during deletion
+ setSessionToDelete({ id, title });
+ }
+
+ function handleConfirmDelete() {
+ if (sessionToDelete) {
+ deleteSession({ sessionId: sessionToDelete.id });
+ }
+ }
+
function formatDate(dateString: string) {
const date = new Date(dateString);
const now = new Date();
@@ -61,128 +118,152 @@ export function ChatSidebar() {
}
return (
-
- {isCollapsed && (
-
-
-
-
-
- )}
-
- {!isCollapsed && (
-
-
- Your chats
-
-
-
-
-
- )}
-
- {!isCollapsed && (
-
- {isLoadingSessions ? (
-
-
-
- ) : sessions.length === 0 ? (
-
- No conversations yet
-
- ) : (
- sessions.map((session) => (
-
- ))
+ <>
+
+ {isCollapsed && (
+
- )}
-
- {!isCollapsed && sessionId && (
-
-
- }
+
- New Chat
-
-
-
- )}
-
+
+
+
+ )}
+
+ {!isCollapsed && (
+
+
+ Your chats
+
+
+
+
+
+ )}
+
+ {!isCollapsed && (
+
+ {isLoadingSessions ? (
+
+
+
+ ) : sessions.length === 0 ? (
+
+ No conversations yet
+
+ ) : (
+ sessions.map((session) => (
+
+
+
+
);
}
diff --git a/autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts b/autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts
index 28e9ba7cfb..444e745ec6 100644
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/useCopilotPage.ts
@@ -1,10 +1,15 @@
-import { useGetV2ListSessions } from "@/app/api/__generated__/endpoints/chat/chat";
+import {
+ getGetV2ListSessionsQueryKey,
+ useDeleteV2DeleteSession,
+ useGetV2ListSessions,
+} from "@/app/api/__generated__/endpoints/chat/chat";
import { toast } from "@/components/molecules/Toast/use-toast";
import { useBreakpoint } from "@/lib/hooks/useBreakpoint";
import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
import { useChat } from "@ai-sdk/react";
+import { useQueryClient } from "@tanstack/react-query";
import { DefaultChatTransport } from "ai";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useChatSession } from "./useChatSession";
import { useLongRunningToolPolling } from "./hooks/useLongRunningToolPolling";
@@ -14,6 +19,11 @@ export function useCopilotPage() {
const { isUserLoading, isLoggedIn } = useSupabase();
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [pendingMessage, setPendingMessage] = useState