539b467141
* feat: adding create bot functionality Signed-off-by: James <james@jan.ai> * update the temperature progress bar Signed-off-by: James <james@jan.ai> * WIP baselayout * Mapping plugins with available preferences * Added loader component * WIP working another screen * Cleanup types and avoid import one by one * Prepare bottom bar * Add css variables colors to enable user select the accent * Enable change accent color * Seperate css variable * Fix conflict * Add blank state of my model empty * Restyle explore models page * Enable user config left sidebar * Restyle my models page * WIP styling chat page * Restyling chat message * Fix conflict * Adde form preferences setting plugins * Fixed form bot info * Sidebar bot chat * Showing rightbar for both setting when user created bot * Fix style bot info * Using overflow auto intead of scroll * Remove script built UI from root package * Fix missig import * Resolve error linter * fix e2e tests Signed-off-by: James <james@jan.ai> --------- Signed-off-by: James <james@jan.ai> Co-authored-by: James <james@jan.ai>
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
import React, { Fragment } from 'react'
|
||
import { useSetAtom } from 'jotai'
|
||
import { Button } from '@uikit'
|
||
import { modelDownloadStateAtom } from '@helpers/atoms/DownloadState.atom'
|
||
import DownloadedModelTable from '@/_components/DownloadedModelTable'
|
||
import ActiveModelTable from '@/_components/ActiveModelTable'
|
||
import DownloadingModelTable from '@/_components/DownloadingModelTable'
|
||
import { useAtomValue } from 'jotai'
|
||
import { useGetDownloadedModels } from '@hooks/useGetDownloadedModels'
|
||
import { formatDownloadPercentage } from '@utils/converter'
|
||
import { LayoutGrid } from 'lucide-react'
|
||
import {
|
||
setMainViewStateAtom,
|
||
MainViewState,
|
||
} from '@helpers/atoms/MainView.atom'
|
||
|
||
const MyModelsScreen = () => {
|
||
const { downloadedModels } = useGetDownloadedModels()
|
||
const setMainViewState = useSetAtom(setMainViewStateAtom)
|
||
const modelDownloadStates = useAtomValue(modelDownloadStateAtom)
|
||
|
||
const downloadStates: DownloadState[] = []
|
||
for (const [, value] of Object.entries(modelDownloadStates)) {
|
||
downloadStates.push(value)
|
||
}
|
||
|
||
const isDownloadingFirstModel = downloadStates.length > 0
|
||
|
||
if (!downloadedModels || downloadedModels.length === 0)
|
||
return (
|
||
<div className="flex h-full items-center justify-center px-4">
|
||
<div className="text-center">
|
||
<LayoutGrid size={32} className="text-accent/50 mx-auto" />
|
||
<div className="mt-4">
|
||
{isDownloadingFirstModel ? (
|
||
<div className="relative">
|
||
<div className="mt-4">
|
||
<h1 className="text-2xl font-bold leading-snug">
|
||
Donwloading your first model
|
||
</h1>
|
||
<p className="text-muted-foreground mt-1">
|
||
{downloadStates[0].fileName} -{' '}
|
||
{formatDownloadPercentage(downloadStates[0].percent)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<Fragment>
|
||
<h1 className="text-2xl font-bold leading-snug">{`Ups, You don't have a model.`}</h1>
|
||
<p className="text-muted-foreground mt-1 text-base">{`let’s download your first model`}</p>
|
||
<Button
|
||
className="mt-4"
|
||
themes="accent"
|
||
onClick={() => setMainViewState(MainViewState.ExploreModel)}
|
||
>
|
||
Explore Models
|
||
</Button>
|
||
</Fragment>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
|
||
return (
|
||
<div className="flex h-full w-full overflow-y-auto">
|
||
<div className="w-full p-5">
|
||
<h1 className="text-lg font-semibold">My Models</h1>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-400">
|
||
You have <span>{downloadedModels.length}</span> models downloaded
|
||
</p>
|
||
<div>
|
||
{/* <ActiveModelTable /> */}
|
||
{/* <DownloadingModelTable /> */}
|
||
<DownloadedModelTable />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MyModelsScreen
|