106 lines
3.2 KiB
TypeScript
106 lines
3.2 KiB
TypeScript
import { Fragment, useState, useEffect } from 'react'
|
|
|
|
import { InferenceEngine } from '@janhq/core'
|
|
import {
|
|
CommandModal,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
Badge,
|
|
} from '@janhq/uikit'
|
|
|
|
import { DatabaseIcon, CpuIcon } from 'lucide-react'
|
|
|
|
import { MainViewState } from '@/constants/screens'
|
|
|
|
import { useActiveModel } from '@/hooks/useActiveModel'
|
|
import { useGetDownloadedModels } from '@/hooks/useGetDownloadedModels'
|
|
import { useMainViewState } from '@/hooks/useMainViewState'
|
|
|
|
export default function CommandListDownloadedModel() {
|
|
const { setMainViewState } = useMainViewState()
|
|
const { downloadedModels } = useGetDownloadedModels()
|
|
const { activeModel, startModel, stopModel } = useActiveModel()
|
|
|
|
const onModelActionClick = (modelId: string) => {
|
|
if (activeModel && activeModel.id === modelId) {
|
|
stopModel(modelId)
|
|
} else {
|
|
startModel(modelId)
|
|
}
|
|
}
|
|
|
|
const [open, setOpen] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const down = (e: KeyboardEvent) => {
|
|
if (e.key === 'e' && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault()
|
|
setOpen((open) => !open)
|
|
}
|
|
}
|
|
document.addEventListener('keydown', down)
|
|
return () => document.removeEventListener('keydown', down)
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [])
|
|
|
|
const isNotDownloadedModel = downloadedModels.length === 0
|
|
|
|
if (isNotDownloadedModel) return null
|
|
|
|
return (
|
|
<Fragment>
|
|
<CommandModal open={open} onOpenChange={setOpen}>
|
|
<CommandInput placeholder="Search your model..." />
|
|
<CommandList>
|
|
<CommandEmpty>No Model found.</CommandEmpty>
|
|
{!isNotDownloadedModel && (
|
|
<CommandGroup heading="Your Model">
|
|
{downloadedModels
|
|
.filter((model) => {
|
|
return model.engine === InferenceEngine.nitro
|
|
})
|
|
.map((model, i) => {
|
|
return (
|
|
<CommandItem
|
|
key={i}
|
|
value={model.id}
|
|
onSelect={() => {
|
|
onModelActionClick(model.id)
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
<DatabaseIcon
|
|
size={16}
|
|
className="mr-3 text-muted-foreground"
|
|
/>
|
|
<div className="flex w-full items-center justify-between">
|
|
<span>{model.id}</span>
|
|
{activeModel && activeModel.id === model.id && (
|
|
<Badge themes="secondary">Active</Badge>
|
|
)}
|
|
</div>
|
|
</CommandItem>
|
|
)
|
|
})}
|
|
</CommandGroup>
|
|
)}
|
|
<CommandGroup heading="Find another model">
|
|
<CommandItem
|
|
onSelect={() => {
|
|
setMainViewState(MainViewState.Hub)
|
|
setOpen(false)
|
|
}}
|
|
>
|
|
<CpuIcon size={16} className="mr-3 text-muted-foreground" />
|
|
<span>Explore The Hub</span>
|
|
</CommandItem>
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</CommandModal>
|
|
</Fragment>
|
|
)
|
|
}
|