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

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,
 };

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

@@ -0,0 +1,237 @@
+'use client';
+
+import { DEFAULT_AVATAR } from '@lobechat/const';
+import { BuiltinInterventionProps } from '@lobechat/types';
+import { Avatar, Flexbox, Icon, Tooltip } from '@lobehub/ui';
+import { Collapse, Input, InputNumber } from 'antd';
+import { createStaticStyles, useTheme } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { Clock, Trash2 } from 'lucide-react';
+import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+
+import type { ExecuteTasksParams, TaskItem } from '../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  agentTitle: css`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+  container: css`
+    padding-block: 12px;
+    border-radius: ${cssVar.borderRadius};
+  `,
+  deleteButton: css`
+    cursor: pointer;
+    color: ${cssVar.colorTextTertiary};
+    transition: color 0.2s;
+
+    &:hover {
+      color: ${cssVar.colorError};
+    }
+  `,
+  taskCard: css`
+    .ant-collapse-header {
+      padding-block: 8px !important;
+      padding-inline: 12px !important;
+    }
+
+    .ant-collapse-content-box {
+      padding: 12px !important;
+    }
+  `,
+  taskTitle: css`
+    font-size: 13px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+  timeoutInput: css`
+    width: 100px;
+  `,
+}));
+
+const DEFAULT_TIMEOUT = 1_800_000; // 30 minutes
+
+interface TaskEditorProps {
+  index: number;
+  onChange: (index: number, updates: Partial<TaskItem>) => void;
+  onDelete: (index: number) => void;
+  task: TaskItem;
+}
+
+const TaskEditor = memo<TaskEditorProps>(({ task, index, onChange, onDelete }) => {
+  const { t } = useTranslation('tool');
+  const theme = useTheme();
+
+  // Get agent info from store
+  const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const agent = useAgentGroupStore((s) =>
+    task.agentId && activeGroupId
+      ? agentGroupSelectors.getAgentByIdFromGroup(activeGroupId, task.agentId)(s)
+      : undefined,
+  );
+
+  const handleTitleChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      onChange(index, { title: e.target.value });
+    },
+    [index, onChange],
+  );
+
+  const handleInstructionChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      onChange(index, { instruction: e.target.value });
+    },
+    [index, onChange],
+  );
+
+  const handleTimeoutChange = useCallback(
+    (value: number | null) => {
+      if (value !== null) {
+        onChange(index, { timeout: value * 60 * 1000 });
+      }
+    },
+    [index, onChange],
+  );
+
+  const handleDelete = useCallback(() => {
+    onDelete(index);
+  }, [index, onDelete]);
+
+  const header = (
+    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>
+      <Flexbox align={'center'} flex={1} gap={8} horizontal style={{ minWidth: 0 }}>
+        <Avatar
+          avatar={agent?.avatar || DEFAULT_AVATAR}
+          background={agent?.backgroundColor || theme.colorBgContainer}
+          shape={'square'}
+          size={24}
+        />
+        <span className={styles.taskTitle}>{task.title || agent?.title || 'Task'}</span>
+      </Flexbox>
+      <Flexbox align={'center'} gap={8} horizontal onClick={(e) => e.stopPropagation()}>
+        <Tooltip title={t('agentGroupManagement.executeTask.intervention.timeout')}>
+          <Clock size={14} />
+        </Tooltip>
+        <InputNumber
+          className={styles.timeoutInput}
+          max={120}
+          min={1}
+          onChange={handleTimeoutChange}
+          size={'small'}
+          suffix={t('agentGroupManagement.executeTask.intervention.timeoutUnit')}
+          value={Math.round((task.timeout || DEFAULT_TIMEOUT) / 60_000)}
+          variant={'filled'}
+        />
+        <Icon
+          className={styles.deleteButton}
+          icon={Trash2}
+          onClick={handleDelete}
+          size={{ size: 16 }}
+        />
+      </Flexbox>
+    </Flexbox>
+  );
+
+  return (
+    <Collapse
+      className={styles.taskCard}
+      defaultActiveKey={[index]}
+      items={[
+        {
+          children: (
+            <Flexbox gap={12}>
+              <Input
+                onChange={handleTitleChange}
+                placeholder={t('agentGroupManagement.executeTasks.intervention.titlePlaceholder')}
+                value={task.title}
+              />
+              <Input.TextArea
+                autoSize={{ maxRows: 8, minRows: 4 }}
+                onChange={handleInstructionChange}
+                placeholder={t(
+                  'agentGroupManagement.executeTasks.intervention.instructionPlaceholder',
+                )}
+                value={task.instruction}
+              />
+            </Flexbox>
+          ),
+          key: index,
+          label: header,
+        },
+      ]}
+    />
+  );
+});
+
+/**
+ * ExecuteTasks Intervention Component
+ *
+ * Allows users to review and modify multiple tasks before execution.
+ */
+const ExecuteTasksIntervention = memo<BuiltinInterventionProps<ExecuteTasksParams>>(
+  ({ args, onArgsChange, registerBeforeApprove }) => {
+    // Local state
+    const [tasks, setTasks] = useState<TaskItem[]>(args?.tasks || []);
+    const [hasChanges, setHasChanges] = useState(false);
+
+    // Sync local state when args change externally
+    useEffect(() => {
+      if (!hasChanges) {
+        setTasks(args?.tasks || []);
+      }
+    }, [args?.tasks, hasChanges]);
+
+    // Handle task change
+    const handleTaskChange = useCallback((index: number, updates: Partial<TaskItem>) => {
+      setTasks((prev) => {
+        const newTasks = [...prev];
+        newTasks[index] = { ...newTasks[index], ...updates };
+        return newTasks;
+      });
+      setHasChanges(true);
+    }, []);
+
+    // Handle task delete
+    const handleTaskDelete = useCallback((index: number) => {
+      setTasks((prev) => prev.filter((_, i) => i !== index));
+      setHasChanges(true);
+    }, []);
+
+    // Save changes before approval
+    useEffect(() => {
+      if (!registerBeforeApprove) return;
+
+      const cleanup = registerBeforeApprove('executeTasks', async () => {
+        if (hasChanges && onArgsChange) {
+          await onArgsChange({ ...args, tasks });
+        }
+      });
+
+      return cleanup;
+    }, [registerBeforeApprove, hasChanges, tasks, args, onArgsChange]);
+
+    return (
+      <Flexbox className={styles.container} gap={12}>
+        {tasks.map((task, index) => (
+          <TaskEditor
+            index={index}
+            key={task.agentId || index}
+            onChange={handleTaskChange}
+            onDelete={handleTaskDelete}
+            task={task}
+          />
+        ))}
+      </Flexbox>
+    );
+  },
+  isEqual,
+);
+
+ExecuteTasksIntervention.displayName = 'ExecuteTasksIntervention';
+
+export default ExecuteTasksIntervention;

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

@@ -2,6 +2,7 @@ import { BuiltinIntervention } from '@lobechat/types';
 
 import { GroupManagementApiName } from '../../types';
 import ExecuteTaskIntervention from './ExecuteTask';
+import ExecuteTasksIntervention from './ExecuteTasks';
 
 /**
  * Group Management Tool Intervention Components Registry
@@ -10,7 +11,9 @@ import ExecuteTaskIntervention from './ExecuteTask';
  * before the tool is executed.
  */
 export const GroupManagementInterventions: Record<string, BuiltinIntervention> = {
-  [GroupManagementApiName.executeTask]: ExecuteTaskIntervention as BuiltinIntervention,
+  [GroupManagementApiName.executeAgentTask]: ExecuteTaskIntervention as BuiltinIntervention,
+  [GroupManagementApiName.executeAgentTasks]: ExecuteTasksIntervention as BuiltinIntervention,
 };
 
 export { default as ExecuteTaskIntervention } from './ExecuteTask';
+export { default as ExecuteTasksIntervention } from './ExecuteTasks';

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

@@ -8,7 +8,7 @@ import SpeakRender from './Speak';
  */
 export const GroupManagementRenders = {
   [GroupManagementApiName.broadcast]: BroadcastRender,
-  [GroupManagementApiName.executeTask]: ExecuteTaskRender,
+  [GroupManagementApiName.executeAgentTask]: ExecuteTaskRender,
   [GroupManagementApiName.speak]: SpeakRender,
 };
 

package/packages/builtin-tool-group-management/src/client/Streaming/ExecuteTask/index.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { DEFAULT_AVATAR } from '@lobechat/const';
+import type { BuiltinStreamingProps } from '@lobechat/types';
+import { Avatar, Flexbox, Markdown } from '@lobehub/ui';
+import { createStaticStyles, useTheme } from 'antd-style';
+import { memo } from 'react';
+
+import { useAgentGroupStore } from '@/store/agentGroup';
+import { agentGroupSelectors } from '@/store/agentGroup/selectors';
+
+import type { ExecuteTaskParams } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  agentTitle: css`
+    font-size: 14px;
+    font-weight: 500;
+    color: ${cssVar.colorText};
+  `,
+  container: css`
+    padding: 12px;
+    border-radius: 8px;
+    background: ${cssVar.colorFillQuaternary};
+  `,
+  task: css`
+    font-size: 13px;
+    color: ${cssVar.colorTextSecondary};
+  `,
+}));
+
+export const ExecuteTaskStreaming = memo<BuiltinStreamingProps<ExecuteTaskParams>>(({ args }) => {
+  const { agentId, task } = args || {};
+  const theme = useTheme();
+
+  // Get active group ID and agent from store
+  const activeGroupId = useAgentGroupStore(agentGroupSelectors.activeGroupId);
+  const agent = useAgentGroupStore((s) =>
+    activeGroupId && agentId
+      ? agentGroupSelectors.getAgentByIdFromGroup(activeGroupId, agentId)(s)
+      : undefined,
+  );
+
+  if (!task) return null;
+
+  return (
+    <div className={styles.container}>
+      <Flexbox gap={8}>
+        <Flexbox align={'center'} gap={8} horizontal>
+          <Avatar
+            avatar={agent?.avatar || DEFAULT_AVATAR}
+            background={agent?.backgroundColor || theme.colorBgContainer}
+            shape={'square'}
+            size={24}
+          />
+          <span className={styles.agentTitle}>{agent?.title || 'Agent'}</span>
+        </Flexbox>
+        <div className={styles.task}>
+          <Markdown animated variant={'chat'}>
+            {task}
+          </Markdown>
+        </div>
+      </Flexbox>
+    </div>
+  );
+});
+
+ExecuteTaskStreaming.displayName = 'ExecuteTaskStreaming';
+
+export default ExecuteTaskStreaming;