Delete and Update History

src/components/Option/Settings/ollama.tsx

@@ -9,7 +9,6 @@ export const SettingsOllama = () => {
     queryKey: ["fetchOllamURL"],
     queryFn: async () => {
       const ollamaURL = await getOllamaURL()
-
       return {
         ollamaURL
       }

src/components/Option/Sidebar.tsx

@@ -1,16 +1,26 @@
-import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import {
   PageAssitDatabase,
   formatToChatHistory,
-  formatToMessage
+  formatToMessage,
+  deleteByHistoryId,
+  updateHistory
 } from "~libs/db"
-import { Empty, Skeleton } from "antd"
+import { Dropdown, Empty, Skeleton, Spin } from "antd"
 import { useMessageOption } from "~hooks/useMessageOption"
+import { Trash } from "~icons/Trash"
+import { Fragment, useState } from "react"
+import { PencilIcon } from "~icons/PencilIcon"
+import { EllipsisHorizontalIcon } from "~icons/EllipsisHorizontalIcon"
+import { Menu, Transition } from "@headlessui/react"
 
 type Props = {}
 
 export const Sidebar = ({}: Props) => {
-  const { setMessages, setHistory, setHistoryId } = useMessageOption()
+  const { setMessages, setHistory, setHistoryId, historyId, clearChat } =
+    useMessageOption()
+  const [processingId, setProcessingId] = useState<string>("")
+  const client = useQueryClient()
 
   const { data: chatHistories, status } = useQuery({
     queryKey: ["fetchChatHistory"],
@@ -21,8 +31,35 @@ export const Sidebar = ({}: Props) => {
     }
   })
 
+  const { isPending: isDeleting, mutate: deleteHistory } = useMutation({
+    mutationKey: ["deleteHistory"],
+    mutationFn: deleteByHistoryId,
+    onSuccess: (history_id) => {
+      client.invalidateQueries({
+        queryKey: ["fetchChatHistory"]
+      })
+      setProcessingId("")
+      if (historyId === history_id) {
+        clearChat()
+      }
+    }
+  })
+
+  const { isPending: isEditing, mutate: editHistory } = useMutation({
+    mutationKey: ["editHistory"],
+    mutationFn: async (data: { id: string; title: string }) => {
+      return await updateHistory(data.id, data.title)
+    },
+    onSuccess: () => {
+      client.invalidateQueries({
+        queryKey: ["fetchChatHistory"]
+      })
+      setProcessingId("")
+    }
+  })
+
   return (
-    <div className="overflow-y-auto">
+    <div className="overflow-y-auto z-99">
       {status === "success" && chatHistories.length === 0 && (
         <div className="flex justify-center items-center mt-20 overflow-hidden">
           <Empty description="No history yet" />
@@ -41,18 +78,49 @@ export const Sidebar = ({}: Props) => {
       {status === "success" && chatHistories.length > 0 && (
         <div className="flex flex-col gap-2">
           {chatHistories.map((chat, index) => (
-            <button
-              onClick={async () => {
-                const db = new PageAssitDatabase()
-                const history = await db.getChatHistory(chat.id)
-                setHistoryId(chat.id)
-                setHistory(formatToChatHistory(history))
-                setMessages(formatToMessage(history))
-              }}
+            <div
               key={index}
-              className="flex text-start py-2 px-2 cursor-pointer items-start gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out  bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
-              <span className="flex-grow truncate">{chat.title}</span>
-            </button>
+              className="flex py-2 px-2 items-start gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out   bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
+              <button
+                className="flex-1 overflow-hidden break-all text-start truncate w-full"
+                onClick={async () => {
+                  const db = new PageAssitDatabase()
+                  const history = await db.getChatHistory(chat.id)
+                  setHistoryId(chat.id)
+                  setHistory(formatToChatHistory(history))
+                  setMessages(formatToMessage(history))
+                }}>
+                <span className="flex-grow truncate">{chat.title}</span>
+              </button>
+              <div className="flex flex-row gap-3">
+                <button
+                  onClick={() => {
+                    const newTitle = prompt("Enter new title", chat.title)
+
+                    if (newTitle) {
+                      editHistory({ id: chat.id, title: newTitle })
+                    }
+
+                    setProcessingId(chat.id)
+                  }}
+                  className="text-gray-500 dark:text-gray-400 opacity-80">
+                  <PencilIcon className="w-4 h-4" />
+                </button>
+
+                <button
+                  onClick={() => {
+                    if (
+                      !confirm("Are you sure you want to delete this history?")
+                    )
+                      return
+                    deleteHistory(chat.id)
+                    setProcessingId(chat.id)
+                  }}
+                  className="text-red-500 dark:text-red-400 opacity-80">
+                  <Trash className=" w-4 h-4 " />
+                </button>
+              </div>
+            </div>
           ))}
         </div>
       )}