Implement self-service delete for chats (#41)

Jontes-Tech · lucemans · web-flow · commit 4cf1e3cd9894 · 2025-07-21T00:40:30.000+02:00
* Implement self-service delete for chats

* Update button location

* Add confirmation modal

---------

Co-authored-by: Luc &lt;luc@lucemans.nl&gt;
diff --git a/app/src/models/workshop/chat.rs b/app/src/models/workshop/chat.rs
@@ -21,15 +21,18 @@ pub struct WorkshopChat {
 }
 
 impl WorkshopChat {
-    pub async fn find_by_user_id(user_id: Uuid, state: &AppState) -> Result<Vec<Self>, sqlx::Error> {
-        query_as("SELECT * FROM workshop_chats WHERE user_id = $1 ORDER BY created_at DESC")
+    pub async fn find_by_user_id(
+        user_id: Uuid,
+        state: &AppState,
+    ) -> Result<Vec<Self>, sqlx::Error> {
+        query_as("SELECT * FROM workshop_chats WHERE user_id = $1 AND deleted_at IS NULL ORDER BY created_at DESC")
             .bind(user_id)
             .fetch_all(&state.database.pool)
             .await
     }
 
     pub async fn find_by_id(chat_id: Uuid, state: &AppState) -> Result<Self, sqlx::Error> {
-        query_as("SELECT * FROM workshop_chats WHERE chat_id = $1")
+        query_as("SELECT * FROM workshop_chats WHERE chat_id = $1 AND deleted_at IS NULL")
             .bind(chat_id)
             .fetch_one(&state.database.pool)
             .await
@@ -42,20 +45,34 @@ impl WorkshopChat {
             .await
     }
 
-    pub async fn update_last_message(chat_id: &Uuid, message_id: &Uuid, state: &AppState) -> Result<Self, sqlx::Error> {
-        query_as("UPDATE workshop_chats SET last_message_id = $1 WHERE chat_id = $2 RETURNING *")
+    pub async fn update_last_message(
+        chat_id: &Uuid,
+        message_id: &Uuid,
+        state: &AppState,
+    ) -> Result<Self, sqlx::Error> {
+        query_as("UPDATE workshop_chats SET last_message_id = $1 WHERE chat_id = $2 AND deleted_at IS NULL RETURNING *")
             .bind(message_id)
             .bind(chat_id)
             .fetch_one(&state.database.pool)
             .await
     }
 
-    pub async fn update_summary(chat_id: &Uuid, summary: &str, state: &AppState) -> Result<Self, sqlx::Error> {
-        query_as("UPDATE workshop_chats SET summary = $1 WHERE chat_id = $2 RETURNING *")
+    pub async fn update_summary(
+        chat_id: &Uuid,
+        summary: &str,
+        state: &AppState,
+    ) -> Result<Self, sqlx::Error> {
+        query_as("UPDATE workshop_chats SET summary = $1 WHERE chat_id = $2 AND deleted_at IS NULL RETURNING *")
             .bind(summary)
             .bind(chat_id)
             .fetch_one(&state.database.pool)
             .await
     }
-}
 
+    pub async fn delete(chat_id: &Uuid, state: &AppState) -> Result<Self, sqlx::Error> {
+        query_as("UPDATE workshop_chats SET deleted_at = NOW() WHERE chat_id = $1 AND deleted_at IS NULL RETURNING *")
+            .bind(chat_id)
+            .fetch_one(&state.database.pool)
+            .await
+    }
+}
diff --git a/app/src/models/workshop/message.rs b/app/src/models/workshop/message.rs
@@ -143,7 +143,11 @@ impl WorkshopMessage {
     ) -> Result<Vec<Self>, sqlx::Error> {
         query_as!(
             Self,
-            "SELECT message_id, chat_id, sender_role, message, created_at, parent_message_id, streaming_events, prompt_tokens, completion_tokens, total_tokens, reasoning_tokens, model_used FROM workshop_messages WHERE chat_id = $1 ORDER BY created_at ASC",
+            "SELECT m.message_id, m.chat_id, m.sender_role, m.message, m.created_at, m.parent_message_id, m.streaming_events, m.prompt_tokens, m.completion_tokens, m.total_tokens, m.reasoning_tokens, m.model_used 
+             FROM workshop_messages m 
+             INNER JOIN workshop_chats c ON m.chat_id = c.chat_id 
+             WHERE m.chat_id = $1 AND c.deleted_at IS NULL 
+             ORDER BY m.created_at ASC",
             chat_id
         )
         .fetch_all(&state.database.pool)
@@ -159,10 +163,15 @@ impl WorkshopMessage {
     ) -> Result<Vec<Self>, sqlx::Error> {
         query_as(
             r#"WITH RECURSIVE message_tree AS (
-            SELECT message_id, chat_id, sender_role, message, created_at, parent_message_id, streaming_events, prompt_tokens, completion_tokens, total_tokens, reasoning_tokens, model_used FROM workshop_messages WHERE message_id = $1
+            SELECT m.message_id, m.chat_id, m.sender_role, m.message, m.created_at, m.parent_message_id, m.streaming_events, m.prompt_tokens, m.completion_tokens, m.total_tokens, m.reasoning_tokens, m.model_used 
+            FROM workshop_messages m 
+            INNER JOIN workshop_chats c ON m.chat_id = c.chat_id 
+            WHERE m.message_id = $1 AND c.deleted_at IS NULL
             UNION ALL
-            SELECT m.message_id, m.chat_id, m.sender_role, m.message, m.created_at, m.parent_message_id, m.streaming_events, m.prompt_tokens, m.completion_tokens, m.total_tokens, m.reasoning_tokens, m.model_used FROM workshop_messages m
+            SELECT m.message_id, m.chat_id, m.sender_role, m.message, m.created_at, m.parent_message_id, m.streaming_events, m.prompt_tokens, m.completion_tokens, m.total_tokens, m.reasoning_tokens, m.model_used 
+            FROM workshop_messages m
             INNER JOIN message_tree mt ON m.message_id = mt.parent_message_id
+            INNER JOIN workshop_chats c ON m.chat_id = c.chat_id AND c.deleted_at IS NULL
         )
         SELECT message_id, chat_id, sender_role, message, created_at, parent_message_id, streaming_events, prompt_tokens, completion_tokens, total_tokens, reasoning_tokens, model_used FROM message_tree
         ORDER BY created_at ASC"#,
diff --git a/app/src/models/workshop/snapshot.rs b/app/src/models/workshop/snapshot.rs
@@ -29,14 +29,28 @@ pub struct WorkshopSnapshotResponse {
 
 impl WorkshopSnapshot {
     pub async fn create(chat_id: Uuid, message_id: Uuid, user_id: Uuid, state: &AppState) -> Result<Self, sqlx::Error> {
-        let snapshot = query_as!(WorkshopSnapshot, "INSERT INTO workshop_snapshots (chat_id, message_id, user_id) VALUES ($1, $2, $3) RETURNING *", chat_id, message_id, user_id)
+        sqlx::query!(
+            "SELECT chat_id FROM workshop_chats WHERE chat_id = $1 AND deleted_at IS NULL",
+            chat_id
+        )
+        .fetch_one(&state.database.pool)
+        .await?;
+
+        let snapshot = query_as!(WorkshopSnapshot, 
+            "INSERT INTO workshop_snapshots (chat_id, message_id, user_id) VALUES ($1, $2, $3) RETURNING *", 
+            chat_id, message_id, user_id)
             .fetch_one(&state.database.pool)
             .await?;
         Ok(snapshot)
     }
 
     pub async fn get_by_snapshot_id(snapshot_id: Uuid, state: &AppState) -> Result<Self, sqlx::Error> {
-        let snapshot = query_as!(WorkshopSnapshot, "SELECT * FROM workshop_snapshots WHERE snapshot_id = $1", snapshot_id)
+        let snapshot = query_as!(WorkshopSnapshot, 
+            "SELECT s.snapshot_id, s.chat_id, s.user_id, s.message_id, s.created_at 
+             FROM workshop_snapshots s 
+             INNER JOIN workshop_chats c ON s.chat_id = c.chat_id 
+             WHERE s.snapshot_id = $1 AND c.deleted_at IS NULL", 
+            snapshot_id)
             .fetch_one(&state.database.pool)
             .await?;
         Ok(snapshot)
diff --git a/app/src/server/workshop/mod.rs b/app/src/server/workshop/mod.rs
@@ -845,4 +845,51 @@ impl WorkshopApi {
 
         Ok(Json(messages))
     }
+
+    /// /ws/chat/:chat_id
+    ///
+    /// Delete a chat and all associated messages and snapshots
+    #[oai(
+        path = "/ws/chat/:chat_id",
+        method = "delete",
+        tag = "ApiTags::Workshop"
+    )]
+    async fn delete_chat(
+        &self,
+        state: Data<&AppState>,
+        auth_user: AuthUser,
+        #[oai(style = "simple")] chat_id: Path<Uuid>,
+    ) -> Result<Json<serde_json::Value>> {
+        let user_id = auth_user.0.user.user_id;
+
+        let chat = WorkshopChat::find_by_id(*chat_id, &state)
+            .await
+            .map_err(|e| {
+                tracing::error!("Error finding chat: {:?}", e);
+                poem::Error::from_status(StatusCode::INTERNAL_SERVER_ERROR)
+            })?;
+
+        if chat.user_id != user_id {
+            tracing::warn!(
+                "User {} attempted to delete chat {} owned by {}",
+                user_id,
+                *chat_id,
+                chat.user_id
+            );
+            return Err(poem::Error::from_status(StatusCode::FORBIDDEN));
+        }
+
+        WorkshopChat::delete(&chat_id, &state).await.map_err(|e| {
+            tracing::error!("Error deleting chat: {:?}", e);
+            poem::Error::from_status(StatusCode::INTERNAL_SERVER_ERROR)
+        })?;
+
+        tracing::info!(
+            "Successfully deleted chat {} for user {}",
+            *chat_id,
+            user_id
+        );
+
+        Ok(Json(serde_json::json!({ "success": true })))
+    }
 }
diff --git a/web/src/api/schema.gen.ts b/web/src/api/schema.gen.ts
@@ -800,7 +800,31 @@ export interface paths {
                 };
             };
         };
-        delete?: never;
+        /**
+         * /ws/chat/:chat_id
+         * @description Delete a chat and all associated messages and snapshots
+         */
+        delete: {
+            parameters: {
+                query?: never;
+                header?: never;
+                path: {
+                    chat_id: string;
+                };
+                cookie?: never;
+            };
+            requestBody?: never;
+            responses: {
+                200: {
+                    headers: {
+                        [name: string]: unknown;
+                    };
+                    content: {
+                        "application/json; charset=utf-8": unknown;
+                    };
+                };
+            };
+        };
         options?: never;
         head?: never;
         patch?: never;
diff --git a/web/src/api/workshop.ts b/web/src/api/workshop.ts
@@ -252,3 +252,18 @@ export const useWorkshopSnapshot = (snapshotId: string) => {
         },
     });
 };
+
+export const useWorkshopDeleteChat = () => {
+    return useMutation({
+        mutationFn: async (chatId: string) => {
+            await useApi('/ws/chat/{chat_id}', 'delete', {
+                path: { chat_id: chatId },
+            });
+        },
+        onSuccess: (_, chatId) => {
+            queryClient.invalidateQueries({ queryKey: ['workshop', 'chats'] });
+            queryClient.invalidateQueries({ queryKey: ['workshop', 'chat', chatId] });
+            queryClient.invalidateQueries({ queryKey: ['workshop'] });
+        },
+    });
+};
diff --git a/web/src/components/workshop/WorkshopChatsNav.tsx b/web/src/components/workshop/WorkshopChatsNav.tsx
@@ -1,9 +1,12 @@
-import { Link, useParams, useRouterState } from '@tanstack/react-router';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Link, useNavigate, useParams, useRouterState } from '@tanstack/react-router';
 import classNames from 'classnames';
+import { FC, useState } from 'react';
 import { FiBarChart } from 'react-icons/fi';
+import { LuX } from 'react-icons/lu';
 
 import { useAuth } from '@/api/auth';
-import { useWorkshopChats } from '@/api/workshop';
+import { useWorkshopChats, useWorkshopDeleteChat } from '@/api/workshop';
 
 import { Tooltip } from '../tooltip/Tooltip';
 
@@ -29,6 +32,7 @@ const AuthenticatedWorkshopChats = () => {
     try {
         const params = useParams({ from: '/chat/$chatId' });
 
+        // eslint-disable-next-line prefer-destructuring
         chatId = params.chatId;
     } catch {
         // We're not on a /chat/$chatId route, so no chatId
@@ -60,8 +64,8 @@ const AuthenticatedWorkshopChats = () => {
                             params={{ chatId: chat.chat_id }}
                             hash={chat.last_message_id}
                             className={classNames(
-                                'flex justify-between items-center hover:bg-secondary px-1.5 py-0.5 relative',
-                                chat.chat_id === chatId && 'bg-secondary'
+                                'flex justify-between items-center hover:bg-tertiary px-1.5 py-0.5 relative group/workshoplink',
+                                chat.chat_id === chatId && 'bg-tertiary'
                             )}
                         >
                             <div className="w-full">
@@ -76,6 +80,9 @@ const AuthenticatedWorkshopChats = () => {
                                 >
                                     {chat.summary || 'Untitled conversation'}
                                 </Tooltip>
+                                <div className="absolute right-0 top-1/2 -translate-y-1/2 hidden group-hover/workshoplink:block">
+                                    <DeleteButton chatId={chat.chat_id} currentChatId={chatId} />
+                                </div>
                             </div>
                         </Link>
                     </li>
@@ -84,3 +91,63 @@ const AuthenticatedWorkshopChats = () => {
         </div>
     );
 };
+
+export const DeleteButton: FC<{ chatId: string; currentChatId?: string }> = ({
+    chatId,
+    currentChatId,
+}) => {
+    const { mutate: deleteChat } = useWorkshopDeleteChat();
+    const navigate = useNavigate();
+    const [open, setOpen] = useState(false);
+
+    const handleDelete = () => {
+        deleteChat(chatId, {
+            onSuccess() {
+                setOpen(false);
+
+                if (chatId === currentChatId) {
+                    navigate({ to: '/chat/$chatId', params: { chatId: 'new' } });
+                }
+            },
+        });
+    };
+
+    return (
+        <Dialog.Root open={open} onOpenChange={setOpen}>
+            <Dialog.Trigger asChild>
+                <button className="button flex items-center gap-2">
+                    <LuX />
+                </button>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40 data-[state=open]:animate-overlayShow overflow-y-scroll grid place-items-center">
+                    <Dialog.Content className="z-50 relative my-10 max-w-md shadow-[var(--shadow-6)] focus:outline-none data-[state=open]:animate-contentShow mx-auto w-full p-6 bg-primary space-y-4">
+                        <Dialog.Title className="text-xl font-bold">
+                            Delete Conversation
+                        </Dialog.Title>
+                        <Dialog.Description>
+                            Are you sure you want to delete this conversation? This action cannot be
+                            undone.
+                        </Dialog.Description>
+                        <div className="flex gap-3 justify-end">
+                            <Dialog.Close asChild>
+                                <button className="px-4 py-2 text-sm font-medium button">
+                                    Cancel
+                                </button>
+                            </Dialog.Close>
+                            <button
+                                onClick={handleDelete}
+                                className="px-4 py-2 text-sm font-medium button button-red"
+                            >
+                                Delete
+                            </button>
+                        </div>
+                        <Dialog.Close className="absolute top-2 right-2 -translate-y-1/2 hover:bg-secondary rounded-full p-1">
+                            <LuX className="size-5" />
+                        </Dialog.Close>
+                    </Dialog.Content>
+                </Dialog.Overlay>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};
