635 lines
20 KiB
TypeScript
635 lines
20 KiB
TypeScript
// Import useInput from vendored Ink for bracketed paste support
|
|
import { Box, Text, useInput } from "ink";
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import {
|
|
clearAvailableModelsCache,
|
|
getAvailableModelHandles,
|
|
getAvailableModelsCacheInfo,
|
|
} from "../../agent/available-models";
|
|
import { models } from "../../agent/model";
|
|
import { useTerminalWidth } from "../hooks/useTerminalWidth";
|
|
import { colors } from "./colors";
|
|
|
|
// Horizontal line character (matches approval dialogs)
|
|
const SOLID_LINE = "─";
|
|
|
|
const VISIBLE_ITEMS = 8;
|
|
|
|
type ModelCategory = "supported" | "byok" | "byok-all" | "all";
|
|
|
|
// BYOK provider prefixes (ChatGPT OAuth + lc-* providers from /connect)
|
|
const BYOK_PROVIDER_PREFIXES = ["chatgpt-plus-pro/", "lc-"];
|
|
|
|
// Get tab order based on billing tier (free = BYOK first, paid = BYOK last)
|
|
function getModelCategories(billingTier?: string): ModelCategory[] {
|
|
const isFreeTier = billingTier?.toLowerCase() === "free";
|
|
return isFreeTier
|
|
? ["byok", "byok-all", "supported", "all"]
|
|
: ["supported", "all", "byok", "byok-all"];
|
|
}
|
|
|
|
type UiModel = {
|
|
id: string;
|
|
handle: string;
|
|
label: string;
|
|
description: string;
|
|
isDefault?: boolean;
|
|
isFeatured?: boolean;
|
|
free?: boolean;
|
|
updateArgs?: Record<string, unknown>;
|
|
};
|
|
|
|
interface ModelSelectorProps {
|
|
currentModelId?: string;
|
|
onSelect: (modelId: string) => void;
|
|
onCancel: () => void;
|
|
/** Filter models to only show those matching this provider prefix (e.g., "chatgpt-plus-pro") */
|
|
filterProvider?: string;
|
|
/** Force refresh the models list on mount */
|
|
forceRefresh?: boolean;
|
|
/** User's billing tier - affects tab ordering (free = BYOK first) */
|
|
billingTier?: string;
|
|
}
|
|
|
|
export function ModelSelector({
|
|
currentModelId,
|
|
onSelect,
|
|
onCancel,
|
|
filterProvider,
|
|
forceRefresh: forceRefreshOnMount,
|
|
billingTier,
|
|
}: ModelSelectorProps) {
|
|
const terminalWidth = useTerminalWidth();
|
|
const solidLine = SOLID_LINE.repeat(Math.max(terminalWidth, 10));
|
|
const typedModels = models as UiModel[];
|
|
|
|
// Tab order depends on billing tier (free = BYOK first)
|
|
const modelCategories = useMemo(
|
|
() => getModelCategories(billingTier),
|
|
[billingTier],
|
|
);
|
|
const defaultCategory = modelCategories[0] ?? "supported";
|
|
|
|
const [category, setCategory] = useState<ModelCategory>(defaultCategory);
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
|
|
// undefined: not loaded yet (show spinner)
|
|
// Set<string>: loaded and filtered
|
|
// null: error fallback (show all models + warning)
|
|
const [availableHandles, setAvailableHandles] = useState<
|
|
Set<string> | null | undefined
|
|
>(undefined);
|
|
const [allApiHandles, setAllApiHandles] = useState<string[]>([]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isCached, setIsCached] = useState(false);
|
|
const [refreshing, setRefreshing] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
const mountedRef = useRef(true);
|
|
useEffect(() => {
|
|
mountedRef.current = true;
|
|
return () => {
|
|
mountedRef.current = false;
|
|
};
|
|
}, []);
|
|
|
|
// Fetch available models from the API (with caching + inflight dedupe)
|
|
const loadModels = useRef(async (forceRefresh = false) => {
|
|
try {
|
|
if (forceRefresh) {
|
|
clearAvailableModelsCache();
|
|
if (mountedRef.current) {
|
|
setRefreshing(true);
|
|
setError(null);
|
|
}
|
|
}
|
|
|
|
const cacheInfoBefore = getAvailableModelsCacheInfo();
|
|
const result = await getAvailableModelHandles({ forceRefresh });
|
|
|
|
if (!mountedRef.current) return;
|
|
|
|
setAvailableHandles(result.handles);
|
|
setAllApiHandles(Array.from(result.handles));
|
|
setIsCached(!forceRefresh && cacheInfoBefore.isFresh);
|
|
setIsLoading(false);
|
|
setRefreshing(false);
|
|
} catch (err) {
|
|
if (!mountedRef.current) return;
|
|
setError(err instanceof Error ? err.message : "Failed to load models");
|
|
setIsLoading(false);
|
|
setRefreshing(false);
|
|
// Fallback: show all models if API fails
|
|
setAvailableHandles(null);
|
|
setAllApiHandles([]);
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
loadModels.current(forceRefreshOnMount ?? false);
|
|
}, [forceRefreshOnMount]);
|
|
|
|
// Handles from models.json (for filtering "all" category)
|
|
const staticModelHandles = useMemo(
|
|
() => new Set(typedModels.map((m) => m.handle)),
|
|
[typedModels],
|
|
);
|
|
|
|
// Supported models: models.json entries that are available
|
|
// Featured models first, then non-featured, preserving JSON order within each group
|
|
// If filterProvider is set, only show models from that provider
|
|
// For free tier, free models go first
|
|
const isFreeTier = billingTier?.toLowerCase() === "free";
|
|
const supportedModels = useMemo(() => {
|
|
if (availableHandles === undefined) return [];
|
|
let available =
|
|
availableHandles === null
|
|
? typedModels // fallback
|
|
: typedModels.filter((m) => availableHandles.has(m.handle));
|
|
// Apply provider filter if specified
|
|
if (filterProvider) {
|
|
available = available.filter((m) =>
|
|
m.handle.startsWith(`${filterProvider}/`),
|
|
);
|
|
}
|
|
// Apply search filter
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
available = available.filter(
|
|
(m) =>
|
|
m.label.toLowerCase().includes(query) ||
|
|
m.description.toLowerCase().includes(query) ||
|
|
m.handle.toLowerCase().includes(query),
|
|
);
|
|
}
|
|
|
|
// For free tier, put free models first, then others with standard ordering
|
|
if (isFreeTier) {
|
|
const freeModels = available.filter((m) => m.free);
|
|
const paidModels = available.filter((m) => !m.free);
|
|
const featured = paidModels.filter((m) => m.isFeatured);
|
|
const nonFeatured = paidModels.filter((m) => !m.isFeatured);
|
|
return [...freeModels, ...featured, ...nonFeatured];
|
|
}
|
|
|
|
const featured = available.filter((m) => m.isFeatured);
|
|
const nonFeatured = available.filter((m) => !m.isFeatured);
|
|
return [...featured, ...nonFeatured];
|
|
}, [typedModels, availableHandles, filterProvider, searchQuery, isFreeTier]);
|
|
|
|
// BYOK models: models from chatgpt-plus-pro or lc-* providers
|
|
const isByokHandle = useCallback(
|
|
(handle: string) =>
|
|
BYOK_PROVIDER_PREFIXES.some((prefix) => handle.startsWith(prefix)),
|
|
[],
|
|
);
|
|
|
|
// All other models: API handles not in models.json and not BYOK
|
|
const otherModelHandles = useMemo(() => {
|
|
const filtered = allApiHandles.filter(
|
|
(handle) => !staticModelHandles.has(handle) && !isByokHandle(handle),
|
|
);
|
|
if (!searchQuery) return filtered;
|
|
const query = searchQuery.toLowerCase();
|
|
return filtered.filter((handle) => handle.toLowerCase().includes(query));
|
|
}, [allApiHandles, staticModelHandles, searchQuery, isByokHandle]);
|
|
|
|
// Provider name mappings for BYOK -> models.json lookup
|
|
// Maps BYOK provider prefix to models.json provider prefix
|
|
const BYOK_PROVIDER_ALIASES: Record<string, string> = {
|
|
"lc-anthropic": "anthropic",
|
|
"lc-openai": "openai",
|
|
"lc-zai": "zai",
|
|
"lc-gemini": "google_ai",
|
|
"chatgpt-plus-pro": "chatgpt-plus-pro", // No change needed
|
|
};
|
|
|
|
// Convert BYOK handle to base provider handle for models.json lookup
|
|
// e.g., "lc-anthropic/claude-3-5-haiku" -> "anthropic/claude-3-5-haiku"
|
|
// e.g., "lc-gemini/gemini-2.0-flash" -> "google_ai/gemini-2.0-flash"
|
|
const toBaseHandle = useCallback((handle: string): string => {
|
|
const slashIndex = handle.indexOf("/");
|
|
if (slashIndex === -1) return handle;
|
|
|
|
const provider = handle.slice(0, slashIndex);
|
|
const model = handle.slice(slashIndex + 1);
|
|
const baseProvider = BYOK_PROVIDER_ALIASES[provider];
|
|
|
|
if (baseProvider) {
|
|
return `${baseProvider}/${model}`;
|
|
}
|
|
return handle;
|
|
}, []);
|
|
|
|
// BYOK (recommended): BYOK API handles that have matching entries in models.json
|
|
const byokModels = useMemo(() => {
|
|
if (availableHandles === undefined) return [];
|
|
|
|
// Get all BYOK handles from API
|
|
const byokHandles = allApiHandles.filter(isByokHandle);
|
|
|
|
// Find models.json entries that match (using alias for lc-* providers)
|
|
const matched: UiModel[] = [];
|
|
for (const handle of byokHandles) {
|
|
const baseHandle = toBaseHandle(handle);
|
|
const staticModel = typedModels.find((m) => m.handle === baseHandle);
|
|
if (staticModel) {
|
|
// Use models.json data but with the BYOK handle as the ID
|
|
matched.push({
|
|
...staticModel,
|
|
id: handle,
|
|
handle: handle,
|
|
});
|
|
}
|
|
}
|
|
|
|
// Apply search filter
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
return matched.filter(
|
|
(m) =>
|
|
m.label.toLowerCase().includes(query) ||
|
|
m.description.toLowerCase().includes(query) ||
|
|
m.handle.toLowerCase().includes(query),
|
|
);
|
|
}
|
|
|
|
return matched;
|
|
}, [
|
|
availableHandles,
|
|
allApiHandles,
|
|
typedModels,
|
|
searchQuery,
|
|
isByokHandle,
|
|
toBaseHandle,
|
|
]);
|
|
|
|
// BYOK (all): BYOK handles from API that don't have matching models.json entries
|
|
const byokAllModels = useMemo(() => {
|
|
if (availableHandles === undefined) return [];
|
|
|
|
// Get BYOK handles that don't have a match in models.json (using alias)
|
|
const byokHandles = allApiHandles.filter((handle) => {
|
|
if (!isByokHandle(handle)) return false;
|
|
const baseHandle = toBaseHandle(handle);
|
|
// Exclude if there's a matching entry in models.json
|
|
return !staticModelHandles.has(baseHandle);
|
|
});
|
|
|
|
// Apply search filter
|
|
let filtered = byokHandles;
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
filtered = byokHandles.filter((handle) =>
|
|
handle.toLowerCase().includes(query),
|
|
);
|
|
}
|
|
|
|
return filtered;
|
|
}, [
|
|
availableHandles,
|
|
allApiHandles,
|
|
staticModelHandles,
|
|
searchQuery,
|
|
isByokHandle,
|
|
toBaseHandle,
|
|
]);
|
|
|
|
// Get the list for current category
|
|
const currentList: UiModel[] = useMemo(() => {
|
|
if (category === "supported") {
|
|
return supportedModels;
|
|
}
|
|
if (category === "byok") {
|
|
return byokModels;
|
|
}
|
|
if (category === "byok-all") {
|
|
// Convert raw handles to UiModel
|
|
return byokAllModels.map((handle) => ({
|
|
id: handle,
|
|
handle,
|
|
label: handle,
|
|
description: "",
|
|
}));
|
|
}
|
|
// For "all" category, convert handles to simple UiModel objects
|
|
return otherModelHandles.map((handle) => ({
|
|
id: handle,
|
|
handle,
|
|
label: handle,
|
|
description: "",
|
|
}));
|
|
}, [category, supportedModels, byokModels, byokAllModels, otherModelHandles]);
|
|
|
|
// Show 1 fewer item because Search line takes space
|
|
const visibleCount = VISIBLE_ITEMS - 1;
|
|
|
|
// Scrolling - keep selectedIndex in view
|
|
const startIndex = useMemo(() => {
|
|
// Keep selected item in the visible window
|
|
if (selectedIndex < visibleCount) return 0;
|
|
return Math.min(
|
|
selectedIndex - visibleCount + 1,
|
|
Math.max(0, currentList.length - visibleCount),
|
|
);
|
|
}, [selectedIndex, currentList.length, visibleCount]);
|
|
|
|
const visibleModels = useMemo(() => {
|
|
return currentList.slice(startIndex, startIndex + visibleCount);
|
|
}, [currentList, startIndex, visibleCount]);
|
|
|
|
const showScrollDown = startIndex + visibleCount < currentList.length;
|
|
const itemsBelow = currentList.length - startIndex - visibleCount;
|
|
|
|
// Reset selection when category changes
|
|
const cycleCategory = useCallback(() => {
|
|
setCategory((current) => {
|
|
const idx = modelCategories.indexOf(current);
|
|
return modelCategories[
|
|
(idx + 1) % modelCategories.length
|
|
] as ModelCategory;
|
|
});
|
|
setSelectedIndex(0);
|
|
setSearchQuery("");
|
|
}, [modelCategories]);
|
|
|
|
// Set initial selection to current model on mount
|
|
const initializedRef = useRef(false);
|
|
useEffect(() => {
|
|
if (!initializedRef.current && currentList.length > 0) {
|
|
const index = currentList.findIndex((m) => m.id === currentModelId);
|
|
if (index >= 0) {
|
|
setSelectedIndex(index);
|
|
}
|
|
initializedRef.current = true;
|
|
}
|
|
}, [currentList, currentModelId]);
|
|
|
|
// Clamp selectedIndex when list changes
|
|
useEffect(() => {
|
|
if (selectedIndex >= currentList.length && currentList.length > 0) {
|
|
setSelectedIndex(currentList.length - 1);
|
|
}
|
|
}, [selectedIndex, currentList.length]);
|
|
|
|
useInput(
|
|
(input, key) => {
|
|
// CTRL-C: immediately cancel (bypasses search clearing)
|
|
if (key.ctrl && input === "c") {
|
|
onCancel();
|
|
return;
|
|
}
|
|
|
|
// Handle ESC: clear search first if active, otherwise cancel
|
|
if (key.escape) {
|
|
if (searchQuery) {
|
|
setSearchQuery("");
|
|
setSelectedIndex(0);
|
|
} else {
|
|
onCancel();
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Allow 'r' to refresh even while loading (but not while already refreshing)
|
|
if (input === "r" && !refreshing && !searchQuery) {
|
|
loadModels.current(true);
|
|
return;
|
|
}
|
|
|
|
// Tab or left/right arrows to switch categories
|
|
if (key.tab || key.rightArrow) {
|
|
cycleCategory();
|
|
return;
|
|
}
|
|
|
|
if (key.leftArrow) {
|
|
// Cycle backwards through categories
|
|
setCategory((current) => {
|
|
const idx = modelCategories.indexOf(current);
|
|
return modelCategories[
|
|
idx === 0 ? modelCategories.length - 1 : idx - 1
|
|
] as ModelCategory;
|
|
});
|
|
setSelectedIndex(0);
|
|
setSearchQuery("");
|
|
return;
|
|
}
|
|
|
|
// Handle backspace for search
|
|
if (key.backspace || key.delete) {
|
|
if (searchQuery) {
|
|
setSearchQuery((prev) => prev.slice(0, -1));
|
|
setSelectedIndex(0);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Capture text input for search (allow typing even with 0 results)
|
|
// Exclude special keys like Enter, arrows, etc.
|
|
if (
|
|
input &&
|
|
input.length === 1 &&
|
|
!key.ctrl &&
|
|
!key.meta &&
|
|
!key.return &&
|
|
!key.upArrow &&
|
|
!key.downArrow
|
|
) {
|
|
setSearchQuery((prev) => prev + input);
|
|
setSelectedIndex(0);
|
|
return;
|
|
}
|
|
|
|
// Disable navigation/selection while loading or no results
|
|
if (isLoading || refreshing || currentList.length === 0) {
|
|
return;
|
|
}
|
|
|
|
if (key.upArrow) {
|
|
setSelectedIndex((prev) => Math.max(0, prev - 1));
|
|
} else if (key.downArrow) {
|
|
setSelectedIndex((prev) => Math.min(currentList.length - 1, prev + 1));
|
|
} else if (key.return) {
|
|
const selectedModel = currentList[selectedIndex];
|
|
if (selectedModel) {
|
|
onSelect(selectedModel.id);
|
|
}
|
|
}
|
|
},
|
|
// Keep active so ESC and 'r' work while loading.
|
|
{ isActive: true },
|
|
);
|
|
|
|
const getCategoryLabel = (cat: ModelCategory) => {
|
|
if (cat === "supported") return `Letta API [${supportedModels.length}]`;
|
|
if (cat === "byok") return `BYOK [${byokModels.length}]`;
|
|
if (cat === "byok-all") return `BYOK (all) [${byokAllModels.length}]`;
|
|
return `Letta API (all) [${otherModelHandles.length}]`;
|
|
};
|
|
|
|
const getCategoryDescription = (cat: ModelCategory) => {
|
|
if (cat === "supported") {
|
|
return isFreeTier
|
|
? "Upgrade your account to access more models"
|
|
: "Recommended models on the Letta API";
|
|
}
|
|
if (cat === "byok")
|
|
return "Recommended models via your API keys (use /connect to add more)";
|
|
if (cat === "byok-all")
|
|
return "All models via your API keys (use /connect to add more)";
|
|
if (cat === "all") {
|
|
return isFreeTier
|
|
? "Upgrade your account to access more models"
|
|
: "All models on the Letta API";
|
|
}
|
|
return "All models on the Letta API";
|
|
};
|
|
|
|
// Render tab bar (matches AgentSelector style)
|
|
const renderTabBar = () => (
|
|
<Box flexDirection="row" gap={2}>
|
|
{modelCategories.map((cat) => {
|
|
const isActive = cat === category;
|
|
return (
|
|
<Text
|
|
key={cat}
|
|
backgroundColor={
|
|
isActive ? colors.selector.itemHighlighted : undefined
|
|
}
|
|
color={isActive ? "black" : undefined}
|
|
bold={isActive}
|
|
>
|
|
{` ${getCategoryLabel(cat)} `}
|
|
</Text>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
|
|
return (
|
|
<Box flexDirection="column">
|
|
{/* Command header */}
|
|
<Text dimColor>{"> /model"}</Text>
|
|
<Text dimColor>{solidLine}</Text>
|
|
|
|
<Box height={1} />
|
|
|
|
{/* Title and tabs */}
|
|
<Box flexDirection="column" gap={1} marginBottom={1}>
|
|
<Text bold color={colors.selector.title}>
|
|
Swap your agent's model
|
|
</Text>
|
|
{!isLoading && !refreshing && (
|
|
<Box flexDirection="column" paddingLeft={1}>
|
|
{renderTabBar()}
|
|
<Text dimColor> {getCategoryDescription(category)}</Text>
|
|
<Text>
|
|
<Text dimColor> Search: </Text>
|
|
{searchQuery ? (
|
|
<Text>{searchQuery}</Text>
|
|
) : (
|
|
<Text dimColor>(type to filter)</Text>
|
|
)}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
|
|
{/* Loading states */}
|
|
{isLoading && (
|
|
<Box paddingLeft={2}>
|
|
<Text dimColor>Loading available models...</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{refreshing && (
|
|
<Box paddingLeft={2}>
|
|
<Text dimColor>Refreshing models...</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{error && (
|
|
<Box paddingLeft={2}>
|
|
<Text color="yellow">
|
|
Warning: Could not fetch available models. Showing all models.
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{!isLoading && !refreshing && visibleModels.length === 0 && (
|
|
<Box paddingLeft={2}>
|
|
<Text dimColor>
|
|
{category === "supported"
|
|
? "No supported models available."
|
|
: "No additional models available."}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Model list */}
|
|
<Box flexDirection="column">
|
|
{visibleModels.map((model, index) => {
|
|
const actualIndex = startIndex + index;
|
|
const isSelected = actualIndex === selectedIndex;
|
|
const isCurrent = model.id === currentModelId;
|
|
// Show lock for non-free models when on free tier (only for Letta API tabs)
|
|
const showLock =
|
|
isFreeTier &&
|
|
!model.free &&
|
|
(category === "supported" || category === "all");
|
|
|
|
return (
|
|
<Box key={model.id} flexDirection="row">
|
|
<Text
|
|
color={isSelected ? colors.selector.itemHighlighted : undefined}
|
|
>
|
|
{isSelected ? "> " : " "}
|
|
</Text>
|
|
{showLock && <Text dimColor>🔒 </Text>}
|
|
<Text
|
|
bold={isSelected}
|
|
color={
|
|
isSelected
|
|
? colors.selector.itemHighlighted
|
|
: isCurrent
|
|
? colors.selector.itemCurrent
|
|
: undefined
|
|
}
|
|
>
|
|
{model.label}
|
|
{isCurrent && <Text> (current)</Text>}
|
|
</Text>
|
|
{model.description && (
|
|
<Text dimColor> · {model.description}</Text>
|
|
)}
|
|
</Box>
|
|
);
|
|
})}
|
|
{showScrollDown ? (
|
|
<Text dimColor>
|
|
{" "}↓ {itemsBelow} more below
|
|
</Text>
|
|
) : currentList.length > visibleCount ? (
|
|
<Text> </Text>
|
|
) : null}
|
|
</Box>
|
|
|
|
{/* Footer */}
|
|
{!isLoading && !refreshing && currentList.length > 0 && (
|
|
<Box flexDirection="column" marginTop={1}>
|
|
<Text dimColor>
|
|
{" "}
|
|
{currentList.length} models{isCached ? " · cached" : ""} · R to
|
|
refresh
|
|
</Text>
|
|
<Text dimColor>
|
|
{" "}Enter select · ↑↓ navigate · ←→/Tab switch · Esc cancel
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|