Update PlaygroundForm and Sidebar components

src/components/Option/Playground/PlaygroundForm.tsx

@@ -1,5 +1,5 @@
 import { useForm } from "@mantine/form"
-import { useMutation } from "@tanstack/react-query"
+import { useMutation, useQueryClient } from "@tanstack/react-query"
 import React from "react"
 import useDynamicTextareaSize from "~hooks/useDynamicTextareaSize"
 import PhotoIcon from "@heroicons/react/24/outline/PhotoIcon"
@@ -50,12 +50,19 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
     }
   }, [dropedFile])
 
-  useDynamicTextareaSize(textareaRef, form.values.message, 120)
+  useDynamicTextareaSize(textareaRef, form.values.message, 300)
 
-  const { onSubmit, selectedModel, chatMode } = useMessageOption()
+  const { onSubmit, selectedModel, chatMode, clearChat } = useMessageOption()
+
+  const queryClient = useQueryClient()
 
   const { mutateAsync: sendMessage, isPending: isSending } = useMutation({
-    mutationFn: onSubmit
+    mutationFn: onSubmit,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["fetchChatHistory"]
+      })
+    }
   })
 
   return (
@@ -82,7 +89,9 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
         </div>
         <div className="flex">
           <Tooltip title="New Chat">
-            <button className="text-gray-500 dark:text-gray-100 mr-3">
+            <button
+              onClick={clearChat}
+              className="text-gray-500 dark:text-gray-100 mr-3">
               <ArrowPathIcon className="h-5 w-5" />
             </button>
           </Tooltip>

src/components/Option/Sidebar.tsx

@@ -1,10 +1,17 @@
 import { useQuery } from "@tanstack/react-query"
-import { PageAssitDatabase } from "~libs/db"
+import {
+  PageAssitDatabase,
+  formatToChatHistory,
+  formatToMessage
+} from "~libs/db"
 import { Empty, Skeleton } from "antd"
+import { useMessageOption } from "~hooks/useMessageOption"
 
 type Props = {}
 
 export const Sidebar = ({}: Props) => {
+  const { setMessages, setHistory, setHistoryId } = useMessageOption()
+
   const { data: chatHistories, status } = useQuery({
     queryKey: ["fetchChatHistory"],
     queryFn: async () => {
@@ -15,7 +22,7 @@ export const Sidebar = ({}: Props) => {
   })
 
   return (
-    <div className="overflow-y-auto h-[calc(100%-60px)]">
+    <div className="overflow-y-auto">
       {status === "success" && chatHistories.length === 0 && (
         <div className="flex justify-center items-center mt-20 overflow-hidden">
           <Empty description="No history yet" />
@@ -34,11 +41,18 @@ export const Sidebar = ({}: Props) => {
       {status === "success" && chatHistories.length > 0 && (
         <div className="flex flex-col gap-2">
           {chatHistories.map((chat, index) => (
-            <div
+            <button
+              onClick={async () => {
+                const db = new PageAssitDatabase()
+                const history = await db.getChatHistory(chat.id)
+                setHistoryId(chat.id)
+                setHistory(formatToChatHistory(history))
+                setMessages(formatToMessage(history))
+              }}
               key={index}
-              className="flex py-2 px-2 cursor-pointer items-center 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">
+              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>
-            </div>
+            </button>
           ))}
         </div>
       )}