@ant-design/agentic-ui 2.29.43 → 2.29.45

package/dist/MarkdownEditor/editor/tools/JinjaTemplatePanel/index.js

@@ -61,6 +61,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 { CloseOutlined } from "@ant-design/icons";
 import { Info } from "@sofa-design/icons";
 import { ConfigProvider } from "antd";
 import classNames from "clsx";
@@ -71,32 +72,37 @@ import { Editor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
 import { useLocale } from "../../../../I18n";
 import { useEditorStore } from "../../store";
-import { getOffsetLeft } from "../../utils/dom";
 import { EditorUtils } from "../../utils/editorUtils";
 import { JINJA_PANEL_PREFIX_CLS, useJinjaTemplatePanelStyle } from "./style";
 import { getJinjaTemplateData, JINJA_DOC_LINK } from "./templates";
 var PANEL_MAX_HEIGHT = 320;
+var PANEL_MIN_WIDTH = 240;
 function getPosition(nodeEl) {
     var rect = nodeEl.getBoundingClientRect();
-    var left = getOffsetLeft(nodeEl, document.body) + 0;
-    var top = rect.bottom + window.scrollY;
+    var viewportWidth = document.documentElement.clientWidth;
     var viewportHeight = document.documentElement.clientHeight;
     var spaceBelow = viewportHeight - rect.bottom;
-    if (spaceBelow < PANEL_MAX_HEIGHT && rect.top > PANEL_MAX_HEIGHT) {
+    var spaceAbove = rect.top;
+    var left = rect.left;
+    left = Math.max(0, Math.min(left, viewportWidth - PANEL_MIN_WIDTH));
+    if (spaceBelow < PANEL_MAX_HEIGHT && spaceAbove > PANEL_MAX_HEIGHT) {
         return {
             left: left,
-            bottom: viewportHeight - rect.top
+            bottom: Math.min(viewportHeight - rect.top, viewportHeight - PANEL_MAX_HEIGHT),
+            position: 'fixed'
         };
     }
+    var top = Math.min(rect.bottom, viewportHeight - PANEL_MAX_HEIGHT);
     return {
         left: left,
-        top: top
+        top: top,
+        position: 'fixed'
     };
 }
 export var JinjaTemplatePanel = function JinjaTemplatePanel() {
     var _ref, _ref1, _ref2, _ref3;
     var _context_getPrefixCls;
-    var _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, markdownContainerRef = _useEditorStore.markdownContainerRef, openJinjaTemplate = _useEditorStore.openJinjaTemplate, setOpenJinjaTemplate = _useEditorStore.setOpenJinjaTemplate, jinjaAnchorPath = _useEditorStore.jinjaAnchorPath, setJinjaAnchorPath = _useEditorStore.setJinjaAnchorPath, editorProps = _useEditorStore.editorProps;
+    var _useEditorStore = useEditorStore(), markdownEditorRef = _useEditorStore.markdownEditorRef, openJinjaTemplate = _useEditorStore.openJinjaTemplate, setOpenJinjaTemplate = _useEditorStore.setOpenJinjaTemplate, jinjaAnchorPath = _useEditorStore.jinjaAnchorPath, setJinjaAnchorPath = _useEditorStore.setJinjaAnchorPath, editorProps = _useEditorStore.editorProps;
     var jinjaConfig = editorProps === null || editorProps === void 0 ? void 0 : editorProps.jinja;
     var templatePanelConfig = (jinjaConfig === null || jinjaConfig === void 0 ? void 0 : jinjaConfig.templatePanel) && _type_of(jinjaConfig.templatePanel) === 'object' ? jinjaConfig.templatePanel : undefined;
     var trigger = (_ref = templatePanelConfig === null || templatePanelConfig === void 0 ? void 0 : templatePanelConfig.trigger) !== null && _ref !== void 0 ? _ref : '{}';
@@ -113,7 +119,8 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
     var _useState1 = _sliced_to_array(useState(false), 2), loading = _useState1[0], setLoading = _useState1[1];
     var _useState2 = _sliced_to_array(useState(0), 2), activeIndex = _useState2[0], setActiveIndex = _useState2[1];
     var _useState3 = _sliced_to_array(useState({
-        left: 0
+        left: 0,
+        position: 'fixed'
     }), 2), position = _useState3[0], setPosition = _useState3[1];
     var domRef = useRef(null);
     var context = React.useContext(ConfigProvider.ConfigContext);
@@ -177,7 +184,8 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
             }
         } catch (unused) {
             setPosition({
-                left: 0
+                left: 0,
+                position: 'fixed'
             });
         }
     }, [
@@ -261,14 +269,16 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
         insertTemplate
     ]);
     useEffect(function() {
-        var container = markdownContainerRef === null || markdownContainerRef === void 0 ? void 0 : markdownContainerRef.current;
-        if (!container) return;
-        container.addEventListener('keydown', keydown);
+        if (!openJinjaTemplate) return;
+        var handleKeydown = function handleKeydown(e) {
+            return keydown(e);
+        };
+        document.addEventListener('keydown', handleKeydown);
         return function() {
-            return container.removeEventListener('keydown', keydown);
+            return document.removeEventListener('keydown', handleKeydown);
         };
     }, [
-        markdownContainerRef,
+        openJinjaTemplate,
         keydown
     ]);
     useEffect(function() {
@@ -283,7 +293,7 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
         "aria-label": "Jinja template list",
         className: classNames(prefixCls, hashId),
         style: {
-            position: 'absolute',
+            position: position.position,
             zIndex: 9999,
             left: position.left,
             top: position.top,
@@ -298,13 +308,25 @@ export var JinjaTemplatePanel = function JinjaTemplatePanel() {
         className: "".concat(prefixCls, "-header")
     }, /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-title")
-    }, locale['jinja.panel.title']), docLink ? /*#__PURE__*/ React.createElement("div", {
+    }, locale['jinja.panel.title']), /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(prefixCls, "-header-actions")
+    }, docLink ? /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-doc-link"),
         onClick: function onClick(e) {
             e.preventDefault();
             window.open(docLink, '_blank');
         }
-    }, /*#__PURE__*/ React.createElement(Info, null), locale['jinja.panel.docLink']) : null), /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(Info, null), locale['jinja.panel.docLink']) : null, /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: "".concat(prefixCls, "-close"),
+        onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            close();
+        },
+        "aria-label": locale['jinja.panel.close'],
+        title: locale['jinja.panel.close']
+    }, /*#__PURE__*/ React.createElement(CloseOutlined, null)))), /*#__PURE__*/ React.createElement("div", {
         className: "".concat(prefixCls, "-list-box")
     }, loading ? /*#__PURE__*/ React.createElement("div", {
         style: {

package/dist/MarkdownEditor/editor/tools/JinjaTemplatePanel/style.js

@@ -76,7 +76,29 @@ var genJinjaPanelStyle = function genJinjaPanelStyle(token) {
             padding: '6px 12px',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between'
+            justifyContent: 'space-between',
+            flexShrink: 0
+        },
+        '&-header-actions': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8
+        },
+        '&-close': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 4,
+            margin: -4,
+            border: 'none',
+            background: 'transparent',
+            cursor: 'pointer',
+            color: 'var(--color-gray-text-light, var(--ant-color-text-secondary))',
+            borderRadius: token.borderRadiusSM,
+            '&:hover': {
+                color: 'var(--color-gray-text-default, var(--ant-color-text))',
+                backgroundColor: token.colorFillTertiary
+            }
         },
         '&-title': {
             font: 'var(--font-text-body-emphasized-sm)',

package/dist/MarkdownEditor/el.d.ts

@@ -231,6 +231,13 @@ export type CustomLeaf<T = Record<string, any>> = {
     jinjaVariable?: boolean;
     jinjaTag?: boolean;
     jinjaComment?: boolean;
+    jinjaKeyword?: boolean;
+    jinjaString?: boolean;
+    jinjaNumber?: boolean;
+    jinjaFilter?: boolean;
+    jinjaVariableName?: boolean;
+    jinjaPlaceholder?: boolean;
+    jinjaDelimiter?: boolean;
     selection?: BaseRange;
     id?: string;
     data?: Record<string, any>;

package/dist/Plugins/chart/components/ChartContainer/ChartErrorBoundary.d.ts

@@ -415,6 +415,7 @@ declare class ChartErrorBoundary extends React.Component<ChartErrorBoundaryProps
             'refine.optimizePrompt': string;
             'jinja.panel.title': string;
             'jinja.panel.docLink': string;
+            'jinja.panel.close': string;
             'jinja.panel.noTemplates': string;
             'jinja.template.variableInterpolation.title': string;
             'jinja.template.variableInterpolation.description': string;
@@ -803,6 +804,7 @@ declare class ChartErrorBoundary extends React.Component<ChartErrorBoundaryProps
             'refine.optimizePrompt': string;
             'jinja.panel.title': string;
             'jinja.panel.docLink': string;
+            'jinja.panel.close': string;
             'jinja.panel.noTemplates': string;
             'jinja.template.variableInterpolation.title': string;
             'jinja.template.variableInterpolation.description': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.29.43",
+  "version": "2.29.45",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",