@lobehub/chat 1.0.11 → 1.0.13

package/src/features/AgentSetting/hooks/useAgentSettings.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+
+import { useStoreApi } from '../store';
+import { PublicAction } from '../store/action';
+
+export type AgentSettingsInstance = PublicAction;
+
+export const useAgentSettings = (): AgentSettingsInstance => {
+  const storeApi = useStoreApi();
+
+  const {
+    autocompleteMeta,
+    autocompleteAllMeta,
+    autocompleteAgentTitle,
+    autocompleteAgentDescription,
+    autocompleteAgentTags,
+    autoPickEmoji,
+  } = storeApi.getState();
+
+  return useMemo(
+    () => ({
+      autoPickEmoji,
+      autocompleteAgentDescription,
+      autocompleteAgentTags,
+      autocompleteAgentTitle,
+      autocompleteAllMeta,
+      autocompleteMeta,
+    }),
+    [],
+  );
+};

package/src/features/AgentSetting/index.tsx

@@ -1,26 +1,3 @@
-import AgentChat from './AgentChat';
-import AgentMeta from './AgentMeta';
-import AgentModal from './AgentModal';
-import AgentPlugin from './AgentPlugin';
-import AgentPrompt from './AgentPrompt';
-import AgentTTS from './AgentTTS';
-import StoreUpdater, { StoreUpdaterProps } from './StoreUpdater';
-import { Provider, createStore } from './store';
-
-type AgentSettingsProps = StoreUpdaterProps;
-
-const AgentSettings = (props: AgentSettingsProps) => {
-  return (
-    <Provider createStore={createStore}>
-      <StoreUpdater {...props} />
-      <AgentPrompt />
-      <AgentMeta />
-      <AgentChat />
-      <AgentModal />
-      <AgentTTS />
-      <AgentPlugin />
-    </Provider>
-  );
-};
-
-export default AgentSettings;
+export { AgentSettings } from './AgentSettings';
+export { AgentSettingsStore } from './AgentSettingsStore';
+export type { AgentSettingsInstance } from './hooks/useAgentSettings';

package/src/features/AgentSetting/store/action.ts

@@ -7,9 +7,13 @@ import { chainSummaryDescription } from '@/chains/summaryDescription';
 import { chainSummaryTags } from '@/chains/summaryTags';
 import { TraceNameMap, TracePayload, TraceTopicType } from '@/const/trace';
 import { chatService } from '@/services/chat';
+import { useUserStore } from '@/store/user';
+import { systemAgentSelectors } from '@/store/user/slices/settings/selectors';
 import { LobeAgentChatConfig, LobeAgentConfig } from '@/types/agent';
 import { MetaData } from '@/types/meta';
+import { SystemAgentItem } from '@/types/user/settings';
 import { MessageTextChunk } from '@/utils/fetch';
+import { merge } from '@/utils/merge';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from '../store/initialState';
@@ -17,15 +21,12 @@ import { State, initialState } from './initialState';
 import { ConfigDispatch, configReducer } from './reducers/config';
 import { MetaDataDispatch, metaDataReducer } from './reducers/meta';
 
-/**
- * 设置操作
- */
-export interface Action {
+export interface PublicAction {
   /**
    * 自动选择表情
    * @param id - 表情的 ID
    */
-  autoPickEmoji: () => void;
+  autoPickEmoji: () => Promise<void>;
   /**
    * 自动完成代理描述
    * @param id - 代理的 ID
@@ -44,20 +45,25 @@ export interface Action {
    */
   autocompleteAllMeta: (replace?: boolean) => void;
   autocompleteMeta: (key: keyof MetaData) => void;
+}
+
+export interface Action extends PublicAction {
   dispatchConfig: (payload: ConfigDispatch) => void;
   dispatchMeta: (payload: MetaDataDispatch) => void;
   getCurrentTracePayload: (data: Partial<TracePayload>) => TracePayload;
 
+  internal_getSystemAgentForMeta: () => SystemAgentItem;
   resetAgentConfig: () => void;
-  resetAgentMeta: () => void;
 
+  resetAgentMeta: () => void;
   setAgentConfig: (config: DeepPartial<LobeAgentConfig>) => void;
   setAgentMeta: (meta: Partial<MetaData>) => void;
-  setChatConfig: (config: Partial<LobeAgentChatConfig>) => void;
 
+  setChatConfig: (config: Partial<LobeAgentChatConfig>) => void;
   streamUpdateMetaArray: (key: keyof MetaData) => any;
   streamUpdateMetaString: (key: keyof MetaData) => any;
   toggleAgentPlugin: (pluginId: string, state?: boolean) => void;
+
   /**
    * 更新加载状态
    * @param key - SessionLoadingState 的键
@@ -77,17 +83,19 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
 
     const systemRole = config.systemRole;
 
-    const emoji = await chatService.fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
+      onFinish: async (emoji) => {
+        dispatchMeta({ type: 'update', value: { avatar: emoji } });
+      },
       onLoadingChange: (loading) => {
         get().updateLoadingState('avatar', loading);
       },
-      params: chainPickEmoji([meta.title, meta.description, systemRole].filter(Boolean).join(',')),
+      params: merge(
+        get().internal_getSystemAgentForMeta(),
+        chainPickEmoji([meta.title, meta.description, systemRole].filter(Boolean).join(',')),
+      ),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.EmojiPicker }),
     });
-
-    if (emoji) {
-      dispatchMeta({ type: 'update', value: { avatar: emoji } });
-    }
   },
   autocompleteAgentDescription: async () => {
     const { dispatchMeta, config, meta, updateLoadingState, streamUpdateMetaString } = get();
@@ -109,7 +117,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
         updateLoadingState('description', loading);
       },
       onMessageHandle: streamUpdateMetaString('description'),
-      params: chainSummaryDescription(systemRole),
+      params: merge(get().internal_getSystemAgentForMeta(), chainSummaryDescription(systemRole)),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.SummaryAgentDescription }),
     });
   },
@@ -125,6 +133,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { tags: ['...'] } });
 
+    // Get current agent for agentMeta
     chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { tags: preValue } });
@@ -133,8 +142,9 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
         updateLoadingState('tags', loading);
       },
       onMessageHandle: streamUpdateMetaArray('tags'),
-      params: chainSummaryTags(
-        [meta.title, meta.description, systemRole].filter(Boolean).join(','),
+      params: merge(
+        get().internal_getSystemAgentForMeta(),
+        chainSummaryTags([meta.title, meta.description, systemRole].filter(Boolean).join(',')),
       ),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.SummaryAgentTags }),
     });
@@ -159,7 +169,10 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
         updateLoadingState('title', loading);
       },
       onMessageHandle: streamUpdateMetaString('title'),
-      params: chainSummaryAgentName([meta.description, systemRole].filter(Boolean).join(',')),
+      params: merge(
+        get().internal_getSystemAgentForMeta(),
+        chainSummaryAgentName([meta.description, systemRole].filter(Boolean).join(',')),
+      ),
       trace: get().getCurrentTracePayload({ traceName: TraceNameMap.SummaryAgentTitle }),
     });
   },
@@ -231,6 +244,11 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     topicId: TraceTopicType.AgentSettings,
     ...data,
   }),
+
+  internal_getSystemAgentForMeta: () => {
+    return systemAgentSelectors.agentMeta(useUserStore.getState());
+  },
+
   resetAgentConfig: () => {
     get().dispatchConfig({ type: 'reset' });
   },
@@ -238,13 +256,13 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
   resetAgentMeta: () => {
     get().dispatchMeta({ type: 'reset' });
   },
-
   setAgentConfig: (config) => {
     get().dispatchConfig({ config, type: 'update' });
   },
   setAgentMeta: (meta) => {
     get().dispatchMeta({ type: 'update', value: meta });
   },
+
   setChatConfig: (config) => {
     get().setAgentConfig({ chatConfig: config });
   },

package/src/features/ChatInput/useSend.ts

@@ -31,5 +31,13 @@ export const useSendMessage = () => {
 
     updateInputMessage('');
     useFileStore.getState().clearImageList();
+
+    // const hasSystemRole = agentSelectors.hasSystemRole(useAgentStore.getState());
+    // const agentSetting = useAgentStore.getState().agentSettingInstance;
+
+    // // if there is a system role, then we need to use agent setting instance to autocomplete agent meta
+    // if (hasSystemRole && !!agentSetting) {
+    //   agentSetting.autocompleteAllMeta();
+    // }
   }, []);
 };

package/src/features/Conversation/Error/ErrorJsonViewer.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 import { ChatMessageError } from '@/types/message';
 
 interface ErrorJSONViewerProps {
-  error?: ChatMessageError;
+  error?: ChatMessageError | null;
   id: string;
 }
 

package/src/features/Conversation/Messages/Assistant/ToolCalls/index.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Highlighter, Icon } from '@lobehub/ui';
+import { Avatar, Icon } from '@lobehub/ui';
 import isEqual from 'fast-deep-equal';
 import { Loader2, LucideChevronDown, LucideChevronRight, LucideToyBrick } from 'lucide-react';
 import { CSSProperties, memo, useState } from 'react';
@@ -10,6 +10,7 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 
+import Arguments from '../../components/Arguments';
 import { useStyles } from './style';
 
 export interface InspectorProps {
@@ -64,7 +65,7 @@ const CallItem = memo<InspectorProps>(
           </Flexbox>
           <Icon icon={open ? LucideChevronDown : LucideChevronRight} />
         </Flexbox>
-        {(open || loading) && <Highlighter language={'json'}>{requestArgs}</Highlighter>}
+        {(open || loading) && <Arguments arguments={requestArgs} />}
       </Flexbox>
     );
   },

package/src/features/Conversation/Messages/Tool/index.tsx

@@ -1,4 +1,3 @@
-import { Snippet } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -7,10 +6,11 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { ChatMessage } from '@/types/message';
 
 import PluginRender from '../../Plugins/Render';
+import Arguments from '../components/Arguments';
 import Inspector from './Inspector';
 
 export const ToolMessage = memo<ChatMessage>(({ id, content, plugin }) => {
-  const loading = useChatStore(chatSelectors.isMessageGenerating(id));
+  const loading = useChatStore(chatSelectors.isPluginApiInvoking(id));
 
   const [showRender, setShow] = useState(plugin?.type !== 'default');
 
@@ -35,9 +35,7 @@ export const ToolMessage = memo<ChatMessage>(({ id, content, plugin }) => {
           type={plugin?.type}
         />
       ) : (
-        <Flexbox>
-          <Snippet>{plugin?.arguments || ''}</Snippet>
-        </Flexbox>
+        <Arguments arguments={plugin?.arguments} />
       )}
     </Flexbox>
   );

package/src/features/Conversation/Messages/components/Arguments.tsx

@@ -0,0 +1,20 @@
+import { Highlighter } from '@lobehub/ui';
+import { memo } from 'react';
+
+import { useYamlArguments } from '../hooks/useYamlArguments';
+
+export interface ArgumentsProps {
+  arguments?: string;
+}
+
+const Arguments = memo<ArgumentsProps>(({ arguments: args = '' }) => {
+  const yaml = useYamlArguments(args);
+
+  return (
+    <Highlighter language={'yaml'} showLanguage={false}>
+      {yaml}
+    </Highlighter>
+  );
+});
+
+export default Arguments;

package/src/features/Conversation/Messages/hooks/useYamlArguments.ts

@@ -0,0 +1,11 @@
+import { Allow, parse } from 'partial-json';
+import { stringify } from 'yaml';
+
+export const useYamlArguments = (args: string) => {
+  try {
+    const obj = parse(args, Allow.OBJ);
+    return stringify(obj);
+  } catch {
+    return args;
+  }
+};

package/src/features/ModelSelect/index.tsx

@@ -10,11 +10,12 @@ import { ModelProviderCard } from '@/types/llm';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
   select: css`
-    .${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
+    &.${prefixCls}-select-dropdown .${prefixCls}-select-item-option-grouped {
       padding-inline-start: 12px;
     }
   `,
 }));
+
 interface ModelOption {
   label: any;
   provider: string;
@@ -23,10 +24,11 @@ interface ModelOption {
 
 interface ModelSelectProps {
   onChange?: (props: { model: string; provider: string }) => void;
+  showAbility?: boolean;
   value?: string;
 }
 
-const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
+const ModelSelect = memo<ModelSelectProps>(({ value, onChange, showAbility = true }) => {
   const enabledList = useUserStore(modelProviderSelectors.modelProviderListForModelSelect, isEqual);
 
   const { styles } = useStyles();
@@ -34,7 +36,7 @@ const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
   const options = useMemo<SelectProps['options']>(() => {
     const getChatModels = (provider: ModelProviderCard) =>
       provider.chatModels.map((model) => ({
-        label: <ModelItemRender {...model} />,
+        label: <ModelItemRender {...model} showInfoTag={showAbility} />,
         provider: provider.id,
         value: model.id,
       }));
@@ -53,11 +55,11 @@ const ModelSelect = memo<ModelSelectProps>(({ value, onChange }) => {
 
   return (
     <Select
-      className={styles.select}
       onChange={(model, option) => {
         onChange?.({ model, provider: (option as unknown as ModelOption).provider });
       }}
       options={options}
+      popupClassName={styles.select}
       popupMatchSelectWidth={false}
       value={value}
     />

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

@@ -22,10 +22,6 @@ beforeEach(() => {
 
   // 使用 vi.spyOn 来模拟 chat.completions.create 方法
   vi.spyOn(instance['client'].messages, 'create').mockReturnValue(new ReadableStream() as any);
-
-  vi.spyOn(instance['client'].beta.tools.messages, 'create').mockReturnValue({
-    content: [],
-  } as any);
 });
 
 afterEach(() => {
@@ -260,35 +256,9 @@ describe('LobeAnthropicAI', () => {
         });
 
         // Assert
-        expect(instance['client'].beta.tools.messages.create).toHaveBeenCalled();
+        expect(instance['client'].messages.create).toHaveBeenCalled();
         expect(spyOn).toHaveBeenCalledWith(tools);
       });
-
-      it('should handle text and tool_use content correctly in transformResponseToStream', async () => {
-        // Arrange
-        const mockResponse = {
-          content: [
-            { type: 'text', text: 'Hello' },
-            { type: 'tool_use', id: 'tool1', name: 'tool1', input: 'input1' },
-          ],
-        };
-        // @ts-ignore
-        vi.spyOn(instance, 'transformResponseToStream').mockReturnValue(new ReadableStream());
-        vi.spyOn(instance['client'].beta.tools.messages, 'create').mockResolvedValue(
-          mockResponse as any,
-        );
-
-        // Act
-        await instance.chat({
-          messages: [{ content: 'Hello', role: 'user' }],
-          model: 'claude-3-haiku-20240307',
-          temperature: 0,
-          tools: [{ function: { name: 'tool1', description: 'desc1' }, type: 'function' }],
-        });
-
-        // Assert
-        expect(instance['transformResponseToStream']).toHaveBeenCalledWith(mockResponse);
-      });
     });
 
     describe('Error', () => {

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

@@ -30,41 +30,20 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
   async chat(payload: ChatStreamPayload, options?: ChatCompetitionOptions) {
     try {
       const anthropicPayload = this.buildAnthropicPayload(payload);
-
-      // if there is no tool, we can use the normal chat API
-      if (!anthropicPayload.tools || anthropicPayload.tools.length === 0) {
-        const response = await this.client.messages.create(
-          { ...anthropicPayload, stream: true },
-          {
-            signal: options?.signal,
-          },
-        );
-
-        const [prod, debug] = response.tee();
-
-        if (process.env.DEBUG_ANTHROPIC_CHAT_COMPLETION === '1') {
-          debugStream(debug.toReadableStream()).catch(console.error);
-        }
-
-        return StreamingResponse(AnthropicStream(prod, options?.callback), {
-          headers: options?.headers,
-        });
-      }
-
-      // or we should call the tool API
-      const response = await this.client.beta.tools.messages.create(
-        { ...anthropicPayload, stream: false },
-        { signal: options?.signal },
+      const response = await this.client.messages.create(
+        { ...anthropicPayload, stream: true },
+        {
+          signal: options?.signal,
+        },
       );
 
+      const [prod, debug] = response.tee();
+
       if (process.env.DEBUG_ANTHROPIC_CHAT_COMPLETION === '1') {
-        console.log('\n[no stream response]\n');
-        console.log(JSON.stringify(response) + '\n');
+        debugStream(debug.toReadableStream()).catch(console.error);
       }
 
-      const stream = this.transformResponseToStream(response);
-
-      return StreamingResponse(AnthropicStream(stream, options?.callback), {
+      return StreamingResponse(AnthropicStream(prod, options?.callback), {
         headers: options?.headers,
       });
     } catch (error) {
@@ -118,43 +97,10 @@ export class LobeAnthropicAI implements LobeRuntimeAI {
       model,
       system: system_message?.content as string,
       temperature,
-      // TODO: Anthropic sdk don't have tools interface currently
-      // @ts-ignore
       tools: buildAnthropicTools(tools),
       top_p,
     } satisfies Anthropic.MessageCreateParams;
   }
-
-  private transformResponseToStream = (response: Anthropic.Beta.Tools.ToolsBetaMessage) => {
-    return new ReadableStream<Anthropic.MessageStreamEvent>({
-      start(controller) {
-        response.content.forEach((content) => {
-          switch (content.type) {
-            case 'text': {
-              controller.enqueue({
-                delta: { text: content.text, type: 'text_delta' },
-                type: 'content_block_delta',
-              } as Anthropic.ContentBlockDeltaEvent);
-              break;
-            }
-            case 'tool_use': {
-              controller.enqueue({
-                delta: {
-                  tool_use: { id: content.id, input: content.input, name: content.name },
-                  type: 'tool_use',
-                },
-                type: 'content_block_delta',
-              } as any);
-            }
-          }
-        });
-
-        controller.enqueue({ type: 'message_stop' } as Anthropic.MessageStopEvent);
-
-        controller.close();
-      },
-    });
-  };
 }
 
 export default LobeAnthropicAI;

package/src/libs/agent-runtime/openai/index.test.ts

@@ -49,7 +49,7 @@ describe('LobeOpenAI', () => {
     });
 
     describe('Error', () => {
-      it('should return OpenAIBizError with an openai error response when OpenAI.APIError is thrown', async () => {
+      it('should return ProviderBizError with an openai error response when OpenAI.APIError is thrown', async () => {
         // Arrange
         const apiError = new OpenAI.APIError(
           400,
@@ -79,7 +79,7 @@ describe('LobeOpenAI', () => {
               error: { message: 'Bad Request' },
               status: 400,
             },
-            errorType: 'OpenAIBizError',
+            errorType: 'ProviderBizError',
             provider: 'openai',
           });
         }
@@ -89,11 +89,11 @@ describe('LobeOpenAI', () => {
         try {
           new LobeOpenAI({});
         } catch (e) {
-          expect(e).toEqual({ errorType: 'NoOpenAIAPIKey' });
+          expect(e).toEqual({ errorType: 'InvalidProviderAPIKey' });
         }
       });
 
-      it('should return OpenAIBizError with the cause when OpenAI.APIError is thrown with cause', async () => {
+      it('should return ProviderBizError with the cause when OpenAI.APIError is thrown with cause', async () => {
         // Arrange
         const errorInfo = {
           stack: 'abc',
@@ -119,13 +119,13 @@ describe('LobeOpenAI', () => {
               cause: { message: 'api is undefined' },
               stack: 'abc',
             },
-            errorType: 'OpenAIBizError',
+            errorType: 'ProviderBizError',
             provider: 'openai',
           });
         }
       });
 
-      it('should return OpenAIBizError with an cause response with desensitize Url', async () => {
+      it('should return ProviderBizError with an cause response with desensitize Url', async () => {
         // Arrange
         const errorInfo = {
           stack: 'abc',
@@ -155,7 +155,7 @@ describe('LobeOpenAI', () => {
               cause: { message: 'api is undefined' },
               stack: 'abc',
             },
-            errorType: 'OpenAIBizError',
+            errorType: 'ProviderBizError',
             provider: 'openai',
           });
         }

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

@@ -1,4 +1,3 @@
-import { AgentRuntimeErrorType } from '../error';
 import { ModelProvider } from '../types';
 import { LobeOpenAICompatibleFactory } from '../utils/openaiCompatibleFactory';
 
@@ -7,10 +6,5 @@ export const LobeOpenAI = LobeOpenAICompatibleFactory({
   debug: {
     chatCompletion: () => process.env.DEBUG_OPENAI_CHAT_COMPLETION === '1',
   },
-  errorType: {
-    bizError: AgentRuntimeErrorType.OpenAIBizError,
-    invalidAPIKey: AgentRuntimeErrorType.NoOpenAIAPIKey,
-  },
-
   provider: ModelProvider.OpenAI,
 });

package/src/libs/agent-runtime/utils/anthropicHelpers.ts

@@ -112,9 +112,9 @@ export const buildAnthropicMessages = (
 
 export const buildAnthropicTools = (tools?: OpenAI.ChatCompletionTool[]) =>
   tools?.map(
-    (tool): Anthropic.Beta.Tools.Tool => ({
+    (tool): Anthropic.Tool => ({
       description: tool.function.description,
-      input_schema: tool.function.parameters as Anthropic.Beta.Tools.Tool.InputSchema,
+      input_schema: tool.function.parameters as Anthropic.Tool.InputSchema,
       name: tool.function.name,
     }),
   );