mirror of
https://github.com/BerriAI/litellm.git
synced 2026-09-07 08:26:10 +00:00
fix(ui): use tremor Accordion for Team Member Settings in edit team form
This commit is contained in:
Ishaan Jaffer
parent
5c61e37942
commit
2bcbd312f5
1 changed files with 72 additions and 77 deletions
|
|
@ -19,8 +19,8 @@ import { mapEmptyStringToNull } from "@/utils/keyUpdateUtils";
|
|||
import { isProxyAdminRole } from "@/utils/roles";
|
||||
import { EditOutlined, InfoCircleOutlined, SaveOutlined } from "@ant-design/icons";
|
||||
import { ArrowLeftIcon } from "@heroicons/react/outline";
|
||||
import { Badge, Card, Grid, Text, TextInput, Title } from "@tremor/react";
|
||||
import { Button, Collapse, Form, Input, Select, Switch, Tabs, Tooltip } from "antd";
|
||||
import { Accordion, AccordionBody, AccordionHeader, Badge, Card, Grid, Text, TextInput, Title } from "@tremor/react";
|
||||
import { Button, Form, Input, Select, Switch, Tabs, Tooltip } from "antd";
|
||||
import MessageManager from "@/components/molecules/message_manager";
|
||||
import { CheckIcon, CopyIcon } from "lucide-react";
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
|
|
@ -889,81 +889,76 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
|
|||
<Input placeholder="example1@test.com, example2@test.com" />
|
||||
</Form.Item>
|
||||
|
||||
<Collapse
|
||||
ghost
|
||||
className="mt-4 mb-4 border border-gray-200 rounded-lg"
|
||||
items={[{
|
||||
key: "member-settings",
|
||||
label: <span className="font-medium text-gray-700">Team Member Settings</span>,
|
||||
children: (
|
||||
<div className="pt-2">
|
||||
<p className="text-xs text-gray-500 mb-4">
|
||||
Optional defaults applied when members join this team. All fields can be overridden per member.
|
||||
</p>
|
||||
<Form.Item
|
||||
label={
|
||||
<span>
|
||||
Default Model Access{" "}
|
||||
<Tooltip title="Optional. If set, new members can only access these models by default. Must be a subset of the team's models above. Leave empty to give all members access to all team models.">
|
||||
<InfoCircleOutlined style={{ marginLeft: "4px" }} />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
name="default_team_member_models"
|
||||
>
|
||||
<Form.Item noStyle shouldUpdate={(prev, cur) => prev.models !== cur.models}>
|
||||
{({ getFieldValue }) => {
|
||||
const teamModels = getFieldValue("models") || info.models || [];
|
||||
return (
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder="Leave empty — all team models accessible to every member"
|
||||
value={form.getFieldValue("default_team_member_models") || []}
|
||||
onChange={(values) => form.setFieldValue("default_team_member_models", values)}
|
||||
options={teamModels.map((m: string) => ({ label: m, value: m }))}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default Budget (USD)"
|
||||
name="team_member_budget"
|
||||
tooltip="Default spend budget for each member in this team."
|
||||
>
|
||||
<NumericalInput step={0.01} precision={2} style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Default Budget Duration" name="team_member_budget_duration">
|
||||
<DurationSelect
|
||||
onChange={(value) => form.setFieldValue("team_member_budget_duration", value)}
|
||||
value={form.getFieldValue("team_member_budget_duration")}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default Key Duration (eg: 1d, 1mo)"
|
||||
name="team_member_key_duration"
|
||||
tooltip="Set a limit to the duration of a team member's key. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days), 1mo (month)"
|
||||
>
|
||||
<TextInput placeholder="e.g., 30d" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default TPM Limit"
|
||||
name="team_member_tpm_limit"
|
||||
tooltip="Default tokens per minute limit for each member. Can be overridden per member."
|
||||
>
|
||||
<NumericalInput step={1} style={{ width: "100%" }} placeholder="e.g., 1000" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default RPM Limit"
|
||||
name="team_member_rpm_limit"
|
||||
tooltip="Default requests per minute limit for each member. Can be overridden per member."
|
||||
>
|
||||
<NumericalInput step={1} style={{ width: "100%" }} placeholder="e.g., 100" />
|
||||
</Form.Item>
|
||||
</div>
|
||||
),
|
||||
}]}
|
||||
/>
|
||||
<Accordion className="mt-4 mb-4">
|
||||
<AccordionHeader>
|
||||
<b>Team Member Settings</b>
|
||||
</AccordionHeader>
|
||||
<AccordionBody>
|
||||
<Text className="text-xs text-gray-500 mb-4">
|
||||
Optional defaults applied when members join this team. All fields can be overridden per member.
|
||||
</Text>
|
||||
<Form.Item
|
||||
label={
|
||||
<span>
|
||||
Default Model Access{" "}
|
||||
<Tooltip title="Optional. If set, new members can only access these models by default. Must be a subset of the team's models above. Leave empty to give all members access to all team models.">
|
||||
<InfoCircleOutlined style={{ marginLeft: "4px" }} />
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
name="default_team_member_models"
|
||||
>
|
||||
<Form.Item noStyle shouldUpdate={(prev, cur) => prev.models !== cur.models}>
|
||||
{({ getFieldValue }) => {
|
||||
const teamModels = getFieldValue("models") || info.models || [];
|
||||
return (
|
||||
<Select
|
||||
mode="multiple"
|
||||
placeholder="Leave empty — all team models accessible to every member"
|
||||
value={form.getFieldValue("default_team_member_models") || []}
|
||||
onChange={(values) => form.setFieldValue("default_team_member_models", values)}
|
||||
options={teamModels.map((m: string) => ({ label: m, value: m }))}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default Budget (USD)"
|
||||
name="team_member_budget"
|
||||
tooltip="Default spend budget for each member in this team."
|
||||
>
|
||||
<NumericalInput step={0.01} precision={2} style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="Default Budget Duration" name="team_member_budget_duration">
|
||||
<DurationSelect
|
||||
onChange={(value) => form.setFieldValue("team_member_budget_duration", value)}
|
||||
value={form.getFieldValue("team_member_budget_duration")}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default Key Duration (eg: 1d, 1mo)"
|
||||
name="team_member_key_duration"
|
||||
tooltip="Set a limit to the duration of a team member's key. Format: 30s (seconds), 30m (minutes), 30h (hours), 30d (days), 1mo (month)"
|
||||
>
|
||||
<TextInput placeholder="e.g., 30d" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default TPM Limit"
|
||||
name="team_member_tpm_limit"
|
||||
tooltip="Default tokens per minute limit for each member. Can be overridden per member."
|
||||
>
|
||||
<NumericalInput step={1} style={{ width: "100%" }} placeholder="e.g., 1000" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="Default RPM Limit"
|
||||
name="team_member_rpm_limit"
|
||||
tooltip="Default requests per minute limit for each member. Can be overridden per member."
|
||||
>
|
||||
<NumericalInput step={1} style={{ width: "100%" }} placeholder="e.g., 100" />
|
||||
</Form.Item>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
|
||||
<Form.Item label="Reset Budget" name="budget_duration">
|
||||
<Select placeholder="n/a">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue