scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-04 02:31:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 122

feat(ui): add_model/conditional_public_model_name to shadcn

Browse source 
- @tremor TextInput \u2192 shadcn Input. antd Form/Form.Item/Form.useForm
  + antd Table preserved (Form.useFormInstance + Form.useWatch +
  custom table render functions).
- Tooltip code hint palette swapped from bg-gray-700 to
  bg-foreground/70 text-background so it works in light + dark mode.
- EntityUsageExport/types.ts: tremor DateRangePickerValue type import
  whitelisted inline (phase 1 date-picker whitelist).

Gates: TS \u2713 | Build \u2713.

Co-authored-by: yuneng-jiang <yuneng-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-04-23 18:54:28 +00:00
parent 4379fd004d
commit 93d0bc804b
No known key found for this signature in database
2 changed files with 26 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/litellm-dashboard/src/components/EntityUsageExport/types.ts
View file

@ -1,3 +1,4 @@
// eslint-disable-next-line litellm-ui/no-banned-ui-imports
import type { DateRangePickerValue } from "@tremor/react";
import type { Team } from "@/components/key_team_helpers/key_list";

34
ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState } from "react";
import { Form, Table } from "antd";
import { TextInput } from "@tremor/react";
import { Input } from "@/components/ui/input";
import { Tooltip } from "../atoms/index";
import { Providers } from "../provider_info_helpers";
@ -18,6 +18,7 @@ const ConditionalPublicModelName: React.FC = () => {
useEffect(() => {
if (customModelName && selectedModels.includes("custom")) {
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) {
@ -95,19 +96,32 @@ const ConditionalPublicModelName: React.FC = () => {
const publicNameTooltipContent = (
<>
<div className="mb-2 font-normal">The name you specify in your API calls to LiteLLM Proxy</div>
<div className="mb-2 font-normal">
The name you specify in your API calls to LiteLLM Proxy
</div>
<div className="mb-2 font-normal">
<strong>Example:</strong> If you name your public model{" "}
<code className="bg-gray-700 px-1 py-0.5 rounded text-xs">example-name</code>, and choose{" "}
<code className="bg-gray-700 px-1 py-0.5 rounded text-xs">openai/qwen-plus-latest</code> as the LiteLLM model
<code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
example-name
</code>
, and choose{" "}
<code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
openai/qwen-plus-latest
</code>{" "}
as the LiteLLM model
</div>
<div className="mb-2 font-normal">
<strong>Usage:</strong> You make an API call to the LiteLLM proxy with{" "}
<code className="bg-gray-700 px-1 py-0.5 rounded text-xs">model = &quot;example-name&quot;</code>
<code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
model = &quot;example-name&quot;
</code>
</div>
<div className="font-normal">
<strong>Result:</strong> LiteLLM sends{" "}
<code className="bg-gray-700 px-1 py-0.5 rounded text-xs">qwen-plus-latest</code> to the provider
<code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
qwen-plus-latest
</code>{" "}
to the provider
</div>
</>
);
@ -124,9 +138,10 @@ const ConditionalPublicModelName: React.FC = () => {
),
dataIndex: "public_name",
key: "public_name",
// eslint-disable-next-line @typescript-eslint/no-explicit-any
render: (text: string, record: any, index: number) => {
return (
<TextInput
<Input
value={text}
onChange={(e) => {
const newValue = e.target.value;
@ -188,9 +203,10 @@ const ConditionalPublicModelName: React.FC = () => {
if (!value || value.length === 0) {
throw new Error("At least one model mapping is required");
}
// Check if all mappings have valid public names
const invalidMappings = value.filter(
(mapping: any) => !mapping.public_name || mapping.public_name.trim() === "",
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(mapping: any) =>
!mapping.public_name || mapping.public_name.trim() === "",
);
if (invalidMappings.length > 0) {
throw new Error("All model mappings must have valid public names");