@lobehub/chat 1.64.3 → 1.65.0

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/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>

package/src/libs/agent-runtime/anthropic/index.ts

@@ -97,12 +97,29 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
   }
 
   private async buildAnthropicPayload(payload: ChatStreamPayload) {
-    const { messages, model, max_tokens = 4096, temperature, top_p, tools } = payload;
+    const { messages, model, max_tokens, temperature, top_p, tools, thinking } = payload;
     const system_message = messages.find((m) => m.role === 'system');
     const user_messages = messages.filter((m) => m.role !== 'system');
 
+    if (!!thinking) {
+      const maxTokens =
+        max_tokens ?? (thinking?.budget_tokens ? thinking?.budget_tokens + 4096 : 4096);
+
+      // `temperature` may only be set to 1 when thinking is enabled.
+      // `top_p` must be unset when thinking is enabled.
+      return {
+        max_tokens: maxTokens,
+        messages: await buildAnthropicMessages(user_messages),
+        model,
+        system: system_message?.content as string,
+
+        thinking,
+        tools: buildAnthropicTools(tools),
+      } satisfies Anthropic.MessageCreateParams;
+    }
+
     return {
-      max_tokens,
+      max_tokens: max_tokens ?? 4096,
       messages: await buildAnthropicMessages(user_messages),
       model,
       system: system_message?.content as string,
@@ -124,29 +141,30 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
       method: 'GET',
     });
     const json = await response.json();
-  
+
     const modelList: AnthropicModelCard[] = json['data'];
-  
+
     return modelList
       .map((model) => {
-        const knownModel = LOBE_DEFAULT_MODEL_LIST.find((m) => model.id.toLowerCase() === m.id.toLowerCase());
+        const knownModel = LOBE_DEFAULT_MODEL_LIST.find(
+          (m) => model.id.toLowerCase() === m.id.toLowerCase(),
+        );
 
         return {
           contextWindowTokens: knownModel?.contextWindowTokens ?? undefined,
           displayName: model.display_name,
           enabled: knownModel?.enabled || false,
           functionCall:
-            model.id.toLowerCase().includes('claude-3')
-            || knownModel?.abilities?.functionCall
-            || false,
+            model.id.toLowerCase().includes('claude-3') ||
+            knownModel?.abilities?.functionCall ||
+            false,
           id: model.id,
-          reasoning:
-            knownModel?.abilities?.reasoning
-            || false,
+          reasoning: knownModel?.abilities?.reasoning || false,
           vision:
-            model.id.toLowerCase().includes('claude-3') && !model.id.toLowerCase().includes('claude-3-5-haiku')
-            || knownModel?.abilities?.vision
-            || false,
+            (model.id.toLowerCase().includes('claude-3') &&
+              !model.id.toLowerCase().includes('claude-3-5-haiku')) ||
+            knownModel?.abilities?.vision ||
+            false,
         };
       })
       .filter(Boolean) as ChatModelCard[];

package/src/libs/agent-runtime/types/chat.ts

@@ -88,8 +88,14 @@ export interface ChatStreamPayload {
    * @default 1
    */
   temperature: number;
+  /**
+   * use for Claude
+   */
+  thinking?: {
+    budget_tokens: number;
+    type: 'enabled' | 'disabled';
+  };
   tool_choice?: string;
-
   tools?: ChatCompletionTool[];
   /**
    * @title 控制生成文本中最高概率的单个令牌

package/src/libs/agent-runtime/utils/streams/anthropic.test.ts

@@ -384,6 +384,132 @@ describe('AnthropicStream', () => {
     expect(onToolCallMock).toHaveBeenCalledTimes(6);
   });
 
+  it('should handle thinking ', async () => {
+    const streams = [
+      {
+        type: 'message_start',
+        message: {
+          id: 'msg_01MNsLe7n1uVLtu6W8rCFujD',
+          type: 'message',
+          role: 'assistant',
+          model: 'claude-3-7-sonnet-20250219',
+          content: [],
+          stop_reason: null,
+          stop_sequence: null,
+          usage: {
+            input_tokens: 46,
+            cache_creation_input_tokens: 0,
+            cache_read_input_tokens: 0,
+            output_tokens: 11,
+          },
+        },
+      },
+      {
+        type: 'content_block_start',
+        index: 0,
+        content_block: { type: 'thinking', thinking: '', signature: '' },
+      },
+      {
+        type: 'content_block_delta',
+        index: 0,
+        delta: { type: 'thinking_delta', thinking: '我需要比较两个数字的' },
+      },
+      {
+        type: 'content_block_delta',
+        index: 0,
+        delta: { type: 'thinking_delta', thinking: '大小：9.8和9' },
+      },
+      {
+        type: 'content_block_delta',
+        index: 0,
+        delta: { type: 'thinking_delta', thinking: '11\n\n所以9.8比9.11大。' },
+      },
+      {
+        type: 'content_block_delta',
+        index: 0,
+        delta: {
+          type: 'signature_delta',
+          signature:
+            'EuYBCkQYAiJAHnHRJG4nPBrdTlo6CmXoyE8WYoQeoPiLnXaeuaM8ExdiIEkVvxK1DYXOz5sCubs2s/G1NsST8A003Zb8XmuhYBIMwDGMZSZ3+gxOEBpVGgzdpOlDNBTxke31SngiMKUk6WcSiA11OSVBuInNukoAhnRd5jPAEg7e5mIoz/qJwnQHV8I+heKUreP77eJdFipQaM3FHn+avEHuLa/Z/fu0O9BftDi+caB1UWDwJakNeWX1yYTvK+N1v4gRpKbj4AhctfYHMjq8qX9XTnXme5AGzCYC6HgYw2/RfalWzwNxI6k=',
+        },
+      },
+      { type: 'content_block_stop', index: 0 },
+      { type: 'content_block_start', index: 1, content_block: { type: 'text', text: '' } },
+      {
+        type: 'content_block_delta',
+        index: 1,
+        delta: { type: 'text_delta', text: '9.8比9.11大。' },
+      },
+      { type: 'content_block_stop', index: 1 },
+      {
+        type: 'message_delta',
+        delta: { stop_reason: 'end_turn', stop_sequence: null },
+        usage: { output_tokens: 354 },
+      },
+      { type: 'message_stop' },
+    ];
+
+    const mockReadableStream = new ReadableStream({
+      start(controller) {
+        streams.forEach((chunk) => {
+          controller.enqueue(chunk);
+        });
+        controller.close();
+      },
+    });
+
+    const protocolStream = AnthropicStream(mockReadableStream);
+
+    const decoder = new TextDecoder();
+    const chunks = [];
+
+    // @ts-ignore
+    for await (const chunk of protocolStream) {
+      chunks.push(decoder.decode(chunk, { stream: true }));
+    }
+
+    expect(chunks).toEqual(
+      [
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: data',
+        'data: {"id":"msg_01MNsLe7n1uVLtu6W8rCFujD","type":"message","role":"assistant","model":"claude-3-7-sonnet-20250219","content":[],"stop_reason":null,"stop_sequence":null,"usage":{"input_tokens":46,"cache_creation_input_tokens":0,"cache_read_input_tokens":0,"output_tokens":11}}\n',
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: reasoning',
+        'data: ""\n',
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: reasoning',
+        'data: "我需要比较两个数字的"\n',
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: reasoning',
+        'data: "大小：9.8和9"\n',
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: reasoning',
+        'data: "11\\n\\n所以9.8比9.11大。"\n',
+        // Tool calls
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: reasoning_signature',
+        `data: "EuYBCkQYAiJAHnHRJG4nPBrdTlo6CmXoyE8WYoQeoPiLnXaeuaM8ExdiIEkVvxK1DYXOz5sCubs2s/G1NsST8A003Zb8XmuhYBIMwDGMZSZ3+gxOEBpVGgzdpOlDNBTxke31SngiMKUk6WcSiA11OSVBuInNukoAhnRd5jPAEg7e5mIoz/qJwnQHV8I+heKUreP77eJdFipQaM3FHn+avEHuLa/Z/fu0O9BftDi+caB1UWDwJakNeWX1yYTvK+N1v4gRpKbj4AhctfYHMjq8qX9XTnXme5AGzCYC6HgYw2/RfalWzwNxI6k="\n`,
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: data',
+        `data: {"type":"content_block_stop","index":0}\n`,
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: data',
+        `data: ""\n`,
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: text',
+        `data: "9.8比9.11大。"\n`,
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: data',
+        `data: {"type":"content_block_stop","index":1}\n`,
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: stop',
+        'data: "end_turn"\n',
+        'id: msg_01MNsLe7n1uVLtu6W8rCFujD',
+        'event: stop',
+        'data: "message_stop"\n',
+      ].map((item) => `${item}\n`),
+    );
+  });
   it('should handle ReadableStream input', async () => {
     const mockReadableStream = new ReadableStream({
       start(controller) {

package/src/libs/agent-runtime/utils/streams/anthropic.ts

@@ -14,12 +14,12 @@ import {
 
 export const transformAnthropicStream = (
   chunk: Anthropic.MessageStreamEvent,
-  stack: StreamContext,
+  context: StreamContext,
 ): StreamProtocolChunk => {
   // maybe need another structure to add support for multiple choices
   switch (chunk.type) {
     case 'message_start': {
-      stack.id = chunk.message.id;
+      context.id = chunk.message.id;
       return { data: chunk.message, id: chunk.message.id, type: 'data' };
     }
     case 'content_block_start': {
@@ -27,12 +27,12 @@ export const transformAnthropicStream = (
         const toolChunk = chunk.content_block;
 
         // if toolIndex is not defined, set it to 0
-        if (typeof stack.toolIndex === 'undefined') {
-          stack.toolIndex = 0;
+        if (typeof context.toolIndex === 'undefined') {
+          context.toolIndex = 0;
         }
         // if toolIndex is defined, increment it
         else {
-          stack.toolIndex += 1;
+          context.toolIndex += 1;
         }
 
         const toolCall: StreamToolCallChunkData = {
@@ -41,22 +41,36 @@ export const transformAnthropicStream = (
             name: toolChunk.name,
           },
           id: toolChunk.id,
-          index: stack.toolIndex,
+          index: context.toolIndex,
           type: 'function',
         };
 
-        stack.tool = { id: toolChunk.id, index: stack.toolIndex, name: toolChunk.name };
+        context.tool = { id: toolChunk.id, index: context.toolIndex, name: toolChunk.name };
 
-        return { data: [toolCall], id: stack.id, type: 'tool_calls' };
+        return { data: [toolCall], id: context.id, type: 'tool_calls' };
       }
 
-      return { data: chunk.content_block.text, id: stack.id, type: 'data' };
+      if (chunk.content_block.type === 'thinking') {
+        const thinkingChunk = chunk.content_block;
+
+        return { data: thinkingChunk.thinking, id: context.id, type: 'reasoning' };
+      }
+
+      if (chunk.content_block.type === 'redacted_thinking') {
+        return {
+          data: chunk.content_block.data,
+          id: context.id,
+          type: 'reasoning',
+        };
+      }
+
+      return { data: chunk.content_block.text, id: context.id, type: 'data' };
     }
 
     case 'content_block_delta': {
       switch (chunk.delta.type) {
         case 'text_delta': {
-          return { data: chunk.delta.text, id: stack.id, type: 'text' };
+          return { data: chunk.delta.text, id: context.id, type: 'text' };
         }
 
         case 'input_json_delta': {
@@ -64,34 +78,50 @@ export const transformAnthropicStream = (
 
           const toolCall: StreamToolCallChunkData = {
             function: { arguments: delta },
-            index: stack.toolIndex || 0,
+            index: context.toolIndex || 0,
             type: 'function',
           };
 
           return {
             data: [toolCall],
-            id: stack.id,
+            id: context.id,
             type: 'tool_calls',
           } as StreamProtocolToolCallChunk;
         }
 
+        case 'signature_delta': {
+          return {
+            data: chunk.delta.signature,
+            id: context.id,
+            type: 'reasoning_signature' as any,
+          };
+        }
+
+        case 'thinking_delta': {
+          return {
+            data: chunk.delta.thinking,
+            id: context.id,
+            type: 'reasoning',
+          };
+        }
+
         default: {
           break;
         }
       }
-      return { data: chunk, id: stack.id, type: 'data' };
+      return { data: chunk, id: context.id, type: 'data' };
     }
 
     case 'message_delta': {
-      return { data: chunk.delta.stop_reason, id: stack.id, type: 'stop' };
+      return { data: chunk.delta.stop_reason, id: context.id, type: 'stop' };
     }
 
     case 'message_stop': {
-      return { data: 'message_stop', id: stack.id, type: 'stop' };
+      return { data: 'message_stop', id: context.id, type: 'stop' };
     }
 
     default: {
-      return { data: chunk, id: stack.id, type: 'data' };
+      return { data: chunk, id: context.id, type: 'data' };
     }
   }
 };

package/src/libs/agent-runtime/utils/streams/protocol.ts

@@ -12,6 +12,10 @@ export interface StreamContext {
    * this flag is used to check if the pplx citation is returned,and then not return it again
    */
   returnedPplxCitation?: boolean;
+  thinking?: {
+    id: string;
+    name: string;
+  };
   tool?: {
     id: string;
     index: number;

package/src/locales/default/chat.ts

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