feat(chat): Add delete chat session endpoint and UI (#12112)

## Summary Adds the ability to delete chat sessions from the CoPilot interface. ## Changes ### Backend - Add `DELETE /api/chat/sessions/{session_id}` endpoint in `routes.py` - Returns 204 on success, 404 if not found or not owned by user - Reuses existing `delete_chat_session` function from `model.py` ### Frontend - Add delete button (trash icon) that appears on hover for each chat session - Add confirmation dialog before deletion using existing `DeleteConfirmDialog` component - Refresh session list after successful delete - Clear current session selection if the deleted session was active - Update OpenAPI spec with new endpoint ## Testing 1. Hover over a chat session in sidebar → trash icon appears 2. Click trash icon → confirmation dialog 3. Confirm deletion → session removed, list refreshes 4. If deleted session was active, selection is cleared ## Screenshots Delete button appears on hover, confirmation dialog on click. ## Related Issues Closes SECRT-1928  <h2>Greptile Overview</h2> <details><summary><h3>Greptile Summary</h3></summary> Adds the ability to delete chat sessions from the CoPilot interface — a new `DELETE /api/chat/sessions/{session_id}` backend endpoint and a corresponding delete button with confirmation dialog in the `ChatSidebar` frontend component. - **Backend route** (`routes.py`): Clean implementation reusing the existing `delete_chat_session` model function with proper auth guards and 204/404 responses. No issues. - **Frontend** (`ChatSidebar.tsx`): Adds hover-visible trash icon per session, confirmation dialog, mutation with cache invalidation, and active session clearing on delete. However, it uses a `__legacy__` component (`DeleteConfirmDialog`) which violates the project's style guide — new code should use the modern design system components. Error handling only logs to console without user-facing feedback (project convention is to use toast notifications for mutation errors). `isDeleting` is destructured but unused. - **OpenAPI spec** updated correctly. - **Unrelated file included**: `notes/plan-SECRT-1959-graph-edge-desync.md` is a planning document for a different ticket and should be removed from this PR. The `notes/` directory is newly introduced and both plan files should be reconsidered for inclusion. </details> <details><summary><h3>Confidence Score: 3/5</h3></summary> - Functionally correct but has style guide violations and includes unrelated files that should be addressed before merge. - The core feature implementation (backend DELETE endpoint and frontend mutation logic) is sound and follows existing patterns. Score is lowered because: (1) the frontend uses a legacy component explicitly prohibited by the project's style guide, (2) mutation errors are not surfaced to the user, and (3) the PR includes an unrelated planning document for a different ticket. - Pay close attention to `ChatSidebar.tsx` for the legacy component import and error handling, and `notes/plan-SECRT-1959-graph-edge-desync.md` which should be removed. </details> <details><summary><h3>Sequence Diagram</h3></summary> ```mermaid sequenceDiagram participant User participant ChatSidebar as ChatSidebar (Frontend) participant ReactQuery as React Query participant API as DELETE /api/chat/sessions/{id} participant Model as model.delete_chat_session participant DB as db.delete_chat_session (Prisma) participant Redis as Redis Cache User->>ChatSidebar: Click trash icon on session ChatSidebar->>ChatSidebar: Show DeleteConfirmDialog User->>ChatSidebar: Confirm deletion ChatSidebar->>ReactQuery: deleteSession({ sessionId }) ReactQuery->>API: DELETE /api/chat/sessions/{session_id} API->>Model: delete_chat_session(session_id, user_id) Model->>DB: delete_many(where: {id, userId}) DB-->>Model: bool (deleted count > 0) Model->>Redis: Delete session cache key Model->>Model: Clean up session lock Model-->>API: True API-->>ReactQuery: 204 No Content ReactQuery->>ChatSidebar: onSuccess callback ChatSidebar->>ReactQuery: invalidateQueries(sessions list) ChatSidebar->>ChatSidebar: Clear sessionId if deleted was active ``` </details> <sub>Last reviewed commit: 44a92c6</sub>  <details><summary><h4>Context used (3)</h4></summary> - Context from `dashboard` - autogpt_platform/frontend/CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=39861924-d320-41ba-a1a7-a8bff44f780a)) - Context from `dashboard` - autogpt_platform/frontend/CONTRIBUTING.md ([source](https://app.greptile.com/review/custom-context?memory=cc4f1b17-cb5c-4b63-b218-c772b48e20ee)) - Context from `dashboard` - autogpt_platform/CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=6e9dc5dc-8942-47df-8677-e60062ec8c3a)) </details>  --------- Co-authored-by: Zamil Majdy <zamil.majdy@agpt.co>
2026-02-16 09:46:07 -05:00 · 2026-02-16 12:19:18 +00:00
parent 223df9d3da
commit 649d4ab7f5
7 changed files with 397 additions and 136 deletions
--- a/autogpt_platform/backend/backend/api/features/chat/routes.py
+++ b/autogpt_platform/backend/backend/api/features/chat/routes.py
@@ -23,6 +23,7 @@ from .model import (
    ChatSession,
    append_and_save_message,
    create_chat_session,
+    delete_chat_session,
    get_chat_session,
    get_user_sessions,
 )
@@ -211,6 +212,43 @@ async def create_session(
    )


+@router.delete(
+    "/sessions/{session_id}",
+    dependencies=[Security(auth.requires_user)],
+    status_code=204,
+    responses={404: {"description": "Session not found or access denied"}},
+)
+async def delete_session(
+    session_id: str,
+    user_id: Annotated[str, Security(auth.get_user_id)],
+) -> Response:
+    """
+    Delete a chat session.
+
+    Permanently removes a chat session and all its messages.
+    Only the owner can delete their sessions.
+
+    Args:
+        session_id: The session ID to delete.
+        user_id: The authenticated user's ID.
+
+    Returns:
+        204 No Content on success.
+
+    Raises:
+        HTTPException: 404 if session not found or not owned by user.
+    """
+    deleted = await delete_chat_session(session_id, user_id)
+
+    if not deleted:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Session {session_id} not found or access denied",
+        )
+
+    return Response(status_code=204)
+
+
@router.get(
    "/sessions/{session_id}",
 )
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/CopilotPage.tsx
+++ b/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) {
@@ -48,7 +56,19 @@ export function CopilotPage() {
    >
      {!isMobile && <ChatSidebar />}
      <div className="relative flex h-full w-full flex-col overflow-hidden bg-[#f8f8f9] px-0">
-        {isMobile && <MobileHeader onOpenDrawer={handleOpenDrawer} />}
+        {isMobile && (
+          <MobileHeader
+            onOpenDrawer={handleOpenDrawer}
+            showDelete={!!sessionId}
+            isDeleting={isDeleting}
+            onDelete={() => {
+              const session = sessions.find((s) => s.id === sessionId);
+              if (session) {
+                handleDeleteClick(session.id, session.title);
+              }
+            }}
+          />
+        )}
        <div className="flex-1 overflow-hidden">
          <ChatContainer
            messages={messages}
@@ -75,6 +95,16 @@ export function CopilotPage() {
          onOpenChange={handleDrawerOpenChange}
        />
      )}
+      {/* 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}
+        />
+      )}
    </SidebarProvider>
  );
 }
--- 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 (
-    <Sidebar
-      variant="inset"
-      collapsible="icon"
-      className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
-    >
-      {isCollapsed && (
-        <SidebarHeader
-          className={cn(
-            "flex",
-            isCollapsed
-              ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
-              : "flex-row items-center justify-between",
-          )}
-        >
-          <motion.div
-            key={isCollapsed ? "header-collapsed" : "header-expanded"}
-            className="flex flex-col items-center gap-3 pt-4"
-            initial={{ opacity: 0, filter: "blur(3px)" }}
-            animate={{ opacity: 1, filter: "blur(0px)" }}
-            transition={{ type: "spring", bounce: 0.2 }}
-          >
-            <div className="flex flex-col items-center gap-2">
-              <SidebarTrigger />
-              <Button
-                variant="ghost"
-                onClick={handleNewChat}
-                style={{ minWidth: "auto", width: "auto" }}
-              >
-                <PlusCircleIcon className="!size-5" />
-                <span className="sr-only">New Chat</span>
-              </Button>
-            </div>
-          </motion.div>
-        </SidebarHeader>
-      )}
-      <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        {!isCollapsed && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.1 }}
-            className="flex items-center justify-between px-3"
-          >
-            <Text variant="h3" size="body-medium">
-              Your chats
-            </Text>
-            <div className="relative left-6">
-              <SidebarTrigger />
-            </div>
-          </motion.div>
-        )}
-
-        {!isCollapsed && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.15 }}
-            className="mt-4 flex flex-col gap-1"
-          >
-            {isLoadingSessions ? (
-              <div className="flex min-h-[30rem] items-center justify-center py-4">
-                <LoadingSpinner size="small" className="text-neutral-600" />
-              </div>
-            ) : sessions.length === 0 ? (
-              <p className="py-4 text-center text-sm text-neutral-500">
-                No conversations yet
-              </p>
-            ) : (
-              sessions.map((session) => (
-                <button
-                  key={session.id}
-                  onClick={() => handleSelectSession(session.id)}
-                  className={cn(
-                    "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
-                    session.id === sessionId
-                      ? "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 === sessionId
-                            ? "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>
-                </button>
-              ))
+    <>
+      <Sidebar
+        variant="inset"
+        collapsible="icon"
+        className="!top-[50px] !h-[calc(100vh-50px)] border-r border-zinc-100 px-0"
+      >
+        {isCollapsed && (
+          <SidebarHeader
+            className={cn(
+              "flex",
+              isCollapsed
+                ? "flex-row items-center justify-between gap-y-4 md:flex-col md:items-start md:justify-start"
+                : "flex-row items-center justify-between",
            )}
-          </motion.div>
-        )}
-      </SidebarContent>
-      {!isCollapsed && sessionId && (
-        <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.2, delay: 0.2 }}
          >
-            <Button
-              variant="primary"
-              size="small"
-              onClick={handleNewChat}
-              className="w-full"
-              leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
+            <motion.div
+              key={isCollapsed ? "header-collapsed" : "header-expanded"}
+              className="flex flex-col items-center gap-3 pt-4"
+              initial={{ opacity: 0, filter: "blur(3px)" }}
+              animate={{ opacity: 1, filter: "blur(0px)" }}
+              transition={{ type: "spring", bounce: 0.2 }}
            >
-              New Chat
-            </Button>
-          </motion.div>
-        </SidebarFooter>
-      )}
-    </Sidebar>
+              <div className="flex flex-col items-center gap-2">
+                <SidebarTrigger />
+                <Button
+                  variant="ghost"
+                  onClick={handleNewChat}
+                  style={{ minWidth: "auto", width: "auto" }}
+                >
+                  <PlusCircleIcon className="!size-5" />
+                  <span className="sr-only">New Chat</span>
+                </Button>
+              </div>
+            </motion.div>
+          </SidebarHeader>
+        )}
+        <SidebarContent className="gap-4 overflow-y-auto px-4 py-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {!isCollapsed && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, delay: 0.1 }}
+              className="flex items-center justify-between px-3"
+            >
+              <Text variant="h3" size="body-medium">
+                Your chats
+              </Text>
+              <div className="relative left-6">
+                <SidebarTrigger />
+              </div>
+            </motion.div>
+          )}
+
+          {!isCollapsed && (
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, delay: 0.15 }}
+              className="mt-4 flex flex-col gap-1"
+            >
+              {isLoadingSessions ? (
+                <div className="flex min-h-[30rem] items-center justify-center py-4">
+                  <LoadingSpinner size="small" className="text-neutral-600" />
+                </div>
+              ) : sessions.length === 0 ? (
+                <p className="py-4 text-center text-sm text-neutral-500">
+                  No conversations yet
+                </p>
+              ) : (
+                sessions.map((session) => (
+                  <div
+                    key={session.id}
+                    className={cn(
+                      "group relative w-full rounded-lg transition-colors",
+                      session.id === sessionId
+                        ? "bg-zinc-100"
+                        : "hover:bg-zinc-50",
+                    )}
+                  >
+                    <button
+                      onClick={() => handleSelectSession(session.id)}
+                      className="w-full px-3 py-2.5 pr-10 text-left"
+                    >
+                      <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 === sessionId
+                                ? "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>
+                    </button>
+                    <button
+                      onClick={(e) =>
+                        handleDeleteClick(e, session.id, session.title)
+                      }
+                      disabled={isDeleting}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1.5 text-zinc-400 opacity-0 transition-all group-hover:opacity-100 hover:bg-red-100 hover:text-red-600 focus-visible:opacity-100 disabled:cursor-not-allowed disabled:opacity-50"
+                      aria-label="Delete chat"
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </button>
+                  </div>
+                ))
+              )}
+            </motion.div>
+          )}
+        </SidebarContent>
+        {!isCollapsed && sessionId && (
+          <SidebarFooter className="shrink-0 bg-zinc-50 p-3 pb-1 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: 0.2, delay: 0.2 }}
+            >
+              <Button
+                variant="primary"
+                size="small"
+                onClick={handleNewChat}
+                className="w-full"
+                leftIcon={<PlusIcon className="h-4 w-4" weight="bold" />}
+              >
+                New Chat
+              </Button>
+            </motion.div>
+          </SidebarFooter>
+        )}
+      </Sidebar>
+
+      <DeleteConfirmDialog
+        entityType="chat"
+        entityName={sessionToDelete?.title || "Untitled chat"}
+        open={!!sessionToDelete}
+        onOpenChange={(open) => !open && setSessionToDelete(null)}
+        onDoDelete={handleConfirmDelete}
+      />
+    </>
  );
 }
--- a/autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileHeader/MobileHeader.tsx
+++ b/autogpt_platform/frontend/src/app/(platform)/copilot/components/MobileHeader/MobileHeader.tsx
@@ -1,22 +1,46 @@
 import { Button } from "@/components/atoms/Button/Button";
 import { NAVBAR_HEIGHT_PX } from "@/lib/constants";
-import { ListIcon } from "@phosphor-icons/react";
+import { ListIcon, TrashIcon } from "@phosphor-icons/react";

 interface Props {
  onOpenDrawer: () => void;
+  showDelete?: boolean;
+  isDeleting?: boolean;
+  onDelete?: () => void;
 }

-export function MobileHeader({ onOpenDrawer }: Props) {
+export function MobileHeader({
+  onOpenDrawer,
+  showDelete,
+  isDeleting,
+  onDelete,
+}: Props) {
  return (
-    <Button
-      variant="icon"
-      size="icon"
-      aria-label="Open sessions"
-      onClick={onOpenDrawer}
-      className="fixed z-50 bg-white shadow-md"
+    <div
+      className="fixed z-50 flex gap-2"
      style={{ left: "1rem", top: `${NAVBAR_HEIGHT_PX + 20}px` }}
    >
-      <ListIcon width="1.25rem" height="1.25rem" />
-    </Button>
+      <Button
+        variant="icon"
+        size="icon"
+        aria-label="Open sessions"
+        onClick={onOpenDrawer}
+        className="bg-white shadow-md"
+      >
+        <ListIcon width="1.25rem" height="1.25rem" />
+      </Button>
+      {showDelete && onDelete && (
+        <Button
+          variant="icon"
+          size="icon"
+          aria-label="Delete current chat"
+          onClick={onDelete}
+          disabled={isDeleting}
+          className="bg-white text-red-500 shadow-md hover:bg-red-50 hover:text-red-600 disabled:opacity-50"
+        >
+          <TrashIcon width="1.25rem" height="1.25rem" />
+        </Button>
+      )}
+    </div>
  );
 }
--- 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<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,
  };
 }
--- a/autogpt_platform/frontend/src/app/api/openapi.json
+++ b/autogpt_platform/frontend/src/app/api/openapi.json
@@ -1151,6 +1151,36 @@
      }
    },
    "/api/chat/sessions/{session_id}": {
+      "delete": {
+        "tags": ["v2", "chat", "chat"],
+        "summary": "Delete Session",
+        "description": "Delete a chat session.\n\nPermanently removes a chat session and all its messages.\nOnly the owner can delete their sessions.\n\nArgs:\n    session_id: The session ID to delete.\n    user_id: The authenticated user's ID.\n\nReturns:\n    204 No Content on success.\n\nRaises:\n    HTTPException: 404 if session not found or not owned by user.",
+        "operationId": "deleteV2DeleteSession",
+        "security": [{ "HTTPBearerJWT": [] }],
+        "parameters": [
+          {
+            "name": "session_id",
+            "in": "path",
+            "required": true,
+            "schema": { "type": "string", "title": "Session Id" }
+          }
+        ],
+        "responses": {
+          "204": { "description": "Successful Response" },
+          "401": {
+            "$ref": "#/components/responses/HTTP401NotAuthenticatedError"
+          },
+          "404": { "description": "Session not found or access denied" },
+          "422": {
+            "description": "Validation Error",
+            "content": {
+              "application/json": {
+                "schema": { "$ref": "#/components/schemas/HTTPValidationError" }
+              }
+            }
+          }
+        }
+      },
      "get": {
        "tags": ["v2", "chat", "chat"],
        "summary": "Get Session",
--- a/autogpt_platform/frontend/src/components/legacy/ui/dialog.tsx
+++ b/autogpt_platform/frontend/src/components/legacy/ui/dialog.tsx
@@ -115,7 +115,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
      className,
    )}
    {...props}