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

package/renovate.json

@@ -17,22 +17,39 @@
   "ignoreDeps": [],
   "labels": ["dependencies"],
   "packageRules": [
-    // 1) Pinned deps: isolate (OK to use separate* here because there's no matchUpdateTypes)
     {
-      "description": "Isolate PRs for pinned deps (exact x.y.z)",
+      "description": "Un-group tilde ranges",
       "matchManagers": ["npm", "pnpm", "yarn", "bun"],
-      "matchCurrentValue": "^\\d+\\.\\d+\\.\\d+([+-][0-9A-Za-z.-]+)?$",
+      "matchCurrentValue": "^~.*$",
       "groupName": null,
-      "separateMinorPatch": true,
-      "separateMajorMinor": true
+      "groupSlug": null,
+      "separateMajorMinor": true,
+      "separateMinorPatch": true
     },
-    // 2) Non-pinned deps: Patch versions, grouped together
     {
-      "description": "Group patch versions together for non-pinned deps",
+      "description": "Un-group pinned deps (exact x.y.z)",
       "matchManagers": ["npm", "pnpm", "yarn", "bun"],
-      "matchCurrentValue": "/(^[~^]|[<>=| -])/", // anything that looks like a range
-      "groupName": "patch dependencies",
-      "matchUpdateTypes": ["patch"]
+      "matchCurrentValue": "/^\\d+\\.\\d+\\.\\d+([+-][0-9A-Za-z.-]+)?$/",
+      "groupName": null,
+      "groupSlug": null,
+      "separateMajorMinor": true,
+      "separateMinorPatch": true
+    },
+    {
+      "description": "Un-group experimental caret ranges (^0.x)",
+      "matchManagers": ["npm", "pnpm", "yarn", "bun"],
+      "matchCurrentValue": "^\\^0\\.\\d+(\\.\\d+)?([+-][0-9A-Za-z.-]+)?$",
+      "groupName": null,
+      "separateMajorMinor": true,
+      "separateMinorPatch": true
+    },
+    {
+      "description": "Group ^>=1 ranges for patch/minor",
+      "matchManagers": ["npm", "pnpm", "yarn", "bun"],
+      "matchCurrentValue": "/^\\^[1-9]+[0-9]*(\\.\\d+){0,2}([+-][0-9A-Za-z.-]+)?$/",
+      "matchUpdateTypes": ["minor", "patch"],
+      "groupName": "all non-major dependencies",
+      "groupSlug": "all-non-major-dependencies"
     }
   ],
   "postUpdateOptions": ["yarnDedupeHighest"],
@@ -41,7 +58,7 @@
   "rangeStrategy": "bump",
   "rebaseWhen": "conflicted",
   "schedule": "on sunday before 6:00am",
+  "separateMinorPatch": false,
   "separateMajorMinor": true,
-  "separateMultipleMajor": true,
   "timezone": "UTC"
 }

package/src/app/[variants]/(main)/chat/components/topic/features/Topic/TopicListContent/TopicItem/TopicContent.tsx

@@ -100,7 +100,7 @@ const TopicContent = memo<TopicContentProps>(({ id, title, fav, showMore }) => {
           {
             icon: <Icon icon={ExternalLink} />,
             key: 'openInNewWindow',
-            label: '单独打开页面',
+            label: t('actions.openInNewWindow'),
             onClick: () => {
               openTopicInNewWindow(activeId, id);
             },

package/src/app/[variants]/(main)/chat/session/features/SessionListContent/List/Item/Actions.tsx

@@ -97,7 +97,7 @@ const Actions = memo<ActionProps>(({ group, id, openCreateGroupModal, parentType
                 {
                   icon: <Icon icon={ExternalLink} />,
                   key: 'openInNewWindow',
-                  label: '单独打开页面',
+                  label: t('openInNewWindow'),
                   onClick: ({ domEvent }: { domEvent: Event }) => {
                     domEvent.stopPropagation();
                     openSessionInNewWindow(id);

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

@@ -1,9 +1,10 @@
 import { AssistantContentBlock } from '@lobechat/types';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { GroupMessageContext } from './GroupContext';
 import GroupItem from './GroupItem';
 
 const useStyles = createStyles(({ css }) => {
@@ -28,21 +29,25 @@ const GroupChildren = memo<GroupChildrenProps>(
   ({ blocks, contentId, disableEditing, messageIndex, id }) => {
     const { styles } = useStyles();
 
+    const contextValue = useMemo(() => ({ assistantGroupId: id }), [id]);
+
     return (
-      <Flexbox className={styles.container} gap={8}>
-        {blocks.map((item, index) => {
-          return (
-            <GroupItem
-              {...item}
-              contentId={contentId}
-              disableEditing={disableEditing}
-              index={index}
-              key={`${id}_${index}`}
-              messageIndex={messageIndex}
-            />
-          );
-        })}
-      </Flexbox>
+      <GroupMessageContext value={contextValue}>
+        <Flexbox className={styles.container} gap={8}>
+          {blocks.map((item, index) => {
+            return (
+              <GroupItem
+                {...item}
+                contentId={contentId}
+                disableEditing={disableEditing}
+                index={index}
+                key={`${id}_${index}`}
+                messageIndex={messageIndex}
+              />
+            );
+          })}
+        </Flexbox>
+      </GroupMessageContext>
     );
   },
   isEqual,

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

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+interface GroupMessageContextValue {
+  assistantGroupId: string;
+}
+
+export const GroupMessageContext = createContext<GroupMessageContextValue | null>(null);
+
+export const useGroupMessage = () => {
+  const context = useContext(GroupMessageContext);
+  if (!context) {
+    throw new Error('useGroupMessage must be used within GroupMessageContext');
+  }
+  return context;
+};

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

@@ -23,20 +23,18 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 interface BuiltinPluginTitleProps {
   apiName: string;
-  hasResult?: boolean;
   icon?: ReactNode;
   identifier: string;
   index: number;
+  isLoading?: boolean;
   messageId: string;
   title: string;
   toolCallId: string;
 }
 
-const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(({ apiName, title, hasResult }) => {
+const BuiltinPluginTitle = memo<BuiltinPluginTitleProps>(({ apiName, title, isLoading }) => {
   const { styles } = useStyles();
 
-  const isLoading = !hasResult;
-
   return (
     <Flexbox align={'center'} className={isLoading ? styles.shinyText : ''} gap={4} horizontal>
       <div>{title}</div>

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

@@ -31,20 +31,18 @@ export const useStyles = createStyles(({ css, token }) => ({
 
 interface ToolTitleProps {
   apiName: string;
-  hasResult?: boolean;
   identifier: string;
   index: number;
+  isLoading?: boolean;
   messageId: string;
   toolCallId: string;
 }
 
 const ToolTitle = memo<ToolTitleProps>(
-  ({ identifier, apiName, hasResult, index, toolCallId, messageId }) => {
+  ({ identifier, apiName, isLoading, index, toolCallId, messageId }) => {
     const { t } = useTranslation('plugin');
     const { styles } = useStyles();
 
-    const isLoading = !hasResult;
-
     const pluginMeta = useToolStore(toolSelectors.getMetaById(identifier), isEqual);
 
     const plugins = useMemo(
@@ -69,9 +67,9 @@ const ToolTitle = memo<ToolTitleProps>(
       return (
         <BuiltinPluginTitle
           {...builtinPluginTitle}
-          hasResult={hasResult}
           identifier={identifier}
           index={index}
+          isLoading={isLoading}
           messageId={messageId}
           toolCallId={toolCallId}
         />

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;