diff --git a/src/app/(dashboard)/dashboard/models/page.js b/src/app/(dashboard)/dashboard/models/page.js index 0a420134..1be7db32 100644 --- a/src/app/(dashboard)/dashboard/models/page.js +++ b/src/app/(dashboard)/dashboard/models/page.js @@ -1,7 +1,6 @@ "use client"; import { useEffect, useMemo, useState } from "react"; -import { useRouter } from "next/navigation"; import { Badge, Button, @@ -11,6 +10,7 @@ import { Toggle, } from "@/shared/components"; import ProviderIcon from "@/shared/components/ProviderIcon"; +import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard"; import useUserStore from "@/store/userStore"; import { useNotificationStore } from "@/store/notificationStore"; @@ -18,15 +18,9 @@ function groupModelsByProvider(models) { return models.reduce((groups, model) => { const key = model.providerAlias; if (!groups[key]) { - groups[key] = { - provider: model.provider, - models: [], - modelIds: new Set(), - }; + groups[key] = { provider: model.provider, models: [], modelIds: new Set() }; } - // The API normally supplies unique models. Ignore a duplicate defensively - // so a malformed response cannot produce duplicate React keys. if (groups[key].modelIds.has(model.fullModel)) return groups; groups[key].modelIds.add(model.fullModel); groups[key].models.push(model); @@ -34,17 +28,16 @@ function groupModelsByProvider(models) { }, {}); } -function ProviderModelsCard({ group, onSetModelsDisabled, pendingIds }) { +function ProviderModelsCard({ group, canManage, onSetModelDisabled, onSetModelsDisabled, pendingIds }) { const [expanded, setExpanded] = useState(true); + const { copied, copy } = useCopyToClipboard(); + const isUpdatingGroup = group.models.some((model) => pendingIds.has(model.fullModel)); const enabledCount = group.models.filter((model) => !model.disabled).length; const disabledCount = group.models.length - enabledCount; - const isUpdatingGroup = group.models.some((model) => pendingIds.has(model.fullModel)); const setAllModelsDisabled = (disabled) => { - const modelIds = group.models - .filter((model) => model.disabled !== disabled) - .map((model) => model.model); - if (modelIds.length > 0) onSetModelsDisabled(group.provider.alias, modelIds, disabled); + const modelsToUpdate = group.models.filter((model) => model.disabled !== disabled); + if (modelsToUpdate.length > 0) onSetModelsDisabled(group.provider.alias, modelsToUpdate, disabled); }; return ( @@ -70,75 +63,84 @@ function ProviderModelsCard({ group, onSetModelsDisabled, pendingIds }) { />
- {enabledCount} enabled · {disabledCount} disabled · {group.models.length} models + {group.models.length} available model{group.models.length === 1 ? "" : "s"}
{model.model}
+ +{model.model}
+ {canManage ? ( +- Manage which models are available through the API for connected providers. + {canManage + ? "Select which connected-provider models are available through the API." + : "Browse models currently available through your connected providers."}
Connected providers
+{providerCount}
+Available models
+{models.length}
+