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>
       )}

src/icons/EllipsisHorizontalIcon.tsx

@@ -0,0 +1,20 @@
+type Props = {
+    className: string
+}
+
+export const EllipsisHorizontalIcon = ({ className }: Props) => {
+    return   <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    viewBox="0 0 24 24"
+    className={className}
+  >
+    <circle cx="12" cy="12" r="1"></circle>
+    <circle cx="12" cy="5" r="1"></circle>
+    <circle cx="12" cy="19" r="1"></circle>
+  </svg>
+}

src/icons/PencilIcon.tsx

@@ -0,0 +1,19 @@
+type Props = {
+  className: string
+}
+
+export const PencilIcon = ({ className }: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      className={className}>
+      <path d="M17 3a2.85 2.83 0 114 4L7.5 20.5 2 22l1.5-5.5zM15 5l4 4"></path>
+    </svg>
+  )
+}

src/libs/db.ts

@@ -87,6 +87,10 @@ export class PageAssitDatabase {
     }
     this.db.remove("chatHistories")
   }
+
+  async deleteMessage(history_id: string) {
+    await this.db.remove(history_id)
+  }
 }
 
 const generateID = () => {
@@ -145,3 +149,22 @@ export const formatToMessage = (messages: MessageHistory): MessageType[] => {
     }
   })
 }
+
+export const deleteByHistoryId = async (history_id: string) => {
+  const db = new PageAssitDatabase()
+  await db.deleteMessage(history_id)
+  await db.removeChatHistory(history_id)
+  return history_id
+}
+
+export const updateHistory = async (id: string, title: string) => {
+  const db = new PageAssitDatabase()
+  const chatHistories = await db.getChatHistories()
+  const newChatHistories = chatHistories.map((history) => {
+    if (history.id === id) {
+      history.title = title
+    }
+    return history
+  })
+  db.db.set({ chatHistories: newChatHistories })
+}