@ai-group/chat-sdk 3.7.1-alpha3 → 3.7.1-alpha5

package/dist/esm/components/XAdkSender/InlineTagInput.js

@@ -5,8 +5,8 @@ import { useStyles } from "./styles";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var TAG_ATTR = "data-xadk-inline-tag-id";
-// contenteditable 无法把光标放进 contenteditable=false 的标签里，需用零宽字符承接“标签后方”的光标。
+var MENTION_ATTR = "data-xadk-inline-mention-id";
+// contenteditable 无法把光标放进 contenteditable=false 的 Mention 里，需用零宽字符承接“Mention 后方”的光标。
 var CARET_TEXT = "\u200B";
 var createTextNode = function createTextNode(text) {
   return document.createTextNode(text);
@@ -29,38 +29,40 @@ var toRawOffset = function toRawOffset(text, plainOffset) {
 };
 var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var value = _ref.value,
-    tags = _ref.tags,
+    mentions = _ref.mentions,
+    defaultInputParts = _ref.defaultInputParts,
     placeholder = _ref.placeholder,
     disabled = _ref.disabled,
     onChange = _ref.onChange,
-    onTagsChange = _ref.onTagsChange,
+    onMentionsChange = _ref.onMentionsChange,
     onKeyDown = _ref.onKeyDown,
     _onKeyUp = _ref.onKeyUp,
-    renderTag = _ref.renderTag;
+    renderMention = _ref.renderMention;
   var styles = useStyles();
   var editorRef = useRef(null);
-  var latestTagsRef = useRef(tags);
+  var latestMentionsRef = useRef(mentions);
   var tagRootMapRef = useRef(new WeakMap());
   var composingRef = useRef(false);
   var lastInsertedCaretRef = useRef(null);
   var savedRangeRef = useRef(null);
+  var defaultInputPartsAppliedRef = useRef(false);
   var lastEmittedStateRef = useRef({
     value: value,
-    tagIds: tags.map(function (tag) {
-      return tag.id;
+    mentionIds: mentions.map(function (mention) {
+      return mention.id;
     }).join("|")
   });
   useEffect(function () {
-    latestTagsRef.current = tags;
-  }, [tags]);
-  var getOrderedTags = useCallback(function () {
+    latestMentionsRef.current = mentions;
+  }, [mentions]);
+  var getOrderedMentions = useCallback(function () {
     var editor = editorRef.current;
     if (!editor) return [];
-    var tagMap = new Map(latestTagsRef.current.map(function (tag) {
-      return [tag.id, tag];
+    var mentionMap = new Map(latestMentionsRef.current.map(function (mention) {
+      return [mention.id, mention];
     }));
-    return Array.from(editor.querySelectorAll("[".concat(TAG_ATTR, "]"))).map(function (node) {
-      return tagMap.get(node.dataset.xadkInlineTagId || "");
+    return Array.from(editor.querySelectorAll("[".concat(MENTION_ATTR, "]"))).map(function (node) {
+      return mentionMap.get(node.dataset.xadkInlineMentionId || "");
     }).filter(Boolean);
   }, []);
 
@@ -77,12 +79,12 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return normalizeText(text);
   }, []);
 
-  // 提交时需要保留文本与 tag 的真实顺序；仅靠 value + tags 无法区分 tag 在句首、句中还是句尾。
+  // 提交时需要保留文本与 Mention 的真实顺序；仅靠 value + mentions 无法区分 Mention 在句首、句中还是句尾。
   var getParts = useCallback(function () {
     var editor = editorRef.current;
     if (!editor) return [];
-    var tagMap = new Map(latestTagsRef.current.map(function (tag) {
-      return [tag.id, tag];
+    var mentionMap = new Map(latestMentionsRef.current.map(function (mention) {
+      return [mention.id, mention];
     }));
     var parts = [];
     editor.childNodes.forEach(function (node) {
@@ -94,12 +96,12 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
         return;
       }
-      if (node instanceof HTMLElement && node.hasAttribute(TAG_ATTR)) {
-        var tagId = node.dataset.xadkInlineTagId || "";
-        var _tag = tagMap.get(tagId);
-        if (_tag) parts.push({
-          type: "tag",
-          tag: _tag
+      if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR)) {
+        var mentionId = node.dataset.xadkInlineMentionId || "";
+        var _mention = mentionMap.get(mentionId);
+        if (_mention) parts.push({
+          type: "mention",
+          mention: _mention
         });
       }
     });
@@ -107,29 +109,29 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, []);
   var emitChange = useCallback(function () {
     var nextValue = getPlainText();
-    var nextTags = getOrderedTags();
+    var nextMentions = getOrderedMentions();
     lastEmittedStateRef.current = {
       value: nextValue,
-      tagIds: nextTags.map(function (tag) {
-        return tag.id;
+      mentionIds: nextMentions.map(function (mention) {
+        return mention.id;
       }).join("|")
     };
     onChange(nextValue);
-    onTagsChange(nextTags);
-  }, [getOrderedTags, getPlainText, onChange, onTagsChange]);
+    onMentionsChange(nextMentions);
+  }, [getOrderedMentions, getPlainText, onChange, onMentionsChange]);
   var removeTextRange = useCallback(function (node, start, end) {
     var text = node.textContent || "";
     node.textContent = "".concat(text.slice(0, start)).concat(text.slice(end));
     if (!node.textContent) node.remove();
   }, []);
-  var removeTagNode = useCallback(function (node) {
+  var removeMentionNode = useCallback(function (node) {
     var _tagRootMapRef$curren;
     var previous = node.previousSibling;
     var next = node.nextSibling;
     (_tagRootMapRef$curren = tagRootMapRef.current.get(node)) === null || _tagRootMapRef$curren === void 0 || _tagRootMapRef$curren.unmount();
     node.remove();
 
-    // 标签后会补一个不可见光标锚点；删除标签时同步清理，避免留下冗余节点。
+    // Mention 后会补一个不可见光标锚点；删除 Mention 时同步清理，避免留下冗余节点。
     if ((next === null || next === void 0 ? void 0 : next.nodeType) === Node.TEXT_NODE) {
       var _text$match;
       var text = next.textContent || "";
@@ -148,51 +150,68 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }
   }, [removeTextRange]);
-  var removeTagById = useCallback(function (id) {
+  var removeMentionById = useCallback(function (id) {
     var editor = editorRef.current;
-    var node = Array.from((editor === null || editor === void 0 ? void 0 : editor.querySelectorAll("[".concat(TAG_ATTR, "]"))) || []).find(function (item) {
-      return item.dataset.xadkInlineTagId === id;
+    var node = Array.from((editor === null || editor === void 0 ? void 0 : editor.querySelectorAll("[".concat(MENTION_ATTR, "]"))) || []).find(function (item) {
+      return item.dataset.xadkInlineMentionId === id;
     });
     if (node) {
-      removeTagNode(node);
+      removeMentionNode(node);
     }
     emitChange();
     editor === null || editor === void 0 || editor.focus();
-  }, [emitChange, removeTagNode]);
+  }, [emitChange, removeMentionNode]);
 
-  // 标签节点本身不可编辑；删除入口通过 onRemove 回到组件内部统一维护 DOM 与 tags。
-  var buildTagNode = useCallback(function (tag) {
+  // Mention 节点本身不可编辑；删除入口通过 onRemove 回到组件内部统一维护 DOM 与 mentions。
+  var buildMentionNode = useCallback(function (mention) {
     var span = document.createElement("span");
     span.setAttribute("contenteditable", "false");
-    span.setAttribute(TAG_ATTR, tag.id);
-    span.dataset.xadkInlineTagId = tag.id;
+    span.setAttribute(MENTION_ATTR, mention.id);
+    span.dataset.xadkInlineMentionId = mention.id;
     span.className = styles.inlineTag;
-    if (renderTag) {
+    if (renderMention) {
       var root = createRoot(span);
       tagRootMapRef.current.set(span, root);
       root.render( /*#__PURE__*/_jsx(_Fragment, {
-        children: renderTag(tag, {
+        children: renderMention(mention, {
           onRemove: function onRemove() {
-            return removeTagById(tag.id);
+            return removeMentionById(mention.id);
           }
         })
       }));
     } else {
       var label = document.createElement("span");
       label.className = "xadk-inline-tag-label";
-      label.textContent = tag.label;
+      label.textContent = mention.displayName || mention.label;
       var close = document.createElement("span");
       close.className = "xadk-inline-tag-close";
       close.innerHTML = "×";
       close.onclick = function (event) {
         event.preventDefault();
         event.stopPropagation();
-        removeTagById(tag.id);
+        removeMentionById(mention.id);
       };
       span.append(label, close);
     }
     return span;
-  }, [removeTagById, renderTag, styles.inlineTag]);
+  }, [removeMentionById, renderMention, styles.inlineTag]);
+  var renderPartsToEditor = useCallback(function (parts) {
+    var editor = editorRef.current;
+    if (!editor) return;
+    editor.querySelectorAll("[".concat(MENTION_ATTR, "]")).forEach(function (node) {
+      var _tagRootMapRef$curren2;
+      (_tagRootMapRef$curren2 = tagRootMapRef.current.get(node)) === null || _tagRootMapRef$curren2 === void 0 || _tagRootMapRef$curren2.unmount();
+    });
+    editor.innerHTML = "";
+    parts.forEach(function (part) {
+      if (part.type === "text") {
+        if (part.text) editor.appendChild(createTextNode(part.text));
+        return;
+      }
+      var mention = part.type === "mention" ? part.mention : part.tag;
+      editor.append(buildMentionNode(mention), createTextNode(CARET_TEXT));
+    });
+  }, [buildMentionNode]);
   var setCursorAtTextEnd = useCallback(function (node) {
     var _node$textContent;
     var range = document.createRange();
@@ -219,52 +238,52 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     editor.focus();
     setCursorAtTextEnd(node);
   }, [setCursorAtTextEnd]);
-  var isTagNode = function isTagNode(node) {
-    return node instanceof HTMLElement && node.hasAttribute(TAG_ATTR);
+  var isMentionNode = function isMentionNode(node) {
+    return node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR);
   };
   var isOnlyCaretText = function isOnlyCaretText(text) {
     return normalizeText(text) === "";
   };
 
-  // Backspace/Delete 需要跨过零宽锚点识别相邻标签，不能只看光标所在文本节点。
-  var getTagBeforeRange = function getTagBeforeRange(range) {
+  // Backspace/Delete 需要跨过零宽锚点识别相邻 Mention，不能只看光标所在文本节点。
+  var getMentionBeforeRange = function getMentionBeforeRange(range) {
     var container = range.startContainer;
     if (container.nodeType === Node.TEXT_NODE) {
       var text = container.textContent || "";
       var beforeCursor = text.slice(0, range.startOffset);
-      if (isOnlyCaretText(beforeCursor) && isTagNode(container.previousSibling)) {
+      if (isOnlyCaretText(beforeCursor) && isMentionNode(container.previousSibling)) {
         return container.previousSibling;
       }
     }
     if (container instanceof HTMLElement) {
       var previous = container.childNodes[range.startOffset - 1];
-      if (isTagNode(previous)) return previous;
-      if ((previous === null || previous === void 0 ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isTagNode(previous.previousSibling)) {
+      if (isMentionNode(previous)) return previous;
+      if ((previous === null || previous === void 0 ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isMentionNode(previous.previousSibling)) {
         return previous.previousSibling;
       }
     }
     return null;
   };
-  var getTagAfterRange = function getTagAfterRange(range) {
+  var getMentionAfterRange = function getMentionAfterRange(range) {
     var container = range.startContainer;
     if (container.nodeType === Node.TEXT_NODE) {
       var text = container.textContent || "";
       var afterCursor = text.slice(range.startOffset);
-      if (isOnlyCaretText(afterCursor) && isTagNode(container.nextSibling)) {
+      if (isOnlyCaretText(afterCursor) && isMentionNode(container.nextSibling)) {
         return container.nextSibling;
       }
     }
     if (container instanceof HTMLElement) {
       var next = container.childNodes[range.startOffset];
-      if (isTagNode(next)) return next;
-      if ((next === null || next === void 0 ? void 0 : next.nodeType) === Node.TEXT_NODE && isOnlyCaretText(next.textContent || "") && isTagNode(next.nextSibling)) {
+      if (isMentionNode(next)) return next;
+      if ((next === null || next === void 0 ? void 0 : next.nodeType) === Node.TEXT_NODE && isOnlyCaretText(next.textContent || "") && isMentionNode(next.nextSibling)) {
         return next.nextSibling;
       }
     }
     return null;
   };
 
-  // 读取光标在纯文本中的位置，供快捷键搜索词和 tag 插入位置复用。
+  // 读取光标在纯文本中的位置，供快捷键搜索词和 Mention 插入位置复用。
   var getOffsetInEditor = useCallback(function () {
     var editor = editorRef.current;
     var selection = window.getSelection();
@@ -281,7 +300,7 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
         found = true;
         return;
       }
-      if (node instanceof HTMLElement && node.hasAttribute(TAG_ATTR)) return;
+      if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR)) return;
       if (node.nodeType === Node.TEXT_NODE) {
         offset += getPlainLength(node.textContent || "");
         return;
@@ -301,8 +320,8 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return index;
   };
 
-  // 删除快捷键触发片段，例如把 “@文档” 替换成一个结构化 tag，并返回删除位置对应的真实 DOM Range。
-  // 注意：纯文本 offset 不包含 tag，标签前后可能都是 offset 0；插入 tag 必须依赖真实 Range，不能再反推 offset。
+  // 删除快捷键触发片段，例如把 “@文档” 替换成一个结构化 Mention，并返回删除位置对应的真实 DOM Range。
+  // 注意：纯文本 offset 不包含 Mention，Mention 前后可能都是 offset 0；插入 Mention 必须依赖真实 Range，不能再反推 offset。
   var replaceTextRange = useCallback(function (start, end) {
     var editor = editorRef.current;
     if (!editor) return null;
@@ -338,7 +357,7 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return insertRange;
   }, []);
 
-  // 浏览器拆分 Range 后可能留下空文本节点；清理后才能保证后续 tag 继续 append 在队尾。
+  // 浏览器拆分 Range 后可能留下空文本节点；清理后才能保证后续 Mention 继续 append 在队尾。
   var cleanupCaretTextNodes = useCallback(function () {
     var editor = editorRef.current;
     if (!editor) return;
@@ -354,44 +373,44 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     });
   }, []);
-  var insertTag = useCallback(function (tag, replace) {
+  var insertMention = useCallback(function (mention, replace) {
     var editor = editorRef.current;
     if (!editor) return;
     editor.focus();
-    latestTagsRef.current = [].concat(_toConsumableArray(latestTagsRef.current.filter(function (item) {
-      return item.id !== tag.id;
-    })), [tag]);
+    latestMentionsRef.current = [].concat(_toConsumableArray(latestMentionsRef.current.filter(function (item) {
+      return item.id !== mention.id;
+    })), [mention]);
     var insertRange = null;
     if (replace) {
       insertRange = replaceTextRange(replace.start, replace.end);
       cleanupCaretTextNodes();
     }
-    var tagNode = buildTagNode(tag);
+    var mentionNode = buildMentionNode(mention);
     var caretNode = createTextNode(CARET_TEXT);
     var selection = window.getSelection();
     var savedRange = savedRangeRef.current;
     var range = insertRange || (selection !== null && selection !== void 0 && selection.rangeCount && editor.contains(selection.getRangeAt(0).startContainer) ? selection.getRangeAt(0) : savedRange && editor.contains(savedRange.startContainer) ? savedRange : null);
     if (range && editor.contains(range.startContainer)) {
-      // 用 DocumentFragment 一次性插入，避免连续 insertNode 导致 tag/caret 顺序被浏览器 Range 状态打乱。
+      // 用 DocumentFragment 一次性插入，避免连续 insertNode 导致 mention/caret 顺序被浏览器 Range 状态打乱。
       var fragment = document.createDocumentFragment();
-      fragment.append(tagNode, caretNode);
+      fragment.append(mentionNode, caretNode);
       range.insertNode(fragment);
     } else {
-      editor.append(tagNode, caretNode);
+      editor.append(mentionNode, caretNode);
     }
     cleanupCaretTextNodes();
     lastInsertedCaretRef.current = caretNode;
     setCursorAtTextEnd(caretNode);
     emitChange();
 
-    // 关闭快捷列表和父组件同步 tags/value 会触发一次 React 更新；
-    // 下一帧再恢复到刚插入 tag 后的零宽锚点，避免光标被 focus 或重渲染带回旧位置。
+    // 关闭快捷列表和父组件同步 mentions/value 会触发一次 React 更新；
+    // 下一帧再恢复到刚插入 Mention 后的零宽锚点，避免光标被 focus 或重渲染带回旧位置。
     window.requestAnimationFrame(function () {
       if (lastInsertedCaretRef.current === caretNode) {
         restoreCursorAfterInsert(caretNode);
       }
     });
-  }, [buildTagNode, cleanupCaretTextNodes, emitChange, replaceTextRange, restoreCursorAfterInsert, setCursorAtTextEnd]);
+  }, [buildMentionNode, cleanupCaretTextNodes, emitChange, replaceTextRange, restoreCursorAfterInsert, setCursorAtTextEnd]);
   useEffect(function () {
     document.addEventListener("selectionchange", saveSelectionRange);
     return function () {
@@ -407,47 +426,56 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       getText: getPlainText,
       getParts: getParts,
       getCursorOffset: getOffsetInEditor,
-      insertTag: insertTag
+      insertMention: insertMention,
+      insertTag: insertMention
     };
-  }, [getOffsetInEditor, getParts, getPlainText, insertTag]);
+  }, [getOffsetInEditor, getParts, getPlainText, insertMention]);
   useIsomorphicLayoutEffect(function () {
     var editor = editorRef.current;
     if (!editor) return;
-    var incomingTagIds = tags.map(function (tag) {
-      return tag.id;
+
+    // 默认片段只在空输入首次挂载时灌入，避免外部重新渲染覆盖用户正在编辑的内容。
+    if (!defaultInputPartsAppliedRef.current && defaultInputParts !== null && defaultInputParts !== void 0 && defaultInputParts.length && !value && mentions.length === 0) {
+      defaultInputPartsAppliedRef.current = true;
+      renderPartsToEditor(defaultInputParts);
+      emitChange();
+      return;
+    }
+    var incomingMentionIds = mentions.map(function (mention) {
+      return mention.id;
     }).join("|");
     var lastEmittedState = lastEmittedStateRef.current;
-    var isInternalControlledEcho = value === lastEmittedState.value && incomingTagIds === lastEmittedState.tagIds;
+    var isInternalControlledEcho = value === lastEmittedState.value && incomingMentionIds === lastEmittedState.mentionIds;
     if (isInternalControlledEcho && editor.childNodes.length > 0) return;
-    editor.querySelectorAll("[".concat(TAG_ATTR, "]")).forEach(function (node) {
-      var _tagRootMapRef$curren2;
-      (_tagRootMapRef$curren2 = tagRootMapRef.current.get(node)) === null || _tagRootMapRef$curren2 === void 0 || _tagRootMapRef$curren2.unmount();
-    });
-    editor.innerHTML = "";
-    if (value) editor.appendChild(createTextNode(value));
-    tags.forEach(function (tag) {
-      editor.append(buildTagNode(tag), createTextNode(CARET_TEXT));
-    });
+    renderPartsToEditor([].concat(_toConsumableArray(value ? [{
+      type: "text",
+      text: value
+    }] : []), _toConsumableArray(mentions.map(function (mention) {
+      return {
+        type: "mention",
+        mention: mention
+      };
+    }))));
 
-    // 外部主动写入 value/tags 后，需要在首帧绘制前同步 DOM；若输入区已有焦点，则把光标放在内容末尾。
+    // 外部主动写入 value/mentions 后，需要在首帧绘制前同步 DOM；若输入区已有焦点，则把光标放在内容末尾。
     var lastTextNode = Array.from(editor.childNodes).reverse().find(function (node) {
       return node.nodeType === Node.TEXT_NODE;
     });
     if (document.activeElement === editor && lastTextNode) {
       setCursorAtTextEnd(lastTextNode);
     }
-  }, [buildTagNode, setCursorAtTextEnd, tags, value]);
+  }, [defaultInputParts, emitChange, renderPartsToEditor, setCursorAtTextEnd, mentions, value]);
   useIsomorphicLayoutEffect(function () {
     var editor = editorRef.current;
     if (!editor) return;
-    if (!value && tags.length === 0 && editor.childNodes.length > 0) {
-      editor.querySelectorAll("[".concat(TAG_ATTR, "]")).forEach(function (node) {
+    if (!value && mentions.length === 0 && editor.childNodes.length > 0) {
+      editor.querySelectorAll("[".concat(MENTION_ATTR, "]")).forEach(function (node) {
         var _tagRootMapRef$curren3;
         (_tagRootMapRef$curren3 = tagRootMapRef.current.get(node)) === null || _tagRootMapRef$curren3 === void 0 || _tagRootMapRef$curren3.unmount();
       });
       editor.innerHTML = "";
     }
-  }, [tags.length, value]);
+  }, [mentions.length, value]);
   var handleInput = function handleInput() {
     if (!composingRef.current) emitChange();
   };
@@ -457,10 +485,10 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       if (selection !== null && selection !== void 0 && selection.rangeCount) {
         var range = selection.getRangeAt(0);
         if (range.collapsed) {
-          var targetTag = event.key === "Backspace" ? getTagBeforeRange(range) : getTagAfterRange(range);
-          if (targetTag) {
+          var targetMention = event.key === "Backspace" ? getMentionBeforeRange(range) : getMentionAfterRange(range);
+          if (targetMention) {
             event.preventDefault();
-            removeTagById(targetTag.dataset.xadkInlineTagId || "");
+            removeMentionById(targetMention.dataset.xadkInlineMentionId || "");
             return;
           }
         }
@@ -469,8 +497,8 @@ var InlineTagInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
   };
 
-  // placeholder 只由受控 value/tags 派生，避免从 contenteditable DOM 读取导致外部插入 tag 后状态滞后一帧。
-  var showPlaceholder = !value && tags.length === 0;
+  // placeholder 只由受控 value/mentions 派生，避免从 contenteditable DOM 读取导致外部插入 Mention 后状态滞后一帧。
+  var showPlaceholder = !value && mentions.length === 0;
   return /*#__PURE__*/_jsxs("div", {
     className: styles.inlineInputWrapper,
     children: [showPlaceholder && placeholder && /*#__PURE__*/_jsx("div", {