@ant-design/agentic-ui 2.27.8 → 2.27.10

package/dist/AgenticLayout/index.d.ts

@@ -22,50 +22,4 @@ export interface AgenticLayoutProps {
     /** 子元素（用于兼容性，实际内容应使用 center 属性） */
     children?: ReactNode;
 }
-/**
- * AgenticLayout 组件 - 智能体布局组件
- *
- * 该组件提供一个三栏布局的容器，支持左中右三个区域的灵活配置。
- * 左右侧栏支持折叠功能，中间区域自适应宽度。
- *
- * @component
- * @description 智能体布局组件，提供左中右三栏布局
- * @param {AgenticLayoutProps} props - 组件属性
- * @param {ReactNode} [props.left] - 左侧内容
- * @param {ReactNode} props.center - 中间内容
- * @param {ReactNode} [props.right] - 右侧内容
- * @param {LayoutHeaderConfig} [props.header] - 头部配置
- * @param {React.CSSProperties} [props.style] - 自定义样式
- * @param {string} [props.className] - 自定义CSS类名
- * @param {number} [props.leftWidth=256] - 左侧宽度
- * @param {number} [props.rightWidth=256] - 右侧宽度
- * @param {string | number} [props.minHeight='600px'] - 最小高度
- *
- * @example
- * ```tsx
- * <AgenticLayout
- *   left={<History />}
- *   center={<ChatLayout />}
- *   right={<Workspace />}
- *   header={{
- *     title: "智能体助手",
- *     showShare: true,
- *     showLeftCollapse: true,
- *     showRightCollapse: true,
- *     onLeftCollapse: (collapsed) => console.log('左侧折叠:', collapsed),
- *     onRightCollapse: (collapsed) => console.log('右侧折叠:', collapsed),
- *     onShare: () => console.log('分享')
- *   }}
- * />
- * ```
- *
- * @returns {React.ReactElement} 渲染的布局组件
- *
- * @remarks
- * - 支持左右侧栏的独立折叠控制
- * - 中间区域自适应剩余宽度
- * - 提供响应式布局适配
- * - 支持自定义宽度和高度
- * - 集成 Ant Design 主题系统
- */
 export declare const AgenticLayout: React.FC<AgenticLayoutProps>;

package/dist/AgenticLayout/index.js

@@ -1,3 +1,11 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -11,6 +19,33 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _object_spread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
@@ -50,8 +85,19 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 import { ConfigProvider } from "antd";
-import React, { useContext } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { LayoutHeader } from "../Components/LayoutHeader";
 import { useAgenticLayoutStyle } from "./style";
 /**
@@ -70,7 +116,7 @@ import { useAgenticLayoutStyle } from "./style";
  * @param {React.CSSProperties} [props.style] - 自定义样式
  * @param {string} [props.className] - 自定义CSS类名
  * @param {number} [props.leftWidth=256] - 左侧宽度
- * @param {number} [props.rightWidth=256] - 右侧宽度
+ * @param {number} [props.rightWidth=540] - 右侧宽度
  * @param {string | number} [props.minHeight='600px'] - 最小高度
  *
  * @example
@@ -99,7 +145,9 @@ import { useAgenticLayoutStyle } from "./style";
  * - 提供响应式布局适配
  * - 支持自定义宽度和高度
  * - 集成 Ant Design 主题系统
- */ export var AgenticLayout = function(param) {
+ */ var MIN_RIGHT_WIDTH = 400;
+var MAX_RIGHT_WIDTH_RATIO = 0.7;
+export var AgenticLayout = function(param) {
     var left = param.left, center = param.center, right = param.right, header = param.header, style = param.style, className = param.className, _param_leftWidth = param.leftWidth, leftWidth = _param_leftWidth === void 0 ? 256 : _param_leftWidth, _param_rightWidth = param.rightWidth, rightWidth = _param_rightWidth === void 0 ? 540 : _param_rightWidth;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('agentic-layout');
@@ -109,6 +157,89 @@ import { useAgenticLayoutStyle } from "./style";
     var leftCollapsed = (_ref = (_header_leftCollapsed = header === null || header === void 0 ? void 0 : header.leftCollapsed) !== null && _header_leftCollapsed !== void 0 ? _header_leftCollapsed : header === null || header === void 0 ? void 0 : header.leftDefaultCollapsed) !== null && _ref !== void 0 ? _ref : false;
     var _header_rightCollapsed, _ref1;
     var rightCollapsed = (_ref1 = (_header_rightCollapsed = header === null || header === void 0 ? void 0 : header.rightCollapsed) !== null && _header_rightCollapsed !== void 0 ? _header_rightCollapsed : header === null || header === void 0 ? void 0 : header.rightDefaultCollapsed) !== null && _ref1 !== void 0 ? _ref1 : false;
+    // 右侧边栏宽度状态
+    var _useState = _sliced_to_array(useState(rightWidth), 2), currentRightWidth = _useState[0], setCurrentRightWidth = _useState[1];
+    var isResizingRef = useRef(false);
+    var resizeStartX = useRef(0);
+    var resizeStartWidth = useRef(rightWidth);
+    // 计算最大宽度（浏览器窗口的70%）
+    var getMaxRightWidth = useCallback(function() {
+        if (typeof window === 'undefined') return Infinity;
+        return window.innerWidth * MAX_RIGHT_WIDTH_RATIO;
+    }, []);
+    // 当 rightWidth prop 变化时更新状态
+    useEffect(function() {
+        setCurrentRightWidth(rightWidth);
+    }, [
+        rightWidth
+    ]);
+    // 监听窗口大小变化，确保右侧边栏宽度不超过最大限制
+    useEffect(function() {
+        var handleWindowResize = function() {
+            var maxWidth = getMaxRightWidth();
+            if (currentRightWidth > maxWidth) {
+                setCurrentRightWidth(maxWidth);
+            }
+        };
+        window.addEventListener('resize', handleWindowResize);
+        return function() {
+            window.removeEventListener('resize', handleWindowResize);
+        };
+    }, [
+        currentRightWidth,
+        getMaxRightWidth
+    ]);
+    // 处理拖拽过程
+    var handleResizeMove = useCallback(function(e) {
+        if (!isResizingRef.current) return;
+        // 向左拖拽（扩大右侧边栏）时 deltaX 为正，向右拖拽（缩小）时 deltaX 为负
+        var deltaX = resizeStartX.current - e.clientX;
+        var newWidth = resizeStartWidth.current + deltaX;
+        var maxWidth = getMaxRightWidth();
+        // 限制宽度范围
+        var clampedWidth = Math.max(MIN_RIGHT_WIDTH, Math.min(newWidth, maxWidth));
+        setCurrentRightWidth(clampedWidth);
+    }, [
+        getMaxRightWidth
+    ]);
+    // 处理拖拽结束
+    var handleResizeEnd = useCallback(function handleMouseUp() {
+        isResizingRef.current = false;
+        document.removeEventListener('mousemove', handleResizeMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }, [
+        handleResizeMove
+    ]);
+    // 处理拖拽开始
+    var handleResizeStart = useCallback(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        isResizingRef.current = true;
+        resizeStartX.current = e.clientX;
+        resizeStartWidth.current = currentRightWidth;
+        document.addEventListener('mousemove', handleResizeMove);
+        document.addEventListener('mouseup', handleResizeEnd);
+        document.body.style.cursor = 'col-resize';
+        document.body.style.userSelect = 'none';
+    }, [
+        currentRightWidth,
+        handleResizeMove,
+        handleResizeEnd
+    ]);
+    // 清理事件监听器
+    useEffect(function() {
+        return function() {
+            document.removeEventListener('mousemove', handleResizeMove);
+            document.removeEventListener('mouseup', handleResizeEnd);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [
+        handleResizeMove,
+        handleResizeEnd
+    ]);
     var _header_leftCollapsible, _header_rightCollapsible;
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, " ").concat(className || '', " ").concat(hashId),
@@ -132,7 +263,7 @@ import { useAgenticLayoutStyle } from "./style";
         className: "".concat(prefixCls, "-main ").concat(hashId),
         style: {
             flex: 1,
-            minWidth: 0
+            minWidth: MIN_RIGHT_WIDTH
         }
     }, header && /*#__PURE__*/ React.createElement(LayoutHeader, _object_spread_props(_object_spread({}, header), {
         leftCollapsible: (_header_leftCollapsible = header.leftCollapsible) !== null && _header_leftCollapsible !== void 0 ? _header_leftCollapsible : !!left,
@@ -140,13 +271,23 @@ import { useAgenticLayoutStyle } from "./style";
     })), /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-main-content ").concat(hashId)
     }, center))), right && /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(prefixCls, "-sidebar-wrapper-right ").concat(hashId),
+        style: {
+            display: 'flex',
+            alignItems: 'stretch',
+            height: '100%'
+        }
+    }, !rightCollapsed && /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(prefixCls, "-resize-handle ").concat(prefixCls, "-resize-handle-right ").concat(hashId),
+        onMouseDown: handleResizeStart
+    }), /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-sidebar ").concat(prefixCls, "-sidebar-right ").concat(rightCollapsed ? "".concat(prefixCls, "-sidebar-right-collapsed") : '', " ").concat(hashId),
         style: {
-            width: rightCollapsed ? 0 : rightWidth,
-            minWidth: rightCollapsed ? 0 : rightWidth,
-            maxWidth: rightCollapsed ? 0 : rightWidth
+            width: rightCollapsed ? 0 : currentRightWidth,
+            minWidth: rightCollapsed ? 0 : currentRightWidth,
+            maxWidth: rightCollapsed ? 0 : currentRightWidth
         }
     }, /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-sidebar-content ").concat(hashId)
-    }, right))));
+    }, right)))));
 };

package/dist/AgenticLayout/style.js

@@ -88,11 +88,15 @@ var genStyle = function(token) {
         minWidth: '0 !important',
         maxWidth: '0 !important',
         border: 'none !important'
+    }), // 右侧边栏包装器
+    _define_property(_obj, "&-sidebar-wrapper-right", {
+        display: 'flex',
+        alignItems: 'stretch',
+        height: '100%'
     }), // 右侧边栏特殊样式
     _define_property(_obj, "&-sidebar-right", {
         borderRight: 'none',
-        height: '100%',
-        marginLeft: 8
+        height: '100%'
     }), // 折叠状态样式
     _define_property(_obj, "&-sidebar-right-collapsed", _define_property({
         width: '0 !important',
@@ -103,7 +107,31 @@ var genStyle = function(token) {
         overflow: 'hidden'
     }, "".concat(token.componentCls, "-sidebar-content"), {
         display: 'none'
-    })), // 侧边栏内容
+    })), // 拖拽手柄样式
+    _define_property(_obj, "&-resize-handle", {
+        width: '6px',
+        cursor: 'col-resize',
+        backgroundColor: 'transparent',
+        position: 'relative',
+        zIndex: 10,
+        flexShrink: 0,
+        marginLeft: '1px',
+        marginRight: '1px',
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            left: '50%',
+            top: 0,
+            bottom: 0,
+            width: '6px',
+            backgroundColor: 'transparent',
+            transform: 'translateX(-50%)',
+            transition: 'background-color 0.2s ease'
+        },
+        '&:hover::before': {
+            backgroundColor: 'var(--color-primary-9, #1d7afc)'
+        }
+    }), // 侧边栏内容
     _define_property(_obj, "&-sidebar-content", {
         flex: 1,
         display: 'flex',

package/dist/Bubble/AIBubble.js

@@ -209,7 +209,6 @@ function _ts_generator(thisArg, body) {
     }
 }
 import { memo, useContext } from "react";
-import { Loader } from "@sofa-design/icons";
 import { ConfigProvider, Flex } from "antd";
 import cx from "classnames";
 import React from "react";
@@ -232,10 +231,6 @@ export var runRender = function(render, props, defaultDom) {
         defaultDom
     ].concat(_to_consumable_array(rest))) : defaultDom;
 };
-var isTyping = function(originData) {
-    var _originData_extra;
-    return (originData === null || originData === void 0 ? void 0 : originData.isAborted) !== true && (originData === null || originData === void 0 ? void 0 : originData.isFinished) === false && (originData === null || originData === void 0 ? void 0 : (_originData_extra = originData.extra) === null || _originData_extra === void 0 ? void 0 : _originData_extra.isHistory) === undefined && (originData === null || originData === void 0 ? void 0 : originData.isFinished) !== undefined;
-};
 var isSameRoleAsPrevious = function(preMessage, originData) {
     if (!(preMessage === null || preMessage === void 0 ? void 0 : preMessage.role) || !(originData === null || originData === void 0 ? void 0 : originData.role)) return false;
     return preMessage.role === originData.role;
@@ -278,7 +273,6 @@ var shouldRenderBeforeContent = function(placement, role, thoughtChainConfig, ta
     var _ref = context || {}, compact = _ref.compact, standalone = _ref.standalone, locale = _ref.locale;
     var prefixClass = getPrefixCls('agentic');
     var _useStyle = useStyle(prefixClass), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
-    var typing = isTyping(originData);
     var preMessageSameRole = isSameRoleAsPrevious(preMessage, originData);
     var time = (originData === null || originData === void 0 ? void 0 : originData.createAt) || props.time;
     var avatar = (originData === null || originData === void 0 ? void 0 : originData.meta) || props.avatar;
@@ -411,11 +405,7 @@ var shouldRenderBeforeContent = function(placement, role, thoughtChainConfig, ta
         title: titleDom,
         header: /*#__PURE__*/ React.createElement("div", {
             className: cx("".concat(prefixClass, "-bubble-avatar-title"), "".concat(prefixClass, "-bubble-avatar-title-").concat(placement), "".concat(prefixClass, "-bubble-avatar-title-ai"), classNames === null || classNames === void 0 ? void 0 : classNames.bubbleAvatarTitleClassName, hashId)
-        }, avatarDom, typing && /*#__PURE__*/ React.createElement(Loader, {
-            style: {
-                fontSize: 16
-            }
-        }), titleDom),
+        }, avatarDom, titleDom),
         extra: (props === null || props === void 0 ? void 0 : (_props_bubbleRenderConfig1 = props.bubbleRenderConfig) === null || _props_bubbleRenderConfig1 === void 0 ? void 0 : _props_bubbleRenderConfig1.extraRender) === false ? null : /*#__PURE__*/ React.createElement(BubbleExtra, {
             pure: true,
             style: (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.bubbleListItemExtraStyle,

package/dist/Bubble/schema-editor/useRefState.js

@@ -44,7 +44,7 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import { useState, useRef, useCallback } from "react";
+import { useCallback, useRef, useState } from "react";
 /**
  * useRefState - 同时维护 state 和 ref 的 hook
  * @description 解决 setState 后立即读取 ref 得到旧值的问题

package/dist/ChatLayout/index.js

@@ -68,18 +68,20 @@ import { useStyle } from "./style";
  *
  * @returns {React.ReactElement} 渲染的聊天布局组件
  */ var ChatLayout = /*#__PURE__*/ forwardRef(function(param, ref) {
-    var header = param.header, children = param.children, footer = param.footer, className = param.className, style = param.style;
+    var header = param.header, children = param.children, footer = param.footer, _param_footerHeight = param.footerHeight, footerHeight = _param_footerHeight === void 0 ? 90 : _param_footerHeight, _param_scrollBehavior = param.scrollBehavior, scrollBehavior = _param_scrollBehavior === void 0 ? 'smooth' : _param_scrollBehavior, className = param.className, style = param.style;
     var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
     var prefixCls = getPrefixCls('chat-layout');
     var _useStyle = useStyle(prefixCls), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
-    var containerRef = useAutoScroll({
+    var _useAutoScroll = useAutoScroll({
         SCROLL_TOLERANCE: 30,
         onResize: function() {},
-        timeout: 200
-    }).containerRef;
+        timeout: 200,
+        scrollBehavior: scrollBehavior
+    }), containerRef = _useAutoScroll.containerRef, scrollToBottom = _useAutoScroll.scrollToBottom;
     useImperativeHandle(ref, function() {
         return {
-            scrollContainer: containerRef.current
+            scrollContainer: containerRef.current,
+            scrollToBottom: scrollToBottom
         };
     });
     return wrapSSR(/*#__PURE__*/ React.createElement("div", {
@@ -90,8 +92,16 @@ import { useStyle } from "./style";
     }, /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-content-scrollable ").concat(hashId),
         ref: containerRef
-    }, children)), footer && /*#__PURE__*/ React.createElement("div", {
-        className: "".concat(prefixCls, "-footer ").concat(hashId)
+    }, children, /*#__PURE__*/ React.createElement("div", {
+        style: {
+            height: footer ? footerHeight : 0,
+            width: '100%'
+        }
+    }))), footer && /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(prefixCls, "-footer ").concat(hashId),
+        style: {
+            height: footerHeight
+        }
     }, footer)));
 });
 // 保持向后兼容，导出 ChatFlowHeader 作为 LayoutHeader 的别名

package/dist/ChatLayout/style.js

@@ -170,7 +170,6 @@ var genStyle = function(token) {
                 paddingTop: 'var(--padding-2x)',
                 paddingLeft: 'var(--padding-2x)',
                 paddingRight: 'var(--padding-2x)',
-                paddingBottom: '144px',
                 '&::-webkit-scrollbar': {
                     width: '6px'
                 },
@@ -191,7 +190,10 @@ var genStyle = function(token) {
             }
         },
         '&-footer': {
-            padding: 'var(--padding-4x)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
             background: 'linear-gradient(to bottom, #fff0 20%, var(--color-gray-bg-card-white) 70%)',
             width: '100%',
             position: 'absolute',
@@ -208,8 +210,7 @@ var genStyle = function(token) {
             '&-scrollable': {
                 paddingTop: MOBILE_PADDING,
                 paddingLeft: MOBILE_PADDING,
-                paddingRight: MOBILE_PADDING,
-                paddingBottom: '144px'
+                paddingRight: MOBILE_PADDING
             }
         },
         '&-footer': {

package/dist/ChatLayout/types.d.ts

@@ -11,7 +11,12 @@ export interface ChatLayoutProps extends BaseStyleProps {
     children?: ReactNode;
     /** 底部区域的自定义内容 */
     footer?: ReactNode;
+    /** 底部区域的高度 */
+    footerHeight?: number;
+    /** 滚动行为 */
+    scrollBehavior?: 'smooth' | 'auto';
 }
 export interface ChatLayoutRef {
     scrollContainer: HTMLDivElement | null;
+    scrollToBottom: () => void;
 }