48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
|
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>
|
||
|
|
)
|
||
|
|
}
|