@ai-group/chat-sdk 3.7.1-alpha2 → 3.7.1-alpha4

package/dist/cjs/components/XAdkSender/InlineTagInput.d.ts

@@ -1,25 +1,31 @@
 import React from "react";
-import type { InlineTagRenderInfo, InputTag, XAdkSenderSubmitPart } from "../../types";
+import type { InlineTagRenderInfo, MentionTag, XAdkSenderInputPart, XAdkSenderSubmitPart } from "../../types";
 export interface InlineTagInputRef {
     focus: () => void;
     getText: () => string;
     getParts: () => XAdkSenderSubmitPart[];
     getCursorOffset: () => number;
-    insertTag: (tag: InputTag, replace?: {
+    insertMention: (mention: MentionTag, replace?: {
+        start: number;
+        end: number;
+    }) => void;
+    /** @deprecated 请使用 insertMention。 */
+    insertTag: (mention: MentionTag, replace?: {
         start: number;
         end: number;
     }) => void;
 }
 export interface InlineTagInputProps {
     value: string;
-    tags: InputTag[];
+    mentions: MentionTag[];
+    defaultInputParts?: XAdkSenderInputPart[];
     placeholder?: string;
     disabled?: boolean;
     onChange: (value: string) => void;
-    onTagsChange: (tags: InputTag[]) => void;
+    onMentionsChange: (mentions: MentionTag[]) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
-    renderTag?: (tag: InputTag, info: InlineTagRenderInfo) => React.ReactNode;
+    renderMention?: (mention: MentionTag, info: InlineTagRenderInfo) => React.ReactNode;
 }
 declare const InlineTagInput: React.ForwardRefExoticComponent<InlineTagInputProps & React.RefAttributes<InlineTagInputRef>>;
 export default InlineTagInput;

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

@@ -26,9 +26,10 @@ var import_react = require("react");
 var import_client = require("react-dom/client");
 var import_styles = require("./styles");
 var import_jsx_runtime = require("react/jsx-runtime");
-var TAG_ATTR = "data-xadk-inline-tag-id";
+var MENTION_ATTR = "data-xadk-inline-mention-id";
 var CARET_TEXT = "​";
 var createTextNode = (text) => document.createTextNode(text);
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react.useEffect : import_react.useLayoutEffect;
 var normalizeText = (text) => text.replace(/\u200B/g, "").replace(/\u00a0/g, " ");
 var getPlainLength = (text) => normalizeText(text).length;
 var toRawOffset = (text, plainOffset) => {
@@ -44,30 +45,41 @@ var toRawOffset = (text, plainOffset) => {
 var InlineTagInput = (0, import_react.forwardRef)(
   ({
     value,
-    tags,
+    mentions,
+    defaultInputParts,
     placeholder,
     disabled,
     onChange,
-    onTagsChange,
+    onMentionsChange,
     onKeyDown,
     onKeyUp,
-    renderTag
+    renderMention
   }, ref) => {
     const styles = (0, import_styles.useStyles)();
     const editorRef = (0, import_react.useRef)(null);
-    const latestTagsRef = (0, import_react.useRef)(tags);
+    const latestMentionsRef = (0, import_react.useRef)(mentions);
     const tagRootMapRef = (0, import_react.useRef)(/* @__PURE__ */ new WeakMap());
     const composingRef = (0, import_react.useRef)(false);
     const lastInsertedCaretRef = (0, import_react.useRef)(null);
+    const savedRangeRef = (0, import_react.useRef)(null);
+    const defaultInputPartsAppliedRef = (0, import_react.useRef)(false);
+    const lastEmittedStateRef = (0, import_react.useRef)({
+      value,
+      mentionIds: mentions.map((mention) => mention.id).join("|")
+    });
     (0, import_react.useEffect)(() => {
-      latestTagsRef.current = tags;
-    }, [tags]);
-    const getOrderedTags = (0, import_react.useCallback)(() => {
+      latestMentionsRef.current = mentions;
+    }, [mentions]);
+    const getOrderedMentions = (0, import_react.useCallback)(() => {
       const editor = editorRef.current;
       if (!editor)
         return [];
-      const tagMap = new Map(latestTagsRef.current.map((tag) => [tag.id, tag]));
-      return Array.from(editor.querySelectorAll(`[${TAG_ATTR}]`)).map((node) => tagMap.get(node.dataset.xadkInlineTagId || "")).filter(Boolean);
+      const mentionMap = new Map(
+        latestMentionsRef.current.map((mention) => [mention.id, mention])
+      );
+      return Array.from(editor.querySelectorAll(`[${MENTION_ATTR}]`)).map(
+        (node) => mentionMap.get(node.dataset.xadkInlineMentionId || "")
+      ).filter(Boolean);
     }, []);
     const getPlainText = (0, import_react.useCallback)(() => {
       const editor = editorRef.current;
@@ -85,7 +97,9 @@ var InlineTagInput = (0, import_react.forwardRef)(
       const editor = editorRef.current;
       if (!editor)
         return [];
-      const tagMap = new Map(latestTagsRef.current.map((tag) => [tag.id, tag]));
+      const mentionMap = new Map(
+        latestMentionsRef.current.map((mention) => [mention.id, mention])
+      );
       const parts = [];
       editor.childNodes.forEach((node) => {
         if (node.nodeType === Node.TEXT_NODE) {
@@ -94,26 +108,32 @@ var InlineTagInput = (0, import_react.forwardRef)(
             parts.push({ type: "text", text });
           return;
         }
-        if (node instanceof HTMLElement && node.hasAttribute(TAG_ATTR)) {
-          const tagId = node.dataset.xadkInlineTagId || "";
-          const tag = tagMap.get(tagId);
-          if (tag)
-            parts.push({ type: "tag", tag });
+        if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR)) {
+          const mentionId = node.dataset.xadkInlineMentionId || "";
+          const mention = mentionMap.get(mentionId);
+          if (mention)
+            parts.push({ type: "mention", mention });
         }
       });
       return parts;
     }, []);
     const emitChange = (0, import_react.useCallback)(() => {
-      onChange(getPlainText());
-      onTagsChange(getOrderedTags());
-    }, [getOrderedTags, getPlainText, onChange, onTagsChange]);
+      const nextValue = getPlainText();
+      const nextMentions = getOrderedMentions();
+      lastEmittedStateRef.current = {
+        value: nextValue,
+        mentionIds: nextMentions.map((mention) => mention.id).join("|")
+      };
+      onChange(nextValue);
+      onMentionsChange(nextMentions);
+    }, [getOrderedMentions, getPlainText, onChange, onMentionsChange]);
     const removeTextRange = (0, import_react.useCallback)((node, start, end) => {
       const text = node.textContent || "";
       node.textContent = `${text.slice(0, start)}${text.slice(end)}`;
       if (!node.textContent)
         node.remove();
     }, []);
-    const removeTagNode = (0, import_react.useCallback)(
+    const removeMentionNode = (0, import_react.useCallback)(
       (node) => {
         var _a, _b, _c;
         const previous = node.previousSibling;
@@ -138,50 +158,76 @@ var InlineTagInput = (0, import_react.forwardRef)(
       },
       [removeTextRange]
     );
-    const removeTagById = (0, import_react.useCallback)(
+    const removeMentionById = (0, import_react.useCallback)(
       (id) => {
         const editor = editorRef.current;
-        const node = Array.from((editor == null ? void 0 : editor.querySelectorAll(`[${TAG_ATTR}]`)) || []).find(
-          (item) => item.dataset.xadkInlineTagId === id
+        const node = Array.from(
+          (editor == null ? void 0 : editor.querySelectorAll(`[${MENTION_ATTR}]`)) || []
+        ).find(
+          (item) => item.dataset.xadkInlineMentionId === id
         );
         if (node) {
-          removeTagNode(node);
+          removeMentionNode(node);
         }
         emitChange();
         editor == null ? void 0 : editor.focus();
       },
-      [emitChange, removeTagNode]
+      [emitChange, removeMentionNode]
     );
-    const buildTagNode = (0, import_react.useCallback)(
-      (tag) => {
+    const buildMentionNode = (0, import_react.useCallback)(
+      (mention) => {
         const 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) {
           const root = (0, import_client.createRoot)(span);
           tagRootMapRef.current.set(span, root);
           root.render(
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderTag(tag, { onRemove: () => removeTagById(tag.id) }) })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderMention(mention, {
+              onRemove: () => removeMentionById(mention.id)
+            }) })
           );
         } else {
           const label = document.createElement("span");
           label.className = "xadk-inline-tag-label";
-          label.textContent = tag.label;
+          label.textContent = mention.displayName || mention.label;
           const close = document.createElement("span");
           close.className = "xadk-inline-tag-close";
           close.innerHTML = "×";
           close.onclick = (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]
+    );
+    const renderPartsToEditor = (0, import_react.useCallback)(
+      (parts) => {
+        const editor = editorRef.current;
+        if (!editor)
+          return;
+        editor.querySelectorAll(`[${MENTION_ATTR}]`).forEach((node) => {
+          var _a;
+          (_a = tagRootMapRef.current.get(node)) == null ? void 0 : _a.unmount();
+        });
+        editor.innerHTML = "";
+        parts.forEach((part) => {
+          if (part.type === "text") {
+            if (part.text)
+              editor.appendChild(createTextNode(part.text));
+            return;
+          }
+          const mention = part.type === "mention" ? part.mention : part.tag;
+          editor.append(buildMentionNode(mention), createTextNode(CARET_TEXT));
+        });
+      },
+      [buildMentionNode]
     );
     const setCursorAtTextEnd = (0, import_react.useCallback)((node) => {
       var _a;
@@ -191,6 +237,18 @@ var InlineTagInput = (0, import_react.forwardRef)(
       range.collapse(true);
       selection == null ? void 0 : selection.removeAllRanges();
       selection == null ? void 0 : selection.addRange(range);
+      savedRangeRef.current = range.cloneRange();
+    }, []);
+    const saveSelectionRange = (0, import_react.useCallback)(() => {
+      const editor = editorRef.current;
+      const selection = window.getSelection();
+      if (!editor || !selection || selection.rangeCount === 0)
+        return;
+      const range = selection.getRangeAt(0);
+      if (!editor.contains(range.startContainer) || !editor.contains(range.endContainer)) {
+        return;
+      }
+      savedRangeRef.current = range.cloneRange();
     }, []);
     const restoreCursorAfterInsert = (0, import_react.useCallback)(
       (node) => {
@@ -202,41 +260,41 @@ var InlineTagInput = (0, import_react.forwardRef)(
       },
       [setCursorAtTextEnd]
     );
-    const isTagNode = (node) => node instanceof HTMLElement && node.hasAttribute(TAG_ATTR);
+    const isMentionNode = (node) => node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR);
     const isOnlyCaretText = (text) => normalizeText(text) === "";
-    const getTagBeforeRange = (range) => {
+    const getMentionBeforeRange = (range) => {
       const container = range.startContainer;
       if (container.nodeType === Node.TEXT_NODE) {
         const text = container.textContent || "";
         const 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) {
         const previous = container.childNodes[range.startOffset - 1];
-        if (isTagNode(previous))
+        if (isMentionNode(previous))
           return previous;
-        if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isTagNode(previous.previousSibling)) {
+        if ((previous == null ? void 0 : previous.nodeType) === Node.TEXT_NODE && isOnlyCaretText(previous.textContent || "") && isMentionNode(previous.previousSibling)) {
           return previous.previousSibling;
         }
       }
       return null;
     };
-    const getTagAfterRange = (range) => {
+    const getMentionAfterRange = (range) => {
       const container = range.startContainer;
       if (container.nodeType === Node.TEXT_NODE) {
         const text = container.textContent || "";
         const afterCursor = text.slice(range.startOffset);
-        if (isOnlyCaretText(afterCursor) && isTagNode(container.nextSibling)) {
+        if (isOnlyCaretText(afterCursor) && isMentionNode(container.nextSibling)) {
           return container.nextSibling;
         }
       }
       if (container instanceof HTMLElement) {
         const next = container.childNodes[range.startOffset];
-        if (isTagNode(next))
+        if (isMentionNode(next))
           return next;
-        if ((next == null ? void 0 : next.nodeType) === Node.TEXT_NODE && isOnlyCaretText(next.textContent || "") && isTagNode(next.nextSibling)) {
+        if ((next == null ? void 0 : next.nodeType) === Node.TEXT_NODE && isOnlyCaretText(next.textContent || "") && isMentionNode(next.nextSibling)) {
           return next.nextSibling;
         }
       }
@@ -262,7 +320,7 @@ var InlineTagInput = (0, import_react.forwardRef)(
           found = true;
           return;
         }
-        if (node instanceof HTMLElement && node.hasAttribute(TAG_ATTR))
+        if (node instanceof HTMLElement && node.hasAttribute(MENTION_ATTR))
           return;
         if (node.nodeType === Node.TEXT_NODE) {
           offset += getPlainLength(node.textContent || "");
@@ -337,31 +395,32 @@ var InlineTagInput = (0, import_react.forwardRef)(
         }
       });
     }, []);
-    const insertTag = (0, import_react.useCallback)(
-      (tag, replace) => {
+    const insertMention = (0, import_react.useCallback)(
+      (mention, replace) => {
         const editor = editorRef.current;
         if (!editor)
           return;
         editor.focus();
-        latestTagsRef.current = [
-          ...latestTagsRef.current.filter((item) => item.id !== tag.id),
-          tag
+        latestMentionsRef.current = [
+          ...latestMentionsRef.current.filter((item) => item.id !== mention.id),
+          mention
         ];
         let insertRange = null;
         if (replace) {
           insertRange = replaceTextRange(replace.start, replace.end);
           cleanupCaretTextNodes();
         }
-        const tagNode = buildTagNode(tag);
+        const mentionNode = buildMentionNode(mention);
         const caretNode = createTextNode(CARET_TEXT);
         const selection = window.getSelection();
-        const range = insertRange || ((selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null);
+        const savedRange = savedRangeRef.current;
+        const range = insertRange || ((selection == null ? 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)) {
           const 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;
@@ -374,7 +433,7 @@ var InlineTagInput = (0, import_react.forwardRef)(
         });
       },
       [
-        buildTagNode,
+        buildMentionNode,
         cleanupCaretTextNodes,
         emitChange,
         replaceTextRange,
@@ -382,6 +441,12 @@ var InlineTagInput = (0, import_react.forwardRef)(
         setCursorAtTextEnd
       ]
     );
+    (0, import_react.useEffect)(() => {
+      document.addEventListener("selectionchange", saveSelectionRange);
+      return () => {
+        document.removeEventListener("selectionchange", saveSelectionRange);
+      };
+    }, [saveSelectionRange]);
     (0, import_react.useImperativeHandle)(ref, () => ({
       focus: () => {
         var _a;
@@ -390,49 +455,52 @@ var InlineTagInput = (0, import_react.forwardRef)(
       getText: getPlainText,
       getParts,
       getCursorOffset: getOffsetInEditor,
-      insertTag
-    }), [getOffsetInEditor, getParts, getPlainText, insertTag]);
-    (0, import_react.useEffect)(() => {
-      const editor = editorRef.current;
-      if (!editor || editor.childNodes.length > 0)
-        return;
-      if (value)
-        editor.appendChild(createTextNode(value));
-      tags.forEach((tag) => editor.append(buildTagNode(tag), createTextNode(CARET_TEXT)));
-    }, []);
-    (0, import_react.useEffect)(() => {
+      insertMention,
+      insertTag: insertMention
+    }), [getOffsetInEditor, getParts, getPlainText, insertMention]);
+    useIsomorphicLayoutEffect(() => {
       const editor = editorRef.current;
       if (!editor)
         return;
-      const existingNodes = Array.from(editor.querySelectorAll(`[${TAG_ATTR}]`));
-      const nextTagMap = new Map(tags.map((tag) => [tag.id, tag]));
-      const existingIds = new Set(
-        existingNodes.map((node) => node.dataset.xadkInlineTagId || "")
-      );
-      existingNodes.forEach((node) => {
-        const tagId = node.dataset.xadkInlineTagId || "";
-        if (!nextTagMap.has(tagId)) {
-          removeTagNode(node);
-        }
-      });
-      tags.forEach((tag) => {
-        if (existingIds.has(tag.id))
-          return;
-        editor.append(buildTagNode(tag), createTextNode(CARET_TEXT));
-      });
-    }, [buildTagNode, removeTagNode, tags]);
-    (0, import_react.useEffect)(() => {
+      if (!defaultInputPartsAppliedRef.current && (defaultInputParts == null ? void 0 : defaultInputParts.length) && !value && mentions.length === 0) {
+        defaultInputPartsAppliedRef.current = true;
+        renderPartsToEditor(defaultInputParts);
+        emitChange();
+        return;
+      }
+      const incomingMentionIds = mentions.map((mention) => mention.id).join("|");
+      const lastEmittedState = lastEmittedStateRef.current;
+      const isInternalControlledEcho = value === lastEmittedState.value && incomingMentionIds === lastEmittedState.mentionIds;
+      if (isInternalControlledEcho && editor.childNodes.length > 0)
+        return;
+      renderPartsToEditor([
+        ...value ? [{ type: "text", text: value }] : [],
+        ...mentions.map((mention) => ({ type: "mention", mention }))
+      ]);
+      const lastTextNode = Array.from(editor.childNodes).reverse().find((node) => node.nodeType === Node.TEXT_NODE);
+      if (document.activeElement === editor && lastTextNode) {
+        setCursorAtTextEnd(lastTextNode);
+      }
+    }, [
+      defaultInputParts,
+      emitChange,
+      renderPartsToEditor,
+      setCursorAtTextEnd,
+      mentions,
+      value
+    ]);
+    useIsomorphicLayoutEffect(() => {
       const editor = editorRef.current;
       if (!editor)
         return;
-      if (!value && tags.length === 0 && editor.childNodes.length > 0) {
-        editor.querySelectorAll(`[${TAG_ATTR}]`).forEach((node) => {
+      if (!value && mentions.length === 0 && editor.childNodes.length > 0) {
+        editor.querySelectorAll(`[${MENTION_ATTR}]`).forEach((node) => {
           var _a;
           (_a = tagRootMapRef.current.get(node)) == null ? void 0 : _a.unmount();
         });
         editor.innerHTML = "";
       }
-    }, [tags.length, value]);
+    }, [mentions.length, value]);
     const handleInput = () => {
       if (!composingRef.current)
         emitChange();
@@ -443,10 +511,10 @@ var InlineTagInput = (0, import_react.forwardRef)(
         if (selection == null ? void 0 : selection.rangeCount) {
           const range = selection.getRangeAt(0);
           if (range.collapsed) {
-            const targetTag = event.key === "Backspace" ? getTagBeforeRange(range) : getTagAfterRange(range);
-            if (targetTag) {
+            const targetMention = event.key === "Backspace" ? getMentionBeforeRange(range) : getMentionAfterRange(range);
+            if (targetMention) {
               event.preventDefault();
-              removeTagById(targetTag.dataset.xadkInlineTagId || "");
+              removeMentionById(targetMention.dataset.xadkInlineMentionId || "");
               return;
             }
           }
@@ -454,30 +522,37 @@ var InlineTagInput = (0, import_react.forwardRef)(
       }
       onKeyDown == null ? void 0 : onKeyDown(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.inlineInputWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        ref: editorRef,
-        className: styles.inlineInput,
-        "data-placeholder": placeholder,
-        contentEditable: !disabled,
-        suppressContentEditableWarning: true,
-        role: "textbox",
-        "aria-multiline": "true",
-        onInput: handleInput,
-        onKeyDown: handleKeyDown,
-        onKeyUp,
-        onCompositionStart: () => {
-          composingRef.current = true;
-        },
-        onCompositionEnd: () => {
-          composingRef.current = false;
-          emitChange();
-        },
-        "data-empty": !getPlainText() && getOrderedTags().length === 0,
-        "data-cursor-offset": getOffsetInEditor()
-      }
-    ) });
+    const showPlaceholder = !value && mentions.length === 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.inlineInputWrapper, children: [
+      showPlaceholder && placeholder && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.inlinePlaceholder, children: placeholder }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: editorRef,
+          className: styles.inlineInput,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          onInput: handleInput,
+          onKeyDown: handleKeyDown,
+          onKeyUp: (event) => {
+            saveSelectionRange();
+            onKeyUp == null ? void 0 : onKeyUp(event);
+          },
+          onMouseUp: saveSelectionRange,
+          onFocus: saveSelectionRange,
+          onCompositionStart: () => {
+            composingRef.current = true;
+          },
+          onCompositionEnd: () => {
+            composingRef.current = false;
+            emitChange();
+          },
+          "data-cursor-offset": getOffsetInEditor()
+        }
+      )
+    ] });
   }
 );
 InlineTagInput.displayName = "InlineTagInput";