Islam NoflandBohdan Triapitsyn
21253d7fc2
* Add design spec: OpenCode readiness loading indicator * Add implementation plan: OpenCode readiness loading indicator * feat: add useOpenCodeReadiness hook * feat: add i18n keys for common.loading * feat: add loading state to ModelSelector * feat: add loading state to AgentSelector * feat: add loading state to ModelControls chat selectors * update package-lock * feat(github): add shared fork detection utility * feat(github): make issue listing fork-aware * feat(github): make PR listing fork-aware * feat(types): add sourceRepo to issue/PR summary types * feat(ui): add source badges to GitHub integration dialog * feat(ui): add source badges to issue/PR picker dialogs * feat(github): pass headRemote in PR creation for fork support * feat(ui): add source→target label in PR tab for fork workflows * fix(github): allow PR section on base branch when upstream remote exists * fix(github): show PR section on any branch including main for fork→upstream PRs * fix(github): allow PullRequestSection to render on base branch when upstream remote exists * feat(github): auto-detect upstream repo for fork→upstream PR creation - Add GET /api/github/repo/upstream endpoint to discover fork's upstream - Fix PullRequestSection canShow to allow PR creation on base branch when repo is a fork - Add virtual upstream target in remote dropdown (no explicit upstream remote needed) - Add targetRepo parameter to /api/github/pr/create for direct upstream targeting - Add repoUpstream() API client method and GitHubRepoUpstreamResult type * feat(github): auto-detect upstream repo for fork→upstream PR creation - Add GET /api/github/repo/upstream endpoint to discover fork's upstream - Fix PullRequestSection canShow to allow PR creation on base branch when repo is a fork - Add virtual upstream target in remote dropdown (no explicit upstream remote needed) - Add targetRepo parameter to /api/github/pr/create for direct upstream targeting - Add repoUpstream() API client method and GitHubRepoUpstreamResult type * fix: complete fork→upstream PR workflow - Server: return defaultBranch from /api/github/repo/upstream endpoint - Server: fix cross-repo head ref construction (compare repos, not remote names) - Server: filterActiveRemoteBranches checks all remotes, not just origin - UI: set targetBaseBranch to upstream's default branch when using detected upstream - UI: include all remote branches in base branch dropdown when using detected upstream - UI: skip base===head check for cross-repo PRs (same branch name on different repos is valid) - Types: add defaultBranch to GitHubRepoUpstreamResult * chore: delete superpowers folder * feat: add (local)/(remote) labels to PR branch display and adapt Repository button to selected remote * feat: Repository button adapts to selected remote (upstream vs origin) * fix: complete fork→upstream PR feature gaps Server: - Extend /api/github/repo/upstream to return defaultBranchSha and remoteName - Reuse headRepo result instead of redundant resolveGitHubRepoFromDirectory call - Return clear error when headRepo is null (invalid GitHub URL) UI: - Add upstream's default branch to availableBaseBranches when using detected upstream - Use upstream's default branch SHA in git log for generate description (fixes 'No commits found in range main...main') - Show qualified names (owner/repo · branch) in base branch dropdown when using detected upstream Types: - Add defaultBranchSha and remoteName to GitHubRepoUpstreamResult * fix: move detectedUpstream state before availableBaseBranches to fix temporal dead zone * fix: fetch upstream branches from GitHub API for base branch dropdown - Add GET /api/github/repo/branches endpoint to fetch branches via Octokit - Add repoBranches() to GitHub API client and interface - Fetch upstream branches on detection and store in upstreamBranches state - Include upstreamBranches in availableBaseBranches when using detected upstream - Re-add availableBaseBranches memo and auto-correction effect that were lost - Remove unnecessary qualified names from dropdown (upstream is already selected) * fix: restore prStatusKey and statusEntry declarations lost during refactor * fix: cleanly re-apply all fork→upstream PR UI changes Restored PullRequestSection.tsx from clean base and re-applied: - Expand detectedUpstream type with defaultBranch, defaultBranchSha, remoteName - Add upstreamBranches state and fetch on upstream detection - Include upstream branches in availableBaseBranches when using detected upstream - Use upstream default branch SHA in generate description (fixes 'No commits found') - Adapt Repository button URL to selected remote - Add (local)/(remote)/(upstream) labels to branch display * fix: move detectedUpstream/upstreamBranches before availableBaseBranches to fix TDZ * style: add pill badge styling to upstream repo source labels * fix: don't cache error PR status responses, allow force-bypass of server cache * fix: resolve PR status cache bugs, stale directory fallback, and upstream re-detection * fix: keep collapse button visible when scrolling long user messages - Collapse button now sticks to top of scrollable user message content instead of scrolling away * fix: checkbox focus ring blends into sidebar background * fix: polish fork PR follow-ups * fix: remove user message collapse artifact * fix: tighten fork PR internals * fix: check all remotes for fork PR status * fix: recover sidebar PR status misses --------- Signed-off-by: Islam Nofl <islamnofl.official@gmail.com> Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
728 lines
41 KiB
TypeScript
728 lines
41 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
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, RiCheckLine, RiCloseLine, RiLoader4Line, 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';
|
|
import { useI18n } from '@/lib/i18n';
|
|
import { useOpenCodeReadiness } from '@/hooks/useOpenCodeReadiness';
|
|
|
|
type ProviderModel = Record<string, unknown> & { id?: string; name?: string };
|
|
|
|
interface ModelSelectorProps {
|
|
providerId: string;
|
|
modelId: string;
|
|
onChange: (providerId: string, modelId: string) => void;
|
|
className?: string;
|
|
allowedProviderIds?: string[];
|
|
placeholder?: 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,
|
|
onChange,
|
|
className,
|
|
allowedProviderIds,
|
|
placeholder
|
|
}) => {
|
|
const { t } = useI18n();
|
|
const { isReady, isUnavailable } = useOpenCodeReadiness();
|
|
const providers = useConfigStore((state) => state.providers);
|
|
const modelsMetadata = useConfigStore((state) => state.modelsMetadata);
|
|
const isMobile = useUIStore(state => state.isMobile);
|
|
const hiddenModels = useUIStore(state => state.hiddenModels);
|
|
const toggleFavoriteModel = useUIStore((state) => state.toggleFavoriteModel);
|
|
const isFavoriteModel = useUIStore((state) => state.isFavoriteModel);
|
|
const addRecentModel = useUIStore((state) => state.addRecentModel);
|
|
const { favoriteModelsList, recentModelsList } = useModelLists();
|
|
const { isMobile: deviceIsMobile } = useDeviceInfo();
|
|
const isActuallyMobile = isMobile || deviceIsMobile;
|
|
|
|
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<(HTMLElement | null)[]>([]);
|
|
|
|
const allowedProviderSet = React.useMemo(() => {
|
|
if (!Array.isArray(allowedProviderIds) || allowedProviderIds.length === 0) {
|
|
return null;
|
|
}
|
|
return new Set(allowedProviderIds);
|
|
}, [allowedProviderIds]);
|
|
|
|
const visibleProviders = React.useMemo(() => {
|
|
const baseProviders = allowedProviderSet
|
|
? providers.filter((provider) => allowedProviderSet.has(String(provider.id)))
|
|
: providers;
|
|
|
|
return baseProviders
|
|
.map((provider) => {
|
|
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
|
const filteredModels = providerModels.filter((model: ProviderModel) => {
|
|
const modelId = typeof model?.id === 'string' ? model.id : '';
|
|
return !hiddenModels.some(
|
|
(hidden) => hidden.providerID === String(provider.id) && hidden.modelID === modelId
|
|
);
|
|
});
|
|
return { ...provider, models: filteredModels };
|
|
})
|
|
.filter((provider) => provider.models.length > 0);
|
|
}, [providers, allowedProviderSet, hiddenModels]);
|
|
|
|
const closeMobilePanel = () => setIsMobilePanelOpen(false);
|
|
const toggleMobileProviderExpansion = (provId: string) => {
|
|
setExpandedMobileProviders(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(provId)) {
|
|
newSet.delete(provId);
|
|
} else {
|
|
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 || '';
|
|
const nameStr = String(name);
|
|
if (nameStr.length > 40) {
|
|
return nameStr.substring(0, 37) + '...';
|
|
}
|
|
return nameStr;
|
|
};
|
|
|
|
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);
|
|
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);
|
|
|
|
const showProviderLogo = keyPrefix === 'fav' || keyPrefix === 'recent';
|
|
|
|
return (
|
|
<DropdownMenuItem
|
|
key={`${keyPrefix}-${provID}-${modID}`}
|
|
ref={(el) => { itemRefs.current[flatIndex] = el; }}
|
|
className={cn(
|
|
"group flex items-center gap-2",
|
|
isHighlighted && "bg-interactive-selection"
|
|
)}
|
|
onSelect={() => handleProviderAndModelChange(provID, modID)}
|
|
onMouseEnter={() => setSelectedIndex(flatIndex)}
|
|
>
|
|
<div className="flex items-center gap-1.5 flex-1 min-w-0">
|
|
{showProviderLogo && (
|
|
<ProviderLogo providerId={provID} className="h-3.5 w-3.5 flex-shrink-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-primary/80",
|
|
isFavorite ? "text-primary" : "text-muted-foreground"
|
|
)}
|
|
aria-label={isFavorite ? t('settings.agents.modelSelector.actions.unfavorite') : t('settings.agents.modelSelector.actions.favorite')}
|
|
title={isFavorite ? t('settings.agents.modelSelector.actions.removeFromFavorites') : t('settings.agents.modelSelector.actions.addToFavorites')}
|
|
>
|
|
{isFavorite ? (
|
|
<RiStarFill className="h-3.5 w-3.5" />
|
|
) : (
|
|
<RiStarLine className="h-3.5 w-3.5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</DropdownMenuItem>
|
|
);
|
|
};
|
|
|
|
// Filter data for desktop dropdown
|
|
const filteredFavorites = favoriteModelsList.filter(({ model, providerID }) => {
|
|
if (allowedProviderSet && !allowedProviderSet.has(providerID)) {
|
|
return false;
|
|
}
|
|
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 }) => {
|
|
if (allowedProviderSet && !allowedProviderSet.has(providerID)) {
|
|
return false;
|
|
}
|
|
const provider = providers.find(p => p.id === providerID);
|
|
const providerName = provider?.name || providerID;
|
|
const modelName = getModelDisplayName(model);
|
|
return filterByQuery(modelName, providerName);
|
|
});
|
|
|
|
const filteredProviders = visibleProviders
|
|
.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;
|
|
|
|
return (
|
|
<MobileOverlayPanel
|
|
open={isMobilePanelOpen}
|
|
onClose={closeMobilePanel}
|
|
title={t('settings.agents.modelSelector.title')}
|
|
>
|
|
<div className="space-y-1">
|
|
{/* Favorites Section for Mobile */}
|
|
{favoriteModelsList.length > 0 && (
|
|
<div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] mb-2">
|
|
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
{t('settings.agents.modelSelector.section.favorites')}
|
|
</div>
|
|
<div className="border-t border-border/20">
|
|
{favoriteModelsList.map(({ model, providerID, modelID }) => {
|
|
const isSelectedModel = providerID === providerId && modelID === modelId;
|
|
|
|
return (
|
|
<div
|
|
key={`fav-mobile-${providerID}-${modelID}`}
|
|
className={cn(
|
|
'flex w-full items-center justify-between px-2 py-1.5 text-left',
|
|
'typography-meta',
|
|
isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="flex-1 flex flex-col min-w-0 mr-2"
|
|
onClick={() => {
|
|
handleProviderAndModelChange(providerID, modelID);
|
|
closeMobilePanel();
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<ProviderLogo
|
|
providerId={providerID}
|
|
className="h-3 w-3 flex-shrink-0"
|
|
/>
|
|
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleFavoriteModel(providerID, modelID);
|
|
}}
|
|
className="model-favorite-button flex h-8 w-8 items-center justify-center text-primary hover:text-primary/80 active:scale-95 touch-manipulation"
|
|
aria-label={t('settings.agents.modelSelector.actions.unfavorite')}
|
|
>
|
|
<RiStarFill className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Recents Section for Mobile */}
|
|
{recentModelsList.length > 0 && (
|
|
<div className="rounded-xl border border-border/40 bg-[var(--surface-elevated)] mb-2">
|
|
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
|
{t('settings.agents.modelSelector.section.recents')}
|
|
</div>
|
|
<div className="border-t border-border/20">
|
|
{recentModelsList.map(({ model, providerID, modelID }) => {
|
|
const isSelectedModel = providerID === providerId && modelID === modelId;
|
|
|
|
return (
|
|
<div
|
|
key={`recent-mobile-${providerID}-${modelID}`}
|
|
className={cn(
|
|
'flex w-full items-center justify-between px-2 py-1.5 text-left',
|
|
'typography-meta',
|
|
isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="flex-1 flex flex-col min-w-0 mr-2"
|
|
onClick={() => {
|
|
handleProviderAndModelChange(providerID, modelID);
|
|
closeMobilePanel();
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<ProviderLogo
|
|
providerId={providerID}
|
|
className="h-3 w-3 flex-shrink-0"
|
|
/>
|
|
<span className="font-medium truncate">{getModelDisplayName(model)}</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleFavoriteModel(providerID, modelID);
|
|
}}
|
|
className="model-favorite-button flex h-8 w-8 items-center justify-center text-muted-foreground/50 hover:text-primary/80 active:scale-95 touch-manipulation"
|
|
aria-label={t('settings.agents.modelSelector.actions.favorite')}
|
|
>
|
|
<RiStarLine className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{visibleProviders.map((provider) => {
|
|
const providerModels = Array.isArray(provider.models) ? provider.models : [];
|
|
if (providerModels.length === 0) return null;
|
|
|
|
const isActiveProvider = provider.id === providerId;
|
|
const isExpanded = expandedMobileProviders.has(provider.id);
|
|
|
|
return (
|
|
<div key={provider.id} className="rounded-xl border border-border/40 bg-[var(--surface-elevated)]">
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-between gap-1.5 px-2 py-1.5 text-left"
|
|
onClick={() => toggleMobileProviderExpansion(provider.id)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<ProviderLogo
|
|
providerId={provider.id}
|
|
className="h-3.5 w-3.5"
|
|
/>
|
|
<span className="typography-meta font-medium text-foreground">
|
|
{provider.name}
|
|
</span>
|
|
{isActiveProvider && (
|
|
<span className="typography-micro text-primary/80">{t('settings.agents.modelSelector.badge.current')}</span>
|
|
)}
|
|
</div>
|
|
{isExpanded ? (
|
|
<RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
|
|
) : (
|
|
<RiArrowRightSLine className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
</button>
|
|
|
|
{isExpanded && (
|
|
<div className="border-t border-border/20">
|
|
{providerModels.map((modelItem: ProviderModel) => {
|
|
const isSelectedModel = provider.id === providerId && modelItem.id === modelId;
|
|
|
|
return (
|
|
<div
|
|
key={modelItem.id as string}
|
|
className={cn(
|
|
'flex w-full items-center justify-between px-2 py-1.5 text-left',
|
|
'typography-meta',
|
|
isSelectedModel ? 'bg-primary/10 text-primary' : 'text-foreground'
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="flex-1 flex flex-col min-w-0 mr-2"
|
|
onClick={() => {
|
|
handleProviderAndModelChange(provider.id as string, modelItem.id as string);
|
|
closeMobilePanel();
|
|
}}
|
|
>
|
|
<span className="font-medium truncate">{getModelDisplayName(modelItem)}</span>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleFavoriteModel(provider.id as string, modelItem.id as string);
|
|
}}
|
|
className={cn(
|
|
"flex h-8 w-8 items-center justify-center active:scale-95 touch-manipulation hover:text-primary/80",
|
|
isFavoriteModel(provider.id as string, modelItem.id as string)
|
|
? "text-primary"
|
|
: "text-muted-foreground/50"
|
|
)}
|
|
aria-label={isFavoriteModel(provider.id as string, modelItem.id as string)
|
|
? t('settings.agents.modelSelector.actions.unfavorite')
|
|
: t('settings.agents.modelSelector.actions.favorite')}
|
|
>
|
|
{isFavoriteModel(provider.id as string, modelItem.id as string) ? (
|
|
<RiStarFill className="h-4 w-4" />
|
|
) : (
|
|
<RiStarLine className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
|
|
{isSelectedModel && (
|
|
<div className="h-2 w-2 rounded-full bg-primary" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-between rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left"
|
|
onClick={() => {
|
|
handleProviderAndModelChange('', '');
|
|
closeMobilePanel();
|
|
}}
|
|
>
|
|
<span className="typography-meta text-muted-foreground">{placeholder || t('settings.agents.modelSelector.noModelOptional')}</span>
|
|
</button>
|
|
</div>
|
|
</MobileOverlayPanel>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{isActuallyMobile ? (
|
|
<button
|
|
type="button"
|
|
onClick={isReady ? () => setIsMobilePanelOpen(true) : undefined}
|
|
disabled={!isReady}
|
|
className={cn(
|
|
'flex w-full items-center justify-between gap-2 rounded-lg border border-border/40 bg-[var(--surface-elevated)] px-2 py-1.5 text-left',
|
|
!isReady && 'opacity-60 cursor-not-allowed',
|
|
className
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{!isReady ? (
|
|
<>
|
|
<RiLoader4Line className="h-3.5 w-3.5 animate-spin text-muted-foreground" />
|
|
<span className="typography-meta text-muted-foreground">{isUnavailable ? t('common.unavailable') : t('common.loading')}</span>
|
|
</>
|
|
) : providerId ? (
|
|
<ProviderLogo
|
|
providerId={providerId}
|
|
className="h-3.5 w-3.5"
|
|
/>
|
|
) : (
|
|
<RiPencilAiLine className="h-3 w-3 text-muted-foreground" />
|
|
)}
|
|
{isReady && (
|
|
<span className="typography-meta font-medium text-foreground">
|
|
{providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.selectPlaceholder'))}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<RiArrowDownSLine className="h-3 w-3 text-muted-foreground" />
|
|
</button>
|
|
) : (
|
|
<DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
|
|
<DropdownMenuTrigger asChild>
|
|
<div className={cn(
|
|
'border-input data-[placeholder]:text-muted-foreground flex items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none hover:bg-interactive-hover data-[popup-open]:bg-interactive-active h-6 w-fit',
|
|
className
|
|
)}>
|
|
{!isReady ? (
|
|
<>
|
|
<RiLoader4Line className="h-3.5 w-3.5 animate-spin text-muted-foreground flex-shrink-0" />
|
|
<span className="typography-ui-label font-normal whitespace-nowrap text-muted-foreground">
|
|
{isUnavailable ? t('common.unavailable') : t('common.loading')}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
{providerId ? (
|
|
<>
|
|
<ProviderLogo
|
|
providerId={providerId}
|
|
className="h-3.5 w-3.5 flex-shrink-0"
|
|
/>
|
|
<RiPencilAiLine className="h-3 w-3 text-primary/60 hidden" />
|
|
</>
|
|
) : (
|
|
<RiPencilAiLine className="h-3.5 w-3.5 text-muted-foreground" />
|
|
)}
|
|
<span className="typography-ui-label font-normal whitespace-nowrap text-foreground">
|
|
{providerId && modelId ? `${providerId}/${modelId}` : (placeholder || t('settings.agents.modelSelector.notSelected'))}
|
|
</span>
|
|
</>
|
|
)}
|
|
<RiArrowDownSLine className="h-4 w-4 flex-shrink-0 text-muted-foreground/50" />
|
|
</div>
|
|
</DropdownMenuTrigger>
|
|
<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' });
|
|
});
|
|
});
|
|
|
|
const totalItems = flatModelList.length;
|
|
|
|
// Handle keyboard navigation
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
e.stopPropagation();
|
|
|
|
if (e.key === 'ArrowDown') {
|
|
e.preventDefault();
|
|
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();
|
|
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();
|
|
const selectedItem = flatModelList[selectedIndex];
|
|
if (selectedItem) {
|
|
handleProviderAndModelChange(selectedItem.providerID, selectedItem.modelID);
|
|
}
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
setIsDropdownOpen(false);
|
|
}
|
|
};
|
|
|
|
let currentFlatIndex = 0;
|
|
|
|
return (
|
|
<>
|
|
{/* 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={t('settings.agents.modelSelector.searchPlaceholder')}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
className="pl-8 h-8 typography-meta"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scrollable content */}
|
|
<ScrollableOverlay outerClassName="max-h-[min(400px,calc(100dvh-12rem))] flex-1">
|
|
<div className="p-1">
|
|
{/* Not selected option */}
|
|
<DropdownMenuItem
|
|
className={cn(
|
|
"flex items-center gap-2",
|
|
)}
|
|
onSelect={() => handleProviderAndModelChange('', '')}
|
|
>
|
|
<RiCloseLine className="h-3.5 w-3.5 text-muted-foreground" />
|
|
<span className="text-muted-foreground">{placeholder || t('settings.agents.modelSelector.notSelected')}</span>
|
|
{!providerId && !modelId && (
|
|
<RiCheckLine className="h-4 w-4 text-primary ml-auto" />
|
|
)}
|
|
</DropdownMenuItem>
|
|
|
|
<DropdownMenuSeparator />
|
|
|
|
{!hasResults && searchQuery && (
|
|
<div className="px-2 py-4 text-center typography-meta text-muted-foreground">
|
|
{t('settings.agents.modelSelector.state.noModelsFound')}
|
|
</div>
|
|
)}
|
|
|
|
{/* Favorites Section */}
|
|
{filteredFavorites.length > 0 && (
|
|
<div>
|
|
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30">
|
|
<RiStarFill className="h-4 w-4 text-primary" />
|
|
{t('settings.agents.modelSelector.section.favorites')}
|
|
</DropdownMenuLabel>
|
|
{filteredFavorites.map(({ model, providerID, modelID }) => {
|
|
const idx = currentFlatIndex++;
|
|
return renderModelRow(model, providerID, modelID, 'fav', idx, selectedIndex === idx);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Recents Section */}
|
|
{filteredRecents.length > 0 && (
|
|
<div>
|
|
{filteredFavorites.length > 0 && <DropdownMenuSeparator />}
|
|
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30">
|
|
<RiTimeLine className="h-4 w-4" />
|
|
{t('settings.agents.modelSelector.section.recent')}
|
|
</DropdownMenuLabel>
|
|
{filteredRecents.map(({ model, providerID, modelID }) => {
|
|
const idx = currentFlatIndex++;
|
|
return renderModelRow(model, providerID, modelID, 'recent', idx, selectedIndex === idx);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Separator before providers */}
|
|
{(filteredFavorites.length > 0 || filteredRecents.length > 0) && filteredProviders.length > 0 && (
|
|
<DropdownMenuSeparator />
|
|
)}
|
|
|
|
{/* All Providers - Flat List */}
|
|
{filteredProviders.map((provider, index) => (
|
|
<div key={provider.id}>
|
|
{index > 0 && <DropdownMenuSeparator />}
|
|
<DropdownMenuLabel className="typography-micro font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-2 -mx-1 px-3 py-1.5 border-b border-border/30">
|
|
<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);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollableOverlay>
|
|
|
|
{/* Keyboard hints footer */}
|
|
<div className="px-3 pt-1 pb-1.5 border-t border-border/40 typography-micro text-muted-foreground">
|
|
{t('settings.agents.modelSelector.keyboardHints')}
|
|
</div>
|
|
</>
|
|
);
|
|
})()}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)}
|
|
{renderMobileModelPanel()}
|
|
</>
|
|
);
|
|
};
|