fix: loader bar selected model right panel
This commit is contained in:
Faisal Amir
parent
ad33823446
commit
612445b4fa
@ -158,85 +158,87 @@ export default function DropdownListSidebar() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<>
|
||||||
className={twMerge(
|
<div
|
||||||
'relative w-full overflow-hidden rounded-md',
|
className={twMerge(
|
||||||
stateModel.loading && 'pointer-events-none bg-blue-200 text-blue-600'
|
'relative w-full overflow-hidden rounded-md',
|
||||||
)}
|
stateModel.loading && 'pointer-events-none bg-blue-200 text-blue-600'
|
||||||
>
|
)}
|
||||||
<Select value={selectedModel?.id} onValueChange={onValueSelected}>
|
>
|
||||||
<SelectTrigger className="relative w-full">
|
<Select value={selectedModel?.id} onValueChange={onValueSelected}>
|
||||||
<SelectValue placeholder="Choose model to start">
|
<SelectTrigger className="relative w-full">
|
||||||
{stateModel.loading && (
|
<SelectValue placeholder="Choose model to start">
|
||||||
<div
|
{stateModel.loading && (
|
||||||
className="z-5 absolute left-0 top-0 h-full w-full rounded-md bg-blue-100/80"
|
<div
|
||||||
style={{ width: `${loader}%` }}
|
className="z-5 absolute left-0 top-0 h-full w-full rounded-md bg-blue-100/80"
|
||||||
/>
|
style={{ width: `${loader}%` }}
|
||||||
)}
|
/>
|
||||||
<span
|
|
||||||
className={twMerge(
|
|
||||||
'relative z-20',
|
|
||||||
stateModel.loading && 'font-medium'
|
|
||||||
)}
|
)}
|
||||||
>
|
<span
|
||||||
{selectedName}
|
className={twMerge(
|
||||||
</span>
|
'relative z-20',
|
||||||
</SelectValue>
|
stateModel.loading && 'font-medium'
|
||||||
</SelectTrigger>
|
)}
|
||||||
<SelectPortal>
|
|
||||||
<SelectContent className="right-2 block w-full min-w-[450px] pr-0">
|
|
||||||
<div className="flex w-full items-center space-x-2 px-4 py-2">
|
|
||||||
<MonitorIcon size={20} className="text-muted-foreground" />
|
|
||||||
<span>Local</span>
|
|
||||||
</div>
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
{downloadedModels.length === 0 ? (
|
|
||||||
<div className="px-4 py-2">
|
|
||||||
<p>{`Oops, you don't have a model yet.`}</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<SelectGroup>
|
|
||||||
{downloadedModels.map((x, i) => (
|
|
||||||
<SelectItem
|
|
||||||
key={i}
|
|
||||||
value={x.id}
|
|
||||||
className={twMerge(
|
|
||||||
x.id === selectedModel?.id && 'bg-secondary'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div className="flex w-full justify-between">
|
|
||||||
<span className="line-clamp-1 block">{x.name}</span>
|
|
||||||
<div className="space-x-2">
|
|
||||||
<span className="font-bold text-muted-foreground">
|
|
||||||
{toGibibytes(x.metadata.size)}
|
|
||||||
</span>
|
|
||||||
{x.engine == InferenceEngine.nitro && (
|
|
||||||
<ModelLabel size={x.metadata.size} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectGroup>
|
|
||||||
)}
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
<div className="w-full px-4 py-2">
|
|
||||||
<Button
|
|
||||||
block
|
|
||||||
className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
|
|
||||||
onClick={() => setMainViewState(MainViewState.Hub)}
|
|
||||||
>
|
>
|
||||||
Explore The Hub
|
{selectedName}
|
||||||
</Button>
|
</span>
|
||||||
</div>
|
</SelectValue>
|
||||||
</SelectContent>
|
</SelectTrigger>
|
||||||
</SelectPortal>
|
<SelectPortal>
|
||||||
</Select>
|
<SelectContent className="right-2 block w-full min-w-[450px] pr-0">
|
||||||
|
<div className="flex w-full items-center space-x-2 px-4 py-2">
|
||||||
|
<MonitorIcon size={20} className="text-muted-foreground" />
|
||||||
|
<span>Local</span>
|
||||||
|
</div>
|
||||||
|
<div className="border-b border-border" />
|
||||||
|
{downloadedModels.length === 0 ? (
|
||||||
|
<div className="px-4 py-2">
|
||||||
|
<p>{`Oops, you don't have a model yet.`}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<SelectGroup>
|
||||||
|
{downloadedModels.map((x, i) => (
|
||||||
|
<SelectItem
|
||||||
|
key={i}
|
||||||
|
value={x.id}
|
||||||
|
className={twMerge(
|
||||||
|
x.id === selectedModel?.id && 'bg-secondary'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex w-full justify-between">
|
||||||
|
<span className="line-clamp-1 block">{x.name}</span>
|
||||||
|
<div className="space-x-2">
|
||||||
|
<span className="font-bold text-muted-foreground">
|
||||||
|
{toGibibytes(x.metadata.size)}
|
||||||
|
</span>
|
||||||
|
{x.engine == InferenceEngine.nitro && (
|
||||||
|
<ModelLabel size={x.metadata.size} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectGroup>
|
||||||
|
)}
|
||||||
|
<div className="border-b border-border" />
|
||||||
|
<div className="w-full px-4 py-2">
|
||||||
|
<Button
|
||||||
|
block
|
||||||
|
className="bg-blue-100 font-bold text-blue-600 hover:bg-blue-100 hover:text-blue-600"
|
||||||
|
onClick={() => setMainViewState(MainViewState.Hub)}
|
||||||
|
>
|
||||||
|
Explore The Hub
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</SelectContent>
|
||||||
|
</SelectPortal>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
<OpenAiKeyInput
|
<OpenAiKeyInput
|
||||||
selectedModel={selectedModel}
|
selectedModel={selectedModel}
|
||||||
serverEnabled={serverEnabled}
|
serverEnabled={serverEnabled}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -20,6 +20,7 @@ const OpenAiKeyInput: React.FC<Props> = ({ selectedModel, serverEnabled }) => {
|
|||||||
readOpenAISettings().then((settings) => {
|
readOpenAISettings().then((settings) => {
|
||||||
setOpenAISettings(settings)
|
setOpenAISettings(settings)
|
||||||
})
|
})
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
if (!selectedModel || selectedModel.engine !== InferenceEngine.openai) {
|
if (!selectedModel || selectedModel.engine !== InferenceEngine.openai) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user