@lobehub/lobehub 2.0.0-next.273 → 2.0.0-next.275

package/packages/builtin-tool-agent-builder/src/client/Inspector/UpdateConfig/index.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { UpdateAgentConfigParams, UpdateConfigState } from '../../../types';
+
+const styles = createStaticStyles(({ css }) => ({
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const UpdateConfigInspector = memo<
+  BuiltinInspectorProps<UpdateAgentConfigParams, UpdateConfigState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const togglePlugin = args?.togglePlugin || partialArgs?.togglePlugin;
+  const config = args?.config || partialArgs?.config;
+  const meta = args?.meta || partialArgs?.meta;
+
+  // Build display text
+  const displayText = useMemo(() => {
+    // If toggling plugin, show that info
+    if (togglePlugin?.pluginId) {
+      const enabled = togglePlugin.enabled ?? pluginState?.togglePlugin?.enabled;
+      const action =
+        enabled === true
+          ? t('builtins.lobe-agent-builder.inspector.enablePlugin')
+          : enabled === false
+            ? t('builtins.lobe-agent-builder.inspector.disablePlugin')
+            : t('builtins.lobe-agent-builder.inspector.togglePlugin');
+      return `${action} ${togglePlugin.pluginId}`;
+    }
+
+    // Otherwise show updated fields
+    const fields: string[] = [];
+    if (config) {
+      if (config.model) fields.push('model');
+      if (config.provider) fields.push('provider');
+      if (config.plugins) fields.push('plugins');
+      if (config.params) fields.push('params');
+      if (config.chatConfig) fields.push('chatConfig');
+    }
+    if (meta) {
+      if (meta.title) fields.push('title');
+      if (meta.description) fields.push('description');
+      if (meta.avatar) fields.push('avatar');
+    }
+
+    return fields.length > 0 ? fields.join(', ') : '';
+  }, [togglePlugin, config, meta, pluginState, t]);
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !displayText) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-agent-builder.apiName.updateConfig')}</span>
+      </div>
+    );
+  }
+
+  const isSuccess = pluginState?.success;
+
+  return (
+    <div
+      className={cx(
+        inspectorTextStyles.root,
+        (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+      )}
+    >
+      <span>{t('builtins.lobe-agent-builder.apiName.updateConfig')}</span>
+      {displayText && (
+        <>
+          : <span className={highlightTextStyles.primary}>{displayText}</span>
+        </>
+      )}
+      {!isLoading && isSuccess && (
+        <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+      )}
+    </div>
+  );
+});
+
+UpdateConfigInspector.displayName = 'UpdateConfigInspector';
+
+export default UpdateConfigInspector;

package/packages/builtin-tool-agent-builder/src/client/Inspector/UpdatePrompt/index.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import type { BuiltinInspectorProps } from '@lobechat/types';
+import { Text } from '@lobehub/ui';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { inspectorTextStyles, shinyTextStyles } from '@/styles';
+
+import type { UpdatePromptParams, UpdatePromptState } from '../../../types';
+
+const styles = createStaticStyles(({ css }) => ({
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const UpdatePromptInspector = memo<
+  BuiltinInspectorProps<UpdatePromptParams, UpdatePromptState>
+>(({ args, partialArgs, isArgumentsStreaming, isLoading, pluginState }) => {
+  const { t } = useTranslation('plugin');
+
+  const prompt = args?.prompt || partialArgs?.prompt;
+
+  // Calculate length difference
+  const lengthDiff = useMemo(() => {
+    if (!pluginState) return null;
+
+    const newLength = pluginState.newPrompt?.length ?? 0;
+    const prevLength = pluginState.previousPrompt?.length ?? 0;
+    const diff = newLength - prevLength;
+
+    return diff;
+  }, [pluginState]);
+
+  // Initial streaming state
+  if (isArgumentsStreaming && !prompt) {
+    return (
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-agent-builder.apiName.updatePrompt')}</span>
+      </div>
+    );
+  }
+
+  // Calculate streaming length change
+  const streamingLength = prompt?.length ?? 0;
+  const isSuccess = pluginState?.success;
+
+  return (
+    <div
+      className={cx(
+        inspectorTextStyles.root,
+        (isArgumentsStreaming || isLoading) && shinyTextStyles.shinyText,
+      )}
+    >
+      <span>{t('builtins.lobe-agent-builder.apiName.updatePrompt')}</span>
+      {/* Show length diff when completed */}
+      {!isLoading && !isArgumentsStreaming && lengthDiff !== null && (
+        <Text
+          as={'span'}
+          code
+          color={lengthDiff >= 0 ? cssVar.colorSuccess : cssVar.colorError}
+          fontSize={12}
+          style={{ marginInlineStart: 4 }}
+        >
+          ({lengthDiff >= 0 ? '+' : ''}
+          {lengthDiff}
+          {t('builtins.lobe-agent-builder.inspector.chars')})
+        </Text>
+      )}
+      {/* Show streaming length */}
+      {(isArgumentsStreaming || isLoading) && streamingLength > 0 && (
+        <Text
+          as={'span'}
+          code
+          color={cssVar.colorTextDescription}
+          fontSize={12}
+          style={{ marginInlineStart: 4 }}
+        >
+          ({streamingLength}
+          {t('builtins.lobe-agent-builder.inspector.chars')})
+        </Text>
+      )}
+      {!isLoading && !isArgumentsStreaming && isSuccess && (
+        <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+      )}
+    </div>
+  );
+});
+
+UpdatePromptInspector.displayName = 'UpdatePromptInspector';
+
+export default UpdatePromptInspector;

package/packages/builtin-tool-agent-builder/src/client/Inspector/index.ts

@@ -0,0 +1,29 @@
+import { type BuiltinInspector } from '@lobechat/types';
+
+import { AgentBuilderApiName } from '../../types';
+import { GetAvailableModelsInspector } from './GetAvailableModels';
+import { InstallPluginInspector } from './InstallPlugin';
+import { SearchMarketToolsInspector } from './SearchMarketTools';
+import { UpdateConfigInspector } from './UpdateConfig';
+import { UpdatePromptInspector } from './UpdatePrompt';
+
+/**
+ * Agent Builder Inspector Components Registry
+ *
+ * Inspector components customize the title/header area
+ * of tool calls in the conversation UI.
+ */
+export const AgentBuilderInspectors: Record<string, BuiltinInspector> = {
+  [AgentBuilderApiName.getAvailableModels]: GetAvailableModelsInspector as BuiltinInspector,
+  [AgentBuilderApiName.installPlugin]: InstallPluginInspector as BuiltinInspector,
+  [AgentBuilderApiName.searchMarketTools]: SearchMarketToolsInspector as BuiltinInspector,
+  [AgentBuilderApiName.updateAgentConfig]: UpdateConfigInspector as BuiltinInspector,
+  [AgentBuilderApiName.updatePrompt]: UpdatePromptInspector as BuiltinInspector,
+};
+
+// Re-export individual inspectors for reuse in group-agent-builder
+export { GetAvailableModelsInspector } from './GetAvailableModels';
+export { InstallPluginInspector } from './InstallPlugin';
+export { SearchMarketToolsInspector } from './SearchMarketTools';
+export { UpdateConfigInspector } from './UpdateConfig';
+export { UpdatePromptInspector } from './UpdatePrompt';

package/packages/builtin-tool-agent-builder/src/client/index.ts

@@ -1,4 +1,17 @@
+// Inspector components (customized tool call headers)
+export { AgentBuilderInspectors } from './Inspector';
+export {
+  GetAvailableModelsInspector,
+  InstallPluginInspector,
+  SearchMarketToolsInspector,
+  UpdateConfigInspector,
+  UpdatePromptInspector,
+} from './Inspector';
+
+// Intervention components (interactive editing)
 export { AgentBuilderInterventions } from './Intervention';
+
+// Render components (read-only snapshots)
 export { AgentBuilderRenders } from './Render';
 
 // Re-export types and manifest for convenience

package/packages/builtin-tool-agent-builder/src/executor.ts

@@ -0,0 +1,132 @@
+/**
+ * Agent Builder Executor
+ *
+ * Handles all agent builder tool calls for configuring and customizing agents.
+ */
+import { BaseExecutor, type BuiltinToolContext, type BuiltinToolResult } from '@lobechat/types';
+
+import { AgentBuilderExecutionRuntime } from './ExecutionRuntime';
+import {
+  AgentBuilderApiName,
+  AgentBuilderIdentifier,
+  type GetAvailableModelsParams,
+  type InstallPluginParams,
+  type SearchMarketToolsParams,
+  type UpdateAgentConfigParams,
+  type UpdatePromptParams,
+} from './types';
+
+const runtime = new AgentBuilderExecutionRuntime();
+
+class AgentBuilderExecutor extends BaseExecutor<typeof AgentBuilderApiName> {
+  readonly identifier = AgentBuilderIdentifier;
+  protected readonly apiEnum = AgentBuilderApiName;
+
+  // ==================== Read Operations ====================
+
+  getAvailableModels = async (params: GetAvailableModelsParams): Promise<BuiltinToolResult> => {
+    const result = await runtime.getAvailableModels(params);
+    return {
+      content: result.content,
+      error: result.error
+        ? { body: result.error, message: String(result.error), type: 'RuntimeError' }
+        : undefined,
+      state: result.state,
+      success: result.success,
+    };
+  };
+
+  searchMarketTools = async (params: SearchMarketToolsParams): Promise<BuiltinToolResult> => {
+    const result = await runtime.searchMarketTools(params);
+    return {
+      content: result.content,
+      error: result.error
+        ? { body: result.error, message: String(result.error), type: 'RuntimeError' }
+        : undefined,
+      state: result.state,
+      success: result.success,
+    };
+  };
+
+  // ==================== Write Operations ====================
+
+  updateConfig = async (
+    params: UpdateAgentConfigParams,
+    ctx: BuiltinToolContext,
+  ): Promise<BuiltinToolResult> => {
+    const agentId = ctx.agentId;
+
+    if (!agentId) {
+      return {
+        content: 'No active agent found',
+        error: { message: 'No active agent found', type: 'NoAgentContext' },
+        success: false,
+      };
+    }
+
+    const result = await runtime.updateAgentConfig(agentId, params);
+    return {
+      content: result.content,
+      error: result.error
+        ? { body: result.error, message: String(result.error), type: 'RuntimeError' }
+        : undefined,
+      state: result.state,
+      success: result.success,
+    };
+  };
+
+  updatePrompt = async (
+    params: UpdatePromptParams,
+    ctx: BuiltinToolContext,
+  ): Promise<BuiltinToolResult> => {
+    const agentId = ctx.agentId;
+
+    if (!agentId) {
+      return {
+        content: 'No active agent found',
+        error: { message: 'No active agent found', type: 'NoAgentContext' },
+        success: false,
+      };
+    }
+
+    const result = await runtime.updatePrompt(agentId, {
+      streaming: true,
+      ...params,
+    });
+    return {
+      content: result.content,
+      error: result.error
+        ? { body: result.error, message: String(result.error), type: 'RuntimeError' }
+        : undefined,
+      state: result.state,
+      success: result.success,
+    };
+  };
+
+  installPlugin = async (
+    params: InstallPluginParams,
+    ctx: BuiltinToolContext,
+  ): Promise<BuiltinToolResult> => {
+    const agentId = ctx.agentId;
+
+    if (!agentId) {
+      return {
+        content: 'No active agent found',
+        error: { message: 'No active agent found', type: 'NoAgentContext' },
+        success: false,
+      };
+    }
+
+    const result = await runtime.installPlugin(agentId, params);
+    return {
+      content: result.content,
+      error: result.error
+        ? { body: result.error, message: String(result.error), type: 'RuntimeError' }
+        : undefined,
+      state: result.state,
+      success: result.success,
+    };
+  };
+}
+
+export const agentBuilderExecutor = new AgentBuilderExecutor();

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

@@ -6,20 +6,11 @@ import { Check, X } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { highlightTextStyles, shinyTextStyles } from '@/styles';
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
 
 import { type ExecuteCodeState } from '../../../types';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  root: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    color: ${cssVar.colorTextSecondary};
-  `,
-
+const styles = createStaticStyles(({ css }) => ({
   statusIcon: css`
     margin-block-end: -2px;
     margin-inline-start: 4px;
@@ -42,13 +33,13 @@ export const ExecuteCodeInspector = memo<
   if (isArgumentsStreaming) {
     if (!description)
       return (
-        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
           <span>{t('builtins.lobe-cloud-sandbox.apiName.executeCode')}</span>
         </div>
       );
 
     return (
-      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+      <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
         <span>{t('builtins.lobe-cloud-sandbox.apiName.executeCode')}: </span>
         <span className={highlightTextStyles.gold}>{description}</span>
       </div>
@@ -56,7 +47,7 @@ export const ExecuteCodeInspector = memo<
   }
 
   return (
-    <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+    <div className={cx(inspectorTextStyles.root, isLoading && shinyTextStyles.shinyText)}>
       <span style={{ marginInlineStart: 2 }}>
         <span>{t('builtins.lobe-cloud-sandbox.apiName.executeCode')}: </span>
         {description && <span className={highlightTextStyles.primary}>{description}</span>}

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

@@ -6,19 +6,11 @@ import { Check, X } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { highlightTextStyles, shinyTextStyles } from '@/styles';
+import { highlightTextStyles, inspectorTextStyles, shinyTextStyles } from '@/styles';
 
 import { type RunCommandState } from '../../../types';
 
-const styles = createStaticStyles(({ css, cssVar }) => ({
-  root: css`
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-
-    color: ${cssVar.colorTextSecondary};
-  `,
+const styles = createStaticStyles(({ css }) => ({
   statusIcon: css`
     margin-block-end: -2px;
     margin-inline-start: 4px;
@@ -41,13 +33,13 @@ export const RunCommandInspector = memo<BuiltinInspectorProps<RunCommandParams,
     if (isArgumentsStreaming) {
       if (!description)
         return (
-          <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
             <span>{t('builtins.lobe-cloud-sandbox.apiName.runCommand')}</span>
           </div>
         );
 
       return (
-        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <div className={cx(inspectorTextStyles.root, shinyTextStyles.shinyText)}>
           <span>{t('builtins.lobe-cloud-sandbox.apiName.runCommand')}: </span>
           <span className={highlightTextStyles.primary}>{description}</span>
         </div>
@@ -55,7 +47,7 @@ export const RunCommandInspector = memo<BuiltinInspectorProps<RunCommandParams,
     }
 
     return (
-      <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+      <div className={cx(inspectorTextStyles.root, isLoading && shinyTextStyles.shinyText)}>
         <span style={{ marginInlineStart: 2 }}>
           <span>{t('builtins.lobe-cloud-sandbox.apiName.runCommand')}: </span>
           {description && <span className={highlightTextStyles.primary}>{description}</span>}

package/packages/builtin-tool-group-agent-builder/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "exports": {
     ".": "./src/index.ts",
+    "./client": "./src/client/index.ts",
+    "./executor": "./src/executor.ts",
     "./executionRuntime": "./src/ExecutionRuntime/index.ts"
   },
   "main": "./src/index.ts",
@@ -14,6 +16,10 @@
     "@lobechat/types": "workspace:*"
   },
   "peerDependencies": {
-    "react": "*"
+    "@lobehub/ui": "^4",
+    "antd": "^6",
+    "lucide-react": "*",
+    "react": "*",
+    "react-i18next": "*"
   }
 }