@tfdesign/b-end 1.0.16 → 1.0.18

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

@@ -1,9 +1,17 @@
-import { useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../components/Button';
 import Tabs from '../components/Tabs';
 import ChatInput from '../components/ChatInput';
 import Switch from '../components/Switch';
 import Icon from '../components/Icon';
+import ChatMessage, {
+  DEFAULT_CHAT_FORM_CONFIRM,
+  DEFAULT_CHAT_RESULT,
+  DEFAULT_CHAT_RESULT_ARTIFACTS,
+  DEFAULT_CHAT_TASK_GROUPS,
+  DEFAULT_CHAT_THINKING,
+  useStreamingTaskGroups,
+} from '../components/ChatMessage';
 import catcatSvg from '../components/file-type-assets/catcat.svg';
 
 /**
@@ -35,8 +43,305 @@ const COPILOT_SUGGESTIONS = [
   '基于批测报告分析优化方向和问题',
 ];
 
+const STREAM_INTERVAL = 600;
+const AUTO_FLOW_TIMINGS = {
+  thinkingDone: 900,
+  confirmShow: 1400,
+};
+
+const DEFAULT_CONVERSATION_CONTEXT = {
+  account: '抖音社区-社交-私信',
+  environment: '服务策略 / 线上策略 V8',
+  mock: '近 7 天私信会话样本 186 条',
+  conclusion: '上一轮已沉淀私信场景的服务策略问题清单，可继续追问优化方向。',
+  artifacts: DEFAULT_CHAT_RESULT_ARTIFACTS.map((item) => item.title),
+};
+
+const TASK_KEYWORDS = ['整理', '分析', '生成', '梳理', '输出', '汇总', '优化'];
+const STOP_KEYWORDS = ['停止', '取消'];
+const GENERIC_REPLIES = [
+  '收到，我会结合当前策略上下文继续处理。',
+  '明白了，我先按这个方向帮你梳理。',
+  '可以，我会基于当前私信场景继续补充分析。',
+  '没问题，我先整理成可执行的建议给你。',
+];
+
+const FOLLOW_UP_REPLIES = {
+  查看风险样本: {
+    resultText:
+      '已筛出 12 条高风险私信样本，主要集中在「用户情绪升级但意图识别偏弱」和「跨轮追问时上下文衔接不足」两类问题。建议优先补强情绪识别权重、补齐意图转人工闸门，并针对高投诉场景增加策略兜底。',
+    resultArtifacts: [
+      { id: 'risk-samples', type: 'table', title: '高风险私信样本明细', meta: '表格 · 12 条' },
+      { id: 'risk-summary', type: 'document', title: '问题样本归因摘要', meta: '文档 · 2 页' },
+    ],
+    followUps: ['生成优化建议', '补充验证方案', '导出给运营复盘'],
+  },
+  生成优化建议: {
+    resultText:
+      '已生成一版服务策略优化建议：针对私信挽回、情绪安抚、转人工兜底和促成成交 4 条链路补充了策略节点，建议先在高风险词命中场景灰度 10% 验证一次答复命中率和人工接管率，再逐步放量。',
+    resultArtifacts: [
+      { id: 'strategy-revamp', type: 'strategy', title: '服务策略优化建议', meta: '策略 · 4 条主链路' },
+      { id: 'validation-plan', type: 'document', title: '灰度验证计划', meta: '文档 · 3 项指标' },
+    ],
+    followUps: ['生成 AB 实验方案', '补充灰度指标', '同步到飞书文档'],
+  },
+  补充验证方案: {
+    resultText:
+      '我补充了一版验证方案：建议按照新客转化、老客挽回、风险升级 3 类会话拆分样本，分别观察策略命中率、追问完成率和转人工率，并补一组高情绪用户样本做极端场景回放。',
+    resultArtifacts: [
+      { id: 'validation-sheet', type: 'table', title: '验证样本拆分矩阵', meta: '表格 · 3 类场景' },
+      { id: 'replay-plan', type: 'batch-report', title: '极端场景回放计划', meta: '回放 · 28 条样本' },
+    ],
+    followUps: ['生成批测任务', '查看高情绪样本', '补充策略兜底'],
+  },
+};
+
+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((keyword) => text.includes(keyword))) {
+    return { type: 'short', text: '已停止当前任务，需要时再叫我。' };
+  }
+  if (TASK_KEYWORDS.some((keyword) => text.includes(keyword))) {
+    return { type: 'task' };
+  }
+  return { type: 'short', text: GENERIC_REPLIES[Math.floor(Math.random() * GENERIC_REPLIES.length)] };
+}
+
+function buildThinkingContent(text, context) {
+  const artifacts = context.artifacts?.length ? context.artifacts.join('、') : '暂无历史产物';
+  return [
+    `用户本轮输入：${text}`,
+    `系统自动带入当前业务场景：${context.account}`,
+    `系统自动带入当前环境：${context.environment}`,
+    `系统自动带入样本范围：${context.mock}`,
+    `系统自动带入上一轮结论：${context.conclusion || '暂无历史结论'}`,
+    `系统自动带入上一轮产物：${artifacts}`,
+    '先完成上下文理解与执行口径确认，再进入自动执行流。',
+  ].join('\n');
+}
+
+function buildClarificationConfirms(context) {
+  return DEFAULT_CHAT_FORM_CONFIRM.map((confirm) => ({
+    ...confirm,
+    id: 'copilot-clarify-confirm',
+    title: '人工澄清确认',
+    primaryActionLabel: '确认并继续',
+    secondaryActionLabel: '',
+    formItems: [
+      {
+        id: 'scene',
+        label: '分析目标',
+        type: 'select',
+        placeholder: '请选择分析目标',
+        defaultValue: 'strategy-analysis',
+        options: [
+          { value: 'strategy-analysis', label: '服务策略分析' },
+          { value: 'conversation-review', label: '私信会话复盘' },
+          { value: 'ab-plan', label: 'AB 实验方案' },
+        ],
+        fullWidth: true,
+      },
+      {
+        id: 'channel',
+        label: '上下文来源',
+        type: 'select',
+        placeholder: '请选择上下文来源',
+        defaultValue: 'current-context',
+        options: [
+          {
+            value: 'current-context',
+            label: `使用当前页面上下文、${context.environment} 与 ${context.mock}`,
+          },
+          { value: 'refresh-mock', label: '刷新样本后继续分析' },
+          { value: 'manual-review', label: '先人工复核关键信息' },
+        ],
+        fullWidth: true,
+      },
+      {
+        id: 'remark',
+        label: '补充说明',
+        type: 'input',
+        placeholder: '请输入补充说明（可选）',
+        fullWidth: true,
+      },
+    ],
+  }));
+}
+
+function buildAutoFlowPayload(text, reply, context) {
+  if (reply.type === 'follow-up-result') {
+    return {
+      resultText: `${reply.resultText}\n\n本轮追问已自动继承当前业务场景、页面环境、样本范围和上一轮结论，无需重新补充上下文。`,
+      resultArtifacts: reply.resultArtifacts,
+      followUps: reply.followUps,
+    };
+  }
+
+  if (reply.type === 'task') {
+    return {
+      resultText:
+        `${DEFAULT_CHAT_RESULT}\n\n我已结合当前页面的「${context.account}」上下文继续执行，并会优先围绕服务策略、流程节点和批测风险给出建议。`,
+      resultArtifacts: DEFAULT_CHAT_RESULT_ARTIFACTS,
+      followUps: ['查看风险样本', '生成优化建议', '补充验证方案'],
+    };
+  }
+
+  return {
+    resultText:
+      `${reply.text} 已结合当前页面上下文继续处理「${text}」：当前场景为 ${context.account}，环境为 ${context.environment}，样本范围为 ${context.mock}。如果你需要更深入的结论，可以继续选择下方追问。`,
+    resultArtifacts: DEFAULT_CHAT_RESULT_ARTIFACTS.slice(0, 2),
+    followUps: ['继续细化结论', '补充一轮验证', '生成可交付文档'],
+  };
+}
+
+function getFlowTotalMs() {
+  const totalSteps = DEFAULT_CHAT_TASK_GROUPS.reduce(
+    (sum, group) => sum + (group.steps?.length ?? 0),
+    0,
+  );
+  return (totalSteps + 1) * STREAM_INTERVAL;
+}
+
+function hasActionablePrimaryButton(label) {
+  return typeof label === 'string' && label.trim().length > 0;
+}
+
+function confirmsRequireHumanGate(confirms) {
+  return Array.isArray(confirms) && confirms.some((confirm) => hasActionablePrimaryButton(confirm?.primaryActionLabel));
+}
+
+function messageToChatProps(msg, isLatest, handlers = {}) {
+  const {
+    onFollowUpSelect,
+    onConfirmPrimary,
+    onConfirmSecondary,
+    onConfirmOptionChange,
+    onConfirmFormChange,
+  } = handlers;
+  const baseActions = {
+    showCopy: true,
+    showQuote: true,
+    showLike: true,
+    showDislike: true,
+    historyMode: !isLatest,
+  };
+  const baseProps = { className: msg.className || '' };
+
+  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,
+      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: msg.thinking?.state === 'thinking' ? null : baseActions,
+    };
+  }
+
+  if (msg.kind === 'ai-confirm') {
+    return {
+      ...baseProps,
+      role: 'ai',
+      header: true,
+      title: '',
+      steps: null,
+      leadText: msg.leadText,
+      confirms: Array.isArray(msg.confirms)
+        ? msg.confirms.map((confirm) => ({
+          ...confirm,
+          onOptionChange: (value, option) => onConfirmOptionChange && onConfirmOptionChange(
+            msg.id,
+            confirm.id,
+            value,
+            option,
+          ),
+          onFormChange: (formValues, meta) => onConfirmFormChange && onConfirmFormChange(
+            msg.id,
+            confirm.id,
+            formValues,
+            meta,
+          ),
+          onPrimaryAction: (payload) => onConfirmPrimary && onConfirmPrimary(msg.id, confirm.id, {
+            ...payload,
+            primaryActionLabel: confirm.primaryActionLabel,
+          }),
+          onSecondaryAction: () => onConfirmSecondary && onConfirmSecondary(msg.id, confirm.id),
+        }))
+        : msg.confirms,
+      timestamp: msg.timestamp,
+      actions: baseActions,
+    };
+  }
+
+  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,
+  };
+}
+
+function StreamingChatMessage({ taskGroups, ...rest }) {
+  const streamed = useStreamingTaskGroups(taskGroups, { intervalMs: STREAM_INTERVAL });
+  return <ChatMessage {...rest} taskGroups={streamed} />;
+}
+
 export default function CopilotPagePattern() {
-  const [copilotOpen, setCopilotOpen] = useState(false);
+  const [copilotOpen, setCopilotOpen] = useState(true);
 
   return (
     <div
@@ -63,24 +368,24 @@ export default function CopilotPagePattern() {
 /* ────────────────────────────────────────────
    顶导栏
    左：返回 + 标题 + OLA AI 触发按钮
-   中：居中胶囊 Tab（绝对定位使其真正居中）
+   中：一级页面 Tab（宽度不足时整组换到第二行左对齐）
    右：版本 + 更多 + 次操作 + 主操作
 ──────────────────────────────────────────── */
 function TopBar({ copilotOpen, onToggleCopilot }) {
   return (
     <div className="shrink-0 px-4 py-4">
-      <div className="relative flex min-h-[36px] items-center">
-        <div className="flex min-w-0 flex-1 items-center gap-3 pr-4">
+      <div className="relative flex min-h-[36px] min-w-0 flex-wrap items-center gap-x-4 gap-y-3">
+        <div className="order-1 flex min-w-[280px] flex-1 items-center gap-3 xl:order-none">
           <TopBarLead copilotOpen={copilotOpen} onToggleCopilot={onToggleCopilot} />
         </div>
 
-        <div className="pointer-events-none absolute inset-x-0 flex justify-center">
-          <div className="pointer-events-auto flex min-w-0 items-center">
+        <div className="order-3 flex w-full min-w-0 justify-start xl:pointer-events-none xl:absolute xl:inset-x-0 xl:order-none xl:w-auto xl:justify-center">
+          <div className="xl:pointer-events-auto">
             <TopBarTabs />
           </div>
         </div>
 
-        <div className="ml-auto flex shrink-0 items-center gap-4 pl-4">
+        <div className="order-2 ml-auto flex shrink-0 items-center gap-4 xl:order-none">
           <TopBarActions />
         </div>
       </div>
@@ -91,27 +396,25 @@ function TopBar({ copilotOpen, onToggleCopilot }) {
 function TopBarLead({ copilotOpen, onToggleCopilot }) {
   return (
     <>
-      <Button variant="outline-black" iconOnly icon={<Icon name="arrow-left-stroked" />} tooltip="返回" aria-label="返回" />
-
       <span
-        className="font-semibold text-base leading-[22px] whitespace-nowrap"
+        className="min-w-0 truncate font-semibold [font-weight:var(--font-semibold)] text-base leading-[22px] whitespace-nowrap"
         style={{ color: 'var(--foreground, #0F1C35)' }}
       >
-        主策略：抖音社区-社交-私信
+        抖音社区-社交-私信
       </span>
 
       {!copilotOpen && (
-        <div
+        <Button
+          variant="outline-black"
+          radius="full"
           onClick={onToggleCopilot}
-          className="shrink-0 cursor-pointer"
+          className="shrink-0 border-transparent bg-[image:var(--gradient-ai-fill-2)] p-[1.5px] hover:bg-[image:var(--gradient-ai-fill-2)] active:bg-[image:var(--gradient-ai-fill-2)] focus-visible:outline-[var(--color-brand-200)]"
           style={{
-            padding: '1.5px',
-            borderRadius: '999px',
-            background: 'linear-gradient(-45deg, rgba(255, 153, 248, 0.4) 0%, rgba(181, 131, 255, 0.4) 25%, rgba(114, 156, 255, 0.4) 48%, rgba(117, 218, 231, 0.4) 83%, rgba(115, 230, 204, 0.4) 100%)',
+            boxShadow: '0 0 0 1px rgba(255,255,255,0.6) inset',
           }}
         >
-          <div
-            className="inline-flex items-center gap-2"
+          <span
+            className="inline-flex items-center gap-2 rounded-full"
             style={{
               height: '34px',
               padding: '0 14px',
@@ -126,8 +429,8 @@ function TopBarLead({ copilotOpen, onToggleCopilot }) {
           >
             <img src={catcatSvg} alt="OLA AI" style={{ width: '20px', height: '20px', display: 'block' }} />
             <span>OLA AI</span>
-          </div>
-        </div>
+          </span>
+        </Button>
       )}
     </>
   );
@@ -140,23 +443,6 @@ function TopBarTabs() {
 function TopBarActions() {
   return (
     <>
-      <div
-        className="inline-flex items-center gap-1 shrink-0"
-        style={{
-          height: '36px',
-          padding: '0 16px',
-          borderRadius: '999px',
-          background: 'var(--color-brand-50, #f0fdfa)',
-          border: '1px solid var(--color-brand-500, #5eead4)',
-          fontSize: '14px',
-          fontWeight: 600,
-          color: 'var(--color-brand-950, #065f46)',
-        }}
-      >
-        <span>V8 线上</span>
-        <Icon name="chevron-selector-vertical-stroked" size={16} />
-      </div>
-
       <div className="flex items-center gap-2">
         <Button variant="ghost-black" iconOnly icon={<Icon name="dots-horizontal-stroked" />} tooltip="更多" aria-label="更多" />
         <Button variant="outline-black">次操作</Button>
@@ -173,57 +459,478 @@ function TopBarActions() {
    下：ChatInput
 ──────────────────────────────────────────── */
 function CopilotPanel({ onClose }) {
+  const [phase, setPhase] = useState('welcome');
+  const [messages, setMessages] = useState([]);
+  const [inputView, setInputView] = useState('default');
+  const replyTimerRef = useRef(null);
+  const busyTimerRef = useRef(null);
+  const flowTimersRef = useRef([]);
+  const pendingFlowResumeRef = useRef(null);
+  const scrollRef = useRef(null);
+  const latestAnchorRef = useRef(null);
+  const idSeedRef = useRef(100);
+  const conversationContextRef = useRef({ ...DEFAULT_CONVERSATION_CONTEXT });
+  const nextId = useCallback((prefix = 'm') => `${prefix}${++idSeedRef.current}`, []);
+
+  const clearFlowTimers = useCallback(() => {
+    flowTimersRef.current.forEach((timerId) => clearTimeout(timerId));
+    flowTimersRef.current = [];
+  }, []);
+
+  const scheduleFlowTimer = useCallback((callback, delay) => {
+    const timerId = setTimeout(() => {
+      flowTimersRef.current = flowTimersRef.current.filter((id) => id !== timerId);
+      callback();
+    }, delay);
+    flowTimersRef.current.push(timerId);
+  }, []);
+
+  const clearPendingFlowResume = useCallback(() => {
+    pendingFlowResumeRef.current = null;
+  }, []);
+
+  const pauseForHumanGate = useCallback((resume) => {
+    pendingFlowResumeRef.current = resume;
+  }, []);
+
+  const resumePendingFlow = useCallback(() => {
+    const resume = pendingFlowResumeRef.current;
+    pendingFlowResumeRef.current = null;
+    if (typeof resume === 'function') resume();
+  }, []);
+
+  const scrollToLatest = useCallback((behavior = 'smooth') => {
+    if (latestAnchorRef.current?.scrollIntoView) {
+      latestAnchorRef.current.scrollIntoView({ block: 'end', behavior });
+      return;
+    }
+    const el = scrollRef.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+
+  useEffect(() => () => {
+    if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+    if (busyTimerRef.current) clearTimeout(busyTimerRef.current);
+    clearFlowTimers();
+  }, [clearFlowTimers]);
+
+  useEffect(() => {
+    if (phase !== 'chat' || messages.length === 0) return undefined;
+    const el = scrollRef.current;
+    if (!el) return undefined;
+    const inner = el.firstElementChild;
+    if (!inner) return undefined;
+    const ro = new ResizeObserver(() => {
+      scrollToLatest();
+    });
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, [phase, messages.length, scrollToLatest]);
+
+  const handleNewSession = useCallback(() => {
+    if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+    if (busyTimerRef.current) clearTimeout(busyTimerRef.current);
+    clearFlowTimers();
+    clearPendingFlowResume();
+    conversationContextRef.current = { ...DEFAULT_CONVERSATION_CONTEXT };
+    setMessages([]);
+    setPhase('welcome');
+    setInputView('default');
+  }, [clearFlowTimers, clearPendingFlowResume]);
+
+  const handleConfirmPrimary = useCallback(
+    (messageId, confirmId, payload = {}) => {
+      const isActionable = hasActionablePrimaryButton(payload.primaryActionLabel);
+      const selectedLabel = payload.option?.label ?? '';
+      setMessages((prev) =>
+        prev.map((message) =>
+          message.id === messageId
+            ? {
+              ...message,
+              confirms: Array.isArray(message.confirms)
+                ? message.confirms.map((confirm) => (
+                  confirm.id === confirmId
+                    ? {
+                      ...confirm,
+                      defaultConfirmed: true,
+                      selectedValue: payload.value ?? confirm.selectedValue,
+                      defaultSelectedValue: payload.value ?? confirm.defaultSelectedValue,
+                      selectedLabel: selectedLabel || confirm.selectedLabel,
+                      formValues: payload.formValues ?? confirm.formValues,
+                    }
+                    : confirm
+                ))
+                : message.confirms,
+              leadText: isActionable ? '已确认澄清信息，继续执行后续流程。' : message.leadText,
+              timestamp: nowHHmm(),
+            }
+            : message,
+        ),
+      );
+      if (isActionable) resumePendingFlow();
+    },
+    [resumePendingFlow],
+  );
+
+  const handleConfirmOptionChange = useCallback((messageId, confirmId, value, option) => {
+    setMessages((prev) =>
+      prev.map((message) =>
+        message.id === messageId
+          ? {
+            ...message,
+            confirms: Array.isArray(message.confirms)
+              ? message.confirms.map((confirm) => (
+                confirm.id === confirmId
+                  ? {
+                    ...confirm,
+                    selectedValue: value,
+                    defaultSelectedValue: value,
+                    selectedLabel: option?.label ?? confirm.selectedLabel,
+                  }
+                  : confirm
+              ))
+              : message.confirms,
+          }
+          : message,
+      ),
+    );
+  }, []);
+
+  const handleConfirmFormChange = useCallback((messageId, confirmId, formValues, meta = {}) => {
+    setMessages((prev) =>
+      prev.map((message) =>
+        message.id === messageId
+          ? {
+            ...message,
+            confirms: Array.isArray(message.confirms)
+              ? message.confirms.map((confirm) => (
+                confirm.id === confirmId
+                  ? {
+                    ...confirm,
+                    formValues,
+                    lastChangedFieldId: meta.fieldId,
+                  }
+                  : confirm
+              ))
+              : message.confirms,
+          }
+          : message,
+      ),
+    );
+  }, []);
+
+  const handleConfirmSecondary = useCallback(
+    (messageId, confirmId) => {
+      setMessages((prev) =>
+        prev.map((message) =>
+          message.id === messageId
+            ? {
+              ...message,
+              confirms: Array.isArray(message.confirms)
+                ? message.confirms.map((confirm) => (
+                  confirm.id === confirmId ? { ...confirm, defaultConfirmed: true } : confirm
+                ))
+                : message.confirms,
+              leadText: '已取消当前确认，流程暂停。',
+              timestamp: nowHHmm(),
+            }
+            : message,
+        ),
+      );
+      clearPendingFlowResume();
+      setInputView('default');
+    },
+    [clearPendingFlowResume],
+  );
+
+  const startAutoOrchestratedFlow = useCallback(
+    (text, reply, ctx = {}) => {
+      const contextSnapshot = { ...conversationContextRef.current };
+      const thinkingMsgId = nextId('think');
+      const confirmMsgId = nextId('confirm');
+      const flowMsgId = nextId('flow');
+      const payload = buildAutoFlowPayload(text, reply, contextSnapshot);
+      const clarificationConfirms = buildClarificationConfirms(contextSnapshot);
+
+      const finishExecutionFlow = () => {
+        setMessages((prev) =>
+          prev.map((message) =>
+            message.id === flowMsgId
+              ? {
+                ...message,
+                stream: false,
+                taskGroups: DEFAULT_CHAT_TASK_GROUPS.map((group) => ({
+                  ...group,
+                  status: 'completed',
+                })),
+                resultText: payload.resultText,
+                resultArtifacts: payload.resultArtifacts,
+                followUps: payload.followUps,
+                timestamp: nowHHmm(),
+              }
+              : message,
+          ),
+        );
+        conversationContextRef.current = {
+          ...contextSnapshot,
+          conclusion: payload.resultText,
+          artifacts: payload.resultArtifacts.map((artifact) => artifact.title),
+          lastUserIntent: text,
+        };
+        setInputView('default');
+      };
+
+      const startExecutionFlow = () => {
+        setInputView('busy');
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: flowMsgId,
+            kind: 'ai-flow',
+            timestamp: nowHHmm(),
+            taskGroups: DEFAULT_CHAT_TASK_GROUPS,
+            stream: true,
+          },
+        ]);
+        scheduleFlowTimer(finishExecutionFlow, getFlowTotalMs());
+      };
+
+      const continueAfterConfirm = () => {
+        setMessages((prev) =>
+          prev.map((message) =>
+            message.id === confirmMsgId
+              ? {
+                ...message,
+                confirms: Array.isArray(message.confirms)
+                  ? message.confirms.map((confirm) => ({
+                    ...confirm,
+                    defaultConfirmed: true,
+                  }))
+                  : message.confirms,
+                leadText: '已确认澄清信息，开始自动执行。',
+                timestamp: nowHHmm(),
+              }
+              : message,
+          ),
+        );
+        scheduleFlowTimer(startExecutionFlow, 320);
+      };
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: thinkingMsgId,
+          kind: 'ai-thinking',
+          timestamp: nowHHmm(),
+          thinking: {
+            ...DEFAULT_CHAT_THINKING,
+            state: 'thinking',
+            inProgressLabel: '深度思考中 ...',
+            defaultExpanded: false,
+          },
+          className: ctx.source === 'follow-up' ? 'tfds-followup-ai-pop' : '',
+        },
+      ]);
+
+      scheduleFlowTimer(() => {
+        setMessages((prev) =>
+          prev.map((message) =>
+            message.id === thinkingMsgId
+              ? {
+                ...message,
+                thinking: {
+                  ...DEFAULT_CHAT_THINKING,
+                  state: 'completed',
+                  durationLabel: '深度思考（用时 3.20 秒）',
+                  content: buildThinkingContent(text, contextSnapshot),
+                  defaultExpanded: false,
+                },
+                resultText: '已完成上下文理解，接下来需要先确认本轮执行口径。',
+                timestamp: nowHHmm(),
+              }
+              : message,
+          ),
+        );
+      }, AUTO_FLOW_TIMINGS.thinkingDone);
+
+      scheduleFlowTimer(() => {
+        setMessages((prev) => [
+          ...prev,
+          {
+            id: confirmMsgId,
+            kind: 'ai-confirm',
+            timestamp: nowHHmm(),
+            leadText: '请确认以下人工澄清信息；确认后我会继续自动执行策略分析和结果整理。',
+            confirms: clarificationConfirms,
+          },
+        ]);
+
+        if (confirmsRequireHumanGate(clarificationConfirms)) {
+          pauseForHumanGate(continueAfterConfirm);
+          return;
+        }
+
+        scheduleFlowTimer(continueAfterConfirm, 320);
+      }, AUTO_FLOW_TIMINGS.confirmShow);
+    },
+    [nextId, pauseForHumanGate, scheduleFlowTimer],
+  );
+
+  const handleSend = useCallback(
+    (text, ctx = {}) => {
+      const trimmed = (text || '').trim();
+      if (!trimmed) return;
+
+      if (phase === 'welcome') setPhase('chat');
+
+      const userContent = Array.isArray(ctx.segments) && ctx.segments.length > 0
+        ? ctx.segments
+        : [{ type: 'text', value: trimmed }];
+
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: nextId('u'),
+          kind: 'user',
+          timestamp: nowHHmm(),
+          userContent,
+          className: ctx.source === 'follow-up' ? 'tfds-followup-user-pop' : '',
+        },
+      ]);
+      setInputView('replying');
+
+      const reply = routeReply(trimmed);
+      if (replyTimerRef.current) clearTimeout(replyTimerRef.current);
+      if (busyTimerRef.current) clearTimeout(busyTimerRef.current);
+      clearFlowTimers();
+      clearPendingFlowResume();
+
+      if (reply.type === 'short') {
+        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');
+          scrollToLatest();
+        }, 600);
+        return;
+      }
+
+      startAutoOrchestratedFlow(trimmed, reply, ctx);
+      scrollToLatest();
+    },
+    [phase, nextId, clearFlowTimers, clearPendingFlowResume, scrollToLatest, startAutoOrchestratedFlow],
+  );
+
+  const handleFollowUpSend = useCallback(
+    (text) => {
+      handleSend(text, { source: 'follow-up' });
+    },
+    [handleSend],
+  );
+
+  const handleStop = useCallback(() => {
+    if (replyTimerRef.current) {
+      clearTimeout(replyTimerRef.current);
+      replyTimerRef.current = null;
+    }
+    if (busyTimerRef.current) {
+      clearTimeout(busyTimerRef.current);
+      busyTimerRef.current = null;
+    }
+    clearFlowTimers();
+    clearPendingFlowResume();
+    setInputView('default');
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: nextId('a'),
+        kind: 'ai-text',
+        timestamp: nowHHmm(),
+        resultText: '已停止当前任务，需要时再叫我。',
+      },
+    ]);
+  }, [nextId, clearFlowTimers, clearPendingFlowResume]);
+
+  const lastIdx = messages.length - 1;
+
   return (
     <div
-      className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
+      className="flex h-full min-h-0 min-w-0 flex-col"
       style={{
         width: 'min(450px, 100%)',
       }}
     >
       {/* 标题栏 */}
       <div className="flex items-center shrink-0" style={{ height: '48px', paddingRight: '4px' }}>
-        <div className="flex items-center flex-1 min-w-0 gap-1">
-          <span
-            className="text-sm leading-5 pl-1"
-            style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.6))' }}
-          >
-            新会话
-          </span>
-        </div>
+        <div className="flex items-center flex-1 min-w-0 gap-1" />
         <div className="flex items-center gap-0.5 shrink-0">
-          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} tooltip="新建会话" aria-label="新建会话" />
+          <Button variant="ghost-black" iconOnly icon={<Icon name="message-plus-square-stroked" />} tooltip="新建会话" aria-label="新建会话" onClick={handleNewSession} />
           <Button variant="ghost-black" iconOnly icon={<Icon name="clock-stroked" />} tooltip="历史记录" aria-label="历史记录" />
           <Button variant="ghost-black" iconOnly icon={<Icon name="layout-left-stroked" />} tooltip="收起面板" aria-label="收起面板" onClick={onClose} />
         </div>
       </div>
 
-      {/* 对话流：欢迎态 */}
-      <div className="flex flex-1 min-h-0 flex-col items-center justify-center gap-6" style={{ padding: '0 80px' }}>
-        {/* AI 头像 + 标题 */}
+      {phase === 'welcome' ? (
+        <CopilotWelcomePhase onSend={handleSend} inputView={inputView} onStop={handleStop} />
+      ) : (
+        <CopilotChatPhase
+          scrollRef={scrollRef}
+          latestAnchorRef={latestAnchorRef}
+          messages={messages}
+          lastIdx={lastIdx}
+          inputView={inputView}
+          onSend={handleSend}
+          onStop={handleStop}
+          handlers={{
+            onFollowUpSelect: handleFollowUpSend,
+            onConfirmPrimary: handleConfirmPrimary,
+            onConfirmSecondary: handleConfirmSecondary,
+            onConfirmOptionChange: handleConfirmOptionChange,
+            onConfirmFormChange: handleConfirmFormChange,
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+function CopilotWelcomePhase({ onSend, onStop, inputView }) {
+  return (
+    <>
+      <div className="flex flex-1 min-h-0 flex-col items-center justify-center gap-6 overflow-y-auto" style={{ padding: '0 28px' }}>
         <div className="flex flex-col items-center gap-3">
-          {/* 头像：渐变描边圆 + 蓝色投影 + CATCAT */}
           <div style={{ position: 'relative', width: '66px', height: '66px', flexShrink: 0 }}>
-            {/* 渐变描边圆（外层渐变 0.5px + 内层白底） */}
-            <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%',
+            <div
+              style={{
+                position: 'absolute',
+                inset: '0',
                 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)',
-              }} />
+                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>
-            {/* CATCAT 图标 */}
             <img
               src={catcatSvg}
               alt="OLA AI"
@@ -239,28 +946,26 @@ function CopilotPanel({ onClose }) {
             />
           </div>
           <span
-            className="font-semibold whitespace-nowrap"
+            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"
+          className="m-0 text-center text-sm leading-5"
           style={{ color: 'var(--foreground-muted, rgba(15,28,53,0.6))', width: '100%' }}
         >
-          您好！我是您的智能小助手 ✨ ~ 我能帮您归因分析、生成策略、Prompt、知识、工具等方案～
+          您好！我是您的智能小助手，我可以帮您分析私信会话问题、生成服务策略、补充验证方案和沉淀可交付结论。
         </p>
 
-        {/* 快捷建议 chips */}
-        <div className="flex flex-col gap-2 w-full">
+        <div className="flex w-full flex-col gap-2">
           {COPILOT_SUGGESTIONS.map((text) => (
             <button
               key={text}
               type="button"
-              className="flex items-center justify-between w-full cursor-pointer border-0 text-left"
+              className="flex w-full cursor-pointer items-center justify-between border-0 text-left"
               style={{
                 padding: '10px 12px',
                 borderRadius: '8px',
@@ -272,8 +977,9 @@ function CopilotPanel({ onClose }) {
                 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)'; }}
+              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.85)'; }}
+              onMouseLeave={(e) => { e.currentTarget.style.background = 'rgba(255,255,255,0.6)'; }}
+              onClick={() => onSend(text, { source: 'suggestion' })}
             >
               <span>{text}</span>
               <Icon name="arrow-narrow-right-stroked" size={12} />
@@ -282,11 +988,104 @@ function CopilotPanel({ onClose }) {
         </div>
       </div>
 
-      {/* ChatInput：父级 CopilotPanel 不裁剪，让 -bottom-2 氛围背景与炫彩投影能向外溢出 */}
       <div className="shrink-0 pt-2">
-        <ChatInput variant="default" placeholder="需要我为你做什么" />
+        <ChatInput
+          variant={inputView}
+          autoReplyOnSend={false}
+          placeholder="需要我为你做什么"
+          onSend={onSend}
+          onStop={onStop}
+        />
       </div>
-    </div>
+    </>
+  );
+}
+
+function CopilotChatPhase({
+  scrollRef,
+  latestAnchorRef,
+  messages,
+  lastIdx,
+  handlers,
+  onSend,
+  onStop,
+  inputView,
+}) {
+  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% - 32px), transparent 100%)'
+    : 'linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 32px), 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" style={{ maxWidth: '100%', padding: '0 4px 72px' }}>
+          {messages.map((message, idx) => {
+            const isLatest = idx === lastIdx;
+            const props = messageToChatProps(message, isLatest, handlers);
+            if (message.kind === 'ai-flow' && message.stream === true) {
+              return <StreamingChatMessage key={message.id} {...props} taskGroups={message.taskGroups} />;
+            }
+            return <ChatMessage key={message.id} {...props} />;
+          })}
+          <div ref={latestAnchorRef} aria-hidden="true" style={{ height: '1px' }} />
+        </div>
+      </div>
+
+      <div className="w-full shrink-0 pt-2">
+        <ChatInput
+          variant={inputView}
+          autoReplyOnSend={false}
+          placeholder="继续追问，或输入分析/生成/整理"
+          onSend={onSend}
+          onStop={onStop}
+        />
+      </div>
+    </>
   );
 }