@ant-design/agentic-ui 2.8.0 → 2.10.0

package/dist/MarkdownInputField/style.js

@@ -1,247 +1,310 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
     }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
-// src/MarkdownInputField/style.ts
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 import { Keyframes } from "@ant-design/cssinjs";
-import {
-  resetComponent,
-  useEditorStyleRegister
-} from "../Hooks/useStyle";
-var GLOW_BORDER_OFFSET = 2;
-var GLOW_BORDER_TOTAL_OFFSET = GLOW_BORDER_OFFSET * 2;
-var DIRECT_RETURN_KEYWORDS = /* @__PURE__ */ new Set([
-  "auto",
-  "inherit",
-  "initial",
-  "unset",
-  "revert",
-  "revert-layer",
-  // CSS 全局关键字
-  "min-content",
-  "max-content"
-  // CSS 内在尺寸关键字
+import { resetComponent, useEditorStyleRegister } from "../Hooks/useStyle";
+// MarkdownInputField 样式常量
+// Glow border effect constants - 辉光边框效果常量
+var GLOW_BORDER_OFFSET = 2; // px - 辉光边框偏移量
+var GLOW_BORDER_TOTAL_OFFSET = GLOW_BORDER_OFFSET * 2; // 2px - 总偏移量（上下左右）
+// CSS helpers for glow border effect - 辉光边框效果的 CSS 助手函数
+// const getGlowBorderOffset = () => `-${GLOW_BORDER_OFFSET}px`;
+// 不需要 calc() 包裹的所有关键字
+var DIRECT_RETURN_KEYWORDS = new Set([
+    'auto',
+    'inherit',
+    'initial',
+    'unset',
+    'revert',
+    'revert-layer',
+    'min-content',
+    'max-content'
 ]);
-var addGlowBorderOffset = (size) => {
-  if (typeof size === "number")
-    return `${size + GLOW_BORDER_TOTAL_OFFSET}px`;
-  const val = size.trim();
-  if (val === "")
-    return `${GLOW_BORDER_TOTAL_OFFSET}px`;
-  const valLower = val.toLowerCase();
-  if (DIRECT_RETURN_KEYWORDS.has(valLower) || /^fit-content\s*\(.*\)$/i.test(val)) {
-    return val;
-  }
-  if (/^-?\d+(\.\d+)?$/.test(val)) {
-    return `${parseFloat(val) + GLOW_BORDER_TOTAL_OFFSET}px`;
-  }
-  return `calc(${val} + ${GLOW_BORDER_TOTAL_OFFSET}px)`;
+// 为任意尺寸值添加辉光边框偏移 - Add glow border offset to any size value
+export var addGlowBorderOffset = function(size) {
+    // 数字类型直接处理
+    if (typeof size === 'number') return "".concat(size + GLOW_BORDER_TOTAL_OFFSET, "px");
+    var val = size.trim();
+    // 空字符串防御
+    if (val === '') return "".concat(GLOW_BORDER_TOTAL_OFFSET, "px");
+    var valLower = val.toLowerCase();
+    // 直接返回的关键字或 fit-content() 函数（忽略大小写）
+    if (DIRECT_RETURN_KEYWORDS.has(valLower) || /^fit-content\s*\(.*\)$/i.test(val)) {
+        return val;
+    }
+    // 纯数字字符串 -> 添加偏移并转为 px
+    if (/^-?\d+(\.\d+)?$/.test(val)) {
+        return "".concat(parseFloat(val) + GLOW_BORDER_TOTAL_OFFSET, "px");
+    }
+    // 其他值用 calc() 包裹
+    return "calc(".concat(val, " + ").concat(GLOW_BORDER_TOTAL_OFFSET, "px)");
 };
+// Input field padding constants - 输入字段内边距常量
 var INPUT_FIELD_PADDING = {
-  NONE: "0px",
-  SMALL: `${GLOW_BORDER_OFFSET}px`
+    NONE: '0px',
+    SMALL: "".concat(GLOW_BORDER_OFFSET, "px")
 };
-var stopIconRotate = new Keyframes("stopIconRotate", {
-  "0%": {
-    transform: "rotate(0deg)"
-  },
-  "100%": {
-    transform: "rotate(360deg)"
-  }
+// 定义旋转动画
+var stopIconRotate = new Keyframes('stopIconRotate', {
+    '0%': {
+        transform: 'rotate(0deg)'
+    },
+    '100%': {
+        transform: 'rotate(360deg)'
+    }
 });
-var genStyle = (token) => {
-  return {
-    [token.componentCls]: {
-      width: "100%",
-      height: "100%",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      padding: INPUT_FIELD_PADDING.NONE,
-      borderRadius: "16px",
-      minHeight: "48px",
-      maxWidth: 980,
-      backdropFilter: "blur(5.44px)",
-      boxShadow: "var(--shadow-control-lg)",
-      position: "relative",
-      "> * ": {
-        boxSizing: "border-box"
-      },
-      "&:active,&.active": {
-        outline: "1px solid transparent"
-      },
-      "&-enlarged": {
-        [`${token.componentCls}-editor`]: {
-          flex: 1,
-          height: "100%",
-          minHeight: "100%",
-          maxHeight: "none",
-          overflow: "hidden",
-          width: "100%"
+// 背景渐变旋转动画（用于 radial/linear 渐变整体旋转）
+// 使用 CSS 自定义属性驱动角度变化，避免元素本身的 transform 引起的位移
+// const rotateGradientAngle = new Keyframes('rotateGradientAngle', {
+//   '0%': {
+//     '--mif-angle': '42deg',
+//   },
+//   '100%': {
+//     '--mif-angle': 'calc(42deg + 1turn)',
+//   },
+// });
+// 背景淡出（只执行一次并保持最终状态）
+// const fadeOutOnce = new Keyframes('fadeOutOnce', {
+//   '0%': {
+//     opacity: 1,
+//   },
+//   '100%': {
+//     opacity: 0,
+//   },
+// });
+// 合并旋转与淡出为单一动画：一次性旋转一圈并淡出到 0
+// const rotateFadeOnce = new Keyframes('rotateFadeOnce', {
+//   '0%': {
+//     '--mif-angle': '42deg',
+//     opacity: 1,
+//   },
+//   '100%': {
+//     '--mif-angle': 'calc(42deg + 1turn)',
+//     opacity: 0,
+//   },
+// });
+var genStyle = function(token) {
+    var _obj, _obj1;
+    return _obj1 = {}, _define_property(_obj1, token.componentCls, {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: INPUT_FIELD_PADDING.NONE,
+        borderRadius: '16px',
+        minHeight: '48px',
+        maxWidth: 980,
+        backdropFilter: 'blur(5.44px)',
+        boxShadow: 'var(--shadow-control-lg)',
+        position: 'relative',
+        '> * ': {
+            boxSizing: 'border-box'
         },
-        [`${token.componentCls}-editor-content`]: {
-          flex: 1,
-          height: "100%",
-          minHeight: "100%",
-          maxHeight: "none",
-          overflow: "auto",
-          width: "100%"
-        }
-      },
-      "&-border-wrapper": {
-        width: "100%",
-        zIndex: 9,
-        height: "100%",
-        boxSizing: "border-box"
-      },
-      "&-content-wrapper": {
-        backgroundColor: "#fff",
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        height: "100%",
-        borderRadius: "inherit"
-      },
-      "&-editor": {
-        boxSizing: "border-box",
-        borderRadius: "inherit",
-        backgroundColor: "var(--color-gray-bg-card-white)",
-        width: "100%",
-        zIndex: 9,
-        maxHeight: 400,
-        height: "100%",
-        overflowY: "visible",
-        scrollbarColor: "var(--color-gray-text-tertiary) transparent",
-        scrollbarWidth: "thin",
-        "&&-disabled": {
-          backgroundColor: "rgba(0,0,0,0.04)",
-          cursor: "not-allowed"
+        '&:active,&.active': {
+            outline: '1px solid transparent'
+        },
+        '&-enlarged': (_obj = {}, _define_property(_obj, "".concat(token.componentCls, "-editor"), {
+            flex: 1,
+            height: '100%',
+            minHeight: '100%',
+            maxHeight: 'none',
+            overflow: 'hidden',
+            width: '100%'
+        }), _define_property(_obj, "".concat(token.componentCls, "-editor-content"), {
+            flex: 1,
+            height: '100%',
+            minHeight: '100%',
+            maxHeight: 'none',
+            overflow: 'auto',
+            width: '100%'
+        }), _obj),
+        '&-border-wrapper': {
+            width: '100%',
+            zIndex: 9,
+            height: '100%',
+            boxSizing: 'border-box'
+        },
+        '&-content-wrapper': {
+            backgroundColor: '#fff',
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            height: '100%',
+            borderRadius: 'inherit'
+        },
+        '&-editor': {
+            boxSizing: 'border-box',
+            borderRadius: 'inherit',
+            backgroundColor: 'var(--color-gray-bg-card-white)',
+            width: '100%',
+            zIndex: 9,
+            maxHeight: 400,
+            height: '100%',
+            overflowY: 'visible',
+            scrollbarColor: 'var(--color-gray-text-tertiary) transparent',
+            scrollbarWidth: 'thin',
+            '&&-disabled': {
+                backgroundColor: 'rgba(0,0,0,0.04)',
+                cursor: 'not-allowed'
+            },
+            'div[data-be="paragraph"]': {
+                margin: '0 !important',
+                padding: '0 !important'
+            }
+        },
+        '&-editor-content': {
+            overflowY: 'auto',
+            maxHeight: 'inherit',
+            borderRadius: 'inherit',
+            scrollbarColor: 'var(--color-gray-text-tertiary) transparent',
+            scrollbarWidth: 'thin'
+        },
+        '&&-disabled': {
+            backgroundColor: 'rgba(0,0,0,0.04)',
+            cursor: 'not-allowed',
+            padding: 0
+        },
+        '&-send-tools': {
+            boxSizing: 'border-box',
+            display: 'flex',
+            gap: '8px',
+            alignItems: 'center',
+            font: 'var(--font-text-body-base)',
+            color: 'var(--color-gray-text-default)'
         },
-        'div[data-be="paragraph"]': {
-          margin: "0 !important",
-          padding: "0 !important"
+        '&-send-actions': {
+            position: 'absolute',
+            userSelect: 'none',
+            right: 12,
+            boxSizing: 'border-box',
+            zIndex: 99,
+            bottom: 12,
+            display: 'flex',
+            gap: '8px',
+            alignItems: 'center',
+            font: 'var(--font-text-body-base)',
+            color: 'var(--color-gray-text-default)'
+        },
+        '&-quick-actions': {
+            position: 'absolute',
+            userSelect: 'none',
+            width: '32px',
+            top: 12,
+            right: 12,
+            boxSizing: 'border-box',
+            zIndex: 99,
+            display: 'flex',
+            gap: '8px',
+            alignItems: 'center',
+            justifyContent: 'center',
+            '&-vertical': {
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                height: 'auto',
+                minHeight: '60px'
+            }
+        },
+        '&-send-has-tools': {
+            boxSizing: 'border-box',
+            position: 'relative',
+            left: 'inherit',
+            right: 'inherit',
+            bottom: 'inherit',
+            top: 'inherit'
+        },
+        // 旋转动画样式
+        '.stop-icon-ring': {
+            transition: 'transform 0.1s ',
+            transformOrigin: '16px 16px',
+            animationName: stopIconRotate,
+            animationDuration: '1s',
+            animationTimingFunction: 'linear',
+            animationIterationCount: 'infinite'
         }
-      },
-      "&-editor-content": {
-        overflowY: "auto",
-        maxHeight: "inherit",
-        borderRadius: "inherit",
-        scrollbarColor: "var(--color-gray-text-tertiary) transparent",
-        scrollbarWidth: "thin"
-      },
-      "&&-disabled": {
-        backgroundColor: "rgba(0,0,0,0.04)",
-        cursor: "not-allowed",
-        padding: 0
-      },
-      "&-send-tools": {
-        boxSizing: "border-box",
-        display: "flex",
-        gap: "8px",
-        alignItems: "center",
-        font: "var(--font-text-body-base)",
-        color: "var(--color-gray-text-default)"
-      },
-      "&-send-actions": {
-        position: "absolute",
-        userSelect: "none",
-        right: 12,
-        boxSizing: "border-box",
-        zIndex: 99,
-        bottom: 12,
-        display: "flex",
-        gap: "8px",
-        alignItems: "center",
-        font: "var(--font-text-body-base)",
-        color: "var(--color-gray-text-default)"
-      },
-      "&-quick-actions": {
-        position: "absolute",
-        userSelect: "none",
-        width: "32px",
-        top: 12,
-        right: 12,
-        boxSizing: "border-box",
-        zIndex: 99,
-        display: "flex",
-        gap: "8px",
-        alignItems: "center",
-        justifyContent: "center",
-        "&-vertical": {
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          height: "auto",
-          minHeight: "60px"
-          // 确保有足够的高度显示多个按钮
+    }), _define_property(_obj1, "".concat(token.componentCls, "-before-tools"), {
+        display: 'flex',
+        gap: 8,
+        width: '100%',
+        maxWidth: '980px',
+        marginBottom: '12px',
+        font: 'var(--font-text-body-base)',
+        color: 'var(--color-gray-text-default)',
+        '> div': {
+            cursor: 'pointer'
         }
-      },
-      "&-send-has-tools": {
-        boxSizing: "border-box",
-        position: "relative",
-        left: "inherit",
-        right: "inherit",
-        bottom: "inherit",
-        top: "inherit"
-      },
-      // 旋转动画样式
-      ".stop-icon-ring": {
-        transition: "transform 0.1s ",
-        transformOrigin: "16px 16px",
-        animationName: stopIconRotate,
-        animationDuration: "1s",
-        animationTimingFunction: "linear",
-        animationIterationCount: "infinite"
-      }
-    },
-    [`${token.componentCls}-before-tools`]: {
-      display: "flex",
-      gap: 8,
-      width: "100%",
-      maxWidth: "980px",
-      marginBottom: "12px",
-      font: "var(--font-text-body-base)",
-      color: "var(--color-gray-text-default)",
-      "> div": {
-        cursor: "pointer"
-      }
-    },
-    [`${token.componentCls}-top-area`]: {
-      display: "flex",
-      width: "100%",
-      maxWidth: "980px",
-      marginBottom: "8px",
-      font: "var(--font-text-body-base)",
-      color: "var(--color-gray-text-default)"
-    }
-  };
+    }), _define_property(_obj1, "".concat(token.componentCls, "-top-area"), {
+        display: 'flex',
+        width: '100%',
+        maxWidth: '980px',
+        marginBottom: '8px',
+        font: 'var(--font-text-body-base)',
+        color: 'var(--color-gray-text-default)'
+    }), _obj1;
 };
-function useStyle(prefixCls) {
-  return useEditorStyleRegister("MarkdownInputField", (token) => {
-    const proChatToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`
+/**
+ * Probubble
+ * @param prefixCls
+ * @returns
+ */ export function useStyle(prefixCls) {
+    return useEditorStyleRegister('MarkdownInputField', function(token) {
+        var proChatToken = _object_spread_props(_object_spread({}, token), {
+            componentCls: ".".concat(prefixCls)
+        });
+        return [
+            resetComponent(proChatToken),
+            genStyle(proChatToken)
+        ];
     });
-    return [resetComponent(proChatToken), genStyle(proChatToken)];
-  });
 }
-export {
-  addGlowBorderOffset,
-  useStyle
-};