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(", ")} + + + )} /> );