one-design-next 0.0.97 → 0.0.99

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

@@ -0,0 +1,387 @@
+@charset "UTF-8";
+[data-odn-chat-group] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+[data-odn-chat-group-header-fill] {
+  min-width: 0;
+  width: 100%;
+}
+
+.odn-chat-group-header-bg {
+  border-radius: 6px;
+}
+
+[data-odn-chat-group-header] {
+  display: flex;
+  align-items: center;
+  gap: 0;
+  min-width: 0;
+  padding: 0 4px 0 12px;
+}
+[data-odn-chat-group-header]:hover, [data-odn-chat-group-header]:has(:focus-visible) {
+  gap: 4px;
+}
+[data-odn-chat-group-header]:hover [data-odn-chat-group-extra], [data-odn-chat-group-header]:has(:focus-visible) [data-odn-chat-group-extra] {
+  flex-basis: auto;
+  width: auto;
+  max-width: none;
+  overflow: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-odn-chat-group-extra-visible] [data-odn-chat-group-header] {
+  gap: 4px;
+}
+
+[data-odn-chat-group-extra-visible] [data-odn-chat-group-extra] {
+  flex-basis: auto;
+  width: auto;
+  max-width: none;
+  overflow: visible;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+[data-odn-chat-group-folder-icon] {
+  flex-shrink: 0;
+  color: var(--odn-color-black-10);
+}
+
+[data-odn-chat-group-trigger] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  padding: 8px 4px 8px 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--odn-color-black-10);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  cursor: pointer;
+}
+[data-odn-chat-group-trigger]:hover {
+  background: transparent;
+  color: var(--odn-color-black-10);
+}
+[data-odn-chat-group-trigger]:focus-visible {
+  outline: none;
+  background: transparent;
+  color: var(--odn-color-black-10);
+}
+
+[data-odn-chat-group-title-row] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 8px 4px 8px 0;
+}
+
+[data-odn-chat-group-chevron] {
+  flex-shrink: 0;
+  opacity: 1;
+  transition: transform 0.15s ease;
+  color: var(--odn-color-black-10);
+}
+
+[data-odn-chat-group]:not([data-odn-chat-group-collapsed]) [data-odn-chat-group-chevron] {
+  transform: rotate(90deg);
+}
+
+[data-odn-chat-group-title] {
+  /* 与 ChatItem 相同：短标题按内容，长标题收缩省略；右侧 extra 闲时不占位 */
+  flex: 0 1 auto;
+  min-width: 0;
+  color: var(--odn-color-black-10);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-odn-chat-group-extra] {
+  flex: 0 0 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: 0;
+  min-width: 0;
+  max-width: 0;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+}
+[data-odn-chat-group-extra] [data-odn-hover-fill] {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+
+[data-odn-chat-group-rename] {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 8px 4px 8px 0;
+}
+
+[data-odn-chat-group-folder] [data-odn-chat-group-trigger],
+[data-odn-chat-group-folder] [data-odn-chat-group-title-row],
+[data-odn-chat-group-folder] [data-odn-chat-group-rename] {
+  gap: 4px;
+}
+
+[data-odn-chat-group-rename-input] {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--odn-color-black-10);
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+}
+[data-odn-chat-group-rename-input]::selection {
+  background: var(--odn-color-brand-3, rgba(0, 160, 200, 0.25));
+}
+
+[data-odn-chat-group-section] [data-odn-chat-group-header] {
+  padding: 4px 4px 2px 12px;
+}
+
+[data-odn-chat-group-section] [data-odn-chat-group-trigger],
+[data-odn-chat-group-section] [data-odn-chat-group-title-row],
+[data-odn-chat-group-section] [data-odn-chat-group-rename] {
+  padding: 2px 4px 2px 0;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-chat-group-section] [data-odn-chat-group-trigger]:hover,
+[data-odn-chat-group-section] [data-odn-chat-group-trigger]:focus-visible {
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-chat-group-section] [data-odn-chat-group-title],
+[data-odn-chat-group-section] [data-odn-chat-group-rename-input] {
+  color: var(--odn-color-black-9);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+[data-odn-chat-group-section] [data-odn-chat-group-rename-input] {
+  height: 18px;
+}
+
+[data-odn-chat-group-section] [data-odn-chat-group-chevron] {
+  color: var(--odn-color-black-9);
+}
+
+[data-odn-chat-group-collapse] {
+  display: grid;
+  grid-template-rows: 1fr;
+  width: 100%;
+  min-width: 0;
+  overflow-anchor: none;
+  transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-odn-chat-group-collapsed] [data-odn-chat-group-collapse] {
+  grid-template-rows: 0fr;
+}
+
+[data-odn-chat-group-body] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+}
+
+[data-odn-chat-group]:not([data-odn-chat-group-collapsed]) [data-odn-chat-group-body] {
+  overflow: visible;
+}
+
+[data-odn-chat-group-collapsed] [data-odn-chat-group-body] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+[data-odn-chat-group-folder] [data-odn-chat-item-btn],
+[data-odn-chat-group-folder] [data-odn-chat-group-hint-inner] {
+  padding-left: 30px;
+}
+
+[data-odn-chat-group-slot] {
+  min-width: 0;
+}
+
+[data-odn-chat-group-slot-inner] {
+  min-width: 0;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-enter],
+[data-odn-chat-group-slot][data-odn-chat-group-leave] {
+  pointer-events: none;
+  overflow-anchor: none;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-enter=shift] {
+  display: grid;
+  grid-template-rows: 0fr;
+  animation: odn-chat-group-enter-shift 180ms ease-out forwards;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-enter=shift] [data-odn-chat-group-slot-inner] {
+  min-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  animation: odn-chat-group-enter-fade 160ms ease-out 180ms both;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-enter=fade] [data-odn-chat-group-slot-inner] {
+  opacity: 0;
+  animation: odn-chat-group-enter-fade 160ms ease-out both;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-leave=shift] {
+  display: grid;
+  grid-template-rows: 1fr;
+  animation: odn-chat-group-leave-shift 180ms ease-out 160ms forwards;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-leave=shift] [data-odn-chat-group-slot-inner] {
+  min-height: 0;
+  overflow: hidden;
+  animation: odn-chat-group-leave-fade 160ms ease-out both;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-leave=fade] [data-odn-chat-group-slot-inner] {
+  animation: odn-chat-group-leave-fade 160ms ease-out both;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-leave=swap] {
+  display: grid;
+  grid-template-rows: 1fr;
+  animation: odn-chat-group-leave-shift 180ms ease-out forwards;
+}
+
+[data-odn-chat-group-slot][data-odn-chat-group-leave=swap] [data-odn-chat-group-slot-inner] {
+  min-height: 0;
+  overflow: hidden;
+  animation: odn-chat-group-leave-fade 160ms ease-out both;
+}
+
+@keyframes odn-chat-group-enter-shift {
+  from {
+    grid-template-rows: 0fr;
+  }
+  to {
+    grid-template-rows: 1fr;
+  }
+}
+@keyframes odn-chat-group-enter-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes odn-chat-group-leave-shift {
+  from {
+    grid-template-rows: 1fr;
+  }
+  to {
+    grid-template-rows: 0fr;
+  }
+}
+@keyframes odn-chat-group-leave-fade {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+/* 与 ChatItem 同行高 / 内边距；文案 black-8。empty 不可点，expand 可点。 */
+[data-odn-chat-group-hint] {
+  min-width: 0;
+}
+
+[data-odn-chat-group-hint-inner] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--odn-color-black-8);
+  font: inherit;
+  font-size: 14px;
+  line-height: inherit;
+  text-align: left;
+}
+
+[data-odn-chat-group-hint-kind=empty] {
+  pointer-events: none;
+  user-select: none;
+}
+
+[data-odn-chat-group-hint-kind=expand] [data-odn-chat-group-hint-inner] {
+  cursor: pointer;
+}
+[data-odn-chat-group-hint-kind=expand] [data-odn-chat-group-hint-inner]:focus-visible {
+  outline: none;
+  background: rgba(33, 34, 38, 0.05);
+}
+
+.odn-chat-group-hint-bg {
+  border-radius: 6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-odn-chat-group-collapse],
+  [data-odn-chat-group-body],
+  [data-odn-chat-group-chevron] {
+    transition-duration: 0.01ms !important;
+  }
+  [data-odn-chat-group-slot][data-odn-chat-group-enter],
+  [data-odn-chat-group-slot][data-odn-chat-group-enter] [data-odn-chat-group-slot-inner],
+  [data-odn-chat-group-slot][data-odn-chat-group-leave],
+  [data-odn-chat-group-slot][data-odn-chat-group-leave] [data-odn-chat-group-slot-inner] {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+  }
+}

package/dist/chat-group/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/chat-group/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

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

@@ -2,6 +2,10 @@
 import './style';
 type StatusIndicator = 'generating' | 'waiting' | 'unread' | 'error';
 type ConversationType = 'ai' | 'human';
+export interface ChatItemGroupOption {
+    id: string;
+    title: string;
+}
 export interface ChatItemProps {
     id: string;
     title: string;
@@ -16,9 +20,18 @@ export interface ChatItemProps {
     pinned?: boolean;
     /**
      * 对话时间。展示为相对时间（刚刚 / N分钟前 / …），在行右侧；
-     * 与「…」同槽：hover / 选中常显 / 菜单打开时瞬时让位（无过渡）。
+     * 与「…」同槽：hover 隐身但占位；选中常显「…」/ 菜单打开时才让出布局。
      */
     time?: number | string | Date;
+    /** 当前所属分组。从「移动到」子菜单中排除，不作为可选项。 */
+    groupId?: string;
+    /**
+     * 可移动到的分组列表。与 `onMoveToGroup` 同时传入时展示「移动到」子菜单；
+     * 当前 `groupId` 对应项会被排除。
+     */
+    groupOptions?: ChatItemGroupOption[];
+    /** 搜索高亮关键字；匹配段以主题色 mark 展示。 */
+    highlightQuery?: string;
     onClick?: (id: string) => void;
     onRename?: (id: string, newTitle: string) => void;
     /**
@@ -26,6 +39,8 @@ export interface ChatItemProps {
      * 第二个参数为切换后的目标状态。
      */
     onPin?: (id: string, pinned: boolean) => void;
+    /** 移组回调。第二个参数为目标 `groupId`。 */
+    onMoveToGroup?: (id: string, groupId: string) => void;
     onDelete?: (id: string) => void;
     actionMenuZIndex?: number | string;
     renaming?: boolean;
@@ -38,7 +53,7 @@ export interface ChatItemProps {
     defaultDeleteOpen?: boolean;
     onDeleteOpenChange?: (open: boolean) => void;
 }
-declare function ChatItemInner({ id, title, active, type, status, pinned, time, onClick, onRename, onPin, onDelete, actionMenuZIndex, renaming: renamingProp, defaultRenaming, onRenamingChange, menuOpen: menuOpenProp, defaultMenuOpen, onMenuOpenChange, deleteOpen: deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange, }: ChatItemProps): import("react").JSX.Element;
+declare function ChatItemInner({ id, title, active, type, status, pinned, time, groupId, groupOptions, highlightQuery, onClick, onRename, onPin, onMoveToGroup, onDelete, actionMenuZIndex, renaming: renamingProp, defaultRenaming, onRenamingChange, menuOpen: menuOpenProp, defaultMenuOpen, onMenuOpenChange, deleteOpen: deleteOpenProp, defaultDeleteOpen, onDeleteOpenChange, }: ChatItemProps): import("react").JSX.Element;
 /**
  * 会话列表项。
  *

package/dist/chat-item/index.js

@@ -49,16 +49,25 @@ var FIT_MIN_RELIABLE_WIDTH = 24;
 function useFittedTitle(title, enabled, labelRef, titleRef, /** 右对齐区（状态 / 时间），量宽预留 */
 trailingRef, /** 紧跟标题的类型 icon，量宽预留 */
 typeIconRef, /** trailing 宽度 / 字重变化，需强制重测 */
-layoutKey) {
+layoutKey, /** 搜索高亮时标题由 React 子节点渲染，禁止 textContent 覆写 */
+skipDomWrite) {
   useLayoutEffect(function () {
     var _measure, _document$fonts, _label$closest;
     var titleEl = titleRef.current;
     if (!titleEl) return;
 
+    // 高亮态保留 mark 子节点，截断交给 CSS
+    if (skipDomWrite) {
+      titleEl.removeAttribute(TITLE_FITTED_ATTR);
+      titleEl.removeAttribute('title');
+      return;
+    }
+
     // React 渲染的是完整标题；未启用拟合时保持原样，交给 CSS text-overflow
     if (!enabled) {
       titleEl.textContent = title;
       titleEl.removeAttribute(TITLE_FITTED_ATTR);
+      titleEl.removeAttribute('title');
       return;
     }
     var label = labelRef.current;
@@ -86,6 +95,7 @@ layoutKey) {
     var applyFit = function applyFit(text, accurate) {
       titleEl.textContent = text;
       if (accurate) titleEl.setAttribute(TITLE_FITTED_ATTR, '');else titleEl.removeAttribute(TITLE_FITTED_ATTR);
+      if (accurate && text !== title) titleEl.setAttribute('title', title);else titleEl.removeAttribute('title');
     };
 
     /**
@@ -98,11 +108,20 @@ layoutKey) {
     var trailingWidth = 0;
     var typeWidth = 0;
     var readStatics = function readStatics() {
-      var _trailingRef$current$, _trailingRef$current, _typeIconRef$current$, _typeIconRef$current;
+      var _trailing$getBounding, _typeIconRef$current$, _typeIconRef$current;
       var cs = getComputedStyle(label);
       gap = Number.parseFloat(cs.columnGap || cs.gap) || 0;
-      trailingWidth = (_trailingRef$current$ = (_trailingRef$current = trailingRef.current) === null || _trailingRef$current === void 0 ? void 0 : _trailingRef$current.getBoundingClientRect().width) !== null && _trailingRef$current$ !== void 0 ? _trailingRef$current$ : 0;
+      var trailing = trailingRef.current;
+      trailingWidth = (_trailing$getBounding = trailing === null || trailing === void 0 ? void 0 : trailing.getBoundingClientRect().width) !== null && _trailing$getBounding !== void 0 ? _trailing$getBounding : 0;
       typeWidth = (_typeIconRef$current$ = (_typeIconRef$current = typeIconRef.current) === null || _typeIconRef$current === void 0 ? void 0 : _typeIconRef$current.getBoundingClientRect().width) !== null && _typeIconRef$current$ !== void 0 ? _typeIconRef$current$ : 0;
+      var timeEl = trailing === null || trailing === void 0 ? void 0 : trailing.querySelector('[data-odn-chat-item-time]');
+      if (trailing instanceof HTMLElement && timeEl instanceof HTMLElement) {
+        var timeW = timeEl.getBoundingClientRect().width;
+        // 选中让位时时间为 0，保留上次正值，避免 hover 位移用错
+        if (timeW > 0) {
+          trailing.style.setProperty('--odn-chat-item-time-w', "".concat(timeW, "px"));
+        }
+      }
     };
 
     /**
@@ -174,7 +193,7 @@ layoutKey) {
       cancelled = true;
       stopObserving();
     };
-  }, [title, enabled, layoutKey, labelRef, titleRef, trailingRef, typeIconRef]);
+  }, [title, enabled, layoutKey, skipDomWrite, labelRef, titleRef, trailingRef, typeIconRef]);
 }
 function ChatItemStatus(_ref) {
   var status = _ref.status;
@@ -219,6 +238,29 @@ function ChatItemStatus(_ref) {
     "data-odn-chat-item-status-unread-dot": true
   }));
 }
+var MOVE_VALUE_PREFIX = 'move-to:';
+
+/** 将 query 在 text 中的匹配段用 mark 包起来（主题色由样式控制）。 */
+function highlightMatch(text, query) {
+  var q = query === null || query === void 0 ? void 0 : query.trim();
+  if (!q) return text;
+  var escaped = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  var re = new RegExp("(".concat(escaped, ")"), 'gi');
+  var parts = text.split(re);
+  if (parts.length === 1) return text;
+  return parts.map(function (part, i) {
+    if (!part) return null;
+    if (part.toLowerCase() === q.toLowerCase()) {
+      return /*#__PURE__*/React.createElement("mark", {
+        key: i,
+        "data-odn-chat-item-title-mark": true
+      }, part);
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      key: i
+    }, part);
+  });
+}
 function useControllableState(controlled, defaultValue, onChange) {
   var _useState = useState(defaultValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -251,9 +293,13 @@ function ChatItemInner(_ref2) {
     _ref2$pinned = _ref2.pinned,
     pinned = _ref2$pinned === void 0 ? false : _ref2$pinned,
     time = _ref2.time,
+    groupId = _ref2.groupId,
+    groupOptions = _ref2.groupOptions,
+    highlightQuery = _ref2.highlightQuery,
     _onClick = _ref2.onClick,
     onRename = _ref2.onRename,
     onPin = _ref2.onPin,
+    onMoveToGroup = _ref2.onMoveToGroup,
     onDelete = _ref2.onDelete,
     actionMenuZIndex = _ref2.actionMenuZIndex,
     renamingProp = _ref2.renaming,
@@ -306,7 +352,7 @@ function ChatItemInner(_ref2) {
   var fitTitle = showTypeIcon || showTrailing;
   useFittedTitle(title, fitTitle, labelRef, titleRef, trailingRef, typeIconRef, // trailing / 字重的全部变化来源。这些都会改标题可用宽度而行宽不变，
   // 提前声明即可，无需为此额外监听 label / trailing / typeIcon 的尺寸。
-  "".concat(active ? 1 : 0, ":").concat(menuOpen ? 1 : 0, ":").concat(timeLabel, ":").concat(status !== null && status !== void 0 ? status : '', ":").concat(showTypeIcon ? 1 : 0));
+  "".concat(active ? 1 : 0, ":").concat(menuOpen ? 1 : 0, ":").concat(timeLabel, ":").concat(status !== null && status !== void 0 ? status : '', ":").concat(showTypeIcon ? 1 : 0), Boolean(highlightQuery === null || highlightQuery === void 0 ? void 0 : highlightQuery.trim()));
   useEffect(function () {
     if (!renaming) setDraft(title);
   }, [title, renaming]);
@@ -343,6 +389,10 @@ function ChatItemInner(_ref2) {
     setDraft(title);
     setRenaming(false);
   };
+  var moveTargets = (groupOptions !== null && groupOptions !== void 0 ? groupOptions : []).filter(function (g) {
+    return g.id !== groupId;
+  });
+  var canMove = Boolean(onMoveToGroup) && moveTargets.length > 0;
   var actionMenu = useMemo(function () {
     return [].concat(_toConsumableArray(onRename ? [{
       value: 'rename',
@@ -352,16 +402,27 @@ function ChatItemInner(_ref2) {
       value: 'pin',
       label: pinned ? '取消置顶' : '置顶',
       icon: 'arrow-up-to-line'
+    }] : []), _toConsumableArray(canMove ? [{
+      value: 'move',
+      label: '移动到',
+      icon: 'folder-input',
+      children: moveTargets.map(function (g) {
+        return {
+          value: "".concat(MOVE_VALUE_PREFIX).concat(g.id),
+          label: g.title
+        };
+      })
     }] : []), _toConsumableArray(onDelete ? [{
       value: 'delete',
       label: '删除',
       icon: 'trash-2'
     }] : []));
-  }, [onRename, onPin, onDelete, pinned]);
+  }, [onRename, onPin, onDelete, pinned, canMove, moveTargets]);
   return /*#__PURE__*/React.createElement(HoverFill, {
     "data-odn-chat-item": true,
     "data-odn-chat-item-id": id,
     "data-odn-chat-item-pinned": pinned || undefined,
+    "data-odn-chat-item-time-yield": active || menuOpen || undefined,
     bgClassName: "odn-chat-item-btn-bg",
     disabled: active || renaming
   }, /*#__PURE__*/React.createElement("div", {
@@ -402,9 +463,8 @@ function ChatItemInner(_ref2) {
   }, /*#__PURE__*/React.createElement("span", {
     ref: titleRef,
     "data-odn-chat-item-title": true,
-    "data-odn-chat-item-title-bold": active ? '' : undefined,
-    title: title
-  }, title), showTypeIcon ? /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-item-title-bold": active ? '' : undefined
+  }, highlightQuery ? highlightMatch(title, highlightQuery) : title), showTypeIcon ? /*#__PURE__*/React.createElement("span", {
     ref: typeIconRef,
     "data-odn-chat-item-type-icon": true,
     "aria-label": "\u4EBA\u5DE5\u5BA2\u670D\u4F1A\u8BDD",
@@ -424,7 +484,7 @@ function ChatItemInner(_ref2) {
     trigger: "click",
     placement: "bottomRight",
     zIndex: actionMenuZIndex,
-    popupClassName: "odn-chat-item-action-menu",
+    popupClassName: "odn-dropdown-compact odn-chat-item-action-menu",
     visible: menuOpen,
     onVisibleChange: setMenuOpen,
     menu: actionMenu,
@@ -440,6 +500,14 @@ function ChatItemInner(_ref2) {
         setMenuOpen(false);
         return;
       }
+      if (value.startsWith(MOVE_VALUE_PREFIX)) {
+        var targetGroupId = value.slice(MOVE_VALUE_PREFIX.length);
+        if (targetGroupId && targetGroupId !== groupId) {
+          onMoveToGroup === null || onMoveToGroup === void 0 || onMoveToGroup(id, targetGroupId);
+        }
+        setMenuOpen(false);
+        return;
+      }
       if (value === 'delete') {
         setDeleteOpen(true);
         setMenuOpen(false);