klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-08 05:39:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

When in mobile view, don't use the hover card in the model selector

Browse Source
This commit is contained in:
sabaimran
2025-02-02 12:22:45 -08:00
parent 4f79abb429
commit a3d75e5241
1 changed files with 77 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/interface/web/app/common/modelSelector.tsx
View File

@@ -7,7 +7,7 @@ import { PopoverProps } from "@radix-ui/react-popover"
import { Check, CaretUpDown } from "@phosphor-icons/react"; import { Check, CaretUpDown } from "@phosphor-icons/react";
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { useMutationObserver } from "@/app/common/utils"; import { useIsMobileWidth, useMutationObserver } from "@/app/common/utils";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Command, Command,
@@ -39,6 +39,7 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined); const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined);
const { data: userConfig, error, isLoading: isLoadingUserConfig } = useUserConfig(true); const { data: userConfig, error, isLoading: isLoadingUserConfig } = useUserConfig(true);
const [models, setModels] = useState<ModelOptions[]>([]); const [models, setModels] = useState<ModelOptions[]>([]);
const isMobileWidth = useIsMobileWidth();
useEffect(() => { useEffect(() => {
if (isLoadingUserConfig) return; if (isLoadingUserConfig) return;
@@ -98,55 +99,82 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
</Button> </Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent align="end" className="w-[250px] p-0"> <PopoverContent align="end" className="w-[250px] p-0">
<HoverCard> {
<HoverCardContent isMobileWidth ?
side="left" <div>
align="start" <Command loop>
forceMount <CommandList className="h-[var(--cmdk-list-height)]">
className="min-h-[280px]" <CommandInput placeholder="Search Models..." />
> <CommandEmpty>No Models found.</CommandEmpty>
<div className="grid gap-2"> <CommandGroup key={"models"} heading={"Models"}>
<h4 className="font-medium leading-none">{peekedModel?.name}</h4> {models && models.length > 0 && models
<div className="text-sm text-muted-foreground"> .map((model) => (
{peekedModel?.description} <ModelItem
</div> key={model.id}
{peekedModel?.strengths ? ( model={model}
<div className="mt-4 grid gap-2"> isSelected={selectedModel?.id === model.id}
<h5 className="text-sm font-medium leading-none"> onPeek={(model) => setPeekedModel(model)}
Strengths onSelect={() => {
</h5> setSelectedModel(model)
<ul className="text-sm text-muted-foreground"> setOpen(false)
{peekedModel.strengths} }}
</ul> />
</div> ))}
) : null} </CommandGroup>
</CommandList>
</Command>
</div> </div>
</HoverCardContent> :
<div> <HoverCard>
<HoverCardTrigger /> <HoverCardContent
<Command loop> side="left"
<CommandList className="h-[var(--cmdk-list-height)]"> align="start"
<CommandInput placeholder="Search Models..." /> forceMount
<CommandEmpty>No Models found.</CommandEmpty> className="min-h-[280px]"
<CommandGroup key={"models"} heading={"Models"}> >
{models && models.length > 0 && models <div className="grid gap-2">
.map((model) => ( <h4 className="font-medium leading-none">{peekedModel?.name}</h4>
<ModelItem <div className="text-sm text-muted-foreground">
key={model.id} {peekedModel?.description}
model={model} </div>
isSelected={selectedModel?.id === model.id} {peekedModel?.strengths ? (
onPeek={(model) => setPeekedModel(model)} <div className="mt-4 grid gap-2">
onSelect={() => { <h5 className="text-sm font-medium leading-none">
setSelectedModel(model) Strengths
setOpen(false) </h5>
}} <p className="text-sm text-muted-foreground">
/> {peekedModel.strengths}
))} </p>
</CommandGroup> </div>
</CommandList> ) : null}
</Command> </div>
</div> </HoverCardContent>
</HoverCard> <div>
<HoverCardTrigger />
<Command loop>
<CommandList className="h-[var(--cmdk-list-height)]">
<CommandInput placeholder="Search Models..." />
<CommandEmpty>No Models found.</CommandEmpty>
<CommandGroup key={"models"} heading={"Models"}>
{models && models.length > 0 && models
.map((model) => (
<ModelItem
key={model.id}
model={model}
isSelected={selectedModel?.id === model.id}
onPeek={(model) => setPeekedModel(model)}
onSelect={() => {
setSelectedModel(model)
setOpen(false)
}}
/>
))}
</CommandGroup>
</CommandList>
</Command>
</div>
</HoverCard>
}
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>