@lobehub/chat 1.64.2 → 1.65.0

package/locales/ru-RU/models.json

@@ -467,6 +467,9 @@
   "anthropic.claude-3-5-sonnet-20241022-v2:0": {
     "description": "Claude 3.5 Sonnet установил новые стандарты в отрасли, превзойдя модели конкурентов и Claude 3 Opus, продемонстрировав отличные результаты в широкомасштабных оценках, при этом обладая скоростью и стоимостью наших моделей среднего уровня."
   },
+  "anthropic.claude-3-7-sonnet-20250219-v1:0": {
+    "description": "Claude 3.7 Sonnet — это самая мощная модель от Anthropic, обладающая передовыми характеристиками в области высоко сложных задач. Она может обрабатывать открытые подсказки и невидимые сценарии, демонстрируя отличную плавность и человеческое понимание. Claude 3.7 Sonnet демонстрирует передовые возможности генеративного AI. Claude 3.7 Sonnet может обрабатывать изображения и возвращать текстовый вывод, имея контекстное окно в 200K."
+  },
   "anthropic.claude-3-haiku-20240307-v1:0": {
     "description": "Claude 3 Haiku — это самая быстрая и компактная модель от Anthropic, обеспечивающая почти мгновенную скорость ответа. Она может быстро отвечать на простые запросы и запросы. Клиенты смогут создать бесшовный AI-опыт, имитирующий человеческое взаимодействие. Claude 3 Haiku может обрабатывать изображения и возвращать текстовый вывод, имея контекстное окно в 200K."
   },
@@ -524,6 +527,9 @@
   "claude-3-5-sonnet-20241022": {
     "description": "Claude 3.5 Sonnet предлагает возможности, превышающие Opus, и скорость, превышающую Sonnet, при этом сохраняя ту же цену. Sonnet особенно хорош в программировании, данных, визуальной обработке и代理задачах."
   },
+  "claude-3-7-sonnet-20250219": {
+    "description": "Claude 3.7 Sonnet — это самая мощная модель от Anthropic, обладающая передовыми характеристиками в области высоко сложных задач. Она может обрабатывать открытые подсказки и невидимые сценарии, демонстрируя отличную плавность и человеческое понимание. Claude 3.7 Sonnet демонстрирует передовые возможности генеративного AI. Claude 3.7 Sonnet может обрабатывать изображения и возвращать текстовый вывод, имея контекстное окно в 200K."
+  },
   "claude-3-haiku-20240307": {
     "description": "Claude 3 Haiku — это самая быстрая и компактная модель от Anthropic, предназначенная для достижения почти мгновенных ответов. Она обладает быстрой и точной направленной производительностью."
   },

package/locales/tr-TR/chat.json

@@ -31,7 +31,13 @@
   },
   "duplicateTitle": "{{title}} Kopya",
   "emptyAgent": "Asistan yok",
-  "extendControls": {
+  "extendParams": {
+    "enableReasoning": {
+      "title": "Derin Düşünmeyi Aç"
+    },
+    "reasoningBudgetToken": {
+      "title": "Düşünme Tüketim Tokeni"
+    },
     "title": "Model Genişletme Özellikleri"
   },
   "historyRange": "Geçmiş Aralığı",

package/locales/tr-TR/models.json

@@ -467,6 +467,9 @@
   "anthropic.claude-3-5-sonnet-20241022-v2:0": {
     "description": "Claude 3.5 Sonnet, sektör standartlarını yükselterek, rakip modelleri ve Claude 3 Opus'u geride bırakarak, geniş bir değerlendirme yelpazesinde mükemmel performans sergilemekte, orta seviye modellerimizin hız ve maliyet avantajlarını sunmaktadır."
   },
+  "anthropic.claude-3-7-sonnet-20250219-v1:0": {
+    "description": "Claude 3.7 Sonnet, endüstri standartlarını yükselterek, rakip modelleri ve Claude 3 Opus'u geride bırakarak, geniş bir değerlendirme yelpazesinde mükemmel performans sergilemekte, orta seviye modellerimizin hız ve maliyet avantajlarını sunmaktadır."
+  },
   "anthropic.claude-3-haiku-20240307-v1:0": {
     "description": "Claude 3 Haiku, Anthropic'in en hızlı ve en kompakt modelidir, neredeyse anında yanıt hızı sunar. Basit sorgular ve taleplere hızlı bir şekilde yanıt verebilir. Müşteriler, insan etkileşimini taklit eden kesintisiz bir AI deneyimi oluşturabileceklerdir. Claude 3 Haiku, görüntüleri işleyebilir ve metin çıktısı döndürebilir, 200K bağlam penceresine sahiptir."
   },
@@ -524,6 +527,9 @@
   "claude-3-5-sonnet-20241022": {
     "description": "Claude 3.5 Sonnet, Opus'tan daha fazla yetenek ve Sonnet'ten daha hızlı performans sunarken, aynı fiyatta kalmaktadır. Sonnet, programlama, veri bilimi, görsel işleme ve aracı görevlerde özellikle güçlüdür."
   },
+  "claude-3-7-sonnet-20250219": {
+    "description": "Claude 3.7 Sonnet, endüstri standartlarını yükselterek, rakip modelleri ve Claude 3 Opus'u geride bırakarak, geniş bir değerlendirme yelpazesinde mükemmel performans sergilemekte, orta seviye modellerimizin hız ve maliyet avantajlarını sunmaktadır."
+  },
   "claude-3-haiku-20240307": {
     "description": "Claude 3 Haiku, Anthropic'in en hızlı ve en kompakt modelidir, neredeyse anlık yanıtlar sağlamak için tasarlanmıştır. Hızlı ve doğru yönlendirme performansına sahiptir."
   },

package/locales/vi-VN/chat.json

@@ -31,7 +31,13 @@
   },
   "duplicateTitle": "{{title}} Bản sao",
   "emptyAgent": "Không có trợ lý",
-  "extendControls": {
+  "extendParams": {
+    "enableReasoning": {
+      "title": "Bật tư duy sâu sắc"
+    },
+    "reasoningBudgetToken": {
+      "title": "Token tiêu tốn cho tư duy"
+    },
     "title": "Chức năng mở rộng mô hình"
   },
   "historyRange": "Phạm vi lịch sử",

package/locales/vi-VN/models.json

@@ -467,6 +467,9 @@
   "anthropic.claude-3-5-sonnet-20241022-v2:0": {
     "description": "Claude 3.5 Sonnet nâng cao tiêu chuẩn ngành, hiệu suất vượt trội so với các mô hình đối thủ và Claude 3 Opus, thể hiện xuất sắc trong các đánh giá rộng rãi, đồng thời có tốc độ và chi phí tương đương với các mô hình tầm trung của chúng tôi."
   },
+  "anthropic.claude-3-7-sonnet-20250219-v1:0": {
+    "description": "Claude 3.7 Sonnet là mô hình AI mạnh nhất của Anthropic, với hiệu suất vượt trội so với các mô hình đối thủ và Claude 3 Opus, thể hiện xuất sắc trong nhiều đánh giá rộng rãi, đồng thời có tốc độ và chi phí tương đương với các mô hình tầm trung của chúng tôi."
+  },
   "anthropic.claude-3-haiku-20240307-v1:0": {
     "description": "Claude 3 Haiku là mô hình nhanh nhất và gọn nhẹ nhất của Anthropic, cung cấp tốc độ phản hồi gần như ngay lập tức. Nó có thể nhanh chóng trả lời các truy vấn và yêu cầu đơn giản. Khách hàng sẽ có thể xây dựng trải nghiệm AI liền mạch mô phỏng tương tác của con người. Claude 3 Haiku có thể xử lý hình ảnh và trả về đầu ra văn bản, với cửa sổ ngữ cảnh 200K."
   },
@@ -524,6 +527,9 @@
   "claude-3-5-sonnet-20241022": {
     "description": "Claude 3.5 Sonnet cung cấp khả năng vượt xa Opus và tốc độ nhanh hơn Sonnet, đồng thời giữ mức giá giống như Sonnet. Sonnet đặc biệt xuất sắc trong lập trình, khoa học dữ liệu, xử lý hình ảnh và các nhiệm vụ đại diện."
   },
+  "claude-3-7-sonnet-20250219": {
+    "description": "Claude 3.7 Sonnet là mô hình AI mạnh nhất của Anthropic, với hiệu suất vượt trội so với các mô hình đối thủ và Claude 3 Opus, thể hiện xuất sắc trong nhiều đánh giá rộng rãi, đồng thời có tốc độ và chi phí tương đương với các mô hình tầm trung của chúng tôi."
+  },
   "claude-3-haiku-20240307": {
     "description": "Claude 3 Haiku là mô hình nhanh nhất và gọn nhẹ nhất của Anthropic, được thiết kế để đạt được phản hồi gần như ngay lập tức. Nó có hiệu suất định hướng nhanh và chính xác."
   },

package/locales/zh-CN/chat.json

@@ -31,7 +31,13 @@
   },
   "duplicateTitle": "{{title}} 副本",
   "emptyAgent": "暂无助手",
-  "extendControls": {
+  "extendParams": {
+    "enableReasoning": {
+      "title": "开启深度思考"
+    },
+    "reasoningBudgetToken": {
+      "title": "思考消耗 Token"
+    },
     "title": "模型扩展功能"
   },
   "historyRange": "历史范围",

package/locales/zh-CN/models.json

@@ -467,6 +467,9 @@
   "anthropic.claude-3-5-sonnet-20241022-v2:0": {
     "description": "Claude 3.5 Sonnet 提升了行业标准，性能超过竞争对手模型和 Claude 3 Opus，在广泛的评估中表现出色，同时具有我们中等层级模型的速度和成本。"
   },
+  "anthropic.claude-3-7-sonnet-20250219-v1:0": {
+    "description": "Claude 3.7 sonnet 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.7 Sonnet 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。"
+  },
   "anthropic.claude-3-haiku-20240307-v1:0": {
     "description": "Claude 3 Haiku 是 Anthropic 最快、最紧凑的模型，提供近乎即时的响应速度。它可以快速回答简单的查询和请求。客户将能够构建模仿人类互动的无缝 AI 体验。Claude 3 Haiku 可以处理图像并返回文本输出，具有 200K 的上下文窗口。"
   },
@@ -524,6 +527,9 @@
   "claude-3-5-sonnet-20241022": {
     "description": "Claude 3.5 Sonnet 提供了超越 Opus 的能力和比 Sonnet 更快的速度，同时保持与 Sonnet 相同的价格。Sonnet 特别擅长编程、数据科学、视觉处理、代理任务。"
   },
+  "claude-3-7-sonnet-20250219": {
+    "description": "Claude 3.7 Sonnet 是 Anthropic 迄今为止最智能的模型，也是市场上首个混合推理模型。Claude 3.7 Sonnet 可以产生近乎即时的响应或延长的逐步思考，用户可以清晰地看到这些过程。Sonnet 特别擅长编程、数据科学、视觉处理、代理任务。"
+  },
   "claude-3-haiku-20240307": {
     "description": "Claude 3 Haiku 是 Anthropic 的最快且最紧凑的模型，旨在实现近乎即时的响应。它具有快速且准确的定向性能。"
   },

package/locales/zh-TW/chat.json

@@ -31,7 +31,13 @@
   },
   "duplicateTitle": "{{title}} 副本",
   "emptyAgent": "暫無助手",
-  "extendControls": {
+  "extendParams": {
+    "enableReasoning": {
+      "title": "開啟深度思考"
+    },
+    "reasoningBudgetToken": {
+      "title": "思考消耗 Token"
+    },
     "title": "模型擴展功能"
   },
   "historyRange": "歷史範圍",

package/locales/zh-TW/models.json

@@ -467,6 +467,9 @@
   "anthropic.claude-3-5-sonnet-20241022-v2:0": {
     "description": "Claude 3.5 Sonnet 提升了行業標準，性能超越競爭對手模型和 Claude 3 Opus，在廣泛的評估中表現出色，同時具備我們中等層級模型的速度和成本。"
   },
+  "anthropic.claude-3-7-sonnet-20250219-v1:0": {
+    "description": "Claude 3.7 Sonnet 提升了行業標準，性能超越競爭對手模型和 Claude 3 Opus，在廣泛的評估中表現出色，同時具備我們中等層級模型的速度和成本。"
+  },
   "anthropic.claude-3-haiku-20240307-v1:0": {
     "description": "Claude 3 Haiku是Anthropic最快、最緊湊的模型，提供近乎即時的響應速度。它可以快速回答簡單的查詢和請求。客戶將能夠構建模仿人類互動的無縫AI體驗。Claude 3 Haiku可以處理圖像並返回文本輸出，具有200K的上下文窗口。"
   },
@@ -524,6 +527,9 @@
   "claude-3-5-sonnet-20241022": {
     "description": "Claude 3.5 Sonnet 提供了超越 Opus 的能力和比 Sonnet 更快的速度，同時保持與 Sonnet 相同的價格。Sonnet 特別擅長編程、數據科學、視覺處理、代理任務。"
   },
+  "claude-3-7-sonnet-20250219": {
+    "description": "Claude 3.7 Sonnet 提升了行業標準，性能超越競爭對手模型和 Claude 3 Opus，在廣泛的評估中表現出色，同時具備我們中等層級模型的速度和成本。"
+  },
   "claude-3-haiku-20240307": {
     "description": "Claude 3 Haiku 是 Anthropic 的最快且最緊湊的模型，旨在實現近乎即時的響應。它具有快速且準確的定向性能。"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "1.64.2",
+  "version": "1.65.0",
   "description": "Lobe Chat - an open-source, high-performance chatbot framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",
@@ -104,7 +104,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.5.2",
     "@ant-design/pro-components": "^2.8.3",
-    "@anthropic-ai/sdk": "^0.36.3",
+    "@anthropic-ai/sdk": "^0.37.0",
     "@auth/core": "^0.37.4",
     "@aws-sdk/client-bedrock-runtime": "^3.723.0",
     "@aws-sdk/client-s3": "^3.723.0",

package/src/config/aiModels/anthropic.ts

@@ -4,6 +4,32 @@ const anthropicChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      reasoning: true,
+      vision: true,
+    },
+    contextWindowTokens: 200_000,
+    description:
+      'Claude 3.7 Sonnet 是 Anthropic 迄今为止最智能的模型，也是市场上首个混合推理模型。Claude 3.7 Sonnet 可以产生近乎即时的响应或延长的逐步思考，用户可以清晰地看到这些过程。Sonnet 特别擅长编程、数据科学、视觉处理、代理任务。',
+    displayName: 'Claude 3.7 Sonnet 0219',
+    enabled: true,
+    id: 'claude-3-7-sonnet-20250219',
+    maxOutput: 8192,
+    pricing: {
+      cachedInput: 0.3,
+      input: 3,
+      output: 15,
+      writeCacheInput: 3.75,
+    },
+    releasedAt: '2025-02-24',
+    settings: {
+      extendParams: ['enableReasoning', 'reasoningBudgetToken'],
+    },
+    type: 'chat',
+  },
+  {
+    abilities: {
+      functionCall: true,
+      vision: true,
     },
     contextWindowTokens: 200_000,
     description:

package/src/config/aiModels/bedrock.ts

@@ -22,6 +22,26 @@ const bedrockChatModels: AIChatModelCard[] = [
       tokens: 32_000,
     },
 */
+  {
+    abilities: {
+      functionCall: true,
+      reasoning: true,
+      vision: true,
+    },
+    contextWindowTokens: 200_000,
+    description:
+      'Claude 3.7 sonnet 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.7 Sonnet 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+    displayName: 'Claude 3.7 Sonnet',
+    enabled: true,
+    id: 'anthropic.claude-3-7-sonnet-20250219-v1:0',
+    maxOutput: 8192,
+    pricing: {
+      input: 3,
+      output: 15,
+    },
+    releasedAt: '2025-02-24',
+    type: 'chat',
+  },
   {
     abilities: {
       functionCall: true,
@@ -33,6 +53,7 @@ const bedrockChatModels: AIChatModelCard[] = [
     displayName: 'Claude 3.5 Sonnet',
     enabled: true,
     id: 'anthropic.claude-3-5-sonnet-20241022-v2:0',
+    maxOutput: 8192,
     pricing: {
       input: 3,
       output: 15,
@@ -51,7 +72,7 @@ const bedrockChatModels: AIChatModelCard[] = [
     displayName: 'Claude 3.5 Sonnet v2 (Inference profile)',
     enabled: true,
     id: 'us.anthropic.claude-3-5-sonnet-20241022-v2:0',
-    maxOutput: 4096,
+    maxOutput: 8192,
     pricing: {
       input: 3,
       output: 15,
@@ -69,8 +90,8 @@ const bedrockChatModels: AIChatModelCard[] = [
       'Claude 3.5 Sonnet 提升了行业标准，性能超过竞争对手模型和 Claude 3 Opus，在广泛的评估中表现出色，同时具有我们中等层级模型的速度和成本。',
     displayName: 'Claude 3.5 Sonnet 0620',
     enabled: true,
-
     id: 'anthropic.claude-3-5-sonnet-20240620-v1:0',
+    maxOutput: 8192,
     pricing: {
       input: 3,
       output: 15,

package/src/config/aiModels/google.ts

@@ -4,6 +4,7 @@ const googleChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 2_097_152 + 8192,
@@ -19,6 +20,10 @@ const googleChatModels: AIChatModelCard[] = [
       output: 0,
     },
     releasedAt: '2025-02-05',
+    settings: {
+      searchImpl: 'params',
+      searchProvider: 'google',
+    },
     type: 'chat',
   },
   {
@@ -49,6 +54,7 @@ const googleChatModels: AIChatModelCard[] = [
   {
     abilities: {
       functionCall: true,
+      search: true,
       vision: true,
     },
     contextWindowTokens: 1_048_576 + 8192,
@@ -65,6 +71,7 @@ const googleChatModels: AIChatModelCard[] = [
     releasedAt: '2025-02-05',
     settings: {
       searchImpl: 'params',
+      searchProvider: 'google',
     },
     type: 'chat',
   },

package/src/config/modelProviders/anthropic.ts

@@ -3,6 +3,40 @@ import { ModelProviderCard } from '@/types/llm';
 // ref: https://docs.anthropic.com/en/docs/about-claude/models#model-names
 const Anthropic: ModelProviderCard = {
   chatModels: [
+    {
+      contextWindowTokens: 200_000,
+      description:
+        'Claude 3.7 sonnet 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.7 Sonnet 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+      displayName: 'Claude 3.7 Sonnet',
+      enabled: true,
+      functionCall: true,
+      id: 'claude-3-7-sonnet-20250219',
+      maxOutput: 8192,
+      pricing: {
+        cachedInput: 0.1,
+        input: 1,
+        output: 5,
+        writeCacheInput: 1.25,
+      },
+      releasedAt: '2025-02-24',
+    },
+    {
+      contextWindowTokens: 200_000,
+      description:
+        'Claude 3.7 sonnet Extended thinking 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.7 Sonnet 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+      displayName: 'Claude 3.7 Sonnet Extended thinking',
+      enabled: true,
+      functionCall: true,
+      id: 'claude-3-7-sonnet-20250219',
+      maxOutput: 64_000,
+      pricing: {
+        cachedInput: 0.1,
+        input: 1,
+        output: 5,
+        writeCacheInput: 1.25,
+      },
+      releasedAt: '2025-02-24',
+    },
     {
       contextWindowTokens: 200_000,
       description:

package/src/config/modelProviders/bedrock.ts

@@ -26,6 +26,57 @@ const Bedrock: ModelProviderCard = {
       tokens: 32_000,
     },
 */
+    {
+      contextWindowTokens: 200_000,
+      description:
+        'Claude 3.7 sonnet 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.7 Sonnet 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+      displayName: 'Claude 3.7 Sonnet',
+      enabled: true,
+      functionCall: true,
+      id: 'anthropic.claude-3-7-sonnet-20250219-v1:0',
+      maxOutput: 8192,
+      pricing: {
+        cachedInput: 0.1,
+        input: 1,
+        output: 5,
+        writeCacheInput: 1.25,
+      },
+      releasedAt: '2025-02-24',
+    },
+    {
+      contextWindowTokens: 200_000,
+      description:
+        'Claude 3.7 sonnet Extended thinking 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.7 Sonnet 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+      displayName: 'Claude 3.7 Sonnet Extended thinking',
+      enabled: true,
+      functionCall: true,
+      id: 'anthropic.claude-3-7-sonnet-20250219-v1:0',
+      maxOutput: 64_000,
+      pricing: {
+        cachedInput: 0.1,
+        input: 1,
+        output: 5,
+        writeCacheInput: 1.25,
+      },
+      releasedAt: '2025-02-24',
+    },
+    {
+      contextWindowTokens: 200_000,
+      description:
+        'Claude 3.5 Haiku 是 Anthropic 最快的下一代模型。与 Claude 3 Haiku 相比，Claude 3.5 Haiku 在各项技能上都有所提升，并在许多智力基准测试中超越了上一代最大的模型 Claude 3 Opus。',
+      displayName: 'Claude 3.5 Haiku',
+      enabled: true,
+      functionCall: true,
+      id: 'anthropic.claude-3-5-haiku-20241022-v1:0',
+      maxOutput: 8192,
+      pricing: {
+        cachedInput: 0.1,
+        input: 1,
+        output: 5,
+        writeCacheInput: 1.25,
+      },
+      releasedAt: '2024-11-05',
+    },
     {
       contextWindowTokens: 200_000,
       description:

package/src/const/settings/agent.ts

@@ -19,7 +19,9 @@ export const DEFAULT_AGENT_CHAT_CONFIG: LobeAgentChatConfig = {
   enableAutoCreateTopic: true,
   enableCompressHistory: true,
   enableHistoryCount: true,
+  enableReasoning: true,
   historyCount: 8,
+  reasoningBudgetToken: 1024,
   searchMode: 'off',
 };
 

package/src/features/ChatInput/ActionBar/Model/ControlsForm.tsx

@@ -1,32 +1,57 @@
 import { Form } from '@lobehub/ui';
+import type { FormItemProps } from '@lobehub/ui';
 import { Switch } from 'antd';
+import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/slices/chat';
 import { aiModelSelectors, useAiInfraStore } from '@/store/aiInfra';
 
+import ReasoningTokenSlider from './ReasoningTokenSlider';
+
 const ControlsForm = memo(() => {
-  const [model, provider] = useAgentStore((s) => [
+  const { t } = useTranslation('chat');
+  const [model, provider, updateAgentChatConfig] = useAgentStore((s) => [
     agentSelectors.currentAgentModel(s),
     agentSelectors.currentAgentModelProvider(s),
+    s.updateAgentChatConfig,
   ]);
-  const modelExtendControls = useAiInfraStore(
-    aiModelSelectors.modelExtendControls(model, provider),
-  );
+  const config = useAgentStore(agentSelectors.currentAgentChatConfig, isEqual);
+
+  const modelExtendParams = useAiInfraStore(aiModelSelectors.modelExtendParams(model, provider));
+
+  const items: FormItemProps[] = [
+    {
+      children: <Switch />,
+      label: t('extendParams.enableReasoning.title'),
+      minWidth: undefined,
+      name: 'enableReasoning',
+    },
+    {
+      children: <ReasoningTokenSlider />,
+      label: t('extendParams.reasoningBudgetToken.title'),
+      layout: 'vertical',
+      minWidth: undefined,
+      name: 'reasoningBudgetToken',
+      style: {
+        paddingBottom: 0,
+      },
+    },
+  ];
 
   return (
     <Form
-      itemMinWidth={200}
-      items={modelExtendControls!.map((item: any) => ({
-        children: <Switch />,
-        label: item.key,
-        minWidth: undefined,
-        name: item.key,
-      }))}
+      initialValues={config}
+      items={
+        (modelExtendParams || [])
+          .map((item: any) => items.find((i) => i.name === item))
+          .filter(Boolean) as FormItemProps[]
+      }
       itemsType={'flat'}
-      onValuesChange={(_, values) => {
-        console.log(values);
+      onValuesChange={async (_, values) => {
+        await updateAgentChatConfig(values);
       }}
       size={'small'}
       style={{ fontSize: 12 }}

package/src/features/ChatInput/ActionBar/Model/ReasoningTokenSlider.tsx

@@ -0,0 +1,92 @@
+import { InputNumber, Slider } from 'antd';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+
+const Kibi = 1024;
+
+const exponent = (num: number) => Math.log2(num);
+const getRealValue = (num: number) => Math.round(Math.pow(2, num));
+const powerKibi = (num: number) => Math.round(Math.pow(2, num) * Kibi);
+
+interface MaxTokenSliderProps {
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  value?: number;
+}
+
+const MaxTokenSlider = memo<MaxTokenSliderProps>(({ value, onChange, defaultValue }) => {
+  const [token, setTokens] = useMergeState(0, {
+    defaultValue,
+    onChange,
+    value: value,
+  });
+
+  const [powValue, setPowValue] = useMergeState(0, {
+    defaultValue: exponent(typeof defaultValue === 'undefined' ? 0 : defaultValue / 1024),
+    value: exponent(typeof value === 'undefined' ? 0 : value / Kibi),
+  });
+
+  const updateWithPowValue = (value: number) => {
+    setPowValue(value);
+
+    setTokens(powerKibi(value));
+  };
+
+  const updateWithRealValue = (value: number) => {
+    setTokens(Math.round(value));
+
+    setPowValue(exponent(value / Kibi));
+  };
+
+  const marks = useMemo(() => {
+    return {
+      [exponent(1)]: '1k',
+      [exponent(2)]: '2k',
+      [exponent(4)]: '4k', // 4 kibi = 4096
+      [exponent(8)]: '8k',
+      [exponent(16)]: '16k',
+      [exponent(32)]: '32k',
+      [exponent(64)]: '64k',
+    };
+  }, []);
+
+  return (
+    <Flexbox align={'center'} gap={12} horizontal>
+      <Flexbox flex={1}>
+        <Slider
+          marks={marks}
+          max={exponent(64)}
+          min={exponent(1)}
+          onChange={updateWithPowValue}
+          step={null}
+          tooltip={{
+            formatter: (x) => {
+              if (typeof x === 'undefined') return;
+
+              let value = getRealValue(x);
+
+              if (value < Kibi) return ((value * Kibi) / 1000).toFixed(0) + 'k';
+            },
+          }}
+          value={powValue}
+        />
+      </Flexbox>
+      <div>
+        <InputNumber
+          changeOnWheel
+          min={0}
+          onChange={(e) => {
+            if (!e && e !== 0) return;
+
+            updateWithRealValue(e);
+          }}
+          step={4 * Kibi}
+          style={{ width: 60 }}
+          value={token}
+        />
+      </div>
+    </Flexbox>
+  );
+});
+export default MaxTokenSlider;

package/src/features/ChatInput/ActionBar/Model/index.tsx

@@ -1,5 +1,5 @@
 import { ModelIcon } from '@lobehub/icons';
-import { ActionIcon, Tooltip } from '@lobehub/ui';
+import { ActionIcon } from '@lobehub/ui';
 import { Popover } from 'antd';
 import { createStyles } from 'antd-style';
 import { Settings2Icon } from 'lucide-react';
@@ -63,8 +63,8 @@ const ModelSwitch = memo(() => {
     agentSelectors.currentAgentModelProvider(s),
   ]);
 
-  const isModelHasExtendControls = useAiInfraStore(
-    aiModelSelectors.isModelHasExtendControls(model, provider),
+  const isModelHasExtendParams = useAiInfraStore(
+    aiModelSelectors.isModelHasExtendParams(model, provider),
   );
 
   const isMobile = useIsMobile();
@@ -82,34 +82,29 @@ const ModelSwitch = memo(() => {
   //   );
 
   return (
-    <Flexbox
-      align={'center'}
-      className={isModelHasExtendControls ? styles.container : ''}
-      horizontal
-    >
+    <Flexbox align={'center'} className={isModelHasExtendParams ? styles.container : ''} horizontal>
       <ModelSwitchPanel>
         <Center
-          className={cx(styles.model, isModelHasExtendControls && styles.modelWithControl)}
+          className={cx(styles.model, isModelHasExtendParams && styles.modelWithControl)}
           height={36}
           width={36}
         >
-          <Tooltip placement={'bottom'} title={[provider, model].join(' / ')}>
-            <div className={styles.icon}>
-              <ModelIcon model={model} size={22} />
-            </div>
-          </Tooltip>
+          <div className={styles.icon}>
+            <ModelIcon model={model} size={22} />
+          </div>
         </Center>
       </ModelSwitchPanel>
 
-      {isModelHasExtendControls && (
+      {isModelHasExtendParams && (
         <Flexbox style={{ marginInlineStart: -4 }}>
           <Popover
             arrow={false}
             content={<ControlsForm />}
-            open
+            placement={'topLeft'}
             styles={{
               body: {
-                minWidth: isMobile ? undefined : 200,
+                minWidth: isMobile ? undefined : 350,
+                paddingBlock: 4,
                 width: isMobile ? '100vw' : undefined,
               },
             }}
@@ -118,7 +113,7 @@ const ModelSwitch = memo(() => {
               icon={Settings2Icon}
               placement={'bottom'}
               style={{ borderRadius: 20 }}
-              title={t('extendControls.title')}
+              title={t('extendParams.title')}
             />
           </Popover>
         </Flexbox>