diff --git a/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx b/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx index 3065125fcb0c..fc65ce54a0c7 100644 --- a/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx +++ b/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Form, Switch } from "antd"; -import { Text, Button, Accordion, AccordionHeader, AccordionBody } from "@tremor/react"; +import { Form, Switch, Select, Input } from "antd"; +import { Text, Button, Accordion, AccordionHeader, AccordionBody, TextInput } from "@tremor/react"; import { Row, Col, Typography, Card } from "antd"; import TextArea from "antd/es/input/TextArea"; const { Link } = Typography; @@ -15,8 +15,20 @@ const AdvancedSettings: React.FC = ({ setShowAdvancedSettings, }) => { const [form] = Form.useForm(); + const [customPricing, setCustomPricing] = React.useState(false); + const [pricingModel, setPricingModel] = React.useState<'per_token' | 'per_second'>('per_token'); + + // Add validation function for numbers + const validateNumber = (_: any, value: string) => { + if (!value) { + return Promise.resolve(); + } + if (isNaN(Number(value)) || Number(value) < 0) { + return Promise.reject('Please enter a valid positive number'); + } + return Promise.resolve(); + }; - // Add validation function const validateJSON = (_: any, value: string) => { if (!value) { return Promise.resolve(); @@ -29,6 +41,19 @@ const AdvancedSettings: React.FC = ({ } }; + // Handle custom pricing changes + const handleCustomPricingChange = (checked: boolean) => { + setCustomPricing(checked); + if (!checked) { + // Clear pricing fields when disabled + form.setFieldsValue({ + input_cost_per_token: undefined, + output_cost_per_token: undefined, + input_cost_per_second: undefined, + }); + } + }; + const handlePassThroughChange = (checked: boolean) => { const currentParams = form.getFieldValue('litellm_extra_params'); try { @@ -56,81 +81,136 @@ const AdvancedSettings: React.FC = ({ return ( <> + + + Advanced Settings + + +
+ + + - - - - Advanced Settings - - -
- - Allow using these credentials in pass through routes.{" "} - - Learn more - - - } - > - - - -