feat: add button to delete conversations (#55)

* feat: add button to delete conversations

* fix: return on api conversation delete failure

* fix: typo in filename

* fix: use button and stop click propagation

* fix: e2e test not passing

Author: Miyou

e2e/conversation.spec.ts

@@ -122,7 +122,7 @@ test.describe('Conversation Flow', () => {
     const message = 'Hello. We are testing, just say exactly "Hello world" without anything else.';
 
     // Type a message
-    await page.getByRole('textbox').fill(message);
+    await page.getByPlaceholder('Send a message...').fill(message);
     await page.keyboard.press('Enter');
 
     // Should show the message in the conversation

src/components/ConversationList.tsx

@@ -1,15 +1,16 @@
-import { Clock, MessageSquare, Lock, Loader2, Signal } from 'lucide-react';
+import { Clock, MessageSquare, Lock, Loader2, Signal, Trash } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { getRelativeTimeString } from '@/utils/time';
 import { useApi } from '@/contexts/ApiContext';
 import { demoConversations } from '@/democonversations';
 
 import type { MessageRole } from '@/types/conversation';
-import type { FC } from 'react';
+import { useState, type FC } from 'react';
 import { Computed, use$ } from '@legendapp/state/react';
 import { type Observable } from '@legendapp/state';
 import { conversations$ } from '@/stores/conversations';
+import { DeleteConversationConfirmationDialog } from './DeleteConversationConfirmationDialog';
 
 type MessageBreakdown = Partial<Record<MessageRole, number>>;
 
@@ -42,6 +43,8 @@ export const ConversationList: FC<Props> = ({
 }) => {
   const { isConnected$ } = useApi();
   const isConnected = use$(isConnected$);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [conversationToDelete, setConversationToDelete] = useState<string | null>(null);
 
   if (!conversations) {
     return null;
@@ -198,6 +201,23 @@ export const ConversationList: FC<Props> = ({
                       <TooltipContent>This conversation is read-only</TooltipContent>
                     </Tooltip>
                   )}
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        aria-label="Delete conversation"
+                        className="flex items-center"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setConversationToDelete(conv.name);
+                          setDeleteDialogOpen(true);
+                        }}
+                      >
+                        <Trash className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>Delete conversation</TooltipContent>
+                  </Tooltip>
                 </div>
               </div>
             </div>
@@ -209,6 +229,14 @@ export const ConversationList: FC<Props> = ({
 
   return (
     <div data-testid="conversation-list" className="h-full space-y-2 overflow-y-auto p-4">
+      <DeleteConversationConfirmationDialog
+        conversationName={conversationToDelete ?? ''}
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        onDelete={() => {
+          setConversationToDelete(null);
+        }}
+      />
       {isLoading && (
         <div className="flex items-center justify-center p-4 text-sm text-muted-foreground">
           <Loader2 className="mr-2 h-4 w-4 animate-spin" />

src/components/DeleteConversationConfirmationDialog.tsx

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+import { useApi } from '@/contexts/ApiContext';
+import { conversations$, selectedConversation$ } from '@/stores/conversations';
+import { useQueryClient } from '@tanstack/react-query';
+import { use$ } from '@legendapp/state/react';
+import { demoConversations } from '@/democonversations';
+
+interface Props {
+  conversationName: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDelete: () => void;
+}
+
+export function DeleteConversationConfirmationDialog({
+  conversationName,
+  open,
+  onOpenChange,
+  onDelete,
+}: Props) {
+  const { deleteConversation, connectionConfig, isConnected$ } = useApi();
+  const queryClient = useQueryClient();
+  const isConnected = use$(isConnected$);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleDelete = async () => {
+    // Show loading indicator
+    setIsDeleting(true);
+
+    // Delete conversation
+    try {
+      await deleteConversation(conversationName);
+    } catch (error) {
+      setIsError(true);
+      if (error instanceof Error) {
+        setErrorMessage(error.message);
+      } else {
+        setErrorMessage('An unknown error occurred');
+      }
+      setIsDeleting(false);
+      return;
+    }
+    conversations$.delete(conversationName);
+    queryClient.invalidateQueries({
+      queryKey: ['conversations', connectionConfig.baseUrl, isConnected],
+    });
+    selectedConversation$.set(demoConversations[0].name);
+
+    // Reset state
+    await onDelete();
+    setIsDeleting(false);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Delete Conversation</DialogTitle>
+          <DialogDescription>
+            Are you sure you want to delete the conversation <strong>{conversationName}</strong>?
+            This action cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        {isError && (
+          <div className="mb-4 rounded-md bg-destructive/10 p-4 text-sm text-destructive">
+            <p>{errorMessage}</p>
+          </div>
+        )}
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
+            {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/contexts/ApiContext.tsx

@@ -31,6 +31,7 @@ interface ApiContextType {
   closeEventStream: ApiClient['closeEventStream'];
   getChatConfig: ApiClient['getChatConfig'];
   updateChatConfig: ApiClient['updateChatConfig'];
+  deleteConversation: ApiClient['deleteConversation'];
 }
 
 const ApiContext = createContext<ApiContextType | null>(null);
@@ -217,6 +218,7 @@ export function ApiProvider({
         closeEventStream: api.closeEventStream.bind(api),
         getChatConfig: api.getChatConfig.bind(api),
         updateChatConfig: api.updateChatConfig.bind(api),
+        deleteConversation: api.deleteConversation.bind(api),
       }}
     >
       {children}

src/utils/api.ts

@@ -714,6 +714,17 @@ export class ApiClient {
       }
     );
   }
+
+  async deleteConversation(logfile: string): Promise<void> {
+    if (!this.isConnected) {
+      throw new ApiClientError('Not connected to API');
+    }
+
+    await this.fetchJson<{ status: string }>(`${this.baseUrl}/api/v2/conversations/${logfile}`, {
+      method: 'DELETE',
+      signal: this.controller?.signal,
+    });
+  }
 }
 
 export const createApiClient = (baseUrl?: string, authHeader?: string | null): ApiClient => {