@lobehub/chat 0.102.1 → 0.102.3

package/src/app/api/openai/errorResponse.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+
+import { ChatErrorType, ErrorResponse, ErrorType } from '@/types/fetch';
+
+import { createErrorResponse } from './errorResponse';
+
+describe('createErrorResponse', () => {
+  // 测试各种错误类型的状态码
+  it('returns a 401 status for NoAPIKey error type', () => {
+    const errorType = ChatErrorType.NoAPIKey;
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(401);
+  });
+
+  it('returns a 401 status for InvalidAccessCode error type', () => {
+    const errorType = ChatErrorType.InvalidAccessCode;
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(401);
+  });
+
+  it('returns a 577 status for OpenAIBizError error type', () => {
+    const errorType = ChatErrorType.OpenAIBizError;
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(577);
+  });
+
+  // 测试默认情况
+  it('returns the same error type as status for unknown error types', () => {
+    const errorType = 500; // 假设500是一个未知的错误类型
+    const response = createErrorResponse(errorType);
+    expect(response.status).toBe(errorType);
+  });
+
+  // 测试返回的Response对象是否包含正确的body和errorType
+  it('returns a Response object with the correct body and errorType', () => {
+    const errorType = ChatErrorType.NoAPIKey;
+    const body = { message: 'No API key provided' };
+    const response = createErrorResponse(errorType, body);
+    return response.json().then((data) => {
+      expect(data).toEqual({
+        body,
+        errorType,
+      });
+    });
+  });
+
+  // 测试没有提供body时，返回的Response对象的body是否为undefined
+  it('returns a Response object with an undefined body when no body is provided', () => {
+    const errorType = ChatErrorType.NoAPIKey;
+    const response = createErrorResponse(errorType);
+    return response.json().then((data) => {
+      expect(data.body).toBeUndefined();
+    });
+  });
+});

package/src/app/chat/features/ChatHeader/PluginTag/PluginStatus.tsx

@@ -6,7 +6,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import ManifestPreviewer from '@/components/ManifestPreviewer';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
 
 interface PluginStatusProps {
@@ -19,7 +20,7 @@ const PluginStatus = memo<PluginStatusProps>(({ title, id, deprecated }) => {
   const [status, isCustom, fetchPluginManifest] = usePluginStore((s) => [
     pluginSelectors.getPluginManifestLoadingStatus(id)(s),
     pluginSelectors.isCustomPlugin(id)(s),
-    s.fetchPluginManifest,
+    s.installPlugin,
   ]);
 
   const manifest = usePluginStore(pluginSelectors.getPluginManifestById(id));

package/src/app/chat/features/ChatHeader/PluginTag/index.tsx

@@ -5,7 +5,8 @@ import isEqual from 'fast-deep-equal';
 import { LucideToyBrick } from 'lucide-react';
 import { memo } from 'react';
 
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import PluginStatus from './PluginStatus';
 

package/src/app/chat/features/Conversation/ChatList/Error/Plugin/PluginSettings.tsx

@@ -7,7 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
 
 import { ErrorActionContainer, useStyles } from '../style';

package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import { Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/selectors';
+import { ChatMessage } from '@/types/chatMessage';
+
+import { AssistantMessageExtra } from './Assistant';
+
+// Mock TTS and Translate components
+vi.mock('./TTS', () => ({
+  default: vi.fn(() => <div>TTS Component</div>),
+}));
+vi.mock('./Translate', () => ({
+  default: vi.fn(() => <div>Translate Component</div>),
+}));
+
+// Mock dependencies
+vi.mock('@/store/session', () => ({
+  useSessionStore: vi.fn(),
+}));
+vi.mock('@/store/session/selectors', () => ({
+  agentSelectors: {
+    currentAgentModel: vi.fn(),
+  },
+}));
+
+const mockData: ChatMessage = {
+  content: 'test-content',
+  createAt: 0,
+  id: 'abc',
+  meta: { avatar: '', backgroundColor: '', description: '', tags: [], title: '' },
+  role: 'assistant',
+  updateAt: 0,
+};
+
+describe('AssistantMessageExtra', () => {
+  beforeEach(() => {
+    // Set default mock return values
+    (useSessionStore as unknown as Mock).mockImplementation(() => ({
+      chatLoadingId: null,
+    }));
+    (agentSelectors.currentAgentModel as Mock).mockReturnValue('defaultModel');
+  });
+
+  it('should not render content if extra is undefined', async () => {
+    render(<AssistantMessageExtra {...mockData} />);
+    expect(screen.queryByText('defaultModel')).toBeNull();
+    expect(screen.queryByText('TTS Component')).toBeNull();
+    expect(screen.queryByText('Translate Component')).toBeNull();
+  });
+
+  it('should not render content if extra is defined but does not contain fromModel, tts, or translate', async () => {
+    render(<AssistantMessageExtra {...mockData} />);
+    expect(screen.queryByText('defaultModel')).toBeNull();
+    expect(screen.queryByText('TTS Component')).toBeNull();
+    expect(screen.queryByText('Translate Component')).toBeNull();
+  });
+
+  it('should render Tag component if extra.fromModel exists and does not match the current model', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel' }} />);
+
+    expect(screen.getByText('otherModel')).toBeInTheDocument();
+  });
+
+  it('should render TTS component if extra.fromModel and extra.tts coexist', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ fromModel: 'otherModel', tts: {} }} />);
+
+    expect(screen.getByText('otherModel')).toBeInTheDocument();
+    expect(screen.getByText('TTS Component')).toBeInTheDocument();
+  });
+
+  it('should render Translate component if extra.translate exists', async () => {
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: {} }} />);
+    expect(screen.getByText('Translate Component')).toBeInTheDocument();
+  });
+
+  it('should receive the correct loading attribute if loading is true for TTS and Translate components', async () => {
+    (useSessionStore as unknown as Mock).mockImplementation(() => ({
+      chatLoadingId: 'test-id',
+    }));
+    render(<AssistantMessageExtra {...mockData} extra={{ translate: {}, tts: {} }} />);
+    expect(screen.getByText('TTS Component')).toBeInTheDocument();
+    expect(screen.getByText('Translate Component')).toBeInTheDocument();
+  });
+});

package/src/app/chat/features/Conversation/ChatList/Extras/Assistant.tsx

@@ -17,7 +17,11 @@ export const AssistantMessageExtra: RenderMessageExtra = memo<ChatMessage>(
     const loading = useSessionStore((s) => s.chatLoadingId === id);
 
     const showModelTag = extra?.fromModel && model !== extra?.fromModel;
-    const showExtra = extra?.showModelTag || extra?.translate || extra?.tts;
+    const showTranslate = !!extra?.translate;
+    const showTTS = !!extra?.tts;
+
+    const showExtra = showModelTag || showTranslate || showTTS;
+
     if (!showExtra) return;
 
     return (

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/Settings.tsx

@@ -4,7 +4,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import PluginSettingsModal from '@/features/PluginSettingsModal';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 const Settings = memo<{ id: string }>(({ id }) => {
   const item = usePluginStore(pluginSelectors.getPluginManifestById(id));

package/src/app/chat/features/Conversation/ChatList/Plugins/Inspector/index.tsx

@@ -14,7 +14,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import PluginResult from './PluginResultJSON';
 import Settings from './Settings';

package/src/app/chat/features/Conversation/ChatList/Plugins/Render/StandaloneType/Iframe.tsx

@@ -2,7 +2,8 @@ import { PluginRequestPayload } from '@lobehub/chat-plugin-sdk';
 import { Skeleton } from 'antd';
 import { memo, useRef, useState } from 'react';
 
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 import { useSessionStore } from '@/store/session';
 import { chatSelectors } from '@/store/session/selectors';
 

package/src/app/chat/features/Conversation/index.tsx

@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import SafeSpacing from '@/components/SafeSpacing';
-import { usePluginStore } from '@/store/plugin';
 
 import ChatList from './ChatList';
 import ChatScrollAnchor from './ScrollAnchor';
+import { usePluginsInit } from './usePluginsInit';
 
 const useStyles = createStyles(
   ({ css, responsive, stylish }) => css`
@@ -31,8 +31,8 @@ const Conversation = memo<ConversationProps>(({ mobile, chatInput }) => {
   const { t } = useTranslation('chat');
   const { styles } = useStyles();
 
-  const useFetchPluginList = usePluginStore((s) => s.useFetchPluginList);
-  useFetchPluginList();
+  // fetch plugin list and init plugins
+  usePluginsInit();
 
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>

package/src/app/chat/features/Conversation/usePluginsInit.ts

@@ -0,0 +1,14 @@
+import { usePluginStore } from '@/store/plugin';
+import { useSessionStore } from '@/store/session';
+import { agentSelectors } from '@/store/session/slices/agentConfig';
+
+export const usePluginsInit = () => {
+  const [plugins] = useSessionStore((s) => [agentSelectors.currentAgentPlugins(s)]);
+
+  const useFetchPluginStore = usePluginStore((s) => s.useFetchPluginStore);
+  useFetchPluginStore();
+
+  const checkPluginsIsInstalled = usePluginStore((s) => s.useCheckPluginsIsInstalled);
+
+  checkPluginsIsInstalled(plugins);
+};

package/src/app/settings/llm/LLM/Checker.tsx

@@ -6,8 +6,8 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import { chatService } from '@/services/chat';
 import { ChatMessageError } from '@/types/chatMessage';
-import { fetchPresetTaskResult } from '@/utils/fetch';
 
 import { getModelList } from './getModelList';
 
@@ -28,7 +28,7 @@ const Checker = memo<CheckerProps>(({ checkModel }) => {
       getModelList();
     }
 
-    const data = await fetchPresetTaskResult({
+    const data = await chatService.fetchPresetTaskResult({
       onError: (_, rawError) => {
         setError(rawError);
       },

package/src/features/AgentSetting/AgentPlugin/LocalPluginItem.tsx

@@ -5,7 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import DevModal from '@/features/PluginDevModal';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import { useStore } from '../store';
 
@@ -19,8 +20,8 @@ const MarketList = memo<{ id: string }>(({ id }) => {
 
   const [useFetchPluginList, fetchPluginManifest, deleteCustomPlugin, updateCustomPlugin] =
     usePluginStore((s) => [
-      s.useFetchPluginList,
-      s.fetchPluginManifest,
+      s.useFetchPluginStore,
+      s.installPlugin,
       s.deleteCustomPlugin,
       s.updateCustomPlugin,
     ]);

package/src/features/AgentSetting/AgentPlugin/MarketList.tsx

@@ -9,7 +9,8 @@ import { Flexbox } from 'react-layout-kit';
 import DevModal from 'src/features/PluginDevModal';
 
 import { FORM_STYLE } from '@/const/layoutTokens';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import { useStore } from '../store';
 import LocalPluginItem from './LocalPluginItem';
@@ -47,8 +48,8 @@ const MarketList = memo(() => {
 
   const [useFetchPluginList, fetchPluginManifest, saveToDevList, updateNewDevPlugin] =
     usePluginStore((s) => [
-      s.useFetchPluginList,
-      s.fetchPluginManifest,
+      s.useFetchPluginStore,
+      s.installPlugin,
       s.saveToCustomPluginList,
       s.updateNewCustomPlugin,
     ]);

package/src/features/AgentSetting/AgentPlugin/PluginSettings.tsx

@@ -8,7 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { FORM_STYLE } from '@/const/layoutTokens';
 import { transformPluginSettings } from '@/features/PluginSettings';
 import PluginSettingRender from '@/features/PluginSettings/PluginSettingRender';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 import { useStore } from '../store';
 
@@ -30,7 +31,7 @@ const PluginSettings = memo(() => {
   const [plugins] = useStore((s) => [s.config.plugins || [], !!s.config.plugins]);
 
   const [useFetchPluginList, updatePluginSettings] = usePluginStore((s) => [
-    s.useFetchPluginList,
+    s.useFetchPluginStore,
     s.updatePluginSettings,
   ]);
   const pluginList = usePluginStore(pluginSelectors.pluginList);

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

@@ -4,9 +4,9 @@ import { chainPickEmoji } from '@/chains/pickEmoji';
 import { chainSummaryAgentName } from '@/chains/summaryAgentName';
 import { chainSummaryDescription } from '@/chains/summaryDescription';
 import { chainSummaryTags } from '@/chains/summaryTags';
+import { chatService } from '@/services/chat';
 import { MetaData } from '@/types/meta';
 import { LobeAgentConfig } from '@/types/session';
-import { fetchPresetTaskResult } from '@/utils/fetch';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { SessionLoadingState } from '../store/initialState';
@@ -74,7 +74,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
 
     const systemRole = config.systemRole;
 
-    const emoji = await fetchPresetTaskResult({
+    const emoji = await chatService.fetchPresetTaskResult({
       onLoadingChange: (loading) => {
         get().updateLoadingState('avatar', loading);
       },
@@ -97,7 +97,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { description: '...' } });
 
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { description: preValue } });
       },
@@ -120,7 +120,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { tags: ['...'] } });
 
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { tags: preValue } });
       },
@@ -145,7 +145,7 @@ export const store: StateCreator<Store, [['zustand/devtools', never]]> = (set, g
     // 替换为 ...
     dispatchMeta({ type: 'update', value: { title: '...' } });
 
-    fetchPresetTaskResult({
+    chatService.fetchPresetTaskResult({
       onError: () => {
         dispatchMeta({ type: 'update', value: { title: previousTitle } });
       },

package/src/features/PluginDevModal/MetaForm.tsx

@@ -5,7 +5,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { settingsSelectors, useGlobalStore } from '@/store/global';
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 const EmojiPicker = dynamic(() => import('@lobehub/ui/es/EmojiPicker'), { ssr: false });
 

package/src/features/PluginSettingsModal/index.tsx

@@ -7,7 +7,8 @@ import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
 
 import PluginSettingsConfig from '@/features/PluginSettings';
-import { pluginHelpers, pluginSelectors, usePluginStore } from '@/store/plugin';
+import { pluginHelpers, usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
 
 interface PluginSettingsModalProps {
   id: string;

package/src/services/chat.ts

@@ -0,0 +1,84 @@
+import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/chat-plugin-sdk';
+import { merge } from 'lodash-es';
+
+import { VISION_MODEL_WHITE_LIST } from '@/const/llm';
+import { usePluginStore } from '@/store/plugin';
+import { pluginSelectors } from '@/store/plugin/selectors';
+import { initialLobeAgentConfig } from '@/store/session/initialState';
+import type { OpenAIChatStreamPayload } from '@/types/openai/chat';
+import { fetchAIFactory, getMessageError } from '@/utils/fetch';
+
+import { createHeaderWithOpenAI } from './_header';
+import { OPENAI_URLS, URLS } from './_url';
+
+interface FetchOptions {
+  signal?: AbortSignal | undefined;
+}
+
+class ChatService {
+  getChatCompletion = (
+    { plugins: enabledPlugins, ...params }: Partial<OpenAIChatStreamPayload>,
+    options?: FetchOptions,
+  ) => {
+    const payload = merge(
+      {
+        model: initialLobeAgentConfig.model,
+        stream: true,
+        ...initialLobeAgentConfig.params,
+      },
+      params,
+    );
+    // ============   preprocess tools   ============ //
+
+    const filterTools = pluginSelectors.enabledSchema(enabledPlugins)(usePluginStore.getState());
+
+    // the rule that model can use tools:
+    // 1. tools is not empty
+    // 2. model is not in vision white list, because vision model can't use tools
+    // TODO: we need to find some method to let vision model use tools
+    const shouldUseTools =
+      filterTools.length > 0 && !VISION_MODEL_WHITE_LIST.includes(payload.model);
+
+    const functions = shouldUseTools ? filterTools : undefined;
+
+    return fetch(OPENAI_URLS.chat, {
+      body: JSON.stringify({ ...payload, functions }),
+      headers: createHeaderWithOpenAI({ 'Content-Type': 'application/json' }),
+      method: 'POST',
+      signal: options?.signal,
+    });
+  };
+
+  /**
+   * run the plugin api to get result
+   * @param params
+   * @param options
+   */
+  runPluginApi = async (params: PluginRequestPayload, options?: FetchOptions) => {
+    const { usePluginStore } = await import('@/store/plugin');
+
+    const s = usePluginStore.getState();
+
+    const settings = pluginSelectors.getPluginSettingsById(params.identifier)(s);
+    const manifest = pluginSelectors.getPluginManifestById(params.identifier)(s);
+
+    const gatewayURL = manifest?.gateway;
+
+    const res = await fetch(gatewayURL ?? URLS.plugins, {
+      body: JSON.stringify({ ...params, manifest }),
+      headers: createHeadersWithPluginSettings(settings),
+      method: 'POST',
+      signal: options?.signal,
+    });
+
+    if (!res.ok) {
+      throw await getMessageError(res);
+    }
+
+    return await res.text();
+  };
+
+  fetchPresetTaskResult = fetchAIFactory(this.getChatCompletion);
+}
+
+export const chatService = new ChatService();

package/src/services/plugin.ts

@@ -1,39 +1,21 @@
-import { PluginRequestPayload, createHeadersWithPluginSettings } from '@lobehub/chat-plugin-sdk';
+import { LobeChatPluginsMarketIndex } from '@lobehub/chat-plugin-sdk';
 
-import { pluginSelectors, usePluginStore } from '@/store/plugin';
-import { getMessageError } from '@/utils/fetch';
+import { getPluginIndexJSON } from '@/const/url';
+import { getCurrentLanguage } from '@/store/global/helpers';
 
-import { URLS } from './_url';
+class PluginService {
+  /**
+   * get plugin list from store
+   */
+  getPluginList = async () => {
+    const url = getPluginIndexJSON(getCurrentLanguage());
 
-interface FetchChatModelOptions {
-  signal?: AbortSignal | undefined;
-  withPlugin?: boolean;
-}
-
-/**
- * 请求插件结果´
- */
-export const fetchPlugin = async (
-  params: PluginRequestPayload,
-  options?: FetchChatModelOptions,
-) => {
-  const s = usePluginStore.getState();
-
-  const settings = pluginSelectors.getPluginSettingsById(params.identifier)(s);
-  const manifest = pluginSelectors.getPluginManifestById(params.identifier)(s);
+    const res = await fetch(url);
 
-  const gatewayURL = manifest?.gateway;
+    const data: LobeChatPluginsMarketIndex = await res.json();
 
-  const res = await fetch(gatewayURL ?? URLS.plugins, {
-    body: JSON.stringify({ ...params, manifest }),
-    headers: createHeadersWithPluginSettings(settings),
-    method: 'POST',
-    signal: options?.signal,
-  });
-
-  if (!res.ok) {
-    throw await getMessageError(res);
-  }
+    return data;
+  };
+}
 
-  return await res.text();
-};
+export const pluginService = new PluginService();

package/src/store/plugin/index.ts

@@ -1,3 +1,2 @@
 export * from './helpers';
-export * from './selectors';
 export { usePluginStore } from './store';