From 70d740332fb6d28e32668d0d28e4ca76c9b60e0c Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Tue, 15 Apr 2025 21:10:08 -0700
Subject: [PATCH] [UI Polish] UI fixes for cache control injection settings
 (#10031)

* ui fixes for cache control

* docs inject cache control settings
---
 .../src/components/add_model/advanced_settings.tsx   | 12 ++++++------
 .../components/add_model/cache_control_settings.tsx  | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

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 7a1cb93f4c..8ced27cd62 100644
--- a/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/advanced_settings.tsx
@@ -170,12 +170,6 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
               </div>
             )}
 
-            <CacheControlSettings
-              form={form}
-              showCacheControl={showCacheControl}
-              onCacheControlChange={handleCacheControlChange}
-            />
-
             <Form.Item
               label="Use in pass through routes"
               name="use_in_pass_through"
@@ -195,6 +189,12 @@ const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
                 className="bg-gray-600" 
               />
             </Form.Item>
+
+            <CacheControlSettings
+              form={form}
+              showCacheControl={showCacheControl}
+              onCacheControlChange={handleCacheControlChange}
+            />
             <Form.Item
               label="LiteLLM Params"
               name="litellm_extra_params"
diff --git a/ui/litellm-dashboard/src/components/add_model/cache_control_settings.tsx b/ui/litellm-dashboard/src/components/add_model/cache_control_settings.tsx
index 6bab202050..b7008c2449 100644
--- a/ui/litellm-dashboard/src/components/add_model/cache_control_settings.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/cache_control_settings.tsx
@@ -56,8 +56,8 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
       {showCacheControl && (
         <div className="ml-6 pl-4 border-l-2 border-gray-200">
           <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. 
-            If both are provided, the index takes precedence.
+            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>
           
           <Form.List
@@ -85,7 +85,7 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
                       name={[field.name, 'role']}
                       className="mb-0"
                       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
                         placeholder="Select a role"
@@ -108,7 +108,7 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
                       name={[field.name, 'index']}
                       className="mb-0"
                       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
                         type="number"
@@ -124,7 +124,7 @@ const CacheControlSettings: React.FC<CacheControlSettingsProps> = ({
                     
                     {fields.length > 1 && (
                       <MinusCircleOutlined 
-                        className="text-red-500 cursor-pointer text-lg mt-8" 
+                        className="text-red-500 cursor-pointer text-lg ml-12"
                         onClick={() => {
                           remove(field.name);
                           setTimeout(() => {