feat: mprove model selector with search and keyboard navigation
Add Ctrl+M keyboard shortcut to open model selector Use desktop dropdowns in VSCode runtime instead of mobile panels
This commit is contained in:
Bohdan Triapitsyn
Generated
+1
-1
@@ -2847,7 +2847,7 @@ dependencies = [
|
||||
|
||||
[[package]]
|
||||
name = "openchamber-desktop"
|
||||
version = "1.3.9"
|
||||
version = "1.4.0"
|
||||
dependencies = [
|
||||
"anyhow",
|
||||
"axum",
|
||||
|
||||
@@ -1064,11 +1064,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
|
||||
<ServerFilePicker
|
||||
onFilesSelected={handleServerFilesSelected}
|
||||
multiSelect
|
||||
presentation={isMobile || isVSCode ? 'modal' : 'dropdown'}
|
||||
presentation={isMobile ? 'modal' : 'dropdown'}
|
||||
open={projectFilePickerOpen}
|
||||
onOpenChange={setProjectFilePickerOpen}
|
||||
>
|
||||
{isMobile || isVSCode ? null : (
|
||||
{isMobile ? null : (
|
||||
<button
|
||||
type="button"
|
||||
tabIndex={-1}
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
RiArrowDownSLine,
|
||||
RiArrowRightSLine,
|
||||
RiBrainAi3Line,
|
||||
RiCheckLine,
|
||||
RiCheckboxCircleLine,
|
||||
RiCloseCircleLine,
|
||||
RiFileImageLine,
|
||||
@@ -26,10 +27,8 @@ import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -237,13 +236,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
} = useSessionStore();
|
||||
|
||||
const contextHydrated = useContextStore((state) => state.hasHydrated);
|
||||
const { toggleFavoriteModel, isFavoriteModel, addRecentModel } = useUIStore();
|
||||
const { toggleFavoriteModel, isFavoriteModel, addRecentModel, isModelSelectorOpen, setModelSelectorOpen } = useUIStore();
|
||||
const { favoriteModelsList, recentModelsList } = useModelLists();
|
||||
|
||||
const { isMobile } = useDeviceInfo();
|
||||
const isDesktopRuntime = useIsDesktopRuntime();
|
||||
const isVSCodeRuntime = useIsVSCodeRuntime();
|
||||
const isCompact = isMobile || isVSCodeRuntime;
|
||||
// Only use mobile panels on actual mobile devices, VSCode uses desktop dropdowns
|
||||
const isCompact = isMobile;
|
||||
const [activeMobilePanel, setActiveMobilePanel] = React.useState<'model' | 'agent' | null>(null);
|
||||
const [mobileTooltipOpen, setMobileTooltipOpen] = React.useState<'model' | 'agent' | null>(null);
|
||||
const [mobileModelQuery, setMobileModelQuery] = React.useState('');
|
||||
@@ -258,9 +258,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
return initial;
|
||||
});
|
||||
const [mobileEditOptionsOpen, setMobileEditOptionsOpen] = React.useState(false);
|
||||
const [agentMenuOpen, setAgentMenuOpen] = React.useState(false);
|
||||
// Use global state for model selector (allows Ctrl+M shortcut)
|
||||
const agentMenuOpen = isModelSelectorOpen;
|
||||
const setAgentMenuOpen = setModelSelectorOpen;
|
||||
const [desktopEditOptionsOpen, setDesktopEditOptionsOpen] = React.useState(false);
|
||||
const desktopEditOptionsId = React.useId();
|
||||
const [desktopModelQuery, setDesktopModelQuery] = React.useState('');
|
||||
const [modelSelectedIndex, setModelSelectedIndex] = React.useState(0);
|
||||
const modelItemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (activeMobilePanel === 'model') {
|
||||
@@ -283,11 +288,30 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
}
|
||||
}, [activeMobilePanel]);
|
||||
|
||||
const prevAgentMenuOpenRef = React.useRef(agentMenuOpen);
|
||||
React.useEffect(() => {
|
||||
const wasOpen = prevAgentMenuOpenRef.current;
|
||||
prevAgentMenuOpenRef.current = agentMenuOpen;
|
||||
|
||||
if (!agentMenuOpen) {
|
||||
setDesktopEditOptionsOpen(false);
|
||||
setDesktopModelQuery('');
|
||||
setModelSelectedIndex(0);
|
||||
|
||||
// Restore focus to chat input when model selector closes
|
||||
if (wasOpen && !isCompact) {
|
||||
requestAnimationFrame(() => {
|
||||
const textarea = document.querySelector<HTMLTextAreaElement>('textarea[data-chat-input="true"]');
|
||||
textarea?.focus();
|
||||
});
|
||||
}
|
||||
}
|
||||
}, [agentMenuOpen]);
|
||||
}, [agentMenuOpen, isCompact]);
|
||||
|
||||
// Reset selected index when search query changes
|
||||
React.useEffect(() => {
|
||||
setModelSelectedIndex(0);
|
||||
}, [desktopModelQuery]);
|
||||
|
||||
const currentAgent = getCurrentAgent?.();
|
||||
const agentPermissionRaw = currentAgent?.permission?.edit;
|
||||
@@ -785,6 +809,11 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
if (isCompact) {
|
||||
closeMobilePanel();
|
||||
}
|
||||
// Restore focus to chat input after model selection
|
||||
requestAnimationFrame(() => {
|
||||
const textarea = document.querySelector<HTMLTextAreaElement>('textarea[data-chat-input="true"]');
|
||||
textarea?.focus();
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[ModelControls] Handle model change error:', error);
|
||||
}
|
||||
@@ -1171,7 +1200,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
{favoriteModelsList.map(({ model, providerID, modelID }) => {
|
||||
const isSelected = providerID === currentProviderId && modelID === currentModelId;
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`fav-mobile-${providerID}-${modelID}`}
|
||||
@@ -1217,7 +1246,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
{recentModelsList.map(({ model, providerID, modelID }) => {
|
||||
const isSelected = providerID === currentProviderId && modelID === currentModelId;
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`recent-mobile-${providerID}-${modelID}`}
|
||||
@@ -1600,8 +1629,194 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
</TooltipContent>
|
||||
);
|
||||
|
||||
const renderModelSelector = () => (
|
||||
<Tooltip delayDuration={1000}>
|
||||
// Helper to render a single model row in the flat dropdown
|
||||
const renderModelRow = (
|
||||
model: ProviderModel,
|
||||
providerID: string,
|
||||
modelID: string,
|
||||
keyPrefix: string,
|
||||
flatIndex: number,
|
||||
isHighlighted: boolean
|
||||
) => {
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
|
||||
...icon,
|
||||
id: `cap-${icon.key}`,
|
||||
}));
|
||||
const modalityIcons = [
|
||||
...getModalityIcons(metadata, 'input'),
|
||||
...getModalityIcons(metadata, 'output'),
|
||||
];
|
||||
const uniqueModalityIcons = Array.from(
|
||||
new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
|
||||
).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
|
||||
const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
const isSelected = currentProviderId === providerID && currentModelId === modelID;
|
||||
const isFavorite = isFavoriteModel(providerID, modelID);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${keyPrefix}-${providerID}-${modelID}`}
|
||||
ref={(el) => { modelItemRefs.current[flatIndex] = el; }}
|
||||
className={cn(
|
||||
"typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
|
||||
isHighlighted ? "bg-accent" : "hover:bg-accent/50"
|
||||
)}
|
||||
onClick={() => handleProviderAndModelChange(providerID, modelID)}
|
||||
onMouseEnter={() => setModelSelectedIndex(flatIndex)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{getModelDisplayName(model)}
|
||||
</span>
|
||||
{metadata?.limit?.context ? (
|
||||
<span className="typography-micro text-muted-foreground flex-shrink-0">
|
||||
{contextTokens}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{indicatorIcons.length > 0 && (
|
||||
<div className={cn("items-center gap-0.5", isHighlighted ? "flex" : "hidden group-hover:flex")}>
|
||||
{indicatorIcons.map(({ id, icon: Icon, label }) => (
|
||||
<span
|
||||
key={id}
|
||||
className="flex h-3.5 w-3.5 items-center justify-center text-muted-foreground"
|
||||
aria-label={label}
|
||||
role="img"
|
||||
title={label}
|
||||
>
|
||||
<Icon className="h-2.5 w-2.5" />
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{isSelected && (
|
||||
<RiCheckLine className="h-4 w-4 text-primary" />
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className={cn(
|
||||
"model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
|
||||
isFavorite ? "text-yellow-500" : "text-muted-foreground"
|
||||
)}
|
||||
aria-label={isFavorite ? "Unfavorite" : "Favorite"}
|
||||
title={isFavorite ? "Remove from favorites" : "Add to favorites"}
|
||||
>
|
||||
{isFavorite ? (
|
||||
<RiStarFill className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<RiStarLine className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Filter models based on search query
|
||||
const filterByQuery = (modelName: string, providerName: string, query: string) => {
|
||||
if (!query.trim()) return true;
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return (
|
||||
modelName.toLowerCase().includes(lowerQuery) ||
|
||||
providerName.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
};
|
||||
|
||||
const renderModelSelector = () => {
|
||||
// Filter favorites
|
||||
const filteredFavorites = favoriteModelsList.filter(({ model, providerID }) => {
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName, desktopModelQuery);
|
||||
});
|
||||
|
||||
// Filter recents
|
||||
const filteredRecents = recentModelsList.filter(({ model, providerID }) => {
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName, desktopModelQuery);
|
||||
});
|
||||
|
||||
// Filter providers and their models
|
||||
const filteredProviders = providers
|
||||
.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
const filteredModels = providerModels.filter((model: ProviderModel) => {
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, provider.name || provider.id || '', desktopModelQuery);
|
||||
});
|
||||
return { ...provider, models: filteredModels };
|
||||
})
|
||||
.filter((provider) => provider.models.length > 0);
|
||||
|
||||
const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
|
||||
|
||||
// Build flat list for keyboard navigation
|
||||
type FlatModelItem = { model: ProviderModel; providerID: string; modelID: string; section: string };
|
||||
const flatModelList: FlatModelItem[] = [];
|
||||
|
||||
filteredFavorites.forEach(({ model, providerID, modelID }) => {
|
||||
flatModelList.push({ model, providerID, modelID, section: 'fav' });
|
||||
});
|
||||
filteredRecents.forEach(({ model, providerID, modelID }) => {
|
||||
flatModelList.push({ model, providerID, modelID, section: 'recent' });
|
||||
});
|
||||
filteredProviders.forEach((provider) => {
|
||||
(provider.models as ProviderModel[]).forEach((model) => {
|
||||
flatModelList.push({ model, providerID: provider.id as string, modelID: model.id as string, section: 'provider' });
|
||||
});
|
||||
});
|
||||
|
||||
const totalItems = flatModelList.length;
|
||||
|
||||
// Handle keyboard navigation
|
||||
const handleModelKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setModelSelectedIndex((prev) => (prev + 1) % Math.max(1, totalItems));
|
||||
// Scroll into view
|
||||
setTimeout(() => {
|
||||
const nextIndex = (modelSelectedIndex + 1) % Math.max(1, totalItems);
|
||||
modelItemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, 0);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setModelSelectedIndex((prev) => (prev - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems));
|
||||
// Scroll into view
|
||||
setTimeout(() => {
|
||||
const prevIndex = (modelSelectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
|
||||
modelItemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, 0);
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const selectedItem = flatModelList[modelSelectedIndex];
|
||||
if (selectedItem) {
|
||||
handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setAgentMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Build index mapping for rendering
|
||||
let currentFlatIndex = 0;
|
||||
|
||||
return (
|
||||
<Tooltip delayDuration={1000}>
|
||||
{!isCompact ? (
|
||||
<DropdownMenu open={agentMenuOpen} onOpenChange={setAgentMenuOpen}>
|
||||
<TooltipTrigger asChild>
|
||||
@@ -1637,307 +1852,90 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<DropdownMenuContent className="max-w-[300px]">
|
||||
{/* Favorites Section */}
|
||||
{favoriteModelsList.length > 0 && (
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="typography-meta">
|
||||
<RiStarFill className="h-3 w-3 flex-shrink-0 mr-2 text-primary" />
|
||||
Favorites
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent
|
||||
className="max-h-[320px] min-w-[200px]"
|
||||
sideOffset={2}
|
||||
collisionPadding={8}
|
||||
avoidCollisions={true}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[320px] min-w-[200px]"
|
||||
>
|
||||
{favoriteModelsList.map(({ model, providerID, modelID }) => {
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
|
||||
...icon,
|
||||
id: `cap-${icon.key}`,
|
||||
}));
|
||||
const modalityIcons = [
|
||||
...getModalityIcons(metadata, 'input'),
|
||||
...getModalityIcons(metadata, 'output'),
|
||||
];
|
||||
const uniqueModalityIcons = Array.from(
|
||||
new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
|
||||
).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
|
||||
const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
const outputTokens = formatTokens(metadata?.limit?.output);
|
||||
<DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start" alignOffset={-200}>
|
||||
{/* Search Input */}
|
||||
<div className="p-2 border-b border-border/40">
|
||||
<div className="relative">
|
||||
<RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search models"
|
||||
value={desktopModelQuery}
|
||||
onChange={(e) => setDesktopModelQuery(e.target.value)}
|
||||
onKeyDown={handleModelKeyDown}
|
||||
className="pl-8 h-8 typography-meta"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`fav-${providerID}-${modelID}`}
|
||||
className="typography-meta"
|
||||
onSelect={() => {
|
||||
handleProviderAndModelChange(providerID, modelID);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{getModelDisplayName(model)}
|
||||
</span>
|
||||
{metadata?.limit?.context || metadata?.limit?.output ? (
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
{metadata?.limit?.context ? `${contextTokens} ctx` : ''}
|
||||
{metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
|
||||
{metadata?.limit?.output ? `${outputTokens} out` : ''}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{indicatorIcons.map(({ id, icon: Icon, label }) => (
|
||||
<span
|
||||
key={id}
|
||||
className="flex h-4 w-4 items-center justify-center text-muted-foreground"
|
||||
aria-label={label}
|
||||
role="img"
|
||||
title={label}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
</span>
|
||||
))}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className="model-favorite-button flex h-4 w-4 items-center justify-center text-yellow-500 hover:text-yellow-600"
|
||||
aria-label="Unfavorite"
|
||||
title="Remove from favorites"
|
||||
>
|
||||
<RiStarFill className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
{/* Scrollable content */}
|
||||
<ScrollableOverlay outerClassName="max-h-[400px] flex-1">
|
||||
<div className="p-1">
|
||||
{!hasResults && (
|
||||
<div className="px-2 py-4 text-center typography-meta text-muted-foreground">
|
||||
No models found
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Favorites Section */}
|
||||
{filteredFavorites.length > 0 && (
|
||||
<>
|
||||
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<RiStarFill className="h-4 w-4 text-primary" />
|
||||
Favorites
|
||||
</DropdownMenuLabel>
|
||||
{filteredFavorites.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'fav', idx, modelSelectedIndex === idx);
|
||||
})}
|
||||
</ScrollableOverlay>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
)}
|
||||
|
||||
{/* Recents Section */}
|
||||
{recentModelsList.length > 0 && (
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="typography-meta">
|
||||
<RiTimeLine className="h-3 w-3 flex-shrink-0 mr-2 text-muted-foreground" />
|
||||
Recent
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent
|
||||
className="max-h-[320px] min-w-[200px]"
|
||||
sideOffset={2}
|
||||
collisionPadding={8}
|
||||
avoidCollisions={true}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[320px] min-w-[200px]"
|
||||
>
|
||||
{recentModelsList.map(({ model, providerID, modelID }) => {
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
|
||||
...icon,
|
||||
id: `cap-${icon.key}`,
|
||||
}));
|
||||
const modalityIcons = [
|
||||
...getModalityIcons(metadata, 'input'),
|
||||
...getModalityIcons(metadata, 'output'),
|
||||
];
|
||||
const uniqueModalityIcons = Array.from(
|
||||
new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
|
||||
).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
|
||||
const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
const outputTokens = formatTokens(metadata?.limit?.output);
|
||||
</>
|
||||
)}
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`recent-${providerID}-${modelID}`}
|
||||
className="typography-meta"
|
||||
onSelect={() => {
|
||||
handleProviderAndModelChange(providerID, modelID);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{getModelDisplayName(model)}
|
||||
</span>
|
||||
{metadata?.limit?.context || metadata?.limit?.output ? (
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
{metadata?.limit?.context ? `${contextTokens} ctx` : ''}
|
||||
{metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
|
||||
{metadata?.limit?.output ? `${outputTokens} out` : ''}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{indicatorIcons.map(({ id, icon: Icon, label }) => (
|
||||
<span
|
||||
key={id}
|
||||
className="flex h-4 w-4 items-center justify-center text-muted-foreground"
|
||||
aria-label={label}
|
||||
role="img"
|
||||
title={label}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
</span>
|
||||
))}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className="model-favorite-button flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-yellow-600"
|
||||
aria-label="Favorite"
|
||||
title="Add to favorites"
|
||||
>
|
||||
<RiStarLine className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
{/* Recents Section */}
|
||||
{filteredRecents.length > 0 && (
|
||||
<>
|
||||
{filteredFavorites.length > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<RiTimeLine className="h-4 w-4" />
|
||||
Recent
|
||||
</DropdownMenuLabel>
|
||||
{filteredRecents.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'recent', idx, modelSelectedIndex === idx);
|
||||
})}
|
||||
</ScrollableOverlay>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
)}
|
||||
|
||||
{/* Separator before providers */}
|
||||
{(favoriteModelsList.length > 0 || recentModelsList.length > 0) && (
|
||||
<DropdownMenuSeparator />
|
||||
)}
|
||||
|
||||
{/* All Providers Section */}
|
||||
{providers.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
</>
|
||||
)}
|
||||
|
||||
if (providerModels.length === 0) {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={provider.id}
|
||||
disabled
|
||||
className="typography-meta text-muted-foreground"
|
||||
>
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-3 w-3 flex-shrink-0 mr-2"
|
||||
/>
|
||||
{provider.name} (No models)
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
{/* Separator before providers */}
|
||||
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
|
||||
<DropdownMenuSeparator />
|
||||
)}
|
||||
|
||||
return (
|
||||
<DropdownMenuSub key={provider.id}>
|
||||
<DropdownMenuSubTrigger className="typography-meta">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-3 w-3 flex-shrink-0 mr-2"
|
||||
/>
|
||||
{provider.name}
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent
|
||||
className="max-h-[320px] min-w-[200px]"
|
||||
sideOffset={2}
|
||||
collisionPadding={8}
|
||||
avoidCollisions={true}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[320px] min-w-[200px]"
|
||||
>
|
||||
{providerModels.map((model: ProviderModel) => {
|
||||
const metadata = getModelMetadata(provider.id, model.id!);
|
||||
const capabilityIcons = getCapabilityIcons(metadata).map((icon) => ({
|
||||
...icon,
|
||||
id: `cap-${icon.key}`,
|
||||
}));
|
||||
const modalityIcons = [
|
||||
...getModalityIcons(metadata, 'input'),
|
||||
...getModalityIcons(metadata, 'output'),
|
||||
];
|
||||
const uniqueModalityIcons = Array.from(
|
||||
new Map(modalityIcons.map((icon) => [icon.key, icon])).values()
|
||||
).map((icon) => ({ ...icon, id: `mod-${icon.key}` }));
|
||||
const indicatorIcons = [...capabilityIcons, ...uniqueModalityIcons];
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
const outputTokens = formatTokens(metadata?.limit?.output);
|
||||
{/* All Providers - Flat List */}
|
||||
{filteredProviders.map((provider, index) => (
|
||||
<React.Fragment key={provider.id}>
|
||||
{index > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
{provider.name}
|
||||
</DropdownMenuLabel>
|
||||
{(provider.models as ProviderModel[]).map((model: ProviderModel) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, provider.id as string, model.id as string, 'provider', idx, modelSelectedIndex === idx);
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={model.id}
|
||||
className="typography-meta"
|
||||
onSelect={() => {
|
||||
handleProviderAndModelChange(provider.id as string, model.id as string);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{getModelDisplayName(model)}
|
||||
</span>
|
||||
{metadata?.limit?.context || metadata?.limit?.output ? (
|
||||
<span className="typography-meta text-muted-foreground">
|
||||
{metadata?.limit?.context ? `${contextTokens} ctx` : ''}
|
||||
{metadata?.limit?.context && metadata?.limit?.output ? ' • ' : ''}
|
||||
{metadata?.limit?.output ? `${outputTokens} out` : ''}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{indicatorIcons.map(({ id, icon: Icon, label }) => (
|
||||
<span
|
||||
key={id}
|
||||
className="flex h-4 w-4 items-center justify-center text-muted-foreground"
|
||||
aria-label={label}
|
||||
role="img"
|
||||
title={label}
|
||||
>
|
||||
<Icon className="h-3 w-3" />
|
||||
</span>
|
||||
))}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(provider.id as string, model.id as string);
|
||||
}}
|
||||
className={cn(
|
||||
"model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
|
||||
isFavoriteModel(provider.id as string, model.id as string)
|
||||
? "text-yellow-500"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
aria-label={isFavoriteModel(provider.id as string, model.id as string) ? "Unfavorite" : "Favorite"}
|
||||
title={isFavoriteModel(provider.id as string, model.id as string) ? "Remove from favorites" : "Add to favorites"}
|
||||
>
|
||||
{isFavoriteModel(provider.id as string, model.id as string) ? (
|
||||
<RiStarFill className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<RiStarLine className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</ScrollableOverlay>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
);
|
||||
})}
|
||||
{/* Keyboard hints footer */}
|
||||
<div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
|
||||
↑↓ navigate • Enter select • Esc close
|
||||
</div>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
) : (
|
||||
@@ -1974,6 +1972,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
{renderModelTooltipContent()}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
const renderAgentTooltipContent = () => {
|
||||
if (!currentAgent) {
|
||||
@@ -2148,7 +2147,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
</TooltipTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuContent align="end" alignOffset={-40} className="w-[min(280px,calc(100vw-2rem))]">
|
||||
{agents.filter(agent => isPrimaryMode(agent.mode)).map((agent) => (
|
||||
<DropdownMenuItem
|
||||
key={agent.name}
|
||||
|
||||
@@ -17,8 +17,6 @@ import { useDeviceInfo } from '@/lib/device';
|
||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||
import { useFileSearchStore } from '@/stores/useFileSearchStore';
|
||||
import { useDebouncedValue } from '@/hooks/useDebouncedValue';
|
||||
import { useIsVSCodeRuntime } from '@/hooks/useRuntimeAPIs';
|
||||
|
||||
interface FileInfo {
|
||||
name: string;
|
||||
path: string;
|
||||
@@ -46,8 +44,8 @@ export const ServerFilePicker: React.FC<ServerFilePickerProps> = ({
|
||||
presentation = 'dropdown',
|
||||
}) => {
|
||||
const { isMobile } = useDeviceInfo();
|
||||
const isVSCodeRuntime = useIsVSCodeRuntime();
|
||||
const isCompact = isMobile || isVSCodeRuntime;
|
||||
// Only use mobile panels on actual mobile devices, VSCode uses desktop dropdowns
|
||||
const isCompact = isMobile;
|
||||
const { currentDirectory } = useDirectoryStore();
|
||||
const searchFiles = useFileSearchStore((state) => state.searchFiles);
|
||||
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { RiAddLine, RiCloseLine, RiPlayLine, RiSearchLine } from '@remixicon/react';
|
||||
import { RiAddLine, RiCheckLine, RiCloseLine, RiPlayLine, RiSearchLine, RiStarFill, RiTimeLine } from '@remixicon/react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
@@ -23,7 +23,9 @@ import { useDirectoryStore } from '@/stores/useDirectoryStore';
|
||||
import { useMultiRunStore } from '@/stores/useMultiRunStore';
|
||||
import { useSessionStore } from '@/stores/useSessionStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useModelLists } from '@/hooks/useModelLists';
|
||||
import type { CreateMultiRunParams, MultiRunModelSelection } from '@/types/multirun';
|
||||
import type { ModelMetadata } from '@/types';
|
||||
|
||||
interface MultiRunLauncherProps {
|
||||
/** Prefill prompt textarea (optional) */
|
||||
@@ -67,6 +69,24 @@ const ModelChip: React.FC<{
|
||||
);
|
||||
};
|
||||
|
||||
const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
|
||||
notation: 'compact',
|
||||
compactDisplay: 'short',
|
||||
maximumFractionDigits: 1,
|
||||
minimumFractionDigits: 0,
|
||||
});
|
||||
|
||||
const formatTokens = (value?: number | null) => {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) {
|
||||
return '';
|
||||
}
|
||||
if (value === 0) {
|
||||
return '0';
|
||||
}
|
||||
const formatted = COMPACT_NUMBER_FORMATTER.format(value);
|
||||
return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
|
||||
};
|
||||
|
||||
/**
|
||||
* Model selector for multi-run (allows selecting multiple unique models).
|
||||
*/
|
||||
@@ -75,34 +95,79 @@ const ModelMultiSelect: React.FC<{
|
||||
onAdd: (model: MultiRunModelSelection) => void;
|
||||
onRemove: (index: number) => void;
|
||||
}> = ({ selectedModels, onAdd, onRemove }) => {
|
||||
const providers = useConfigStore((state) => state.providers);
|
||||
const { providers, modelsMetadata } = useConfigStore();
|
||||
const { favoriteModelsList, recentModelsList } = useModelLists();
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
||||
const searchInputRef = React.useRef<HTMLInputElement>(null);
|
||||
const dropdownRef = React.useRef<HTMLDivElement>(null);
|
||||
const itemRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
|
||||
|
||||
// Get set of already selected model keys
|
||||
const selectedKeys = React.useMemo(() => {
|
||||
return new Set(selectedModels.map((m) => `${m.providerID}:${m.modelID}`));
|
||||
}, [selectedModels]);
|
||||
|
||||
// Filter models based on search query
|
||||
const filteredProviders = React.useMemo(() => {
|
||||
if (!searchQuery.trim()) return providers;
|
||||
const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
|
||||
const key = `${provId}/${modId}`;
|
||||
return modelsMetadata.get(key);
|
||||
};
|
||||
|
||||
const query = searchQuery.toLowerCase();
|
||||
const getModelDisplayName = (model: Record<string, unknown>) => {
|
||||
const name = model?.name || model?.id || '';
|
||||
const nameStr = String(name);
|
||||
if (nameStr.length > 40) {
|
||||
return nameStr.substring(0, 37) + '...';
|
||||
}
|
||||
return nameStr;
|
||||
};
|
||||
|
||||
// Filter helper
|
||||
const filterByQuery = React.useCallback((modelName: string, providerName: string) => {
|
||||
if (!searchQuery.trim()) return true;
|
||||
const lowerQuery = searchQuery.toLowerCase();
|
||||
return (
|
||||
modelName.toLowerCase().includes(lowerQuery) ||
|
||||
providerName.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
}, [searchQuery]);
|
||||
|
||||
// Filter favorites
|
||||
const filteredFavorites = React.useMemo(() => {
|
||||
return favoriteModelsList.filter(({ model, providerID }) => {
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName);
|
||||
});
|
||||
}, [favoriteModelsList, providers, filterByQuery]);
|
||||
|
||||
// Filter recents
|
||||
const filteredRecents = React.useMemo(() => {
|
||||
return recentModelsList.filter(({ model, providerID }) => {
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName);
|
||||
});
|
||||
}, [recentModelsList, providers, filterByQuery]);
|
||||
|
||||
// Filter providers
|
||||
const filteredProviders = React.useMemo(() => {
|
||||
return providers
|
||||
.map((provider) => {
|
||||
const models = Array.isArray(provider.models) ? provider.models : [];
|
||||
const filteredModels = models.filter((model) => {
|
||||
const modelName = (model.name || model.id || '').toString().toLowerCase();
|
||||
const providerName = provider.name.toLowerCase();
|
||||
return modelName.includes(query) || providerName.includes(query);
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, provider.name || provider.id || '');
|
||||
});
|
||||
return { ...provider, models: filteredModels };
|
||||
})
|
||||
.filter((provider) => provider.models.length > 0);
|
||||
}, [providers, searchQuery]);
|
||||
}, [providers, filterByQuery]);
|
||||
|
||||
const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
|
||||
|
||||
// Focus search input when opened
|
||||
React.useEffect(() => {
|
||||
@@ -119,6 +184,7 @@ const ModelMultiSelect: React.FC<{
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(0);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -126,6 +192,66 @@ const ModelMultiSelect: React.FC<{
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [isOpen]);
|
||||
|
||||
// Reset selection when search query changes
|
||||
React.useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [searchQuery]);
|
||||
|
||||
// Render a model row
|
||||
const renderModelRow = (
|
||||
model: Record<string, unknown>,
|
||||
providerID: string,
|
||||
modelID: string,
|
||||
keyPrefix: string,
|
||||
flatIndex: number,
|
||||
isHighlighted: boolean
|
||||
) => {
|
||||
const key = `${providerID}:${modelID}`;
|
||||
const isSelected = selectedKeys.has(key);
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={`${keyPrefix}-${key}`}
|
||||
ref={(el) => { itemRefs.current[flatIndex] = el; }}
|
||||
type="button"
|
||||
disabled={isSelected}
|
||||
onClick={() => {
|
||||
onAdd({
|
||||
providerID,
|
||||
modelID,
|
||||
displayName: (model.name as string) || modelID,
|
||||
});
|
||||
// Don't close dropdown - allow selecting multiple
|
||||
}}
|
||||
onMouseEnter={() => setSelectedIndex(flatIndex)}
|
||||
className={cn(
|
||||
'w-full text-left px-2 py-1.5 rounded-md typography-meta transition-colors flex items-center gap-2',
|
||||
isSelected
|
||||
? 'text-muted-foreground/50 cursor-not-allowed bg-accent/20'
|
||||
: isHighlighted
|
||||
? 'bg-accent'
|
||||
: 'hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{getModelDisplayName(model)}
|
||||
</span>
|
||||
{contextTokens && (
|
||||
<span className="typography-micro text-muted-foreground flex-shrink-0">
|
||||
{contextTokens}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{isSelected && (
|
||||
<RiCheckLine className="h-4 w-4 text-primary flex-shrink-0" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap gap-1.5 items-center">
|
||||
@@ -142,83 +268,153 @@ const ModelMultiSelect: React.FC<{
|
||||
Add model
|
||||
</Button>
|
||||
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 mt-1 z-50 border border-border/30 rounded-lg overflow-hidden bg-background shadow-lg w-72">
|
||||
{/* Search input */}
|
||||
<div className="p-2 border-b border-border/30">
|
||||
<div className="relative">
|
||||
<RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
placeholder="Search models..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="h-8 pl-8 typography-meta"
|
||||
/>
|
||||
{isOpen && (() => {
|
||||
// Build flat list for keyboard navigation
|
||||
type FlatModelItem = { model: Record<string, unknown>; providerID: string; modelID: string; section: string };
|
||||
const flatModelList: FlatModelItem[] = [];
|
||||
|
||||
filteredFavorites.forEach(({ model, providerID, modelID }) => {
|
||||
flatModelList.push({ model, providerID, modelID, section: 'fav' });
|
||||
});
|
||||
filteredRecents.forEach(({ model, providerID, modelID }) => {
|
||||
flatModelList.push({ model, providerID, modelID, section: 'recent' });
|
||||
});
|
||||
filteredProviders.forEach((provider) => {
|
||||
provider.models.forEach((model) => {
|
||||
flatModelList.push({ model, providerID: provider.id, modelID: model.id as string, section: 'provider' });
|
||||
});
|
||||
});
|
||||
|
||||
const totalItems = flatModelList.length;
|
||||
|
||||
// Handle keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
|
||||
setSelectedIndex(nextIndex);
|
||||
setTimeout(() => {
|
||||
itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, 0);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const prevIndex = (selectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
|
||||
setSelectedIndex(prevIndex);
|
||||
setTimeout(() => {
|
||||
itemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, 0);
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const selectedItem = flatModelList[selectedIndex];
|
||||
if (selectedItem && !selectedKeys.has(`${selectedItem.providerID}:${selectedItem.modelID}`)) {
|
||||
onAdd({
|
||||
providerID: selectedItem.providerID,
|
||||
modelID: selectedItem.modelID,
|
||||
displayName: (selectedItem.model.name as string) || selectedItem.modelID,
|
||||
});
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsOpen(false);
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(0);
|
||||
}
|
||||
};
|
||||
|
||||
let currentFlatIndex = 0;
|
||||
|
||||
return (
|
||||
<div className="absolute bottom-full left-0 mb-1 z-50 border border-border/30 rounded-xl overflow-hidden bg-background shadow-lg w-[min(380px,calc(100vw-2rem))] flex flex-col">
|
||||
{/* Search input */}
|
||||
<div className="p-2 border-b border-border/40">
|
||||
<div className="relative">
|
||||
<RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
placeholder="Search models"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="h-8 pl-8 typography-meta"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Models list */}
|
||||
<ScrollableOverlay outerClassName="max-h-[400px] flex-1">
|
||||
<div className="p-1">
|
||||
{!hasResults && (
|
||||
<div className="px-2 py-4 text-center typography-meta text-muted-foreground">
|
||||
No models found
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Favorites Section */}
|
||||
{filteredFavorites.length > 0 && (
|
||||
<>
|
||||
<div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<RiStarFill className="h-4 w-4 text-primary" />
|
||||
Favorites
|
||||
</div>
|
||||
{filteredFavorites.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Recents Section */}
|
||||
{filteredRecents.length > 0 && (
|
||||
<>
|
||||
{filteredFavorites.length > 0 && <div className="h-px bg-border/40 my-1" />}
|
||||
<div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<RiTimeLine className="h-4 w-4" />
|
||||
Recent
|
||||
</div>
|
||||
{filteredRecents.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Separator before providers */}
|
||||
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
|
||||
<div className="h-px bg-border/40 my-1" />
|
||||
)}
|
||||
|
||||
{/* All Providers - Flat List */}
|
||||
{filteredProviders.map((provider, index) => (
|
||||
<React.Fragment key={provider.id}>
|
||||
{index > 0 && <div className="h-px bg-border/40 my-1" />}
|
||||
<div className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
{provider.name}
|
||||
</div>
|
||||
{provider.models.map((model) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, provider.id, model.id as string, 'provider', idx, selectedIndex === idx);
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
|
||||
{/* Keyboard hints footer */}
|
||||
<div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
|
||||
↑↓ navigate • Enter select • Esc close
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Models list */}
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[240px]"
|
||||
className="p-2 space-y-1"
|
||||
>
|
||||
{filteredProviders.length === 0 ? (
|
||||
<div className="py-4 text-center text-muted-foreground typography-meta">
|
||||
No models found
|
||||
</div>
|
||||
) : (
|
||||
filteredProviders.map((provider) => {
|
||||
const models = Array.isArray(provider.models) ? provider.models : [];
|
||||
if (models.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={provider.id} className="space-y-0.5">
|
||||
<div className="flex items-center gap-2 py-1 text-muted-foreground">
|
||||
<ProviderLogo providerId={provider.id} className="h-3 w-3" />
|
||||
<span className="typography-micro font-medium uppercase tracking-wider">
|
||||
{provider.name}
|
||||
</span>
|
||||
</div>
|
||||
{models.map((model) => {
|
||||
const key = `${provider.id}:${model.id}`;
|
||||
const isSelected = selectedKeys.has(key);
|
||||
|
||||
return (
|
||||
<button
|
||||
key={model.id as string}
|
||||
type="button"
|
||||
disabled={isSelected}
|
||||
onClick={() => {
|
||||
onAdd({
|
||||
providerID: provider.id,
|
||||
modelID: model.id as string,
|
||||
displayName: model.name as string || model.id as string,
|
||||
});
|
||||
// Don't close dropdown - allow selecting multiple
|
||||
}}
|
||||
className={cn(
|
||||
'w-full text-left px-2 py-1 rounded-md typography-meta transition-colors',
|
||||
isSelected
|
||||
? 'text-muted-foreground/50 cursor-not-allowed'
|
||||
: 'hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
{model.name || model.id}
|
||||
{isSelected && (
|
||||
<span className="ml-2 text-muted-foreground/50">(selected)</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</ScrollableOverlay>
|
||||
</div>
|
||||
)}
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
|
||||
{/* Selected models */}
|
||||
|
||||
@@ -2,22 +2,21 @@ import React from 'react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { useConfigStore } from '@/stores/useConfigStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { RiArrowDownSLine, RiArrowRightSLine, RiPencilAiLine, RiStarFill, RiStarLine, RiTimeLine } from '@remixicon/react';
|
||||
import { RiArrowDownSLine, RiArrowRightSLine, RiCheckLine, RiCloseLine, RiPencilAiLine, RiSearchLine, RiStarFill, RiStarLine, RiTimeLine } from '@remixicon/react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { MobileOverlayPanel } from '@/components/ui/MobileOverlayPanel';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { useModelLists } from '@/hooks/useModelLists';
|
||||
import type { ModelMetadata } from '@/types';
|
||||
|
||||
type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
|
||||
|
||||
@@ -28,6 +27,24 @@ interface ModelSelectorProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const COMPACT_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
|
||||
notation: 'compact',
|
||||
compactDisplay: 'short',
|
||||
maximumFractionDigits: 1,
|
||||
minimumFractionDigits: 0,
|
||||
});
|
||||
|
||||
const formatTokens = (value?: number | null) => {
|
||||
if (typeof value !== 'number' || Number.isNaN(value)) {
|
||||
return '';
|
||||
}
|
||||
if (value === 0) {
|
||||
return '0';
|
||||
}
|
||||
const formatted = COMPACT_NUMBER_FORMATTER.format(value);
|
||||
return formatted.endsWith('.0') ? formatted.slice(0, -2) : formatted;
|
||||
};
|
||||
|
||||
export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
providerId,
|
||||
modelId,
|
||||
@@ -43,21 +60,36 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
|
||||
const [isMobilePanelOpen, setIsMobilePanelOpen] = React.useState(false);
|
||||
const [expandedMobileProviders, setExpandedMobileProviders] = React.useState<Set<string>>(new Set());
|
||||
const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
|
||||
const [searchQuery, setSearchQuery] = React.useState('');
|
||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
||||
const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
|
||||
|
||||
const closeMobilePanel = () => setIsMobilePanelOpen(false);
|
||||
const toggleMobileProviderExpansion = (providerId: string) => {
|
||||
const toggleMobileProviderExpansion = (provId: string) => {
|
||||
setExpandedMobileProviders(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(providerId)) {
|
||||
newSet.delete(providerId);
|
||||
if (newSet.has(provId)) {
|
||||
newSet.delete(provId);
|
||||
} else {
|
||||
newSet.add(providerId);
|
||||
newSet.add(provId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
// Reset search and selection when dropdown closes
|
||||
React.useEffect(() => {
|
||||
if (!isDropdownOpen) {
|
||||
setSearchQuery('');
|
||||
setSelectedIndex(0);
|
||||
}
|
||||
}, [isDropdownOpen]);
|
||||
|
||||
// Reset selection when search query changes
|
||||
React.useEffect(() => {
|
||||
setSelectedIndex(0);
|
||||
}, [searchQuery]);
|
||||
|
||||
const getModelDisplayName = (model: Record<string, unknown>) => {
|
||||
const name = model?.name || model?.id || '';
|
||||
@@ -68,17 +100,120 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
return nameStr;
|
||||
};
|
||||
|
||||
const getModelMetadata = (providerId: string, modelId: string) => {
|
||||
const key = `${providerId}/${modelId}`;
|
||||
const getModelMetadata = (provId: string, modId: string): ModelMetadata | undefined => {
|
||||
const key = `${provId}/${modId}`;
|
||||
return modelsMetadata.get(key);
|
||||
};
|
||||
|
||||
const handleProviderAndModelChange = (newProviderId: string, newModelId: string) => {
|
||||
onChange(newProviderId, newModelId);
|
||||
// Add to recent models on successful selection
|
||||
addRecentModel(newProviderId, newModelId);
|
||||
if (newProviderId && newModelId) {
|
||||
addRecentModel(newProviderId, newModelId);
|
||||
}
|
||||
setIsDropdownOpen(false);
|
||||
};
|
||||
|
||||
// Filter helper
|
||||
const filterByQuery = (modelName: string, providerName: string) => {
|
||||
if (!searchQuery.trim()) return true;
|
||||
const lowerQuery = searchQuery.toLowerCase();
|
||||
return (
|
||||
modelName.toLowerCase().includes(lowerQuery) ||
|
||||
providerName.toLowerCase().includes(lowerQuery)
|
||||
);
|
||||
};
|
||||
|
||||
// Render a model row for desktop dropdown
|
||||
const renderModelRow = (
|
||||
model: ProviderModel,
|
||||
provID: string,
|
||||
modID: string,
|
||||
keyPrefix: string,
|
||||
flatIndex: number,
|
||||
isHighlighted: boolean
|
||||
) => {
|
||||
const metadata = getModelMetadata(provID, modID);
|
||||
const contextTokens = formatTokens(metadata?.limit?.context);
|
||||
const isSelected = providerId === provID && modelId === modID;
|
||||
const isFavorite = isFavoriteModel(provID, modID);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={`${keyPrefix}-${provID}-${modID}`}
|
||||
ref={(el) => { itemRefs.current[flatIndex] = el; }}
|
||||
className={cn(
|
||||
"typography-meta group flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
|
||||
isHighlighted ? "bg-accent" : "hover:bg-accent/50"
|
||||
)}
|
||||
onClick={() => handleProviderAndModelChange(provID, modID)}
|
||||
onMouseEnter={() => setSelectedIndex(flatIndex)}
|
||||
>
|
||||
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
||||
<span className="font-medium truncate">
|
||||
{getModelDisplayName(model)}
|
||||
</span>
|
||||
{contextTokens ? (
|
||||
<span className="typography-micro text-muted-foreground flex-shrink-0">
|
||||
{contextTokens}
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
{isSelected && (
|
||||
<RiCheckLine className="h-4 w-4 text-primary" />
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(provID, modID);
|
||||
}}
|
||||
className={cn(
|
||||
"model-favorite-button flex h-4 w-4 items-center justify-center hover:text-yellow-600",
|
||||
isFavorite ? "text-yellow-500" : "text-muted-foreground"
|
||||
)}
|
||||
aria-label={isFavorite ? "Unfavorite" : "Favorite"}
|
||||
title={isFavorite ? "Remove from favorites" : "Add to favorites"}
|
||||
>
|
||||
{isFavorite ? (
|
||||
<RiStarFill className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<RiStarLine className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Filter data for desktop dropdown
|
||||
const filteredFavorites = favoriteModelsList.filter(({ model, providerID }) => {
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName);
|
||||
});
|
||||
|
||||
const filteredRecents = recentModelsList.filter(({ model, providerID }) => {
|
||||
const provider = providers.find(p => p.id === providerID);
|
||||
const providerName = provider?.name || providerID;
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, providerName);
|
||||
});
|
||||
|
||||
const filteredProviders = providers
|
||||
.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
const filteredModels = providerModels.filter((model: ProviderModel) => {
|
||||
const modelName = getModelDisplayName(model);
|
||||
return filterByQuery(modelName, provider.name || provider.id || '');
|
||||
});
|
||||
return { ...provider, models: filteredModels };
|
||||
})
|
||||
.filter((provider) => provider.models.length > 0);
|
||||
|
||||
const hasResults = filteredFavorites.length > 0 || filteredRecents.length > 0 || filteredProviders.length > 0;
|
||||
|
||||
const renderMobileModelPanel = () => {
|
||||
if (!isActuallyMobile) return null;
|
||||
|
||||
@@ -98,7 +233,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
<div className="border-t border-border/20">
|
||||
{favoriteModelsList.map(({ model, providerID, modelID }) => {
|
||||
const isSelectedModel = providerID === providerId && modelID === modelId;
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -124,11 +258,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
/>
|
||||
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
||||
</div>
|
||||
{typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
|
||||
<span className="typography-micro text-muted-foreground truncate">
|
||||
{(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -158,7 +287,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
<div className="border-t border-border/20">
|
||||
{recentModelsList.map(({ model, providerID, modelID }) => {
|
||||
const isSelectedModel = providerID === providerId && modelID === modelId;
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -184,11 +312,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
/>
|
||||
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
||||
</div>
|
||||
{typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
|
||||
<span className="typography-micro text-muted-foreground truncate">
|
||||
{(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
@@ -246,7 +369,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
<div className="border-t border-border/20">
|
||||
{providerModels.map((modelItem: ProviderModel) => {
|
||||
const isSelectedModel = provider.id === providerId && modelItem.id === modelId;
|
||||
const metadata = getModelMetadata(provider.id as string, modelItem.id as string);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -266,11 +388,6 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
}}
|
||||
>
|
||||
<span className="font-medium truncate">{getModelDisplayName(modelItem)}</span>
|
||||
{typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
|
||||
<span className="typography-micro text-muted-foreground truncate">
|
||||
{(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
@@ -350,7 +467,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
<RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
|
||||
</button>
|
||||
) : (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<div className={cn(
|
||||
'flex items-center gap-2 px-2 rounded-lg bg-accent/20 border border-border/20 cursor-pointer hover:bg-accent/30 h-6 w-fit',
|
||||
@@ -373,220 +490,165 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
|
||||
<RiArrowDownSLine className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="max-w-[300px]">
|
||||
{/* Favorites Section */}
|
||||
{favoriteModelsList.length > 0 && (
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="typography-meta">
|
||||
<RiStarFill className="h-3 w-3 flex-shrink-0 mr-2 text-yellow-500" />
|
||||
Favorites
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent
|
||||
className="max-h-[320px] min-w-[200px]"
|
||||
sideOffset={2}
|
||||
collisionPadding={8}
|
||||
avoidCollisions={true}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[320px] min-w-[200px]"
|
||||
className="space-y-1 p-1"
|
||||
>
|
||||
{favoriteModelsList.map(({ model, providerID, modelID }) => {
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`fav-${providerID}-${modelID}`}
|
||||
className="typography-meta"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
handleProviderAndModelChange(providerID, modelID);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
||||
{typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
|
||||
<span className="typography-micro text-muted-foreground truncate">
|
||||
{(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className="model-favorite-button flex h-4 w-4 items-center justify-center text-yellow-500 hover:text-yellow-600"
|
||||
aria-label="Unfavorite"
|
||||
>
|
||||
<RiStarFill className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</ScrollableOverlay>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
)}
|
||||
|
||||
{/* Recents Section */}
|
||||
{recentModelsList.length > 0 && (
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger className="typography-meta">
|
||||
<RiTimeLine className="h-3 w-3 flex-shrink-0 mr-2 text-muted-foreground" />
|
||||
Recent
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent
|
||||
className="max-h-[320px] min-w-[200px]"
|
||||
sideOffset={2}
|
||||
collisionPadding={8}
|
||||
avoidCollisions={true}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[320px] min-w-[200px]"
|
||||
className="space-y-1 p-1"
|
||||
>
|
||||
{recentModelsList.map(({ model, providerID, modelID }) => {
|
||||
const metadata = getModelMetadata(providerID, modelID);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={`recent-${providerID}-${modelID}`}
|
||||
className="typography-meta"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
handleProviderAndModelChange(providerID, modelID);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
||||
{typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
|
||||
<span className="typography-micro text-muted-foreground truncate">
|
||||
{(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(providerID, modelID);
|
||||
}}
|
||||
className="model-favorite-button flex h-4 w-4 items-center justify-center text-muted-foreground hover:text-yellow-600"
|
||||
aria-label="Favorite"
|
||||
>
|
||||
<RiStarLine className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</ScrollableOverlay>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
)}
|
||||
|
||||
{/* Separator before providers */}
|
||||
{(favoriteModelsList.length > 0 || recentModelsList.length > 0) && (
|
||||
<DropdownMenuSeparator />
|
||||
)}
|
||||
<DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start">
|
||||
{(() => {
|
||||
// Build flat list for keyboard navigation
|
||||
type FlatModelItem = { model: ProviderModel; providerID: string; modelID: string; section: string };
|
||||
const flatModelList: FlatModelItem[] = [];
|
||||
|
||||
filteredFavorites.forEach(({ model, providerID, modelID }) => {
|
||||
flatModelList.push({ model, providerID, modelID, section: 'fav' });
|
||||
});
|
||||
filteredRecents.forEach(({ model, providerID, modelID }) => {
|
||||
flatModelList.push({ model, providerID, modelID, section: 'recent' });
|
||||
});
|
||||
filteredProviders.forEach((provider) => {
|
||||
(provider.models as ProviderModel[]).forEach((model) => {
|
||||
flatModelList.push({ model, providerID: provider.id as string, modelID: model.id as string, section: 'provider' });
|
||||
});
|
||||
});
|
||||
|
||||
{providers.map((provider) => {
|
||||
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
||||
const totalItems = flatModelList.length;
|
||||
|
||||
if (providerModels.length === 0) {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={provider.id}
|
||||
disabled
|
||||
className="typography-meta text-muted-foreground"
|
||||
>
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-3 w-3 flex-shrink-0 mr-2"
|
||||
/>
|
||||
{provider.name} (No models)
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
}
|
||||
// Handle keyboard navigation
|
||||
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const nextIndex = (selectedIndex + 1) % Math.max(1, totalItems);
|
||||
setSelectedIndex(nextIndex);
|
||||
setTimeout(() => {
|
||||
itemRefs.current[nextIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, 0);
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const prevIndex = (selectedIndex - 1 + Math.max(1, totalItems)) % Math.max(1, totalItems);
|
||||
setSelectedIndex(prevIndex);
|
||||
setTimeout(() => {
|
||||
itemRefs.current[prevIndex]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}, 0);
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
const selectedItem = flatModelList[selectedIndex];
|
||||
if (selectedItem) {
|
||||
handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setIsDropdownOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
let currentFlatIndex = 0;
|
||||
|
||||
return (
|
||||
<DropdownMenuSub key={provider.id}>
|
||||
<DropdownMenuSubTrigger className="typography-meta">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-3 w-3 flex-shrink-0 mr-2"
|
||||
/>
|
||||
{provider.name}
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent
|
||||
className="max-h-[320px] min-w-[200px]"
|
||||
sideOffset={2}
|
||||
collisionPadding={8}
|
||||
avoidCollisions={true}
|
||||
>
|
||||
<ScrollableOverlay
|
||||
outerClassName="max-h-[320px] min-w-[200px]"
|
||||
className="space-y-1 p-1"
|
||||
>
|
||||
{providerModels.map((modelItem: ProviderModel) => {
|
||||
const metadata = getModelMetadata(provider.id as string, modelItem.id as string);
|
||||
<>
|
||||
{/* Search Input */}
|
||||
<div className="p-2 border-b border-border/40">
|
||||
<div className="relative">
|
||||
<RiSearchLine className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search models"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="pl-8 h-8 typography-meta"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
key={modelItem.id as string}
|
||||
className="typography-meta"
|
||||
onSelect={(e) => {
|
||||
e.preventDefault();
|
||||
handleProviderAndModelChange(provider.id as string, modelItem.id as string);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="flex flex-col flex-1 min-w-0">
|
||||
<span className="font-medium truncate">{getModelDisplayName(modelItem)}</span>
|
||||
{typeof (metadata as unknown as Record<string, unknown>)?.description === 'string' && (
|
||||
<span className="typography-micro text-muted-foreground truncate">
|
||||
{(metadata as unknown as Record<string, unknown>).description as React.ReactNode}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
toggleFavoriteModel(provider.id as string, modelItem.id as string);
|
||||
}}
|
||||
className={cn(
|
||||
"flex h-4 w-4 items-center justify-center hover:text-yellow-600",
|
||||
isFavoriteModel(provider.id as string, modelItem.id as string)
|
||||
? "text-yellow-500"
|
||||
: "text-muted-foreground"
|
||||
)}
|
||||
aria-label={isFavoriteModel(provider.id as string, modelItem.id as string) ? "Unfavorite" : "Favorite"}
|
||||
>
|
||||
{isFavoriteModel(provider.id as string, modelItem.id as string) ? (
|
||||
<RiStarFill className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<RiStarLine className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</ScrollableOverlay>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
{/* Scrollable content */}
|
||||
<ScrollableOverlay outerClassName="max-h-[400px] flex-1">
|
||||
<div className="p-1">
|
||||
{/* Not selected option */}
|
||||
<div
|
||||
className={cn(
|
||||
"typography-meta flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer",
|
||||
"hover:bg-accent/50"
|
||||
)}
|
||||
onClick={() => handleProviderAndModelChange('', '')}
|
||||
>
|
||||
<RiCloseLine className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-muted-foreground">Not selected</span>
|
||||
{!providerId && !modelId && (
|
||||
<RiCheckLine className="h-4 w-4 text-primary ml-auto" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
{!hasResults && searchQuery && (
|
||||
<div className="px-2 py-4 text-center typography-meta text-muted-foreground">
|
||||
No models found
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Favorites Section */}
|
||||
{filteredFavorites.length > 0 && (
|
||||
<>
|
||||
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<RiStarFill className="h-4 w-4 text-primary" />
|
||||
Favorites
|
||||
</DropdownMenuLabel>
|
||||
{filteredFavorites.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Recents Section */}
|
||||
{filteredRecents.length > 0 && (
|
||||
<>
|
||||
{filteredFavorites.length > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<RiTimeLine className="h-4 w-4" />
|
||||
Recent
|
||||
</DropdownMenuLabel>
|
||||
{filteredRecents.map(({ model, providerID, modelID }) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Separator before providers */}
|
||||
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
|
||||
<DropdownMenuSeparator />
|
||||
)}
|
||||
|
||||
{/* All Providers - Flat List */}
|
||||
{filteredProviders.map((provider, index) => (
|
||||
<React.Fragment key={provider.id}>
|
||||
{index > 0 && <DropdownMenuSeparator />}
|
||||
<DropdownMenuLabel className="typography-ui-header font-semibold text-foreground flex items-center gap-2 px-2 py-1.5">
|
||||
<ProviderLogo
|
||||
providerId={provider.id}
|
||||
className="h-4 w-4 flex-shrink-0"
|
||||
/>
|
||||
{provider.name}
|
||||
</DropdownMenuLabel>
|
||||
{(provider.models as ProviderModel[]).map((model: ProviderModel) => {
|
||||
const idx = currentFlatIndex++;
|
||||
return renderModelRow(model, provider.id as string, model.id as string, 'provider', idx, selectedIndex === idx);
|
||||
})}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
|
||||
{/* Keyboard hints footer */}
|
||||
<div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
|
||||
↑↓ navigate • Enter select • Esc close
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
<DropdownMenuItem
|
||||
className="typography-meta"
|
||||
onSelect={() => handleProviderAndModelChange('', '')}
|
||||
>
|
||||
<span className="text-muted-foreground">No model (optional)</span>
|
||||
</DropdownMenuItem>
|
||||
})()}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
|
||||
@@ -7,7 +7,7 @@ import {
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { RiAddLine, RiArrowUpSLine, RiArrowUpWideLine, RiCloseCircleLine, RiCodeLine, RiCommandLine, RiGitBranchLine, RiLayoutLeftLine, RiPaletteLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, RiText } from '@remixicon/react';
|
||||
import { RiAddLine, RiArrowUpSLine, RiArrowUpWideLine, RiBrainAi3Line, RiCloseCircleLine, RiCodeLine, RiCommandLine, RiGitBranchLine, RiLayoutLeftLine, RiPaletteLine, RiQuestionLine, RiSettings3Line, RiTerminalBoxLine, RiText } from '@remixicon/react';
|
||||
|
||||
const renderKeyToken = (token: string, index: number) => {
|
||||
const normalized = token.trim().toLowerCase();
|
||||
@@ -64,6 +64,7 @@ export const HelpDialog: React.FC = () => {
|
||||
{ keys: ["Ctrl + X"], description: "Open Command Palette", icon: RiCommandLine },
|
||||
{ keys: ["Ctrl + H"], description: "Show Keyboard Shortcuts (this dialog)", icon: RiQuestionLine },
|
||||
{ keys: ["Ctrl + L"], description: "Toggle Session Sidebar", icon: RiLayoutLeftLine },
|
||||
{ keys: ["Ctrl + M"], description: "Open Model Selector", icon: RiBrainAi3Line },
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -15,6 +15,7 @@ export const useKeyboardShortcuts = () => {
|
||||
setSessionCreateDialogOpen,
|
||||
setActiveMainTab,
|
||||
setSettingsDialogOpen,
|
||||
setModelSelectorOpen,
|
||||
} = useUIStore();
|
||||
const { themeMode, setThemeMode } = useThemeSystem();
|
||||
const { working } = useAssistantStatus();
|
||||
@@ -143,6 +144,37 @@ export const useKeyboardShortcuts = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Ctrl+M: Open model selector (same conditions as double-ESC: chat tab, no overlays)
|
||||
if (e.ctrlKey && !e.metaKey && !e.shiftKey && e.key.toLowerCase() === 'm') {
|
||||
const {
|
||||
isSettingsDialogOpen,
|
||||
isCommandPaletteOpen,
|
||||
isHelpDialogOpen,
|
||||
isSessionSwitcherOpen,
|
||||
isSessionCreateDialogOpen,
|
||||
isAboutDialogOpen,
|
||||
activeMainTab,
|
||||
isModelSelectorOpen,
|
||||
} = useUIStore.getState();
|
||||
|
||||
// Skip if settings open
|
||||
if (isSettingsDialogOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if any overlay open or not on chat tab
|
||||
const hasOverlay = isCommandPaletteOpen || isHelpDialogOpen || isSessionSwitcherOpen || isSessionCreateDialogOpen || isAboutDialogOpen;
|
||||
const isChatActive = activeMainTab === 'chat';
|
||||
|
||||
if (hasOverlay || !isChatActive) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
setModelSelectorOpen(!isModelSelectorOpen);
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
const {
|
||||
isSettingsDialogOpen,
|
||||
@@ -222,6 +254,7 @@ export const useKeyboardShortcuts = () => {
|
||||
setSessionCreateDialogOpen,
|
||||
setActiveMainTab,
|
||||
setSettingsDialogOpen,
|
||||
setModelSelectorOpen,
|
||||
setThemeMode,
|
||||
themeMode,
|
||||
working,
|
||||
|
||||
@@ -32,6 +32,7 @@ interface UIStore {
|
||||
isAboutDialogOpen: boolean;
|
||||
isSessionCreateDialogOpen: boolean;
|
||||
isSettingsDialogOpen: boolean;
|
||||
isModelSelectorOpen: boolean;
|
||||
sidebarSection: SidebarSection;
|
||||
eventStreamStatus: EventStreamStatus;
|
||||
eventStreamHint: string | null;
|
||||
@@ -69,6 +70,7 @@ interface UIStore {
|
||||
setAboutDialogOpen: (open: boolean) => void;
|
||||
setSessionCreateDialogOpen: (open: boolean) => void;
|
||||
setSettingsDialogOpen: (open: boolean) => void;
|
||||
setModelSelectorOpen: (open: boolean) => void;
|
||||
applyTheme: () => void;
|
||||
setSidebarSection: (section: SidebarSection) => void;
|
||||
setEventStreamStatus: (status: EventStreamStatus, hint?: string | null) => void;
|
||||
@@ -116,6 +118,7 @@ export const useUIStore = create<UIStore>()(
|
||||
isAboutDialogOpen: false,
|
||||
isSessionCreateDialogOpen: false,
|
||||
isSettingsDialogOpen: false,
|
||||
isModelSelectorOpen: false,
|
||||
sidebarSection: 'sessions',
|
||||
eventStreamStatus: 'idle',
|
||||
eventStreamHint: null,
|
||||
@@ -229,6 +232,10 @@ export const useUIStore = create<UIStore>()(
|
||||
set({ isSettingsDialogOpen: open });
|
||||
},
|
||||
|
||||
setModelSelectorOpen: (open) => {
|
||||
set({ isModelSelectorOpen: open });
|
||||
},
|
||||
|
||||
setSidebarSection: (section) => {
|
||||
set({ sidebarSection: section });
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user