diff --git a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
index 74b2619f7f3..0cab4f4618a 100644
--- a/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
+++ b/ui/litellm-dashboard/src/components/ModelSelect/ModelSelect.tsx
@@ -2,7 +2,14 @@ import { ProxyModel, useAllProxyModels } from "@/app/(dashboard)/hooks/models/us
import { useOrganization } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
import { useTeam } from "@/app/(dashboard)/hooks/teams/useTeams";
import { useCurrentUser } from "@/app/(dashboard)/hooks/users/useCurrentUser";
-import { Select, Skeleton, Tooltip, type SelectProps } from "antd";
+import { Select } from "antd";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@/components/ui/tooltip";
import { Organization, Team } from "../networking";
import { splitWildcardModels } from "./modelUtils";
@@ -106,13 +113,9 @@ export const ModelSelect = (props: ModelSelectProps) => {
(organizationHasAllProxyModels && includeSpecialOptions) || context === "global";
if (isLoading) {
- return ;
+ return ;
}
- const optionRender: NonNullable = (option) => {
- return {option.label};
- };
-
const handleChange = (values: string[]) => {
const specialValues = values.filter(isSpecialOption);
@@ -204,12 +207,16 @@ export const ModelSelect = (props: ModelSelectProps) => {
allowClear
maxTagCount="responsive"
maxTagPlaceholder={(omittedValues) => (
- value).join(", ")}
- >
- +{omittedValues.length} more
-
+
+
+
+ +{omittedValues.length} more
+
+
+ {omittedValues.map(({ value }) => value).join(", ")}
+
+
+
)}
/>
);