{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")}
)}
-
+