@lobehub/chat 0.157.0 → 0.157.1

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

@@ -24,15 +24,22 @@ export interface ChatPluginAction {
     content: string,
     triggerAiMessage?: boolean,
   ) => Promise<void>;
+
+  internal_callPluginApi: (id: string, payload: ChatToolPayload) => Promise<string | undefined>;
+  internal_invokeDifferentTypePlugin: (id: string, payload: ChatToolPayload) => Promise<any>;
   internal_transformToolCalls: (toolCalls: MessageToolCall[]) => ChatToolPayload[];
+  internal_updatePluginError: (id: string, error: any) => Promise<void>;
+
   invokeBuiltinTool: (id: string, payload: ChatToolPayload) => Promise<void>;
   invokeDefaultTypePlugin: (id: string, payload: any) => Promise<string | undefined>;
   invokeMarkdownTypePlugin: (id: string, payload: ChatToolPayload) => Promise<void>;
+
   invokeStandaloneTypePlugin: (id: string, payload: ChatToolPayload) => Promise<void>;
-  runPluginApi: (id: string, payload: ChatToolPayload) => Promise<string | undefined>;
+
+  reInvokeToolMessage: (id: string) => Promise<void>;
   triggerAIMessage: (params: { parentId?: string; traceId?: string }) => Promise<void>;
-  triggerToolCalls: (id: string) => Promise<void>;
 
+  triggerToolCalls: (id: string) => Promise<void>;
   updatePluginState: (id: string, key: string, value: any) => Promise<void>;
 }
 
@@ -62,6 +69,70 @@ export const chatPlugin: StateCreator<
 
     if (triggerAiMessage) await triggerAIMessage({ parentId: id });
   },
+  internal_callPluginApi: async (id, payload) => {
+    const { internal_updateMessageContent, refreshMessages, internal_toggleChatLoading } = get();
+    let data: string;
+
+    try {
+      const abortController = internal_toggleChatLoading(
+        true,
+        id,
+        n('fetchPlugin/start') as string,
+      );
+
+      const message = chatSelectors.getMessageById(id)(get());
+
+      const res = await chatService.runPluginApi(payload, {
+        signal: abortController?.signal,
+        trace: { observationId: message?.observationId, traceId: message?.traceId },
+      });
+      data = res.text;
+
+      // save traceId
+      if (res.traceId) {
+        await messageService.updateMessage(id, { traceId: res.traceId });
+      }
+    } catch (error) {
+      console.log(error);
+      const err = error as Error;
+
+      // ignore the aborted request error
+      if (!err.message.includes('The user aborted a request.')) {
+        await messageService.updateMessageError(id, error as any);
+        await refreshMessages();
+      }
+
+      data = '';
+    }
+
+    internal_toggleChatLoading(false, id, n('fetchPlugin/end') as string);
+    // 如果报错则结束了
+    if (!data) return;
+
+    await internal_updateMessageContent(id, data);
+
+    return data;
+  },
+
+  internal_invokeDifferentTypePlugin: async (id, payload) => {
+    switch (payload.type) {
+      case 'standalone': {
+        return await get().invokeStandaloneTypePlugin(id, payload);
+      }
+
+      case 'markdown': {
+        return await get().invokeMarkdownTypePlugin(id, payload);
+      }
+
+      case 'builtin': {
+        return await get().invokeBuiltinTool(id, payload);
+      }
+
+      default: {
+        return await get().invokeDefaultTypePlugin(id, payload);
+      }
+    }
+  },
 
   internal_transformToolCalls: (toolCalls) => {
     return toolCalls
@@ -98,6 +169,13 @@ export const chatPlugin: StateCreator<
       .filter(Boolean) as ChatToolPayload[];
   },
 
+  internal_updatePluginError: async (id, error) => {
+    const { refreshMessages } = get();
+
+    await messageService.updateMessage(id, { pluginError: error });
+    await refreshMessages();
+  },
+
   invokeBuiltinTool: async (id, payload) => {
     const { internal_toggleChatLoading, internal_updateMessageContent } = get();
     const params = JSON.parse(payload.arguments);
@@ -131,9 +209,9 @@ export const chatPlugin: StateCreator<
   },
 
   invokeDefaultTypePlugin: async (id, payload) => {
-    const { runPluginApi } = get();
+    const { internal_callPluginApi } = get();
 
-    const data = await runPluginApi(id, payload);
+    const data = await internal_callPluginApi(id, payload);
 
     if (!data) return;
 
@@ -141,9 +219,9 @@ export const chatPlugin: StateCreator<
   },
 
   invokeMarkdownTypePlugin: async (id, payload) => {
-    const { runPluginApi } = get();
+    const { internal_callPluginApi } = get();
 
-    await runPluginApi(id, payload);
+    await internal_callPluginApi(id, payload);
   },
 
   invokeStandaloneTypePlugin: async (id, payload) => {
@@ -166,49 +244,13 @@ export const chatPlugin: StateCreator<
     }
   },
 
-  runPluginApi: async (id, payload) => {
-    const { internal_updateMessageContent, refreshMessages, internal_toggleChatLoading } = get();
-    let data: string;
+  reInvokeToolMessage: async (id) => {
+    const message = chatSelectors.getMessageById(id)(get());
+    if (!message || message.role !== 'tool' || !message.plugin) return;
 
-    try {
-      const abortController = internal_toggleChatLoading(
-        true,
-        id,
-        n('fetchPlugin/start') as string,
-      );
+    const payload: ChatToolPayload = { ...message.plugin, id: message.tool_call_id! };
 
-      const message = chatSelectors.getMessageById(id)(get());
-
-      const res = await chatService.runPluginApi(payload, {
-        signal: abortController?.signal,
-        trace: { observationId: message?.observationId, traceId: message?.traceId },
-      });
-      data = res.text;
-
-      // save traceId
-      if (res.traceId) {
-        await messageService.updateMessage(id, { traceId: res.traceId });
-      }
-    } catch (error) {
-      console.log(error);
-      const err = error as Error;
-
-      // ignore the aborted request error
-      if (!err.message.includes('The user aborted a request.')) {
-        await messageService.updateMessageError(id, error as any);
-        await refreshMessages();
-      }
-
-      data = '';
-    }
-
-    internal_toggleChatLoading(false, id, n('fetchPlugin/end') as string);
-    // 如果报错则结束了
-    if (!data) return;
-
-    await internal_updateMessageContent(id, data);
-
-    return data;
+    await get().internal_invokeDifferentTypePlugin(id, payload);
   },
 
   triggerAIMessage: async ({ parentId, traceId }) => {
@@ -216,19 +258,10 @@ export const chatPlugin: StateCreator<
     const chats = chatSelectors.currentChats(get());
     await internal_coreProcessMessage(chats, parentId ?? chats.at(-1)!.id, { traceId });
   },
-
   triggerToolCalls: async (assistantId) => {
     const message = chatSelectors.getMessageById(assistantId)(get());
     if (!message || !message.tools) return;
 
-    const {
-      invokeDefaultTypePlugin,
-      invokeMarkdownTypePlugin,
-      invokeStandaloneTypePlugin,
-      invokeBuiltinTool,
-      triggerAIMessage,
-    } = get();
-
     let shouldCreateMessage = false;
     let latestToolId = '';
     const messagePools = message.tools.map(async (payload) => {
@@ -244,29 +277,12 @@ export const chatPlugin: StateCreator<
 
       const id = await get().internal_createMessage(toolMessage);
 
-      switch (payload.type) {
-        case 'standalone': {
-          await invokeStandaloneTypePlugin(id, payload);
-          break;
-        }
-
-        case 'markdown': {
-          await invokeMarkdownTypePlugin(id, payload);
-          break;
-        }
-
-        case 'builtin': {
-          await invokeBuiltinTool(id, payload);
-          break;
-        }
+      // trigger the plugin call
+      const data = await get().internal_invokeDifferentTypePlugin(id, payload);
 
-        default: {
-          const data = await invokeDefaultTypePlugin(id, payload);
-          if (data) {
-            shouldCreateMessage = true;
-            latestToolId = id;
-          }
-        }
+      if (payload.type === 'default' && data) {
+        shouldCreateMessage = true;
+        latestToolId = id;
       }
     });
 
@@ -277,9 +293,8 @@ export const chatPlugin: StateCreator<
 
     const traceId = chatSelectors.getTraceIdByMessageId(latestToolId)(get());
 
-    await triggerAIMessage({ traceId });
+    await get().triggerAIMessage({ traceId });
   },
-
   updatePluginState: async (id, key, value) => {
     const { refreshMessages } = get();
 

package/src/store/chat/store.ts

@@ -6,11 +6,11 @@ import { StateCreator } from 'zustand/vanilla';
 import { isDev } from '@/utils/env';
 
 import { ChatStoreState, initialState } from './initialState';
+import { ChatBuiltinToolAction, chatToolSlice } from './slices/builtinTool/action';
 import { ChatEnhanceAction, chatEnhance } from './slices/enchance/action';
 import { ChatMessageAction, chatMessage } from './slices/message/action';
 import { ChatPluginAction, chatPlugin } from './slices/plugin/action';
 import { ShareAction, chatShare } from './slices/share/action';
-import { ChatToolAction, chatToolSlice } from './slices/tool/action';
 import { ChatTopicAction, chatTopic } from './slices/topic/action';
 
 export interface ChatStoreAction
@@ -19,7 +19,7 @@ export interface ChatStoreAction
     ShareAction,
     ChatEnhanceAction,
     ChatPluginAction,
-    ChatToolAction {}
+    ChatBuiltinToolAction {}
 
 export type ChatStore = ChatStoreAction & ChatStoreState;
 

package/src/store/tool/slices/store/action.test.ts

@@ -156,7 +156,9 @@ describe('useToolStore:pluginStore', () => {
       const { result } = renderHook(() => useToolStore.getState().useFetchPluginStore());
 
       // Then
-      expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function));
+      expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function), {
+        revalidateOnFocus: false,
+      });
       expect(result.current.data).toEqual(pluginListMock);
       expect(result.current.error).toBeNull();
       expect(result.current.isValidating).toBe(false);
@@ -175,7 +177,9 @@ describe('useToolStore:pluginStore', () => {
       const { result } = renderHook(() => useToolStore.getState().useFetchPluginStore());
 
       // Then
-      expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function));
+      expect(useSWR).toHaveBeenCalledWith('loadPluginStore', expect.any(Function), {
+        revalidateOnFocus: false,
+      });
       expect(result.current.data).toBeNull();
       expect(result.current.error).toEqual(error);
       expect(result.current.isValidating).toBe(false);

package/src/store/tool/slices/store/action.ts

@@ -101,5 +101,7 @@ export const createPluginStoreSlice: StateCreator<
       revalidateOnFocus: false,
     }),
   useFetchPluginStore: () =>
-    useSWR<LobeChatPluginsMarketIndex>('loadPluginStore', get().loadPluginStore),
+    useSWR<LobeChatPluginsMarketIndex>('loadPluginStore', get().loadPluginStore, {
+      revalidateOnFocus: false,
+    }),
 });

package/src/tools/dalle/Render/Item/Error.tsx

@@ -0,0 +1,50 @@
+import { Alert, Highlighter, Icon } from '@lobehub/ui';
+import { Button } from 'antd';
+import { LucideRefreshCw } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { chatSelectors } from '@/store/chat/selectors';
+
+interface ErrorProps {
+  index: number;
+  messageId: string;
+}
+
+const Error = memo<ErrorProps>(({ messageId, index }) => {
+  const { t } = useTranslation('error');
+  const { t: ct } = useTranslation('common');
+
+  const error = useChatStore(
+    (s) => chatSelectors.getMessageById(messageId)(s)?.pluginState?.['error']?.[index],
+  );
+  const [reInvokeToolMessage] = useChatStore((s) => [s.reInvokeToolMessage]);
+
+  return (
+    error && (
+      <Flexbox gap={12}>
+        <Alert
+          extra={
+            <Highlighter copyButtonSize={'small'} language={'json'}>
+              {JSON.stringify(error.body, null, 2)}
+            </Highlighter>
+          }
+          extraDefaultExpand
+          message={t(`response.${error.errorType}` as any)}
+          type={'error'}
+        />
+        <Button
+          icon={<Icon icon={LucideRefreshCw} />}
+          onClick={() => reInvokeToolMessage(messageId)}
+          type={'primary'}
+        >
+          {ct('retry')}
+        </Button>
+      </Flexbox>
+    )
+  );
+});
+
+export default Error;

package/src/tools/dalle/Render/Item/Image.tsx

@@ -0,0 +1,44 @@
+import { Icon, Image, Tooltip } from '@lobehub/ui';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import ImageFileItem from '@/components/FileList/ImageFileItem';
+
+interface ImagePreviewProps {
+  imageId?: string;
+  previewUrl?: string;
+  prompt: string;
+}
+
+const ImagePreview = memo<ImagePreviewProps>(({ imageId, previewUrl, prompt }) => {
+  const { t } = useTranslation('tool');
+
+  return imageId ? (
+    // <Flexbox className={styles.action}>
+    //   <ActionIconGroup
+    //     items={[{ icon: LucideEdit, key: 'edit', label: t('edit', { ns: 'common' }) }]}
+    //     onActionClick={(e) => {
+    //       if (e.key === 'edit') {
+    //         setEdit(true);
+    //       }
+    //     }}
+    //   />
+    // </Flexbox>
+    <ImageFileItem id={imageId} />
+  ) : (
+    previewUrl && (
+      <Flexbox style={{ position: 'relative' }}>
+        <div style={{ position: 'absolute', right: 8, top: 8, zIndex: 10 }}>
+          <Tooltip title={t('dalle.downloading')}>
+            <Icon icon={Loader2} size={'large'} spin />
+          </Tooltip>
+        </div>
+        <Image alt={prompt} size={'100%'} src={previewUrl} />
+      </Flexbox>
+    )
+  );
+});
+
+export default ImagePreview;

package/src/tools/dalle/Render/{Item.tsx → Item/index.tsx}

@@ -1,4 +1,4 @@
-import { Icon, Image, Tooltip } from '@lobehub/ui';
+import { Highlighter, Icon } from '@lobehub/ui';
 import { Spin } from 'antd';
 import { createStyles } from 'antd-style';
 import { Loader2 } from 'lucide-react';
@@ -6,12 +6,13 @@ import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import ImageFileItem from '@/components/FileList/ImageFileItem';
 import { useChatStore } from '@/store/chat';
 import { chatToolSelectors } from '@/store/chat/selectors';
 import { DallEImageItem } from '@/types/tool/dalle';
 
 import EditMode from './EditMode';
+import Error from './Error';
+import ImagePreview from './Image';
 
 const useStyles = createStyles(({ css, token, prefixCls }) => ({
   action: css`
@@ -32,8 +33,8 @@ const useStyles = createStyles(({ css, token, prefixCls }) => ({
   `,
 }));
 
-const ImageItem = memo<DallEImageItem & { messageId: string }>(
-  ({ prompt, messageId, imageId, previewUrl, style, size, quality }) => {
+const ImageItem = memo<DallEImageItem & { index: number; messageId: string }>(
+  ({ prompt, messageId, imageId, previewUrl, index, style, size, quality }) => {
     const { t } = useTranslation('tool');
     const { styles } = useStyles();
 
@@ -55,30 +56,7 @@ const ImageItem = memo<DallEImageItem & { messageId: string }>(
       );
 
     if (imageId || previewUrl)
-      return imageId ? (
-        // <Flexbox className={styles.action}>
-        //   <ActionIconGroup
-        //     items={[{ icon: LucideEdit, key: 'edit', label: t('edit', { ns: 'common' }) }]}
-        //     onActionClick={(e) => {
-        //       if (e.key === 'edit') {
-        //         setEdit(true);
-        //       }
-        //     }}
-        //   />
-        // </Flexbox>
-        <ImageFileItem id={imageId} />
-      ) : (
-        previewUrl && (
-          <Flexbox style={{ position: 'relative' }}>
-            <div style={{ position: 'absolute', right: 8, top: 8, zIndex: 10 }}>
-              <Tooltip title={t('dalle.downloading')}>
-                <Icon icon={Loader2} size={'large'} spin />
-              </Tooltip>
-            </div>
-            <Image alt={prompt} size={'100%'} src={previewUrl} />
-          </Flexbox>
-        )
-      );
+      return <ImagePreview imageId={imageId} previewUrl={previewUrl} prompt={prompt} />;
 
     return (
       <Flexbox className={styles.container} padding={8}>
@@ -87,7 +65,20 @@ const ImageItem = memo<DallEImageItem & { messageId: string }>(
             {prompt}
           </Spin>
         ) : (
-          prompt
+          <Flexbox gap={12}>
+            <Flexbox>
+              <Highlighter
+                copyButtonSize={'small'}
+                fileName={t('dalle.prompt')}
+                fullFeatured
+                language={'prompt'}
+                showLanguage
+              >
+                {prompt}
+              </Highlighter>
+            </Flexbox>
+            <Error index={index} messageId={messageId} />
+          </Flexbox>
         )}
       </Flexbox>
     );