Skip to content

Commit a3d75e5

Browse files
sabaimransabaimran
committed
When in mobile view, don't use the hover card in the model selector
1 parent 4f79abb commit a3d75e5

File tree

1 file changed

+77
-49
lines changed

1 file changed

+77
-49
lines changed

‎src/interface/web/app/common/modelSelector.tsx

+77-49
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { PopoverProps } from "@radix-ui/react-popover"
77
import { Check, CaretUpDown } from "@phosphor-icons/react";
88

99
import { cn } from "@/lib/utils"
10-
import { useMutationObserver } from "@/app/common/utils";
10+
import { useIsMobileWidth, useMutationObserver } from "@/app/common/utils";
1111
import { Button } from "@/components/ui/button";
1212
import {
1313
Command,
@@ -39,6 +39,7 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
3939
const [selectedModel, setSelectedModel] = useState<ModelOptions | undefined>(undefined);
4040
const { data: userConfig, error, isLoading: isLoadingUserConfig } = useUserConfig(true);
4141
const [models, setModels] = useState<ModelOptions[]>([]);
42+
const isMobileWidth = useIsMobileWidth();
4243

4344
useEffect(() => {
4445
if (isLoadingUserConfig) return;
@@ -98,55 +99,82 @@ export function ModelSelector({ ...props }: ModelSelectorProps) {
9899
</Button>
99100
</PopoverTrigger>
100101
<PopoverContent align="end" className="w-[250px] p-0">
101-
<HoverCard>
102-
<HoverCardContent
103-
side="left"
104-
align="start"
105-
forceMount
106-
className="min-h-[280px]"
107-
>
108-
<div className="grid gap-2">
109-
<h4 className="font-medium leading-none">{peekedModel?.name}</h4>
110-
<div className="text-sm text-muted-foreground">
111-
{peekedModel?.description}
112-
</div>
113-
{peekedModel?.strengths ? (
114-
<div className="mt-4 grid gap-2">
115-
<h5 className="text-sm font-medium leading-none">
116-
Strengths
117-
</h5>
118-
<ul className="text-sm text-muted-foreground">
119-
{peekedModel.strengths}
120-
</ul>
121-
</div>
122-
) : null}
102+
{
103+
isMobileWidth ?
104+
<div>
105+
<Command loop>
106+
<CommandList className="h-[var(--cmdk-list-height)]">
107+
<CommandInput placeholder="Search Models..." />
108+
<CommandEmpty>No Models found.</CommandEmpty>
109+
<CommandGroup key={"models"} heading={"Models"}>
110+
{models && models.length > 0 && models
111+
.map((model) => (
112+
<ModelItem
113+
key={model.id}
114+
model={model}
115+
isSelected={selectedModel?.id === model.id}
116+
onPeek={(model) => setPeekedModel(model)}
117+
onSelect={() => {
118+
setSelectedModel(model)
119+
setOpen(false)
120+
}}
121+
/>
122+
))}
123+
</CommandGroup>
124+
</CommandList>
125+
</Command>
123126
</div>
124-
</HoverCardContent>
125-
<div>
126-
<HoverCardTrigger />
127-
<Command loop>
128-
<CommandList className="h-[var(--cmdk-list-height)]">
129-
<CommandInput placeholder="Search Models..." />
130-
<CommandEmpty>No Models found.</CommandEmpty>
131-
<CommandGroup key={"models"} heading={"Models"}>
132-
{models && models.length > 0 && models
133-
.map((model) => (
134-
<ModelItem
135-
key={model.id}
136-
model={model}
137-
isSelected={selectedModel?.id === model.id}
138-
onPeek={(model) => setPeekedModel(model)}
139-
onSelect={() => {
140-
setSelectedModel(model)
141-
setOpen(false)
142-
}}
143-
/>
144-
))}
145-
</CommandGroup>
146-
</CommandList>
147-
</Command>
148-
</div>
149-
</HoverCard>
127+
:
128+
<HoverCard>
129+
<HoverCardContent
130+
side="left"
131+
align="start"
132+
forceMount
133+
className="min-h-[280px]"
134+
>
135+
<div className="grid gap-2">
136+
<h4 className="font-medium leading-none">{peekedModel?.name}</h4>
137+
<div className="text-sm text-muted-foreground">
138+
{peekedModel?.description}
139+
</div>
140+
{peekedModel?.strengths ? (
141+
<div className="mt-4 grid gap-2">
142+
<h5 className="text-sm font-medium leading-none">
143+
Strengths
144+
</h5>
145+
<p className="text-sm text-muted-foreground">
146+
{peekedModel.strengths}
147+
</p>
148+
</div>
149+
) : null}
150+
</div>
151+
</HoverCardContent>
152+
<div>
153+
<HoverCardTrigger />
154+
<Command loop>
155+
<CommandList className="h-[var(--cmdk-list-height)]">
156+
<CommandInput placeholder="Search Models..." />
157+
<CommandEmpty>No Models found.</CommandEmpty>
158+
<CommandGroup key={"models"} heading={"Models"}>
159+
{models && models.length > 0 && models
160+
.map((model) => (
161+
<ModelItem
162+
key={model.id}
163+
model={model}
164+
isSelected={selectedModel?.id === model.id}
165+
onPeek={(model) => setPeekedModel(model)}
166+
onSelect={() => {
167+
setSelectedModel(model)
168+
setOpen(false)
169+
}}
170+
/>
171+
))}
172+
</CommandGroup>
173+
</CommandList>
174+
</Command>
175+
</div>
176+
</HoverCard>
177+
}
150178
</PopoverContent>
151179
</Popover>
152180
</div>

0 commit comments

Comments
 (0)