@lobehub/lobehub 2.0.0-next.51 → 2.0.0-next.53

package/src/tools/local-system/Render/RunCommand/index.tsx

@@ -1,6 +1,6 @@
 import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
 import { RunCommandParams, RunCommandResult } from '@lobechat/electron-client-ipc';
-import { ChatMessagePluginError } from '@lobechat/types';
+import { BuiltinRenderProps } from '@lobechat/types';
 import { ActionIcon, Block, Highlighter, Text } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { ChevronDown, ChevronUp } from 'lucide-react';
@@ -33,82 +33,79 @@ const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-interface RunCommandProps {
-  args: RunCommandParams;
-  messageId: string;
-  pluginError: ChatMessagePluginError;
-  pluginState: {
-    message: string;
-    result: RunCommandResult;
-  };
+interface RunCommandState {
+  message: string;
+  result: RunCommandResult;
 }
 
-const RunCommand = memo<RunCommandProps>(({ args, pluginState }) => {
-  const { styles, theme } = useStyles();
-  const { result, message } = pluginState || {};
-  const isSuccess = result?.success;
-  const [expanded, setExpanded] = useState(false);
+const RunCommand = memo<BuiltinRenderProps<RunCommandParams, RunCommandState>>(
+  ({ args, pluginState }) => {
+    const { styles, theme } = useStyles();
+    const { result, message } = pluginState || {};
+    const isSuccess = result?.success;
+    const [expanded, setExpanded] = useState(false);
 
-  return (
-    <Flexbox className={styles.container} gap={8}>
-      {/* Header: Description + Status */}
-      <Flexbox align={'center'} className={styles.header} horizontal justify={'space-between'}>
-        <Flexbox gap={8} horizontal>
-          <Flexbox gap={4} horizontal>
-            {!result ? null : isSuccess ? (
-              <CheckCircleFilled
-                className={styles.statusIcon}
-                style={{ color: theme.colorSuccess }}
-              />
-            ) : (
-              <CloseCircleFilled
-                className={styles.statusIcon}
-                style={{ color: theme.colorError }}
-              />
+    return (
+      <Flexbox className={styles.container} gap={8}>
+        {/* Header: Description + Status */}
+        <Flexbox align={'center'} className={styles.header} horizontal justify={'space-between'}>
+          <Flexbox gap={8} horizontal>
+            <Flexbox gap={4} horizontal>
+              {!result ? null : isSuccess ? (
+                <CheckCircleFilled
+                  className={styles.statusIcon}
+                  style={{ color: theme.colorSuccess }}
+                />
+              ) : (
+                <CloseCircleFilled
+                  className={styles.statusIcon}
+                  style={{ color: theme.colorError }}
+                />
+              )}
+              {args.description && <Text className={styles.head}>{args.description}</Text>}
+            </Flexbox>
+            {message && (
+              <Flexbox align={'center'} gap={4} horizontal>
+                <Text className={styles.head} type={'secondary'}>
+                  {message}
+                </Text>
+              </Flexbox>
             )}
-            {args.description && <Text className={styles.head}>{args.description}</Text>}
           </Flexbox>
-          {message && (
-            <Flexbox align={'center'} gap={4} horizontal>
-              <Text className={styles.head} type={'secondary'}>
-                {message}
-              </Text>
-            </Flexbox>
-          )}
-        </Flexbox>
-        <Flexbox align={'center'} gap={8} horizontal>
-          <ActionIcon
-            className={`action-icon`}
-            icon={expanded ? ChevronUp : ChevronDown}
-            onClick={() => setExpanded(!expanded)}
-            size={'small'}
-            style={{ opacity: expanded ? 1 : undefined }}
-            title={expanded ? 'Collapse' : 'Expand'}
-          />
+          <Flexbox align={'center'} gap={8} horizontal>
+            <ActionIcon
+              className={`action-icon`}
+              icon={expanded ? ChevronUp : ChevronDown}
+              onClick={() => setExpanded(!expanded)}
+              size={'small'}
+              style={{ opacity: expanded ? 1 : undefined }}
+              title={expanded ? 'Collapse' : 'Expand'}
+            />
+          </Flexbox>
         </Flexbox>
-      </Flexbox>
 
-      {/* Command & Output */}
-      {expanded && (
-        <Block gap={8} padding={8} variant={'outlined'}>
-          <Highlighter
-            language={'sh'}
-            showLanguage={false}
-            style={{ paddingInline: 8 }}
-            variant={'borderless'}
-            wrap
-          >
-            {args.command}
-          </Highlighter>
-          {result?.output && (
-            <Highlighter language={'text'} showLanguage={false} variant={'filled'} wrap>
-              {result.output}
+        {/* Command & Output */}
+        {expanded && (
+          <Block gap={8} padding={8} variant={'outlined'}>
+            <Highlighter
+              language={'sh'}
+              showLanguage={false}
+              style={{ paddingInline: 8 }}
+              variant={'borderless'}
+              wrap
+            >
+              {args.command}
             </Highlighter>
-          )}
-        </Block>
-      )}
-    </Flexbox>
-  );
-});
+            {result?.output && (
+              <Highlighter language={'text'} showLanguage={false} variant={'filled'} wrap>
+                {result.output}
+              </Highlighter>
+            )}
+          </Block>
+        )}
+      </Flexbox>
+    );
+  },
+);
 
 export default RunCommand;

package/src/tools/local-system/Render/SearchFiles/SearchQuery/index.tsx

@@ -13,7 +13,6 @@ import SearchView from './SearchView';
 
 interface SearchQueryViewProps {
   args: LocalSearchFilesParams;
-
   messageId: string;
   pluginState?: LocalFileSearchState;
 }

package/src/tools/local-system/Render/SearchFiles/index.tsx

@@ -1,5 +1,5 @@
 import { LocalSearchFilesParams } from '@lobechat/electron-client-ipc';
-import { ChatMessagePluginError } from '@lobechat/types';
+import { BuiltinRenderProps } from '@lobechat/types';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
@@ -8,25 +8,20 @@ import { LocalFileSearchState } from '@/tools/local-system/type';
 import SearchResult from './Result';
 import SearchQuery from './SearchQuery';
 
-interface SearchFilesProps {
-  args: LocalSearchFilesParams;
-  messageId: string;
-  pluginError: ChatMessagePluginError;
-  pluginState?: LocalFileSearchState;
-}
-
-const SearchFiles = memo<SearchFilesProps>(({ messageId, pluginError, args, pluginState }) => {
-  return (
-    <Flexbox gap={4}>
-      <SearchQuery args={args} messageId={messageId} pluginState={pluginState} />
-      <SearchResult
-        messageId={messageId}
-        pluginError={pluginError}
-        searchResults={pluginState?.searchResults}
-      />
-    </Flexbox>
-  );
-});
+const SearchFiles = memo<BuiltinRenderProps<LocalSearchFilesParams, LocalFileSearchState>>(
+  ({ messageId, pluginError, args, pluginState }) => {
+    return (
+      <Flexbox gap={4}>
+        <SearchQuery args={args} messageId={messageId} pluginState={pluginState} />
+        <SearchResult
+          messageId={messageId}
+          pluginError={pluginError}
+          searchResults={pluginState?.searchResults}
+        />
+      </Flexbox>
+    );
+  },
+);
 
 SearchFiles.displayName = 'SearchFiles';
 

package/src/tools/local-system/Render/WriteFile/index.tsx

@@ -1,5 +1,5 @@
 import { WriteLocalFileParams } from '@lobechat/electron-client-ipc';
-import { ChatMessagePluginError } from '@lobechat/types';
+import { BuiltinRenderProps } from '@lobechat/types';
 import { Icon } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { ChevronRight } from 'lucide-react';
@@ -9,13 +9,7 @@ import { Flexbox } from 'react-layout-kit';
 
 import { LocalFile, LocalFolder } from '@/features/LocalFile';
 
-interface WriteFileProps {
-  args: WriteLocalFileParams;
-  messageId: string;
-  pluginError: ChatMessagePluginError;
-}
-
-const WriteFile = memo<WriteFileProps>(({ args }) => {
+const WriteFile = memo<BuiltinRenderProps<WriteLocalFileParams>>(({ args }) => {
   if (!args) return <Skeleton active />;
 
   const { base, dir } = path.parse(args.path);

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

@@ -78,6 +78,10 @@ export const LocalSystemManifest: BuiltinToolManifest = {
             format: 'date-time',
             type: 'string',
           },
+          directory: {
+            description: 'Limit the search to this specific directory path',
+            type: 'string',
+          },
           exclude: {
             description: 'Array of file or directory paths to exclude',
             items: {
@@ -114,10 +118,6 @@ export const LocalSystemManifest: BuiltinToolManifest = {
             format: 'date-time',
             type: 'string',
           },
-          onlyIn: {
-            description: 'Limit the search to this specific directory path',
-            type: 'string',
-          },
           sortBy: {
             description: 'Sort results by',
             enum: ['name', 'date', 'size'],
@@ -186,6 +186,7 @@ export const LocalSystemManifest: BuiltinToolManifest = {
     {
       description:
         'Write content to a specific file. Input should be the file path and content. Overwrites existing file or creates a new one.',
+      humanIntervention: 'required',
       name: LocalSystemApiName.writeLocalFile,
       parameters: {
         properties: {

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

@@ -1,4 +1,4 @@
-export const systemPrompt = `You have a Local System tool with capabilities to interact with the user's local file system. You can list directories, read file contents, search for files, move, and rename files/directories.
+export const systemPrompt = `You have a Local System tool with capabilities to interact with the user's local system. You can list directories, read file contents, search for files, move, and rename files/directories.
 
 <user_context>
 Here are some known locations and system details on the user's system. User is using the Operating System: {{platform}}({{arch}}). Use these paths when the user refers to these common locations by name (e.g., "my desktop", "downloads folder").

package/src/tools/placeholders.ts

@@ -1,11 +1,42 @@
 import { BuiltinPlaceholder } from '@lobechat/types';
 
-import { LocalSystemManifest } from './local-system';
-import LocalSystem from './local-system/Placeholder';
-import { WebBrowsingManifest } from './web-browsing';
-import WebBrowsing from './web-browsing/Placeholder';
-
-export const BuiltinToolPlaceholders: Record<string, BuiltinPlaceholder> = {
-  [WebBrowsingManifest.identifier]: WebBrowsing as BuiltinPlaceholder,
-  [LocalSystemManifest.identifier]: LocalSystem as BuiltinPlaceholder,
+import { LocalSystemApiName, LocalSystemManifest } from './local-system';
+import { ListFiles as LocalSystemListFiles } from './local-system/Placeholder/ListFiles';
+import LocalSystemSearchFiles from './local-system/Placeholder/SearchFiles';
+import { WebBrowsingApiName, WebBrowsingManifest } from './web-browsing';
+import CrawlMultiPages from './web-browsing/Placeholder/CrawlMultiPages';
+import CrawlSinglePage from './web-browsing/Placeholder/CrawlSinglePage';
+import { Search } from './web-browsing/Placeholder/Search';
+
+/**
+ * Builtin tools placeholders registry
+ * Organized by toolset (identifier) -> API name
+ */
+export const BuiltinToolPlaceholders: Record<string, Record<string, any>> = {
+  [LocalSystemManifest.identifier]: {
+    [LocalSystemApiName.searchLocalFiles]: LocalSystemSearchFiles,
+    [LocalSystemApiName.listLocalFiles]: LocalSystemListFiles,
+  },
+  [WebBrowsingManifest.identifier]: {
+    [WebBrowsingApiName.search]: Search,
+    [WebBrowsingApiName.crawlSinglePage]: CrawlSinglePage,
+    [WebBrowsingApiName.crawlMultiPages]: CrawlMultiPages,
+  },
+};
+
+/**
+ * Get builtin placeholder component for a specific API
+ * @param identifier - Tool identifier (e.g., 'lobe-local-system')
+ * @param apiName - API name (e.g., 'searchLocalFiles')
+ */
+export const getBuiltinPlaceholder = (
+  identifier?: string,
+  apiName?: string,
+): BuiltinPlaceholder | undefined => {
+  if (!identifier || !apiName) return undefined;
+
+  const toolset = BuiltinToolPlaceholders[identifier];
+  if (!toolset) return undefined;
+
+  return toolset[apiName];
 };

package/src/tools/renders.ts

@@ -2,13 +2,60 @@ import { BuiltinRender } from '@lobechat/types';
 
 import { CodeInterpreterManifest } from './code-interpreter';
 import CodeInterpreterRender from './code-interpreter/Render';
-import { LocalSystemManifest } from './local-system';
-import LocalFilesRender from './local-system/Render';
-import { WebBrowsingManifest } from './web-browsing';
-import WebBrowsing from './web-browsing/Render';
-
-export const BuiltinToolsRenders: Record<string, BuiltinRender> = {
-  [WebBrowsingManifest.identifier]: WebBrowsing as BuiltinRender,
-  [LocalSystemManifest.identifier]: LocalFilesRender as BuiltinRender,
-  [CodeInterpreterManifest.identifier]: CodeInterpreterRender as BuiltinRender,
+// local-system
+import { LocalSystemApiName, LocalSystemManifest } from './local-system';
+import ListFiles from './local-system/Render/ListFiles';
+import ReadLocalFile from './local-system/Render/ReadLocalFile';
+import RenameLocalFile from './local-system/Render/RenameLocalFile';
+import RunCommand from './local-system/Render/RunCommand';
+import SearchFiles from './local-system/Render/SearchFiles';
+import WriteFile from './local-system/Render/WriteFile';
+// web-browsing
+import { WebBrowsingApiName, WebBrowsingManifest } from './web-browsing';
+import CrawlMultiPages from './web-browsing/Render/CrawlMultiPages';
+import CrawlSinglePage from './web-browsing/Render/CrawlSinglePage';
+import Search from './web-browsing/Render/Search';
+
+/**
+ * Builtin tools renders registry
+ * Organized by toolset (identifier) -> API name
+ */
+const BuiltinToolsRenders: Record<string, Record<string, BuiltinRender>> = {
+  [LocalSystemManifest.identifier]: {
+    [LocalSystemApiName.searchLocalFiles]: SearchFiles as BuiltinRender,
+    [LocalSystemApiName.listLocalFiles]: ListFiles as BuiltinRender,
+    [LocalSystemApiName.readLocalFile]: ReadLocalFile as BuiltinRender,
+    [LocalSystemApiName.renameLocalFile]: RenameLocalFile as BuiltinRender,
+    [LocalSystemApiName.writeLocalFile]: WriteFile as BuiltinRender,
+    [LocalSystemApiName.runCommand]: RunCommand as BuiltinRender,
+  },
+  [WebBrowsingManifest.identifier]: {
+    [WebBrowsingApiName.search]: Search as BuiltinRender,
+    [WebBrowsingApiName.crawlSinglePage]: CrawlSinglePage as BuiltinRender,
+    [WebBrowsingApiName.crawlMultiPages]: CrawlMultiPages as BuiltinRender,
+  },
+  [CodeInterpreterManifest.identifier]: {
+    python: CodeInterpreterRender as BuiltinRender,
+  },
+};
+
+/**
+ * Get builtin render component for a specific API
+ * @param identifier - Tool identifier (e.g., 'lobe-local-system')
+ * @param apiName - API name (e.g., 'searchLocalFiles')
+ */
+export const getBuiltinRender = (
+  identifier?: string,
+  apiName?: string,
+): BuiltinRender | undefined => {
+  if (!identifier) return undefined;
+
+  const toolset = BuiltinToolsRenders[identifier];
+  if (!toolset) return undefined;
+
+  if (apiName && toolset[apiName]) {
+    return toolset[apiName];
+  }
+
+  return undefined;
 };

package/src/tools/web-browsing/Placeholder/{PageContent.tsx → CrawlMultiPages.tsx}

@@ -1,5 +1,6 @@
 'use client';
 
+import { BuiltinPlaceholderProps } from '@lobechat/types';
 import { ScrollShadow } from '@lobehub/ui';
 import { memo } from 'react';
 
@@ -7,7 +8,9 @@ import { useIsMobile } from '@/hooks/useIsMobile';
 
 import LoadingCard from '../Render/PageContent/Loading';
 
-const PageContent = memo<{ urls: string[] }>(({ urls }) => {
+const PageContent = memo<BuiltinPlaceholderProps<{ urls: string[] }>>(({ args }) => {
+  const urls = args?.urls;
+
   const isMobile = useIsMobile();
 
   return (

package/src/tools/web-browsing/Placeholder/CrawlSinglePage.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { BuiltinPlaceholderProps } from '@lobechat/types';
+import { memo } from 'react';
+
+import LoadingCard from '../Render/PageContent/Loading';
+
+const CrawlSinglePage = memo<BuiltinPlaceholderProps<{ url: string }>>(({ args }) => {
+  return <LoadingCard url={args?.url || ''} />;
+});
+
+export default CrawlSinglePage;

package/src/tools/web-browsing/Placeholder/Search.tsx

@@ -1,3 +1,4 @@
+import { BuiltinPlaceholderProps, SearchQuery } from '@lobechat/types';
 import { Icon } from '@lobehub/ui';
 import { Skeleton } from 'antd';
 import { createStyles } from 'antd-style';
@@ -29,10 +30,9 @@ const useStyles = createStyles(({ css, token, cx }) => ({
   ),
 }));
 
-interface SearchProps {
-  query?: string;
-}
-export const Search = memo<SearchProps>(({ query }) => {
+export const Search = memo<BuiltinPlaceholderProps<SearchQuery>>(({ args }) => {
+  const { query } = args || {};
+
   const isMobile = useIsMobile();
   const { styles } = useStyles();
   return (

package/src/tools/web-browsing/Render/CrawlMultiPages.tsx

@@ -0,0 +1,15 @@
+import { BuiltinRenderProps, CrawlMultiPagesQuery, CrawlPluginState } from '@lobechat/types';
+import { memo } from 'react';
+
+import PageContent from './PageContent';
+
+const CrawlSinglePage = memo<BuiltinRenderProps<CrawlMultiPagesQuery, CrawlPluginState>>(
+  ({ messageId, pluginState = {}, args = {} }) => {
+    const { results } = pluginState;
+    const { urls } = args;
+
+    return <PageContent messageId={messageId} results={results} urls={urls} />;
+  },
+);
+
+export default CrawlSinglePage;

package/src/tools/web-browsing/Render/CrawlSinglePage.tsx

@@ -0,0 +1,15 @@
+import { BuiltinRenderProps, CrawlPluginState, CrawlSinglePageQuery } from '@lobechat/types';
+import { memo } from 'react';
+
+import PageContent from './PageContent';
+
+const MultiPages = memo<BuiltinRenderProps<CrawlSinglePageQuery, CrawlPluginState>>(
+  ({ messageId, pluginState, args }) => {
+    const { results } = pluginState || {};
+    const { url } = args || {};
+
+    return <PageContent messageId={messageId} results={results} urls={[url]} />;
+  },
+);
+
+export default MultiPages;

package/src/tools/web-browsing/Render/Search/index.tsx

@@ -1,4 +1,4 @@
-import { ChatMessagePluginError, SearchQuery, UniformSearchResponse } from '@lobechat/types';
+import { BuiltinRenderProps, SearchQuery, UniformSearchResponse } from '@lobechat/types';
 import { Alert, Highlighter } from '@lobehub/ui';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -7,54 +7,49 @@ import ConfigForm from './ConfigForm';
 import SearchQueryView from './SearchQuery';
 import SearchResult from './SearchResult';
 
-interface SearchProps {
-  messageId: string;
-  pluginError: ChatMessagePluginError;
-  searchQuery: SearchQuery;
-  searchResponse?: UniformSearchResponse;
-}
+const Search = memo<BuiltinRenderProps<SearchQuery, UniformSearchResponse>>(
+  ({ messageId, args: searchQuery, pluginState: searchResponse, pluginError }) => {
+    const [editing, setEditing] = useState(false);
 
-const Search = memo<SearchProps>(({ messageId, searchQuery, searchResponse, pluginError }) => {
-  const [editing, setEditing] = useState(false);
+    if (pluginError) {
+      if (pluginError?.type === 'PluginSettingsInvalid') {
+        return <ConfigForm id={messageId} provider={pluginError.body?.provider} />;
+      }
 
-  if (pluginError) {
-    if (pluginError?.type === 'PluginSettingsInvalid') {
-      return <ConfigForm id={messageId} provider={pluginError.body?.provider} />;
+      return (
+        <Alert
+          extra={
+            <Flexbox>
+              <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
+                {JSON.stringify(pluginError.body?.data || pluginError.body, null, 2)}
+              </Highlighter>
+            </Flexbox>
+          }
+          message={pluginError?.message}
+          type={'error'}
+        />
+      );
     }
 
     return (
-      <Alert
-        extra={
-          <Flexbox>
-            <Highlighter actionIconSize={'small'} language={'json'} variant={'borderless'}>
-              {JSON.stringify(pluginError.body?.data || pluginError.body, null, 2)}
-            </Highlighter>
-          </Flexbox>
-        }
-        message={pluginError?.message}
-        type={'error'}
-      />
+      <Flexbox gap={8}>
+        <SearchQueryView
+          args={searchQuery}
+          editing={editing}
+          messageId={messageId}
+          pluginState={searchResponse}
+          setEditing={setEditing}
+        />
+        <SearchResult
+          args={searchQuery}
+          editing={editing}
+          messageId={messageId}
+          pluginState={searchResponse}
+          setEditing={setEditing}
+        />
+      </Flexbox>
     );
-  }
-
-  return (
-    <Flexbox gap={8}>
-      <SearchQueryView
-        args={searchQuery}
-        editing={editing}
-        messageId={messageId}
-        pluginState={searchResponse}
-        setEditing={setEditing}
-      />
-      <SearchResult
-        args={searchQuery}
-        editing={editing}
-        messageId={messageId}
-        pluginState={searchResponse}
-        setEditing={setEditing}
-      />
-    </Flexbox>
-  );
-});
+  },
+);
 
 export default Search;

package/packages/database/migrations/0044_add_tool_intervention.sql

@@ -1 +0,0 @@
-ALTER TABLE "message_plugins" ADD COLUMN "intervention" jsonb;

package/src/tools/local-system/Intervention/index.tsx

@@ -1,17 +0,0 @@
-import { RunCommandParams } from '@lobechat/electron-client-ipc';
-import { BuiltinInterventionProps } from '@lobechat/types';
-import { memo } from 'react';
-
-import RunCommand from './RunCommand';
-
-const Intervention = memo<BuiltinInterventionProps<RunCommandParams>>(
-  ({ apiName, args, messageId }) => {
-    if (apiName === 'runCommand') {
-      return <RunCommand {...args} messageId={messageId} />;
-    }
-
-    return null;
-  },
-);
-
-export default Intervention;

package/src/tools/local-system/Placeholder/index.tsx

@@ -1,25 +0,0 @@
-import { BuiltinPlaceholderProps } from '@lobechat/types';
-import { memo } from 'react';
-
-import { LocalSystemApiName } from '@/tools/local-system';
-
-import ReadLocalFile from '../Render/ReadLocalFile/ReadFileSkeleton';
-import { ListFiles } from './ListFiles';
-import SearchFiles from './SearchFiles';
-
-const RenderMap = {
-  [LocalSystemApiName.searchLocalFiles]: SearchFiles,
-  [LocalSystemApiName.listLocalFiles]: ListFiles,
-  [LocalSystemApiName.readLocalFile]: ReadLocalFile,
-  // [LocalSystemApiName.renameLocalFile]: RenameLocalFile,
-  // [LocalSystemApiName.writeLocalFile]: WriteFile,
-};
-const Placeholder = memo<BuiltinPlaceholderProps>(({ apiName, args }) => {
-  const Render = RenderMap[apiName as any];
-
-  if (!Render) return;
-
-  return <Render args={(args || {}) as any} />;
-});
-
-export default Placeholder;