one-design-next 0.0.47 → 0.0.49

package/dist/clarify-dock/index.js

@@ -0,0 +1,747 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button from "../button";
+import DatePicker from "../date-picker";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+import Input from "../input";
+import Pagination from "../pagination";
+import { toISODate } from "./types";
+import "./style";
+
+/* ------------------------------------------------------------------ */
+/*  ClarifyDock                                                        */
+/* ------------------------------------------------------------------ */
+/*
+ * 真实形态：Trigger 在 AI 消息正文里，Panel 通过 Host 的 dock slot 吸附在
+ * Composer 上方——而不是 Trigger + Panel 同框。
+ *
+ * 导出三件套：
+ *   - <ClarifyDockTrigger />：Approval 式锁态卡（折叠 + 展开题→答）
+ *   - <ClarifyDockPanel />：多题分页 form 面板
+ *   - useClarifyDockState(messages)：派生 pending / answered
+ *
+ * 多题节奏：一次只问一题；底栏左 Pagination simple（仅页码），右「上一题 / 下一题|确认」。
+ * 全部必答。单选 / 多选末项「其他」由 allowOther 注入。
+ */
+
+/** 整卷提交：自然语言摘要 + 结构化 data + 锁态小票行。 */
+
+/** Host 消息最小形状——hook 只认 assistant + clarify-dock instance。 */
+
+/* ================================================================== */
+/*  Trigger · Approval 式锁态卡（折叠默认 + 展开题→答）                  */
+/* ================================================================== */
+
+/** 题面「？」→「：」后与答案拼成一行，如「需要拆解哪些维度：素材」。 */
+function formatLockedLine(label, answer) {
+  var stem = label.replace(/[？?]\s*$/, '');
+  return "".concat(stem, "\uFF1A").concat(answer);
+}
+export function ClarifyDockTrigger(_ref) {
+  var items = _ref.items;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
+  /* 收合动画结束后再卸掉 panel 占位（对齐 Approval summaryCollapsedSettled） */
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsedSettled = _useState4[0],
+    setCollapsedSettled = _useState4[1];
+  useEffect(function () {
+    if (expanded) {
+      setCollapsedSettled(false);
+      return;
+    }
+    var id = window.setTimeout(function () {
+      return setCollapsedSettled(true);
+    }, 230);
+    return function () {
+      return window.clearTimeout(id);
+    };
+  }, [expanded]);
+  if (!items || items.length === 0) return null;
+  var multi = items.length > 1;
+  var mainLabel = multi ? "\u5DF2\u786E\u8BA4 ".concat(items.length, " \u9898") : formatLockedLine(items[0].label, items[0].answer);
+  var handleToggle = function handleToggle() {
+    if (expanded) {
+      setExpanded(false);
+      return;
+    }
+    setCollapsedSettled(false);
+    requestAnimationFrame(function () {
+      return setExpanded(true);
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked": true,
+    "data-resolved": true,
+    "data-summary-expanded": expanded ? '' : undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked-body": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked-heading": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked-title-row": true
+  }, /*#__PURE__*/React.createElement("p", {
+    "data-odn-clarify-dock-locked-text": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "check",
+    size: 14,
+    "data-odn-clarify-dock-locked-icon": true
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-clarify-dock-locked-main": true
+  }, mainLabel)), multi ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-clarify-dock-locked-toggle": true,
+    "aria-expanded": expanded,
+    onClick: handleToggle
+  }, /*#__PURE__*/React.createElement("span", null, expanded ? '收起' : '展开'), /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 14,
+    "data-odn-clarify-dock-locked-chevron": true
+  })) : null)), multi ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked-panel": true,
+    "data-open": expanded ? 'true' : 'false',
+    "data-collapsed-settled": collapsedSettled ? '' : undefined,
+    "aria-hidden": !expanded
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked-panel-inner": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-locked-receipt": true
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement("p", {
+      key: item.key,
+      "data-odn-clarify-dock-locked-line": true
+    }, formatLockedLine(item.label, item.answer));
+  })))) : null));
+}
+
+/* ================================================================== */
+/*  Panel · 多题分页                                                    */
+/* ================================================================== */
+
+/** 单题暂存答案。 */
+
+var OTHER_VALUE = '__other__';
+
+/** 多选已选 8% 底上的 hover 增量（叠后约 12% brand）——供 HoverFill 位移层使用 */
+var MULTI_SELECTED_HOVER_FILL = 'rgba(41, 107, 239, 0.04)';
+var MULTI_UNSELECTED_HOVER_FILL = 'rgba(33, 34, 38, 0.05)';
+var MULTI_UNSELECTED_ACTIVE_FILL = 'rgba(33, 34, 38, 0.08)';
+
+/**
+ * 单题选项上限（含「其他」），与 A–E 徽标一一对应。
+ * 超过时截断业务选项，优先保留末位「其他」。
+ */
+export var CLARIFY_DOCK_MAX_OPTIONS = 5;
+var LETTER_BADGES = ['A', 'B', 'C', 'D', 'E'];
+export function ClarifyDockPanel(_ref2) {
+  var msgId = _ref2.msgId,
+    spec = _ref2.spec,
+    onResolve = _ref2.onResolve;
+  var total = spec.questions.length;
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    page = _useState6[0],
+    setPage = _useState6[1];
+  var _useState7 = useState(function () {
+      return new Array(total).fill(undefined);
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    answers = _useState8[0],
+    setAnswers = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    otherDraft = _useState10[0],
+    setOtherDraft = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dateDraft = _useState12[0],
+    setDateDraft = _useState12[1];
+  var question = spec.questions[page];
+  var answer = answers[page];
+  var input = question.input;
+
+  /* 切页：回显 other / date 草稿 */
+  useEffect(function () {
+    if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' || (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi') {
+      var _answer$otherText;
+      setOtherDraft((_answer$otherText = answer.otherText) !== null && _answer$otherText !== void 0 ? _answer$otherText : '');
+    } else {
+      setOtherDraft('');
+    }
+    if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'date') {
+      setDateDraft(answer.value ? new Date("".concat(answer.value, "T00:00:00")) : null);
+    } else {
+      setDateDraft(null);
+    }
+  }, [page, answer]);
+  var setAnswerForPage = function setAnswerForPage(next) {
+    setAnswers(function (prev) {
+      var copy = _toConsumableArray(prev);
+      copy[page] = next;
+      return copy;
+    });
+  };
+  var canAdvance = useMemo(function () {
+    if (!answer) return false;
+    switch (answer.kind) {
+      case 'options':
+        if (answer.value === OTHER_VALUE) return otherDraft.trim().length > 0;
+        return true;
+      case 'options-multi':
+        {
+          var hasRegular = answer.values.some(function (v) {
+            return v !== OTHER_VALUE;
+          });
+          var hasOther = answer.values.includes(OTHER_VALUE);
+          if (hasOther && otherDraft.trim().length === 0) return false;
+          return hasRegular || hasOther;
+        }
+      case 'date':
+      case 'text':
+        return answer.value.trim().length > 0;
+      default:
+        return false;
+    }
+  }, [answer, otherDraft]);
+  var isLastPage = page === total - 1;
+  var isFirstPage = page === 0;
+  var formatAnswer = function formatAnswer(q, ans) {
+    if (!ans) return '（未答）';
+    switch (ans.kind) {
+      case 'options':
+        {
+          var _ans$otherText;
+          if (ans.value === OTHER_VALUE) return (_ans$otherText = ans.otherText) !== null && _ans$otherText !== void 0 ? _ans$otherText : '其他';
+          if (q.input.kind === 'options') {
+            var _q$input$options$find, _q$input$options$find2;
+            return (_q$input$options$find = (_q$input$options$find2 = q.input.options.find(function (o) {
+              return o.value === ans.value;
+            })) === null || _q$input$options$find2 === void 0 ? void 0 : _q$input$options$find2.label) !== null && _q$input$options$find !== void 0 ? _q$input$options$find : ans.value;
+          }
+          return ans.value;
+        }
+      case 'options-multi':
+        {
+          if (q.input.kind !== 'options-multi') return ans.values.join('、');
+          var opts = q.input.options;
+          var labels = ans.values.filter(function (v) {
+            return v !== OTHER_VALUE;
+          }).map(function (v) {
+            var _opts$find$label, _opts$find;
+            return (_opts$find$label = (_opts$find = opts.find(function (o) {
+              return o.value === v;
+            })) === null || _opts$find === void 0 ? void 0 : _opts$find.label) !== null && _opts$find$label !== void 0 ? _opts$find$label : v;
+          });
+          if (ans.values.includes(OTHER_VALUE) && ans.otherText) {
+            labels.push(ans.otherText);
+          }
+          return labels.join('、');
+        }
+      case 'date':
+      case 'text':
+        return ans.value;
+      default:
+        return '（未答）';
+    }
+  };
+  var syncCurrentDraftIntoAnswers = function syncCurrentDraftIntoAnswers() {
+    return answers.map(function (a, i) {
+      if (i !== page || !a) return a;
+      if (a.kind === 'options' && a.value === OTHER_VALUE) {
+        return _objectSpread(_objectSpread({}, a), {}, {
+          otherText: otherDraft
+        });
+      }
+      if (a.kind === 'options-multi' && a.values.includes(OTHER_VALUE)) {
+        return _objectSpread(_objectSpread({}, a), {}, {
+          otherText: otherDraft
+        });
+      }
+      if (a.kind === 'date' && dateDraft) {
+        return {
+          kind: 'date',
+          value: toISODate(dateDraft)
+        };
+      }
+      return a;
+    });
+  };
+  var submit = function submit(finalAnswers) {
+    var data = {};
+    spec.questions.forEach(function (q, i) {
+      var _a$otherText;
+      var a = finalAnswers[i];
+      if (!a) return;
+      switch (a.kind) {
+        case 'options':
+          data[q.key] = a.value === OTHER_VALUE ? ((_a$otherText = a.otherText) !== null && _a$otherText !== void 0 ? _a$otherText : otherDraft).trim() : a.value;
+          break;
+        case 'options-multi':
+          {
+            var values = a.values.filter(function (v) {
+              return v !== OTHER_VALUE;
+            });
+            if (a.values.includes(OTHER_VALUE)) {
+              var _a$otherText2;
+              var t = ((_a$otherText2 = a.otherText) !== null && _a$otherText2 !== void 0 ? _a$otherText2 : otherDraft).trim();
+              if (t) values.push(t);
+            }
+            data[q.key] = values;
+            break;
+          }
+        case 'date':
+        case 'text':
+          data[q.key] = a.value;
+          break;
+      }
+    });
+    var items = spec.questions.map(function (q, i) {
+      return {
+        key: q.key,
+        label: q.label,
+        answer: formatAnswer(q, finalAnswers[i])
+      };
+    });
+    var text = items.map(function (it) {
+      return formatLockedLine(it.label, it.answer);
+    }).join('；');
+    onResolve({
+      text: text,
+      data: data,
+      items: items
+    });
+  };
+  var handleContinue = function handleContinue() {
+    if (!canAdvance) return;
+    var synced = syncCurrentDraftIntoAnswers();
+    setAnswers(synced);
+    if (isLastPage) submit(synced);else setPage(function (p) {
+      return Math.min(p + 1, total - 1);
+    });
+  };
+  var handlePrev = function handlePrev() {
+    if (isFirstPage) return;
+    var synced = syncCurrentDraftIntoAnswers();
+    setAnswers(synced);
+    setPage(function (p) {
+      return Math.max(0, p - 1);
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock": true,
+    "data-odn-clarify-msg-id": msgId,
+    "aria-label": "\u6F84\u6E05\u95EE\u9898 ".concat(page + 1, " / ").concat(total)
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-body": true
+  }, spec.title ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-heading": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-title-row": true
+  }, /*#__PURE__*/React.createElement("p", {
+    "data-odn-clarify-dock-title": true
+  }, spec.title))) : null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-content": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-q-row": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-q": true
+  }, question.label), input.kind === 'options' ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-clarify-dock-q-hint": true
+  }, "\u5355\u9009") : input.kind === 'options-multi' ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-clarify-dock-q-hint": true
+  }, "\u53EF\u591A\u9009") : null), /*#__PURE__*/React.createElement(QuestionInput, {
+    input: input,
+    answer: answer,
+    otherDraft: otherDraft,
+    dateDraft: dateDraft,
+    onOtherDraftChange: function onOtherDraftChange(v) {
+      setOtherDraft(v);
+      if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' && answer.value === OTHER_VALUE) {
+        setAnswerForPage({
+          kind: 'options',
+          value: OTHER_VALUE,
+          otherText: v
+        });
+      } else if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi') {
+        setAnswerForPage({
+          kind: 'options-multi',
+          values: answer.values,
+          otherText: v
+        });
+      }
+    },
+    onDateChange: function onDateChange(d) {
+      setDateDraft(d);
+      setAnswerForPage(d ? {
+        kind: 'date',
+        value: toISODate(d)
+      } : undefined);
+    },
+    onPickSingle: function onPickSingle(opt) {
+      if (opt.value === OTHER_VALUE) {
+        setAnswerForPage({
+          kind: 'options',
+          value: OTHER_VALUE,
+          otherText: otherDraft
+        });
+      } else if (!((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' && answer.value === opt.value)) {
+        setAnswerForPage({
+          kind: 'options',
+          value: opt.value
+        });
+      }
+    },
+    onToggleMulti: function onToggleMulti(opt) {
+      var prev = (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi' ? answer.values : [];
+      var has = prev.includes(opt.value);
+      var next = has ? prev.filter(function (v) {
+        return v !== opt.value;
+      }) : [].concat(_toConsumableArray(prev), [opt.value]);
+      setAnswerForPage({
+        kind: 'options-multi',
+        values: next,
+        otherText: otherDraft
+      });
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-actions": true
+  }, total > 1 ? /*#__PURE__*/React.createElement(Pagination, {
+    type: "simple",
+    value: page + 1,
+    totalSize: total,
+    pageSize: 1,
+    showPrevNext: false,
+    showFirstLast: false,
+    "data-odn-clarify-dock-page-indicator": true
+  }) : /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-actions-right": true
+  }, !isFirstPage ? /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    intent: "normal",
+    onClick: handlePrev
+  }, "\u4E0A\u4E00\u9898") : null, /*#__PURE__*/React.createElement(Button, {
+    intent: "primary",
+    size: "small",
+    onClick: handleContinue,
+    disabled: !canAdvance,
+    "data-odn-clarify-dock-continue": true
+  }, isLastPage ? '确认' : '下一题'))));
+}
+
+/* ================================================================== */
+/*  单题输入区                                                          */
+/* ================================================================== */
+
+/**
+ * 组装选项列表并强制 ≤ CLARIFY_DOCK_MAX_OPTIONS。
+ * allowOther 时末位固定为「其他」，业务选项占前 N-1 席。
+ */
+function withOtherOption(options, allowOther) {
+  if (allowOther) {
+    var withoutDup = options.filter(function (o) {
+      return o.value !== OTHER_VALUE;
+    });
+    var capped = withoutDup.slice(0, CLARIFY_DOCK_MAX_OPTIONS - 1);
+    return [].concat(_toConsumableArray(capped), [{
+      value: OTHER_VALUE,
+      label: '其他'
+    }]);
+  }
+  return options.slice(0, CLARIFY_DOCK_MAX_OPTIONS);
+}
+function QuestionInput(_ref3) {
+  var input = _ref3.input,
+    answer = _ref3.answer,
+    otherDraft = _ref3.otherDraft,
+    dateDraft = _ref3.dateDraft,
+    onOtherDraftChange = _ref3.onOtherDraftChange,
+    onDateChange = _ref3.onDateChange,
+    onPickSingle = _ref3.onPickSingle,
+    onToggleMulti = _ref3.onToggleMulti;
+  if (input.kind === 'options' || input.kind === 'options-multi') {
+    return /*#__PURE__*/React.createElement(OptionsList, {
+      options: withOtherOption(input.options, input.allowOther),
+      multi: input.kind === 'options-multi',
+      answer: answer,
+      otherDraft: otherDraft,
+      otherPlaceholder: input.otherPlaceholder,
+      onOtherDraftChange: onOtherDraftChange,
+      onPickSingle: onPickSingle,
+      onToggleMulti: onToggleMulti
+    });
+  }
+  if (input.kind === 'date') {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-odn-clarify-dock-input-row": true
+    }, /*#__PURE__*/React.createElement(DatePicker, {
+      value: dateDraft,
+      onChange: function onChange(d) {
+        return onDateChange(d);
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-hint": true
+  }, "\u6682\u4E0D\u652F\u6301\u7684\u8F93\u5165\u7C7B\u578B\uFF1A", input.kind);
+}
+
+/* ------------------------------------------------------------------ */
+/*  OptionsList · A–E 徽标 + ↑↓ 框选（焦点隔离，不抢 Composer）         */
+/* ------------------------------------------------------------------ */
+
+function OptionsList(_ref4) {
+  var options = _ref4.options,
+    multi = _ref4.multi,
+    answer = _ref4.answer,
+    otherDraft = _ref4.otherDraft,
+    otherPlaceholder = _ref4.otherPlaceholder,
+    onOtherDraftChange = _ref4.onOtherDraftChange,
+    onPickSingle = _ref4.onPickSingle,
+    onToggleMulti = _ref4.onToggleMulti;
+  var optionRefs = useRef([]);
+  var optionKey = options.map(function (o) {
+    return o.value;
+  }).join('|');
+
+  /* 切题时把焦点放到首项/已选项，便于立刻 ↑↓ */
+  useEffect(function () {
+    var selectedIdx = options.findIndex(function (o) {
+      if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options') return answer.value === o.value;
+      if ((answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi') return answer.values.includes(o.value);
+      return false;
+    });
+    var focusIdx = selectedIdx >= 0 ? selectedIdx : 0;
+    var id = window.requestAnimationFrame(function () {
+      var _optionRefs$current$f;
+      (_optionRefs$current$f = optionRefs.current[focusIdx]) === null || _optionRefs$current$f === void 0 || _optionRefs$current$f.focus();
+    });
+    return function () {
+      return window.cancelAnimationFrame(id);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- 只在选项集切换时重聚焦
+  }, [optionKey]);
+  var focusAt = function focusAt(idx) {
+    var _optionRefs$current$n;
+    var next = Math.max(0, Math.min(options.length - 1, idx));
+    (_optionRefs$current$n = optionRefs.current[next]) === null || _optionRefs$current$n === void 0 || _optionRefs$current$n.focus();
+  };
+  var handleOptionKeyDown = function handleOptionKeyDown(idx, opt) {
+    return function (e) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        e.stopPropagation();
+        var next = (idx + 1) % options.length;
+        focusAt(next);
+        if (!multi) onPickSingle(options[next]);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        var _next = (idx - 1 + options.length) % options.length;
+        focusAt(_next);
+        if (!multi) onPickSingle(options[_next]);
+        return;
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (multi) onToggleMulti(opt);else onPickSingle(opt);
+      }
+    };
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-clarify-dock-options": true,
+    "data-multi": multi || undefined,
+    role: multi ? 'group' : 'radiogroup',
+    "aria-label": "\u6F84\u6E05\u9009\u9879"
+  }, options.map(function (opt, idx) {
+    var _LETTER_BADGES$idx;
+    var active = (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options' ? answer.value === opt.value : (answer === null || answer === void 0 ? void 0 : answer.kind) === 'options-multi' ? answer.values.includes(opt.value) : false;
+    var isOther = opt.value === OTHER_VALUE;
+    var letter = (_LETTER_BADGES$idx = LETTER_BADGES[idx]) !== null && _LETTER_BADGES$idx !== void 0 ? _LETTER_BADGES$idx : '';
+    if (isOther && active) {
+      var editingRow = /*#__PURE__*/React.createElement("div", {
+        "data-odn-clarify-dock-option": true,
+        "data-active": true,
+        "data-other": true,
+        "data-editing": true
+      }, multi ? /*#__PURE__*/React.createElement("span", {
+        role: "button",
+        tabIndex: 0,
+        "data-odn-clarify-dock-option-letter": true,
+        "data-odn-clarify-dock-option-toggle": true,
+        "aria-label": "\u53D6\u6D88\u9009\u62E9\u5176\u4ED6",
+        onClick: function onClick() {
+          return onToggleMulti(opt);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onToggleMulti(opt);
+          }
+        }
+      }, letter) : /*#__PURE__*/React.createElement("span", {
+        "data-odn-clarify-dock-option-letter": true,
+        "aria-hidden": true
+      }, letter), /*#__PURE__*/React.createElement(Input, {
+        value: otherDraft,
+        onChange: function onChange(_, value) {
+          return onOtherDraftChange(value);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            var otherIdx = options.findIndex(function (o) {
+              return o.value === OTHER_VALUE;
+            });
+            var next = e.key === 'ArrowDown' ? (otherIdx + 1) % options.length : (otherIdx - 1 + options.length) % options.length;
+            if (!multi) {
+              onPickSingle(options[next]);
+            }
+            requestAnimationFrame(function () {
+              return focusAt(next);
+            });
+          }
+          if (multi && e.key === 'Escape') {
+            e.preventDefault();
+            onToggleMulti(opt);
+          }
+        },
+        placeholder: otherPlaceholder !== null && otherPlaceholder !== void 0 ? otherPlaceholder : '请描述你的情况…',
+        size: "small",
+        light: true,
+        autoFocus: true
+      }));
+      if (multi) {
+        return /*#__PURE__*/React.createElement(HoverFill, {
+          key: opt.value,
+          hoverColor: MULTI_SELECTED_HOVER_FILL,
+          activeColor: MULTI_SELECTED_HOVER_FILL,
+          "data-odn-clarify-dock-option-fill": true
+        }, editingRow);
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: opt.value
+      }, editingRow);
+    }
+    var optionContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      "data-odn-clarify-dock-option-letter": true,
+      "aria-hidden": true
+    }, letter), /*#__PURE__*/React.createElement("span", {
+      "data-odn-clarify-dock-option-label": true
+    }, opt.label));
+
+    /* 不用 data-odn-button：避免 Button small 固定 height 把通栏选项撑坏 */
+    if (active && !multi) {
+      return /*#__PURE__*/React.createElement("button", {
+        key: opt.value,
+        type: "button",
+        ref: function ref(el) {
+          optionRefs.current[idx] = el;
+        },
+        role: "radio",
+        "aria-checked": true,
+        tabIndex: idx === 0 ? 0 : -1,
+        onClick: function onClick() {
+          return onPickSingle(opt);
+        },
+        onKeyDown: handleOptionKeyDown(idx, opt),
+        "data-odn-clarify-dock-option": true,
+        "data-active": true,
+        "data-other": isOther || undefined
+      }, optionContent);
+    }
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: opt.value,
+      hoverColor: multi ? active ? MULTI_SELECTED_HOVER_FILL : MULTI_UNSELECTED_HOVER_FILL : MULTI_UNSELECTED_HOVER_FILL,
+      activeColor: multi ? active ? MULTI_SELECTED_HOVER_FILL : MULTI_UNSELECTED_ACTIVE_FILL : MULTI_UNSELECTED_ACTIVE_FILL,
+      "data-odn-clarify-dock-option-fill": true
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      ref: function ref(el) {
+        optionRefs.current[idx] = el;
+      },
+      role: multi ? 'checkbox' : 'radio',
+      "aria-checked": active,
+      tabIndex: idx === 0 ? 0 : -1,
+      onClick: function onClick() {
+        return multi ? onToggleMulti(opt) : onPickSingle(opt);
+      },
+      onKeyDown: handleOptionKeyDown(idx, opt),
+      "data-odn-clarify-dock-option": true,
+      "data-active": active || undefined,
+      "data-other": isOther || undefined
+    }, optionContent));
+  })));
+}
+
+/* ================================================================== */
+/*  Hook · 派生 dock 状态                                               */
+/* ================================================================== */
+
+/**
+ * 收 ClarifyDock 的派生态：
+ *   - thread 最后一条 assistant 带 clarify-dock 且未答 → pending
+ *   - recordAnswer 后 Panel 消失，Trigger 切 Approval 式锁态卡
+ */
+export function useClarifyDockState(messages, sessionKey, resetVer) {
+  var _useState13 = useState({}),
+    _useState14 = _slicedToArray(_useState13, 2),
+    answers = _useState14[0],
+    setAnswers = _useState14[1];
+
+  /* 切换会话或点「重置」时清空已答标记，避免 Panel / Trigger 状态脱节 */
+  useEffect(function () {
+    setAnswers({});
+  }, [sessionKey, resetVer]);
+  var latest = useMemo(function () {
+    var _last$instance;
+    if (messages.length === 0) return null;
+    var last = messages[messages.length - 1];
+    if (last.role !== 'assistant') return null;
+    if (((_last$instance = last.instance) === null || _last$instance === void 0 ? void 0 : _last$instance.type) !== 'clarify-dock') return null;
+    return {
+      msgId: last.id,
+      spec: last.instance.spec
+    };
+  }, [messages]);
+  var pending = latest && !(latest.msgId in answers) ? latest : null;
+  var getMessageState = useCallback(function (msgId) {
+    return {
+      items: answers[msgId]
+    };
+  }, [answers]);
+  var recordAnswer = useCallback(function (msgId, items) {
+    setAnswers(function (m) {
+      return _objectSpread(_objectSpread({}, m), {}, _defineProperty({}, msgId, items));
+    });
+  }, []);
+  return {
+    pending: pending,
+    getMessageState: getMessageState,
+    recordAnswer: recordAnswer
+  };
+}
+ClarifyDockTrigger.displayName = 'ClarifyDockTrigger';
+ClarifyDockPanel.displayName = 'ClarifyDockPanel';