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 71

feat(ui): cache_control_settings \u2014 antd Typography/@ant-design icons

Browse source 
- antd Typography.Text \u2192 plain <p> with text-muted-foreground.
- @ant-design PlusOutlined / MinusCircleOutlined \u2192 lucide Plus /
  MinusCircle.
- bg-gray-600 / text-red-500 \u2192 semantic tokens + destructive. antd
  Form / Form.List / Switch / Select remain since the parent form is
  antd-driven.

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 13:31:14 +00:00
parent 06cfed53c0
commit 518934f928
No known key found for this signature in database
1 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/litellm-dashboard/src/components/add_model/cache_control_settings.tsx
View file

@ -1,10 +1,8 @@
import React from "react";
import { Form, Switch, Select, Typography } from "antd";
import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
import { Form, Switch, Select } from "antd";
import { MinusCircle, Plus } from "lucide-react";
import NumericalInput from "../shared/numerical_input";
const { Text } = Typography;
interface CacheControlInjectionPoint {
location: "message";
role?: "user" | "system" | "assistant";
@ -12,7 +10,9 @@ interface CacheControlInjectionPoint {
}
interface CacheControlSettingsProps {
form: any; // Form instance from parent
// Form instance from parent (antd Form)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
form: any;
showCacheControl: boolean;
onCacheControlChange: (checked: boolean) => void;
}
@ -50,15 +50,16 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
className="mb-4"
tooltip="Tell litellm where to inject cache control checkpoints. You can specify either by role (to apply to all messages of that role) or by specific message index."
>
<Switch onChange={onCacheControlChange} className="bg-gray-600" />
<Switch onChange={onCacheControlChange} />
</Form.Item>
{showCacheControl && (
<div className="ml-6 pl-4 border-l-2 border-gray-200">
<Text className="text-sm text-gray-500 block mb-4">
Providers like Anthropic, Bedrock API require users to specify where to inject cache control checkpoints,
litellm can automatically add them for you as a cost saving feature.
</Text>
<div className="ml-6 pl-4 border-l-2 border-border">
<p className="text-sm text-muted-foreground block mb-4">
Providers like Anthropic, Bedrock API require users to specify
where to inject cache control checkpoints, litellm can
automatically add them for you as a cost saving feature.
</p>
<Form.List name="cache_control_injection_points" initialValue={[{ location: "message" }]}>
{(fields, { add, remove }) => (
@ -119,16 +120,22 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
</Form.Item>
{fields.length > 1 && (
<MinusCircleOutlined
className="text-red-500 cursor-pointer text-lg ml-12"
<button
type="button"
className="text-destructive cursor-pointer ml-12"
aria-label="Remove injection point"
onClick={() => {
remove(field.name);
setTimeout(() => {
const values = form.getFieldValue("cache_control_points");
const values = form.getFieldValue(
"cache_control_points",
);
updateCacheControlPoints(values);
}, 0);
}}
/>
>
<MinusCircle className="h-5 w-5" />
</button>
)}
</div>
))}
@ -136,10 +143,10 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
<Form.Item>
<button
type="button"
className="flex items-center justify-center w-full border border-dashed border-gray-300 py-2 px-4 text-gray-600 hover:text-blue-600 hover:border-blue-300 transition-all rounded"
className="flex items-center justify-center w-full border border-dashed border-border py-2 px-4 text-muted-foreground hover:text-primary hover:border-primary/50 transition-all rounded"
onClick={() => add()}
>
<PlusOutlined className="mr-2" />
<Plus className="mr-2 h-4 w-4" />
Add Injection Point
</button>
</Form.Item>