node-resource-utils 0.0.0-stage → 1.1.8

package/resources/src/components/AiPanel.tsx

@@ -0,0 +1,970 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { App, Avatar, Button, Input, Tag, Typography } from 'antd';
+import {
+  RobotOutlined,
+  SendOutlined,
+  ClearOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  EditOutlined,
+  SearchOutlined,
+} from '@ant-design/icons';
+import Markdown from '@/components/Markdown';
+import AiInputForm from '@/components/ai/AiInputForm';
+import { formAnswerText, type FormCard, type FormSpec } from '@/lib/aiFormTypes';
+import { fs, MILITARY } from '@/lib/theme';
+import { formatElapsed, useElapsed } from '@/components/feedback/usePending';
+
+/**
+ * AI 助手面板 —— 系统内置的大模型对话。
+ *
+ * ★ 一个面板同时做三件事（不再分成多个对话框）：
+ *   - 系统怎么用（"怎么新增一条申请"）
+ *   - 数据问答（"这个月有多少条申请"）
+ *   - **直接办事**（"帮我新增一条记录"）—— 走确认卡，不是静默执行
+ *   服务端 /api/ai/chat 每次都会注入时间 + 用户 + 数据快照，见 lib/aiContext.ts；
+ *   工具由 lib/aiTools.ts 按 ontology + schema 自动生成。
+ *
+ * ★ 界面上的坑（都踩过）：
+ *   1. 回答是 Markdown，直接当纯文本显示会看到一堆 ** 和 | 表格 → 用 Markdown 组件渲染
+ *   2. 面板高度会随回答越来越长 → 父容器给固定高度 + flex 子项 minHeight: 0 + 内部滚动
+ *   3. 每次新回答都滚到底，会把上一条用户气泡裁成一条"蓝色横条"露在顶部 →
+ *      发送后滚到**问题那一行**，流式输出期间不强行贴底
+ *   4. 工具轨迹和确认卡都挂在"最后一条 assistant 消息"上，
+ *      而不是独立的 state —— 否则用户往上翻历史时，卡片会跑到当前这轮去
+ */
+
+const { TextArea } = Input;
+
+/** 一次工具调用的痕迹（服务端 SSE 的 step 事件） */
+interface StepTrace {
+  name: string;
+  kind: 'read' | 'write';
+  ok: boolean;
+  summary: string;
+}
+
+/** 待确认的写操作（服务端 SSE 的 action 事件） */
+interface ActionCard {
+  token: string;
+  title: string;
+  fields: { label: string; value: string }[];
+  status: 'pending' | 'running' | 'done' | 'failed' | 'cancelled';
+  result?: string;
+}
+
+interface Msg {
+  role: 'user' | 'assistant';
+  content: string;
+  /** 这轮回答参考了哪些表（服务端 SSE meta 下发） */
+  tables?: { model: string; total: number; monthTotal?: number }[];
+  /** 这轮调用了哪些工具 */
+  steps?: StepTrace[];
+  /** 这轮提出的待确认操作 */
+  actions?: ActionCard[];
+  /**
+   * 这轮弹出的输入表单。
+   *
+   * 挂在消息上而不是独立 state：用户往上翻历史时，表单应该留在它出现的那一轮，
+   * 而不是跑到最新一条回答下面（确认卡踩过同一个坑）。
+   */
+  forms?: FormCard[];
+}
+
+interface Meta {
+  now?: { date: string; time: string; weekday: string; month: string };
+  tables?: { model: string; total: number; monthTotal?: number }[];
+  toolCount?: number;
+}
+
+/** 更新最后一条 assistant 消息（轨迹/动作都挂在它上面） */
+function patchLastAssistant(prev: Msg[], fn: (m: Msg) => Msg): Msg[] {
+  const cp = [...prev];
+  for (let i = cp.length - 1; i >= 0; i--) {
+    if (cp[i].role === 'assistant') {
+      cp[i] = fn(cp[i]);
+      break;
+    }
+  }
+  return cp;
+}
+
+export interface AiPanelProps {
+  /** 预置的引导问题，显示在空白态，点了就发 */
+  suggestions?: string[];
+  /** 追加的角色说明（不会覆盖内置的时间/数据/规则） */
+  system?: string;
+  /** 面板标题（showHeader=false 时不显示） */
+  title?: string;
+  /** 对话区高度：数字或 '100%'（嵌在等高卡片里时用 '100%'） */
+  height?: number | string;
+  /** 是否显示面板自带标题栏。外层 Card 已有标题时传 false，避免标题重复 */
+  showHeader?: boolean;
+}
+
+export default function AiPanel({
+  suggestions = [
+    '这个系统怎么用？给我一份快速上手指南',
+    '这个月新增了哪些数据？分别是什么类型',
+    '当前数据里有哪些明显的问题或风险？',
+  ],
+  system,
+  title = 'AI 助手',
+  height = 540,
+  showHeader = true,
+}: AiPanelProps) {
+  const { message } = App.useApp();
+  const [msgs, setMsgs] = useState<Msg[]>([]);
+  const [input, setInput] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+  const [meta, setMeta] = useState<Meta | null>(null);
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+  /** 取消当前这轮对话用；请求发出后才有值 */
+  const abortRef = useRef<AbortController | null>(null);
+  /**
+   * 已等待时长。
+   *
+   * ★ 这是这个面板最需要的一个数字：本地模型是流式的，首字出来之前可能等十几秒。
+   *   以前只有一个三点跳动的气泡，看不出来"它到底是在想，还是卡住了"；
+   *   有了秒数，用户看到数字在涨就愿意继续等。
+   */
+  const elapsed = useElapsed(busy);
+  /** 用户是否贴着底部（自己往上翻历史时不要强行拉回去） */
+  const stickRef = useRef(true);
+  /** 刚发出问题时：把这条问题滚到顶部，而不是滚到底部 */
+  const anchorRef = useRef(false);
+
+  // 页面加载时先问一次"现在几点 + 能查哪些表"（不调模型，只查库）
+  useEffect(() => {
+    fetch('/api/ai/chat')
+      .then((r) => r.json())
+      .then((j: Meta) => {
+        if (j?.now) setMeta({ now: j.now, tables: j.tables ?? [] });
+      })
+      .catch(() => {
+        /* 拿不到就算了，不影响对话 */
+      });
+  }, []);
+
+  const onScroll = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    stickRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+  };
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+
+    if (anchorRef.current) {
+      // 把最后一条用户消息滚到可视区顶部，避免它被裁成一条横条
+      const nodes = el.querySelectorAll('[data-msg]');
+      const userNode = nodes[nodes.length - 2] as HTMLElement | undefined;
+      if (userNode) {
+        el.scrollTop += userNode.getBoundingClientRect().top - el.getBoundingClientRect().top - 4;
+      }
+      anchorRef.current = false;
+      stickRef.current = false;
+      return;
+    }
+
+    if (stickRef.current) el.scrollTop = el.scrollHeight;
+  }, [msgs]);
+
+  const clear = () => {
+    setMsgs([]);
+    setErr(null);
+  };
+
+  /** 停止这一轮生成（长任务等待里，"能停"比"等得快"更让人安心） */
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+  }, []);
+
+  /**
+   * 把"提交中"的表单收口。
+   *
+   * ★ 必须全局扫，不能只改最后一条 assistant 消息：
+   *   用户提交表单后会追加一条新的 assistant 消息承载确认卡，
+   *   而表单卡还挂在**上一条**消息里。只 patch 最后一条的话，
+   *   表单会永远停在 submitting（按钮一直转圈、摘要也不出现）。
+   */
+  const settleForms = useCallback(
+    (status: 'done' | 'pending' | 'cancelled' | 'failed', error?: string) => {
+      setMsgs((prev) =>
+        prev.map((m) => {
+          if (!m.forms?.some((c) => c.status === 'submitting')) return m;
+          return {
+            ...m,
+            forms: m.forms.map((c) =>
+              c.status === 'submitting' ? { ...c, status, error } : c
+            ),
+          };
+        })
+      );
+    },
+    []
+  );
+
+  /**
+   * 跑一轮 SSE。
+   *
+   * ★ 抽出来是因为有两个入口：用户打字提问（send）和用户提交表单（submitForm）。
+   *   两者除了"请求体多一个 form 字段"，其余（打字机、工具轨迹、确认卡）完全一样。
+   *   复制两份的话，迟早出现"表单提交后不出确认卡"这种只修了一条路径的 bug。
+   */
+  const runStream = useCallback(
+    async (
+      history: { role: 'user' | 'assistant'; content: string }[],
+      form?: { token: string; values: Record<string, unknown> }
+    ) => {
+      setErr(null);
+      setBusy(true);
+      // 每轮一个控制器：点"停止生成"只掐掉这一轮，不影响后续提问
+      const ctrl = new AbortController();
+      abortRef.current = ctrl;
+
+      try {
+        const res = await fetch('/api/ai/chat', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            system,
+            messages: history,
+            maxTokens: 1200,
+            ...(form ? { form } : {}),
+          }),
+          signal: ctrl.signal,
+        });
+        if (!res.ok || !res.body) {
+          // 表单过期 / 令牌被改这类错误是 JSON 响应，把中文原因读出来再抛
+          const j = (await res.json().catch(() => null)) as { error?: string } | null;
+          throw new Error(j?.error ?? `请求失败（${res.status}）`);
+        }
+
+        const reader = res.body.getReader();
+        const dec = new TextDecoder();
+        let buf = '';
+        for (;;) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buf += dec.decode(value, { stream: true });
+          let i: number;
+          while ((i = buf.indexOf('\n')) >= 0) {
+            const line = buf.slice(0, i).trim();
+            buf = buf.slice(i + 1);
+            if (!line.startsWith('data:')) continue;
+            const p = line.slice(5).trim();
+            if (p === '[DONE]') continue;
+            try {
+              const j = JSON.parse(p) as {
+                content?: string;
+                error?: string;
+                hint?: string;
+                meta?: Meta;
+                step?: StepTrace;
+                form?: FormSpec;
+                action?: { token: string; title: string; fields: { label: string; value: string }[] };
+              };
+              if (j.meta) {
+                setMeta(j.meta);
+                // 把"参考了哪些表"挂到本轮回答上
+                setMsgs((prev) =>
+                  patchLastAssistant(prev, (m) => ({ ...m, tables: j.meta?.tables ?? [] }))
+                );
+              } else if (j.step) {
+                // 模型调了一次工具：留痕，让"它真的在查系统"这件事看得见
+                const step = j.step;
+                setMsgs((prev) =>
+                  patchLastAssistant(prev, (m) => ({ ...m, steps: [...(m.steps ?? []), step] }))
+                );
+              } else if (j.form) {
+                /**
+                 * 服务端要用户填信息。
+                 *
+                 * 同一 token 的表单是"同一张表重新下发"（提交后仍有必填没填），就地替换；
+                 * 新 token 说明这是另一张表，保留旧的并标成已提交 —— 否则用户填过的内容
+                 * 会随着卡片被替换而消失，看起来像"白填了"。
+                 */
+                const spec = j.form;
+                // 上一张表已提交完成（新 token 说明这是另一张），先把它的 submitting 收口
+                settleForms('done');
+                setMsgs((prev) =>
+                  patchLastAssistant(prev, (m) => {
+                    const list = m.forms ?? [];
+                    const hit = list.findIndex((c) => c.spec.token === spec.token);
+                    if (hit >= 0) {
+                      // 同一张表重新下发：保留用户已填的值，只更新字段定义
+                      const next = [...list];
+                      next[hit] = { ...next[hit], spec, status: 'pending' as const, error: undefined };
+                      return { ...m, forms: next };
+                    }
+                    return { ...m, forms: [...list, { spec, status: 'pending' as const }] };
+                  })
+                );
+              } else if (j.action) {
+                // 待用户确认的写操作：不执行，先摆到卡片上
+                const a = j.action;
+                settleForms('done');
+                setMsgs((prev) =>
+                  patchLastAssistant(prev, (m) => ({
+                    ...m,
+                    actions: [
+                      ...(m.actions ?? []),
+                      { token: a.token, title: a.title, fields: a.fields, status: 'pending' as const },
+                    ],
+                  }))
+                );
+              } else if (j.error) {
+                setErr(j.hint ? `${j.error}（${j.hint}）` : j.error);
+              } else if (j.content) {
+                setMsgs((prev) =>
+                  patchLastAssistant(prev, (m) => ({ ...m, content: m.content + j.content }))
+                );
+              }
+            } catch {
+              /* 忽略半包 */
+            }
+          }
+        }
+      } catch (e) {
+        const aborted = ctrl.signal.aborted || (e as Error)?.name === 'AbortError';
+        if (aborted) {
+          // 用户主动停止不是错误：没吐字的空气泡直接摘掉，吐了一半的留着
+          setMsgs((prev) => {
+            const last = prev[prev.length - 1];
+            return last?.role === 'assistant' && !last.content.trim() ? prev.slice(0, -1) : prev;
+          });
+        } else {
+          const errMsg = e instanceof Error ? e.message : String(e);
+          setErr(errMsg);
+          message.error(`AI 助手不可用：${errMsg}`);
+          // 丢掉没吐字的空气泡，再把表单的"提交中"解开（否则按钮永远转圈）
+          setMsgs((prev) => prev.slice(0, -1));
+          settleForms('failed', errMsg);
+        }
+        // 用户主动中断：令牌没过期，恢复成可再次提交
+        if (aborted) settleForms('pending');
+      } finally {
+        abortRef.current = null;
+        setBusy(false);
+      }
+    },
+    [message, settleForms, system]
+  );
+
+  const send = useCallback(
+    async (text: string) => {
+      const q = text.trim();
+      if (!q || busy) return;
+      setInput('');
+      anchorRef.current = true;
+
+      // ★ 带上完整历史（含上一轮 assistant 的回答），追问才有上下文
+      const history = [
+        ...msgs
+          .filter((m) => m.content.trim())
+          .slice(-18)
+          .map((m) => ({ role: m.role, content: m.content })),
+        { role: 'user' as const, content: q },
+      ];
+
+      setMsgs([...msgs, { role: 'user', content: q }, { role: 'assistant', content: '' }]);
+      await runStream(history);
+    },
+    [busy, msgs, runStream]
+  );
+
+  /**
+   * 提交表单。
+   *
+   * ★ 摘要会进对话历史，但不额外插一条用户气泡：
+   *   卡片自己就是"我填了什么"的记录，再加一条文字只是噪音。
+   *   历史里有摘要，是为了之后追问"再请一天"时模型知道上次的日期。
+   */
+  const submitForm = useCallback(
+    async (card: FormCard, values: Record<string, unknown>) => {
+      /**
+       * ★ 用 abortRef 而不是 busy 判断"有没有在跑"。
+       *   busy 是渲染状态，表单卡片渲染时可能捕获到上一轮的 true，
+       *   用户填完点提交会被静默丢掉（按钮没反应、请求也没发）。
+       *   abortRef 是即时值：流结束的 finally 里就会清空。
+       */
+      if (abortRef.current) return;
+      const token = card.spec.token;
+      setMsgs((prev) =>
+        prev.map((m) =>
+          m.forms?.some((c) => c.spec.token === token)
+            ? {
+                ...m,
+                forms: m.forms.map((c) =>
+                  c.spec.token === token ? { ...c, status: 'submitting' as const, error: undefined } : c
+                ),
+              }
+            : m
+        )
+      );
+
+      anchorRef.current = false;
+      const history = [
+        ...msgs
+          .filter((m) => m.content.trim())
+          .slice(-18)
+          .map((m) => ({ role: m.role, content: m.content })),
+        { role: 'user' as const, content: formAnswerText(card.spec, values) },
+      ];
+      setMsgs((prev) => [...prev, { role: 'assistant', content: '' }]);
+
+      await runStream(history, { token, values });
+    },
+    [msgs, runStream]
+  );
+
+  const cancelForm = useCallback((token: string) => {
+    setMsgs((prev) =>
+      prev.map((m) =>
+        m.forms?.some((c) => c.spec.token === token)
+          ? {
+              ...m,
+              forms: m.forms.map((c) =>
+                c.spec.token === token ? { ...c, status: 'cancelled' as const } : c
+              ),
+            }
+          : m
+      )
+    );
+  }, []);
+
+  /** 按令牌更新确认卡状态（同一轮可能有多张卡） */
+  const patchAction = useCallback((token: string, patch: Partial<ActionCard>) => {
+    setMsgs((prev) =>
+      prev.map((m) =>
+        m.actions?.length
+          ? { ...m, actions: m.actions.map((a) => (a.token === token ? { ...a, ...patch } : a)) }
+          : m
+      )
+    );
+  }, []);
+
+  /**
+   * 确认执行。
+   *
+   * ★ 只传 token，不传参数：参数在令牌里签过名，前端改不动。
+   *   这也是"确认卡不是装饰"的技术保证 —— 卡片上看到的和真正执行的是同一条数据。
+   */
+  const confirmAction = useCallback(
+    async (token: string) => {
+      patchAction(token, { status: 'running' });
+      try {
+        const res = await fetch('/api/ai/act', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ token }),
+        });
+        const j = (await res.json()) as { ok?: boolean; summary?: string; error?: string };
+        if (j.ok) {
+          patchAction(token, { status: 'done', result: j.summary ?? '已执行' });
+          message.success(j.summary ?? '已执行');
+        } else {
+          patchAction(token, { status: 'failed', result: j.summary ?? j.error ?? '执行失败' });
+          message.error(j.summary ?? j.error ?? '执行失败');
+        }
+      } catch (e) {
+        const m = e instanceof Error ? e.message : String(e);
+        patchAction(token, { status: 'failed', result: m });
+        message.error(`执行失败：${m}`);
+      }
+    },
+    [message, patchAction]
+  );
+
+  const timeText = meta?.now
+    ? `当前时间 ${meta.now.date} ${meta.now.time} ${meta.now.weekday} · 接入 ${
+        meta.tables?.length ?? 0
+      } 张业务表${meta.toolCount ? ` · ${Math.floor(meta.toolCount / 2)} 类对象可操作` : ''}`
+    : '正在接入业务数据…';
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height, minHeight: 0 }}>
+      {showHeader ? (
+        <>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
+            <RobotOutlined style={{ fontSize: fs(18), color: MILITARY.primary }} />
+            <Typography.Text strong style={{ color: MILITARY.text }}>
+              {title}
+            </Typography.Text>
+            <Tag
+              style={{
+                marginInlineStart: 4,
+                background: MILITARY.soft,
+                color: MILITARY.primary,
+                border: `1px solid ${MILITARY.softStrong}`,
+              }}
+            >
+              本地模型
+            </Tag>
+            <span style={{ flex: 1 }} />
+            <Button size="small" type="text" icon={<ClearOutlined />} onClick={clear}>
+              清空
+            </Button>
+          </div>
+          <div style={{ fontSize: fs(12), color: MILITARY.textMuted, marginBottom: 8 }}>{timeText}</div>
+        </>
+      ) : (
+        // 嵌在已有标题的卡片里：只保留"时间/数据状态 + 清空"一行，避免标题重复
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, flex: 1, minWidth: 0 }}>
+            <span
+              style={{
+                width: 6,
+                height: 6,
+                borderRadius: '50%',
+                background: '#7C9A5E',
+                boxShadow: '0 0 0 3px rgba(124,154,94,.16)',
+                flex: '0 0 6px',
+              }}
+            />
+            <span style={{ fontSize: fs(12), color: MILITARY.textMuted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {timeText}
+            </span>
+          </span>
+          <Button size="small" type="text" icon={<ClearOutlined />} onClick={clear} style={{ color: MILITARY.textSecondary }}>
+            清空
+          </Button>
+        </div>
+      )}
+
+      <div
+        ref={scrollRef}
+        onScroll={onScroll}
+        style={{
+          flex: 1,
+          minHeight: 0,
+          overflowY: 'auto',
+          border: `1px solid ${MILITARY.borderSoft}`,
+          borderRadius: 10,
+          padding: 12,
+          background: MILITARY.paper,
+        }}
+      >
+        {msgs.length === 0 ? (
+          <div style={{ margin: 'auto', width: '100%', maxWidth: 360, textAlign: 'center', padding: '8px 0' }}>
+            <div
+              style={{
+                width: 52,
+                height: 52,
+                borderRadius: '50%',
+                margin: '0 auto 12px',
+                display: 'grid',
+                placeItems: 'center',
+                background: MILITARY.soft,
+                border: `1px solid ${MILITARY.softStrong}`,
+                color: MILITARY.primary,
+                fontSize: fs(22),
+              }}
+            >
+              <RobotOutlined />
+            </div>
+            <div style={{ fontSize: fs(13.5), fontWeight: 600, color: MILITARY.text }}>
+              问我数据、问我怎么用，或直接让我办事
+            </div>
+            <div style={{ fontSize: fs(12), color: MILITARY.textMuted, margin: '4px 0 12px' }}>
+              查询会留下痕迹，写操作先给你一张确认卡
+            </div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
+              {suggestions.map((s) => (
+                <Button
+                  key={s}
+                  block
+                  size="small"
+                  style={{
+                    textAlign: 'left',
+                    whiteSpace: 'normal',
+                    height: 'auto',
+                    padding: '9px 12px',
+                    background: MILITARY.card,
+                    borderColor: MILITARY.border,
+                    color: MILITARY.textSecondary,
+                    borderRadius: 8,
+                  }}
+                  onClick={() => void send(s)}
+                >
+                  <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
+                    <span>{s}</span>
+                    <span style={{ color: '#A9AF9C', flex: '0 0 auto' }}>→</span>
+                  </span>
+                </Button>
+              ))}
+            </div>
+          </div>
+        ) : (
+          msgs.map((m, i) => {
+            const mine = m.role === 'user';
+            // 思考文案优先级：正在调工具（最具体）> 耗时阶段推测
+            const lastStep = m.steps?.[m.steps.length - 1];
+            const stepText = lastStep?.summary
+              ? `${lastStep.summary.slice(0, 30)}${lastStep.summary.length > 30 ? '…' : ''}`
+              : '';
+            const thinkingText = stepText
+              ? `正在执行：${stepText}`
+              : elapsed >= 8000
+                ? '本地模型响应较慢，仍在生成…'
+                : elapsed >= 3000
+                  ? '正在检索业务数据…'
+                  : '正在理解你的问题…';
+            return (
+              <div
+                key={i}
+                data-msg={i}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  justifyContent: mine ? 'flex-end' : 'flex-start',
+                  gap: 8,
+                  marginBottom: 14,
+                }}
+              >
+                {!mine && (
+                  <Avatar
+                    size={26}
+                    icon={<RobotOutlined />}
+                    style={{
+                      flex: '0 0 26px',
+                      background: MILITARY.soft,
+                      color: MILITARY.primary,
+                      border: `1px solid ${MILITARY.softStrong}`,
+                      marginTop: 2,
+                    }}
+                  />
+                )}
+
+                <div style={{ maxWidth: mine ? '82%' : 'calc(100% - 34px)', minWidth: 0 }}>
+                  <div
+                    style={{
+                      display: mine ? 'inline-block' : 'block',
+                      whiteSpace: mine ? 'pre-wrap' : 'normal',
+                      wordBreak: 'break-word',
+                      padding: mine ? '8px 12px' : '10px 12px',
+                      borderRadius: mine ? '10px 10px 2px 10px' : '10px 10px 10px 2px',
+                      background: mine ? MILITARY.primary : MILITARY.card,
+                      color: mine ? MILITARY.onPrimary : MILITARY.text,
+                      border: mine ? 'none' : `1px solid ${MILITARY.borderSoft}`,
+                      boxShadow: mine ? MILITARY.shadowSm : 'none',
+                      textAlign: 'left',
+                    }}
+                  >
+                    {mine ? (
+                      m.content
+                    ) : m.content ? (
+                      <Markdown text={m.content} />
+                    ) : (
+                      /**
+                       * 思考态。
+                       *
+                       * 原来只有三个跳动的小点 —— 本地模型首字要等十几秒时，
+                       * 用户没法判断"它在想"还是"它卡了"。现在按耗时给三句话：
+                       *   0~3s   正在理解你的问题…
+                       *   3~8s   正在检索业务数据…
+                       *   8s 以上 本地模型响应较慢，仍在生成…
+                       * 有工具调用时直接说正在做什么（比任何推测都准），
+                       * 并且始终显示已等待秒数 + 一个"停止生成"。
+                       */
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, height: 14 }}>
+                            <span className="ai-typing-dot" />
+                            <span className="ai-typing-dot" />
+                            <span className="ai-typing-dot" />
+                          </span>
+                          <span style={{ fontSize: fs(12.5), color: MILITARY.textSecondary }}>
+                            {thinkingText}
+                          </span>
+                        </div>
+
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 10,
+                            fontSize: fs(11.5),
+                            color: MILITARY.textMuted,
+                          }}
+                        >
+                          {busy ? (
+                            <>
+                              <span>已等待 {formatElapsed(elapsed)}</span>
+                              <button
+                                type="button"
+                                onClick={stop}
+                                style={{
+                                  padding: '1px 9px',
+                                  fontSize: fs(11.5),
+                                  color: MILITARY.textSecondary,
+                                  background: 'transparent',
+                                  border: `1px solid ${MILITARY.border}`,
+                                  borderRadius: 999,
+                                  cursor: 'pointer',
+                                }}
+                              >
+                                停止生成
+                              </button>
+                            </>
+                          ) : (
+                            <span>没有收到回答，可以重试一次</span>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* 工具轨迹：让"它真的查了数据库 / 真的准备写库"看得见 */}
+                  {!mine && !!m.steps?.length && (
+                    <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 3 }}>
+                      {m.steps.map((s, k) => (
+                        <div
+                          key={`${s.name}-${k}`}
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 5,
+                            fontSize: fs(11.5),
+                            color: s.ok ? MILITARY.textMuted : MILITARY.error,
+                          }}
+                        >
+                          {s.kind === 'write' ? (
+                            <EditOutlined style={{ fontSize: fs(11) }} />
+                          ) : (
+                            <SearchOutlined style={{ fontSize: fs(11) }} />
+                          )}
+                          <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                            {s.summary}
+                          </span>
+                          {s.ok ? (
+                            <CheckCircleOutlined style={{ fontSize: fs(10), color: MILITARY.success }} />
+                          ) : (
+                            <CloseCircleOutlined style={{ fontSize: fs(10) }} />
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {/*
+                    输入表单：模型缺信息时弹出。
+                    和确认卡一样挂在消息上 —— 表单是"这一轮缺什么"的证据，
+                    不该因为用户继续提问就跑到最新一条回答下面。
+                  */}
+                  {!mine &&
+                    m.forms?.map((c) => (
+                      <AiInputForm
+                        key={c.spec.token}
+                        card={c}
+                        onSubmit={(values) => void submitForm(c, values)}
+                        onCancel={() => cancelForm(c.spec.token)}
+                      />
+                    ))}
+
+                  {/* 确认卡：写操作唯一入口。卡片内容与令牌里签名的参数是同一份数据 */}
+                  {!mine &&
+                    m.actions?.map((a) => (
+                      <div
+                        key={a.token}
+                        data-testid="ai-action-card"
+                        data-action-state={a.status}
+                        style={{
+                          marginTop: 8,
+                          border: `1px solid ${MILITARY.softStrong}`,
+                          borderLeft: `3px solid ${MILITARY.accent}`,
+                          borderRadius: 8,
+                          background: MILITARY.paper,
+                          padding: '10px 12px',
+                        }}
+                      >
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
+                          <EditOutlined style={{ color: MILITARY.accent, fontSize: fs(13) }} />
+                          <span style={{ fontSize: fs(12.5), fontWeight: 500, color: MILITARY.text }}>
+                            {a.status === 'done'
+                              ? `已执行：${a.title}`
+                              : a.status === 'cancelled'
+                                ? `已取消：${a.title}`
+                                : a.status === 'failed'
+                                  ? `执行失败：${a.title}`
+                                  : `待确认：${a.title}`}
+                          </span>
+                        </div>
+
+                        {!!a.fields.length && (
+                          <div
+                            style={{
+                              borderTop: `1px dashed ${MILITARY.border}`,
+                              paddingTop: 8,
+                              marginBottom: 8,
+                            }}
+                          >
+                            {a.fields.map((f) => (
+                              <div
+                                key={f.label}
+                                style={{ display: 'flex', gap: 8, fontSize: fs(12), lineHeight: '20px' }}
+                              >
+                                <span style={{ flex: '0 0 76px', color: MILITARY.textMuted }}>
+                                  {f.label}
+                                </span>
+                                <span style={{ color: MILITARY.text, wordBreak: 'break-all' }}>
+                                  {f.value}
+                                </span>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+
+                        {a.status === 'pending' && (
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                            <Button
+                              size="small"
+                              type="primary"
+                              onClick={() => void confirmAction(a.token)}
+                              data-testid="ai-action-confirm"
+                            >
+                              确认执行
+                            </Button>
+                            <Button
+                              size="small"
+                              onClick={() => patchAction(a.token, { status: 'cancelled' })}
+                            >
+                              取消
+                            </Button>
+                            <span style={{ fontSize: fs(11), color: MILITARY.textMuted }}>
+                              确认后写入数据库并记审计日志
+                            </span>
+                          </div>
+                        )}
+                        {a.status === 'running' && (
+                          <span style={{ fontSize: fs(12), color: MILITARY.textMuted }}>正在执行…</span>
+                        )}
+                        {a.status === 'done' && (
+                          <div
+                            style={{
+                              fontSize: fs(12),
+                              color: MILITARY.success,
+                              display: 'flex',
+                              alignItems: 'center',
+                              gap: 5,
+                            }}
+                          >
+                            <CheckCircleOutlined />
+                            {a.result}
+                          </div>
+                        )}
+                        {a.status === 'failed' && (
+                          <div style={{ fontSize: fs(12), color: MILITARY.error }}>{a.result}</div>
+                        )}
+                        {a.status === 'cancelled' && (
+                          <div style={{ fontSize: fs(12), color: MILITARY.textMuted }}>
+                            已取消，未写入数据库
+                          </div>
+                        )}
+                      </div>
+                    ))}
+
+                  {!mine && !!m.tables?.length && (
+                    <div
+                      style={{
+                        marginTop: 6,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 4,
+                        flexWrap: 'wrap',
+                        fontSize: fs(11.5),
+                        color: MILITARY.textMuted,
+                      }}
+                    >
+                      <span>参考数据</span>
+                      {m.tables.map((t) => (
+                        <span
+                          key={t.model}
+                          style={{
+                            background: MILITARY.soft,
+                            color: MILITARY.textSecondary,
+                            borderRadius: 4,
+                            padding: '0 6px',
+                            lineHeight: '18px',
+                          }}
+                        >
+                          {t.model} · {t.total}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {mine && (
+                  <Avatar
+                    size={26}
+                    style={{
+                      flex: '0 0 26px',
+                      background: MILITARY.primary,
+                      color: MILITARY.onPrimary,
+                      fontSize: fs(11),
+                      marginTop: 2,
+                    }}
+                  >
+                    我
+                  </Avatar>
+                )}
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {err && <div style={{ marginTop: 8, fontSize: fs(12), color: '#cf1322' }}>{err}</div>}
+
+      {/* 输入区做成一个整体面板：输入框无边框，提示与发送按钮同在一层 */}
+      <div
+        style={{
+          marginTop: 10,
+          border: `1px solid ${MILITARY.border}`,
+          borderRadius: 10,
+          background: MILITARY.card,
+          padding: '4px 8px 8px',
+        }}
+      >
+        <TextArea
+          data-testid="ai-chat-input"
+          value={input}
+          variant="borderless"
+          style={{ padding: '4px 0 0', background: 'transparent' }}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="输入问题，Enter 发送，Shift+Enter 换行"
+          autoSize={{ minRows: 1, maxRows: 4 }}
+          onKeyDown={(e) => {
+            // Enter 发送 / Shift+Enter 换行（Ctrl+Enter 也发送，兼容旧习惯）。
+            // 以前只有 Ctrl+Enter 能发，反直觉，用户和自动化测试都踩过。
+            if (e.key === 'Enter' && (e.ctrlKey || !e.shiftKey)) {
+              e.preventDefault();
+              void send(input);
+            }
+          }}
+          disabled={busy}
+        />
+        <div style={{ marginTop: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span style={{ fontSize: fs(11.5), color: MILITARY.textMuted }}>回答基于系统真实数据与当前时间生成</span>
+          <Button
+            size="small"
+            type="primary"
+            icon={<SendOutlined />}
+            loading={busy}
+            onClick={() => void send(input)}
+            disabled={!input.trim()}
+            data-testid="ai-chat-send"
+          >
+            发送
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}