359 lines
13 KiB
JavaScript
359 lines
13 KiB
JavaScript
"use client";
|
|
|
|
import { useState, useMemo, useEffect } from "react";
|
|
import PropTypes from "prop-types";
|
|
import Modal from "./Modal";
|
|
import { getModelsByProviderId, PROVIDER_ID_TO_ALIAS } from "@/shared/constants/models";
|
|
import { OAUTH_PROVIDERS, APIKEY_PROVIDERS, FREE_TIER_PROVIDERS, isOpenAICompatibleProvider, isAnthropicCompatibleProvider } from "@/shared/constants/providers";
|
|
|
|
// Provider order: OAuth first, then Free Tier, then API Key (matches dashboard/providers)
|
|
const PROVIDER_ORDER = [
|
|
...Object.keys(OAUTH_PROVIDERS),
|
|
...Object.keys(FREE_TIER_PROVIDERS),
|
|
...Object.keys(APIKEY_PROVIDERS),
|
|
];
|
|
|
|
export default function ModelSelectModal({
|
|
isOpen,
|
|
onClose,
|
|
onSelect,
|
|
selectedModel,
|
|
activeProviders = [],
|
|
title = "Select Model",
|
|
modelAliases = {},
|
|
}) {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [combos, setCombos] = useState([]);
|
|
const [providerNodes, setProviderNodes] = useState([]);
|
|
|
|
const fetchCombos = async () => {
|
|
try {
|
|
const res = await fetch("/api/combos");
|
|
if (!res.ok) throw new Error(`Failed to fetch combos: ${res.status}`);
|
|
const data = await res.json();
|
|
setCombos(data.combos || []);
|
|
} catch (error) {
|
|
console.error("Error fetching combos:", error);
|
|
setCombos([]);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isOpen) fetchCombos();
|
|
}, [isOpen]);
|
|
|
|
const fetchProviderNodes = async () => {
|
|
try {
|
|
const res = await fetch("/api/provider-nodes");
|
|
if (!res.ok) throw new Error(`Failed to fetch provider nodes: ${res.status}`);
|
|
const data = await res.json();
|
|
setProviderNodes(data.nodes || []);
|
|
} catch (error) {
|
|
console.error("Error fetching provider nodes:", error);
|
|
setProviderNodes([]);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isOpen) fetchProviderNodes();
|
|
}, [isOpen]);
|
|
|
|
const allProviders = useMemo(() => ({ ...OAUTH_PROVIDERS, ...FREE_TIER_PROVIDERS, ...APIKEY_PROVIDERS }), []);
|
|
|
|
// Group models by provider with priority order
|
|
const groupedModels = useMemo(() => {
|
|
const groups = {};
|
|
|
|
// Get all active provider IDs from connections
|
|
const activeConnectionIds = activeProviders.map(p => p.provider);
|
|
|
|
// Only show connected providers (including both standard and custom)
|
|
const providerIdsToShow = new Set([
|
|
...activeConnectionIds, // Only connected providers
|
|
]);
|
|
|
|
// Sort by PROVIDER_ORDER
|
|
const sortedProviderIds = [...providerIdsToShow].sort((a, b) => {
|
|
const indexA = PROVIDER_ORDER.indexOf(a);
|
|
const indexB = PROVIDER_ORDER.indexOf(b);
|
|
return (indexA === -1 ? 999 : indexA) - (indexB === -1 ? 999 : indexB);
|
|
});
|
|
|
|
sortedProviderIds.forEach((providerId) => {
|
|
const alias = PROVIDER_ID_TO_ALIAS[providerId] || providerId;
|
|
const providerInfo = allProviders[providerId] || { name: providerId, color: "#666" };
|
|
const isCustomProvider = isOpenAICompatibleProvider(providerId) || isAnthropicCompatibleProvider(providerId);
|
|
|
|
if (providerInfo.passthroughModels) {
|
|
const aliasModels = Object.entries(modelAliases)
|
|
.filter(([, fullModel]) => fullModel.startsWith(`${alias}/`))
|
|
.map(([aliasName, fullModel]) => ({
|
|
id: fullModel.replace(`${alias}/`, ""),
|
|
name: aliasName,
|
|
value: fullModel,
|
|
}));
|
|
|
|
if (aliasModels.length > 0) {
|
|
// Check for custom name from providerNodes (for compatible providers)
|
|
const matchedNode = providerNodes.find(node => node.id === providerId);
|
|
const displayName = matchedNode?.name || providerInfo.name;
|
|
|
|
groups[providerId] = {
|
|
name: displayName,
|
|
alias: alias,
|
|
color: providerInfo.color,
|
|
models: aliasModels,
|
|
};
|
|
}
|
|
} else if (isCustomProvider) {
|
|
// Find connection object to get prefix synchronously without waiting for providerNodes fetch
|
|
const connection = activeProviders.find(p => p.provider === providerId);
|
|
const matchedNode = providerNodes.find(node => node.id === providerId);
|
|
const displayName = connection?.name || matchedNode?.name || providerInfo.name;
|
|
const nodePrefix = connection?.providerSpecificData?.prefix || matchedNode?.prefix || providerId;
|
|
|
|
// Aliases are stored using the raw providerId as key (e.g. "openai-compatible-chat-<uuid>/glm-4.7"),
|
|
// so we must filter by providerId, not by the display prefix.
|
|
const nodeModels = Object.entries(modelAliases)
|
|
.filter(([, fullModel]) => fullModel.startsWith(`${providerId}/`))
|
|
.map(([aliasName, fullModel]) => ({
|
|
id: fullModel.replace(`${providerId}/`, ""),
|
|
name: aliasName,
|
|
value: `${nodePrefix}/${fullModel.replace(`${providerId}/`, "")}`,
|
|
}));
|
|
|
|
// Always show compatible providers that are connected, even with no aliases.
|
|
// When no aliases exist, show a placeholder so users know it's available.
|
|
const modelsToShow = nodeModels.length > 0 ? nodeModels : [{
|
|
id: `__placeholder__${providerId}`,
|
|
name: `${nodePrefix}/model-id`,
|
|
value: `${nodePrefix}/model-id`,
|
|
isPlaceholder: true,
|
|
}];
|
|
|
|
groups[providerId] = {
|
|
name: displayName,
|
|
alias: nodePrefix,
|
|
color: providerInfo.color,
|
|
models: modelsToShow,
|
|
isCustom: true,
|
|
hasModels: nodeModels.length > 0,
|
|
};
|
|
} else {
|
|
const hardcodedModels = getModelsByProviderId(providerId);
|
|
const hardcodedIds = new Set(hardcodedModels.map((m) => m.id));
|
|
|
|
// Custom models: if no hardcoded models (e.g. openrouter), show all aliases for this provider
|
|
// Otherwise only show aliases where aliasName === modelId ("Add Model" button pattern)
|
|
const hasHardcoded = hardcodedModels.length > 0;
|
|
const customModels = Object.entries(modelAliases)
|
|
.filter(([aliasName, fullModel]) =>
|
|
fullModel.startsWith(`${alias}/`) &&
|
|
(hasHardcoded ? aliasName === fullModel.replace(`${alias}/`, "") : true) &&
|
|
!hardcodedIds.has(fullModel.replace(`${alias}/`, ""))
|
|
)
|
|
.map(([aliasName, fullModel]) => {
|
|
const modelId = fullModel.replace(`${alias}/`, "");
|
|
return { id: modelId, name: aliasName, value: fullModel, isCustom: true };
|
|
});
|
|
|
|
const allModels = [
|
|
...hardcodedModels.map((m) => ({ id: m.id, name: m.name, value: `${alias}/${m.id}` })),
|
|
...customModels,
|
|
];
|
|
|
|
if (allModels.length > 0) {
|
|
groups[providerId] = {
|
|
name: providerInfo.name,
|
|
alias: alias,
|
|
color: providerInfo.color,
|
|
models: allModels,
|
|
};
|
|
}
|
|
}
|
|
});
|
|
|
|
return groups;
|
|
}, [activeProviders, modelAliases, allProviders, providerNodes]);
|
|
|
|
// Filter combos by search query
|
|
const filteredCombos = useMemo(() => {
|
|
if (!searchQuery.trim()) return combos;
|
|
const query = searchQuery.toLowerCase();
|
|
return combos.filter(c => c.name.toLowerCase().includes(query));
|
|
}, [combos, searchQuery]);
|
|
|
|
// Filter models by search query
|
|
const filteredGroups = useMemo(() => {
|
|
if (!searchQuery.trim()) return groupedModels;
|
|
|
|
const query = searchQuery.toLowerCase();
|
|
const filtered = {};
|
|
|
|
Object.entries(groupedModels).forEach(([providerId, group]) => {
|
|
const matchedModels = group.models.filter(
|
|
(m) =>
|
|
m.name.toLowerCase().includes(query) ||
|
|
m.id.toLowerCase().includes(query)
|
|
);
|
|
|
|
const providerNameMatches = group.name.toLowerCase().includes(query);
|
|
|
|
if (matchedModels.length > 0 || providerNameMatches) {
|
|
filtered[providerId] = {
|
|
...group,
|
|
models: matchedModels,
|
|
};
|
|
}
|
|
});
|
|
|
|
return filtered;
|
|
}, [groupedModels, searchQuery]);
|
|
|
|
const handleSelect = (model) => {
|
|
onSelect(model);
|
|
onClose();
|
|
setSearchQuery("");
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={() => {
|
|
onClose();
|
|
setSearchQuery("");
|
|
}}
|
|
title={title}
|
|
size="md"
|
|
className="p-4!"
|
|
>
|
|
{/* Search - compact */}
|
|
<div className="mb-3">
|
|
<div className="relative">
|
|
<span className="material-symbols-outlined absolute left-2.5 top-1/2 -translate-y-1/2 text-text-muted text-[16px]">
|
|
search
|
|
</span>
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-8 pr-3 py-1.5 bg-surface border border-border rounded text-xs focus:outline-none focus:ring-1 focus:ring-primary/50"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Models grouped by provider - compact */}
|
|
<div className="max-h-[300px] overflow-y-auto space-y-3">
|
|
{/* Combos section - always first */}
|
|
{filteredCombos.length > 0 && (
|
|
<div>
|
|
<div className="flex items-center gap-1.5 mb-1.5 sticky top-0 bg-surface py-0.5">
|
|
<span className="material-symbols-outlined text-primary text-[14px]">layers</span>
|
|
<span className="text-xs font-medium text-primary">Combos</span>
|
|
<span className="text-[10px] text-text-muted">({filteredCombos.length})</span>
|
|
</div>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{filteredCombos.map((combo) => {
|
|
const isSelected = selectedModel === combo.name;
|
|
return (
|
|
<button
|
|
key={combo.id}
|
|
onClick={() => handleSelect({ id: combo.name, name: combo.name, value: combo.name })}
|
|
className={`
|
|
px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
|
|
${isSelected
|
|
? "bg-primary text-white border-primary"
|
|
: "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
|
|
}
|
|
`}
|
|
>
|
|
{combo.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Provider models */}
|
|
{Object.entries(filteredGroups).map(([providerId, group]) => (
|
|
<div key={providerId}>
|
|
{/* Provider header */}
|
|
<div className="flex items-center gap-1.5 mb-1.5 sticky top-0 bg-surface py-0.5">
|
|
<div
|
|
className="w-2 h-2 rounded-full"
|
|
style={{ backgroundColor: group.color }}
|
|
/>
|
|
<span className="text-xs font-medium text-primary">
|
|
{group.name}
|
|
</span>
|
|
<span className="text-[10px] text-text-muted">
|
|
({group.models.length})
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{group.models.map((model) => {
|
|
const isSelected = selectedModel === model.value;
|
|
const isPlaceholder = model.isPlaceholder;
|
|
return (
|
|
<button
|
|
key={model.id}
|
|
onClick={() => handleSelect(model)}
|
|
title={isPlaceholder ? "Select to pre-fill, then edit model ID in the input" : undefined}
|
|
className={`
|
|
px-2 py-1 rounded-xl text-xs font-medium transition-all border hover:cursor-pointer
|
|
${isPlaceholder
|
|
? "border-dashed border-border text-text-muted hover:border-primary/50 hover:text-primary bg-surface italic"
|
|
: isSelected
|
|
? "bg-primary text-white border-primary"
|
|
: "bg-surface border-border text-text-main hover:border-primary/50 hover:bg-primary/5"
|
|
}
|
|
`}
|
|
>
|
|
{isPlaceholder ? (
|
|
<span className="flex items-center gap-1">
|
|
<span className="material-symbols-outlined text-[11px]">edit</span>
|
|
{model.name}
|
|
</span>
|
|
) : model.isCustom ? (
|
|
<span className="flex items-center gap-1">
|
|
{model.name}
|
|
<span className="text-[9px] opacity-60 font-normal">custom</span>
|
|
</span>
|
|
) : model.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
))}
|
|
|
|
{Object.keys(filteredGroups).length === 0 && filteredCombos.length === 0 && (
|
|
<div className="text-center py-4 text-text-muted">
|
|
<span className="material-symbols-outlined text-2xl mb-1 block">
|
|
search_off
|
|
</span>
|
|
<p className="text-xs">No models found</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
ModelSelectModal.propTypes = {
|
|
isOpen: PropTypes.bool.isRequired,
|
|
onClose: PropTypes.func.isRequired,
|
|
onSelect: PropTypes.func.isRequired,
|
|
selectedModel: PropTypes.string,
|
|
activeProviders: PropTypes.arrayOf(
|
|
PropTypes.shape({
|
|
provider: PropTypes.string.isRequired,
|
|
})
|
|
),
|
|
title: PropTypes.string,
|
|
modelAliases: PropTypes.object,
|
|
};
|
|
|