424b00338e
* Make thread screen as default screen * Blank state when user have not any model * Cleanup topbar thread screen * Improve style right panel * Add instructions right panel * Styling thread list history * Resolve conflict * Default title new thread * Fix trigger panel sidebar * Make default right panel false when no activethread * Fix CI test * chore: assistant instruction with system prompt * Fix title and blank state explore the hub * Claenup style thread screen and add buble message for assitant * Remove unused import * Styling more menus on thread list and right panel, and make max height textarea 400 pixel * Finished revamp ui thread * Finished system monitor UI * Style box running models * Make animate right panel more smooth * Add status arround textarea for starting model info * Temporary disable hide left panel * chore: system resource monitoring update * copy nits * chore: typo * Reverse icon chevron accordion * Move my models into setting page --------- Co-authored-by: Louis <louis@jan.ai> Co-authored-by: 0xSage <n@pragmatic.vc>
86 lines
2.9 KiB
TypeScript
86 lines
2.9 KiB
TypeScript
import { Badge, Button } from '@janhq/uikit'
|
|
import { useAtomValue } from 'jotai'
|
|
|
|
import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
|
|
|
|
import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
|
|
import ProgressBar from '@/containers/ProgressBar'
|
|
|
|
import { appDownloadProgress } from '@/containers/Providers/Jotai'
|
|
|
|
import ShortCut from '@/containers/Shortcut'
|
|
|
|
import { MainViewState } from '@/constants/screens'
|
|
|
|
import { useActiveModel } from '@/hooks/useActiveModel'
|
|
|
|
import { useDownloadState } from '@/hooks/useDownloadState'
|
|
import { useGetAppVersion } from '@/hooks/useGetAppVersion'
|
|
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
|
|
import useGetSystemResources from '@/hooks/useGetSystemResources'
|
|
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
|
|
const BottomBar = () => {
|
|
const { activeModel, stateModel } = useActiveModel()
|
|
const { ram, cpu } = useGetSystemResources()
|
|
const progress = useAtomValue(appDownloadProgress)
|
|
const appVersion = useGetAppVersion()
|
|
const { downloadedModels } = useGetDownloadedModels()
|
|
const { setMainViewState } = useMainViewState()
|
|
const { downloadStates } = useDownloadState()
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
|
|
<div className="flex flex-shrink-0 items-center gap-x-2">
|
|
<div className="flex items-center space-x-2">
|
|
{progress && progress > 0 ? (
|
|
<ProgressBar total={100} used={progress} />
|
|
) : null}
|
|
</div>
|
|
|
|
{stateModel.state === 'start' && stateModel.loading && (
|
|
<SystemItem name="Starting:" value={stateModel.model || '-'} />
|
|
)}
|
|
{stateModel.state === 'stop' && stateModel.loading && (
|
|
<SystemItem name="Stopping:" value={stateModel.model || '-'} />
|
|
)}
|
|
{!stateModel.loading && downloadedModels.length !== 0 && (
|
|
<SystemItem
|
|
name="Active model:"
|
|
value={
|
|
activeModel?.id || (
|
|
<Badge themes="outline" className="pl-1">
|
|
<ShortCut menu="E" />
|
|
to show your model
|
|
</Badge>
|
|
)
|
|
}
|
|
/>
|
|
)}
|
|
{downloadedModels.length === 0 &&
|
|
!stateModel.loading &&
|
|
downloadStates.length === 0 && (
|
|
<Button
|
|
size="sm"
|
|
themes="outline"
|
|
onClick={() => setMainViewState(MainViewState.Hub)}
|
|
>
|
|
Download your first model
|
|
</Button>
|
|
)}
|
|
|
|
<DownloadingState />
|
|
</div>
|
|
<div className="flex gap-x-2">
|
|
<SystemItem name="CPU:" value={`${cpu}%`} />
|
|
<SystemItem name="Mem:" value={`${ram}%`} />
|
|
<span className="text-xs font-semibold ">
|
|
Jan v{appVersion?.version ?? ''}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default BottomBar
|