@ai-group/chat-sdk 3.7.1-alpha1 → 3.7.1-alpha11

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

@@ -45,8 +45,8 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var XAdkSender = (0, import_react.forwardRef)(
   ({
     clearBtnShow = true,
-    allowUpload = false,
-    draggable = true,
+    draggable = false,
+    onFileSelect,
     loading = false,
     disabled = false,
     value: controlledValue,
@@ -73,11 +73,20 @@ var XAdkSender = (0, import_react.forwardRef)(
     footerLeft,
     quickKeys = [],
     inlineTags = false,
+    renderMention,
     renderTag,
+    mentions: controlledMentions,
     tags: controlledTags,
+    defaultMentions,
     defaultTags = [],
+    defaultInputParts,
+    onMentionsChange,
     onTagsChange,
-    onQuickKeyTrigger
+    onQuickKeyTrigger,
+    submitFormat = "text",
+    formatMention,
+    formatTag,
+    transformSubmitData
   }, ref) => {
     const styles = (0, import_styles.useStyles)();
     const isControlled = controlledValue !== void 0;
@@ -89,19 +98,21 @@ var XAdkSender = (0, import_react.forwardRef)(
       }
       onChange == null ? void 0 : onChange(newValue);
     };
-    const isTagsControlled = controlledTags !== void 0;
-    const [internalTags, setInternalTags] = (0, import_react.useState)(defaultTags);
-    const tags = isTagsControlled ? controlledTags : internalTags;
-    const setTags = (newTags) => {
-      if (!isTagsControlled) {
-        setInternalTags(newTags);
+    const resolvedControlledMentions = controlledMentions ?? controlledTags;
+    const initialMentions = defaultMentions ?? defaultTags;
+    const isMentionsControlled = resolvedControlledMentions !== void 0;
+    const [internalMentions, setInternalMentions] = (0, import_react.useState)(initialMentions);
+    const mentions = isMentionsControlled ? resolvedControlledMentions : internalMentions;
+    const setMentions = (newMentions) => {
+      if (!isMentionsControlled) {
+        setInternalMentions(newMentions);
       }
-      onTagsChange == null ? void 0 : onTagsChange(newTags);
+      onMentionsChange == null ? void 0 : onMentionsChange(newMentions);
+      onTagsChange == null ? void 0 : onTagsChange(newMentions);
     };
     const [files, setFiles] = (0, import_react.useState)([]);
     const [isDragOver, setIsDragOver] = (0, import_react.useState)(false);
     const containerRef = (0, import_react.useRef)(null);
-    const fileInputRef = (0, import_react.useRef)(null);
     const textareaRef = (0, import_react.useRef)(null);
     const inlineInputRef = (0, import_react.useRef)(null);
     const [activeQuickKey, setActiveQuickKey] = (0, import_react.useState)(null);
@@ -115,6 +126,76 @@ var XAdkSender = (0, import_react.forwardRef)(
       const data = (response == null ? void 0 : response.data) ?? response;
       return (Array.isArray(data) ? data[0] : data) ?? {};
     };
+    const escapeXml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+    const escapeMarkdownLabel = (text) => text.replace(/\\/g, "\\\\").replace(/\]/g, "\\]");
+    const getMentionSubmitValue = (mention) => {
+      var _a, _b, _c;
+      return String(
+        mention.value ?? mention.uri ?? ((_a = mention.data) == null ? void 0 : _a.uri) ?? ((_b = mention.data) == null ? void 0 : _b.value) ?? ((_c = mention.data) == null ? void 0 : _c.name) ?? mention.targetId ?? mention.displayName ?? mention.label ?? ""
+      );
+    };
+    const defaultFormatMention = (mention, format, index) => {
+      const value2 = getMentionSubmitValue(mention);
+      if (format === "xml") {
+        return `<mention type="${escapeXml(mention.type)}" id="${escapeXml(mention.id)}" label="${escapeXml(mention.label)}" value="${escapeXml(value2)}" />`;
+      }
+      if (format === "markdown") {
+        const href = mention.uri || (value2.includes("://") ? value2 : `xadk-mention://${encodeURIComponent(mention.type)}/${encodeURIComponent(mention.id)}`);
+        return `[@${escapeMarkdownLabel(mention.displayName || mention.label)}](${href})`;
+      }
+      return `@${mention.displayName || value2 || `mention-${index + 1}`}`;
+    };
+    const serializeMention = (mention, format, index) => (formatMention == null ? void 0 : formatMention(mention, { format, index })) ?? (formatTag == null ? void 0 : formatTag(mention, { format, index })) ?? defaultFormatMention(mention, format, index);
+    const getSubmitParts = (0, import_react.useCallback)(() => {
+      var _a;
+      if (inlineTags) {
+        const parts = ((_a = inlineInputRef.current) == null ? void 0 : _a.getParts()) || [];
+        if (parts.length > 0)
+          return parts;
+      }
+      const textParts = value ? [{ type: "text", text: value }] : [];
+      const mentionParts = mentions.map((mention) => ({
+        type: "mention",
+        mention
+      }));
+      return [...mentionParts, ...textParts];
+    }, [inlineTags, mentions, value]);
+    const serializeParts = (parts, format) => {
+      if (format === "structured") {
+        return parts.reduce(
+          (content, part) => content + (part.type === "text" ? part.text : ""),
+          ""
+        );
+      }
+      let tagIndex = 0;
+      return parts.map((part) => {
+        if (part.type === "text")
+          return part.text;
+        const result = serializeMention(part.mention, format, tagIndex);
+        tagIndex += 1;
+        return result;
+      }).join("");
+    };
+    const createSubmitData = (formattedFiles) => {
+      const parts = getSubmitParts();
+      const rawText = parts.reduce(
+        (content, part) => content + (part.type === "text" ? part.text : ""),
+        ""
+      );
+      const standardData = {
+        text: serializeParts(parts, submitFormat),
+        rawText,
+        format: submitFormat,
+        parts,
+        files: formattedFiles,
+        mentions,
+        tags: mentions
+      };
+      return {
+        ...standardData,
+        payload: transformSubmitData == null ? void 0 : transformSubmitData(standardData)
+      };
+    };
     const checkFileType = (file) => {
       if ((allowedFileTypes == null ? void 0 : allowedFileTypes.length) > 0) {
         const ext = (0, import_file.getExt)(file);
@@ -215,15 +296,30 @@ var XAdkSender = (0, import_react.forwardRef)(
       () => ({
         addFiles: (rawFiles) => {
           handleFileSelect(rawFiles);
+        },
+        insertMention: (mention) => {
+          var _a;
+          if (inlineTags) {
+            (_a = inlineInputRef.current) == null ? void 0 : _a.insertMention(mention);
+            return;
+          }
+          setMentions([...mentions, mention]);
+        },
+        insertTag: (mention) => {
+          var _a;
+          if (inlineTags) {
+            (_a = inlineInputRef.current) == null ? void 0 : _a.insertMention(mention);
+            return;
+          }
+          setMentions([...mentions, mention]);
+        },
+        focus: () => {
+          var _a, _b;
+          inlineTags ? (_a = inlineInputRef.current) == null ? void 0 : _a.focus() : (_b = textareaRef.current) == null ? void 0 : _b.focus();
         }
       }),
-      [handleFileSelect]
+      [handleFileSelect, inlineTags, setMentions, mentions]
     );
-    const triggerFileSelect = () => {
-      if (fileInputRef.current) {
-        fileInputRef.current.click();
-      }
-    };
     const uploadFiles = async (fileList) => {
       for (const localFile of fileList) {
         setFiles(
@@ -302,38 +398,38 @@ var XAdkSender = (0, import_react.forwardRef)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
-        if (allowUpload) {
+        if (draggable) {
           setIsDragOver(true);
         }
       },
-      [allowUpload]
+      [draggable]
     );
     const handleDragLeave = (0, import_react.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
-        if (allowUpload) {
+        if (draggable) {
           setIsDragOver(false);
         }
       },
-      [allowUpload]
+      [draggable]
     );
     const handleDrop = (0, import_react.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
         setIsDragOver(false);
-        if (allowUpload && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-          handleFileSelect(Array.from(e.dataTransfer.files));
+        if (draggable && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+          onFileSelect == null ? void 0 : onFileSelect(Array.from(e.dataTransfer.files));
         }
       },
-      [allowUpload, handleFileSelect]
+      [draggable, onFileSelect]
     );
-    const handleRemoveTag = (0, import_react.useCallback)(
+    const handleRemoveMention = (0, import_react.useCallback)(
       (id) => {
-        setTags(tags.filter((t) => t.id !== id));
+        setMentions(mentions.filter((item) => item.id !== id));
       },
-      [tags, setTags]
+      [mentions, setMentions]
     );
     const activeQuickKeyConfig = (0, import_react.useMemo)(() => {
       if (!activeQuickKey)
@@ -401,21 +497,27 @@ var XAdkSender = (0, import_react.forwardRef)(
     const handleQuickKeySelect = (0, import_react.useCallback)(
       (option) => {
         var _a, _b, _c, _d;
-        const newTag = {
+        const mentionType = (activeQuickKeyConfig == null ? void 0 : activeQuickKeyConfig.mentionType) || (activeQuickKeyConfig == null ? void 0 : activeQuickKeyConfig.tagType) || activeQuickKey || "unknown";
+        const newMention = {
           id: generateId(),
           label: option.label,
-          type: activeQuickKey || "unknown",
+          type: mentionType,
+          value: option.value ?? option.uri ?? option.name ?? option.label,
+          uri: option.uri,
+          targetId: option.targetId ?? option.skillNo ?? option.pluginNo,
+          displayName: option.displayName ?? option.label,
+          trigger: activeQuickKey || void 0,
           icon: option.icon,
           data: option
         };
         (_a = activeQuickKeyConfig == null ? void 0 : activeQuickKeyConfig.onSelect) == null ? void 0 : _a.call(activeQuickKeyConfig, option);
         if (inlineTags) {
-          (_b = inlineInputRef.current) == null ? void 0 : _b.insertTag(newTag, {
+          (_b = inlineInputRef.current) == null ? void 0 : _b.insertMention(newMention, {
             start: quickKeyTriggerIdx,
             end: quickKeyTriggerIdx + 1 + quickKeyKeyword.length
           });
         } else {
-          setTags([...tags, newTag]);
+          setMentions([...mentions, newMention]);
           if (quickKeyTriggerIdx >= 0) {
             const newValue = value.slice(0, quickKeyTriggerIdx) + value.slice(quickKeyTriggerIdx + 1 + quickKeyKeyword.length);
             setValue(newValue);
@@ -431,8 +533,8 @@ var XAdkSender = (0, import_react.forwardRef)(
         activeQuickKey,
         activeQuickKeyConfig,
         inlineTags,
-        tags,
-        setTags,
+        mentions,
+        setMentions,
         value,
         quickKeyTriggerIdx,
         quickKeyKeyword,
@@ -485,7 +587,9 @@ var XAdkSender = (0, import_react.forwardRef)(
       handleQuickKeyByText(text, cursorPos);
     };
     const handleSubmit = () => {
-      if (!value.trim() && files.length === 0 && tags.length === 0) {
+      if (loading)
+        return;
+      if (!value.trim() && files.length === 0 && mentions.length === 0) {
         import_antd.message.warning("请输入消息或选择文件");
         return;
       }
@@ -502,14 +606,10 @@ var XAdkSender = (0, import_react.forwardRef)(
           onOk: () => {
             const formattedFiles = formatFilesForServer(successFiles);
             if (onSubmit) {
-              onSubmit({
-                text: value,
-                files: formattedFiles,
-                tags
-              });
+              onSubmit(createSubmitData(formattedFiles));
             }
             setValue("");
-            setTags([]);
+            setMentions([]);
             setFiles((prev) => prev.filter((f) => f.status !== "success"));
           },
           onCancel: () => {
@@ -519,14 +619,10 @@ var XAdkSender = (0, import_react.forwardRef)(
       } else {
         const formattedFiles = formatFilesForServer(successFiles);
         if (onSubmit) {
-          onSubmit({
-            text: value,
-            files: formattedFiles,
-            tags
-          });
+          onSubmit(createSubmitData(formattedFiles));
         }
         setValue("");
-        setTags([]);
+        setMentions([]);
         setFiles((prev) => prev.filter((f) => f.status !== "success"));
       }
     };
@@ -583,34 +679,25 @@ var XAdkSender = (0, import_react.forwardRef)(
     const renderFileList = () => {
       if (files.length === 0)
         return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contextFiles, children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_FileGallery.default,
         {
-          style: {
-            display: "flex",
-            flexWrap: "wrap",
-            gap: "8px",
-            padding: "12px 0"
-          },
-          children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_FileGallery.default,
-            {
-              file,
-              removable: true,
-              onRemove: handleRemoveFile
-            },
-            file.id
-          ))
-        }
-      );
+          file,
+          size: "small",
+          removable: true,
+          onRemove: handleRemoveFile
+        },
+        file.id
+      )) });
     };
     const containerClass = `${styles.container} ${isDragOver ? "drag-over" : ""}`;
     const uploading = files.some((f) => f.status === "uploading");
-    const isDisabled = disabled || uploading || loading;
+    const controlsDisabled = disabled || uploading || loading;
+    const inputDisabled = disabled || uploading;
     const hasContent = value.trim().length > 0;
     const hasFiles = files.some((f) => f.status === "success");
-    const hasTags = tags.length > 0;
-    const canSend = hasContent || hasFiles || hasTags;
+    const hasMentions = mentions.length > 0;
+    const canSend = hasContent || hasFiles || hasMentions;
     const SendButton = (props) => {
       if (sendButtonRender) {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: sendButtonRender({
@@ -633,17 +720,6 @@ var XAdkSender = (0, import_react.forwardRef)(
         }
       ) });
     };
-    const UploadButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: "上传文件", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        className: `${styles.iconButton} ${styles.uploadButton}`,
-        onClick: triggerFileSelect,
-        disabled: isDisabled,
-        "aria-label": "上传文件",
-        ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PaperClipOutlined, {})
-      }
-    ) });
     const ClearButton = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_antd.Popconfirm,
       {
@@ -652,12 +728,12 @@ var XAdkSender = (0, import_react.forwardRef)(
         placement: "top",
         okText: "确定",
         cancelText: "取消",
-        disabled: isDisabled,
+        disabled: controlsDisabled,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
             className: `${styles.iconButton} ${styles.clearButton}`,
-            disabled: isDisabled,
+            disabled: controlsDisabled,
             "aria-label": "清空聊天记录",
             ...props,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClearOutlined, {})
@@ -667,7 +743,6 @@ var XAdkSender = (0, import_react.forwardRef)(
     );
     const actionsComponents = {
       SendButton,
-      UploadButton,
       ClearButton
     };
     const renderSlot = (slot, oriNode) => {
@@ -681,6 +756,8 @@ var XAdkSender = (0, import_react.forwardRef)(
       }
       return slot;
     };
+    const headerNode = renderSlot(header, false);
+    const fileListNode = files.length > 0 ? renderFileList() : null;
     const defaultSuffix = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.buttonGroup, children: sendButtonRender ? sendButtonRender({
       loading,
       disabled: uploading || disabled,
@@ -698,10 +775,7 @@ var XAdkSender = (0, import_react.forwardRef)(
       }
     ) }) });
     const defaultActionBar = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionBar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionBarLeft, children: [
-        allowUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UploadButton, {}),
-        renderSlot(footerLeft, false)
-      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.actionBarLeft, children: renderSlot(footerLeft, false) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.actionBarRight, children: [
         clearBtnShow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClearButton, {}),
         renderSlot(suffix, defaultSuffix)
@@ -712,30 +786,16 @@ var XAdkSender = (0, import_react.forwardRef)(
       {
         ref: containerRef,
         className: containerClass,
-        onDragOver: allowUpload && draggable ? handleDragOver : void 0,
-        onDragLeave: allowUpload && draggable ? handleDragLeave : void 0,
-        onDrop: allowUpload && draggable ? handleDrop : void 0,
+        onDragOver: draggable ? handleDragOver : void 0,
+        onDragLeave: draggable ? handleDragLeave : void 0,
+        onDrop: draggable ? handleDrop : void 0,
         children: [
-          renderSlot(header, false),
-          allowUpload && files.length > 0 && renderFileList(),
-          allowUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              multiple: true,
-              accept: allowedFileTypes.join(","),
-              style: { display: "none" },
-              onChange: (e) => {
-                if (e.target.files) {
-                  handleFileSelect(Array.from(e.target.files));
-                  e.target.value = "";
-                }
-              }
-            }
-          ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.mainArea, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.senderWrap, children: [
-            !inlineTags && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_InputTags.default, { tags, onRemove: handleRemoveTag }),
+            (headerNode || fileListNode) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.contextBar, children: [
+              headerNode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contextHeader, children: headerNode }),
+              fileListNode
+            ] }),
+            !inlineTags && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_InputTags.default, { mentions, onRemove: handleRemoveMention }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.inputAndButtons, children: [
               renderSlot(prefix, false),
               inlineTags ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -743,14 +803,15 @@ var XAdkSender = (0, import_react.forwardRef)(
                 {
                   ref: inlineInputRef,
                   value,
-                  tags,
+                  mentions,
+                  defaultInputParts,
                   placeholder,
-                  disabled: isDisabled,
+                  disabled: inputDisabled,
                   onChange: handleInlineInputChange,
-                  onTagsChange: setTags,
+                  onMentionsChange: setMentions,
                   onKeyDown: handleKeyDown,
                   onKeyUp: handleInlineKeyUp,
-                  renderTag
+                  renderMention: renderMention ?? renderTag
                 }
               ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.textAreaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_antd.Input.TextArea,