Fix styling issues in various components

src/components/Option/Sidebar.tsx

@@ -10,14 +10,17 @@ import { Empty, Skeleton } from "antd"
 import { useMessageOption } from "~hooks/useMessageOption"
 import { useState } from "react"
 import { PencilIcon, Trash2 } from "lucide-react"
+import { useNavigate } from "react-router-dom"
 
-type Props = {}
+type Props = {
+  onClose: () => void
+}
 
-export const Sidebar = ({}: Props) => {
+export const Sidebar = ({ onClose }: Props) => {
   const { setMessages, setHistory, setHistoryId, historyId, clearChat } =
     useMessageOption()
-  const [processingId, setProcessingId] = useState<string>("")
   const client = useQueryClient()
+  const navigate = useNavigate()
 
   const { data: chatHistories, status } = useQuery({
     queryKey: ["fetchChatHistory"],
@@ -28,21 +31,20 @@ export const Sidebar = ({}: Props) => {
     }
   })
 
-  const { isPending: isDeleting, mutate: deleteHistory } = useMutation({
+  const { 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({
+  const { mutate: editHistory } = useMutation({
     mutationKey: ["editHistory"],
     mutationFn: async (data: { id: string; title: string }) => {
       return await updateHistory(data.id, data.title)
@@ -51,7 +53,6 @@ export const Sidebar = ({}: Props) => {
       client.invalidateQueries({
         queryKey: ["fetchChatHistory"]
       })
-      setProcessingId("")
     }
   })
 
@@ -86,6 +87,8 @@ export const Sidebar = ({}: Props) => {
                   setHistoryId(chat.id)
                   setHistory(formatToChatHistory(history))
                   setMessages(formatToMessage(history))
+                  navigate("/")
+                  onClose()
                 }}>
                 <span className="flex-grow truncate">{chat.title}</span>
               </button>
@@ -97,8 +100,6 @@ export const Sidebar = ({}: Props) => {
                     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" />
@@ -111,7 +112,6 @@ export const Sidebar = ({}: Props) => {
                     )
                       return
                     deleteHistory(chat.id)
-                    setProcessingId(chat.id)
                   }}
                   className="text-red-500 dark:text-red-400 opacity-80">
                   <Trash2 className=" w-4 h-4 " />