Implementing deletion of chat (#39)

* Implementing deletion of chat

* svelte refactoring of delete code

---------

Co-authored-by: Nathan Sarrazin <sarrazin.nathan@gmail.com>

api/main.py

@@ -143,6 +143,15 @@ async def get_specific_chat(chat_id: str):
 
     return chat
 
+@app.delete("/chat/{chat_id}", tags=["chats"])
+async def delete_chat(chat_id: str):
+    chat = await Chat.get(chat_id)
+    deleted_chat = await chat.delete()
+
+    if deleted_chat:
+        return {"message": f"Deleted chat with id: {chat_id}"}
+    else:
+        raise HTTPException(status_code=404, detail="No chat found with the given id.")
 
 async def on_close(chat, prompt, answer=None, error=None):
     question = await Question(question=prompt.rstrip(), 

web/src/routes/+layout.svelte

@@ -1,8 +1,26 @@
 <script lang="ts">
   import "../app.css";
   import type { LayoutData } from "./$types";
+  import { invalidate, goto } from "$app/navigation";
+  import { page } from "$app/stores";
   export let data: LayoutData;
 
+  $: deleteConfirm = false;
+
+  async function deleteChat(chatID: string) {
+    var response = await fetch("/api/chat/" + chatID, { method: "DELETE" });
+    if (response.status == 200) {
+      await goto("/");
+      await invalidate("/api/chats");
+    } else {
+      alert("Error " + response.status + ": " + response.statusText);
+    }
+  }
+
+  function toggleDeleteConfirm() {
+    deleteConfirm = !deleteConfirm;
+  }
+
   function timeSince(datestring: string) {
     const date = new Date(datestring);
     var seconds = Math.floor((Date.now() - date.getTime()) / 1000);
@@ -56,6 +74,31 @@
               <div>
                 <span class="font-semibold">{chat.model}</span>
                 <span class="ml-3">{timeSince(chat.created) + " ago"}</span>
+                {#if $page.params.id == chat.id}
+                  {#if deleteConfirm}
+                    <button
+                      name="confirm-delete"
+                      class="btn btn-ghost btn-sm"
+                      on:click|preventDefault={() => deleteChat(chat.id)}
+                    >
+                      ✅
+                    </button>
+                    <button
+                      name="cancel-delete"
+                      class="btn btn-ghost btn-sm"
+                      on:click|preventDefault={toggleDeleteConfirm}
+                    >
+                      ❎
+                    </button>
+                  {:else}
+                    <button
+                      class="btn btn-ghost btn-sm"
+                      on:click|preventDefault={toggleDeleteConfirm}
+                    >
+                      🗑️
+                    </button>
+                  {/if}
+                {/if}
               </div>
               <p class="font-light text-sm">{truncate(chat.subtitle, 100)}</p>
             </div>