one-design-next 0.0.32 → 0.0.34

package/dist/chat-item/index.js

@@ -8,45 +8,150 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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 { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useId } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
 import Dialog from "../dialog";
 import Dropdown from "../dropdown";
 import "./style";
-export function ChatItem(_ref) {
-  var id = _ref.id,
-    title = _ref.title,
-    active = _ref.active,
-    status = _ref.status,
-    _onClick = _ref.onClick,
-    onRename = _ref.onRename,
-    onDelete = _ref.onDelete,
-    actionMenuZIndex = _ref.actionMenuZIndex;
-  var _useState = useState(false),
+var STATUS_ARIA_LABEL = {
+  generating: '生成中',
+  unread: '未读更新',
+  error: '生成出错'
+};
+function ChatItemGeneratingJelly(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 14 : _ref$size,
+    _ref$speed = _ref.speed,
+    speed = _ref$speed === void 0 ? 1.75 : _ref$speed;
+  var rawId = useId();
+  var filterId = "odn-chat-item-jelly-ooze-".concat(rawId.replace(/:/g, ''));
+  var style = {
+    '--uib-size': "".concat(size, "px"),
+    '--uib-color': 'currentColor',
+    '--uib-speed': "".concat(speed, "s"),
+    filter: "url('#".concat(filterId, "')")
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-jelly": true,
+    style: style,
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-jelly-dot": true
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-jelly-traveler": true
+  }), /*#__PURE__*/React.createElement("svg", {
+    width: "0",
+    height: "0",
+    style: {
+      position: 'absolute'
+    }
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: filterId
+  }, /*#__PURE__*/React.createElement("feGaussianBlur", {
+    in: "SourceGraphic",
+    stdDeviation: size / 9,
+    result: "blur"
+  }), /*#__PURE__*/React.createElement("feColorMatrix", {
+    in: "blur",
+    mode: "matrix",
+    values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7",
+    result: "ooze"
+  }), /*#__PURE__*/React.createElement("feBlend", {
+    in: "SourceGraphic",
+    in2: "ooze"
+  })))));
+}
+function ChatItemStatus(_ref2) {
+  var status = _ref2.status;
+  var label = STATUS_ARIA_LABEL[status];
+  if (status === 'generating') {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-odn-chat-item-status": true,
+      "data-odn-chat-item-status-generating": true,
+      "aria-label": label,
+      role: "status"
+    }, /*#__PURE__*/React.createElement(ChatItemGeneratingJelly, null));
+  }
+  if (status === 'error') {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-odn-chat-item-status": true,
+      "data-odn-chat-item-status-error": true,
+      "aria-label": label,
+      role: "status"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "alert-circle-filled",
+      size: 12
+    }));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-status": true,
+    "data-odn-chat-item-status-unread": true,
+    "aria-label": label,
+    role: "status"
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-status-unread-dot": true
+  }));
+}
+function useControllableState(controlled, defaultValue, onChange) {
+  var _useState = useState(defaultValue),
     _useState2 = _slicedToArray(_useState, 2),
-    renaming = _useState2[0],
-    setRenaming = _useState2[1];
+    internal = _useState2[0],
+    setInternal = _useState2[1];
+  var value = controlled !== null && controlled !== void 0 ? controlled : internal;
+  var setValue = function setValue(next) {
+    onChange === null || onChange === void 0 || onChange(next);
+    if (controlled === undefined) setInternal(next);
+  };
+  return [value, setValue];
+}
+export function ChatItem(_ref3) {
+  var id = _ref3.id,
+    title = _ref3.title,
+    active = _ref3.active,
+    status = _ref3.status,
+    _onClick = _ref3.onClick,
+    onRename = _ref3.onRename,
+    onDelete = _ref3.onDelete,
+    actionMenuZIndex = _ref3.actionMenuZIndex,
+    renamingProp = _ref3.renaming,
+    _ref3$defaultRenaming = _ref3.defaultRenaming,
+    defaultRenaming = _ref3$defaultRenaming === void 0 ? false : _ref3$defaultRenaming,
+    onRenamingChange = _ref3.onRenamingChange,
+    menuOpenProp = _ref3.menuOpen,
+    _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
+    defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? false : _ref3$defaultMenuOpen,
+    onMenuOpenChange = _ref3.onMenuOpenChange,
+    deleteOpenProp = _ref3.deleteOpen,
+    _ref3$defaultDeleteOp = _ref3.defaultDeleteOpen,
+    defaultDeleteOpen = _ref3$defaultDeleteOp === void 0 ? false : _ref3$defaultDeleteOp,
+    onDeleteOpenChange = _ref3.onDeleteOpenChange;
+  var _useControllableState = useControllableState(renamingProp, defaultRenaming, onRenamingChange),
+    _useControllableState2 = _slicedToArray(_useControllableState, 2),
+    renaming = _useControllableState2[0],
+    setRenaming = _useControllableState2[1];
   var _useState3 = useState(title),
     _useState4 = _slicedToArray(_useState3, 2),
     draft = _useState4[0],
     setDraft = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    deleteOpen = _useState6[0],
-    setDeleteOpen = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    menuOpen = _useState8[0],
-    setMenuOpen = _useState8[1];
+  var _useControllableState3 = useControllableState(deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange),
+    _useControllableState4 = _slicedToArray(_useControllableState3, 2),
+    deleteOpen = _useControllableState4[0],
+    setDeleteOpen = _useControllableState4[1];
+  var _useControllableState5 = useControllableState(menuOpenProp, defaultMenuOpen, onMenuOpenChange),
+    _useControllableState6 = _slicedToArray(_useControllableState5, 2),
+    menuOpen = _useControllableState6[0],
+    setMenuOpen = _useControllableState6[1];
   var inputRef = useRef(null);
+  useEffect(function () {
+    if (!renaming) setDraft(title);
+  }, [title, renaming]);
   useEffect(function () {
     if (renaming) {
       var el = inputRef.current;
       if (!el) return;
       el.focus();
       el.select();
-      // 长文本默认会滚到末尾；强制从第一个字开始展示
       el.scrollLeft = 0;
     }
   }, [renaming]);
@@ -54,8 +159,6 @@ export function ChatItem(_ref) {
     var _inputRef$current;
     var trimmed = draft.trim();
     if (trimmed && trimmed !== title) onRename === null || onRename === void 0 || onRename(id, trimmed);
-    // 先卸下焦点，避免 input 卸载后焦点被转移到切回来的 <button>
-    // 引发 :focus-visible 触发出 focus 环
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
     setRenaming(false);
   };
@@ -104,9 +207,8 @@ export function ChatItem(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-item-title": true,
     "data-odn-chat-item-title-bold": active ? '' : undefined
-  }, title), status && !active && /*#__PURE__*/React.createElement("span", {
-    "data-odn-chat-item-status": true,
-    "data-odn-chat-item-status-generating": status === 'generating' ? '' : undefined
+  }, title), status && !active && /*#__PURE__*/React.createElement(ChatItemStatus, {
+    status: status
   }))), /*#__PURE__*/React.createElement(Dropdown, {
     trigger: "click",
     placement: "bottomRight",
@@ -127,8 +229,12 @@ export function ChatItem(_ref) {
       if (value === 'rename') {
         setDraft(title);
         setRenaming(true);
+        setMenuOpen(false);
+      }
+      if (value === 'delete') {
+        setDeleteOpen(true);
+        setMenuOpen(false);
       }
-      if (value === 'delete') setDeleteOpen(true);
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",

package/dist/chat-item/style/index.css

@@ -1,12 +1,4 @@
 @charset "UTF-8";
-@keyframes odn-chat-item-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
 [data-odn-chat-item]:hover [data-odn-chat-item-menu-trigger], [data-odn-chat-item]:has(:focus-visible) [data-odn-chat-item-menu-trigger] {
   opacity: 1;
   pointer-events: auto;
@@ -111,6 +103,8 @@
 }
 
 [data-odn-chat-item-title] {
+  flex: 1 1 auto;
+  min-width: 0;
   font-size: 14px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -122,16 +116,27 @@
 }
 
 [data-odn-chat-item-status] {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-odn-chat-item-status-unread] [data-odn-chat-item-status-unread-dot] {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--odn-color-brand-6);
-  flex-shrink: 0;
 }
 
 [data-odn-chat-item-status-generating] {
-  opacity: 0.5;
-  animation: odn-chat-item-pulse 2s ease-in-out infinite;
+  color: var(--odn-color-black-8);
+}
+
+[data-odn-chat-item-status-error] {
+  color: var(--odn-color-error);
 }
 
 [data-odn-chat-item-menu-trigger] {
@@ -186,6 +191,72 @@
 }
 
 /* ChatItem 的 Dropdown 面板：宽度根据内容自适应（hug），不使用默认 128px */
+[data-odn-chat-item-jelly] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--uib-size);
+  height: var(--uib-size);
+}
+[data-odn-chat-item-jelly]::before, [data-odn-chat-item-jelly]::after,
+[data-odn-chat-item-jelly] [data-odn-chat-item-jelly-dot] {
+  content: "";
+  position: absolute;
+  width: 33%;
+  height: 33%;
+  background-color: var(--uib-color);
+  border-radius: 100%;
+  will-change: transform;
+}
+[data-odn-chat-item-jelly]::before {
+  right: 0;
+  bottom: 6%;
+  animation: odn-chat-item-jelly-grow var(--uib-speed) ease calc(var(--uib-speed) * -0.666) infinite;
+}
+[data-odn-chat-item-jelly]::after {
+  left: 0;
+  bottom: 6%;
+  animation: odn-chat-item-jelly-grow var(--uib-speed) ease calc(var(--uib-speed) * -0.333) infinite;
+}
+
+[data-odn-chat-item-jelly-dot] {
+  top: 6%;
+  left: 30%;
+  animation: odn-chat-item-jelly-grow var(--uib-speed) ease infinite;
+}
+
+[data-odn-chat-item-jelly-traveler] {
+  position: absolute;
+  top: 6%;
+  left: 30%;
+  width: 33%;
+  height: 33%;
+  background-color: var(--uib-color);
+  border-radius: 100%;
+  animation: odn-chat-item-jelly-triangulate var(--uib-speed) ease infinite;
+}
+
+@keyframes odn-chat-item-jelly-grow {
+  0%, 85%, 100% {
+    transform: scale(1.5);
+  }
+  50%, 60% {
+    transform: scale(0);
+  }
+}
+@keyframes odn-chat-item-jelly-triangulate {
+  0%, 100% {
+    transform: none;
+  }
+  33.333% {
+    transform: translate(120%, 175%);
+  }
+  66.666% {
+    transform: translate(-95%, 175%);
+  }
+}
 [data-odn-dropdown-content].odn-chat-item-action-menu {
   min-width: 0;
   width: max-content;

package/dist/composer/index.d.ts

@@ -157,6 +157,11 @@ export interface ComposerProps {
      *   避免业务方从前后两次 `attachments` 数组里 diff 出被删项。
      */
     onAttachmentRemove?: (index: number, attachment: Attachment) => void;
+    /**
+     * 附件失败重试回调（status='error' 生效）。
+     * 组件只负责交互事件，重试所需 File 引用由业务方保管。
+     */
+    onAttachmentRetry?: (index: number, attachment: Attachment) => void;
     /**
      * 关闭新附件入口：附件工具按钮置灰、拖入不再高亮、粘贴入文件被忽略。
      * 已存在的附件仍可由用户点击 × 删除。
@@ -173,6 +178,15 @@ export interface ComposerProps {
      * @default 20 * 1024 * 1024（20MB）
      */
     maxFileSize?: number;
+    /**
+     * 单次总文件体积上限（字节）。不传表示不限。
+     */
+    maxTotalSize?: number;
+    /**
+     * 文件白名单规则（与原生 input accept 一致），同时作用于按钮选择 / 拖拽 / 粘贴。
+     * @default image/*,.pdf,...,.7z
+     */
+    accept?: string;
     /**
      * 参数面板内容渲染。提供后 invocation chip 可点击打开面板；
      * `SkillItem.initialState='pending'` 插入后会自动打开。