2023-10-20 11:29:10 +07:00

74 lines
2.2 KiB
TypeScript

import Image from 'next/image'
import useCreateConversation from '@/_hooks/useCreateConversation'
import PrimaryButton from '../PrimaryButton'
import { useAtomValue, useSetAtom } from 'jotai'
import { useEffect, useState } from 'react'
import {
MainViewState,
setMainViewStateAtom,
} from '@/_helpers/atoms/MainView.atom'
import { activeAssistantModelAtom } from '@/_helpers/atoms/Model.atom'
import useInitModel from '@/_hooks/useInitModel'
import { useGetDownloadedModels } from '@/_hooks/useGetDownloadedModels'
import { AssistantModel } from '@/_models/AssistantModel'
enum ActionButton {
DownloadModel = 'Download a Model',
StartChat = 'Start a Conversation',
}
const SidebarEmptyHistory: React.FC = () => {
const { downloadedModels } = useGetDownloadedModels()
const activeModel = useAtomValue(activeAssistantModelAtom)
const setMainView = useSetAtom(setMainViewStateAtom)
const { requestCreateConvo } = useCreateConversation()
const [action, setAction] = useState(ActionButton.DownloadModel)
const { initModel } = useInitModel()
useEffect(() => {
if (downloadedModels.length > 0) {
setAction(ActionButton.StartChat)
} else {
setAction(ActionButton.DownloadModel)
}
}, [downloadedModels])
const onClick = () => {
if (action === ActionButton.DownloadModel) {
setMainView(MainViewState.ExploreModel)
} else {
if (!activeModel) {
setMainView(MainViewState.ConversationEmptyModel)
} else {
createConversationAndInitModel(activeModel)
}
}
}
const createConversationAndInitModel = async (model: AssistantModel) => {
await requestCreateConvo(model)
await initModel(model)
}
return (
<div className="flex flex-col items-center gap-3 py-10">
<Image
src={'icons/chat-bubble-oval-left.svg'}
width={32}
height={32}
alt=""
/>
<div className="flex flex-col items-center gap-6">
<div className="text-center text-sm text-gray-900">No Chat History</div>
<div className="text-center text-sm text-gray-500">
Get started by creating a new chat.
</div>
<PrimaryButton title={action} onClick={onClick} />
</div>
</div>
)
}
export default SidebarEmptyHistory