@lobehub/lobehub 2.0.0-next.48 → 2.0.0-next.49

package/src/features/Conversation/Messages/Group/Tool/Render/Intervention/ModeSelector.tsx

@@ -0,0 +1,134 @@
+import { Button, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { ChevronDown, Hand, ListChecks, Zap } from 'lucide-react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Center } from 'react-layout-kit';
+
+import { useUserStore } from '@/store/user';
+
+import { ApprovalMode } from './index';
+
+const useStyles = createStyles(({ css, token }) => ({
+  icon: css`
+    border: 1px solid ${token.colorFillTertiary};
+    border-radius: ${token.borderRadius}px;
+    background: ${token.colorBgElevated};
+  `,
+  modeButton: css`
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextSecondary};
+  `,
+  modeDesc: css`
+    margin-block-start: 2px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: ${token.colorTextDescription};
+  `,
+  modeItem: css`
+    min-width: 160px;
+  `,
+  modeLabel: css`
+    font-size: ${token.fontSize}px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: ${token.colorText};
+  `,
+}));
+
+const ModeSelector = memo(() => {
+  const { t } = useTranslation('chat');
+  const { styles } = useStyles();
+  const [approvalMode, setSettings] = useUserStore((s) => [
+    s.settings.tool?.approvalMode || 'manual',
+    s.setSettings,
+  ]);
+
+  const modeLabels = useMemo(
+    () => ({
+      'allow-list': t('tool.intervention.mode.allowList'),
+      'auto-run': t('tool.intervention.mode.autoRun'),
+      'manual': t('tool.intervention.mode.manual'),
+    }),
+    [t],
+  );
+
+  const handleModeChange = useCallback(
+    async (mode: ApprovalMode) => {
+      await setSettings({ tool: { approvalMode: mode } });
+    },
+    [setSettings],
+  );
+
+  const menuItems = useMemo<MenuProps['items']>(
+    () => [
+      {
+        icon: (
+          <Center className={styles.icon} height={32} width={32}>
+            <Icon icon={Zap} />
+          </Center>
+        ),
+        key: 'auto-run',
+        label: (
+          <div className={styles.modeItem}>
+            <div className={styles.modeLabel}>{modeLabels['auto-run']}</div>
+            <div className={styles.modeDesc}>{t('tool.intervention.mode.autoRunDesc')}</div>
+          </div>
+        ),
+        onClick: () => handleModeChange('auto-run'),
+      },
+      {
+        icon: (
+          <Center className={styles.icon} height={32} width={32}>
+            <Icon icon={ListChecks} />
+          </Center>
+        ),
+        key: 'allow-list',
+        label: (
+          <div className={styles.modeItem}>
+            <div className={styles.modeLabel}>{modeLabels['allow-list']}</div>
+            <div className={styles.modeDesc}>{t('tool.intervention.mode.allowListDesc')}</div>
+          </div>
+        ),
+        onClick: () => handleModeChange('allow-list'),
+      },
+      {
+        icon: (
+          <Center className={styles.icon} height={32} width={32}>
+            <Icon icon={Hand} />
+          </Center>
+        ),
+        key: 'manual',
+        label: (
+          <div className={styles.modeItem}>
+            <div className={styles.modeLabel}>{modeLabels.manual}</div>
+            <div className={styles.modeDesc}>{t('tool.intervention.mode.manualDesc')}</div>
+          </div>
+        ),
+        onClick: () => handleModeChange('manual'),
+      },
+    ],
+    [modeLabels, handleModeChange, styles, t],
+  );
+
+  return (
+    <Dropdown
+      // @ts-expect-error activeKey 没在 Dropdown key 里很奇怪
+      menu={{ activeKey: approvalMode, items: menuItems }}
+      placement="bottomLeft"
+    >
+      <Button
+        className={styles.modeButton}
+        color={'default'}
+        icon={ChevronDown}
+        iconPosition="end"
+        size="small"
+        variant={'text'}
+      >
+        {modeLabels[approvalMode]}
+      </Button>
+    </Dropdown>
+  );
+});
+
+export default ModeSelector;

package/src/features/Conversation/Messages/Group/Tool/Render/Intervention/index.tsx

@@ -0,0 +1,99 @@
+import { safeParseJSON } from '@lobechat/utils';
+import { ActionIcon } from '@lobehub/ui';
+import { Edit3Icon } from 'lucide-react';
+import { Suspense, memo, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+
+import Arguments from '../Arguments';
+import ApprovalActions from './ApprovalActions';
+import KeyValueEditor from './KeyValueEditor';
+import ModeSelector from './ModeSelector';
+
+export type ApprovalMode = 'auto-run' | 'allow-list' | 'manual';
+
+interface InterventionProps {
+  apiName: string;
+  id: string;
+  identifier: string;
+  requestArgs: string;
+  toolCallId: string;
+}
+
+const Intervention = memo<InterventionProps>(
+  ({ requestArgs, id, identifier, apiName, toolCallId }) => {
+    const { t } = useTranslation('chat');
+    const approvalMode = useUserStore((s) => s.settings.tool?.approvalMode || 'manual');
+    const [isEditing, setIsEditing] = useState(false);
+    const [optimisticUpdatePluginArguments] = useChatStore((s) => [
+      s.optimisticUpdatePluginArguments,
+    ]);
+
+    const handleCancel = useCallback(() => {
+      setIsEditing(false);
+    }, []);
+
+    const handleFinish = useCallback(
+      async (editedObject: Record<string, any>) => {
+        if (!id) return;
+
+        try {
+          const newArgsString = JSON.stringify(editedObject, null, 2);
+
+          if (newArgsString !== requestArgs) {
+            await optimisticUpdatePluginArguments(id, editedObject, true);
+          }
+          setIsEditing(false);
+        } catch (error) {
+          console.error('Error stringifying arguments:', error);
+        }
+      },
+      [requestArgs, id],
+    );
+
+    if (isEditing)
+      return (
+        <Suspense fallback={<Arguments arguments={requestArgs} />}>
+          <KeyValueEditor
+            initialValue={safeParseJSON(requestArgs || '')}
+            onCancel={handleCancel}
+            onFinish={handleFinish}
+          />
+        </Suspense>
+      );
+
+    return (
+      <Flexbox gap={12}>
+        <Arguments
+          actions={
+            <ActionIcon
+              icon={Edit3Icon}
+              onClick={() => {
+                setIsEditing(true);
+              }}
+              size={'small'}
+              title={t('edit', { ns: 'common' })}
+            />
+          }
+          arguments={requestArgs}
+        />
+
+        <Flexbox horizontal justify={'space-between'}>
+          <ModeSelector />
+          <ApprovalActions
+            apiName={apiName}
+            approvalMode={approvalMode}
+            identifier={identifier}
+            messageId={id}
+            toolCallId={toolCallId}
+          />
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+);
+
+export default Intervention;

package/src/features/Conversation/Messages/Group/Tool/Render/RejectedResponse.tsx

@@ -0,0 +1,45 @@
+import { Icon } from '@lobehub/ui';
+import { createStyles } from 'antd-style';
+import { AlertTriangle } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  container: css`
+    padding-block: 8px;
+    padding-inline: 6px;
+  `,
+  reason: css`
+    font-size: 12px;
+    color: ${token.colorTextTertiary};
+  `,
+  title: css`
+    font-size: 14px;
+    color: ${token.colorTextSecondary};
+  `,
+}));
+
+interface RejectedResponseProps {
+  reason?: string;
+}
+
+const RejectedResponse = memo<RejectedResponseProps>(({ reason }) => {
+  const { t } = useTranslation('chat');
+  const { styles, theme } = useStyles();
+
+  return (
+    <Flexbox className={styles.container} gap={8}>
+      <Flexbox align={'center'} gap={8} horizontal>
+        <Icon color={theme.colorWarning} icon={AlertTriangle} size={16} />
+        <div className={styles.title}>
+          {reason
+            ? t('tool.intervention.rejectedWithReason', { reason })
+            : t('tool.intervention.toolRejected')}
+        </div>
+      </Flexbox>
+    </Flexbox>
+  );
+});
+
+export default RejectedResponse;

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

@@ -1,15 +1,18 @@
 import { LOADING_FLAT } from '@lobechat/const';
-import { ChatToolResult } from '@lobechat/types';
+import { ChatToolResult, ToolIntervention } from '@lobechat/types';
 import { Suspense, memo } from 'react';
 
 import CustomRender from './CustomRender';
 import ErrorResponse from './ErrorResponse';
+import Intervention from './Intervention';
 import LoadingPlaceholder from './LoadingPlaceholder';
+import RejectedResponse from './RejectedResponse';
 
 interface RenderProps {
   apiName: string;
   arguments?: string;
   identifier: string;
+  intervention?: ToolIntervention;
   /**
    * ContentBlock ID (not the group message ID)
    */
@@ -18,6 +21,7 @@ interface RenderProps {
   setShowPluginRender: (show: boolean) => void;
   showPluginRender: boolean;
   toolCallId: string;
+  toolMessageId?: string;
   type?: string;
 }
 
@@ -38,7 +42,25 @@ const Render = memo<RenderProps>(
     apiName,
     result,
     type,
+    intervention,
+    toolMessageId,
   }) => {
+    if (toolMessageId && intervention?.status === 'pending') {
+      return (
+        <Intervention
+          apiName={apiName}
+          id={toolMessageId}
+          identifier={identifier}
+          requestArgs={requestArgs || ''}
+          toolCallId={toolCallId}
+        />
+      );
+    }
+
+    if (intervention?.status === 'rejected') {
+      return <RejectedResponse reason={intervention.rejectedReason} />;
+    }
+
     if (!result) return null;
 
     // Handle error state

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

@@ -1,5 +1,5 @@
-import { ChatToolResult } from '@lobechat/types';
-import { CSSProperties, memo, useState } from 'react';
+import { ChatToolResult, ToolIntervention } from '@lobechat/types';
+import { CSSProperties, memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
 import AnimatedCollapsed from '@/components/AnimatedCollapsed';
@@ -10,15 +10,17 @@ import Render from './Render';
 export interface GroupToolProps {
   apiName: string;
   arguments?: string;
-  id: string;
-  identifier: string;
-  index: number;
   /**
    * ContentBlock ID (not the group message ID)
    */
-  messageId: string;
+  assistantMessageId: string;
+  id: string;
+  identifier: string;
+  index: number;
+  intervention?: ToolIntervention;
   result?: ChatToolResult;
   style?: CSSProperties;
+  toolMessageId?: string;
   type?: string;
 }
 
@@ -29,10 +31,29 @@ export interface GroupToolProps {
  * so we always show the results directly.
  */
 const Tool = memo<GroupToolProps>(
-  ({ arguments: requestArgs, apiName, messageId, id, index, identifier, style, result, type }) => {
+  ({
+    arguments: requestArgs,
+    apiName,
+    assistantMessageId,
+    id,
+    intervention,
+    index,
+    identifier,
+    style,
+    result,
+    type,
+    toolMessageId,
+  }) => {
     // Default to false since group messages are all completed
-    const [showDetail, setShowDetail] = useState(false);
-    const [showPluginRender, setShowPluginRender] = useState(false);
+
+    const [showToolContent, setShowToolDetail] = useState(false);
+    const [showCustomPluginUI, setShowCustomPluginUI] = useState(false);
+
+    useEffect(() => {
+      if (intervention?.status === 'pending') {
+        setShowToolDetail(true);
+      }
+    }, [intervention?.status]);
 
     return (
       <Flexbox gap={8} style={style}>
@@ -42,24 +63,27 @@ const Tool = memo<GroupToolProps>(
           id={id}
           identifier={identifier}
           index={index}
-          messageId={messageId}
+          intervention={intervention}
+          messageId={assistantMessageId}
           result={result}
-          setShowPluginRender={setShowPluginRender}
-          setShowRender={setShowDetail}
-          showPluginRender={showPluginRender}
-          showRender={showDetail}
+          setShowPluginRender={setShowCustomPluginUI}
+          setShowRender={setShowToolDetail}
+          showPluginRender={showCustomPluginUI}
+          showRender={showToolContent}
           type={type}
         />
-        <AnimatedCollapsed open={showDetail} width={{ collapsed: 'auto' }}>
+        <AnimatedCollapsed open={showToolContent} width={{ collapsed: 'auto' }}>
           <Render
             apiName={apiName}
             arguments={requestArgs}
             identifier={identifier}
-            messageId={messageId}
+            intervention={intervention}
+            messageId={assistantMessageId}
             result={result}
-            setShowPluginRender={setShowPluginRender}
-            showPluginRender={showPluginRender}
+            setShowPluginRender={setShowCustomPluginUI}
+            showPluginRender={showCustomPluginUI}
             toolCallId={id}
+            toolMessageId={toolMessageId}
             type={type}
           />
         </AnimatedCollapsed>

package/src/features/Conversation/Messages/Group/Tools.tsx

@@ -32,12 +32,14 @@ export const Tools = memo<ToolsRendererProps>(({ messageId, tools }) => {
         <Tool
           apiName={tool.apiName}
           arguments={tool.arguments}
+          assistantMessageId={messageId}
           id={tool.id}
           identifier={tool.identifier}
           index={index}
+          intervention={tool.intervention}
           key={tool.id}
-          messageId={messageId}
           result={tool.result}
+          toolMessageId={tool.result_msg_id}
           type={tool.type}
         />
       ))}

package/src/locales/default/chat.ts

@@ -266,6 +266,8 @@ export default {
 
   noSelectedAgents: '还未选择成员',
 
+  openInNewWindow: '单独打开页面',
+
   owner: '群主',
 
   pin: '置顶',
@@ -398,6 +400,26 @@ export default {
     remained: '剩余',
     used: '使用',
   },
+  tool: {
+    intervention: {
+      approve: '批准',
+      approveAndRemember: '批准并记住',
+      approveOnce: '仅本次批准',
+      mode: {
+        allowList: '白名单',
+        allowListDesc: '仅自动执行已批准的工具',
+        autoRun: '自动批准',
+        autoRunDesc: '自动批准所有工具执行',
+        manual: '手动',
+        manualDesc: '每次调用都需要手动批准',
+      },
+      reject: '拒绝',
+      rejectReasonPlaceholder: '输入拒绝原因将帮助 Agent 理解并优化后续行动',
+      rejectTitle: '拒绝本次工具调用',
+      rejectedWithReason: '本次工具调用被主动拒绝:{{reason}}',
+      toolRejected: '本次工具调用被主动拒绝',
+    },
+  },
   topic: {
     checkOpenNewTopic: '是否开启新话题?',
     checkSaveCurrentMessages: '是否保存当前会话为话题?',

package/src/locales/default/common.ts

@@ -138,6 +138,7 @@ export default {
     },
   },
   close: '关闭',
+  confirm: '确认',
   contact: '联系我们',
   copy: '复制',
   copyFail: '复制失败',

package/src/locales/default/topic.ts

@@ -6,6 +6,7 @@ export default {
     confirmRemoveUnstarred: '即将删除未收藏话题，删除后将不可恢复，请谨慎操作。',
     duplicate: '创建副本',
     export: '导出话题',
+    openInNewWindow: '单独打开页面',
     removeAll: '删除全部话题',
     removeUnstarred: '删除未收藏话题',
   },

package/src/server/routers/lambda/message.ts

@@ -179,11 +179,14 @@ export const messageRouter = router({
     .input(
       z.object({
         id: z.string(),
+        sessionId: z.string().nullable().optional(),
+        topicId: z.string().nullable().optional(),
         value: UpdateMessagePluginSchema.partial(),
       }),
     )
     .mutation(async ({ input, ctx }) => {
-      return ctx.messageModel.updateMessagePlugin(input.id, input.value);
+      const { id, value, ...options } = input;
+      return ctx.messageService.updateMessagePlugin(id, value, options);
     }),
 
   updateMessageRAG: messageProcedure

package/src/server/services/message/index.ts

@@ -150,6 +150,19 @@ export class MessageService {
     return this.queryWithSuccess(options);
   }
 
+  /**
+   * Update message plugin and return message list
+   * Pattern: update + conditional query
+   */
+  async updateMessagePlugin(
+    id: string,
+    value: any,
+    options: QueryOptions,
+  ): Promise<{ messages?: UIChatMessage[], success: boolean; }> {
+    await this.messageModel.updateMessagePlugin(id, value);
+    return this.queryWithSuccess(options);
+  }
+
   /**
    * Update message and return message list
    * Pattern: update + conditional query

package/src/services/message/index.ts

@@ -6,6 +6,7 @@ import {
   CreateMessageParams,
   CreateMessageResult,
   MessageMetadata,
+  MessagePluginItem,
   ModelRankItem,
   UIChatMessage,
   UpdateMessageParams,
@@ -77,8 +78,9 @@ export class MessageService {
   };
 
   updateMessageError = async (id: string, value: ChatMessageError) => {
-    const error = value.type ? value : { body: value, message: value.message, type: 'ApplicationRuntimeError' };
-
+    const error = value.type
+      ? value
+      : { body: value, message: value.message, type: 'ApplicationRuntimeError' };
 
     return lambdaClient.message.update.mutate({ id, value: { error } });
   };
@@ -153,6 +155,19 @@ export class MessageService {
     });
   };
 
+  updateMessagePlugin = async (
+    id: string,
+    value: Partial<Omit<MessagePluginItem, 'id'>>,
+    options?: { sessionId?: string | null; topicId?: string | null },
+  ): Promise<UpdateMessageResult> => {
+    return lambdaClient.message.updateMessagePlugin.mutate({
+      id,
+      sessionId: options?.sessionId,
+      topicId: options?.topicId,
+      value,
+    });
+  };
+
   updateMessageRAG = async (
     id: string,
     data: UpdateMessageRAGParams,