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

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

@@ -1,12 +1,13 @@
-import { ActionIcon } from '@lobehub/ui';
+import { ActionIcon, Icon, Tooltip } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { Check, LayoutPanelTop, LogsIcon, LucideBug, LucideBugOff, X } from 'lucide-react';
+import { Ban, Check, LayoutPanelTop, LogsIcon, LucideBug, LucideBugOff, X } from 'lucide-react';
 import { CSSProperties, memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import { LOADING_FLAT } from '@/const/message';
 import { shinyTextStylish } from '@/styles/loading';
+import { ToolIntervention } from '@/types/message';
 
 import Debug from './Debug';
 import Settings from './Settings';
@@ -66,6 +67,7 @@ interface InspectorProps {
   id: string;
   identifier: string;
   index: number;
+  intervention?: ToolIntervention;
   messageId: string;
   result?: { content: string | null; error?: any; state?: any };
   setShowPluginRender: (show: boolean) => void;
@@ -91,6 +93,7 @@ const Inspectors = memo<InspectorProps>(
     showPluginRender,
     setShowPluginRender,
     type,
+    intervention,
   }) => {
     const { t } = useTranslation('plugin');
     const { styles, theme } = useStyles();
@@ -102,6 +105,11 @@ const Inspectors = memo<InspectorProps>(
 
     const hasResult = hasSuccessResult || hasError;
 
+    const isPending = intervention?.status === 'pending';
+    const isReject = intervention?.status === 'rejected';
+    const isTitleLoading = !hasResult && !isPending;
+
+    const showCustomPluginRender = showRender && !isPending && !isReject;
     return (
       <Flexbox className={styles.container} gap={4}>
         <Flexbox align={'center'} distribution={'space-between'} gap={8} horizontal>
@@ -117,16 +125,16 @@ const Inspectors = memo<InspectorProps>(
           >
             <ToolTitle
               apiName={apiName}
-              hasResult={hasResult}
               identifier={identifier}
               index={index}
+              isLoading={isTitleLoading}
               messageId={messageId}
               toolCallId={id}
             />
           </Flexbox>
           <Flexbox align={'center'} gap={8} horizontal>
             <Flexbox className={styles.actions} horizontal>
-              {showRender && (
+              {showCustomPluginRender && (
                 <ActionIcon
                   icon={showPluginRender ? LogsIcon : LayoutPanelTop}
                   onClick={() => {
@@ -148,10 +156,14 @@ const Inspectors = memo<InspectorProps>(
             </Flexbox>
             {hasResult && (
               <Flexbox align={'center'} gap={4} horizontal style={{ fontSize: 12 }}>
-                {hasError ? (
-                  <X color={theme.colorError} size={14} />
+                {isReject ? (
+                  <Tooltip title={t('tool.intervention.toolRejected', { ns: 'chat' })}>
+                    <Icon color={theme.colorTextTertiary} icon={Ban} />
+                  </Tooltip>
+                ) : hasError ? (
+                  <Icon color={theme.colorError} icon={X} />
                 ) : (
-                  <Check color={theme.colorSuccess} size={14} />
+                  <Icon color={theme.colorSuccess} icon={Check} />
                 )}
               </Flexbox>
             )}

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

@@ -115,18 +115,20 @@ const Arguments = memo<ArgumentsProps>(({ arguments: args = '', shine, actions }
           {actions}
         </Flexbox>
       )}
-      {Object.entries(displayArgs).map(([key, value]) => {
-        return (
-          <ObjectEntity
-            editable={false}
-            hasMinWidth={hasMinWidth}
-            key={key}
-            objectKey={key}
-            shine={shine}
-            value={value}
-          />
-        );
-      })}
+      <Flexbox>
+        {Object.entries(displayArgs).map(([key, value]) => {
+          return (
+            <ObjectEntity
+              editable={false}
+              hasMinWidth={hasMinWidth}
+              key={key}
+              objectKey={key}
+              shine={shine}
+              value={value}
+            />
+          );
+        })}
+      </Flexbox>
     </div>
   );
 });

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

@@ -0,0 +1,143 @@
+import { Button, Dropdown } from '@lobehub/ui';
+import { Input, Popover, Space } from 'antd';
+import { ChevronDown } from 'lucide-react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+import { useGroupMessage } from '@/features/Conversation/Messages/Group/GroupContext';
+import { useChatStore } from '@/store/chat';
+import { useUserStore } from '@/store/user';
+
+import { ApprovalMode } from './index';
+
+interface ApprovalActionsProps {
+  apiName: string;
+  approvalMode: ApprovalMode;
+  identifier: string;
+  messageId: string;
+  toolCallId: string;
+}
+
+const ApprovalActions = memo<ApprovalActionsProps>(
+  ({ approvalMode, messageId, identifier, apiName }) => {
+    const { t } = useTranslation(['chat', 'common']);
+    const [rejectReason, setRejectReason] = useState('');
+    const [rejectPopoverOpen, setRejectPopoverOpen] = useState(false);
+    const [rejectLoading, setRejectLoading] = useState(false);
+    const [approveLoading, setApproveLoading] = useState(false);
+
+    const { assistantGroupId } = useGroupMessage();
+    const [approveToolIntervention, rejectToolIntervention] = useChatStore((s) => [
+      s.approveToolCalling,
+      s.rejectToolCalling,
+    ]);
+    const addToolToAllowList = useUserStore((s) => s.addToolToAllowList);
+
+    const handleApprove = async (remember?: boolean) => {
+      setApproveLoading(true);
+      try {
+        // 1. Update intervention status
+        await approveToolIntervention(messageId, assistantGroupId);
+
+        // 2. If remembered, add to allowList
+        if (remember) {
+          const toolKey = `${identifier}/${apiName}`;
+          await addToolToAllowList(toolKey);
+        }
+      } finally {
+        setApproveLoading(false);
+      }
+    };
+
+    const handleReject = async (reason?: string) => {
+      setRejectLoading(true);
+      await rejectToolIntervention(messageId, reason);
+      setRejectLoading(false);
+      setRejectPopoverOpen(false);
+      setRejectReason('');
+    };
+
+    return (
+      <Flexbox gap={8} horizontal>
+        <Popover
+          arrow={false}
+          content={
+            <Flexbox gap={12} style={{ width: 400 }}>
+              <Flexbox align={'center'} horizontal justify={'space-between'}>
+                <div>{t('tool.intervention.rejectTitle')}</div>
+
+                <Button
+                  loading={rejectLoading}
+                  onClick={() => handleReject(rejectReason)}
+                  size="small"
+                  type="primary"
+                >
+                  {t('confirm', { ns: 'common' })}
+                </Button>
+              </Flexbox>
+              <Input.TextArea
+                autoFocus
+                onChange={(e) => setRejectReason(e.target.value)}
+                placeholder={t('tool.intervention.rejectReasonPlaceholder')}
+                rows={3}
+                value={rejectReason}
+                variant={'filled'}
+              />
+            </Flexbox>
+          }
+          onOpenChange={(open) => {
+            if (rejectLoading) return;
+
+            setRejectPopoverOpen(open);
+          }}
+          open={rejectPopoverOpen}
+          placement="bottomRight"
+          trigger="click"
+        >
+          <Button size="small" type="default">
+            {t('tool.intervention.reject')}
+          </Button>
+        </Popover>
+
+        {approvalMode === 'allow-list' ? (
+          <Space.Compact>
+            <Button
+              loading={approveLoading}
+              onClick={() => handleApprove(true)}
+              size="small"
+              type="primary"
+            >
+              {t('tool.intervention.approveAndRemember')}
+            </Button>
+            <Dropdown
+              menu={{
+                items: [
+                  {
+                    disabled: approveLoading,
+                    key: 'once',
+                    label: t('tool.intervention.approveOnce'),
+                    onClick: () => handleApprove(false),
+                  },
+                ],
+              }}
+            >
+              <Button disabled={approveLoading} icon={ChevronDown} size="small" type="primary" />
+            </Dropdown>
+          </Space.Compact>
+        ) : (
+          <Button
+            loading={approveLoading}
+            onClick={() => handleApprove()}
+            size="small"
+            type="primary"
+          >
+            {t('tool.intervention.approve')}
+          </Button>
+        )}
+      </Flexbox>
+    );
+  },
+);
+
+export default ApprovalActions;

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

@@ -0,0 +1,213 @@
+import { ActionIcon, Button, Icon, Input } from '@lobehub/ui';
+import { App, Form, FormInstance } from 'antd';
+import { createStyles } from 'antd-style';
+import { LucidePlus, LucideTrash } from 'lucide-react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Flexbox } from 'react-layout-kit';
+
+const useStyles = createStyles(({ css, token }) => ({
+  form: css`
+    position: relative;
+
+    width: 100%;
+    min-width: 600px;
+    padding: 8px;
+    border-radius: ${token.borderRadiusLG}px;
+  `,
+  formItem: css`
+    margin-block-end: 4px !important;
+  `,
+  input: css`
+    font-family: ${token.fontFamilyCode};
+    font-size: 12px;
+  `,
+  row: css`
+    position: relative;
+  `,
+  title: css`
+    margin-block-end: 4px;
+    color: ${token.colorTextTertiary};
+  `,
+}));
+
+interface KeyValueItem {
+  id: string;
+  key?: string;
+  value?: string;
+}
+
+interface KeyValueEditorProps {
+  initialValue?: Record<string, any>;
+  onCancel?: () => void;
+  onFinish?: (value: Record<string, any>) => Promise<void>;
+}
+
+const recordToFormList = (record: Record<string, any>): KeyValueItem[] =>
+  Object.entries(record)
+    .map(([key, val], index) => ({
+      id: `${key}-${index}`,
+      key,
+      value: typeof val === 'string' ? val : JSON.stringify(val),
+    }))
+    .filter((item) => item.key);
+
+const formListToRecord = (list: KeyValueItem[]): Record<string, any> => {
+  const record: Record<string, any> = {};
+  list.forEach((item) => {
+    if (item.key) {
+      try {
+        record[item.key] = JSON.parse(item.value || '""');
+      } catch {
+        record[item.key] = item.value || '';
+      }
+    }
+  });
+  return record;
+};
+
+const KeyValueEditor = memo<KeyValueEditorProps>(({ initialValue = {}, onFinish, onCancel }) => {
+  const { styles } = useStyles();
+  const { t } = useTranslation(['tool', 'common']);
+  const [form] = Form.useForm();
+  const { message } = App.useApp();
+  const formRef = useRef<FormInstance>(null);
+
+  useEffect(() => {
+    form.setFieldsValue({ items: recordToFormList(initialValue) });
+  }, [initialValue, form]);
+
+  const [updating, setUpdating] = useState(false);
+  const handleFinish = async () => {
+    setUpdating(true);
+    try {
+      await form.validateFields();
+      const values = form.getFieldsValue();
+      const record = formListToRecord(values.items || []);
+      await onFinish?.(record);
+    } catch (errorInfo) {
+      console.error('Validation Failed:', errorInfo);
+      message.error(t('updateArgs.formValidationFailed') || 'Please check the form for errors.');
+    }
+    setUpdating(false);
+  };
+
+  const handleCancel = () => {
+    onCancel?.();
+  };
+
+  const validateKeys = (_: any, item: KeyValueItem, items: KeyValueItem[]) => {
+    if (!item?.key) {
+      return Promise.resolve();
+    }
+    const keys = items.map((i) => i?.key).filter(Boolean);
+    if (keys.filter((k) => k === item.key).length > 1) {
+      return Promise.reject(new Error(t('updateArgs.duplicateKeyError')));
+    }
+
+    return Promise.resolve();
+  };
+
+  return (
+    <Form
+      autoComplete="off"
+      className={styles.form}
+      form={form}
+      initialValues={{ items: recordToFormList(initialValue) }}
+      ref={formRef}
+    >
+      <Flexbox className={styles.title} gap={8} horizontal>
+        <Flexbox flex={1}>key</Flexbox>
+        <Flexbox flex={4}>value</Flexbox>
+      </Flexbox>
+      <Form.List name="items">
+        {(fields, { add, remove }) => (
+          <Flexbox width={'100%'}>
+            {fields.map(({ key, name, ...restField }, index) => (
+              <Flexbox
+                align="center"
+                className={styles.row}
+                gap={8}
+                horizontal
+                key={key}
+                width={'100%'}
+              >
+                <Form.Item
+                  {...restField}
+                  className={styles.formItem}
+                  name={[name, 'key']}
+                  rules={[
+                    { message: t('updateArgs.keyRequired'), required: true },
+                    {
+                      validator: (rule) =>
+                        validateKeys(
+                          rule,
+                          form.getFieldValue(['items', index]),
+                          form.getFieldValue('items'),
+                        ),
+                    },
+                  ]}
+                  style={{ flex: 1 }}
+                  validateTrigger={['onChange', 'onBlur']}
+                >
+                  <Input
+                    allowClear
+                    className={styles.input}
+                    placeholder={t('updateArgs.form.key')}
+                    variant={'filled'}
+                  />
+                </Form.Item>
+                <Form.Item
+                  {...restField}
+                  className={styles.formItem}
+                  name={[name, 'value']}
+                  style={{ flex: 4 }}
+                >
+                  <Input
+                    allowClear
+                    className={styles.input}
+                    placeholder={t('updateArgs.form.value')}
+                    variant={'filled'}
+                  />
+                </Form.Item>
+                <ActionIcon
+                  icon={LucideTrash}
+                  onClick={() => remove(name)}
+                  size={'small'}
+                  style={{
+                    marginBottom: 6,
+                  }}
+                  title={t('delete', { ns: 'common' })}
+                />
+              </Flexbox>
+            ))}
+            <Form.Item style={{ marginBottom: 0, marginTop: 8 }}>
+              <Flexbox gap={8} horizontal justify={'space-between'}>
+                <Button
+                  color={'default'}
+                  icon={<Icon icon={LucidePlus} />}
+                  onClick={() => add({ id: `new-${Date.now()}`, key: '', value: '' })}
+                  size={'small'}
+                  variant="filled"
+                >
+                  {t('updateArgs.form.add')}
+                </Button>
+
+                <Flexbox gap={8} horizontal>
+                  <Button onClick={handleCancel} size={'small'}>
+                    {t('cancel', { ns: 'common' })}
+                  </Button>
+                  <Button loading={updating} onClick={handleFinish} size={'small'} type={'primary'}>
+                    {t('save', { ns: 'common' })}
+                  </Button>
+                </Flexbox>
+              </Flexbox>
+            </Form.Item>
+          </Flexbox>
+        )}
+      </Form.List>
+    </Form>
+  );
+});
+
+export default KeyValueEditor;

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;