117 lines
3.3 KiB
TypeScript
117 lines
3.3 KiB
TypeScript
import {
|
|
MainViewState,
|
|
getMainViewStateAtom,
|
|
setMainViewStateAtom,
|
|
} from '@helpers/atoms/MainView.atom'
|
|
|
|
import CompactLogo from '../../../containers/Logo/CompactLogo'
|
|
import {
|
|
ChatBubbleOvalLeftEllipsisIcon,
|
|
Cog8ToothIcon,
|
|
CpuChipIcon,
|
|
CubeTransparentIcon,
|
|
Squares2X2Icon,
|
|
} from '@heroicons/react/24/outline'
|
|
import { useAtomValue, useSetAtom } from 'jotai'
|
|
import { showingBotListModalAtom } from '@helpers/atoms/Modal.atom'
|
|
import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
|
|
import useGetBots from '@hooks/useGetBots'
|
|
|
|
import { Icons, Toggle } from '@uikit'
|
|
|
|
const menu = [
|
|
// {
|
|
// name: 'Explore Models',
|
|
// icon: <CpuChipIcon />,
|
|
// state: MainViewState.ExploreModel,
|
|
// },
|
|
{
|
|
name: 'My Models',
|
|
icon: <Icons name="layout-grid" />,
|
|
state: MainViewState.MyModel,
|
|
},
|
|
{
|
|
name: 'Settings',
|
|
icon: <Icons name="settings" />,
|
|
state: MainViewState.Setting,
|
|
},
|
|
]
|
|
|
|
const LeftRibbonNav: React.FC = () => {
|
|
const currentState = useAtomValue(getMainViewStateAtom)
|
|
const setMainViewState = useSetAtom(setMainViewStateAtom)
|
|
const setBotListModal = useSetAtom(showingBotListModalAtom)
|
|
const { downloadedModels } = useGetDownloadedModels()
|
|
const { getAllBots } = useGetBots()
|
|
|
|
const onMenuClick = (mainViewState: MainViewState) => {
|
|
if (currentState === mainViewState) return
|
|
setMainViewState(mainViewState)
|
|
}
|
|
|
|
const isConversationView = currentState === MainViewState.Conversation
|
|
const bgColor = isConversationView ? 'bg-gray-500' : ''
|
|
|
|
const onConversationClick = () => {
|
|
// if (currentState === MainViewState.Conversation) return
|
|
setMainViewState(MainViewState.Conversation)
|
|
}
|
|
|
|
const onBotListClick = async () => {
|
|
const bots = await getAllBots()
|
|
if (bots?.length === 0) {
|
|
alert('You have no bot')
|
|
return
|
|
}
|
|
|
|
if (downloadedModels.length === 0) {
|
|
alert('You have no model downloaded')
|
|
return
|
|
}
|
|
|
|
setBotListModal(true)
|
|
}
|
|
|
|
return (
|
|
<nav className="flex h-screen flex-shrink-0 flex-col items-center pt-10">
|
|
<CompactLogo />
|
|
<div className="flex w-full flex-1 flex-col items-center justify-between">
|
|
<div className="flex flex-col pt-4">
|
|
<button onClick={onConversationClick}>
|
|
<ChatBubbleOvalLeftEllipsisIcon
|
|
width={24}
|
|
height={24}
|
|
color="text-white"
|
|
/>
|
|
</button>
|
|
<button onClick={onBotListClick}>
|
|
<CubeTransparentIcon />
|
|
</button>
|
|
</div>
|
|
<ul className="flex flex-col gap-3 py-8">
|
|
{menu.map((item) => {
|
|
const bgColor = currentState === item.state ? 'bg-gray-500' : ''
|
|
return (
|
|
<li
|
|
role="button"
|
|
key={item.name}
|
|
className="item-center flex gap-x-2"
|
|
onClick={() => onMenuClick(item.state)}
|
|
>
|
|
{item.icon}
|
|
<span className="text-xs">{item.name}</span>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
{/* User avatar */}
|
|
{/* <div className="pb-5 flex items-center justify-center">
|
|
<Image src={"/icons/avatar.svg"} width={40} height={40} alt="" />
|
|
</div> */}
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default LeftRibbonNav
|