@lobehub/chat 1.1.16 → 1.1.18

package/src/store/chat/slices/plugin/action.test.ts

@@ -10,8 +10,7 @@ import { chatSelectors } from '@/store/chat/selectors';
 import { messageMapKey } from '@/store/chat/slices/message/utils';
 import { useChatStore } from '@/store/chat/store';
 import { useToolStore } from '@/store/tool';
-import { ChatMessage, ChatToolPayload } from '@/types/message';
-import { LobeTool } from '@/types/tool';
+import { ChatMessage, ChatToolPayload, MessageToolCall } from '@/types/message';
 
 const invokeStandaloneTypePlugin = useChatStore.getState().invokeStandaloneTypePlugin;
 
@@ -23,6 +22,7 @@ vi.mock('@/services/message', () => ({
     updateMessage: vi.fn(),
     updateMessageError: vi.fn(),
     updateMessagePluginState: vi.fn(),
+    updateMessagePluginArguments: vi.fn(),
     createMessage: vi.fn(),
   },
 }));
@@ -657,4 +657,311 @@ describe('ChatPluginAction', () => {
       expect(result.current.refreshMessages).toHaveBeenCalled();
     });
   });
+
+  describe('reInvokeToolMessage', () => {
+    it('should re-invoke a tool message', async () => {
+      const messageId = 'message-id';
+      const message = {
+        id: messageId,
+        role: 'tool',
+        content: 'Original content',
+        plugin: {
+          type: 'default',
+          identifier: 'plugin-id',
+          apiName: 'api-name',
+          arguments: '{}',
+        },
+        tool_call_id: 'tool-id',
+      } as ChatMessage;
+
+      const internal_invokeDifferentTypePluginMock = vi.fn();
+      act(() => {
+        useChatStore.setState({
+          activeId: 'session-id',
+          messagesMap: { [messageMapKey('session-id')]: [message] },
+          internal_invokeDifferentTypePlugin: internal_invokeDifferentTypePluginMock,
+          internal_updateMessageError: vi.fn(),
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      await act(async () => {
+        await result.current.reInvokeToolMessage(messageId);
+      });
+
+      expect(internal_invokeDifferentTypePluginMock).toHaveBeenCalledWith(
+        messageId,
+        expect.objectContaining(message.plugin),
+      );
+    });
+
+    it('should clear error content when re-invoking', async () => {
+      const messageId = 'message-id';
+      const message = {
+        id: messageId,
+        role: 'tool',
+        content: 'Original content',
+        plugin: {
+          type: 'default',
+          identifier: 'plugin-id',
+          apiName: 'api-name',
+          arguments: '{}',
+        },
+        tool_call_id: 'tool-id',
+        error: { message: 'Previous error', type: 'ProviderBizError' },
+      } as ChatMessage;
+
+      const internal_updateMessageErrorMock = vi.fn();
+
+      act(() => {
+        useChatStore.setState({
+          activeId: 'session-id',
+          messagesMap: { [messageMapKey('session-id')]: [message] },
+          internal_invokeDifferentTypePlugin: vi.fn(),
+          internal_updateMessageError: internal_updateMessageErrorMock,
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      await act(async () => {
+        await result.current.reInvokeToolMessage(messageId);
+      });
+
+      expect(internal_updateMessageErrorMock).toHaveBeenCalledWith(messageId, null);
+    });
+  });
+
+  describe('updatePluginArguments', () => {
+    it('should update plugin arguments and refresh messages', async () => {
+      const messageId = 'message-id';
+      const toolCallId = 'tool-call-id';
+      const parentId = 'parent-id';
+      const identifier = 'plugin';
+      const newArguments = { newKey: 'newValue' };
+
+      const toolMessage = {
+        id: messageId,
+        role: 'tool',
+        content: 'Tool content',
+        plugin: { identifier: identifier, arguments: '{"oldKey":"oldValue"}' },
+        tool_call_id: toolCallId,
+        parentId,
+      } as ChatMessage;
+
+      const assistantMessage = {
+        id: parentId,
+        role: 'assistant',
+        content: 'Assistant content',
+        tools: [{ identifier: identifier, arguments: '{"oldKey":"oldValue"}', id: toolCallId }],
+      } as ChatMessage;
+
+      act(() => {
+        useChatStore.setState({
+          activeId: 'anbccfdd',
+          messagesMap: { [messageMapKey('anbccfdd')]: [assistantMessage, toolMessage] },
+          refreshMessages: vi.fn(),
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      await act(async () => {
+        await result.current.updatePluginArguments(messageId, newArguments);
+      });
+
+      expect(messageService.updateMessagePluginArguments).toHaveBeenCalledWith(
+        messageId,
+        expect.objectContaining(newArguments),
+      );
+      // TODO: 需要验证 updateMessage 是否被调用
+      // expect(messageService.updateMessage).toHaveBeenCalledWith(
+      //   parentId,
+      //   expect.objectContaining({ tools: expect.any(Array) }),
+      // );
+      expect(result.current.refreshMessages).toHaveBeenCalled();
+    });
+  });
+
+  describe('internal_callPluginApi', () => {
+    it('should call plugin API and update message content', async () => {
+      const messageId = 'message-id';
+      const payload: ChatToolPayload = {
+        id: 'tool-id',
+        type: 'default',
+        identifier: 'plugin-id',
+        apiName: 'api-name',
+        arguments: '{}',
+      };
+      const apiResponse = 'API response';
+
+      vi.spyOn(chatService, 'runPluginApi').mockResolvedValue({
+        text: apiResponse,
+        traceId: 'trace-id',
+      });
+
+      act(() => {
+        useChatStore.setState({
+          internal_togglePluginApiCalling: vi.fn(),
+          internal_updateMessageContent: vi.fn(),
+          refreshMessages: vi.fn(),
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      await act(async () => {
+        await result.current.internal_callPluginApi(messageId, payload);
+      });
+
+      expect(chatService.runPluginApi).toHaveBeenCalledWith(payload, expect.any(Object));
+      expect(result.current.internal_updateMessageContent).toHaveBeenCalledWith(
+        messageId,
+        apiResponse,
+      );
+      expect(messageService.updateMessage).toHaveBeenCalledWith(messageId, { traceId: 'trace-id' });
+    });
+
+    it('should handle API call errors', async () => {
+      const messageId = 'message-id';
+      const payload: ChatToolPayload = {
+        id: 'tool-id',
+        type: 'default',
+        identifier: 'plugin-id',
+        apiName: 'api-name',
+        arguments: '{}',
+      };
+      const error = new Error('API call failed');
+
+      vi.spyOn(chatService, 'runPluginApi').mockRejectedValue(error);
+
+      act(() => {
+        useChatStore.setState({
+          internal_togglePluginApiCalling: vi.fn(),
+          refreshMessages: vi.fn(),
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      await act(async () => {
+        await result.current.internal_callPluginApi(messageId, payload);
+      });
+
+      expect(messageService.updateMessageError).toHaveBeenCalledWith(messageId, error);
+      expect(result.current.refreshMessages).toHaveBeenCalled();
+    });
+  });
+
+  describe('internal_transformToolCalls', () => {
+    it('should transform tool calls correctly', () => {
+      const toolCalls: MessageToolCall[] = [
+        {
+          id: 'tool1',
+          function: {
+            name: ['plugin1', 'api1', 'default'].join(PLUGIN_SCHEMA_SEPARATOR),
+            arguments: '{}',
+          },
+          type: 'function',
+        },
+        {
+          id: 'tool2',
+          function: {
+            name: ['plugin2', 'api2', 'markdown'].join(PLUGIN_SCHEMA_SEPARATOR),
+            arguments: '{}',
+          },
+          type: 'function',
+        },
+      ];
+
+      const { result } = renderHook(() => useChatStore());
+
+      const transformed = result.current.internal_transformToolCalls(toolCalls);
+
+      expect(transformed).toEqual([
+        {
+          id: 'tool1',
+          identifier: 'plugin1',
+          apiName: 'api1',
+          type: 'default',
+          arguments: '{}',
+        },
+        {
+          id: 'tool2',
+          identifier: 'plugin2',
+          apiName: 'api2',
+          type: 'markdown',
+          arguments: '{}',
+        },
+      ]);
+    });
+
+    it('should handle MD5 hashed API names', () => {
+      const apiName = 'testApi';
+      const md5Hash = Md5.hashStr(apiName);
+      const toolCalls: MessageToolCall[] = [
+        {
+          id: 'tool1',
+          function: {
+            name: ['plugin1', PLUGIN_SCHEMA_API_MD5_PREFIX + md5Hash, 'default'].join(
+              PLUGIN_SCHEMA_SEPARATOR,
+            ),
+            arguments: '{}',
+          },
+          type: 'function',
+        },
+      ];
+
+      act(() => {
+        useToolStore.setState({
+          installedPlugins: [
+            {
+              type: 'plugin',
+              identifier: 'plugin1',
+              manifest: {
+                identifier: 'plugin1',
+                api: [
+                  {
+                    name: apiName,
+                    parameters: { type: 'object', properties: {} },
+                    description: 'abc',
+                  },
+                ],
+                type: 'default',
+              } as any,
+            },
+          ],
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      const transformed = result.current.internal_transformToolCalls(toolCalls);
+
+      expect(transformed[0].apiName).toBe(apiName);
+    });
+  });
+
+  describe('internal_updatePluginError', () => {
+    it('should update plugin error and refresh messages', async () => {
+      const messageId = 'message-id';
+      const error = { message: 'Plugin error' };
+
+      act(() => {
+        useChatStore.setState({
+          refreshMessages: vi.fn(),
+        });
+      });
+
+      const { result } = renderHook(() => useChatStore());
+
+      await act(async () => {
+        await result.current.internal_updatePluginError(messageId, error);
+      });
+
+      expect(messageService.updateMessage).toHaveBeenCalledWith(messageId, { pluginError: error });
+      expect(result.current.refreshMessages).toHaveBeenCalled();
+    });
+  });
 });

package/src/store/chat/slices/plugin/action.ts

@@ -1,5 +1,6 @@
 /* eslint-disable sort-keys-fix/sort-keys-fix, typescript-sort-keys/interface */
 import { PluginErrorType } from '@lobehub/chat-plugin-sdk';
+import isEqual from 'fast-deep-equal';
 import { t } from 'i18next';
 import { Md5 } from 'ts-md5';
 import { StateCreator } from 'zustand/vanilla';
@@ -12,6 +13,8 @@ import { ChatStore } from '@/store/chat/store';
 import { useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
 import { ChatToolPayload, MessageToolCall } from '@/types/message';
+import { merge } from '@/utils/merge';
+import { safeParseJSON } from '@/utils/safeParseJSON';
 import { setNamespace } from '@/utils/storeDebug';
 
 import { chatSelectors } from '../../slices/message/selectors';
@@ -37,6 +40,7 @@ export interface ChatPluginAction {
 
   triggerToolCalls: (id: string) => Promise<void>;
   updatePluginState: (id: string, value: any) => Promise<void>;
+  updatePluginArguments: <T = any>(id: string, value: T) => Promise<void>;
 
   internal_callPluginApi: (id: string, payload: ChatToolPayload) => Promise<string | undefined>;
   internal_invokeDifferentTypePlugin: (id: string, payload: ChatToolPayload) => Promise<any>;
@@ -203,10 +207,56 @@ export const chatPlugin: StateCreator<
   updatePluginState: async (id, value) => {
     const { refreshMessages } = get();
 
+    // optimistic update
+    get().internal_dispatchMessage({ id, type: 'updateMessage', value: { pluginState: value } });
+
     await messageService.updateMessagePluginState(id, value);
     await refreshMessages();
   },
 
+  updatePluginArguments: async (id, value) => {
+    const { refreshMessages } = get();
+    const toolMessage = chatSelectors.getMessageById(id)(get());
+    if (!toolMessage || !toolMessage?.tool_call_id) return;
+
+    let assistantMessage = chatSelectors.getMessageById(toolMessage?.parentId || '')(get());
+
+    const prevArguments = toolMessage?.plugin?.arguments;
+    const prevJson = safeParseJSON(prevArguments || '');
+    const nextValue = merge(prevJson || {}, value);
+    if (isEqual(prevJson, nextValue)) return;
+
+    // optimistic update
+    get().internal_dispatchMessage({
+      id,
+      type: 'updateMessagePlugin',
+      value: { arguments: JSON.stringify(nextValue) },
+    });
+
+    // 同样需要更新 assistantMessage 的 pluginArguments
+    if (assistantMessage) {
+      get().internal_dispatchMessage({
+        id: assistantMessage.id,
+        type: 'updateMessageTools',
+        tool_call_id: toolMessage?.tool_call_id,
+        value: { arguments: JSON.stringify(nextValue) },
+      });
+      assistantMessage = chatSelectors.getMessageById(assistantMessage?.id)(get());
+    }
+
+    const updateAssistantMessage = async () => {
+      if (!assistantMessage) return;
+      await messageService.updateMessage(assistantMessage!.id, { tools: assistantMessage?.tools });
+    };
+
+    await Promise.all([
+      messageService.updateMessagePluginArguments(id, nextValue),
+      updateAssistantMessage(),
+    ]);
+
+    await refreshMessages();
+  },
+
   internal_callPluginApi: async (id, payload) => {
     const { internal_updateMessageContent, refreshMessages, internal_togglePluginApiCalling } =
       get();
@@ -314,7 +364,7 @@ export const chatPlugin: StateCreator<
   internal_updatePluginError: async (id, error) => {
     const { refreshMessages } = get();
 
-    get().internal_dispatchMessage({ id, type: 'updateMessages', value: { error } });
+    get().internal_dispatchMessage({ id, type: 'updateMessage', value: { error } });
     await messageService.updateMessage(id, { pluginError: error });
     await refreshMessages();
   },

package/src/store/chat/slices/portal/action.test.ts

@@ -0,0 +1,109 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useChatStore } from '@/store/chat';
+
+vi.mock('zustand/traditional');
+
+describe('chatDockSlice', () => {
+  describe('closeToolUI', () => {
+    it('should set dockToolMessage to undefined', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.openToolUI('test-id', 'test-identifier');
+      });
+
+      expect(result.current.dockToolMessage).toEqual({
+        id: 'test-id',
+        identifier: 'test-identifier',
+      });
+
+      act(() => {
+        result.current.closeToolUI();
+      });
+
+      expect(result.current.dockToolMessage).toBeUndefined();
+    });
+  });
+
+  describe('openToolUI', () => {
+    it('should set dockToolMessage and open dock if it is closed', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      expect(result.current.showDock).toBe(false);
+
+      act(() => {
+        result.current.openToolUI('test-id', 'test-identifier');
+      });
+
+      expect(result.current.dockToolMessage).toEqual({
+        id: 'test-id',
+        identifier: 'test-identifier',
+      });
+      expect(result.current.showDock).toBe(true);
+    });
+
+    it('should not change dock state if it is already open', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.toggleDock(true);
+      });
+
+      expect(result.current.showDock).toBe(true);
+
+      act(() => {
+        result.current.openToolUI('test-id', 'test-identifier');
+      });
+
+      expect(result.current.dockToolMessage).toEqual({
+        id: 'test-id',
+        identifier: 'test-identifier',
+      });
+      expect(result.current.showDock).toBe(true);
+    });
+  });
+
+  describe('toggleDock', () => {
+    it('should toggle dock state when no argument is provided', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      expect(result.current.showDock).toBe(false);
+
+      act(() => {
+        result.current.toggleDock();
+      });
+
+      expect(result.current.showDock).toBe(true);
+
+      act(() => {
+        result.current.toggleDock();
+      });
+
+      expect(result.current.showDock).toBe(false);
+    });
+
+    it('should set dock state to the provided value', () => {
+      const { result } = renderHook(() => useChatStore());
+
+      act(() => {
+        result.current.toggleDock(true);
+      });
+
+      expect(result.current.showDock).toBe(true);
+
+      act(() => {
+        result.current.toggleDock(false);
+      });
+
+      expect(result.current.showDock).toBe(false);
+
+      act(() => {
+        result.current.toggleDock(true);
+      });
+
+      expect(result.current.showDock).toBe(true);
+    });
+  });
+});

package/src/store/chat/slices/portal/action.ts

@@ -0,0 +1,31 @@
+import { StateCreator } from 'zustand/vanilla';
+
+import { ChatStore } from '@/store/chat/store';
+
+export interface ChatPortalAction {
+  closeToolUI: () => void;
+  openToolUI: (messageId: string, identifier: string) => void;
+  toggleDock: (open?: boolean) => void;
+}
+
+export const chatPortalSlice: StateCreator<
+  ChatStore,
+  [['zustand/devtools', never]],
+  [],
+  ChatPortalAction
+> = (set, get) => ({
+  closeToolUI: () => {
+    set({ dockToolMessage: undefined }, false, 'openToolUI');
+  },
+  openToolUI: (id, identifier) => {
+    if (!get().showDock) {
+      get().toggleDock(true);
+    }
+
+    set({ dockToolMessage: { id, identifier } }, false, 'openToolUI');
+  },
+  toggleDock: (open) => {
+    const showInspector = open === undefined ? !get().showDock : open;
+    set({ showDock: showInspector }, false, 'toggleInspector');
+  },
+});

package/src/store/chat/slices/portal/initialState.ts

@@ -0,0 +1,8 @@
+export interface ChatPortalState {
+  dockToolMessage?: { id: string; identifier: string };
+  showDock: boolean;
+}
+
+export const initialChatPortalState: ChatPortalState = {
+  showDock: false,
+};

package/src/store/chat/slices/portal/selectors.test.ts

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ChatStoreState } from '@/store/chat';
+
+import { chatPortalSelectors } from './selectors';
+
+describe('chatDockSelectors', () => {
+  const createState = (overrides?: Partial<ChatStoreState>) =>
+    ({
+      showDock: false,
+      dockToolMessage: undefined,
+      ...overrides,
+    }) as ChatStoreState;
+
+  describe('showDock', () => {
+    it('should return the showDock state', () => {
+      expect(chatPortalSelectors.showDock(createState({ showDock: true }))).toBe(true);
+      expect(chatPortalSelectors.showDock(createState({ showDock: false }))).toBe(false);
+    });
+  });
+
+  describe('toolUIMessageId', () => {
+    it('should return undefined when dockToolMessage is not set', () => {
+      expect(chatPortalSelectors.toolUIMessageId(createState())).toBeUndefined();
+    });
+
+    it('should return the id when dockToolMessage is set', () => {
+      const state = createState({ dockToolMessage: { id: 'test-id', identifier: 'test' } });
+      expect(chatPortalSelectors.toolUIMessageId(state)).toBe('test-id');
+    });
+  });
+
+  describe('isMessageToolUIOpen', () => {
+    it('should return false when id does not match or showDock is false', () => {
+      const state = createState({
+        dockToolMessage: { id: 'test-id', identifier: 'test' },
+        showDock: false,
+      });
+      expect(chatPortalSelectors.isMessageToolUIOpen('test-id')(state)).toBe(false);
+      expect(chatPortalSelectors.isMessageToolUIOpen('other-id')(state)).toBe(false);
+    });
+
+    it('should return true when id matches and showDock is true', () => {
+      const state = createState({
+        dockToolMessage: { id: 'test-id', identifier: 'test' },
+        showDock: true,
+      });
+      expect(chatPortalSelectors.isMessageToolUIOpen('test-id')(state)).toBe(true);
+    });
+  });
+
+  describe('showToolUI', () => {
+    it('should return false when dockToolMessage is not set', () => {
+      expect(chatPortalSelectors.showToolUI(createState())).toBe(false);
+    });
+
+    it('should return true when dockToolMessage is set', () => {
+      const state = createState({ dockToolMessage: { id: 'test-id', identifier: 'test' } });
+      expect(chatPortalSelectors.showToolUI(state)).toBe(true);
+    });
+  });
+
+  describe('toolUIIdentifier', () => {
+    it('should return undefined when dockToolMessage is not set', () => {
+      expect(chatPortalSelectors.toolUIIdentifier(createState())).toBeUndefined();
+    });
+
+    it('should return the identifier when dockToolMessage is set', () => {
+      const state = createState({ dockToolMessage: { id: 'test-id', identifier: 'test' } });
+      expect(chatPortalSelectors.toolUIIdentifier(state)).toBe('test');
+    });
+  });
+});

package/src/store/chat/slices/portal/selectors.ts

@@ -0,0 +1,15 @@
+import type { ChatStoreState } from '@/store/chat';
+
+const toolUIMessageId = (s: ChatStoreState) => s.dockToolMessage?.id;
+const showDock = (s: ChatStoreState) => s.showDock;
+
+const isMessageToolUIOpen = (id: string) => (s: ChatStoreState) =>
+  toolUIMessageId(s) === id && showDock(s);
+
+export const chatPortalSelectors = {
+  isMessageToolUIOpen,
+  showDock,
+  showToolUI: (state: ChatStoreState) => !!state.dockToolMessage,
+  toolUIIdentifier: (state: ChatStoreState) => state.dockToolMessage?.identifier,
+  toolUIMessageId,
+};

package/src/store/chat/store.ts

@@ -1,3 +1,4 @@
+// sort-imports-ignore
 import { subscribeWithSelector } from 'zustand/middleware';
 import { shallow } from 'zustand/shallow';
 import { createWithEqualityFn } from 'zustand/traditional';
@@ -6,6 +7,7 @@ import { StateCreator } from 'zustand/vanilla';
 import { createDevtools } from '../middleware/createDevtools';
 import { ChatStoreState, initialState } from './initialState';
 import { ChatBuiltinToolAction, chatToolSlice } from './slices/builtinTool/action';
+import { ChatPortalAction, chatPortalSlice } from './slices/portal/action';
 import { ChatEnhanceAction, chatEnhance } from './slices/enchance/action';
 import { ChatMessageAction, chatMessage } from './slices/message/action';
 import { ChatPluginAction, chatPlugin } from './slices/plugin/action';
@@ -18,7 +20,8 @@ export interface ChatStoreAction
     ShareAction,
     ChatEnhanceAction,
     ChatPluginAction,
-    ChatBuiltinToolAction {}
+    ChatBuiltinToolAction,
+    ChatPortalAction {}
 
 export type ChatStore = ChatStoreAction & ChatStoreState;
 
@@ -33,6 +36,9 @@ const createStore: StateCreator<ChatStore, [['zustand/devtools', never]]> = (...
   ...chatEnhance(...params),
   ...chatToolSlice(...params),
   ...chatPlugin(...params),
+  ...chatPortalSlice(...params),
+
+  // cloud
 });
 
 //  ===============  实装 useStore ============ //