@lobehub/lobehub 2.0.0-next.61 → 2.0.0-next.63

package/src/features/Conversation/Messages/{Assistant/Tool → Tool}/Inspector/ToolTitle.tsx

@@ -6,8 +6,6 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { useChatStore } from '@/store/chat';
-import { messageStateSelectors } from '@/store/chat/selectors';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { toolSelectors } from '@/store/tool/selectors';
 import { shinyTextStylish } from '@/styles/loading';
@@ -43,10 +41,6 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, messageId, index, apiName,
   const { t } = useTranslation('plugin');
   const { styles } = useStyles();
 
-  const isLoading = useChatStore(
-    messageStateSelectors.isToolApiNameShining(messageId, index, toolCallId),
-  );
-
   const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
   const plugins = useMemo(
@@ -84,7 +78,7 @@ const ToolTitle = memo<ToolTitleProps>(({ identifier, messageId, index, apiName,
   const pluginTitle = pluginHelpers.getPluginTitle(pluginMeta) ?? t('unknownPlugin');
 
   return (
-    <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={6} horizontal>
+    <Flexbox align={'center'} gap={6} horizontal>
       <div>{pluginTitle}</div> <Icon icon={ChevronRight} />
       <span className={styles.apiName}>{apiName}</span>
     </Flexbox>

package/src/features/Conversation/Messages/{Assistant/Tool → Tool}/Inspector/index.tsx

@@ -68,10 +68,8 @@ interface InspectorProps {
   messageId: string;
   payload: object;
   setShowPluginRender: (show: boolean) => void;
-  setShowRender: (show: boolean) => void;
   showPluginRender: boolean;
   showPortal?: boolean;
-  showRender: boolean;
   style?: CSSProperties;
 }
 
@@ -83,9 +81,7 @@ const Inspectors = memo<InspectorProps>(
     apiName,
     id,
     arguments: requestArgs,
-    showRender,
     payload,
-    setShowRender,
     showPluginRender,
     setShowPluginRender,
     hidePluginUI = false,
@@ -98,16 +94,7 @@ const Inspectors = memo<InspectorProps>(
     return (
       <Flexbox className={styles.container} gap={4}>
         <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
-          <Flexbox
-            align={'center'}
-            className={styles.tool}
-            gap={8}
-            horizontal
-            onClick={() => {
-              setShowRender(!showRender);
-            }}
-            paddingInline={4}
-          >
+          <Flexbox align={'center'} className={styles.tool} gap={8} horizontal paddingInline={4}>
             <ToolTitle
               apiName={apiName}
               identifier={identifier}
@@ -117,7 +104,7 @@ const Inspectors = memo<InspectorProps>(
             />
           </Flexbox>
           <Flexbox className={styles.actions} horizontal>
-            {showRender && !hidePluginUI && (
+            {!hidePluginUI && (
               <ActionIcon
                 icon={showPluginRender ? LogsIcon : LayoutPanelTop}
                 onClick={() => {

package/src/features/Conversation/Messages/{Assistant/Tool → Tool}/Render/CustomRender.tsx

@@ -7,11 +7,11 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import PluginResult from '@/features/Conversation/Messages/Assistant/Tool/Inspector/PluginResult';
 import PluginRender from '@/features/PluginsUI/Render';
 import { useChatStore } from '@/store/chat';
 import { messageStateSelectors } from '@/store/chat/selectors';
 
+import PluginResult from '../Inspector/PluginResult';
 import Arguments from './Arguments';
 import KeyValueEditor from './KeyValueEditor';
 

package/src/features/Conversation/Messages/{Assistant/Tool → Tool}/Render/PluginSettings.tsx

@@ -1,4 +1,3 @@
-import { ChatPluginPayload } from '@lobechat/types';
 import { Avatar, Button } from '@lobehub/ui';
 import { Divider } from 'antd';
 import { useTheme } from 'antd-style';
@@ -11,8 +10,9 @@ import PluginSettingsConfig from '@/features/PluginSettings';
 import { useChatStore } from '@/store/chat';
 import { pluginHelpers, useToolStore } from '@/store/tool';
 import { pluginSelectors } from '@/store/tool/selectors';
+import { ChatPluginPayload } from '@/types/index';
 
-import { ErrorActionContainer, useStyles } from '../../../../Error/style';
+import { ErrorActionContainer, useStyles } from '../../../Error/style';
 
 interface PluginSettingsProps {
   id: string;

package/src/features/Conversation/Messages/{Assistant/Tool → Tool}/Render/index.tsx

@@ -1,4 +1,3 @@
-import { LOADING_FLAT } from '@lobechat/const';
 import { Suspense, memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
@@ -6,11 +5,8 @@ import { dbMessageSelectors, messageStateSelectors } from '@/store/chat/selector
 
 import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
-import LoadingPlaceholder from './LoadingPlaceholder';
 
 interface RenderProps {
-  apiName: string;
-  identifier: string;
   messageId: string;
   requestArgs?: string;
   setShowPluginRender: (show: boolean) => void;
@@ -20,16 +16,7 @@ interface RenderProps {
 }
 
 const Render = memo<RenderProps>(
-  ({
-    toolCallId,
-    toolIndex,
-    messageId,
-    requestArgs,
-    showPluginRender,
-    setShowPluginRender,
-    identifier,
-    apiName,
-  }) => {
+  ({ toolCallId, toolIndex, messageId, requestArgs, showPluginRender, setShowPluginRender }) => {
     const loading = useChatStore(messageStateSelectors.isToolCallStreaming(messageId, toolIndex));
     const toolMessage = useChatStore(dbMessageSelectors.getDbMessageByToolCallId(toolCallId));
 
@@ -40,24 +27,8 @@ const Render = memo<RenderProps>(
         return <ErrorResponse {...toolMessage.error} id={messageId} plugin={toolMessage.plugin} />;
       }
 
-      const placeholder = (
-        <LoadingPlaceholder
-          apiName={apiName}
-          identifier={identifier}
-          loading
-          requestArgs={requestArgs}
-        />
-      );
-
-      // 如果是 LOADING_FLAT 则说明还在加载中
-      // 而 standalone 模式的插件 content 应该始终是 LOADING_FLAT
-      const inPlaceholder =
-        toolMessage.content === LOADING_FLAT && toolMessage.plugin?.type !== 'standalone';
-
-      if (inPlaceholder) return placeholder;
-
       return (
-        <Suspense fallback={placeholder}>
+        <Suspense>
           <CustomRender
             {...toolMessage}
             requestArgs={requestArgs}

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

@@ -0,0 +1,51 @@
+import { CSSProperties, memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+
+import Inspectors from './Inspector';
+import Render from './Render';
+
+export interface InspectorProps {
+  apiName: string;
+  arguments?: string;
+  identifier: string;
+  index: number;
+  messageId: string;
+  payload: object;
+  style?: CSSProperties;
+  toolCallId: string;
+  type?: string;
+}
+
+const Tool = memo<InspectorProps>(
+  ({ arguments: requestArgs, apiName, messageId, toolCallId, index, identifier, payload }) => {
+    const [showPluginRender, setShowPluginRender] = useState(false);
+
+    return (
+      <Flexbox gap={8} style={{ paddingBottom: 12 }}>
+        <Inspectors
+          apiName={apiName}
+          arguments={requestArgs}
+          id={toolCallId}
+          identifier={identifier}
+          index={index}
+          messageId={messageId}
+          payload={payload}
+          setShowPluginRender={setShowPluginRender}
+          showPluginRender={showPluginRender}
+        />
+        <Render
+          messageId={messageId}
+          requestArgs={requestArgs}
+          setShowPluginRender={setShowPluginRender}
+          showPluginRender={showPluginRender}
+          toolCallId={toolCallId}
+          toolIndex={index}
+        />
+      </Flexbox>
+    );
+  },
+);
+
+Tool.displayName = 'AssistantTool';
+
+export default Tool;

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

@@ -0,0 +1,58 @@
+import { Alert } from '@lobehub/ui';
+import { Button } from 'antd';
+import isEqual from 'fast-deep-equal';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { dbMessageSelectors } from '@/store/chat/selectors';
+import { UIChatMessage } from '@/types/message';
+
+import ToolItem from './ToolItem';
+
+interface ToolMessageProps {
+  id: string;
+  index: number;
+}
+
+const Tool = memo<ToolMessageProps>(({ id, index }) => {
+  const { t } = useTranslation('plugin');
+  const item = useChatStore(dbMessageSelectors.getDbMessageById(id), isEqual) as UIChatMessage;
+  const deleteToolMessage = useChatStore((s) => s.deleteToolMessage);
+  const [loading, setLoading] = useState(false);
+
+  const handleDelete = async () => {
+    setLoading(true);
+    try {
+      await deleteToolMessage(id);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Flexbox gap={4} paddingBlock={12} paddingInline={12}>
+      <Alert
+        action={
+          <Button loading={loading} onClick={handleDelete} size={'small'} type={'primary'}>
+            {t('inspector.delete')}
+          </Button>
+        }
+        message={t('inspector.orphanedToolCall')}
+        type={'warning'}
+        variant={'borderless'}
+      />
+      {item.plugin && (
+        <ToolItem
+          {...item.plugin}
+          index={index}
+          messageId={id}
+          payload={item.plugin || {}}
+          toolCallId={item.tool_call_id!}
+        />
+      )}
+    </Flexbox>
+  );
+});
+export default Tool;

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

@@ -18,6 +18,7 @@ import { InPortalThreadContext } from '../context/InPortalThreadContext';
 import AssistantMessage from './Assistant';
 import GroupMessage from './Group';
 import SupervisorMessage from './Supervisor';
+import ToolMessage from './Tool';
 import UserMessage from './User';
 
 const useStyles = createStyles(({ css, prefixCls }) => ({
@@ -133,6 +134,10 @@ const Item = memo<ChatListItemProps>(
           return <GroupMessage disableEditing={disableEditing} id={id} index={index} />;
         }
 
+        case 'tool': {
+          return <ToolMessage id={id} index={index} />;
+        }
+
         case 'supervisor': {
           return <SupervisorMessage disableEditing={disableEditing} id={id} index={index} />;
         }

package/src/features/ShareModal/ShareJSON/index.tsx

@@ -12,7 +12,7 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 import { useAgentStore } from '@/store/agent';
 import { agentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
-import { chatSelectors, topicSelectors } from '@/store/chat/selectors';
+import { dbMessageSelectors, topicSelectors } from '@/store/chat/selectors';
 
 import { useStyles } from '../style';
 import Preview from './Preview';
@@ -50,7 +50,7 @@ const ShareImage = memo(() => {
   ];
 
   const systemRole = useAgentStore(agentSelectors.currentAgentSystemRole);
-  const messages = useChatStore(chatSelectors.activeBaseChats, isEqual);
+  const messages = useChatStore(dbMessageSelectors.activeDbMessages, isEqual);
   const data = generateMessages({ ...fieldValue, messages, systemRole });
   const content = JSON.stringify(data, null, 2);
 

package/src/libs/trpc/utils/request-adapter.ts

@@ -0,0 +1,20 @@
+import { NextRequest } from 'next/server';
+
+/**
+ * Prepare Request object for tRPC fetchRequestHandler
+ *
+ * This function solves the "Response body object should not be disturbed or locked" error
+ * that occurs in Next.js 16 when the request body stream has been consumed or locked
+ * by Next.js internal mechanisms.
+ *
+ * By cloning the Request object, we create an independent body stream that tRPC can safely read.
+ *
+ * @see https://github.com/vercel/next.js/issues/83453
+ * @param req - The original NextRequest object
+ * @returns A cloned Request object with an independent body stream
+ */
+export function prepareRequestForTRPC(req: NextRequest): Request {
+  // Clone the Request to create an independent body stream
+  // This ensures tRPC can read the body even if the original request's body was disturbed
+  return req.clone();
+}

package/src/locales/default/plugin.ts

@@ -237,6 +237,9 @@ export default {
   },
   inspector: {
     args: '查看参数列表',
+    delete: '删除工具调用',
+    orphanedToolCall:
+      '该工具调用消息可能因异常原因成为孤立消息，这会影响 Agent 的正常执行，请将其移除',
     pluginRender: '查看插件界面',
   },
   list: {
@@ -252,6 +255,11 @@ export default {
   },
   localSystem: {
     apiName: {
+      editLocalFile: '编辑文件',
+      getCommandOutput: '获取代码输出',
+      globLocalFiles: '匹配搜索文件',
+      grepContent: '搜索内容',
+      killCommand: '终止代码执行',
       listLocalFiles: '查看文件列表',
       moveLocalFiles: '移动文件',
       readLocalFile: '读取文件内容',

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

@@ -227,13 +227,16 @@ describe('chatMessage actions', () => {
       expect(replaceMessagesSpy).toHaveBeenCalledWith(mockMessages);
     });
 
-    it('deleteMessage should remove messages with tools', async () => {
+    it('deleteMessage should remove the message only', async () => {
       const { result } = renderHook(() => useChatStore());
       const messageId = 'message-id';
       const removeMessagesSpy = vi.spyOn(messageService, 'removeMessages');
-      const mockMessages = [{ id: 'remaining-message' }] as any;
+      const mockMessages = [
+        { id: '2', tool_call_id: 'tool1', role: 'tool' },
+        { id: '3', tool_call_id: 'tool2', role: 'tool' },
+      ] as any;
 
-      // Mock the service to return messages
+      // Mock the service to return remaining messages (orphaned tool messages)
       (messageService.removeMessages as Mock).mockResolvedValue({
         success: true,
         messages: mockMessages,
@@ -258,7 +261,8 @@ describe('chatMessage actions', () => {
         await result.current.deleteMessage(messageId);
       });
 
-      expect(removeMessagesSpy).toHaveBeenCalledWith([messageId, '2', '3'], {
+      // Only the message itself should be deleted, tool messages remain as orphaned
+      expect(removeMessagesSpy).toHaveBeenCalledWith([messageId], {
         sessionId: 'session-id',
         topicId: undefined,
       });

package/src/store/chat/slices/message/actions/optimisticUpdate.ts

@@ -41,6 +41,7 @@ export interface MessageOptimisticUpdateAction {
    * delete the message content with optimistic update
    */
   optimisticDeleteMessage: (id: string) => Promise<void>;
+  optimisticDeleteMessages: (ids: string[]) => Promise<void>;
 
   /**
    * update the message content with optimistic update
@@ -154,6 +155,17 @@ export const messageOptimisticUpdate: StateCreator<
     }
   },
 
+  optimisticDeleteMessages: async (ids) => {
+    get().internal_dispatchMessage({ ids, type: 'deleteMessages' });
+    const result = await messageService.removeMessages(ids, {
+      sessionId: get().activeId,
+      topicId: get().activeTopicId,
+    });
+    if (result?.success && result.messages) {
+      get().replaceMessages(result.messages);
+    }
+  },
+
   optimisticUpdateMessageContent: async (id, content, extra) => {
     const {
       internal_dispatchMessage,

package/src/store/chat/slices/message/actions/publicApi.ts

@@ -31,6 +31,7 @@ export interface MessagePublicApiAction {
    */
   clearMessage: () => Promise<void>;
   deleteMessage: (id: string) => Promise<void>;
+  deleteAssistantMessage: (id: string) => Promise<void>;
   deleteDBMessage: (id: string) => Promise<void>;
   deleteToolMessage: (id: string) => Promise<void>;
   clearAllMessages: () => Promise<void>;
@@ -97,12 +98,28 @@ export const messagePublicApi: StateCreator<
     }
   },
 
+  deleteAssistantMessage: async (id) => {
+    const message = dbMessageSelectors.getDbMessageById(id)(get());
+    if (!message) return;
+
+    let ids = [message.id];
+    if (message.tools) {
+      const allMessages = dbMessageSelectors.activeDbMessages(get());
+
+      const toolMessageIds = message.tools.flatMap((tool) => {
+        const messages = allMessages.filter((m) => m.tool_call_id === tool.id);
+        return messages.map((m) => m.id);
+      });
+      ids = ids.concat(toolMessageIds);
+    }
+
+    await get().optimisticDeleteMessages(ids);
+  },
   deleteMessage: async (id) => {
     const message = displayMessageSelectors.getDisplayMessageById(id)(get());
     if (!message) return;
 
     let ids = [message.id];
-    const allMessages = displayMessageSelectors.activeDisplayMessages(get());
 
     // Handle assistantGroup messages: delete all child blocks and tool results
     if (message.role === 'assistantGroup' && message.children) {
@@ -117,23 +134,8 @@ export const messagePublicApi: StateCreator<
       });
       ids = ids.concat(toolResultIds);
     }
-    // Handle regular messages with tools: find and delete related tool messages
-    else if (message.tools) {
-      const toolMessageIds = message.tools.flatMap((tool) => {
-        const messages = allMessages.filter((m) => m.tool_call_id === tool.id);
-        return messages.map((m) => m.id);
-      });
-      ids = ids.concat(toolMessageIds);
-    }
 
-    get().internal_dispatchMessage({ type: 'deleteMessages', ids });
-    const result = await messageService.removeMessages(ids, {
-      sessionId: get().activeId,
-      topicId: get().activeTopicId,
-    });
-    if (result?.success && result.messages) {
-      get().replaceMessages(result.messages);
-    }
+    await get().optimisticDeleteMessages(ids);
   },
 
   deleteDBMessage: async (id) => {

package/src/tools/local-system/index.ts

@@ -203,6 +203,33 @@ export const LocalSystemManifest: BuiltinToolManifest = {
         type: 'object',
       },
     },
+    {
+      description:
+        'Perform exact string replacements in files. Must read the file first before editing.',
+      name: LocalSystemApiName.editLocalFile,
+      parameters: {
+        properties: {
+          file_path: {
+            description: 'The absolute path to the file to modify',
+            type: 'string',
+          },
+          new_string: {
+            description: 'The text to replace with (must differ from old_string)',
+            type: 'string',
+          },
+          old_string: {
+            description: 'The exact text to replace',
+            type: 'string',
+          },
+          replace_all: {
+            description: 'Replace all occurrences of old_string (default: false)',
+            type: 'boolean',
+          },
+        },
+        required: ['file_path', 'old_string', 'new_string'],
+        type: 'object',
+      },
+    },
     {
       description:
         'Execute a shell command and return its output. Supports both synchronous and background execution with timeout control.',
@@ -349,33 +376,6 @@ export const LocalSystemManifest: BuiltinToolManifest = {
         type: 'object',
       },
     },
-    {
-      description:
-        'Perform exact string replacements in files. Must read the file first before editing.',
-      name: LocalSystemApiName.editLocalFile,
-      parameters: {
-        properties: {
-          file_path: {
-            description: 'The absolute path to the file to modify',
-            type: 'string',
-          },
-          new_string: {
-            description: 'The text to replace with (must differ from old_string)',
-            type: 'string',
-          },
-          old_string: {
-            description: 'The exact text to replace',
-            type: 'string',
-          },
-          replace_all: {
-            description: 'Replace all occurrences of old_string (default: false)',
-            type: 'boolean',
-          },
-        },
-        required: ['file_path', 'old_string', 'new_string'],
-        type: 'object',
-      },
-    },
   ],
   identifier: 'lobe-local-system',
   meta: {

package/src/tools/local-system/systemRole.ts

@@ -19,17 +19,17 @@ You have access to a set of tools to interact with the user's local file system:
 1.  **listLocalFiles**: Lists files and directories in a specified path.
 2.  **readLocalFile**: Reads the content of a specified file, optionally within a line range. You can read file types such as Word, Excel, PowerPoint, PDF, and plain text files.
 3.  **writeLocalFile**: Write content to a specific file, only support plain text file like \`.text\` or \`.md\`
-4.  **searchLocalFiles**: Searches for files based on keywords and other criteria using Spotlight (macOS) or native search. Use this tool to find files if the user is unsure about the exact path.
+4.  **editLocalFile**: Performs exact string replacements in files. Must read the file first before editing.
 5.  **renameLocalFile**: Renames a single file or directory in its current location.
 6.  **moveLocalFiles**: Moves multiple files or directories. Can be used for renaming during the move.
-7.  **editLocalFile**: Performs exact string replacements in files. Must read the file first before editing.
 
 **Shell Commands:**
-8.  **runCommand**: Execute shell commands with timeout control. Supports both synchronous and background execution. When providing a description, always use the same language as the user's input.
-9.  **getCommandOutput**: Retrieve output from running background commands. Returns only new output since last check.
-10. **killCommand**: Terminate a running background shell command by its ID.
+7.  **runCommand**: Execute shell commands with timeout control. Supports both synchronous and background execution. When providing a description, always use the same language as the user's input.
+8.  **getCommandOutput**: Retrieve output from running background commands. Returns only new output since last check.
+9.  **killCommand**: Terminate a running background shell command by its ID.
 
 **Search & Find:**
+10. **searchLocalFiles**: Searches for files based on keywords and other criteria using Spotlight (macOS) or native search. Use this tool to find files if the user is unsure about the exact path.
 11. **grepContent**: Search for content within files using regex patterns. Supports various output modes, filtering, and context lines.
 12. **globLocalFiles**: Find files matching glob patterns (e.g., "**/*.js", "*.{ts,tsx}").
 </core_capabilities>
@@ -37,9 +37,9 @@ You have access to a set of tools to interact with the user's local file system:
 <workflow>
 1. Understand the user's request regarding local operations (files, commands, searches).
 2. Select the appropriate tool:
-   - File operations: listLocalFiles, readLocalFile, writeLocalFile, editLocalFile, searchLocalFiles, renameLocalFile, moveLocalFiles
+   - File operations: listLocalFiles, readLocalFile, writeLocalFile, editLocalFile, renameLocalFile, moveLocalFiles
    - Shell commands: runCommand, getCommandOutput, killCommand
-   - Search/Find: grepContent, globLocalFiles
+   - Search/Find: searchLocalFiles, grepContent, globLocalFiles
 3. Execute the operation. **If the user mentions a common location (like Desktop, Documents, Downloads, etc.) without providing a full path, use the corresponding path from the <user_context> section.**
 4. Present the results or confirmation.
 </workflow>

package/src/features/Conversation/Messages/Assistant/Tool/Render/LoadingPlaceholder/index.tsx

@@ -1,29 +0,0 @@
-import { safeParseJSON } from '@lobechat/utils';
-import { memo } from 'react';
-
-import { getBuiltinPlaceholder } from '@/tools/placeholders';
-
-import Arguments from '../Arguments';
-
-interface LoadingPlaceholderProps {
-  apiName: string;
-  identifier: string;
-  loading?: boolean;
-  requestArgs?: string;
-}
-
-const LoadingPlaceholder = memo<LoadingPlaceholderProps>(
-  ({ identifier, requestArgs, apiName, loading }) => {
-    const Render = getBuiltinPlaceholder(identifier, apiName);
-
-    if (Render) {
-      return (
-        <Render apiName={apiName} args={safeParseJSON(requestArgs) || {}} identifier={identifier} />
-      );
-    }
-
-    return <Arguments arguments={requestArgs} shine={loading} />;
-  },
-);
-
-export default LoadingPlaceholder;