@acarmisc/backstage-plugin-litellm 0.18.1 → 0.19.0

package/dist/index.esm.js

@@ -3004,14 +3004,14 @@ import MenuItem4 from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import FormControl from "@mui/material/FormControl";
 import InputLabel from "@mui/material/InputLabel";
+import TextField5 from "@mui/material/TextField";
+import InputAdornment2 from "@mui/material/InputAdornment";
+import { Search as Search2 } from "@mui/icons-material";
 import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Tooltip3 from "@mui/material/Tooltip";
 import Snackbar from "@mui/material/Snackbar";
 import Alert3 from "@mui/material/Alert";
 import { alpha as alpha5, useTheme as useTheme2 } from "@mui/material/styles";
-import TextField5 from "@mui/material/TextField";
-import InputAdornment2 from "@mui/material/InputAdornment";
-import { Search as Search2 } from "@mui/icons-material";
 function isModelAllowedByTeam2(model, teamModels) {
   if (!teamModels || teamModels.length === 0 || teamModels.includes(ALL_PROXY_MODELS2)) return true;
   return teamModels.includes(model.model_name) || !!model.access_groups?.some((group) => teamModels.includes(group));
@@ -3044,17 +3044,17 @@ var init_ModelsTable = __esm({
         () => teams.find((t) => t.team_id === selectedTeamId) ?? null,
         [teams, selectedTeamId]
       );
-      const filteredModels = useMemo6(() => {
+      const teamModels = useMemo6(() => {
         if (!selectedTeam) return [];
-        let result = allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
-        if (filterText.trim()) {
-          const q = filterText.toLowerCase();
-          result = result.filter(
-            (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
-          );
-        }
-        return result;
-      }, [allModels, selectedTeam, filterText]);
+        return allModels.filter((model) => isModelAllowedByTeam2(model, selectedTeam.models));
+      }, [allModels, selectedTeam]);
+      const filteredModels = useMemo6(() => {
+        const q = filterText.trim().toLowerCase();
+        if (!q) return teamModels;
+        return teamModels.filter(
+          (model) => model.model_name.toLowerCase().includes(q) || (model.access_groups || []).some((group) => group.toLowerCase().includes(q))
+        );
+      }, [teamModels, filterText]);
       const handleCopyModelId = useCallback((modelId) => {
         navigator.clipboard.writeText(modelId).then(() => setCopiedSnackbar(true));
       }, []);
@@ -3076,9 +3076,9 @@ var init_ModelsTable = __esm({
         SectionCard,
         {
           title: "Available Models",
-          subtitle: selectedTeam ? `${filteredModels.length} model${filteredModels.length !== 1 ? "s" : ""} in ${selectedTeam.team_alias ?? selectedTeam.team_id}` : "Select a team to view its models"
+          subtitle: selectedTeam ? `${filteredModels.length}${filterText.trim() ? ` of ${teamModels.length}` : ""} model${filteredModels.length === 1 ? "" : "s"}` : "Select a team to view its models"
         },
-        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1 } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
+        /* @__PURE__ */ React8.createElement(Box8, { sx: { px: 2.5, pb: 2.5, pt: 1, display: "flex", gap: 2, flexWrap: "wrap" } }, /* @__PURE__ */ React8.createElement(FormControl, { size: "small", sx: { minWidth: 240, mb: 2 } }, /* @__PURE__ */ React8.createElement(InputLabel, { id: "team-select-label" }, "Team"), /* @__PURE__ */ React8.createElement(
           Select,
           {
             labelId: "team-select-label",
@@ -3094,6 +3094,7 @@ var init_ModelsTable = __esm({
             size: "small",
             value: filterText,
             onChange: (e) => setFilterText(e.target.value),
+            disabled: !selectedTeamId,
             sx: { minWidth: 240, mb: 2 },
             InputProps: {
               startAdornment: /* @__PURE__ */ React8.createElement(InputAdornment2, { position: "start" }, /* @__PURE__ */ React8.createElement(Search2, { fontSize: "small" }))
@@ -3108,14 +3109,32 @@ var init_ModelsTable = __esm({
             hint: "Each team may have a different set of models assigned"
           }
         ),
-        !loading && selectedTeamId && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length === 0 && /* @__PURE__ */ React8.createElement(
           EmptyState,
           {
             message: "No models available for this team",
             hint: allModels.length === 0 ? "No models are configured in the system" : "None of the team's assigned models were found in the catalog"
           }
         ),
-        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: m.model_name }), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
+        !loading && selectedTeamId && teamModels.length > 0 && filteredModels.length === 0 && /* @__PURE__ */ React8.createElement(
+          EmptyState,
+          {
+            message: "No models match your search",
+            hint: "Try a different search term"
+          }
+        ),
+        !loading && filteredModels.length > 0 && /* @__PURE__ */ React8.createElement(TableContainer5, null, /* @__PURE__ */ React8.createElement(Table5, { size: "small", sx: dataTableSx }, /* @__PURE__ */ React8.createElement(TableHead5, null, /* @__PURE__ */ React8.createElement(TableRow5, null, /* @__PURE__ */ React8.createElement(TableCell5, null, "Model ID"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Mode"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Input Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Output Cost"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Input"), /* @__PURE__ */ React8.createElement(TableCell5, { align: "right" }, "Max Output"), /* @__PURE__ */ React8.createElement(TableCell5, null, "Capabilities"))), /* @__PURE__ */ React8.createElement(TableBody5, null, filteredModels.map((m) => /* @__PURE__ */ React8.createElement(TableRow5, { key: m.model_name, hover: true }, /* @__PURE__ */ React8.createElement(TableCell5, null, /* @__PURE__ */ React8.createElement(Box8, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(Tooltip3, { title: m.model_name, placement: "top" }, /* @__PURE__ */ React8.createElement(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": "Copy model ID",
+            onClick: () => handleCopyModelId(m.model_name),
+            onKeyDown: (e) => e.key === "Enter" && handleCopyModelId(m.model_name),
+            style: { cursor: "pointer", display: "inline-flex" }
+          },
+          /* @__PURE__ */ React8.createElement(TagChip, { label: m.model_name, title: "Copy model ID" })
+        )), /* @__PURE__ */ React8.createElement(Tooltip3, { title: "Copy model ID" }, /* @__PURE__ */ React8.createElement(
           Box8,
           {
             component: "span",