one-design-next 0.0.11 → 0.0.13

package/dist/composer/hooks/useChipManager.js

@@ -23,21 +23,37 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  */
 
 import { useCallback, useRef, useState } from 'react';
+import { forEachMarkerSegment } from "../utils";
 
 /** chip 在 React 状态中的形态：data + 对应的 DOM host。 */
 
+function createChipHost(data) {
+  var host = document.createElement('span');
+  host.dataset.mentionId = data.id;
+  host.contentEditable = 'false';
+  host.setAttribute('data-odn-composer-chip-host', '');
+  return host;
+}
 export function useChipManager( /** 每次 chip mutation 后调用，给上层（editor）一个抛 onChange 的钩子。 */
 onAfterMutate) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     chips = _useState2[0],
     setChips = _useState2[1];
-
-  /** ref 镜像：命令式 API 调用 setState 之后立即再用列表时拿不到最新值，用 ref 兜底。 */
   var chipsRef = useRef(chips);
   chipsRef.current = chips;
+  var insertChipAtRange = useCallback(function (data, range, _editor) {
+    var host = createChipHost(data);
+    range.insertNode(host);
+    var next = [].concat(_toConsumableArray(chipsRef.current), [{
+      data: data,
+      host: host
+    }]);
+    chipsRef.current = next;
+    setChips(next);
+    return host;
+  }, []);
   var insertChip = useCallback(function (data, editor) {
-    // ── 定位插入点 ────────────────────────────────
     var sel = window.getSelection();
     var range = null;
     if (sel && sel.rangeCount > 0 && editor.contains(sel.anchorNode)) {
@@ -47,41 +63,70 @@ onAfterMutate) {
       editor.focus();
       range = document.createRange();
       range.selectNodeContents(editor);
-      range.collapse(false); // 末尾
+      range.collapse(false);
       sel = window.getSelection();
       (_sel = sel) === null || _sel === void 0 || _sel.removeAllRanges();
       (_sel2 = sel) === null || _sel2 === void 0 || _sel2.addRange(range);
     }
     if (!range || !sel) return;
     range.deleteContents();
-
-    // ── 创建 host span（contenteditable=false，承载 data-mention-id） ──
-    // 不在 chip 后塞 ZWSP 锚点：浏览器原生把 contentEditable=false 当原子块，
-    // Backspace / 方向键已经能正确跨越；多塞一个 ZWSP 反而会撑出多个等价
-    // caret 位置，导致「字母和 chip 之间卡一下」的体验问题。
-    var host = document.createElement('span');
-    host.dataset.mentionId = data.id;
-    host.contentEditable = 'false';
-    host.setAttribute('data-odn-composer-chip-host', '');
-    range.insertNode(host);
-
-    // 光标 → chip 之后；用户继续输入时浏览器会自动建/接续邻接 text node
+    var host = insertChipAtRange(data, range, editor);
     var newRange = document.createRange();
     newRange.setStartAfter(host);
     newRange.collapse(true);
     sel.removeAllRanges();
     sel.addRange(newRange);
-    var next = [].concat(_toConsumableArray(chipsRef.current), [{
-      data: data,
-      host: host
-    }]);
-    setChips(next);
-
-    // 防御 Portal 渲染过程中浏览器把光标弹回 chip 之前的边界
     requestAnimationFrame(function () {
       return editor.focus();
     });
     onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
+  }, [insertChipAtRange, onAfterMutate]);
+  var insertSerializedAtRange = useCallback(function (value, chipList, range, editor) {
+    var chipById = new Map(chipList.map(function (c) {
+      return [c.id, c];
+    }));
+    var frag = document.createDocumentFragment();
+    var inserted = [];
+    forEachMarkerSegment(value, function (seg) {
+      if (seg.type === 'text') {
+        if (seg.text) frag.appendChild(document.createTextNode(seg.text));
+        return;
+      }
+      var data = chipById.get(seg.id);
+      if (!data) return;
+      var host = createChipHost(data);
+      frag.appendChild(host);
+      inserted.push({
+        data: data,
+        host: host
+      });
+    });
+    range.insertNode(frag);
+    range.collapse(false);
+    if (inserted.length > 0) {
+      var next = [].concat(_toConsumableArray(chipsRef.current), inserted);
+      chipsRef.current = next;
+      setChips(next);
+    }
+    var sel = window.getSelection();
+    if (sel) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+    requestAnimationFrame(function () {
+      return editor.focus();
+    });
+    onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
+  }, [onAfterMutate]);
+  var syncChipsAfterDomMutation = useCallback(function (editor) {
+    var next = chipsRef.current.filter(function (c) {
+      return c.host.isConnected && editor.contains(c.host);
+    });
+    if (next.length !== chipsRef.current.length) {
+      chipsRef.current = next;
+      setChips(next);
+      onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
+    }
   }, [onAfterMutate]);
   var removeChip = useCallback(function (id) {
     var target = chipsRef.current.find(function (c) {
@@ -89,19 +134,23 @@ onAfterMutate) {
     });
     if (!target) return;
     target.host.remove();
-    setChips(chipsRef.current.filter(function (c) {
+    var next = chipsRef.current.filter(function (c) {
       return c.data.id !== id;
-    }));
+    });
+    chipsRef.current = next;
+    setChips(next);
     onAfterMutate === null || onAfterMutate === void 0 || onAfterMutate();
   }, [onAfterMutate]);
   var resetChips = useCallback(function () {
     setChips([]);
-    // 不调 onAfterMutate —— resetChips 通常和 editor.innerHTML='' 配套，
-    // 由调用方统一抛一次 onChange 即可。
+    chipsRef.current = [];
   }, []);
   return {
     chips: chips,
     insertChip: insertChip,
+    insertChipAtRange: insertChipAtRange,
+    insertSerializedAtRange: insertSerializedAtRange,
+    syncChipsAfterDomMutation: syncChipsAfterDomMutation,
     removeChip: removeChip,
     resetChips: resetChips
   };

package/dist/composer/hooks/useChipSelectionMarker.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+import type { ManagedChip } from './useChipManager';
+/**
+ * chip host 在原生 selection 下无高亮（contentEditable=false + user-select:none），
+ * 用 data-selected 自绘与浏览器 selection 一致的浅灰底。
+ */
+export declare function useChipSelectionMarker(editorRef: RefObject<HTMLElement | null>, chips: ManagedChip[]): void;

package/dist/composer/hooks/useChipSelectionMarker.js

@@ -0,0 +1,66 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { useEffect, useRef } from 'react';
+/**
+ * chip host 在原生 selection 下无高亮（contentEditable=false + user-select:none），
+ * 用 data-selected 自绘与浏览器 selection 一致的浅灰底。
+ */
+export function useChipSelectionMarker(editorRef, chips) {
+  var chipsRef = useRef(chips);
+  chipsRef.current = chips;
+  useEffect(function () {
+    var clearSelected = function clearSelected() {
+      var _iterator = _createForOfIteratorHelper(chipsRef.current),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var chip = _step.value;
+          chip.host.removeAttribute('data-selected');
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    var handler = function handler() {
+      var editor = editorRef.current;
+      if (!editor) {
+        clearSelected();
+        return;
+      }
+      var sel = window.getSelection();
+      if (!sel || sel.rangeCount === 0) {
+        clearSelected();
+        return;
+      }
+      var range = sel.getRangeAt(0);
+      if (range.collapsed || !editor.contains(range.commonAncestorContainer)) {
+        clearSelected();
+        return;
+      }
+      var _iterator2 = _createForOfIteratorHelper(chipsRef.current),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var chip = _step2.value;
+          if (range.intersectsNode(chip.host)) {
+            chip.host.setAttribute('data-selected', '');
+          } else {
+            chip.host.removeAttribute('data-selected');
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+    };
+    document.addEventListener('selectionchange', handler);
+    return function () {
+      document.removeEventListener('selectionchange', handler);
+      clearSelected();
+    };
+  }, [editorRef]);
+}

package/dist/composer/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { SkillItem, SendMeta } from '../_genui-types';
+import type { Attachment, SkillItem, SendMeta } from '../_genui-types';
 import './style';
 export type ComposerTool = 'attachment' | 'webSearch' | 'skill';
 export type ComposerVariant = 'full' | 'lite';
@@ -36,6 +36,18 @@ export interface ComposerProps {
     onSend: (text: string, meta?: SendMeta) => void;
     onStop?: () => void;
     isGenerating?: boolean;
+    /**
+     * 整体禁用：输入框不可输入、工具按钮置灰、发送按钮显示但不可点击。
+     *
+     * 状态优先级（高 → 低）：`disabled` > `isGenerating` > `canSend`。
+     * - `disabled=true` 时，无论是否在生成中，都强制呈现"发送态"按钮（仅置灰），
+     *   不会切换到中止按钮——因为禁用本身意味着"现在什么都不能做"。
+     *
+     * 典型场景：人工客服尚未接入、会话被风控冻结、配额耗尽等"暂时不可发起新交互"的状态。
+     * 此时业务方常配合修改 placeholder（如"等待客服接入…"）告知用户。
+     * @default false
+     */
+    disabled?: boolean;
     placeholder?: string;
     /** 根节点外边距：drawer = 左右下各 24px（与原先外层 px-6 pb-6 一致），不再包一层 div */
     spacing?: 'default' | 'drawer';
@@ -76,6 +88,51 @@ export interface ComposerProps {
      * 类型同步调整为 `HTMLDivElement`，旧业务代码若仅读 `e.shiftKey` 等通用属性无影响。
      */
     onEnter?: (e: React.KeyboardEvent<HTMLDivElement>) => void | false;
+    /**
+     * 受控附件列表。
+     * - 传则受控，由业务方决定数组内容；典型搭配 `onAttachFiles` + `onAttachmentsChange` 使用，
+     *   把"原生 File → 云端 Attachment"的转换交给业务方（如先上传到企点 / OSS 拿 url）。
+     * - 不传则非受控，组件内部自管，沿用 `URL.createObjectURL(f)` 生成 blob url 的旧行为（向后兼容）。
+     */
+    attachments?: Attachment[];
+    /**
+     * 附件数组变化时触发（新增、删除、外部回写都会调）。
+     * 受控模式下与 `attachments` 配合形成 React 标准受控形态。
+     */
+    onAttachmentsChange?: (attachments: Attachment[]) => void;
+    /**
+     * 文件经选择 / 拖入 / 粘贴入口被选中并通过内置校验（数量上限、单文件体积、重名）后触发。
+     * - **传入此回调即接管"原生 File → Attachment"全过程**：组件不再做 `URL.createObjectURL`，
+     *   也不会自动入栈。业务方负责上传（如调企点接口拿 `qidian_uuid`）后，
+     *   通过 `onAttachmentsChange` 把云端结果回写到 `attachments`。
+     * - 不传则回落到默认行为：内部生成 blob url 入栈（仅本地预览，无服务端语义）。
+     *
+     * 强约定：传 `onAttachFiles` 时通常应同时把 `attachments` 受控（否则业务方无路径回写）。
+     */
+    onAttachFiles?: (files: File[]) => void;
+    /**
+     * 单条附件被删除时触发，提供下标与被删条目。
+     * - 与 `onAttachmentsChange` 同时调（顺序：先 `onAttachmentRemove` 再 `onAttachmentsChange`）。
+     * - 适合在此处调"服务端删文件"等需要拿到具体被删条目的接口，
+     *   避免业务方从前后两次 `attachments` 数组里 diff 出被删项。
+     */
+    onAttachmentRemove?: (index: number, attachment: Attachment) => void;
+    /**
+     * 关闭新附件入口：附件工具按钮置灰、拖入不再高亮、粘贴入文件被忽略。
+     * 已存在的附件仍可由用户点击 × 删除。
+     * @default false
+     */
+    attachmentsDisabled?: boolean;
+    /**
+     * 单次最多附件数量。
+     * @default 5
+     */
+    maxFileCount?: number;
+    /**
+     * 单个文件最大体积（字节）。
+     * @default 20 * 1024 * 1024（20MB）
+     */
+    maxFileSize?: number;
     className?: string;
     style?: React.CSSProperties;
 }