Model Select for Create Team

This commit is contained in:
yuneng-jiang 2026-01-21 18:14:45 -08:00
parent 6b6785bc4f
commit e406ebf0dd
5 changed files with 70 additions and 62 deletions

View file

@ -56,7 +56,7 @@ export const useAllProxyModels = () => {
const { accessToken, userId, userRole } = useAuthorized();
return useQuery<AllProxyModelsResponse>({
queryKey: allProxyModelsKeys.list({}),
queryFn: async () => await modelAvailableCall(accessToken!, userId!, userRole!, true),
queryFn: async () => await modelAvailableCall(accessToken!, userId!, userRole!, true, null, true, false, "expand"),
enabled: Boolean(accessToken && userId && userRole),
});
};

View file

@ -526,7 +526,7 @@ const CreateTeamModal = ({
valuePropName="checked"
help="Bypass global guardrails for this team"
>
<Switch
<Switch
checkedChildren="Yes"
unCheckedChildren="No"
/>

View file

@ -53,14 +53,13 @@ const contextFilters: Record<ModelSelectProps["context"], (args: FilterContextAr
team: ({ allProxyModels, selectedOrganization, userModels }) => {
if (selectedOrganization) {
if (selectedOrganization.models.includes(MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value)) {
if (selectedOrganization.models.includes(MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value) || selectedOrganization.models.length === 0) {
return allProxyModels;
}
// Return organization's models (filtered from allProxyModels)
return allProxyModels.filter((model) => selectedOrganization.models.includes(model));
}
return userModels ?? [];
return allProxyModels ?? [];
},
organization: ({ allProxyModels, selectedOrganization, options }) => {
@ -102,9 +101,12 @@ export const ModelSelect = (props: ModelSelectProps) => {
const isSpecialOption = (value: string) => MODEL_SELECT_SPECIAL_VALUES_ARRAY.some((sv) => sv.value === value);
const hasSpecialOptionSelected = value.some(isSpecialOption);
const isLoading = isLoadingAllProxyModels || isLoadingTeam || isLoadingOrganization || isCurrentUserLoading;
const organizationHasAllProxyModels = organization?.models.includes(MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value) || organization?.models.length === 0;
console.log("organization:", organization);
console.log("organizationHasAllProxyModels:", organizationHasAllProxyModels);
const shouldShowAllProxyModels =
showAllProxyModelsOverride ||
(organization?.models.includes(MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value) && includeSpecialOptions);
(organizationHasAllProxyModels && includeSpecialOptions);
if (isLoading) {
return <Skeleton.Input active block />;
@ -143,51 +145,51 @@ export const ModelSelect = (props: ModelSelectProps) => {
options={[
includeSpecialOptions
? {
label: <span>Special Options</span>,
title: "Special Options",
options: [
...(shouldShowAllProxyModels
? [
{
label: <span>All Proxy Models</span>,
value: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
disabled:
value.length > 0 &&
value.some(
(v) => isSpecialOption(v) && v !== MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
),
key: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
},
]
: []),
{
label: <span>No Default Models</span>,
value: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
disabled:
value.length > 0 &&
value.some((v) => isSpecialOption(v) && v !== MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value),
key: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
},
],
}
label: <span>Special Options</span>,
title: "Special Options",
options: [
...(shouldShowAllProxyModels
? [
{
label: <span>All Proxy Models</span>,
value: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
disabled:
value.length > 0 &&
value.some(
(v) => isSpecialOption(v) && v !== MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
),
key: MODEL_SELECT_ALL_PROXY_MODELS_SPECIAL_VALUE.value,
},
]
: []),
{
label: <span>No Default Models</span>,
value: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
disabled:
value.length > 0 &&
value.some((v) => isSpecialOption(v) && v !== MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value),
key: MODEL_SELECT_NO_DEFAULT_MODELS_SPECIAL_VALUE.value,
},
],
}
: [],
...(wildcard.length > 0
? [
{
label: <span>Wildcard Options</span>,
title: "Wildcard Options",
options: wildcard.map((model) => {
const provider = model.replace("/*", "");
const capitalizedProvider = provider.charAt(0).toUpperCase() + provider.slice(1);
{
label: <span>Wildcard Options</span>,
title: "Wildcard Options",
options: wildcard.map((model) => {
const provider = model.replace("/*", "");
const capitalizedProvider = provider.charAt(0).toUpperCase() + provider.slice(1);
return {
label: <span>{`All ${capitalizedProvider} models`}</span>,
value: model,
disabled: hasSpecialOptionSelected,
};
}),
},
]
return {
label: <span>{`All ${capitalizedProvider} models`}</span>,
value: model,
disabled: hasSpecialOptionSelected,
};
}),
},
]
: []),
{
label: <span>Models</span>,

View file

@ -85,6 +85,7 @@ import { updateExistingKeys } from "@/utils/dataUtils";
import DeleteResourceModal from "./common_components/DeleteResourceModal";
import TableIconActionButton from "./common_components/IconActionButton/TableIconActionButtons/TableIconActionButton";
import { Member, teamCreateCall, v2TeamListCall } from "./networking";
import { ModelSelect } from "./ModelSelect/ModelSelect";
interface TeamInfo {
members_with_roles: Member[];
@ -1064,11 +1065,11 @@ const Teams: React.FC<TeamProps> = ({
rules={
isOrgAdmin
? [
{
required: true,
message: "Please select an organization",
},
]
{
required: true,
message: "Please select an organization",
},
]
: []
}
help={
@ -1135,16 +1136,17 @@ const Teams: React.FC<TeamProps> = ({
]}
name="models"
>
<Select2 mode="multiple" placeholder="Select models" style={{ width: "100%" }}>
<Select2.Option key="no-default-models" value="no-default-models">
No Default Models
</Select2.Option>
{modelsToPick.map((model) => (
<Select2.Option key={model} value={model}>
{getModelDisplayName(model)}
</Select2.Option>
))}
</Select2>
<ModelSelect
value={form.getFieldValue("models") || []}
onChange={(values) => form.setFieldValue("models", values)}
organizationID={form.getFieldValue("organization_id")}
options={{
includeSpecialOptions: true,
showAllProxyModelsOverride: !form.getFieldValue("organization_id"),
}}
context="team"
dataTestId="create-team-models-select"
/>
</Form.Item>
<Form.Item label="Max Budget (USD)" name="max_budget">

View file

@ -2457,6 +2457,7 @@ export const modelAvailableCall = async (
teamID: string | null = null,
include_model_access_groups: boolean = false,
only_model_access_groups: boolean = false,
scope?: string
) => {
/**
* Get all the models user has access to
@ -2475,6 +2476,9 @@ export const modelAvailableCall = async (
if (teamID) {
params.append("team_id", teamID.toString());
}
if (scope) {
params.append("scope", scope);
}
if (params.toString()) {
url += `?${params.toString()}`;
}