scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-05 02:41:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 93

feat(ui): add_model/litellm_model_name to shadcn Input

Browse source 
- @tremor TextInput/Text + antd Row/Col \u2192 shadcn Input + plain
  grid-cols-24 layout.
- antd Form.Item / AntSelect preserved (parent drives a full antd
  Form with Form.Item noStyle + shouldUpdate patterns).
- Text-gray helper line converted to plain <p> with text-muted-
  foreground.

Gates: TS \u2713 | Build \u2713 | Vitest 2/2 green for litellm_model_name tests.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-23 15:02:18 +00:00
parent 5e8b9f7a4f
commit 336d542369
No known key found for this signature in database
1 changed files with 29 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
ui/litellm-dashboard/src/components/add_model/litellm_model_name.tsx
View file

@ -1,7 +1,6 @@
import React from "react";
import { Form, Select as AntSelect } from "antd";
import { TextInput, Text } from "@tremor/react";
import { Row, Col } from "antd";
import { Input } from "@/components/ui/input";
import { Providers } from "../provider_info_helpers";
interface LiteLLMModelNameFieldProps {
@ -79,6 +78,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
// Immediately update the model mappings
const currentMappings = form.getFieldValue("model_mappings") || [];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const updatedMappings = currentMappings.map((mapping: any) => {
if (mapping.public_name === "custom" || mapping.litellm_model === "custom") {
if (selectedProvider === Providers.Azure) {
@ -118,12 +118,14 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
{selectedProvider === Providers.Azure ||
selectedProvider === Providers.OpenAI_Compatible ||
selectedProvider === Providers.Ollama ? (
<>
<TextInput
placeholder={getPlaceholder(selectedProvider)}
onChange={selectedProvider === Providers.Azure ? handleAzureDeploymentNameChange : undefined}
/>
</>
<Input
placeholder={getPlaceholder(selectedProvider)}
onChange={
selectedProvider === Providers.Azure
? handleAzureDeploymentNameChange
: undefined
}
/>
) : providerModels.length > 0 ? (
<AntSelect
data-testid="model-name-select"
@ -151,7 +153,7 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
style={{ width: "100%" }}
/>
) : (
<TextInput placeholder={getPlaceholder(selectedProvider)} />
<Input placeholder={getPlaceholder(selectedProvider)} />
)}
</Form.Item>
@ -164,12 +166,19 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
modelArray.includes("custom") && (
<Form.Item
name="custom_model_name"
rules={[{ required: true, message: "Please enter a custom model name." }]}
rules={[
{
required: true,
message: "Please enter a custom model name.",
},
]}
className="mt-2"
>
<TextInput
<Input
placeholder={
selectedProvider === Providers.Azure ? "Enter Azure deployment name" : "Enter custom model name"
selectedProvider === Providers.Azure
? "Enter Azure deployment name"
: "Enter custom model name"
}
onChange={handleCustomModelNameChange}
/>
@ -179,16 +188,14 @@ const LiteLLMModelNameField: React.FC<LiteLLMModelNameFieldProps> = ({
}}
</Form.Item>
</Form.Item>
<Row>
<Col span={10}></Col>
<Col span={14}>
<Text className="mb-3 mt-1">
{selectedProvider === Providers.Azure
? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally"
: "The model name LiteLLM will send to the LLM API"}
</Text>
</Col>
</Row>
<div className="grid grid-cols-24 gap-2">
<div className="col-span-10" />
<p className="col-span-14 mb-3 mt-1 text-sm text-muted-foreground">
{selectedProvider === Providers.Azure
? "Your deployment name will be saved as the public model name, and LiteLLM will use 'azure/deployment-name' internally"
: "The model name LiteLLM will send to the LLM API"}
</p>
</div>
</>
);
};