@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/ConversationList.jsx

@@ -0,0 +1,1264 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Avatar from './Avatar';
+import Button from './Button';
+import Icon from './Icon';
+import Tag from './Tag';
+import Tabs from './Tabs';
+import Tooltip from './Tooltip';
+import liSiruAvatar from './team-avatar-assets/li-siru.png';
+import chengchengAvatar from './team-avatar-assets/chengcheng-murphy.png';
+import guoZhezhiAvatar from './team-avatar-assets/guo-zhezhi.png';
+import liuDelinAvatar from './team-avatar-assets/liu-delin.png';
+import duanRanAvatar from './team-avatar-assets/duan-ran.png';
+
+const DEFAULT_TABS = [
+  { id: 'all', label: '全部' },
+  { id: 'pending', label: '待干预', count: 3 },
+  { id: 'managed', label: '托管中', count: 6 },
+  { id: 'other', label: '其它' },
+];
+
+const STATUS_TAG_BY_TAB = {
+  pending: { label: '待干预', variant: 'red' },
+  managed: { label: '托管中', variant: 'green' },
+};
+
+/* ── 默认展开宽度（与平台预览、TOKEN_MAP 一致）── */
+const DEFAULT_WIDTH = 400;
+const CARD_MIN_WIDTH = 333;
+const AVATAR_ONLY_WIDTH = 88;
+const AVATAR_ONLY_THRESHOLD = 150;
+const RESIZE_STEP = 16;
+const CARD_TWO_COLUMN_THRESHOLD = 580;
+const CARD_THREE_COLUMN_THRESHOLD = 950;
+
+const DEFAULT_SECTIONS = [
+  {
+    id: 'pending',
+    title: '待干预',
+    count: 3,
+    items: [
+      {
+        id: 'pending-1',
+        title: '酒旅·仲裁退款',
+        userName: '小兔叽掉毛毛🐰',
+        orderId: '2918575148379876',
+        time: '13:32',
+        avatarSrc: liSiruAvatar,
+        tags: [
+          { label: '异常监控提醒', variant: 'grey' },
+          { label: '待干预', variant: 'red' },
+        ],
+      },
+      {
+        id: 'pending-2',
+        title: '订单发货进度咨询',
+        userName: '糯叽叽的团子呀',
+        orderId: '2918575148391024',
+        time: '12:54',
+        avatarSrc: chengchengAvatar,
+        tags: [
+          { label: '催4', variant: 'grey' },
+          { label: '待干预', variant: 'red' },
+        ],
+      },
+      {
+        id: 'pending-3',
+        title: '优惠券核销失败',
+        userName: '草莓气泡水🍓',
+        orderId: '2918575148403288',
+        time: '12:40',
+        avatarSrc: guoZhezhiAvatar,
+        tags: [
+          { label: '退款执行错误', variant: 'grey' },
+          { label: '待干预', variant: 'red' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'managed',
+    title: '托管中',
+    count: 6,
+    items: [
+      {
+        id: 'managed-1',
+        title: '物流状态异常跟进',
+        userName: '软软想吃糖葫芦',
+        orderId: '2918575148472390',
+        time: '11:22',
+        avatarSrc: chengchengAvatar,
+        tags: [
+          { label: '24时30分', variant: 'grey', iconName: 'alarm-clock-stroked' },
+          { label: '托管中', variant: 'green' },
+        ],
+      },
+      {
+        id: 'managed-2',
+        title: '退款方案确认',
+        userName: '月亮送我一束光🌙',
+        orderId: '2918575148421185',
+        time: '10:18',
+        avatarSrc: liSiruAvatar,
+        tags: [
+          { label: '已挂起', variant: 'orange' },
+        ],
+      },
+      {
+        id: 'managed-3',
+        title: '售后凭证补充',
+        userName: '布丁小熊不吃苦',
+        orderId: '2918575148437702',
+        time: '09:46',
+        avatarSrc: liuDelinAvatar,
+        tags: [
+          { label: '协商不成功', variant: 'grey' },
+          { label: '托管中', variant: 'green' },
+        ],
+      },
+    ],
+  },
+  {
+    id: 'other',
+    title: '其它',
+    count: 20,
+    items: [
+      {
+        id: 'other-1',
+        title: '订单已完成回访',
+        userName: '星星被窝藏好啦✨',
+        orderId: '2918575148499712',
+        time: '昨天',
+        avatarSrc: duanRanAvatar,
+        tags: [
+          { label: '已处理', variant: 'blue' },
+        ],
+      },
+      {
+        id: 'other-2',
+        title: '门店服务评价',
+        userName: '困困阿喵要睡觉',
+        orderId: '2918575148502149',
+        time: '周二',
+        avatarSrc: guoZhezhiAvatar,
+        tags: [
+          { label: '已处理', variant: 'blue' },
+        ],
+      },
+    ],
+  },
+];
+
+const DEFAULT_CARD_DRAFT_TEXT = '祝您生活愉快~如果您觉得我的服务态度还可以的话，辛苦您点击左下角结束服务为本次服务点亮小星星哦~';
+const DEFAULT_CARD_DRAFT_TEXTS = [
+  '好的，我这边先帮您发起内部复核，稍后把需要您补充的内容整理给您。',
+  '我先继续核对系统记录，确认完当前进展后第一时间同步您。',
+  '理解您的着急，我会持续帮您盯进度，有新结果会尽快回复您。',
+  '这边已帮您补充登记处理诉求，后续若需配合我会及时联系您。',
+  '我先整理本次处理方案和注意事项，稍后给您一份更清晰的回复口径。',
+];
+const CARD_CONTENT_OVERRIDES = {
+  'pending-1': {
+    messages: [
+      { id: 'pending-1-user-1', role: 'user', text: '但是我不知道问题出在哪里' },
+      { id: 'pending-1-user-2', role: 'user', text: '你帮我看下这个有啥问题呢' },
+      { id: 'pending-1-agent-0', role: 'agent', text: '我先帮您看一下处罚记录和最近的申诉结果，您先别着急。' },
+      {
+        id: 'pending-1-agent-1',
+        role: 'agent',
+        text: '《抖音网络社区自律公约》：抖音app-我-右上角≡-设置-抖音规则中心，这是咱们抖音官方的一个规则呢',
+      },
+      { id: 'pending-1-user-3', role: 'user', text: '我之前已经申诉过一次了，但是没有通过。' },
+      { id: 'pending-1-agent-2', role: 'agent', text: '明白，我帮您再核对一下驳回原因，看看是不是材料或说明不完整。' },
+      { id: 'pending-1-user-4', role: 'user', text: '如果需要补充什么材料你直接告诉我，我这边可以配合。' },
+      { id: 'pending-1-agent-3', role: 'agent', text: '好的，我这边先帮您发起内部复核，稍后把需要您补充的内容整理给您。' },
+      { id: 'pending-1-user-5', role: 'user', text: '好的明白了，谢谢，没其他问题了' },
+    ],
+    status: 'generating',
+    draftText: '',
+  },
+  'managed-1': {
+    messages: [
+      { id: 'managed-1-user-1', role: 'user', text: '你帮我看下这个有啥问题呢' },
+      { id: 'managed-1-agent-0', role: 'agent', text: '我先帮您核对一下当前物流轨迹和异常节点，请稍等。' },
+      {
+        id: 'managed-1-agent-1',
+        role: 'agent',
+        text: '《抖音网络社区自律公约》：抖音app-我-右上角≡-设置-抖音规则中心，这是咱们抖音官方的一个规则呢',
+      },
+      { id: 'managed-1-user-2', role: 'user', text: '我看物流一直停在转运中心，没有新的更新。' },
+      { id: 'managed-1-agent-2', role: 'agent', text: '当前看是中转环节超时，我这边已经帮您催促承运商优先处理。' },
+      { id: 'managed-1-user-3', role: 'user', text: '那我这边还需要额外操作什么吗？' },
+      { id: 'managed-1-agent-3', role: 'agent', text: '暂时不需要，您保持电话畅通即可，有新进展我会第一时间同步您。' },
+      { id: 'managed-1-user-4', role: 'user', text: '好的明白了，谢谢，没其他问题了' },
+    ],
+    status: 'editable',
+    draftText: DEFAULT_CARD_DRAFT_TEXT,
+  },
+  'other-1': {
+    status: 'replied',
+    draftText: '',
+  },
+};
+
+/* ── 根容器：展开 / 收起（仅头像列）── */
+const ROOT = 'tfds-conversation-list relative flex h-full min-h-0 w-full shrink-0 overflow-hidden select-none';
+const ROOT_EXPANDED = 'flex-col gap-4 p-4';
+const ROOT_COLLAPSED = 'flex-col items-center gap-4 px-3 py-4';
+
+/* ── 顶部标题栏 + 工具按钮 ── */
+const HEADER = 'flex h-[26px] items-center justify-between gap-3';
+const HEADER_MAIN = 'flex min-w-0 items-center gap-3';
+const TITLE = 'm-0 truncate text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground';
+const ACTIONS = 'flex shrink-0 items-center gap-1';
+/* ── Tabs + 列表滚动区 ── */
+const TABS_WRAP = 'max-w-full self-start';
+const LIST = 'mx-[-12px] flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto px-3';
+const CARD_LIST = 'mx-[-12px] grid min-h-0 flex-1 grid-cols-1 auto-rows-max gap-4 overflow-y-auto px-3';
+const CARD_LIST_TWO_COLUMN = 'grid-cols-2';
+const CARD_LIST_THREE_COLUMN = 'grid-cols-3';
+const SECTION = 'flex flex-col gap-1';
+const SECTION_HEADER = [
+  'flex h-5 w-full items-center justify-between gap-2 rounded-md p-0.5 text-left',
+  'text-xs leading-4 text-foreground-muted transition-colors duration-150',
+  'hover:text-foreground-secondary active:text-foreground-secondary',
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200',
+].join(' ');
+const SECTION_TITLE = 'flex min-w-0 items-center gap-1';
+const SECTION_CARET = 'transition-transform duration-150';
+const SECTION_CONTENT = 'flex flex-col gap-1';
+/* ── 会话行：默认 / 选中 / 左侧色条 ── */
+const ITEM_BASE = [
+  'group relative flex w-full items-center gap-3 overflow-hidden rounded-lg p-3 text-left',
+  'transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200',
+].join(' ');
+const ITEM_DEFAULT = 'bg-transparent hover:bg-fill active:bg-fill-active';
+const ITEM_ACTIVE = 'bg-surface shadow-list';
+const ACTIVE_RAIL = 'absolute bottom-0 left-0 top-0 w-1 bg-brand-500';
+const ITEM_BODY = 'flex min-w-0 flex-1 flex-col gap-1';
+const ITEM_TITLE_ROW = 'flex min-w-0 items-start justify-between gap-2';
+const ITEM_TITLE = 'm-0 min-w-0 flex-1 truncate text-sm [font-weight:var(--font-semibold)] leading-6 text-foreground';
+const TAGS = 'flex shrink-0 items-center gap-1';
+const META = 'flex min-w-0 items-center gap-1 text-xs leading-4 text-foreground-muted';
+const USER = 'block w-[50px] shrink-0 truncate';
+const ORDER = 'min-w-0 truncate';
+const TIME = 'ml-auto shrink-0 pl-2 text-foreground-muted';
+
+/* ── 收起态：仅头像 + 展开入口 ── */
+const AVATAR_ONLY_HEADER = 'flex h-8 w-full items-center justify-center';
+const AVATAR_ONLY_LIST = 'flex min-h-0 flex-1 flex-col self-stretch gap-1 overflow-y-auto';
+const AVATAR_ONLY_ITEM = [
+  'relative inline-flex h-[68px] w-full items-center rounded-xl px-4',
+  'transition-colors duration-150 hover:bg-fill active:bg-fill-active',
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200',
+].join(' ');
+const AVATAR_ONLY_ITEM_INACTIVE = 'justify-center py-[18px]';
+const AVATAR_ONLY_ITEM_ACTIVE = 'justify-center overflow-hidden bg-surface py-3 shadow-list hover:bg-surface';
+const AVATAR_ONLY_ACTIVE_RAIL = 'absolute bottom-0 left-0 top-0 w-1 bg-data-0';
+/* ── 右侧拖拽分隔条 ── */
+const RESIZE_HANDLE_CLASS = 'absolute right-0 top-0 bottom-0 z-20 w-3 cursor-col-resize touch-none select-none focus-visible:outline-none';
+const RESIZE_HANDLE_BAR_CLASS = 'absolute right-0 top-0 bottom-0 w-[2px] bg-transparent transition-colors duration-150';
+
+/* ── 卡片列表变体 ── */
+const CARD_ITEM = [
+  'group flex flex-col rounded-xl bg-surface shadow-list transition-shadow duration-150',
+  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-200',
+].join(' ');
+const CARD_ITEM_INTERACTIVE = 'cursor-pointer';
+const CARD_ITEM_ACTIVE_SHADOW = 'var(--shadow-list), inset 0 0 0 1.5px var(--color-brand-500)';
+const CARD_HEADER = 'flex items-start gap-3 px-4 pt-3 pb-2';
+const CARD_HEADER_MAIN = 'flex min-w-0 flex-1 flex-wrap items-center gap-1';
+const CARD_TITLE = 'min-w-0 truncate text-sm [font-weight:var(--font-semibold)] leading-5 text-foreground';
+const CARD_TAGS = 'flex min-w-0 flex-wrap items-center gap-1';
+const CARD_MESSAGE_REGION = 'flex flex-col overflow-y-auto px-4 pb-2';
+const CARD_MESSAGE_REGION_REPLIED = 'h-[196px] gap-3';
+const CARD_MESSAGE_REGION_GENERATING = 'h-[196px] gap-3';
+const CARD_MESSAGE_REGION_EDITABLE = 'h-[155px] gap-3';
+const CARD_MESSAGE_ROW_BASE = 'flex w-full';
+const CARD_MESSAGE_ROW_USER = 'justify-start';
+const CARD_MESSAGE_ROW_AGENT = 'justify-end';
+const CARD_MESSAGE_BUBBLE_BASE = 'max-w-[calc(100%-24px)] rounded-lg px-2 py-1.5 text-xs leading-4 text-foreground';
+const CARD_MESSAGE_BUBBLE_USER = 'rounded-tl-none bg-fill';
+const CARD_MESSAGE_BUBBLE_AGENT = 'rounded-tr-none bg-[image:var(--gradient-ai-fill-1)]';
+const CARD_DIVIDER = 'h-px w-full bg-border-default';
+const CARD_FOOTER_BASE = 'shrink-0';
+const CARD_FOOTER_REPLIED = 'px-4 py-4 text-xs leading-4 text-[#22272759]';
+const CARD_FOOTER_GENERATING = 'flex items-center gap-2 px-4 py-4 text-xs leading-4 text-[#22272759]';
+const CARD_FOOTER_EDITABLE = 'flex flex-col gap-3 px-3 py-3';
+const CARD_FOOTER_TEXT = 'w-full text-xs leading-4 text-foreground';
+const CARD_FOOTER_BUTTON_ROW = 'flex w-full justify-end';
+const CARD_STATUS_SPINNER_WRAP = 'relative inline-flex size-3 shrink-0 items-center justify-center';
+const CARD_STATUS_SPINNER_TRACK = 'absolute inset-0 rounded-full border border-border-line-light';
+const CARD_STATUS_SPINNER_ARC = 'absolute inset-0 rounded-full animate-spin [animation-duration:1.1s] [animation-timing-function:linear] [animation-iteration-count:infinite]';
+
+function getSectionItemCount(section) {
+  return Array.isArray(section?.items) ? section.items.length : 0;
+}
+
+function getTabItemCount(sections, tabId) {
+  if (!Array.isArray(sections) || !tabId || tabId === 'all') return null;
+  const matchedSection = sections.find((section) => section.id === tabId);
+  return matchedSection ? getSectionItemCount(matchedSection) : 0;
+}
+
+function renderTabLabel(tab, count) {
+  if (count === undefined || count === null) return tab.label;
+  return `${tab.label} ${count}`;
+}
+
+function ConversationTag({ tag }) {
+  return (
+    <Tag
+      variant={tag.variant || 'grey'}
+      size="m"
+      radius="md"
+      fontWeight="regular"
+      showIcon={Boolean(tag.iconName)}
+      iconName={tag.iconName}
+      className="shrink-0"
+    >
+      {tag.label}
+    </Tag>
+  );
+}
+
+function ConversationItem({ item, active, onClick }) {
+  const content = (
+    <>
+      {active ? <span className={ACTIVE_RAIL} aria-hidden="true" /> : null}
+      <Avatar shape="round" size="s" type="image" src={item.avatarSrc} alt={item.userName} />
+      <div className={ITEM_BODY}>
+        <div className={ITEM_TITLE_ROW}>
+          <h3 className={ITEM_TITLE}>{item.title}</h3>
+          <div className={TAGS}>
+            {(item.tags || []).map((tag, index) => (
+              <ConversationTag key={`${item.id}-${tag.label}-${index}`} tag={tag} />
+            ))}
+          </div>
+        </div>
+
+        <div className={META}>
+          <Tooltip content={item.userName}>
+            <span className={USER}>{item.userName}</span>
+          </Tooltip>
+          <Icon name="file-05-stroked" size={12} aria-hidden="true" />
+          <span className={ORDER}>{item.orderId}</span>
+          <span className={TIME}>{item.time}</span>
+        </div>
+      </div>
+    </>
+  );
+
+  const className = [ITEM_BASE, active ? ITEM_ACTIVE : ITEM_DEFAULT].join(' ');
+
+  if (onClick) {
+    return (
+      <button type="button" className={className} onClick={() => onClick(item)} data-tfds-component="ConversationList.Item">
+        {content}
+      </button>
+    );
+  }
+
+  return <article className={className} data-tfds-component="ConversationList.Item">{content}</article>;
+}
+
+function ConversationAvatarItem({ item, active, onClick }) {
+  return (
+    <button
+      type="button"
+      className={[
+        AVATAR_ONLY_ITEM,
+        active ? AVATAR_ONLY_ITEM_ACTIVE : AVATAR_ONLY_ITEM_INACTIVE,
+      ].join(' ')}
+      onClick={() => onClick(item)}
+      aria-label={item.title}
+      title={item.title}
+      data-tfds-component="ConversationList.AvatarItem"
+    >
+      {active ? <span className={AVATAR_ONLY_ACTIVE_RAIL} aria-hidden="true" /> : null}
+      <Avatar shape="round" size="s" type="image" src={item.avatarSrc} alt={item.userName} />
+    </button>
+  );
+}
+
+function ConversationCardTag({ tag }) {
+  return <ConversationTag tag={tag} />;
+}
+
+function isPrimaryStatusTag(tag) {
+  return ['red', 'green', 'orange', 'blue'].includes(tag?.variant);
+}
+
+function sortCardTags(tags) {
+  if (!Array.isArray(tags) || tags.length <= 1) return Array.isArray(tags) ? tags : [];
+
+  const statusTags = [];
+  const secondaryTags = [];
+
+  tags.forEach((tag) => {
+    if (isPrimaryStatusTag(tag)) {
+      statusTags.push(tag);
+      return;
+    }
+    secondaryTags.push(tag);
+  });
+
+  return [...statusTags, ...secondaryTags];
+}
+
+function ConversationCardMessage({ message }) {
+  const isAgent = message.role === 'agent';
+
+  return (
+    <div className={[CARD_MESSAGE_ROW_BASE, isAgent ? CARD_MESSAGE_ROW_AGENT : CARD_MESSAGE_ROW_USER].join(' ')}>
+      <div className={[
+        CARD_MESSAGE_BUBBLE_BASE,
+        isAgent ? CARD_MESSAGE_BUBBLE_AGENT : CARD_MESSAGE_BUBBLE_USER,
+      ].join(' ')}>
+        {message.text}
+      </div>
+    </div>
+  );
+}
+
+function ConversationProcessingSpinner() {
+  return (
+    <span className={CARD_STATUS_SPINNER_WRAP} aria-hidden="true">
+      <span className={CARD_STATUS_SPINNER_TRACK} />
+      <span
+        className={CARD_STATUS_SPINNER_ARC}
+        style={{
+          background:
+            'conic-gradient(from 200deg, transparent 0deg 180deg, var(--color-brand-500) 180deg, var(--color-cyan-300) 232deg, var(--color-blue-400) 286deg, var(--color-violet-300) 334deg, var(--color-purple-300) 360deg)',
+          WebkitMask:
+            'radial-gradient(farthest-side, transparent calc(100% - 2px), var(--color-black) calc(100% - 2px))',
+          mask: 'radial-gradient(farthest-side, transparent calc(100% - 2px), var(--color-black) calc(100% - 2px))',
+        }}
+      />
+    </span>
+  );
+}
+
+function buildSentCardMessage(cardId, draftText, sequence) {
+  return {
+    id: `${cardId}-agent-sent-${sequence}`,
+    role: 'agent',
+    text: draftText,
+  };
+}
+
+function buildNextCardAfterSend(card, draftText, sequence) {
+  return {
+    ...card,
+    messages: [...(card.messages || []), buildSentCardMessage(card.id, draftText, sequence)],
+    draftText: '',
+    status: 'replied',
+  };
+}
+
+function applyCardItemOverride(item, override) {
+  if (!override) return item;
+  return {
+    ...item,
+    ...override,
+  };
+}
+
+function ConversationCardFooter({ card, onSend }) {
+  const draftText = typeof card.draftText === 'string' ? card.draftText.trim() : '';
+  const isRepliedState = card.status === 'replied';
+  const showEditableState = card.status === 'editable' && draftText.length > 0;
+
+  if (isRepliedState) {
+    return (
+      <div className={[CARD_FOOTER_BASE, CARD_FOOTER_REPLIED].join(' ')}>
+        已回复用户
+      </div>
+    );
+  }
+
+  if (!showEditableState) {
+    return (
+      <div className={[CARD_FOOTER_BASE, CARD_FOOTER_GENERATING].join(' ')}>
+        <ConversationProcessingSpinner />
+        <span>回复内容生成中</span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className={CARD_DIVIDER} aria-hidden="true" />
+      <div className={[CARD_FOOTER_BASE, CARD_FOOTER_EDITABLE].join(' ')}>
+        <p className={CARD_FOOTER_TEXT}>{draftText}</p>
+        <div className={CARD_FOOTER_BUTTON_ROW}>
+          <Button
+            type="button"
+            variant="primary"
+            size="sm"
+            icon={<Icon name="send-01-stroked" size={16} aria-hidden="true" />}
+            iconOnly
+            className="!h-6 !w-6 !rounded-md !p-1"
+            onKeyDown={(event) => {
+              event.stopPropagation();
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              if (onSend) onSend(card);
+            }}
+            aria-label="发送回复"
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+function buildFallbackCardMessages(item) {
+  const statusSummary = (item.tags || []).map((tag) => tag.label).join(' / ');
+
+  return [
+    { id: `${item.id}-user-1`, role: 'user', text: `我想继续确认「${item.title}」的处理进展。` },
+    {
+      id: `${item.id}-agent-1`,
+      role: 'agent',
+      text: statusSummary
+        ? `当前记录状态为 ${statusSummary}，我来继续帮您跟进处理。`
+        : '我来继续帮您跟进这个会话的处理进展。',
+    },
+    { id: `${item.id}-user-2`, role: 'user', text: `对应单号是 ${item.orderId}，麻烦再帮我确认一下。` },
+    { id: `${item.id}-agent-2`, role: 'agent', text: '好的，我先同步核对系统记录，并帮您整理当前可执行的处理方案。' },
+    { id: `${item.id}-user-3`, role: 'user', text: '我比较担心一直没有结果，想知道大概多久能处理完。' },
+    { id: `${item.id}-agent-3`, role: 'agent', text: '理解您的着急，我会继续盯进度，有更新会第一时间回复您。' },
+  ];
+}
+
+function getDraftTextSeed(item) {
+  const source = String(item?.id || item?.title || item?.orderId || '');
+  let hash = 0;
+  for (let index = 0; index < source.length; index += 1) {
+    hash = (hash * 31 + source.charCodeAt(index)) % 2147483647;
+  }
+  return hash;
+}
+
+function buildFallbackDraftText(item) {
+  const seed = getDraftTextSeed(item);
+  return DEFAULT_CARD_DRAFT_TEXTS[seed % DEFAULT_CARD_DRAFT_TEXTS.length] || DEFAULT_CARD_DRAFT_TEXT;
+}
+
+function normalizeCardContent(item) {
+  const override = CARD_CONTENT_OVERRIDES[item.id] || {};
+  const messages = Array.isArray(item.messages) && item.messages.length > 0
+    ? item.messages
+    : (override.messages || buildFallbackCardMessages(item));
+  const draftText = typeof item.draftText === 'string'
+    ? item.draftText
+    : (
+      typeof override.draftText === 'string'
+        ? override.draftText
+        : ((item.status || override.status) === 'editable' ? buildFallbackDraftText(item) : '')
+    );
+  const requestedStatus = item.status || override.status || 'replied';
+  const status = requestedStatus === 'editable'
+    ? (draftText.trim() ? 'editable' : 'generating')
+    : (requestedStatus === 'replied' ? 'replied' : 'generating');
+
+  return {
+    ...item,
+    messages,
+    draftText,
+    status,
+  };
+}
+
+function ConversationCardItem({ item, active, onClick, onSend }) {
+  const card = normalizeCardContent(item);
+  const messageRegionRef = useRef(null);
+  const interactive = Boolean(onClick);
+  const messageRegionStateClass = card.status === 'editable'
+    ? CARD_MESSAGE_REGION_EDITABLE
+    : (card.status === 'replied' ? CARD_MESSAGE_REGION_REPLIED : CARD_MESSAGE_REGION_GENERATING);
+  const clickProps = interactive ? {
+    role: 'button',
+    tabIndex: 0,
+    onClick: () => onClick(item),
+    onKeyDown: (event) => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      onClick(item);
+    },
+  } : {};
+
+  useEffect(() => {
+    const node = messageRegionRef.current;
+    if (!node) return;
+    node.scrollTop = node.scrollHeight;
+  }, [active, card.id, card.status, card.messages.length]);
+
+  return (
+    <article
+      className={[CARD_ITEM, interactive ? CARD_ITEM_INTERACTIVE : ''].filter(Boolean).join(' ')}
+      style={active ? { boxShadow: CARD_ITEM_ACTIVE_SHADOW } : undefined}
+      aria-label={card.title}
+      data-tfds-component="ConversationList.CardItem"
+      aria-pressed={interactive ? active : undefined}
+      data-active={active ? 'true' : 'false'}
+      {...clickProps}
+    >
+      <div className={CARD_HEADER}>
+        <div className={CARD_HEADER_MAIN}>
+          <h3 className={CARD_TITLE}>{card.title}</h3>
+          <div className={CARD_TAGS}>
+            {sortCardTags(card.tags).map((tag, index) => (
+              <ConversationCardTag key={`${card.id}-${tag.label}-${index}`} tag={tag} />
+            ))}
+          </div>
+        </div>
+        <Avatar shape="round" size="s" type="image" src={card.avatarSrc} alt={card.title} />
+      </div>
+      <div ref={messageRegionRef} className={[CARD_MESSAGE_REGION, messageRegionStateClass].join(' ')}>
+        {(card.messages || []).map((message) => (
+          <ConversationCardMessage key={message.id} message={message} />
+        ))}
+      </div>
+      <ConversationCardFooter card={card} onSend={onSend} />
+    </article>
+  );
+}
+
+function normalizeSections(sections) {
+  if (!Array.isArray(sections) || sections.length === 0) return DEFAULT_SECTIONS;
+  return sections;
+}
+
+function filterSectionsByTab(sections, activeTab) {
+  if (!activeTab || activeTab === 'all') return sections;
+  const filteredSections = sections.filter((section) => section.id === activeTab);
+  return filteredSections.length > 0 ? filteredSections : sections;
+}
+
+function getFirstItemId(sections) {
+  if (!Array.isArray(sections)) return null;
+
+  for (const section of sections) {
+    const firstItemId = section?.items?.[0]?.id;
+    if (firstItemId) return firstItemId;
+  }
+
+  return null;
+}
+
+function hasItem(sections, itemId) {
+  if (!itemId || !Array.isArray(sections)) return false;
+  return sections.some((section) => (section.items || []).some((item) => item.id === itemId));
+}
+
+function getSectionIds(sections) {
+  if (!Array.isArray(sections)) return [];
+  return sections.map((section) => section.id).filter(Boolean);
+}
+
+function resolveStatusTag(activeTab, sectionId) {
+  if (activeTab && activeTab !== 'all') {
+    return STATUS_TAG_BY_TAB[activeTab] || null;
+  }
+
+  return STATUS_TAG_BY_TAB[sectionId] || null;
+}
+
+function normalizeItemTags(tags, statusTag) {
+  const resolvedTags = Array.isArray(tags) ? tags : [];
+
+  if (!statusTag) return resolvedTags;
+  if (resolvedTags.length === 0) return [statusTag];
+
+  return resolvedTags.map((tag, index) => (
+    index === resolvedTags.length - 1
+      ? { ...tag, label: statusTag.label, variant: statusTag.variant }
+      : tag
+  ));
+}
+
+function normalizeSectionsByActiveTab(sections, activeTab) {
+  if (!Array.isArray(sections)) return [];
+
+  return sections.map((section) => ({
+    ...section,
+    items: (section.items || []).map((item) => ({
+      ...item,
+      tags: normalizeItemTags(item.tags, resolveStatusTag(activeTab, section.id)),
+    })),
+  }));
+}
+
+/**
+ * ConversationList — 会话 / 工单侧栏列表
+ * @prop {'default'|'card'} [variant] — 列表形态：默认分组列表 / 卡片列表
+ * @prop {'default'|'card'} [defaultVariant='default'] — 非受控初始列表形态
+ * @prop {function|null} [onVariantChange=null] — 布局切换 (nextVariant) => void
+ * @prop {string} [title='会话列表'] — 顶部标题
+ * @prop {Array<{id:string,label:string,count?:number}>} [tabs] — 分段筛选项；空数组时用内置示例
+ * @prop {string} [activeTab] — 受控当前筛选 tab id；不传则非受控
+ * @prop {string} [defaultActiveTab='all'] — 非受控初始筛选
+ * @prop {function|null} [onTabChange=null] — 筛选切换 (tabId, tab) => void
+ * @prop {Array<{id:string,title:string,count?:number,items:Array}>} [sections] — 分组数据；variant=card 时仍复用同一份会话数据，只是每个 item 额外读取 messages / draftText / status 等卡片字段
+ * @prop {string} [activeItemId] — 受控当前高亮项 id；不传则非受控
+ * @prop {string|null} [defaultActiveItemId=null] — 非受控初始高亮项 id；未传时默认选中当前可见第一项
+ * @prop {function|null} [onItemClick=null] — 行点击 (item) => void
+ * @prop {function|null} [onSend=null] — 卡片可发送态点击发送 ({ item, draftText, nextItem, sectionId }) => void
+ * @prop {boolean} [showActions=true] — 是否显示搜索 / 筛选 / 文件按钮
+ * @prop {boolean} [showLayoutToggle=true] — 是否显示右上角布局切换按钮
+ * @prop {boolean} [resizable=true] — 是否启用组件自身右侧拖拽；嵌入已有可拖拽框架时应关闭
+ * @prop {boolean} [collapsible=true] — 是否启用默认列表的纯头像收起态
+ * @prop {boolean} [autoCollapseOnNarrow=true] — 是否根据外层实际宽度自动切换纯头像态
+ * @prop {function|null} [onLayoutWidthRequest=null] — 嵌入外层框架时请求外层同步调整内容宽度 (contentWidth, meta) => void
+ * @prop {string} [className=''] — 根节点附加类名
+ * @prop {object} [style] — 根节点内联样式（与默认 width 合并）
+ */
+function ConversationListDefaultVariant({
+  variant,
+  defaultVariant = 'default',
+  onVariantChange = null,
+  title = '会话列表',
+  tabs = DEFAULT_TABS,
+  activeTab,
+  defaultActiveTab = 'all',
+  onTabChange = null,
+  sections,
+  activeItemId,
+  defaultActiveItemId = null,
+  onItemClick = null,
+  onSend = null,
+  showActions = true,
+  showLayoutToggle = true,
+  resizable = true,
+  collapsible = true,
+  autoCollapseOnNarrow = true,
+  onLayoutWidthRequest = null,
+  className = '',
+  style,
+}) {
+  const rootRef = useRef(null);
+  const dragStateRef = useRef(null);
+  const sendSequenceRef = useRef(0);
+  const [innerVariant, setInnerVariant] = useState(() => variant ?? defaultVariant);
+  const [innerActiveTab, setInnerActiveTab] = useState(defaultActiveTab);
+  const [cardItemOverrides, setCardItemOverrides] = useState({});
+  const resolvedVariant = innerVariant ?? 'default';
+  const isCardVariant = resolvedVariant === 'card';
+  const resolvedActiveTab = activeTab ?? innerActiveTab;
+  const resolvedTabs = Array.isArray(tabs) && tabs.length > 0 ? tabs : DEFAULT_TABS;
+  const resolvedActiveTabIndex = Math.max(0, resolvedTabs.findIndex((tab) => tab.id === resolvedActiveTab));
+  const resolvedSections = useMemo(() => normalizeSections(sections), [sections]);
+  const resolvedTabCounts = useMemo(
+    () => Object.fromEntries(
+      resolvedTabs.map((tab) => [tab.id, getTabItemCount(resolvedSections, tab.id)])
+    ),
+    [resolvedSections, resolvedTabs],
+  );
+  const filteredSections = useMemo(
+    () => filterSectionsByTab(resolvedSections, resolvedActiveTab),
+    [resolvedSections, resolvedActiveTab],
+  );
+  const visibleSections = useMemo(
+    () => normalizeSectionsByActiveTab(filteredSections, resolvedActiveTab),
+    [filteredSections, resolvedActiveTab],
+  );
+  const fallbackActiveItemId = useMemo(
+    () => getFirstItemId(visibleSections) ?? getFirstItemId(resolvedSections),
+    [visibleSections, resolvedSections],
+  );
+  const [innerActiveItemId, setInnerActiveItemId] = useState(() => defaultActiveItemId || null);
+  const [expandedSectionIds, setExpandedSectionIds] = useState(() => getSectionIds(normalizeSections(sections)));
+  const [resizedWidth, setResizedWidth] = useState(null);
+  const [lastExpandedWidth, setLastExpandedWidth] = useState(DEFAULT_WIDTH);
+  const [availableWidth, setAvailableWidth] = useState(DEFAULT_WIDTH);
+  const [isAvatarOnly, setIsAvatarOnly] = useState(false);
+  const [isResizeActive, setIsResizeActive] = useState(false);
+  const resolvedActiveItemId = activeItemId ?? innerActiveItemId ?? fallbackActiveItemId;
+  const avatarOnlyItems = useMemo(
+    () => visibleSections.flatMap((section) => section.items || []),
+    [visibleSections],
+  );
+  const currentListWidth = resizedWidth ?? availableWidth ?? lastExpandedWidth ?? DEFAULT_WIDTH;
+  const isCardTwoColumn = isCardVariant && currentListWidth > CARD_TWO_COLUMN_THRESHOLD;
+  const isCardThreeColumn = isCardVariant && currentListWidth > CARD_THREE_COLUMN_THRESHOLD;
+
+  const handleTabClick = (tab) => {
+    if (activeTab === undefined) setInnerActiveTab(tab.id);
+    if (onTabChange) onTabChange(tab.id, tab);
+  };
+
+  const handleVariantToggle = useCallback(() => {
+    const nextVariant = resolvedVariant === 'card' ? 'default' : 'card';
+    setInnerVariant(nextVariant);
+    if (!resizable && onLayoutWidthRequest) {
+      const requestedWidth = nextVariant === 'card'
+        ? Math.max(availableWidth, CARD_MIN_WIDTH)
+        : Math.max(availableWidth, AVATAR_ONLY_THRESHOLD);
+      onLayoutWidthRequest(requestedWidth, { reason: 'variant-change', variant: nextVariant });
+    }
+    if (onVariantChange) onVariantChange(nextVariant);
+  }, [availableWidth, onLayoutWidthRequest, onVariantChange, resizable, resolvedVariant]);
+
+  const updateResizeState = useCallback((nextRawWidth, nextMaxWidth = null) => {
+    const maxWidth = nextMaxWidth ?? rootRef.current?.parentElement?.getBoundingClientRect?.().width ?? DEFAULT_WIDTH;
+    const minWidth = isCardVariant ? CARD_MIN_WIDTH : AVATAR_ONLY_WIDTH;
+    const clampedWidth = Math.max(minWidth, Math.min(nextRawWidth, maxWidth));
+
+    if (isCardVariant) {
+      setIsAvatarOnly(false);
+      setResizedWidth(clampedWidth);
+      setLastExpandedWidth(clampedWidth);
+      return {
+        clampedWidth,
+        nextAvatarOnly: false,
+      };
+    }
+
+    const nextAvatarOnly = clampedWidth < AVATAR_ONLY_THRESHOLD;
+
+    setIsAvatarOnly(nextAvatarOnly);
+    if (nextAvatarOnly) {
+      setResizedWidth(AVATAR_ONLY_WIDTH);
+    } else {
+      setResizedWidth(clampedWidth);
+      setLastExpandedWidth(clampedWidth);
+    }
+
+    return {
+      clampedWidth,
+      nextAvatarOnly,
+    };
+  }, [isCardVariant]);
+
+  const handleResizePointerDown = useCallback((event) => {
+    if (!resizable) return;
+    event.preventDefault();
+    setIsResizeActive(true);
+
+    const rootWidth = rootRef.current?.getBoundingClientRect?.().width ?? lastExpandedWidth;
+    const parentWidth = rootRef.current?.parentElement?.getBoundingClientRect?.().width ?? DEFAULT_WIDTH;
+
+    dragStateRef.current = {
+      startX: event.clientX,
+      startWidth: rootWidth,
+      maxWidth: parentWidth,
+    };
+
+    const previousUserSelect = document.body.style.userSelect;
+    document.body.style.userSelect = 'none';
+
+    const handlePointerMove = (moveEvent) => {
+      if (!dragStateRef.current) return;
+      const deltaX = moveEvent.clientX - dragStateRef.current.startX;
+      const nextRawWidth = dragStateRef.current.startWidth + deltaX;
+      updateResizeState(nextRawWidth, dragStateRef.current.maxWidth);
+    };
+
+    const stopDragging = (upEvent) => {
+      const finalRawWidth = dragStateRef.current
+        ? dragStateRef.current.startWidth + (upEvent.clientX - dragStateRef.current.startX)
+        : rootWidth;
+
+      updateResizeState(finalRawWidth, dragStateRef.current?.maxWidth ?? parentWidth);
+      dragStateRef.current = null;
+      setIsResizeActive(false);
+      document.body.style.userSelect = previousUserSelect;
+      window.removeEventListener('pointermove', handlePointerMove);
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', stopDragging, { once: true });
+  }, [lastExpandedWidth, resizable, updateResizeState]);
+
+  const handleResizeKeyDown = useCallback((event) => {
+    if (!resizable) return;
+    const currentWidth = isAvatarOnly
+      ? AVATAR_ONLY_WIDTH
+      : (resizedWidth ?? rootRef.current?.getBoundingClientRect?.().width ?? lastExpandedWidth);
+
+    let nextWidth = currentWidth;
+    if (event.key === 'ArrowLeft') nextWidth -= RESIZE_STEP;
+    if (event.key === 'ArrowRight') nextWidth += RESIZE_STEP;
+    if (event.key === 'Home') nextWidth = AVATAR_ONLY_WIDTH;
+    if (event.key === 'End') {
+      nextWidth = Math.max(lastExpandedWidth, AVATAR_ONLY_THRESHOLD);
+    }
+    if (nextWidth === currentWidth) return;
+
+    event.preventDefault();
+    updateResizeState(nextWidth);
+  }, [isAvatarOnly, lastExpandedWidth, resizable, resizedWidth, updateResizeState]);
+
+  const handleExpandFromAvatarOnly = useCallback(() => {
+    if (!resizable && onLayoutWidthRequest) {
+      const requestedWidth = Math.max(lastExpandedWidth, DEFAULT_WIDTH, AVATAR_ONLY_THRESHOLD);
+      setIsAvatarOnly(false);
+      setResizedWidth(null);
+      onLayoutWidthRequest(requestedWidth, { reason: 'expand-from-avatar', variant: resolvedVariant });
+      return;
+    }
+    updateResizeState(Math.max(lastExpandedWidth, AVATAR_ONLY_THRESHOLD));
+  }, [lastExpandedWidth, onLayoutWidthRequest, resizable, resolvedVariant, updateResizeState]);
+
+  const handleCollapseToAvatarOnly = useCallback(() => {
+    if (!resizable && onLayoutWidthRequest) {
+      setIsAvatarOnly(true);
+      setResizedWidth(AVATAR_ONLY_WIDTH);
+      onLayoutWidthRequest(AVATAR_ONLY_WIDTH, { reason: 'collapse-to-avatar', variant: resolvedVariant });
+      return;
+    }
+    updateResizeState(AVATAR_ONLY_WIDTH);
+  }, [onLayoutWidthRequest, resizable, resolvedVariant, updateResizeState]);
+
+  const handleSectionToggle = (sectionId) => {
+    setExpandedSectionIds((current) => (
+      current.includes(sectionId)
+        ? current.filter((id) => id !== sectionId)
+        : [...current, sectionId]
+    ));
+  };
+
+  useEffect(() => {
+    setInnerVariant(variant ?? defaultVariant);
+  }, [defaultVariant, variant]);
+
+  useEffect(() => {
+    setCardItemOverrides({});
+  }, [sections]);
+
+  useEffect(() => {
+    const rootNode = rootRef.current;
+    if (!rootNode) return undefined;
+    const observedNode = resizable ? rootNode : (rootNode.parentElement ?? rootNode);
+
+    function syncAvatarOnlyByActualWidth() {
+      const availableWidth = observedNode.getBoundingClientRect().width;
+      if (!availableWidth) return;
+      setAvailableWidth(availableWidth);
+
+      if (isCardVariant) {
+        setIsAvatarOnly(false);
+        setLastExpandedWidth(availableWidth);
+        return;
+      }
+
+      if (!autoCollapseOnNarrow || !collapsible) return;
+      const nextAvatarOnly = availableWidth < AVATAR_ONLY_THRESHOLD;
+      setIsAvatarOnly(nextAvatarOnly);
+      if (!nextAvatarOnly) {
+        setLastExpandedWidth((current) => Math.max(current, availableWidth));
+      } else if (!resizable && onLayoutWidthRequest) {
+        onLayoutWidthRequest(AVATAR_ONLY_WIDTH, { reason: 'auto-collapse-on-narrow', variant: resolvedVariant });
+      }
+    }
+
+    syncAvatarOnlyByActualWidth();
+    const observer = typeof ResizeObserver !== 'undefined'
+      ? new ResizeObserver(syncAvatarOnlyByActualWidth)
+      : null;
+    observer?.observe(observedNode);
+    window.addEventListener('resize', syncAvatarOnlyByActualWidth);
+
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('resize', syncAvatarOnlyByActualWidth);
+    };
+  }, [autoCollapseOnNarrow, collapsible, isCardVariant, onLayoutWidthRequest, resizable, resolvedVariant]);
+
+  useEffect(() => {
+    const nextSectionIds = getSectionIds(resolvedSections);
+    setExpandedSectionIds((current) => {
+      const keptIds = current.filter((id) => nextSectionIds.includes(id));
+      const missingIds = nextSectionIds.filter((id) => !keptIds.includes(id));
+      return [...keptIds, ...missingIds];
+    });
+  }, [resolvedSections]);
+
+  useEffect(() => {
+    if (activeItemId !== undefined) return;
+    if (!hasItem(resolvedSections, innerActiveItemId)) {
+      setInnerActiveItemId(defaultActiveItemId || fallbackActiveItemId || null);
+    }
+  }, [activeItemId, defaultActiveItemId, fallbackActiveItemId, innerActiveItemId, resolvedSections]);
+
+  useEffect(() => {
+    if (activeItemId !== undefined) return;
+    if (!hasItem(visibleSections, innerActiveItemId)) {
+      setInnerActiveItemId(getFirstItemId(visibleSections) ?? fallbackActiveItemId ?? null);
+    }
+  }, [activeItemId, fallbackActiveItemId, innerActiveItemId, visibleSections]);
+
+  const handleItemClick = (item) => {
+    if (activeItemId === undefined) setInnerActiveItemId(item.id);
+    if (onItemClick) onItemClick(item);
+  };
+
+  const handleCardSend = useCallback((card, sectionId) => {
+    const draftText = typeof card?.draftText === 'string' ? card.draftText.trim() : '';
+    if (!draftText) return;
+
+    sendSequenceRef.current += 1;
+    const nextItem = buildNextCardAfterSend(card, draftText, sendSequenceRef.current);
+
+    setCardItemOverrides((current) => ({
+      ...current,
+      [card.id]: {
+        messages: nextItem.messages,
+        draftText: nextItem.draftText,
+        status: nextItem.status,
+      },
+    }));
+
+    if (activeItemId === undefined) setInnerActiveItemId(card.id);
+    if (onSend) {
+      onSend({
+        item: card,
+        draftText,
+        nextItem,
+        sectionId,
+      });
+    }
+  }, [activeItemId, onSend]);
+
+  const expandedWidth = resizedWidth ?? lastExpandedWidth ?? DEFAULT_WIDTH;
+  const resolvedRootWidth = !isCardVariant && isAvatarOnly
+    ? `${AVATAR_ONLY_WIDTH}px`
+    : (style?.width ?? `${expandedWidth}px`);
+  const rootStyle = {
+    ...style,
+    width: resolvedRootWidth,
+    maxWidth: style?.maxWidth ?? '100%',
+  };
+
+  return (
+    <section
+      ref={rootRef}
+      className={[
+        ROOT,
+        !isCardVariant && isAvatarOnly ? ROOT_COLLAPSED : ROOT_EXPANDED,
+        className,
+      ].filter(Boolean).join(' ')}
+      style={rootStyle}
+      aria-label={title}
+      data-tfds-component="ConversationList"
+      data-tfds-variant={resolvedVariant}
+    >
+      {!isCardVariant && isAvatarOnly ? (
+        <>
+          <div className={AVATAR_ONLY_HEADER}>
+            <Tooltip content="展开会话列表">
+              <Button
+                type="button"
+                variant="ghost-black"
+                size="sm"
+                icon={<Icon name="layout-right-stroked" size={16} />}
+                iconOnly
+                onClick={handleExpandFromAvatarOnly}
+                aria-label="展开会话列表"
+              />
+            </Tooltip>
+          </div>
+          <div className={AVATAR_ONLY_LIST}>
+            {avatarOnlyItems.map((item) => (
+              <ConversationAvatarItem
+                key={item.id}
+                item={item}
+                active={item.id === resolvedActiveItemId}
+                onClick={handleItemClick}
+              />
+            ))}
+          </div>
+        </>
+      ) : (
+        <>
+          <header className={HEADER}>
+            <div className={HEADER_MAIN}>
+              {!isCardVariant && collapsible ? (
+                <Tooltip content="收起会话列表">
+                  <Button
+                    type="button"
+                    variant="ghost-black"
+                    size="sm"
+                    icon={<Icon name="layout-right-stroked" size={16} />}
+                    iconOnly
+                    onClick={handleCollapseToAvatarOnly}
+                    aria-label="收起会话列表"
+                  />
+                </Tooltip>
+              ) : null}
+              <h2 className={TITLE}>{title}</h2>
+            </div>
+            {showActions ? (
+              <div className={ACTIONS}>
+                {showLayoutToggle ? (
+                  <Tooltip content={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}>
+                    <Button
+                      type="button"
+                      variant="ghost-black"
+                      size="sm"
+                      icon={<Icon name="switch-horizontal-01-stroked" size={16} />}
+                      iconOnly
+                      onClick={handleVariantToggle}
+                      aria-label={isCardVariant ? '切换为默认列表' : '切换为卡片列表'}
+                    />
+                  </Tooltip>
+                ) : null}
+                <Tooltip content="搜索会话">
+                  <Button
+                    type="button"
+                    variant="ghost-black"
+                    size="sm"
+                    icon={<Icon name="search-lg-stroked" size={16} />}
+                    iconOnly
+                    aria-label="搜索会话"
+                  />
+                </Tooltip>
+                <Tooltip content="筛选会话">
+                  <Button
+                    type="button"
+                    variant="ghost-black"
+                    size="sm"
+                    icon={<Icon name="filter-funnel-01-stroked" size={16} />}
+                    iconOnly
+                    aria-label="筛选会话"
+                  />
+                </Tooltip>
+                <Tooltip content="查看工单文件">
+                  <Button
+                    type="button"
+                    variant="ghost-black"
+                    size="sm"
+                    icon={<Icon name="file-05-stroked" size={16} />}
+                    iconOnly
+                    aria-label="查看工单文件"
+                  />
+                </Tooltip>
+              </div>
+            ) : null}
+          </header>
+
+          <div className={TABS_WRAP}>
+            <Tabs
+              variant="segment"
+              size="sm"
+              items={resolvedTabs.map((tab) => ({ label: renderTabLabel(tab, resolvedTabCounts[tab.id]) }))}
+              activeIndex={resolvedActiveTabIndex}
+              onChange={(index) => {
+                const nextTab = resolvedTabs[index];
+                if (nextTab) handleTabClick(nextTab);
+              }}
+              className="max-w-full flex-wrap"
+              aria-label="会话状态筛选"
+            />
+          </div>
+
+          <div className={isCardVariant ? [
+            CARD_LIST,
+            isCardThreeColumn ? CARD_LIST_THREE_COLUMN : '',
+            !isCardThreeColumn && isCardTwoColumn ? CARD_LIST_TWO_COLUMN : '',
+          ].filter(Boolean).join(' ') : LIST}>
+            {isCardVariant ? (
+              visibleSections.flatMap((section) => (
+                (section.items || []).map((item) => {
+                  const resolvedItem = applyCardItemOverride(item, cardItemOverrides[item.id]);
+                  return (
+                    <ConversationCardItem
+                      key={item.id}
+                      item={resolvedItem}
+                      active={item.id === resolvedActiveItemId}
+                      onClick={handleItemClick}
+                      onSend={(card) => handleCardSend(card, section.id)}
+                    />
+                  );
+                })
+              ))
+            ) : (
+              visibleSections.map((section) => {
+                const expanded = expandedSectionIds.includes(section.id);
+                const sectionContentId = `conversation-list-section-${section.id}`;
+                const sectionItemCount = getSectionItemCount(section);
+
+                return (
+                  <section key={section.id} className={SECTION} aria-label={`${section.title}${sectionItemCount}`}>
+                    <button
+                      type="button"
+                      className={SECTION_HEADER}
+                      aria-expanded={expanded}
+                      aria-controls={sectionContentId}
+                      onClick={() => handleSectionToggle(section.id)}
+                      data-tfds-component="ConversationList.Section"
+                    >
+                      <span className={SECTION_TITLE}>
+                        <span className="truncate">{section.title}</span>
+                        <span>{sectionItemCount}</span>
+                      </span>
+                      <Icon
+                        name="chevron-up-stroked"
+                        size={16}
+                        aria-hidden="true"
+                        className={[SECTION_CARET, expanded ? '' : 'rotate-180'].filter(Boolean).join(' ')}
+                      />
+                    </button>
+                    {expanded ? (
+                      <div id={sectionContentId} className={SECTION_CONTENT}>
+                        {(section.items || []).map((item) => (
+                          <ConversationItem
+                            key={item.id}
+                            item={item}
+                            active={item.id === resolvedActiveItemId}
+                            onClick={handleItemClick}
+                          />
+                        ))}
+                      </div>
+                    ) : null}
+                  </section>
+                );
+              })
+            )}
+          </div>
+        </>
+      )}
+
+      {resizable && (isCardVariant || !isAvatarOnly) ? (
+        <div
+          className={RESIZE_HANDLE_CLASS}
+          role="separator"
+          aria-label="调整会话列表宽度"
+          aria-orientation="vertical"
+          aria-valuemin={isCardVariant ? CARD_MIN_WIDTH : AVATAR_ONLY_WIDTH}
+          aria-valuenow={Math.round(isCardVariant ? currentListWidth : (isAvatarOnly ? AVATAR_ONLY_WIDTH : (resizedWidth ?? rootRef.current?.getBoundingClientRect?.().width ?? lastExpandedWidth)))}
+          tabIndex={0}
+          onPointerDown={handleResizePointerDown}
+          onKeyDown={handleResizeKeyDown}
+          onPointerEnter={() => setIsResizeActive(true)}
+          onPointerLeave={() => {
+            if (!dragStateRef.current) setIsResizeActive(false);
+          }}
+          onFocus={() => setIsResizeActive(true)}
+          onBlur={() => {
+            if (!dragStateRef.current) setIsResizeActive(false);
+          }}
+          data-tfds-component="ConversationList.ResizeHandle"
+        >
+          <span className={[RESIZE_HANDLE_BAR_CLASS, isResizeActive ? 'bg-brand-500' : 'bg-transparent'].join(' ')} />
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
+export default function ConversationList({
+  variant = 'default',
+  ...props
+}) {
+  return <ConversationListDefaultVariant variant={variant} {...props} />;
+}
+
+export {
+  DEFAULT_SECTIONS as CONVERSATION_LIST_SAMPLE_SECTIONS,
+  DEFAULT_TABS as CONVERSATION_LIST_SAMPLE_TABS,
+  buildFallbackDraftText as getConversationListEditableDraftText,
+};