Update dependencies and fix styling issues

src/components/Option/Sidebar.tsx

@@ -0,0 +1,47 @@
+import { useQuery } from "@tanstack/react-query"
+import { PageAssitDatabase } from "~libs/db"
+import { Empty, Skeleton } from "antd"
+
+type Props = {}
+
+export const Sidebar = ({}: Props) => {
+  const { data: chatHistories, status } = useQuery({
+    queryKey: ["fetchChatHistory"],
+    queryFn: async () => {
+      const db = new PageAssitDatabase()
+      const history = await db.getChatHistories()
+      return history
+    }
+  })
+
+  return (
+    <div className="overflow-y-auto h-[calc(100%-60px)]">
+      {status === "success" && chatHistories.length === 0 && (
+        <div className="flex justify-center items-center mt-20 overflow-hidden">
+          <Empty description="No history yet" />
+        </div>
+      )}
+      {status === "pending" && (
+        <div className="flex justify-center items-center mt-5">
+          <Skeleton active paragraph={{ rows: 8 }} />
+        </div>
+      )}
+      {status === "error" && (
+        <div className="flex justify-center items-center">
+          <span className="text-red-500">Error loading history</span>
+        </div>
+      )}
+      {status === "success" && chatHistories.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {chatHistories.map((chat, index) => (
+            <div
+              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">
+              <span className="flex-grow truncate">{chat.title}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}