feat: add delete button to MobileDrawer for mobile chat deletion

- Added TrashIcon and delete button to each session in MobileDrawer
- Added delete state and handlers to useCopilotPage hook
- Added DeleteConfirmDialog to CopilotPage for mobile delete confirmation
- Shared delete mutation with proper error handling via toast

autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 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";
@@ -31,6 +33,12 @@ export function CopilotPage() {
     handleDrawerOpenChange,
     handleSelectSession,
     handleNewChat,
+    // Delete functionality
+    sessionToDelete,
+    isDeleting,
+    handleDeleteClick,
+    handleConfirmDelete,
+    handleCancelDelete,
   } = useCopilotPage();
 
   if (isUserLoading || !isLoggedIn) {
@@ -64,16 +72,27 @@ export function CopilotPage() {
         </div>
       </div>
       {isMobile && (
-        <MobileDrawer
-          isOpen={isDrawerOpen}
-          sessions={sessions}
-          currentSessionId={sessionId}
-          isLoading={isLoadingSessions}
-          onSelectSession={handleSelectSession}
-          onNewChat={handleNewChat}
-          onClose={handleCloseDrawer}
-          onOpenChange={handleDrawerOpenChange}
-        />
+        <>
+          <MobileDrawer
+            isOpen={isDrawerOpen}
+            sessions={sessions}
+            currentSessionId={sessionId}
+            isLoading={isLoadingSessions}
+            isDeleting={isDeleting}
+            onSelectSession={handleSelectSession}
+            onNewChat={handleNewChat}
+            onClose={handleCloseDrawer}
+            onOpenChange={handleDrawerOpenChange}
+            onDeleteSession={handleDeleteClick}
+          />
+          <DeleteConfirmDialog
+            entityType="chat"
+            entityName={sessionToDelete?.title || "Untitled chat"}
+            open={!!sessionToDelete}
+            onOpenChange={(open) => !open && handleCancelDelete()}
+            onDoDelete={handleConfirmDelete}
+          />
+        </>
       )}
     </SidebarProvider>
   );

autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileDrawer/MobileDrawer.tsx

@@ -3,7 +3,7 @@ import { Button } from "@/components/atoms/Button/Button";
 import { Text } from "@/components/atoms/Text/Text";
 import { scrollbarStyles } from "@/components/styles/scrollbars";
 import { cn } from "@/lib/utils";
-import { PlusIcon, SpinnerGapIcon, X } from "@phosphor-icons/react";
+import { PlusIcon, SpinnerGapIcon, TrashIcon, X } from "@phosphor-icons/react";
 import { Drawer } from "vaul";
 
 interface Props {
@@ -11,10 +11,15 @@ interface Props {
   sessions: SessionSummaryResponse[];
   currentSessionId: string | null;
   isLoading: boolean;
+  isDeleting?: boolean;
   onSelectSession: (sessionId: string) => void;
   onNewChat: () => void;
   onClose: () => void;
   onOpenChange: (open: boolean) => void;
+  onDeleteSession?: (
+    sessionId: string,
+    title: string | null | undefined,
+  ) => void;
 }
 
 function formatDate(dateString: string) {
@@ -47,10 +52,12 @@ export function MobileDrawer({
   sessions,
   currentSessionId,
   isLoading,
+  isDeleting,
   onSelectSession,
   onNewChat,
   onClose,
   onOpenChange,
+  onDeleteSession,
 }: Props) {
   return (
     <Drawer.Root open={isOpen} onOpenChange={onOpenChange} direction="left">
@@ -88,35 +95,52 @@ export function MobileDrawer({
               </p>
             ) : (
               sessions.map((session) => (
-                <button
+                <div
                   key={session.id}
-                  onClick={() => onSelectSession(session.id)}
                   className={cn(
-                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+                    "group relative flex w-full items-center rounded-lg transition-colors",
                     session.id === currentSessionId
                       ? "bg-zinc-100"
                       : "hover:bg-zinc-50",
                   )}
                 >
-                  <div className="flex min-w-0 max-w-full flex-col overflow-hidden">
-                    <div className="min-w-0 max-w-full">
-                      <Text
-                        variant="body"
-                        className={cn(
-                          "truncate font-normal",
-                          session.id === currentSessionId
-                            ? "text-zinc-600"
-                            : "text-zinc-800",
-                        )}
-                      >
-                        {session.title || "Untitled chat"}
+                  <button
+                    onClick={() => onSelectSession(session.id)}
+                    className="flex-1 px-3 py-2.5 text-left"
+                  >
+                    <div className="flex min-w-0 max-w-full flex-col overflow-hidden pr-8">
+                      <div className="min-w-0 max-w-full">
+                        <Text
+                          variant="body"
+                          className={cn(
+                            "truncate font-normal",
+                            session.id === currentSessionId
+                              ? "text-zinc-600"
+                              : "text-zinc-800",
+                          )}
+                        >
+                          {session.title || "Untitled chat"}
+                        </Text>
+                      </div>
+                      <Text variant="small" className="text-neutral-400">
+                        {formatDate(session.updated_at)}
                       </Text>
                     </div>
-                    <Text variant="small" className="text-neutral-400">
-                      {formatDate(session.updated_at)}
-                    </Text>
-                  </div>
-                </button>
+                  </button>
+                  {onDeleteSession && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteSession(session.id, session.title);
+                      }}
+                      disabled={isDeleting}
+                      className="absolute right-2 rounded p-1.5 text-zinc-400 transition-all hover:bg-red-100 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
+                      aria-label="Delete chat"
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                </div>
               ))
             )}
           </div>

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<string | null>(null);
+  const [sessionToDelete, setSessionToDelete] = useState<{
+    id: string;
+    title: string | null | undefined;
+  } | null>(null);
+  const queryClient = useQueryClient();
 
   const {
     sessionId,
@@ -24,6 +34,30 @@ export function useCopilotPage() {
     isCreatingSession,
   } = useChatSession();
 
+  const { mutate: deleteSessionMutation, isPending: isDeleting } =
+    useDeleteV2DeleteSession({
+      mutation: {
+        onSuccess: () => {
+          queryClient.invalidateQueries({
+            queryKey: getGetV2ListSessionsQueryKey(),
+          });
+          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 breakpoint = useBreakpoint();
   const isMobile =
     breakpoint === "base" || breakpoint === "sm" || breakpoint === "md";
@@ -143,6 +177,24 @@ export function useCopilotPage() {
     if (isMobile) setIsDrawerOpen(false);
   }
 
+  const handleDeleteClick = useCallback(
+    (id: string, title: string | null | undefined) => {
+      if (isDeleting) return;
+      setSessionToDelete({ id, title });
+    },
+    [isDeleting],
+  );
+
+  const handleConfirmDelete = useCallback(() => {
+    if (sessionToDelete) {
+      deleteSessionMutation({ sessionId: sessionToDelete.id });
+    }
+  }, [sessionToDelete, deleteSessionMutation]);
+
+  const handleCancelDelete = useCallback(() => {
+    setSessionToDelete(null);
+  }, []);
+
   return {
     sessionId,
     messages,
@@ -165,5 +217,11 @@ export function useCopilotPage() {
     handleDrawerOpenChange,
     handleSelectSession,
     handleNewChat,
+    // Delete functionality
+    sessionToDelete,
+    isDeleting,
+    handleDeleteClick,
+    handleConfirmDelete,
+    handleCancelDelete,
   };
 }