one-design-next 0.0.97 → 0.0.98

package/dist/chat-list/index.js

@@ -1,11 +1,53 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import clsx from 'clsx';
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import ChatGroup, { CHAT_GROUP_PREVIEW_LIMIT } from "../chat-group";
+import { PresenceSlots } from "../chat-group/presence-list";
 import ChatItem from "../chat-item";
+import Dialog from "../dialog";
 import Dropdown from "../dropdown";
+import HoverFill from "../hover-fill";
 import Icon from "../icon";
 import "./style";
 
+/** 系统「未分组」默认 id；不在「分组」模块内渲染。 */
+export var CHAT_LIST_UNGROUPED_ID = 'ungrouped';
+var CHAT_ITEM_ROW_FALLBACK = 40;
+var UNGROUPED_EXPAND_SCROLL_MS = 320;
+function findScrollParent(el) {
+  var node = el;
+  while (node) {
+    var _getComputedStyle = getComputedStyle(node),
+      overflowY = _getComputedStyle.overflowY;
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return el;
+}
+function chatItemRowStep(root) {
+  var item = root.querySelector('[data-odn-chat-item]');
+  var height = item instanceof HTMLElement ? item.getBoundingClientRect().height : 0;
+  return height > 0 ? height + 2 : CHAT_ITEM_ROW_FALLBACK;
+}
+function scrollUpByChatItems(scroller, count) {
+  var delta = chatItemRowStep(scroller) * count;
+  var max = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  var top = Math.min(scroller.scrollTop + delta, max);
+  if (typeof scroller.scrollTo === 'function') {
+    scroller.scrollTo({
+      top: top,
+      behavior: 'smooth'
+    });
+    return;
+  }
+  scroller.scrollTop = top;
+}
+
 /** 按会话时间筛选（面板不含时间组；`filterTime` 仅受控 API）。 */
 
 /** 按会话类型筛选：全部 / AI 任务 / 人工客服。 */
@@ -88,6 +130,9 @@ function useControllable(controlled, defaultValue, onChange) {
 function defaultRenderItem(item, node) {
   return node;
 }
+function createGroupId() {
+  return "group-".concat(Date.now().toString(36), "-").concat(Math.random().toString(36).slice(2, 6));
+}
 function filterOptionLabel(label, selected) {
   return /*#__PURE__*/React.createElement("span", {
     "data-odn-chat-list-filter-option": true
@@ -126,40 +171,87 @@ function buildFilterMenu(filterType, filterStatus) {
     })
   }];
 }
-export function ChatList(_ref) {
-  var items = _ref.items,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? '对话' : _ref$title,
-    _ref$pinnedSectionTit = _ref.pinnedSectionTitle,
-    pinnedSectionTitle = _ref$pinnedSectionTit === void 0 ? '置顶' : _ref$pinnedSectionTit,
-    _ref$recentSectionTit = _ref.recentSectionTitle,
-    recentSectionTitle = _ref$recentSectionTit === void 0 ? '最近' : _ref$recentSectionTit,
-    filterTimeProp = _ref.filterTime,
-    _ref$defaultFilterTim = _ref.defaultFilterTime,
-    defaultFilterTime = _ref$defaultFilterTim === void 0 ? 'all' : _ref$defaultFilterTim,
-    filterTypeProp = _ref.filterType,
-    _ref$defaultFilterTyp = _ref.defaultFilterType,
-    defaultFilterType = _ref$defaultFilterTyp === void 0 ? 'all' : _ref$defaultFilterTyp,
-    onFilterTypeChange = _ref.onFilterTypeChange,
-    filterStatusProp = _ref.filterStatus,
-    _ref$defaultFilterSta = _ref.defaultFilterStatus,
-    defaultFilterStatus = _ref$defaultFilterSta === void 0 ? 'all' : _ref$defaultFilterSta,
-    onFilterStatusChange = _ref.onFilterStatusChange,
-    filterOpenProp = _ref.filterOpen,
-    _ref$defaultFilterOpe = _ref.defaultFilterOpen,
-    defaultFilterOpen = _ref$defaultFilterOpe === void 0 ? false : _ref$defaultFilterOpe,
-    onFilterOpenChange = _ref.onFilterOpenChange,
-    empty = _ref.empty,
-    actionMenuZIndex = _ref.actionMenuZIndex,
-    filterMenuZIndex = _ref.filterMenuZIndex,
-    className = _ref.className,
-    onItemClick = _ref.onItemClick,
-    onRename = _ref.onRename,
-    onPin = _ref.onPin,
-    onDelete = _ref.onDelete,
-    _ref$renderItem = _ref.renderItem,
-    renderItem = _ref$renderItem === void 0 ? defaultRenderItem : _ref$renderItem,
-    renderRestScroll = _ref.renderRestScroll;
+function IconActionButton(_ref) {
+  var label = _ref.label,
+    _onClick = _ref.onClick,
+    children = _ref.children,
+    attr = _ref.attr;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    "data-odn-chat-list-icon-btn": true
+  }, attr ? _defineProperty({}, attr, '') : {}, {
+    "aria-label": label,
+    title: label,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      _onClick === null || _onClick === void 0 || _onClick(e);
+    }
+  }), children);
+}
+export function ChatList(_ref3) {
+  var items = _ref3.items,
+    _ref3$title = _ref3.title,
+    title = _ref3$title === void 0 ? '对话' : _ref3$title,
+    groups = _ref3.groups,
+    pinnedSectionTitle = _ref3.pinnedSectionTitle,
+    _ref3$recentSectionTi = _ref3.recentSectionTitle,
+    recentSectionTitle = _ref3$recentSectionTi === void 0 ? '最近' : _ref3$recentSectionTi,
+    _ref3$groupsSectionTi = _ref3.groupsSectionTitle,
+    groupsSectionTitle = _ref3$groupsSectionTi === void 0 ? '分组' : _ref3$groupsSectionTi,
+    _ref3$ungroupedTitle = _ref3.ungroupedTitle,
+    ungroupedTitle = _ref3$ungroupedTitle === void 0 ? '未分组' : _ref3$ungroupedTitle,
+    _ref3$ungroupedGroupI = _ref3.ungroupedGroupId,
+    ungroupedGroupId = _ref3$ungroupedGroupI === void 0 ? CHAT_LIST_UNGROUPED_ID : _ref3$ungroupedGroupI,
+    filterTimeProp = _ref3.filterTime,
+    _ref3$defaultFilterTi = _ref3.defaultFilterTime,
+    defaultFilterTime = _ref3$defaultFilterTi === void 0 ? 'all' : _ref3$defaultFilterTi,
+    filterTypeProp = _ref3.filterType,
+    _ref3$defaultFilterTy = _ref3.defaultFilterType,
+    defaultFilterType = _ref3$defaultFilterTy === void 0 ? 'all' : _ref3$defaultFilterTy,
+    onFilterTypeChange = _ref3.onFilterTypeChange,
+    filterStatusProp = _ref3.filterStatus,
+    _ref3$defaultFilterSt = _ref3.defaultFilterStatus,
+    defaultFilterStatus = _ref3$defaultFilterSt === void 0 ? 'all' : _ref3$defaultFilterSt,
+    onFilterStatusChange = _ref3.onFilterStatusChange,
+    searchProp = _ref3.search,
+    _ref3$defaultSearch = _ref3.defaultSearch,
+    defaultSearch = _ref3$defaultSearch === void 0 ? '' : _ref3$defaultSearch,
+    onSearchChange = _ref3.onSearchChange,
+    _ref3$showSearch = _ref3.showSearch,
+    showSearch = _ref3$showSearch === void 0 ? false : _ref3$showSearch,
+    filterOpenProp = _ref3.filterOpen,
+    _ref3$defaultFilterOp = _ref3.defaultFilterOpen,
+    defaultFilterOpen = _ref3$defaultFilterOp === void 0 ? false : _ref3$defaultFilterOp,
+    onFilterOpenChange = _ref3.onFilterOpenChange,
+    _ref3$showEmptyGroups = _ref3.showEmptyGroups,
+    showEmptyGroups = _ref3$showEmptyGroups === void 0 ? true : _ref3$showEmptyGroups,
+    empty = _ref3.empty,
+    actionMenuZIndex = _ref3.actionMenuZIndex,
+    filterMenuZIndex = _ref3.filterMenuZIndex,
+    className = _ref3.className,
+    onItemClick = _ref3.onItemClick,
+    onRename = _ref3.onRename,
+    onPin = _ref3.onPin,
+    onMoveToGroup = _ref3.onMoveToGroup,
+    onDelete = _ref3.onDelete,
+    onAddGroup = _ref3.onAddGroup,
+    onRenameGroup = _ref3.onRenameGroup,
+    onPinGroup = _ref3.onPinGroup,
+    onDeleteGroup = _ref3.onDeleteGroup,
+    onCreateConversation = _ref3.onCreateConversation,
+    _ref3$renderItem = _ref3.renderItem,
+    renderItem = _ref3$renderItem === void 0 ? defaultRenderItem : _ref3$renderItem,
+    renderGroupHeader = _ref3.renderGroupHeader,
+    collapsedProp = _ref3.collapsedGroupIds,
+    _ref3$defaultCollapse = _ref3.defaultCollapsedGroupIds,
+    defaultCollapsedGroupIds = _ref3$defaultCollapse === void 0 ? [] : _ref3$defaultCollapse,
+    onCollapsedGroupIdsChange = _ref3.onCollapsedGroupIdsChange,
+    renderRestScroll = _ref3.renderRestScroll;
+  var grouped = Array.isArray(groups);
+  var resolvedPinnedTitle = pinnedSectionTitle !== undefined ? pinnedSectionTitle : grouped ? null : '置顶';
   var filterTime = filterTimeProp !== null && filterTimeProp !== void 0 ? filterTimeProp : defaultFilterTime;
   var _useControllable = useControllable(filterTypeProp, defaultFilterType, onFilterTypeChange),
     _useControllable2 = _slicedToArray(_useControllable, 2),
@@ -173,11 +265,116 @@ export function ChatList(_ref) {
     _useControllable6 = _slicedToArray(_useControllable5, 2),
     filterOpen = _useControllable6[0],
     setFilterOpen = _useControllable6[1];
+  var _useControllable7 = useControllable(searchProp, defaultSearch, onSearchChange),
+    _useControllable8 = _slicedToArray(_useControllable7, 2),
+    search = _useControllable8[0],
+    setSearch = _useControllable8[1];
+  var _useState3 = useState(Boolean(defaultSearch)),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchOpen = _useState4[0],
+    setSearchOpen = _useState4[1];
+  var _useControllable9 = useControllable(collapsedProp, defaultCollapsedGroupIds, onCollapsedGroupIdsChange),
+    _useControllable10 = _slicedToArray(_useControllable9, 2),
+    collapsedIds = _useControllable10[0],
+    setCollapsedIds = _useControllable10[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    renamingGroupId = _useState6[0],
+    setRenamingGroupId = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    groupMenuOpenId = _useState8[0],
+    setGroupMenuOpenId = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    deletingGroup = _useState10[0],
+    setDeletingGroup = _useState10[1];
+  var searchInputRef = useRef(null);
+  var listBodyRef = useRef(null);
+  var revealUngroupedRef = useRef(false);
+  var _useState11 = useState({
+      top: false,
+      bottom: false
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    edgeFade = _useState12[0],
+    setEdgeFade = _useState12[1];
+  var updateEdgeFade = useCallback(function () {
+    var el = listBodyRef.current;
+    if (!el) {
+      setEdgeFade(function (prev) {
+        return prev.top || prev.bottom ? {
+          top: false,
+          bottom: false
+        } : prev;
+      });
+      return;
+    }
+    var top = el.scrollTop > 1;
+    var bottom = el.scrollHeight - el.scrollTop - el.clientHeight > 1;
+    setEdgeFade(function (prev) {
+      return prev.top === top && prev.bottom === bottom ? prev : {
+        top: top,
+        bottom: bottom
+      };
+    });
+  }, []);
+  useEffect(function () {
+    if (searchOpen) {
+      var _searchInputRef$curre, _searchInputRef$curre2;
+      (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 || _searchInputRef$curre.focus();
+      (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 || _searchInputRef$curre2.select();
+    }
+  }, [searchOpen]);
+  useLayoutEffect(function () {
+    if (!revealUngroupedRef.current) {
+      return;
+    }
+    var scroller = findScrollParent(listBodyRef.current);
+    if (!scroller) {
+      revealUngroupedRef.current = false;
+      return;
+    }
+    var collapse = scroller.querySelector('[data-odn-chat-group-section] [data-odn-chat-group-collapse]');
+    var finished = false;
+    var timer = 0;
+    var onEnd;
+    var finish = function finish() {
+      if (finished) {
+        return;
+      }
+      finished = true;
+      revealUngroupedRef.current = false;
+      if (onEnd) {
+        collapse === null || collapse === void 0 || collapse.removeEventListener('transitionend', onEnd);
+      }
+      window.clearTimeout(timer);
+      scrollUpByChatItems(scroller, CHAT_GROUP_PREVIEW_LIMIT);
+    };
+    onEnd = function onEnd(event) {
+      if (event instanceof TransitionEvent && event.propertyName && event.propertyName !== 'grid-template-rows') {
+        return;
+      }
+      finish();
+    };
+    collapse === null || collapse === void 0 || collapse.addEventListener('transitionend', onEnd);
+    timer = window.setTimeout(finish, UNGROUPED_EXPAND_SCROLL_MS);
+    return function () {
+      collapse === null || collapse === void 0 || collapse.removeEventListener('transitionend', onEnd);
+      window.clearTimeout(timer);
+    };
+  }, [collapsedIds]);
+  var highlightQuery = grouped && (showSearch || searchProp !== undefined) ? search.trim() : '';
   var filteredItems = useMemo(function () {
+    var q = highlightQuery.toLowerCase();
     return items.filter(function (item) {
-      return matchChatListFilterTime(item.time, filterTime) && matchChatListFilterType(item.type, filterType) && matchChatListFilterStatus(item.status, filterStatus);
+      if (!matchChatListFilterTime(item.time, filterTime) || !matchChatListFilterType(item.type, filterType) || !matchChatListFilterStatus(item.status, filterStatus)) {
+        return false;
+      }
+      if (!q) return true;
+      return item.title.toLowerCase().includes(q);
     });
-  }, [items, filterTime, filterType, filterStatus]);
+  }, [items, filterTime, filterType, filterStatus, highlightQuery]);
   var pinnedItems = useMemo(function () {
     return filteredItems.filter(function (item) {
       return item.pinned;
@@ -188,10 +385,65 @@ export function ChatList(_ref) {
       return !item.pinned;
     });
   }, [filteredItems]);
+  var _useMemo = useMemo(function () {
+      var _system$title;
+      var list = groups !== null && groups !== void 0 ? groups : [];
+      var system = list.find(function (g) {
+        return g.id === ungroupedGroupId;
+      });
+      var custom = list.filter(function (g) {
+        return g.id !== ungroupedGroupId;
+      });
+      var pinned = custom.filter(function (g) {
+        return g.pinned;
+      });
+      var rest = custom.filter(function (g) {
+        return !g.pinned;
+      });
+      return {
+        customGroups: [].concat(_toConsumableArray(pinned), _toConsumableArray(rest)),
+        resolvedUngroupedTitle: (_system$title = system === null || system === void 0 ? void 0 : system.title) !== null && _system$title !== void 0 ? _system$title : ungroupedTitle
+      };
+    }, [groups, ungroupedGroupId, ungroupedTitle]),
+    customGroups = _useMemo.customGroups,
+    resolvedUngroupedTitle = _useMemo.resolvedUngroupedTitle;
+  var groupOptions = useMemo(function () {
+    return [].concat(_toConsumableArray(customGroups.map(function (g) {
+      return {
+        id: g.id,
+        title: g.title
+      };
+    })), [{
+      id: ungroupedGroupId,
+      title: resolvedUngroupedTitle
+    }]);
+  }, [customGroups, ungroupedGroupId, resolvedUngroupedTitle]);
+  var isSearching = Boolean(highlightQuery);
+  var customSections = useMemo(function () {
+    return customGroups.map(function (group) {
+      return {
+        group: group,
+        items: filteredItems.filter(function (item) {
+          var _item$groupId;
+          return !item.pinned && ((_item$groupId = item.groupId) !== null && _item$groupId !== void 0 ? _item$groupId : '') === group.id;
+        })
+      };
+    }).filter(function (section) {
+      return isSearching ? section.items.length > 0 : showEmptyGroups || section.items.length > 0;
+    });
+  }, [customGroups, filteredItems, showEmptyGroups, isSearching]);
+  var ungroupedItems = useMemo(function () {
+    return filteredItems.filter(function (item) {
+      var _item$groupId2;
+      return !item.pinned && ((_item$groupId2 = item.groupId) !== null && _item$groupId2 !== void 0 ? _item$groupId2 : ungroupedGroupId) === ungroupedGroupId;
+    });
+  }, [filteredItems, ungroupedGroupId]);
+  var showUngrouped = grouped ? isSearching ? ungroupedItems.length > 0 : showEmptyGroups || ungroupedItems.length > 0 : false;
   var filterMenu = useMemo(function () {
     return buildFilterMenu(filterType, filterStatus);
   }, [filterType, filterStatus]);
   var renderChatItem = function renderChatItem(item) {
+    var _item$groupId3;
     var node = /*#__PURE__*/React.createElement(ChatItem, {
       key: item.id,
       id: item.id,
@@ -201,45 +453,117 @@ export function ChatList(_ref) {
       status: item.status,
       pinned: item.pinned,
       time: item.time,
+      groupId: grouped ? (_item$groupId3 = item.groupId) !== null && _item$groupId3 !== void 0 ? _item$groupId3 : ungroupedGroupId : item.groupId,
+      groupOptions: grouped ? groupOptions : undefined,
+      highlightQuery: highlightQuery || undefined,
       actionMenuZIndex: actionMenuZIndex,
       onClick: onItemClick,
       onRename: onRename,
       onPin: onPin,
+      onMoveToGroup: grouped ? onMoveToGroup : undefined,
       onDelete: onDelete
     });
-    return /*#__PURE__*/React.createElement("div", {
-      key: item.id
-    }, renderItem(item, node));
+    return renderItem(item, node);
   };
-  var hasContent = pinnedItems.length > 0 || restItems.length > 0;
-  var pinnedSection = pinnedItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-pinned": true
-  }, pinnedSectionTitle !== null && pinnedSectionTitle !== undefined ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-pinned-title": true
-  }, pinnedSectionTitle) : null, /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-pinned-body": true
-  }, pinnedItems.map(renderChatItem))) : null;
-  var restSection = restItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-rest": true
-  }, pinnedItems.length > 0 && recentSectionTitle !== null && recentSectionTitle !== undefined ? /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-recent-title": true
-  }, recentSectionTitle) : null, /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-rest-body": true
-  }, restItems.map(renderChatItem))) : null;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list": true,
-    className: clsx(className)
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-toolbar": true
-  }, /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-title": true
-  }, title), /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-toolbar-actions": true
-  }, /*#__PURE__*/React.createElement(Dropdown, {
+  var closeSearch = function closeSearch() {
+    setSearch('');
+    setSearchOpen(false);
+  };
+  var handleAddGroup = function handleAddGroup() {
+    if (!onAddGroup) return;
+    var group = {
+      id: createGroupId(),
+      title: '新分组'
+    };
+    onAddGroup(group);
+    setRenamingGroupId(group.id);
+    setCollapsedIds(collapsedIds.filter(function (id) {
+      return id !== group.id;
+    }));
+  };
+  var renderGroupActions = function renderGroupActions(group, options) {
+    var _options$showMenu = options.showMenu,
+      showMenu = _options$showMenu === void 0 ? false : _options$showMenu,
+      _options$showAddConve = options.showAddConversation,
+      showAddConversation = _options$showAddConve === void 0 ? false : _options$showAddConve;
+    if (!showMenu && !showAddConversation) return null;
+    var menuOpen = groupMenuOpenId === group.id;
+    var renamable = group.renamable !== false;
+    var menu = showMenu ? [].concat(_toConsumableArray(renamable && onRenameGroup ? [{
+      value: 'rename',
+      label: '修改分组名称',
+      icon: 'pencil-line'
+    }] : []), _toConsumableArray(onPinGroup ? [{
+      value: 'pin',
+      label: group.pinned ? '取消置顶分组' : '置顶分组',
+      icon: 'arrow-up-to-line'
+    }] : []), _toConsumableArray(onDeleteGroup ? [{
+      value: 'delete',
+      label: '删除分组',
+      icon: 'trash-2'
+    }] : [])) : [];
+    return /*#__PURE__*/React.createElement(React.Fragment, null, menu.length > 0 ? /*#__PURE__*/React.createElement(HoverFill, {
+      bgClassName: "odn-chat-list-icon-btn-bg"
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      trigger: "click",
+      placement: "bottomRight",
+      zIndex: actionMenuZIndex,
+      popupClassName: "odn-dropdown-compact odn-chat-item-action-menu",
+      visible: menuOpen,
+      onVisibleChange: function onVisibleChange(open) {
+        setGroupMenuOpenId(open ? group.id : null);
+      },
+      menu: menu,
+      onSelect: function onSelect(value) {
+        if (value === 'rename') {
+          setRenamingGroupId(group.id);
+          setGroupMenuOpenId(null);
+          return;
+        }
+        if (value === 'pin') {
+          onPinGroup === null || onPinGroup === void 0 || onPinGroup(group.id, !group.pinned);
+          setGroupMenuOpenId(null);
+          return;
+        }
+        if (value === 'delete') {
+          setDeletingGroup(group);
+          setGroupMenuOpenId(null);
+        }
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "data-odn-chat-list-icon-btn": true,
+      "data-odn-chat-list-group-menu": true,
+      "data-odn-chat-list-group-menu-open": menuOpen || undefined,
+      "aria-label": "\u5206\u7EC4\u64CD\u4F5C",
+      title: "\u5206\u7EC4\u64CD\u4F5C",
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ellipsis",
+      size: 14
+    })))) : null, showAddConversation && onCreateConversation ? /*#__PURE__*/React.createElement(HoverFill, {
+      bgClassName: "odn-chat-list-icon-btn-bg"
+    }, /*#__PURE__*/React.createElement(IconActionButton, {
+      label: "\u65B0\u5EFA\u5BF9\u8BDD",
+      attr: "data-odn-chat-list-group-add-chat",
+      onClick: function onClick() {
+        return onCreateConversation(group.id);
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "plus",
+      size: 14
+    }))) : null);
+  };
+  var filterTrigger = /*#__PURE__*/React.createElement(Dropdown, {
     trigger: "click",
     placement: "bottomRight",
     zIndex: filterMenuZIndex,
-    popupClassName: "odn-chat-list-filter-menu",
+    popupClassName: "odn-dropdown-compact odn-chat-list-filter-menu",
     visible: filterOpen,
     onVisibleChange: setFilterOpen,
     menu: filterMenu,
@@ -260,15 +584,224 @@ export function ChatList(_ref) {
     "aria-label": "\u7B5B\u9009",
     title: "\u7B5B\u9009",
     "aria-expanded": filterOpen || undefined,
-    "aria-pressed": filterOpen || undefined
+    "aria-pressed": filterOpen || undefined,
+    tabIndex: grouped && showSearch && searchOpen ? -1 : 0
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "list-filter",
     size: 16
-  }))))), !hasContent ? /*#__PURE__*/React.createElement("div", {
+  })));
+  var hasLeanContent = pinnedItems.length > 0 || restItems.length > 0;
+  var hasGroupedContent = pinnedItems.length > 0 || customSections.length > 0 || showUngrouped && ungroupedItems.length > 0 || !isSearching && (customGroups.length > 0 || showEmptyGroups);
+  var showGroupsModule = !isSearching || customSections.length > 0;
+  var renderListScroll = function renderListScroll(children) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-odn-chat-list-scroll": true
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: listBodyRef,
+      "data-odn-chat-list-body": true,
+      "data-odn-hover-fill-share": grouped || undefined,
+      onScroll: updateEdgeFade
+    }, children), /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      "data-odn-chat-list-fade": "top",
+      "data-hidden": edgeFade.top ? undefined : ''
+    }), /*#__PURE__*/React.createElement("div", {
+      "aria-hidden": true,
+      "data-odn-chat-list-fade": "bottom",
+      "data-hidden": edgeFade.bottom ? undefined : ''
+    }));
+  };
+  useEffect(function () {
+    var el = listBodyRef.current;
+    if (!el) {
+      return;
+    }
+    updateEdgeFade();
+    var ro = new ResizeObserver(updateEdgeFade);
+    ro.observe(el);
+    if (el.firstElementChild) {
+      ro.observe(el.firstElementChild);
+    }
+    return function () {
+      return ro.disconnect();
+    };
+  }, [updateEdgeFade, grouped, hasGroupedContent, hasLeanContent]);
+  var pinnedSection = /*#__PURE__*/React.createElement(PresenceSlots, {
+    host: function host(content, occupied) {
+      return occupied ? /*#__PURE__*/React.createElement("div", {
+        "data-odn-chat-list-pinned": true
+      }, resolvedPinnedTitle !== null && resolvedPinnedTitle !== undefined ? /*#__PURE__*/React.createElement("div", {
+        "data-odn-chat-list-pinned-title": true
+      }, resolvedPinnedTitle) : null, /*#__PURE__*/React.createElement("div", {
+        "data-odn-chat-list-pinned-body": true
+      }, content)) : null;
+    }
+  }, pinnedItems.map(renderChatItem));
+  var restSection = /*#__PURE__*/React.createElement(PresenceSlots, {
+    host: function host(content, occupied) {
+      return occupied ? /*#__PURE__*/React.createElement("div", {
+        "data-odn-chat-list-rest": true
+      }, pinnedItems.length > 0 && recentSectionTitle !== null && recentSectionTitle !== undefined ? /*#__PURE__*/React.createElement("div", {
+        "data-odn-chat-list-recent-title": true
+      }, recentSectionTitle) : null, /*#__PURE__*/React.createElement("div", {
+        "data-odn-chat-list-rest-body": true
+      }, content)) : null;
+    }
+  }, restItems.map(renderChatItem));
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list": true,
+    "data-odn-chat-list-grouped": grouped || undefined,
+    className: clsx(className)
+  }, grouped && showSearch ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-toolbar": true,
+    "data-odn-chat-list-search-open": searchOpen || undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-toolbar-idle": true,
+    "aria-hidden": searchOpen || undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-title": true
+  }, title), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-toolbar-actions": true
+  }, filterTrigger)), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-search-field": true
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-chat-list-search-trigger": true,
+    "aria-label": "\u641C\u7D22",
+    "aria-expanded": searchOpen,
+    onMouseDown: function onMouseDown(e) {
+      e.currentTarget.blur();
+      if (!searchOpen) {
+        e.preventDefault();
+        setSearchOpen(true);
+      }
+    },
+    onClick: function onClick() {
+      var _searchInputRef$curre3;
+      if (searchOpen) (_searchInputRef$curre3 = searchInputRef.current) === null || _searchInputRef$curre3 === void 0 || _searchInputRef$curre3.focus();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "search",
+    size: 16
+  })), /*#__PURE__*/React.createElement("input", {
+    ref: searchInputRef,
+    "data-odn-chat-list-search-input": true,
+    value: search,
+    placeholder: "\u641C\u7D22",
+    tabIndex: searchOpen ? 0 : -1,
+    onChange: function onChange(e) {
+      return setSearch(e.target.value);
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        closeSearch();
+      }
+    }
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    "data-odn-chat-list-search-close": true,
+    "aria-label": "\u9000\u51FA\u641C\u7D22",
+    title: "\u9000\u51FA\u641C\u7D22",
+    tabIndex: searchOpen ? 0 : -1,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    onClick: closeSearch
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "cancel",
+    size: 14
+  })))) : /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-toolbar": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-title": true
+  }, title), /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-toolbar-actions": true
+  }, filterTrigger)), grouped ? !hasGroupedContent ? /*#__PURE__*/React.createElement("div", {
     "data-odn-chat-list-empty": true
-  }, empty !== null && empty !== void 0 ? empty : null) : renderRestScroll ? /*#__PURE__*/React.createElement(React.Fragment, null, pinnedSection, restSection ? renderRestScroll(restSection) : null) : /*#__PURE__*/React.createElement("div", {
-    "data-odn-chat-list-body": true
-  }, pinnedSection, restSection));
+  }, empty !== null && empty !== void 0 ? empty : null) : renderListScroll( /*#__PURE__*/React.createElement(React.Fragment, null, pinnedSection, showGroupsModule ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-groups": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-section-header": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-chat-list-section-title": true
+  }, groupsSectionTitle), onAddGroup ? /*#__PURE__*/React.createElement(IconActionButton, {
+    label: "\u65B0\u5EFA\u5206\u7EC4",
+    attr: "data-odn-chat-list-add-group",
+    onClick: handleAddGroup
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "plus",
+    size: 14
+  })) : null), /*#__PURE__*/React.createElement(PresenceSlots, null, customSections.map(function (_ref4) {
+    var group = _ref4.group,
+      sectionItems = _ref4.items;
+    var collapsed = collapsedIds.includes(group.id);
+    var defaultTitle = group.title;
+    var groupTitle = renderGroupHeader ? renderGroupHeader(group, defaultTitle) : defaultTitle;
+    var renamable = group.renamable !== false && Boolean(onRenameGroup);
+    var menuOpen = groupMenuOpenId === group.id;
+    return /*#__PURE__*/React.createElement(ChatGroup, {
+      key: group.id,
+      folderIcon: true,
+      title: groupTitle,
+      collapsed: collapsed,
+      onCollapsedChange: function onCollapsedChange(next) {
+        setCollapsedIds(next ? Array.from(new Set([].concat(_toConsumableArray(collapsedIds), [group.id]))) : collapsedIds.filter(function (id) {
+          return id !== group.id;
+        }));
+      },
+      renaming: renamingGroupId === group.id,
+      onRenamingChange: function onRenamingChange(next) {
+        setRenamingGroupId(next ? group.id : null);
+      },
+      onRename: renamable ? function (nextTitle) {
+        return onRenameGroup === null || onRenameGroup === void 0 ? void 0 : onRenameGroup(group.id, nextTitle);
+      } : undefined,
+      extraVisible: menuOpen,
+      extra: renderGroupActions(group, {
+        showMenu: Boolean(onRenameGroup || onPinGroup || onDeleteGroup),
+        showAddConversation: Boolean(onCreateConversation)
+      }),
+      previewLimit: isSearching ? false : undefined
+    }, sectionItems.map(renderChatItem));
+  }))) : null, showUngrouped ? /*#__PURE__*/React.createElement(ChatGroup, {
+    title: resolvedUngroupedTitle,
+    section: true,
+    collapsed: collapsedIds.includes(ungroupedGroupId),
+    onCollapsedChange: function onCollapsedChange(next) {
+      revealUngroupedRef.current = !next;
+      setCollapsedIds(next ? Array.from(new Set([].concat(_toConsumableArray(collapsedIds), [ungroupedGroupId]))) : collapsedIds.filter(function (id) {
+        return id !== ungroupedGroupId;
+      }));
+    },
+    extra: renderGroupActions({
+      id: ungroupedGroupId,
+      title: resolvedUngroupedTitle,
+      renamable: false
+    }, {
+      showAddConversation: Boolean(onCreateConversation)
+    }),
+    previewLimit: false
+  }, ungroupedItems.map(renderChatItem)) : null)) : !hasLeanContent ? /*#__PURE__*/React.createElement("div", {
+    "data-odn-chat-list-empty": true
+  }, empty !== null && empty !== void 0 ? empty : null) : renderRestScroll ? /*#__PURE__*/React.createElement(React.Fragment, null, pinnedSection, restSection ? renderRestScroll(restSection) : null) : renderListScroll( /*#__PURE__*/React.createElement(React.Fragment, null, pinnedSection, restSection)), /*#__PURE__*/React.createElement(Dialog, {
+    visible: Boolean(deletingGroup),
+    onVisibleChange: function onVisibleChange(open) {
+      if (!open) setDeletingGroup(null);
+    },
+    contentTitle: "\u786E\u8BA4\u5220\u9664\u5206\u7EC4",
+    contentDesc: /*#__PURE__*/React.createElement(React.Fragment, null, "\u786E\u5B9A\u8981\u5220\u9664\u300C", deletingGroup === null || deletingGroup === void 0 ? void 0 : deletingGroup.title, "\u300D\u5417\uFF1F\u7EC4\u5185\u5BF9\u8BDD\u5C06\u79FB\u81F3\u300C", resolvedUngroupedTitle, "\u300D\uFF0C\u6B64\u64CD\u4F5C\u65E0\u6CD5\u64A4\u9500\u3002"),
+    intent: "danger",
+    confirmText: "\u5220\u9664",
+    cancelText: "\u53D6\u6D88",
+    onConfirm: function onConfirm() {
+      if (deletingGroup) onDeleteGroup === null || onDeleteGroup === void 0 || onDeleteGroup(deletingGroup.id);
+      setDeletingGroup(null);
+    },
+    onCancel: function onCancel() {
+      return setDeletingGroup(null);
+    }
+  }));
 }
 ChatList.displayName = 'ChatList';
 export default ChatList;