klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 05:39:12 +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

34
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,6 +99,32 @@ 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">
{
isMobileWidth ?
<div>
<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> <HoverCard>
<HoverCardContent <HoverCardContent
side="left" side="left"
@@ -115,9 +142,9 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
<h5 className="text-sm font-medium leading-none"> <h5 className="text-sm font-medium leading-none">
Strengths Strengths
</h5> </h5>
<ul className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{peekedModel.strengths} {peekedModel.strengths}
</ul> </p>
</div> </div>
) : null} ) : null}
</div> </div>
@@ -147,6 +174,7 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
</Command> </Command>
</div> </div>
</HoverCard> </HoverCard>
}
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>