🚀 feat: Claude 3.7 Support + Reasoning (#6008)

* fix: missing console color methods for admin scripts

* feat: Anthropic Claude 3.7 Sonnet Support

* feat: update eventsource to version 3.0.2 and upgrade @modelcontextprotocol/sdk to 1.4.1

* fix: update DynamicInput to handle number type and improve initial value logic

* feat: first pass Anthropic Reasoning (Claude 3.7)

* feat: implement streaming support in AnthropicClient with reasoning UI handling

* feat: add missing xAI (grok) models

client/src/components/SidePanel/Parameters/DynamicInput.tsx

@@ -27,12 +27,9 @@ function DynamicInput({
   const localize = useLocalize();
   const { preset } = useChatContext();
 
-  const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | null>({
+  const [setInputValue, inputValue, setLocalValue] = useDebouncedInput<string | number>({
     optionKey: optionType !== OptionTypes.Custom ? settingKey : undefined,
-    initialValue:
-      optionType !== OptionTypes.Custom
-        ? (conversation?.[settingKey] as string)
-        : (defaultValue as string),
+    initialValue: optionType !== OptionTypes.Custom ? conversation?.[settingKey] : defaultValue,
     setter: () => ({}),
     setOption,
   });
@@ -88,9 +85,13 @@ function DynamicInput({
           <Input
             id={`${settingKey}-dynamic-input`}
             disabled={readonly}
-            value={inputValue ?? ''}
+            value={inputValue ?? defaultValue ?? ''}
             onChange={handleInputChange}
-            placeholder={placeholderCode ? localize(placeholder as TranslationKeys) || placeholder : placeholder}
+            placeholder={
+              placeholderCode
+                ? localize(placeholder as TranslationKeys) || placeholder
+                : placeholder
+            }
             className={cn(
               'flex h-10 max-h-10 w-full resize-none border-none bg-surface-secondary px-3 py-2',
             )}
@@ -98,7 +99,11 @@ function DynamicInput({
         </HoverCardTrigger>
         {description && (
           <OptionHover
-            description={descriptionCode ? localize(description as TranslationKeys) || description : description}
+            description={
+              descriptionCode
+                ? localize(description as TranslationKeys) || description
+                : description
+            }
             side={ESide.Left}
           />
         )}

client/src/components/SidePanel/Parameters/settings.ts

@@ -278,12 +278,42 @@ const anthropic: Record<string, SettingDefinition> = {
     description: 'com_endpoint_anthropic_prompt_cache',
     descriptionCode: true,
     type: 'boolean',
-    default: true,
+    default: anthropicSettings.promptCache.default,
     component: 'switch',
     optionType: 'conversation',
     showDefault: false,
     columnSpan: 2,
   },
+  thinking: {
+    key: 'thinking',
+    label: 'com_endpoint_thinking',
+    labelCode: true,
+    description: 'com_endpoint_anthropic_thinking',
+    descriptionCode: true,
+    type: 'boolean',
+    default: anthropicSettings.thinking.default,
+    component: 'switch',
+    optionType: 'conversation',
+    showDefault: false,
+    columnSpan: 2,
+  },
+  thinkingBudget: {
+    key: 'thinkingBudget',
+    label: 'com_endpoint_thinking_budget',
+    labelCode: true,
+    description: 'com_endpoint_anthropic_thinking_budget',
+    descriptionCode: true,
+    type: 'number',
+    component: 'input',
+    default: anthropicSettings.thinkingBudget.default,
+    range: {
+      min: anthropicSettings.thinkingBudget.min,
+      max: anthropicSettings.thinkingBudget.max,
+      step: anthropicSettings.thinkingBudget.step,
+    },
+    optionType: 'conversation',
+    columnSpan: 2,
+  },
 };
 
 const bedrock: Record<string, SettingDefinition> = {
@@ -492,6 +522,8 @@ const anthropicConfig: SettingsConfiguration = [
   anthropic.topK,
   librechat.resendFiles,
   anthropic.promptCache,
+  anthropic.thinking,
+  anthropic.thinkingBudget,
 ];
 
 const anthropicCol1: SettingsConfiguration = [
@@ -508,6 +540,8 @@ const anthropicCol2: SettingsConfiguration = [
   anthropic.topK,
   librechat.resendFiles,
   anthropic.promptCache,
+  anthropic.thinking,
+  anthropic.thinkingBudget,
 ];
 
 const bedrockAnthropic: SettingsConfiguration = [

client/src/locales/en/translation.json

@@ -140,6 +140,10 @@
   "com_endpoint_ai": "AI",
   "com_endpoint_anthropic_maxoutputtokens": "Maximum number of tokens that can be generated in the response. Specify a lower value for shorter responses and a higher value for longer responses. Note: models may stop before reaching this maximum.",
   "com_endpoint_anthropic_prompt_cache": "Prompt caching allows reusing large context or instructions across API calls, reducing costs and latency",
+  "com_endpoint_thinking": "Thinking",
+  "com_endpoint_thinking_budget": "Thinking Budget",
+  "com_endpoint_anthropic_thinking": "Enables internal reasoning for supported Claude models (3.7 Sonnet). Note: requires \"Thinking Budget\" to be set and lower than \"Max Output Tokens\"",
+  "com_endpoint_anthropic_thinking_budget": "Determines the max number of tokens Claude is allowed use for its internal reasoning process. Larger budgets can improve response quality by enabling more thorough analysis for complex problems, although Claude may not use the entire budget allocated, especially at ranges above 32K. This setting must be lower than \"Max Output Tokens.\"",
   "com_endpoint_anthropic_temp": "Ranges from 0 to 1. Use temp closer to 0 for analytical / multiple choice, and closer to 1 for creative and generative tasks. We recommend altering this or Top P but not both.",
   "com_endpoint_anthropic_topk": "Top-k changes how the model selects tokens for output. A top-k of 1 means the selected token is the most probable among all tokens in the model's vocabulary (also called greedy decoding), while a top-k of 3 means that the next token is selected from among the 3 most probable tokens (using temperature).",
   "com_endpoint_anthropic_topp": "Top-p changes how the model selects tokens for output. Tokens are selected from most K (see topK parameter) probable to least until the sum of their probabilities equals the top-p value.",
@@ -829,4 +833,4 @@
   "com_ui_zoom": "Zoom",
   "com_user_message": "You",
   "com_warning_resubmit_unsupported": "Resubmitting the AI message is not supported for this endpoint."
-}
+}