@lobehub/lobehub 2.0.0-next.286 → 2.0.0-next.288

package/packages/builtin-tool-cloud-sandbox/src/client/Inspector/ReadLocalFile/index.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cx } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import { type ReadLocalFileState } from '../../../types';
+import { FilePathDisplay } from '../../components/FilePathDisplay';
+
+const styles = createStaticStyles(({ css }) => ({
+  lineRange: css`
+    flex-shrink: 0;
+    margin-inline-start: 4px;
+    opacity: 0.7;
+  `,
+}));
+
+interface ReadLocalFileParams {
+  end_line?: number;
+  path: string;
+  start_line?: number;
+}
+
+export const ReadLocalFileInspector = memo<
+  BuiltinInspectorProps<ReadLocalFileParams, ReadLocalFileState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  const filePath = args?.path || partialArgs?.path || '';
+  const startLine = args?.start_line || partialArgs?.start_line;
+  const endLine = args?.end_line || partialArgs?.end_line;
+
+  // Format line range display, e.g., "L1-L200"
+  const lineRangeText = useMemo(() => {
+    if (startLine === undefined && endLine === undefined) return null;
+    const start = startLine ?? 1;
+    const end = endLine;
+    if (end !== undefined) {
+      return `L${start}-L${end}`;
+    }
+    return `L${start}`;
+  }, [startLine, endLine]);
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!filePath)
+      return (
+        <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-cloud-sandbox.apiName.readLocalFile')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-cloud-sandbox.apiName.readLocalFile')}: </span>
+        <FilePathDisplay filePath={filePath} />
+        {lineRangeText && <span className={styles.lineRange}>{lineRangeText}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx(inspectorTextStyles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span>{t('builtins.lobe-cloud-sandbox.apiName.readLocalFile')}: </span>
+      <FilePathDisplay filePath={filePath} />
+      {lineRangeText && <span className={styles.lineRange}>{lineRangeText}</span>}
+    </div>
+  );
+});
+
+ReadLocalFileInspector.displayName = 'ReadLocalFileInspector';

package/packages/builtin-tool-cloud-sandbox/src/client/Inspector/SearchLocalFiles/index.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { Text } from '@lobehub/ui';
+import { cssVar, cx } from 'antd-style';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import { type SearchLocalFilesState } from '../../../types';
+
+interface SearchLocalFilesParams {
+  path?: string;
+  query: string;
+}
+
+export const SearchLocalFilesInspector = memo<
+  BuiltinInspectorProps<SearchLocalFilesParams, SearchLocalFilesState>
+>(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  const query = args?.query || partialArgs?.query || '';
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!query)
+      return (
+        <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-cloud-sandbox.apiName.searchLocalFiles')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-cloud-sandbox.apiName.searchLocalFiles')}: </span>
+        <span className={highlightTextStyles.primary}>{query}</span>
+      </div>
+    );
+  }
+
+  // Check if search returned results
+  const resultCount = pluginState?.results?.length ?? 0;
+  const hasResults = resultCount > 0;
+
+  return (
+    <div className={cx(inspectorTextStyles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span style={{ marginInlineStart: 2 }}>
+        <span>{t('builtins.lobe-cloud-sandbox.apiName.searchLocalFiles')}: </span>
+        {query && <span className={highlightTextStyles.primary}>{query}</span>}
+        {!isLoading &&
+          pluginState?.results &&
+          (hasResults ? (
+            <span style={{ marginInlineStart: 4 }}>({resultCount})</span>
+          ) : (
+            <Text
+              as={'span'}
+              color={cssVar.colorTextDescription}
+              fontSize={12}
+              style={{ marginInlineStart: 4 }}
+            >
+              ({t('builtins.lobe-local-system.inspector.noResults')})
+            </Text>
+          ))}
+      </span>
+    </div>
+  );
+});
+
+SearchLocalFilesInspector.displayName = 'SearchLocalFilesInspector';

package/packages/builtin-tool-cloud-sandbox/src/client/Inspector/WriteLocalFile/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { Icon, Text } from '@lobehub/ui';
+import { cssVar, cx } from 'antd-style';
+import { Plus } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import { type WriteLocalFileState } from '../../../types';
+import { FilePathDisplay } from '../../components/FilePathDisplay';
+
+interface WriteLocalFileParams {
+  content: string;
+  path: string;
+}
+
+export const WriteLocalFileInspector = memo<
+  BuiltinInspectorProps<WriteLocalFileParams, WriteLocalFileState>
+>(({ args, partialArgs, isArgumentsStreaming }) => {
+  const { t } = useTranslation('plugin');
+
+  const filePath = args?.path || partialArgs?.path || '';
+  const content = args?.content || partialArgs?.content || '';
+
+  // Calculate lines from content
+  const lines = content ? content.split('\n').length : 0;
+
+  // During argument streaming without path
+  if (isArgumentsStreaming && !filePath) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-cloud-sandbox.apiName.writeLocalFile')}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cx(inspectorTextStyles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}
+    >
+      <span>{t('builtins.lobe-cloud-sandbox.apiName.writeLocalFile')}: </span>
+      <FilePathDisplay filePath={filePath} />
+      {lines > 0 && (
+        <Text as={'span'} code color={cssVar.colorSuccess} fontSize={12}>
+          {' '}
+          <Icon icon={Plus} size={12} />
+          {lines}
+        </Text>
+      )}
+    </div>
+  );
+});
+
+WriteLocalFileInspector.displayName = 'WriteLocalFileInspector';

package/packages/builtin-tool-cloud-sandbox/src/client/Inspector/index.ts

@@ -1,11 +1,25 @@
 import { CloudSandboxApiName } from '../../types';
+import { EditLocalFileInspector } from './EditLocalFile';
 import { ExecuteCodeInspector } from './ExecuteCode';
+import { GlobLocalFilesInspector } from './GlobLocalFiles';
+import { GrepContentInspector } from './GrepContent';
+import { ListLocalFilesInspector } from './ListLocalFiles';
+import { ReadLocalFileInspector } from './ReadLocalFile';
 import { RunCommandInspector } from './RunCommand';
+import { SearchLocalFilesInspector } from './SearchLocalFiles';
+import { WriteLocalFileInspector } from './WriteLocalFile';
 
 /**
  * Code Interpreter Inspector Components Registry
  */
 export const CloudSandboxInspectors = {
+  [CloudSandboxApiName.editLocalFile]: EditLocalFileInspector,
   [CloudSandboxApiName.executeCode]: ExecuteCodeInspector,
+  [CloudSandboxApiName.globLocalFiles]: GlobLocalFilesInspector,
+  [CloudSandboxApiName.grepContent]: GrepContentInspector,
+  [CloudSandboxApiName.listLocalFiles]: ListLocalFilesInspector,
+  [CloudSandboxApiName.readLocalFile]: ReadLocalFileInspector,
   [CloudSandboxApiName.runCommand]: RunCommandInspector,
+  [CloudSandboxApiName.searchLocalFiles]: SearchLocalFilesInspector,
+  [CloudSandboxApiName.writeLocalFile]: WriteLocalFileInspector,
 };

package/packages/builtin-tool-cloud-sandbox/src/client/Render/WriteFile/index.tsx

@@ -1,54 +1,73 @@
 'use client';
 
-import { CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons';
 import { type BuiltinRenderProps } from '@lobechat/types';
-import { Flexbox, Text } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
+import { Block, Highlighter } from '@lobehub/ui';
 import { memo } from 'react';
 
 import { type WriteLocalFileState } from '../../../types';
 
-const styles = createStaticStyles(({ css }) => ({
-  container: css`
-    overflow: hidden;
-    padding-inline: 8px 0;
-  `,
-  statusIcon: css`
-    font-size: 12px;
-  `,
-}));
-
 interface WriteLocalFileParams {
   content: string;
   createDirectories?: boolean;
   path: string;
 }
 
+/**
+ * Get file extension from path
+ */
+const getFileExtension = (path: string): string => {
+  const parts = path.split('.');
+  return parts.length > 1 ? parts.pop()?.toLowerCase() || 'text' : 'text';
+};
+
+/**
+ * Map file extension to Highlighter language
+ */
+const getLanguageFromExtension = (ext: string): string => {
+  const languageMap: Record<string, string> = {
+    css: 'css',
+    go: 'go',
+    html: 'html',
+    java: 'java',
+    js: 'javascript',
+    json: 'json',
+    jsx: 'jsx',
+    md: 'markdown',
+    py: 'python',
+    rs: 'rust',
+    scss: 'scss',
+    sh: 'bash',
+    sql: 'sql',
+    ts: 'typescript',
+    tsx: 'tsx',
+    xml: 'xml',
+    yaml: 'yaml',
+    yml: 'yaml',
+  };
+  return languageMap[ext] || 'text';
+};
+
 const WriteFile = memo<BuiltinRenderProps<WriteLocalFileParams, WriteLocalFileState>>(
-  ({ args, pluginState }) => {
-    const isSuccess = pluginState?.success;
+  ({ args }) => {
+    if (!args?.content) {
+      return null;
+    }
+
+    const ext = getFileExtension(args.path);
+    const language = getLanguageFromExtension(ext);
 
     return (
-      <Flexbox className={styles.container} gap={8}>
-        <Flexbox align={'center'} gap={8} horizontal>
-          {pluginState === undefined ? null : isSuccess ? (
-            <CheckCircleFilled
-              className={styles.statusIcon}
-              style={{ color: cssVar.colorSuccess }}
-            />
-          ) : (
-            <CloseCircleFilled className={styles.statusIcon} style={{ color: cssVar.colorError }} />
-          )}
-          <Text as={'span'} code fontSize={12}>
-            {isSuccess ? `✅ Written to ${args.path}` : `❌ Failed to write ${args.path}`}
-          </Text>
-          {pluginState?.bytesWritten !== undefined && (
-            <Text as={'span'} code fontSize={12} type={'secondary'}>
-              ({pluginState.bytesWritten} bytes)
-            </Text>
-          )}
-        </Flexbox>
-      </Flexbox>
+      <Block padding={8} variant={'outlined'}>
+        <Highlighter
+          language={language}
+          showLanguage
+          style={{ maxHeight: 400, overflow: 'auto' }}
+          variant={'borderless'}
+          wrap
+        >
+          {args.content}
+        </Highlighter>
+      </Block>
     );
   },
 );

package/packages/builtin-tool-cloud-sandbox/src/client/components/FilePathDisplay.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { MaterialFileTypeIcon } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import path from 'path-browserify-esm';
+import { memo, useMemo } from 'react';
+
+const styles = createStaticStyles(({ css }) => ({
+  icon: css`
+    flex-shrink: 0;
+    margin-inline-end: 4px;
+  `,
+  text: css`
+    color: ${cssVar.colorText};
+  `,
+}));
+
+interface FilePathDisplayProps {
+  filePath: string;
+  isDirectory?: boolean;
+}
+
+export const FilePathDisplay = memo<FilePathDisplayProps>(({ filePath, isDirectory }) => {
+  const { displayPath, name } = useMemo(() => {
+    if (!filePath) return { displayPath: '', name: '' };
+    const { base, dir } = path.parse(filePath);
+    const parentDir = path.basename(dir);
+    return {
+      displayPath: parentDir ? `${parentDir}/${base}` : base,
+      name: base,
+    };
+  }, [filePath]);
+
+  if (!filePath) return null;
+
+  return (
+    <>
+      {name && (
+        <MaterialFileTypeIcon
+          className={styles.icon}
+          filename={name}
+          size={16}
+          type={isDirectory ? 'folder' : 'file'}
+          variant={'raw'}
+        />
+      )}
+      {displayPath && <span className={styles.text}>{displayPath}</span>}
+    </>
+  );
+});
+
+FilePathDisplay.displayName = 'FilePathDisplay';

package/packages/builtin-tool-group-management/src/client/Inspector/ExecuteTasks/index.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { DEFAULT_AVATAR } from '@lobechat/const';
+import type { AgentGroupMember, BuiltinInspectorProps } from '@lobechat/types';
+import { Avatar, Flexbox } from '@lobehub/ui';
+import { createStaticStyles, cx, useTheme } from 'antd-style';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+import { shinyTextStyles } from '@/styles';
+
+import type { ExecuteTasksParams } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+  title: css`
+    flex-shrink: 0;
+    color: ${cssVar.colorTextSecondary};
+    white-space: nowrap;
+  `,
+}));
+
+export const ExecuteTasksInspector = memo<BuiltinInspectorProps<ExecuteTasksParams>>(
+  ({ args, partialArgs, isArgumentsStreaming }) => {
+    const { t } = useTranslation('plugin');
+
+    const tasks = args?.tasks || partialArgs?.tasks || [];
+    const agentIds = useMemo(() => tasks.map((task) => task.agentId).filter(Boolean), [tasks]);
+
+    // Get active group ID and agents from store
+    const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+    const groupAgents = useAgentGroupStore((s) =>
+      activeGroupId ? agentGroupSelectors.getGroupAgents(activeGroupId)(s) : [],
+    );
+    const theme = useTheme();
+
+    // Get agent details for the task targets
+    const agents = useMemo(() => {
+      if (!agentIds.length || !groupAgents.length) return [];
+      return agentIds
+        .map((id) => groupAgents.find((agent) => agent.id === id))
+        .filter((agent): agent is AgentGroupMember => !!agent);
+    }, [agentIds, groupAgents]);
+
+    // Transform agents to Avatar.Group format
+    const avatarItems = useMemo(
+      () =>
+        agents.map((agent) => ({
+          avatar: agent.avatar || DEFAULT_AVATAR,
+          background: agent.backgroundColor || theme.colorBgContainer,
+          key: agent.id,
+          title: agent.title || undefined,
+        })),
+      [agents, theme.colorBgContainer],
+    );
+
+    if (isArgumentsStreaming && agents.length === 0) {
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-group-management.apiName.executeAgentTasks')}</span>
+        </div>
+      );
+    }
+
+    return (
+      <Flexbox
+        align={'center'}
+        className={cx(styles.root, isArgumentsStreaming && shinyTextStyles.shinyText)}
+        gap={8}
+        horizontal
+      >
+        <span className={styles.title}>
+          {t('builtins.lobe-group-management.inspector.executeAgentTasks.title')}
+        </span>
+        {avatarItems.length > 0 && <Avatar.Group items={avatarItems} shape={'circle'} size={24} />}
+      </Flexbox>
+    );
+  },
+);
+
+ExecuteTasksInspector.displayName = 'ExecuteTasksInspector';
+
+export default ExecuteTasksInspector;

package/packages/builtin-tool-group-management/src/client/Inspector/index.ts

@@ -2,6 +2,7 @@ import { type BuiltinInspector } from '@lobechat/types';
 
 import { GroupManagementApiName } from '../../types';
 import { BroadcastInspector } from './Broadcast';
+import { ExecuteTasksInspector } from './ExecuteTasks';
 import { SpeakInspector } from './Speak';
 
 /**
@@ -12,5 +13,6 @@ import { SpeakInspector } from './Speak';
  */
 export const GroupManagementInspectors: Record<string, BuiltinInspector> = {
   [GroupManagementApiName.broadcast]: BroadcastInspector as BuiltinInspector,
+  [GroupManagementApiName.executeAgentTasks]: ExecuteTasksInspector as BuiltinInspector,
   [GroupManagementApiName.speak]: SpeakInspector as BuiltinInspector,
 };