iod/page-assist
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update PlaygroundForm and Sidebar components

Browse Source
This commit is contained in:
n4ze3m
2024-02-07 00:48:59 +05:30
parent 58966355c3
commit c1efb2d5cb
4 changed files with 65 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Option/Sidebar.tsx
View File

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