phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-25 02:34:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

[UI Polish] UI fixes for cache control injection settings (#10031)

Browse source 
* ui fixes for cache control

* docs inject cache control settings
This commit is contained in:
Ishaan Jaff 2025-04-15 21:10:08 -07:00 • committed by GitHub
parent 65f8015221
commit 70d740332f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 11 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

12
ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
View file

@ -170,12 +170,6 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
</div> </div>
)} )}
<CacheControlSettings
form={form}
showCacheControl={showCacheControl}
onCacheControlChange={handleCacheControlChange}
/>
<Form.Item <Form.Item
label="Use in pass through routes" label="Use in pass through routes"
name="use_in_pass_through" name="use_in_pass_through"
@ -195,6 +189,12 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
className="bg-gray-600" className="bg-gray-600"
/> />
</Form.Item> </Form.Item>
<CacheControlSettings
form={form}
showCacheControl={showCacheControl}
onCacheControlChange={handleCacheControlChange}
/>
<Form.Item <Form.Item
label="LiteLLM Params" label="LiteLLM Params"
name="litellm_extra_params" name="litellm_extra_params"

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

@ -56,8 +56,8 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
{showCacheControl && ( {showCacheControl && (
<div className="ml-6 pl-4 border-l-2 border-gray-200"> <div className="ml-6 pl-4 border-l-2 border-gray-200">
<Text className="text-sm text-gray-500 block mb-4"> <Text className="text-sm text-gray-500 block mb-4">
Specify either a role (to cache all messages of that role) or a specific message index. Providers like Anthropic, Bedrock API require users to specify where to inject cache control checkpoints,
If both are provided, the index takes precedence. litellm can automatically add them for you as a cost saving feature.
</Text> </Text>
<Form.List <Form.List
@ -85,7 +85,7 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
name={[field.name, 'role']} name={[field.name, 'role']}
className="mb-0" className="mb-0"
style={{ width: '180px' }} style={{ width: '180px' }}
tooltip="Select a role to cache all messages of this type" tooltip="LiteLLM will mark all messages of this role as cacheable"
> >
<Select <Select
placeholder="Select a role" placeholder="Select a role"
@ -108,7 +108,7 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
name={[field.name, 'index']} name={[field.name, 'index']}
className="mb-0" className="mb-0"
style={{ width: '180px' }} style={{ width: '180px' }}
tooltip="Specify a specific message index (optional)" tooltip="(Optional) If set litellm will mark the message at this index as cacheable"
> >
<NumericalInput <NumericalInput
type="number" type="number"
@ -124,7 +124,7 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
{fields.length > 1 && ( {fields.length > 1 && (
<MinusCircleOutlined <MinusCircleOutlined
className="text-red-500 cursor-pointer text-lg mt-8" className="text-red-500 cursor-pointer text-lg ml-12"
onClick={() => { onClick={() => {
remove(field.name); remove(field.name);
setTimeout(() => { setTimeout(() => {