diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx index 3bcc80a..fe490a1 100644 --- a/frontend/src/pages/Channels.tsx +++ b/frontend/src/pages/Channels.tsx @@ -1105,6 +1105,29 @@ export function Channels({ createMode = false, editRoute = false }: { createMode }); const endpointPreview = getChannelEndpointPreview(formData.type, formData.endpoint); const endpointPlaceholder = getChannelEndpointPlaceholder(formData.type); + const renderModelSummaryBadge = (modelSummary: string, modelTooltipText: string, className: string) => { + const badge = ( + + {modelSummary} + + ); + + if (!modelTooltipText) { + return badge; + } + + return ( + + {badge} + + {modelTooltipText} + + + ); + }; if (view === "list") { return ( @@ -1172,17 +1195,23 @@ export function Channels({ createMode = false, editRoute = false }: { createMode ) : ( - + +
{filteredData?.map((channel) => { const rawConfig = parseChannelValue(channel); const config = normalizeChannelFormConfig(rawConfig); - const modelCount = (config.models || []).length; - const enabledModelCount = (config.models || []).filter((model) => model.enabled !== false).length; + const models = config.models || []; + const modelCount = models.length; + const enabledModelCount = models.filter((model) => model.enabled !== false).length; const modelSummary = enabledModelCount === modelCount ? t("channels.modelCount", { count: modelCount }) : t("channels.modelCountPartial", { enabled: enabledModelCount, total: modelCount }); + const modelTooltipText = models + .map((model) => (model.name || model.id || "").trim()) + .filter(Boolean) + .join(", "); const isMenuOpen = openMenu === channel.key; const isEnabled = config.enabled !== false; const isToggling = @@ -1232,9 +1261,11 @@ export function Channels({ createMode = false, editRoute = false }: { createMode {getTypeLabel(config.type)} - - {modelSummary} - + {renderModelSummaryBadge( + modelSummary, + modelTooltipText, + "px-2 py-0.5 rounded bg-indigo-500/10 text-indigo-500 text-xs", + )} {config.weight ?? 0} @@ -1276,9 +1307,11 @@ export function Channels({ createMode = false, editRoute = false }: { createMode {config.endpoint.replace(/^https?:\/\//, "").split("/")[0]}
- - {modelSummary} - + {renderModelSummaryBadge( + modelSummary, + modelTooltipText, + "text-indigo-500 bg-indigo-500/10 px-3 h-6 rounded-full flex items-center justify-center", + )}
@@ -1310,11 +1343,12 @@ export function Channels({ createMode = false, editRoute = false }: { createMode
); })} - {filteredData?.length === 0 && searchQuery && ( + {filteredData?.length === 0 && (
{t("channels.noMatchingChannels")}
)} -
+
+ )} );