one-design-next 0.0.43 → 0.0.44

package/dist/_genui-types.d.ts

@@ -215,7 +215,9 @@ export interface Conversation {
     title: string;
     preview?: string;
     timestamp?: number;
-    status?: 'generating' | 'unread' | 'error';
+    /** 对话类型。`'human'` 为人工客服会话；默认视为 AI。 */
+    type?: 'ai' | 'human';
+    status?: 'generating' | 'waiting' | 'unread' | 'error';
 }
 export interface MessageSnapshot {
     content: string;

package/dist/chat-item/index.d.ts

@@ -1,10 +1,13 @@
 /// <reference types="react" />
 import './style';
-type StatusIndicator = 'generating' | 'unread' | 'error';
+type StatusIndicator = 'generating' | 'waiting' | 'unread' | 'error';
+type ConversationType = 'ai' | 'human';
 export interface ChatItemProps {
     id: string;
     title: string;
     active?: boolean;
+    /** 对话类型。`'human'` 时标题后展示客服 icon；默认 `'ai'`。 */
+    type?: ConversationType;
     status?: StatusIndicator;
     onClick?: (id: string) => void;
     onRename?: (id: string, newTitle: string) => void;
@@ -20,7 +23,7 @@ export interface ChatItemProps {
     defaultDeleteOpen?: boolean;
     onDeleteOpenChange?: (open: boolean) => void;
 }
-export declare function ChatItem({ id, title, active, status, onClick, onRename, onDelete, actionMenuZIndex, renaming: renamingProp, defaultRenaming, onRenamingChange, menuOpen: menuOpenProp, defaultMenuOpen, onMenuOpenChange, deleteOpen: deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange, }: ChatItemProps): import("react").JSX.Element;
+export declare function ChatItem({ id, title, active, type, status, onClick, onRename, onDelete, actionMenuZIndex, renaming: renamingProp, defaultRenaming, onRenamingChange, menuOpen: menuOpenProp, defaultMenuOpen, onMenuOpenChange, deleteOpen: deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange, }: ChatItemProps): import("react").JSX.Element;
 export declare namespace ChatItem {
     var displayName: string;
 }

package/dist/chat-item/index.js

@@ -8,7 +8,7 @@ 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, useId } from 'react';
+import { useState, useRef, useEffect, useLayoutEffect } from 'react';
 import HoverFill from "../hover-fill";
 import Icon from "../icon";
 import Dialog from "../dialog";
@@ -16,54 +16,99 @@ import Dropdown from "../dropdown";
 import "./style";
 var STATUS_ARIA_LABEL = {
   generating: '生成中',
+  waiting: '等待处理',
   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'
+var ELLIPSIS = '…';
+
+/**
+ * 有 trailing（客服 icon / status）时，用 DOM 实测把标题裁到可用宽度。
+ * 解决 CSS text-overflow 按字符边界截断后，省略号右侧留白把 status 顶开的问题。
+ * 量准时：截断标题宽 ≈ label − trailing − gap，整组仍铺满行，trailing 贴右缘。
+ */
+function useFittedTitle(title, enabled, labelRef, titleRef, trailingRef) {
+  var _useState = useState(title),
+    _useState2 = _slicedToArray(_useState, 2),
+    fitted = _useState2[0],
+    setFitted = _useState2[1];
+  useLayoutEffect(function () {
+    var _document$fonts;
+    if (!enabled) {
+      setFitted(title);
+      return;
     }
-  }, /*#__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"
-  })))));
+    var label = labelRef.current;
+    var titleEl = titleRef.current;
+    if (!label || !titleEl) return;
+    var cancelled = false;
+    var probe = document.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;white-space:nowrap;left:-9999px;top:0;';
+    var syncProbeFont = function syncProbeFont() {
+      var cs = getComputedStyle(titleEl);
+      probe.style.fontFamily = cs.fontFamily;
+      probe.style.fontSize = cs.fontSize;
+      probe.style.fontWeight = cs.fontWeight;
+      probe.style.fontStyle = cs.fontStyle;
+      probe.style.letterSpacing = cs.letterSpacing;
+      probe.style.fontFeatureSettings = cs.fontFeatureSettings;
+      probe.style.fontVariationSettings = cs.fontVariationSettings;
+    };
+    var measure = function measure(text) {
+      probe.textContent = text;
+      return probe.getBoundingClientRect().width;
+    };
+    var fit = function fit() {
+      var _trailing$getBounding;
+      if (cancelled) return;
+      syncProbeFont();
+      if (!probe.isConnected) document.body.appendChild(probe);
+      var trailing = trailingRef.current;
+      var gap = trailing ? Number.parseFloat(getComputedStyle(label).columnGap || getComputedStyle(label).gap) || 0 : 0;
+      var trailingWidth = (_trailing$getBounding = trailing === null || trailing === void 0 ? void 0 : trailing.getBoundingClientRect().width) !== null && _trailing$getBounding !== void 0 ? _trailing$getBounding : 0;
+      // 用浮点宽度，避免 offsetWidth 取整导致少算 1px、过早截断
+      var maxWidth = Math.max(0, label.getBoundingClientRect().width - trailingWidth - gap);
+      if (measure(title) <= maxWidth + 0.5) {
+        setFitted(title);
+        return;
+      }
+      var lo = 0;
+      var hi = title.length;
+      var best = ELLIPSIS;
+      while (lo <= hi) {
+        var mid = lo + hi >> 1;
+        var candidate = "".concat(title.slice(0, mid)).concat(ELLIPSIS);
+        if (measure(candidate) <= maxWidth + 0.5) {
+          best = candidate;
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
+        }
+      }
+      setFitted(best);
+    };
+    fit();
+    void ((_document$fonts = document.fonts) === null || _document$fonts === void 0 ? void 0 : _document$fonts.ready.then(function () {
+      if (!cancelled) fit();
+    }));
+    var ro = new ResizeObserver(fit);
+    ro.observe(label);
+    var trailing = trailingRef.current;
+    if (trailing) ro.observe(trailing);
+    // hover 时 btn padding-right 变化会改变 label 宽度
+    var btn = label.closest('[data-odn-chat-item-btn]');
+    if (btn) ro.observe(btn);
+    return function () {
+      cancelled = true;
+      ro.disconnect();
+      probe.remove();
+    };
+  }, [title, enabled, labelRef, titleRef, trailingRef]);
+  return enabled ? fitted : title;
 }
-function ChatItemStatus(_ref2) {
-  var status = _ref2.status;
+function ChatItemStatus(_ref) {
+  var status = _ref.status;
   var label = STATUS_ARIA_LABEL[status];
   if (status === 'generating') {
     return /*#__PURE__*/React.createElement("span", {
@@ -71,7 +116,19 @@ function ChatItemStatus(_ref2) {
       "data-odn-chat-item-status-generating": true,
       "aria-label": label,
       role: "status"
-    }, /*#__PURE__*/React.createElement(ChatItemGeneratingJelly, null));
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "loading",
+      spin: true,
+      size: 12
+    }));
+  }
+  if (status === 'waiting') {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-odn-chat-item-status": true,
+      "data-odn-chat-item-status-waiting": true,
+      "aria-label": label,
+      role: "status"
+    }, "\u5F85\u56DE\u590D");
   }
   if (status === 'error') {
     return /*#__PURE__*/React.createElement("span", {
@@ -94,10 +151,10 @@ function ChatItemStatus(_ref2) {
   }));
 }
 function useControllableState(controlled, defaultValue, onChange) {
-  var _useState = useState(defaultValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    internal = _useState2[0],
-    setInternal = _useState2[1];
+  var _useState3 = useState(defaultValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internal = _useState4[0],
+    setInternal = _useState4[1];
   var value = controlled !== null && controlled !== void 0 ? controlled : internal;
   var setValue = function setValue(next) {
     onChange === null || onChange === void 0 || onChange(next);
@@ -105,35 +162,37 @@ function useControllableState(controlled, defaultValue, onChange) {
   };
   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;
+export function ChatItem(_ref2) {
+  var id = _ref2.id,
+    title = _ref2.title,
+    active = _ref2.active,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'ai' : _ref2$type,
+    status = _ref2.status,
+    _onClick = _ref2.onClick,
+    onRename = _ref2.onRename,
+    onDelete = _ref2.onDelete,
+    actionMenuZIndex = _ref2.actionMenuZIndex,
+    renamingProp = _ref2.renaming,
+    _ref2$defaultRenaming = _ref2.defaultRenaming,
+    defaultRenaming = _ref2$defaultRenaming === void 0 ? false : _ref2$defaultRenaming,
+    onRenamingChange = _ref2.onRenamingChange,
+    menuOpenProp = _ref2.menuOpen,
+    _ref2$defaultMenuOpen = _ref2.defaultMenuOpen,
+    defaultMenuOpen = _ref2$defaultMenuOpen === void 0 ? false : _ref2$defaultMenuOpen,
+    onMenuOpenChange = _ref2.onMenuOpenChange,
+    deleteOpenProp = _ref2.deleteOpen,
+    _ref2$defaultDeleteOp = _ref2.defaultDeleteOpen,
+    defaultDeleteOpen = _ref2$defaultDeleteOp === void 0 ? false : _ref2$defaultDeleteOp,
+    onDeleteOpenChange = _ref2.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(title),
+    _useState6 = _slicedToArray(_useState5, 2),
+    draft = _useState6[0],
+    setDraft = _useState6[1];
   var _useControllableState3 = useControllableState(deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange),
     _useControllableState4 = _slicedToArray(_useControllableState3, 2),
     deleteOpen = _useControllableState4[0],
@@ -143,6 +202,13 @@ export function ChatItem(_ref3) {
     menuOpen = _useControllableState6[0],
     setMenuOpen = _useControllableState6[1];
   var inputRef = useRef(null);
+  var labelRef = useRef(null);
+  var titleRef = useRef(null);
+  var trailingRef = useRef(null);
+  var showStatus = Boolean(status && !active);
+  var showTypeIcon = type === 'human';
+  var fitTitle = showTypeIcon || showStatus;
+  var displayTitle = useFittedTitle(title, fitTitle, labelRef, titleRef, trailingRef);
   useEffect(function () {
     if (!renaming) setDraft(title);
   }, [title, renaming]);
@@ -203,13 +269,27 @@ export function ChatItem(_ref3) {
     "data-odn-chat-item-btn": true,
     "data-odn-chat-item-active": active || undefined
   }, /*#__PURE__*/React.createElement("span", {
-    "data-odn-chat-item-label": true
+    "data-odn-chat-item-label": true,
+    ref: labelRef
   }, /*#__PURE__*/React.createElement("span", {
+    ref: titleRef,
     "data-odn-chat-item-title": true,
-    "data-odn-chat-item-title-bold": active ? '' : undefined
-  }, title), status && !active && /*#__PURE__*/React.createElement(ChatItemStatus, {
+    "data-odn-chat-item-title-bold": active ? '' : undefined,
+    "data-odn-chat-item-title-fitted": fitTitle ? '' : undefined,
+    title: title
+  }, displayTitle), (showTypeIcon || showStatus) && /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-trailing": true,
+    ref: trailingRef
+  }, showTypeIcon && /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-type-icon": true,
+    "aria-label": "\u4EBA\u5DE5\u5BA2\u670D\u4F1A\u8BDD",
+    role: "img"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "support-bold",
+    size: 12
+  })), showStatus && status && /*#__PURE__*/React.createElement(ChatItemStatus, {
     status: status
-  }))), /*#__PURE__*/React.createElement(Dropdown, {
+  })))), /*#__PURE__*/React.createElement(Dropdown, {
     trigger: "click",
     placement: "bottomRight",
     zIndex: actionMenuZIndex,

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

@@ -98,12 +98,15 @@
 [data-odn-chat-item-label] {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+  flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
 }
 
 [data-odn-chat-item-title] {
-  flex: 1 1 auto;
+  /* 0 1 auto：短标题不撑开（icon 贴字）；长标题可收缩省略，trailing 被顶到右缘 */
+  flex: 0 1 auto;
   min-width: 0;
   font-size: 14px;
   overflow: hidden;
@@ -111,10 +114,34 @@
   white-space: nowrap;
 }
 
+/* JS 已裁到可用宽度：按内容收缩，省略号后无字符边界留白；量准时整组仍铺满行 */
+[data-odn-chat-item-title-fitted] {
+  flex: 0 0 auto;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 [data-odn-chat-item-title-bold] {
   font-weight: 500;
 }
 
+[data-odn-chat-item-trailing] {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+[data-odn-chat-item-type-icon] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  color: var(--odn-color-black-8);
+}
+
 [data-odn-chat-item-status] {
   flex-shrink: 0;
   width: 14px;
@@ -135,6 +162,19 @@
   color: var(--odn-color-black-8);
 }
 
+[data-odn-chat-item-status-waiting] {
+  width: auto;
+  height: 16px;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 16px;
+  white-space: nowrap;
+  background: var(--odn-color-orange-6);
+  padding: 0 3px;
+  border-radius: 4px;
+}
+
 [data-odn-chat-item-status-error] {
   color: var(--odn-color-error);
 }
@@ -190,73 +230,6 @@
   color: var(--odn-color-black-12);
 }
 
-/* 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/fab/index.d.ts

@@ -12,6 +12,7 @@ export interface FabProps {
     hoverBgOpacity?: number;
     speed?: number;
     hoverSpeed?: number;
+    badge?: boolean;
 }
 declare const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;
 export default Fab;

package/dist/fab/index.js

@@ -61,7 +61,8 @@ var Fab = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     _ref3$speed = _ref3.speed,
     speed = _ref3$speed === void 0 ? 1.49 : _ref3$speed,
     _ref3$hoverSpeed = _ref3.hoverSpeed,
-    hoverSpeed = _ref3$hoverSpeed === void 0 ? 2.77 : _ref3$hoverSpeed;
+    hoverSpeed = _ref3$hoverSpeed === void 0 ? 2.77 : _ref3$hoverSpeed,
+    badge = _ref3.badge;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hovered = _useState2[0],
@@ -132,6 +133,7 @@ var Fab = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       position: 'absolute',
       inset: 0,
       borderRadius: 'inherit',
+      overflow: 'hidden',
       width: '100%',
       height: '100%',
       opacity: live.opacity
@@ -139,6 +141,9 @@ var Fab = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "odn-fab-glow",
     "aria-hidden": "true"
+  }), badge && /*#__PURE__*/React.createElement("span", {
+    "data-odn-fab-badge": true,
+    "aria-label": "\u6709\u5F85\u5904\u7406\u4F1A\u8BDD"
   }), icon, /*#__PURE__*/React.createElement("span", {
     className: "odn-fab-label"
   }, label));

package/dist/fab/style/index.css

@@ -1,6 +1,6 @@
 [data-odn-fab] {
   position: relative;
-  overflow: hidden;
+  overflow: visible;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,6 +46,19 @@
   filter: blur(var(--fab-glow-hover-blur, 76px));
 }
 
+[data-odn-fab-badge] {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  z-index: 20;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--odn-color-orange-6);
+  box-shadow: 0 0 0 2px #fff;
+  pointer-events: none;
+}
+
 .odn-fab-icon {
   position: relative;
   z-index: 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "one-design-next",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "One Design Next from TAD@tencent.com",
   "packageManager": "pnpm@11.8.0",
   "module": "dist/index.js",