fix: hub ui no result search found (#4739)

This commit is contained in:
Faisal Amir 2025-02-26 19:06:46 +07:00 committed by GitHub
parent d7329c7719
commit 36a14600ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 54 additions and 32 deletions

View File

@ -5,18 +5,29 @@ import ModelItem from '@/screens/Hub/ModelList/ModelItem'
type Props = { type Props = {
models: ModelSource[] models: ModelSource[]
onSelectedModel: (model: ModelSource) => void onSelectedModel: (model: ModelSource) => void
filterOption?: string
} }
const ModelList = ({ models, onSelectedModel }: Props) => { const ModelList = ({ models, onSelectedModel, filterOption }: Props) => {
return ( return (
<div className="w-full"> <div className="w-full">
{models.map((model) => ( {models.length === 0 && filterOption === 'on-device' ? (
<ModelItem <div className="my-4 p-2 text-center">
key={model.id} <span className="text-[hsla(var(--text-tertiary))]">
model={model} No results found
onSelectedModel={() => onSelectedModel(model)} </span>
/> </div>
))} ) : (
<>
{models.map((model) => (
<ModelItem
key={model.id}
model={model}
onSelectedModel={() => onSelectedModel(model)}
/>
))}
</>
)}
</div> </div>
) )
} }

View File

@ -404,34 +404,44 @@ const HubScreen = () => {
<div <div
className={twMerge( className={twMerge(
'invisible absolute mt-2 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg', 'invisible absolute mt-2 w-full overflow-hidden rounded-lg border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow-lg',
searchedModels.length > 0 && 'visible' searchValue.length > 0 && 'visible'
)} )}
> >
{searchedModels.map((model) => ( {searchedModels.length === 0 ? (
<div <div className="p-2 text-center">
key={model.id} <span className="text-[hsla(var(--text-tertiary))]">
className="z-10 flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]" No results found
onClick={(e) => {
setSelectedModel(model)
e.stopPropagation()
}}
>
<span className="text-bold flex flex-row text-[hsla(var(--app-text-primary))]">
{searchValue.includes('huggingface.co') && (
<>
<Image
src={'icons/huggingFace.svg'}
width={16}
height={16}
className="mr-2"
alt=""
/>{' '}
</>
)}
{extractModelRepo(model.id)}
</span> </span>
</div> </div>
))} ) : (
<>
{searchedModels.map((model) => (
<div
key={model.id}
className="z-10 flex cursor-pointer items-center space-x-2 px-4 py-2 hover:bg-[hsla(var(--dropdown-menu-hover-bg))]"
onClick={(e) => {
setSelectedModel(model)
e.stopPropagation()
}}
>
<span className="text-bold flex flex-row text-[hsla(var(--app-text-primary))]">
{searchValue.includes('huggingface.co') && (
<>
<Image
src={'icons/huggingFace.svg'}
width={16}
height={16}
className="mr-2"
alt=""
/>{' '}
</>
)}
{extractModelRepo(model.id)}
</span>
</div>
))}
</>
)}
</div> </div>
</div> </div>
</div> </div>
@ -523,6 +533,7 @@ const HubScreen = () => {
<ModelList <ModelList
models={sortedModels} models={sortedModels}
onSelectedModel={(model) => setSelectedModel(model)} onSelectedModel={(model) => setSelectedModel(model)}
filterOption={filterOption}
/> />
)} )}
{(filterOption === 'cloud' || filterOption === 'all') && ( {(filterOption === 'cloud' || filterOption === 'all') && (