@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/page-patterns/ChatConversationPattern.jsx

@@ -0,0 +1,989 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Button from '../components/Button';
+import Icon from '../components/Icon';
+import ChatInput from '../components/ChatInput';
+import catcatSvg from '../components/file-type-assets/catcat.svg';
+import ChatMessage, {
+  DEFAULT_CHAT_FOLLOW_UPS,
+  DEFAULT_CHAT_RESULT,
+  DEFAULT_CHAT_RESULT_ARTIFACTS,
+  DEFAULT_CHAT_TASK_GROUPS,
+  DEFAULT_CHAT_PLAN,
+  DEFAULT_CHAT_THINKING,
+  useStreamingTaskGroups,
+} from '../components/ChatMessage';
+
+/**
+ * ChatConversationPattern — B 端 AI 对话页 / OLA AI 会话详情
+ *
+ * 布局：
+ *   - 外框：灰底会话工作区（不带左侧 NavBar），业务页面根容器不额外加整页圆角或描边
+ *   - 顶导栏 shrink-0 → 中部消息区 flex-1 内滚自动滚底 → 底部 ChatInput shrink-0 吸底
+ *   - 800px 居中对话流
+ *
+ * 状态：
+ *   - phase = 'chat'    → 默认进入，展示端到端 mock 对话（覆盖全部 ChatMessage 子组件）
+ *   - phase = 'welcome' → 点「新会话」清空回到欢迎屏（Hero + 居中 ChatInput + 推荐 prompt）
+ *
+ * 关键词路由（输入框发送文本时）：
+ *   - 含「整理 / 分析 / 生成 / 梳理」 → 走完整任务规划链路：
+ *       1. AI 引导文本 + 任务规划卡（待用户处理）
+ *       2. 用户点「开始执行任务」→ 卡片置灰 + 追加用户消息「开始执行任务」
+ *       3. AI 流式执行流（每 600ms 推一步，用 useStreamingTaskGroups）
+ *       4. 全部跑完 → 追加 AI 短答 + 产物组 + 追问按钮组
+ *   - 含「停止 / 取消」 → 短答「已停止当前任务」
+ *   - 其他 → 短答从备选句池随机一句
+ *
+ * 操作栏 historyMode：
+ *   - 仅最后一条消息 historyMode=false（操作栏常显）
+ *   - 其余历史消息 historyMode=true（hover 父消息时才显示，占位高度始终保留）
+ */
+
+const STREAM_INTERVAL = 600;
+
+/* ── 端到端 mock 对话 ── */
+function buildInitMessages() {
+  return [
+    /* m1 用户：富文本 + tag + 附件 */
+    {
+      id: 'm1',
+      kind: 'user',
+      timestamp: '14:02',
+      userContent: [
+        { type: 'text', value: '帮我整理 ' },
+        {
+          type: 'entity',
+          icon: 'message-chat-square-stroked',
+          label: '智能会话:社交私信',
+          showChevron: true,
+        },
+        { type: 'text', value: ' 场景近 7 天的人工解决率，做一份分析报告' },
+      ],
+      userAttachments: [
+        { id: 'att-1', name: '抖音电商售后政策汇编.pdf', size: 327680 },
+      ],
+    },
+
+    /* m2 AI（合并：深度思考 + 引导文本 + 任务规划卡，已被用户处理 → 禁用置灰态） */
+    {
+      id: 'm2',
+      kind: 'ai-task-plan',
+      timestamp: '14:02',
+      thinking: {
+        ...DEFAULT_CHAT_THINKING,
+        state: 'completed',
+        defaultExpanded: false,
+      },
+      leadText: '好的，我先做一份任务规划，请稍后...',
+      planConfirmed: true,
+    },
+
+    /* m3 用户：开始执行任务 */
+    {
+      id: 'm3',
+      kind: 'user',
+      timestamp: '14:03',
+      userContent: [{ type: 'text', value: '开始执行任务' }],
+    },
+
+    /* m4 AI：完整执行流消息（执行流 + 总结文本 + 产物组 + 追问） */
+    {
+      id: 'm4',
+      kind: 'ai-flow',
+      timestamp: '14:08',
+      taskGroups: DEFAULT_CHAT_TASK_GROUPS.map((g) => ({ ...g, status: 'completed' })),
+      resultText: DEFAULT_CHAT_RESULT,
+      resultArtifacts: DEFAULT_CHAT_RESULT_ARTIFACTS,
+      followUps: DEFAULT_CHAT_FOLLOW_UPS,
+    },
+  ];
+}
+
+/* ── 关键词 → 回复路由 ── */
+const TASK_KEYWORDS = ['整理', '分析', '生成', '梳理', '输出', '汇总'];
+const STOP_KEYWORDS = ['停止', '取消'];
+const GENERIC_REPLIES = [
+  '收到，已记下来。',
+  '明白了，我马上处理。',
+  '没问题，需要我同步给团队吗？',
+  '好的，我先按这个思路推进。',
+];
+
+const FOLLOW_UP_REPLIES = {
+  批量测试当前策略: {
+    resultText:
+      '已基于当前策略版本完成一轮模拟批测：覆盖 240 条近 7 天售后会话，重点校验退货退款、换货、拒收、运费归属 4 类路径。通过 226 条，需人工复核 14 条，风险主要集中在「签收超时但存在物流异常」和「凭证缺失但用户强诉求」两个边界场景。建议先修正升级口径，再进入 10% 灰度。',
+    resultArtifacts: [
+      {
+        id: 'policy-batch-report',
+        type: 'batch-report',
+        title: '当前策略批量测试报告',
+        meta: '批测 · 240 条样本',
+      },
+      {
+        id: 'policy-risk-table',
+        type: 'table',
+        title: '未通过与需复核样本明细',
+        meta: '表格 · 14 条高风险',
+      },
+    ],
+    followUps: ['查看未通过样本', '生成策略修复建议', '同步到飞书文档'],
+  },
+  批量测试当前节点: {
+    resultText:
+      '已围绕当前节点做节点级模拟测试：共回放 96 条命中样本，覆盖入参缺失、类目白名单、签收时效、凭证有效性、运费判责 5 个分支。当前节点通过率 92.7%，失败样本多出现在「凭证材料为空但节点仍继续下钻」的路径，建议补一个必填校验和兜底转人工分支。',
+    resultArtifacts: [
+      {
+        id: 'node-batch-report',
+        type: 'batch-report',
+        title: '当前节点回放测试报告',
+        meta: '批测 · 96 条样本',
+      },
+      {
+        id: 'node-coverage-sheet',
+        type: 'table',
+        title: '节点分支覆盖矩阵',
+        meta: '表格 · 5 个分支',
+      },
+    ],
+    followUps: ['定位失败分支', '补充节点断言', '生成回归测试集'],
+  },
+  '开启 AB 实验': {
+    resultText:
+      '已生成 AB 实验草案：A 组保持当前售后策略，B 组启用优化后的凭证校验和升级口径，建议先以 10% 流量灰度 24 小时。主指标看人工解决率和一次答复命中率，护栏指标看客诉率、转人工率、平均处理时长；若护栏波动超过 3%，自动暂停 B 组放量。',
+    resultArtifacts: [
+      {
+        id: 'ab-strategy',
+        type: 'strategy',
+        title: '售后策略 AB 实验方案',
+        meta: '策略 · 10% 灰度',
+      },
+      {
+        id: 'ab-metric-sheet',
+        type: 'table',
+        title: 'AB 实验指标看板配置',
+        meta: '表格 · 7 个指标',
+      },
+    ],
+    followUps: ['生成实验配置', '补充护栏指标', '查看放量计划'],
+  },
+};
+
+const PROMPT_SUGGESTIONS = [
+  '整理抖音电商售后退换货政策',
+  '分析智能会话场景近 7 天解决率',
+  '生成 AB 实验方案',
+];
+
+function nowHHmm() {
+  const d = new Date();
+  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+
+function routeReply(text) {
+  if (FOLLOW_UP_REPLIES[text]) {
+    return { type: 'follow-up-result', ...FOLLOW_UP_REPLIES[text] };
+  }
+  if (STOP_KEYWORDS.some((k) => text.includes(k))) {
+    return { type: 'short', text: '已停止当前任务，需要时再叫我。' };
+  }
+  if (TASK_KEYWORDS.some((k) => text.includes(k))) {
+    return { type: 'task' };
+  }
+  return { type: 'short', text: GENERIC_REPLIES[Math.floor(Math.random() * GENERIC_REPLIES.length)] };
+}
+
+/* ── 单条消息 → ChatMessage props 映射 ──
+ *  isLatest：是否为列表中最后一条（决定 historyMode 是否启用）
+ *  handlers：所有交互回调集合
+ *    · onPlanConfirm(msgId) — 任务规划卡「开始执行任务」点击
+ *    · onPlanCancel(msgId)  — 任务规划卡「取消」点击
+ *    · onFollowUpSelect(text) — 追问 chip 点击（默认作为新一轮对话发出）
+ */
+function messageToChatProps(msg, isLatest, handlers = {}) {
+  const { onPlanConfirm, onPlanCancel, onFollowUpSelect } = handlers;
+  const baseProps = {
+    className: msg.className || '',
+  };
+  const baseActions = {
+    showCopy: true,
+    showQuote: true,
+    showLike: true,
+    showDislike: true,
+    historyMode: !isLatest,
+  };
+
+  /* 把字符串数组包装成 { items, onSelect } 形式，让点击 chip 直接发起会话 */
+  const wrapFollowUps = (raw) => {
+    if (!raw) return null;
+    const items = Array.isArray(raw) ? raw : raw.items;
+    if (!Array.isArray(items) || items.length === 0) return null;
+    return {
+      items,
+      onSelect: (item) => {
+        const label = typeof item === 'string' ? item : item?.label;
+        if (label && onFollowUpSelect) onFollowUpSelect(label);
+      },
+    };
+  };
+
+  if (msg.kind === 'user') {
+    return {
+      ...baseProps,
+      role: 'user',
+      timestamp: msg.timestamp,
+      userContent: msg.userContent,
+      userAttachments: msg.userAttachments,
+      actions: baseActions,
+    };
+  }
+
+  if (msg.kind === 'ai-text') {
+    return {
+      ...baseProps,
+      role: 'ai',
+      header: true,
+      title: '',
+      steps: null,
+      resultText: msg.resultText,
+      timestamp: msg.timestamp,
+      actions: baseActions,
+    };
+  }
+
+  if (msg.kind === 'ai-thinking') {
+    return {
+      ...baseProps,
+      role: 'ai',
+      header: true,
+      title: '',
+      steps: null,
+      thinking: msg.thinking,
+      resultText: msg.resultText,
+      timestamp: msg.timestamp,
+      actions: baseActions,
+    };
+  }
+
+  if (msg.kind === 'ai-task-plan') {
+    /* 任务规划卡：未操作时操作栏自动隐藏（ChatMessage 内部 showMessageActions 兜底），
+     * 处理后变为历史消息按 historyMode 走；defaultConfirmed=true 让历史卡片直接禁用置灰
+     * 可选叠加 thinking，让深度思考 + 引导文本 + 卡片合并到同一条 AI 消息中 */
+    return {
+      ...baseProps,
+      role: 'ai',
+      header: true,
+      title: '',
+      steps: null,
+      thinking: msg.thinking || null,
+      leadText: msg.leadText,
+      plan: {
+        ...DEFAULT_CHAT_PLAN,
+        defaultConfirmed: msg.planConfirmed === true,
+        onPrimaryAction: () => onPlanConfirm && onPlanConfirm(msg.id),
+        onSecondaryAction: () => onPlanCancel && onPlanCancel(msg.id),
+      },
+      timestamp: msg.timestamp,
+      actions: baseActions,
+    };
+  }
+
+  if (msg.kind === 'ai-flow') {
+    /* 完整执行流消息：执行流 + 总结文本 + 产物组 + 追问 都可以同时存在；
+     * 流式播放期间（stream=true）整条消息不显示操作栏，播完后转为最新消息显示 */
+    return {
+      ...baseProps,
+      role: 'ai',
+      header: true,
+      title: '',
+      steps: null,
+      taskGroups: msg.taskGroups,
+      resultText: msg.resultText,
+      resultArtifacts: msg.resultArtifacts,
+      followUps: wrapFollowUps(msg.followUps),
+      taskBadge: msg.taskBadge,
+      timestamp: msg.timestamp,
+      actions: msg.stream === true ? null : baseActions,
+    };
+  }
+
+  /* ai-result：兼容旧消息形态（短答文本 + 产物组 + 追问，独立成一条） */
+  return {
+    ...baseProps,
+    role: 'ai',
+    header: true,
+    title: '',
+    steps: null,
+    resultText: msg.resultText,
+    resultArtifacts: msg.resultArtifacts,
+    followUps: wrapFollowUps(msg.followUps),
+    taskBadge: msg.taskBadge,
+    timestamp: msg.timestamp,
+    actions: baseActions,
+  };
+}
+
+export default function ChatConversationPattern({
+  title = '抖音电商客服售后政策梳理',
+}) {
+  const [phase, setPhase] = useState('chat'); // 'chat' | 'welcome'
+  const [messages, setMessages] = useState(buildInitMessages);
+  /* ── ChatInput 受控状态机 ──
+   * inputView：'default' | 'replying' | 'busy'
+   *   · default  → 静止 / 失焦 / AI 完成回复（含 replying & busy 完成）
+   *   · replying → AI 短答中（短文本回复 600ms）
+   *   · busy     → AI 任务执行中（流式跑 taskGroups）
+   * prefillText / prefillSeed：欢迎页推荐 chip 点击时把文本回填到输入框，等用户主动点发送 */
+  const [inputView, setInputView] = useState('default');
+  const [prefillText, setPrefillText] = useState('');
+  const [prefillSeed, setPrefillSeed] = useState(0);
+  const replyTimerRef = useRef(null);
+  const busyTimerRef = useRef(null);
+  const scrollRef = useRef(null);
+  const idSeedRef = useRef(100);
+  const nextId = useCallback((prefix = 'm') => `${prefix}${++idSeedRef.current}`, []);
+
+  /* chip 回填到输入框（覆盖当前草稿 + 自动聚焦） */
+  const prefillInput = useCallback((text) => {
+    setPrefillText(text || '');
+    setPrefillSeed((s) => s + 1);
+  }, []);
+
+  /* 卸载时清掉计时器，避免内存泄漏 / setState on unmounted */
+  useEffect(
+    () => () => {
+      if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+      if (busyTimerRef.current) clearTimeout(busyTimerRef.current);
+    },
+    [],
+  );
+
+  /* 自动滚到底：用 ResizeObserver 监听消息容器内容高度变化
+   * 覆盖所有场景：新消息追加、流式 step 逐步推出、ChatMessage 内部折叠展开 */
+  useEffect(() => {
+    if (phase !== 'chat') return undefined;
+    const el = scrollRef.current;
+    if (!el) return undefined;
+    const inner = el.firstElementChild;
+    if (!inner) return undefined;
+    const ro = new ResizeObserver(() => {
+      el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
+    });
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, [phase]);
+
+  /* 重置回欢迎状态 */
+  const handleNewSession = useCallback(() => {
+    setMessages([]);
+    setPhase('welcome');
+  }, []);
+
+  /* ── 取消链路：用户在任务规划卡里点「取消」 ──
+   *   1. 标记该任务规划卡为「已确认」（卡片置灰）
+   *   2. 追加用户消息「取消」
+   *   3. ChatInput 进 replying（短答态）+ 600ms 后追加 AI 寒暄 + 回 default */
+  const handlePlanCancel = useCallback(
+    (planMsgId) => {
+      setMessages((prev) =>
+        prev.map((m) => (m.id === planMsgId ? { ...m, planConfirmed: true } : m)),
+      );
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: nextId('u'),
+          kind: 'user',
+          timestamp: nowHHmm(),
+          userContent: [{ type: 'text', value: '取消' }],
+        },
+      ]);
+      setInputView('replying');
+      if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+      replyTimerRef.current = setTimeout(() => {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: nextId('a'),
+            kind: 'ai-text',
+            timestamp: nowHHmm(),
+            resultText: '好的，已取消任务。还有其他问题随时可以找我～',
+          },
+        ]);
+        setInputView('default');
+      }, 600);
+    },
+    [nextId],
+  );
+
+  /* ── 任务规划链路：用户在任务规划卡里点「开始执行任务」 ── */
+  const handlePlanConfirm = useCallback(
+    (planMsgId) => {
+      /* 1) 标记该任务规划卡为「已确认」（持久化到消息数据，重渲染时也是禁用态） */
+      setMessages((prev) =>
+        prev.map((m) => (m.id === planMsgId ? { ...m, planConfirmed: true } : m)),
+      );
+
+      const flowMsgId = nextId('flow');
+
+      /* 2) 立即追加：用户消息「开始执行任务」+ AI 流式执行流（带 stream 标记，由 StreamingChatMessage 接管） */
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: nextId('u'),
+          kind: 'user',
+          timestamp: nowHHmm(),
+          userContent: [{ type: 'text', value: '开始执行任务' }],
+        },
+        {
+          id: flowMsgId,
+          kind: 'ai-flow',
+          timestamp: nowHHmm(),
+          taskGroups: DEFAULT_CHAT_TASK_GROUPS,
+          stream: true,
+        },
+      ]);
+
+      /* 3) ChatInput 进 busy（任务执行态，编辑器锁定，仅显示状态文案 + 停止按钮） */
+      setInputView('busy');
+
+      /* 4) 估算流式总时长：(总 step 数 + 1 buffer) × 600ms，跑完后追加结果消息 + 输入框回 default */
+      const totalSteps = DEFAULT_CHAT_TASK_GROUPS.reduce(
+        (sum, g) => sum + (g.steps?.length ?? 0),
+        0,
+      );
+      const totalMs = (totalSteps + 1) * STREAM_INTERVAL;
+      if (busyTimerRef.current) clearTimeout(busyTimerRef.current);
+      busyTimerRef.current = setTimeout(() => {
+        /* 流式播完 → 更新同一条消息：取消 stream 标记 + 所有组转 completed +
+         * 补上总结文本 + 产物组 + 追问。整条消息此时变成「完整 AI 回复」一条到底 */
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.id === flowMsgId
+              ? {
+                  ...m,
+                  stream: false,
+                  taskGroups: DEFAULT_CHAT_TASK_GROUPS.map((g) => ({
+                    ...g,
+                    status: 'completed',
+                  })),
+                  resultText: DEFAULT_CHAT_RESULT,
+                  resultArtifacts: DEFAULT_CHAT_RESULT_ARTIFACTS,
+                  followUps: DEFAULT_CHAT_FOLLOW_UPS,
+                  timestamp: nowHHmm(),
+                }
+              : m,
+          ),
+        );
+        setInputView('default');
+      }, totalMs);
+    },
+    [nextId],
+  );
+
+  /* ── 用户输入框发送 ──
+   * 状态机：default → replying → 600ms 后追加 AI 回复 → default
+   * 任务关键词分支也走 replying 态（正在规划中），规划卡推出后回 default 等用户处理卡片 */
+  const handleSend = useCallback(
+    (text, ctx = {}) => {
+      const trimmed = (text || '').trim();
+      if (!trimmed) return;
+
+      /* 欢迎屏发送第一条消息 → 切到 chat 阶段 */
+      if (phase === 'welcome') setPhase('chat');
+
+      const userTime = nowHHmm();
+
+      /* 优先用 ctx.segments 还原 chip + 文本混排结构（保留 entity tag 渲染）
+       * 若拿不到 segments（旧调用方）则回退到一段纯 text token */
+      const userContent = Array.isArray(ctx.segments) && ctx.segments.length > 0
+        ? ctx.segments
+        : [{ type: 'text', value: trimmed }];
+
+      /* 1) 立即追加用户气泡 + ChatInput 进 replying（短答态，编辑器锁定） */
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: nextId('u'),
+          kind: 'user',
+          timestamp: userTime,
+          userContent,
+          className: ctx.source === 'follow-up' ? 'tfds-followup-user-pop' : '',
+        },
+      ]);
+      setInputView('replying');
+
+      const reply = routeReply(trimmed);
+      if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+
+      /* 2) 追问结果：点击 follow-up chip 等价于立即发送，并模拟生成对应的新答案 */
+      if (reply.type === 'follow-up-result') {
+        replyTimerRef.current = setTimeout(() => {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: nextId('a'),
+              kind: 'ai-result',
+              timestamp: nowHHmm(),
+              resultText: reply.resultText,
+              resultArtifacts: reply.resultArtifacts,
+              followUps: reply.followUps,
+              className: ctx.source === 'follow-up' ? 'tfds-followup-ai-pop' : '',
+            },
+          ]);
+          setInputView('default');
+        }, 600);
+        return;
+      }
+
+      /* 3) 任务流：AI 推规划卡（待用户处理）；规划卡出现后输入框回 default 让用户操作卡片 */
+      if (reply.type === 'task') {
+        replyTimerRef.current = setTimeout(() => {
+          setMessages((prev) => [
+            ...prev,
+            {
+              id: nextId('plan'),
+              kind: 'ai-task-plan',
+              timestamp: nowHHmm(),
+              leadText: '我开始规划啦，请稍后...',
+              planConfirmed: false,
+            },
+          ]);
+          setInputView('default');
+        }, 600);
+        return;
+      }
+
+      /* 4) 短答：600ms 后追加 AI 短答 + 输入框回 default */
+      replyTimerRef.current = setTimeout(() => {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: nextId('a'),
+            kind: 'ai-text',
+            timestamp: nowHHmm(),
+            resultText: reply.text,
+            className: ctx.source === 'follow-up' ? 'tfds-followup-ai-pop' : '',
+          },
+        ]);
+        setInputView('default');
+      }, 600);
+    },
+    [phase, nextId],
+  );
+
+  const handleFollowUpSend = useCallback(
+    (text) => {
+      handleSend(text, { source: 'follow-up' });
+    },
+    [handleSend],
+  );
+
+  /* ── 用户主动停止：replying / busy 期间点 ChatInput 的停止按钮 ──
+   * 立即清掉计时器 + 输入框回 default + 追加 AI 短答提示 */
+  const handleStop = useCallback(() => {
+    if (replyTimerRef.current) {
+      clearTimeout(replyTimerRef.current);
+      replyTimerRef.current = null;
+    }
+    if (busyTimerRef.current) {
+      clearTimeout(busyTimerRef.current);
+      busyTimerRef.current = null;
+    }
+    setInputView('default');
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: nextId('a'),
+        kind: 'ai-text',
+        timestamp: nowHHmm(),
+        resultText: '已停止当前任务，需要时再叫我。',
+      },
+    ]);
+  }, [nextId]);
+
+  /* 新会话：清空消息 + 切欢迎屏 + 重置输入框状态 */
+  const handleNewSessionFull = useCallback(() => {
+    if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+    if (busyTimerRef.current) clearTimeout(busyTimerRef.current);
+    setInputView('default');
+    handleNewSession();
+  }, [handleNewSession]);
+
+  const lastIdx = messages.length - 1;
+
+  /* 当前阶段标题：欢迎屏标题简化为「新会话」 */
+  const displayTitle = phase === 'welcome' ? '新会话' : title;
+
+  return (
+    <div
+      className="flex h-full w-full min-h-0 flex-col overflow-hidden"
+      style={{
+        flex: '1 0 auto',
+        alignSelf: 'stretch',
+        background: 'var(--color-blueGrey-200, #F2F4F7)',
+        borderRadius: 'inherit',
+        border: '1px solid var(--color-border-default, #E4E7EC)',
+      }}
+    >
+      <TopBar title={displayTitle} onNewSession={handleNewSessionFull} disableNewSession={phase === 'welcome'} />
+
+      {phase === 'chat' ? (
+        <ChatPhase
+          scrollRef={scrollRef}
+          messages={messages}
+          lastIdx={lastIdx}
+          handlers={{
+            onPlanConfirm: handlePlanConfirm,
+            onPlanCancel: handlePlanCancel,
+            onFollowUpSelect: handleFollowUpSend,
+          }}
+          onSend={handleSend}
+          onStop={handleStop}
+          inputView={inputView}
+          prefillText={prefillText}
+          prefillSeed={prefillSeed}
+        />
+      ) : (
+        <WelcomePhase
+          onSend={handleSend}
+          onStop={handleStop}
+          onPrefill={prefillInput}
+          inputView={inputView}
+          prefillText={prefillText}
+          prefillSeed={prefillSeed}
+        />
+      )}
+    </div>
+  );
+}
+
+/* ============================================================
+ * ChatPhase — 对话阶段：消息流 + 底部 ChatInput
+ * ============================================================ */
+function ChatPhase({ scrollRef, messages, lastIdx, handlers, onSend, onStop, inputView, prefillText, prefillSeed }) {
+  /* 上下 40px 渐隐遮罩：让消息进入 / 离开滚动视口时柔和过渡，不硬切
+   * 顶部渐隐仅在「可向上滚」时启用，回到第一条时取消，避免首条被遮淡 */
+  const [atTop, setAtTop] = useState(true);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return undefined;
+    const update = () => setAtTop(el.scrollTop <= 4);
+    update();
+    el.addEventListener('scroll', update, { passive: true });
+    return () => el.removeEventListener('scroll', update);
+  }, [scrollRef, messages.length]);
+  const FADE_MASK = atTop
+    ? 'linear-gradient(to bottom, #000 0, #000 calc(100% - 40px), transparent 100%)'
+    : 'linear-gradient(to bottom, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%)';
+  return (
+    <>
+      <style>
+        {`
+          @keyframes tfds-followup-user-pop {
+            0% { opacity: 0; transform: translate(28px, -8px) scale(0.98); }
+            100% { opacity: 1; transform: translate(0, 0) scale(1); }
+          }
+          @keyframes tfds-followup-ai-pop {
+            0% { opacity: 0; transform: translateY(8px); }
+            100% { opacity: 1; transform: translateY(0); }
+          }
+          .tfds-followup-user-pop {
+            animation: tfds-followup-user-pop 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
+            transform-origin: right center;
+          }
+          .tfds-followup-ai-pop {
+            animation: tfds-followup-ai-pop 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .tfds-followup-user-pop,
+            .tfds-followup-ai-pop {
+              animation: none;
+            }
+          }
+        `}
+      </style>
+
+      {/* 消息区：自适应剩余高度 + 内滚 + 上下渐隐 */}
+      <div
+        ref={scrollRef}
+        className="w-full flex-1 min-h-0 overflow-y-auto"
+        style={{
+          padding: '8px 0',
+          maskImage: FADE_MASK,
+          WebkitMaskImage: FADE_MASK,
+        }}
+      >
+        <div
+          className="mx-auto flex w-full flex-col gap-2"
+          /* 底部 60px padding：避免最后一条消息贴住底部 ChatInput */
+          style={{ width: '800px', maxWidth: '100%', padding: '0 20px 60px' }}
+        >
+          {messages.map((m, idx) => {
+            const isLatest = idx === lastIdx;
+            const props = messageToChatProps(m, isLatest, handlers);
+            /* 流式执行流走子组件：挂载即按 600ms 节奏推 step；流式期间不传操作栏 */
+            if (m.kind === 'ai-flow' && m.stream === true) {
+              return <StreamingChatMessage key={m.id} {...props} taskGroups={m.taskGroups} />;
+            }
+            return <ChatMessage key={m.id} {...props} />;
+          })}
+        </div>
+      </div>
+
+      {/* 底部 ChatInput：shrink-0 吸底 */}
+      <div className="w-full shrink-0" style={{ padding: '12px 0 20px' }}>
+        <div
+          className="mx-auto w-full"
+          style={{ width: '800px', maxWidth: '100%', padding: '0 8px' }}
+        >
+          {/* ChatInput 受控状态机：variant 由父组件 inputView 决定（default/replying/busy 切换）
+           * autoReplyOnSend=false 关掉内部"发送即跳 replying"自动行为，统一由父组件根据消息链路调度
+           * prefillSeed 变化时把 prefillText 覆盖到编辑器并聚焦（用于欢迎页推荐 chip 回填） */}
+          <ChatInput
+            variant={inputView}
+            autoReplyOnSend={false}
+            prefillText={prefillText}
+            prefillSeed={prefillSeed}
+            placeholder="继续对话，或输入「整理 / 分析 / 生成」触发任务流..."
+            onSend={onSend}
+            onStop={onStop}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+/* ============================================================
+ * WelcomePhase — 欢迎阶段：CATCAT 头像 + OLA AI 标题 + 欢迎语 + 推荐 chip
+ * 复用 CopilotPagePattern 的欢迎态视觉，ChatInput 仍底部吸底
+ * ============================================================ */
+function WelcomePhase({ onSend, onStop, onPrefill, inputView, prefillText, prefillSeed }) {
+  return (
+    <>
+      {/* 中部 hero：自适应剩余高度，居中展示头像/标题/欢迎语/chips */}
+      <div className="flex flex-1 min-h-0 w-full items-center justify-center overflow-y-auto">
+        <div
+          className="flex w-full flex-col items-center justify-center gap-6"
+          style={{ width: '440px', maxWidth: '100%', padding: '40px 24px' }}
+        >
+          {/* AI 头像 + 标题 */}
+          <div className="flex flex-col items-center gap-3">
+            {/* 头像：渐变描边圆 + 蓝色投影 + CATCAT */}
+            <div style={{ position: 'relative', width: '66px', height: '66px', flexShrink: 0 }}>
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: '0',
+                  borderRadius: '50%',
+                  padding: '0.5px',
+                  background:
+                    'linear-gradient(135deg, rgba(63,226,213,0.6) 0%, rgba(64,147,224,0.6) 35%, rgba(122,97,250,0.6) 65%, rgba(214,130,235,0.6) 100%)',
+                }}
+              >
+                <div
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    borderRadius: '50%',
+                    background: [
+                      'linear-gradient(42deg, #FFF 11.61%, rgba(255,255,255,0.00) 37.84%)',
+                      'linear-gradient(74deg, rgba(63,226,213,0.15) 12.18%, rgba(64,147,224,0.15) 39.9%, rgba(122,97,250,0.15) 63.86%, rgba(214,130,235,0.15) 86.38%)',
+                      '#FFF',
+                    ].join(', '),
+                    boxShadow: '0px 8px 15px rgba(180,218,244,0.50)',
+                  }}
+                />
+              </div>
+              <img
+                src={catcatSvg}
+                alt="OLA AI"
+                style={{
+                  position: 'absolute',
+                  width: '32px',
+                  height: '32px',
+                  top: '50%',
+                  left: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  zIndex: 1,
+                }}
+              />
+            </div>
+            <span
+              className="whitespace-nowrap [font-weight:var(--font-semibold)]"
+              style={{
+                fontSize: '18px',
+                lineHeight: '24px',
+                letterSpacing: '-0.03em',
+                color: 'var(--foreground, #0F1C35)',
+              }}
+            >
+              OLA AI
+            </span>
+          </div>
+
+          {/* 欢迎语 */}
+          <p
+            className="text-sm text-center leading-5 m-0"
+            style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.6))', width: '100%' }}
+          >
+            您好！我是您的智能小助手 ✨ ~ 我能帮您整理资料、分析数据、规划任务、生成报告等～
+          </p>
+
+          {/* 快捷建议 chips（垂直堆叠 + 白底内阴影 + 右箭头，复用 Copilot 风格）
+           * 行为约定：点击只回填到输入框（覆盖草稿）+ 自动聚焦，等用户主动点发送 */}
+          <div className="flex flex-col gap-2 w-full">
+            {PROMPT_SUGGESTIONS.map((text) => (
+              <button
+                key={text}
+                type="button"
+                onClick={() => onPrefill(text)}
+                className="flex items-center justify-between w-full cursor-pointer border-0 text-left"
+                style={{
+                  padding: '10px 12px',
+                  borderRadius: '8px',
+                  background: 'rgba(255,255,255,0.6)',
+                  boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.9)',
+                  fontSize: '12px',
+                  lineHeight: '16px',
+                  color: 'var(--foreground, #0F1C35)',
+                  fontFamily: 'inherit',
+                  transition: 'background 150ms ease',
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.background = 'rgba(255,255,255,0.85)';
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.background = 'rgba(255,255,255,0.6)';
+                }}
+              >
+                <span>{text}</span>
+                <Icon name="arrow-narrow-right-stroked" size={12} />
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* 底部 ChatInput：shrink-0 吸底，与 chat 阶段保持一致 */}
+      <div className="w-full shrink-0" style={{ padding: '12px 0 20px' }}>
+        <div
+          className="mx-auto w-full"
+          style={{ width: '800px', maxWidth: '100%', padding: '0 8px' }}
+        >
+          <ChatInput
+            variant={inputView}
+            autoReplyOnSend={false}
+            prefillText={prefillText}
+            prefillSeed={prefillSeed}
+            placeholder="需要我为你做什么…"
+            onSend={onSend}
+            onStop={onStop}
+          />
+        </div>
+      </div>
+    </>
+  );
+}
+
+/* ============================================================
+ * StreamingChatMessage — 把执行流的 taskGroups 接到 useStreamingTaskGroups
+ * 挂载即开始按 600ms 节奏一条一条刷出；最新一条不显示操作栏
+ * ============================================================ */
+function StreamingChatMessage({ taskGroups, ...rest }) {
+  const streamed = useStreamingTaskGroups(taskGroups, { intervalMs: STREAM_INTERVAL });
+  return <ChatMessage {...rest} taskGroups={streamed} />;
+}
+
+/* ============================================================
+ * TopBar — 顶导栏（参考 Figma OLA3.0 / 993:74300 独立任务导航）
+ * 三段式：左 187px 品牌 + 入口 / 中 flex-1 当前会话 / 右 分享
+ *   · 左：CATCAT logo + 「OLA」品牌字 + 新建会话 / 历史记录两个 ghost 图标按钮
+ *   · 中：32×32 渐变描边的会话图标（装饰，非交互）+ 当前会话标题
+ *   · 右：带文字的 outline 「分享」按钮
+ * onNewSession 绑定到左侧 message-plus-square 按钮（即 Figma 中的「新建任务」入口）
+ * ============================================================ */
+function TopBar({ title, onNewSession, disableNewSession }) {
+  return (
+    <div
+      className="flex items-center shrink-0 w-full"
+      style={{ padding: '16px 24px', gap: '24px' }}
+    >
+      {/* 左：品牌 + 入口（固定 187px，与 Figma 对齐） */}
+      <div className="flex shrink-0 items-center justify-between" style={{ width: '187px' }}>
+        <div className="flex items-center gap-2">
+          <img
+            src={catcatSvg}
+            alt="OLA"
+            style={{ width: '28px', height: '28px', flexShrink: 0 }}
+          />
+          <span
+            style={{
+              fontFamily: '"Arial Black", "PingFang SC", sans-serif',
+              fontSize: '14px',
+              lineHeight: '20px',
+              fontWeight: 900,
+              color: 'var(--foreground, #222727)',
+            }}
+          >
+            OLA
+          </span>
+        </div>
+        <div className="flex shrink-0 items-center">
+          <Button
+            variant="ghost-black"
+            iconOnly
+            icon={<Icon name="message-plus-square-stroked" />}
+            onClick={onNewSession}
+            disabled={disableNewSession}
+            aria-label="新建会话"
+          />
+          <Button
+            variant="ghost-black"
+            iconOnly
+            icon={<Icon name="clock-rewind-stroked" />}
+            aria-label="历史记录"
+          />
+        </div>
+      </div>
+
+      {/* 中：会话图标 + 标题（自适应剩余宽，标题超长截断） */}
+      <div
+        className="flex flex-1 min-w-0 items-center"
+        style={{ gap: '12px', padding: '0 12px' }}
+      >
+        <div
+          className="flex shrink-0 items-center justify-center"
+          style={{
+            width: '32px',
+            height: '32px',
+            borderRadius: '8px',
+            border: '0.5px solid var(--color-border-default, rgba(34,39,39,0.09))',
+            background:
+              'linear-gradient(180deg, rgba(200,214,210,0.09) 0%, rgba(52,59,57,0.09) 100%)',
+            color: 'var(--foreground, rgba(34,39,39,0.8))',
+          }}
+        >
+          <Icon name="message-circle-02-stroked" />
+        </div>
+        <h1
+          className="m-0 truncate [font-weight:var(--font-semibold)]"
+          style={{
+            fontSize: '16px',
+            lineHeight: '22px',
+            color: 'var(--foreground, rgba(34,39,39,0.8))',
+          }}
+        >
+          {title}
+        </h1>
+      </div>
+
+      {/* 右：分享 */}
+      <div className="flex shrink-0 items-center">
+        <Button variant="outline-black" icon={<Icon name="share-07-stroked" />}>
+          分享
+        </Button>
+      </div>
+    </div>
+  );
+}