From bf1e881a8c86cf110621ee4aee9bb27b14db588c Mon Sep 17 00:00:00 2001
From: let5sne <let5sne@gmail.com>
Date: Sat, 18 Jul 2026 04:47:33 +0800
Subject: [PATCH] feat(mobile): rebuild SOP ask page as WeChat-style chat
 (batch 1)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

客户 2026-07-18 新要求:语音文字交互改为微信聊天式,替代表单式操作
(客户原话 > Figma,已记入版本对比冲突表)。

新增 components/chat/ChatComposer.vue(可复用,练页批次二直接使用):
- 微信式输入条:⊕功能面板(图片/视频、选音频转文字、训练概况)、
  按住说话(touch+mouse,松开即发送/滑出取消)、麦克风⇄键盘切换、
  文本发送;录音兜底:环境不支持自动转选音频
- 快捷问题 chips 横向滚动置于输入条上方;附件以可移除 chip 展示

pages/user/sop/index.vue 重构为消息流模型:
- user/master/system/pending 四类消息;答案气泡内含要点/提醒/无依据提示,
  操作行=播报、引用N条(折叠展开)、总结卡、有帮助/没解决(逐条反馈)
- 语音松开即发送(按用户决策):转写成功直接成为消息(带🎤标),
  失败以系统气泡提示;选音频同语义
- 登录守卫、pending query/tool、主管学员态、生成计数取消、
  onHide/onUnload 清理全部保留;总结卡弹窗(下载/播报)原样保留

验证:
- 本地(构建产物+生产API)9 张截图人工目检:空态/快捷词问答/引用展开/
  键盘输入发送/按住录音/语音失败系统气泡/⊕面板/总结卡/超大字号档
- 生产冒烟:composer 存在 + 完整问答回合渲染通过
- H5 已发布(备份 h5-before-20260718044611)

批次二(待办):练页会话化(复用 ChatComposer)、web-ai 页统一、
旧表单样式清理。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 ...工端版本功能对比与功能对齐清单-20260717.md |   6 +
 .../src/components/chat/ChatComposer.vue      | 408 ++++++++
 mobile-uni/src/pages/user/sop/index.vue       | 949 +++++++++++-------
 3 files changed, 990 insertions(+), 373 deletions(-)
 create mode 100644 mobile-uni/src/components/chat/ChatComposer.vue

diff --git a/docs/员工端版本功能对比与功能对齐清单-20260717.md b/docs/员工端版本功能对比与功能对齐清单-20260717.md
index c388e6a8..95273074 100644
--- a/docs/员工端版本功能对比与功能对齐清单-20260717.md
+++ b/docs/员工端版本功能对比与功能对齐清单-20260717.md
@@ -86,3 +86,9 @@ Figma 已完成全文件结构和视觉复核，当前实测为 81 个顶层页
 - 阶段与产品定义：[银城员工端APP分阶段实施总纲.md](银城员工端APP分阶段实施总纲.md)、[20260708/数字师傅学练问报整合方案.md](20260708/数字师傅学练问报整合方案.md)。
 - API 与运行边界：[API_INTEGRATION.md](API_INTEGRATION.md)、[DEMO_ACCEPTANCE.md](DEMO_ACCEPTANCE.md)。
 - 历史可运行源码：`mobile/src/App.vue`；当前权威源码：`mobile-uni/`、`frontend/`、`backend/ruoyi-modules/ruoyi-aihr/`。
+
+## 2026-07-18 追加:问答/对练交互形态(客户新要求)
+
+| 功能 | 客户要求 | Figma | 当前代码 | 线上状态 | 处理决定 |
+| --- | --- | --- | --- | --- | --- |
+| 语音文字交互形态 | 2026-07-18 客户原话:凡语音文字交互处应做成微信聊天式(消息流+按住说话),现表单式操作太复杂 | 表单式布局(输入框+按钮组) | 问页已改会话流:ChatComposer(⊕面板/按住说话松开即发/键盘切换)+气泡消息流,引用/总结卡/反馈/播报收入答案气泡操作行 | 已发布并生产冒烟通过(2026-07-18) | 按客户要求执行,客户原话 > Figma;练页为第二批,web-ai 页随批次二统一 |
diff --git a/mobile-uni/src/components/chat/ChatComposer.vue b/mobile-uni/src/components/chat/ChatComposer.vue
new file mode 100644
index 00000000..538f0a81
--- /dev/null
+++ b/mobile-uni/src/components/chat/ChatComposer.vue
@@ -0,0 +1,408 @@
+<template>
+  <view class="chat-composer-wrap">
+    <scroll-view v-if="quickQuestions.length" scroll-x class="chip-scroll" :show-scrollbar="false">
+      <view class="chip-row">
+        <button
+          v-for="item in quickQuestions"
+          :key="item"
+          class="chip"
+          :disabled="disabled"
+          @click="emit('quick', item)"
+        >
+          {{ item }}
+        </button>
+      </view>
+    </scroll-view>
+
+    <view v-if="mediaName" class="media-chip">
+      <text class="media-chip-kind">{{ mediaKind === 'video' ? '现场视频' : '现场图片' }}</text>
+      <text class="media-chip-name">{{ mediaName }}</text>
+      <button class="media-chip-remove" :disabled="disabled" aria-label="移除附件" @click="emit('clear-media')">×</button>
+    </view>
+
+    <view class="composer-bar">
+      <button class="composer-icon" :disabled="disabled || recording" aria-label="更多功能" @click="panelOpen = !panelOpen">
+        <text class="composer-icon-text">{{ panelOpen ? '×' : '＋' }}</text>
+      </button>
+
+      <button
+        v-if="voiceMode"
+        class="hold-talk"
+        :class="{ recording }"
+        :disabled="disabled || transcribing"
+        @touchstart.prevent="startHold"
+        @touchend.prevent="endHold"
+        @touchcancel.prevent="cancelHold"
+        @mousedown.prevent="startHold"
+        @mouseup.prevent="endHold"
+        @mouseleave="cancelHold"
+      >
+        {{ recording ? '松开 发送' : transcribing ? '转写中…' : '按住 说话' }}
+      </button>
+      <textarea
+        v-else
+        v-model="draft"
+        class="composer-input"
+        :maxlength="maxlength"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        auto-height
+      />
+
+      <button
+        class="composer-icon"
+        :disabled="disabled || recording || transcribing"
+        :aria-label="voiceMode ? '切换键盘输入' : '切换语音输入'"
+        @click="toggleVoiceMode"
+      >
+        <text class="composer-icon-text">{{ voiceMode ? '⌨' : '🎤' }}</text>
+      </button>
+
+      <button
+        v-if="!voiceMode && (draft.trim() || mediaName)"
+        class="composer-send"
+        :disabled="disabled"
+        @click="sendDraft"
+      >
+        发送
+      </button>
+    </view>
+
+    <view v-if="panelOpen" class="composer-panel">
+      <button class="panel-item" :disabled="disabled" @click="panelEmit('pick-media')">
+        <text class="panel-item-icon">🖼</text>
+        <text class="panel-item-label">图片/视频</text>
+      </button>
+      <button class="panel-item" :disabled="disabled || transcribing" @click="panelEmit('pick-audio')">
+        <text class="panel-item-icon">🎵</text>
+        <text class="panel-item-label">选音频转文字</text>
+      </button>
+      <button v-if="toolLabel" class="panel-item" :disabled="disabled" @click="panelEmit('tool')">
+        <text class="panel-item-icon">📊</text>
+        <text class="panel-item-label">{{ toolLabel }}</text>
+      </button>
+    </view>
+    <text v-if="panelOpen" class="panel-hint">图片≤10MB，视频≤100MB；仅用于本次现场分析</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean;
+  transcribing?: boolean;
+  placeholder?: string;
+  maxlength?: number;
+  quickQuestions?: string[];
+  mediaName?: string;
+  mediaKind?: string;
+  toolLabel?: string;
+}>(), {
+  disabled: false,
+  transcribing: false,
+  placeholder: '输入问题…',
+  maxlength: 200,
+  quickQuestions: () => [],
+  mediaName: '',
+  mediaKind: '',
+  toolLabel: ''
+});
+
+const emit = defineEmits<{
+  (e: 'send', text: string): void;
+  (e: 'voice-blob', blob: Blob): void;
+  (e: 'pick-audio'): void;
+  (e: 'pick-media'): void;
+  (e: 'clear-media'): void;
+  (e: 'quick', question: string): void;
+  (e: 'tool'): void;
+}>();
+
+const draft = ref('');
+const voiceMode = ref(true);
+const panelOpen = ref(false);
+const recording = ref(false);
+
+let recorder: MediaRecorder | null = null;
+let stream: MediaStream | null = null;
+let holdGeneration = 0;
+let discardRecording = false;
+
+const supportsRecording = () =>
+  typeof navigator !== 'undefined' && Boolean(navigator.mediaDevices?.getUserMedia) && typeof MediaRecorder !== 'undefined';
+
+const toggleVoiceMode = () => {
+  voiceMode.value = !voiceMode.value;
+  panelOpen.value = false;
+};
+
+const sendDraft = () => {
+  const text = draft.value.trim();
+  if (!text && !props.mediaName) return;
+  draft.value = '';
+  panelOpen.value = false;
+  emit('send', text);
+};
+
+const panelEmit = (event: 'pick-media' | 'pick-audio' | 'tool') => {
+  panelOpen.value = false;
+  emit(event);
+};
+
+const stopTracks = () => {
+  stream?.getTracks().forEach((track) => track.stop());
+  stream = null;
+};
+
+const startHold = async () => {
+  if (props.disabled || props.transcribing || recording.value) return;
+  if (!supportsRecording()) {
+    emit('pick-audio');
+    return;
+  }
+  const generation = ++holdGeneration;
+  discardRecording = false;
+  try {
+    const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    if (generation !== holdGeneration) {
+      mediaStream.getTracks().forEach((track) => track.stop());
+      return;
+    }
+    stream = mediaStream;
+    const mediaRecorder = new MediaRecorder(mediaStream);
+    const chunks: Blob[] = [];
+    recorder = mediaRecorder;
+    mediaRecorder.ondataavailable = (event) => {
+      if (event.data?.size) chunks.push(event.data);
+    };
+    mediaRecorder.onstop = () => {
+      recording.value = false;
+      recorder = null;
+      stopTracks();
+      if (discardRecording) return;
+      const blob = new Blob(chunks, { type: mediaRecorder.mimeType || 'audio/webm' });
+      if (blob.size) emit('voice-blob', blob);
+    };
+    mediaRecorder.start();
+    recording.value = true;
+  } catch {
+    stopTracks();
+    if (generation === holdGeneration) emit('pick-audio');
+  }
+};
+
+const endHold = () => {
+  if (!recording.value) return;
+  if (recorder && recorder.state !== 'inactive') recorder.stop();
+};
+
+const cancelHold = () => {
+  if (!recording.value) return;
+  discardRecording = true;
+  if (recorder && recorder.state !== 'inactive') recorder.stop();
+};
+
+const teardown = () => {
+  holdGeneration += 1;
+  discardRecording = true;
+  if (recorder && recorder.state !== 'inactive') {
+    recorder.ondataavailable = null;
+    recorder.onstop = null;
+    recorder.stop();
+  }
+  recorder = null;
+  stopTracks();
+  recording.value = false;
+};
+
+defineExpose({ teardown });
+</script>
+
+<style scoped>
+.chat-composer-wrap {
+  border-top: 1px solid #ebedf0;
+  background: #f7f8fa;
+  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
+}
+
+.chip-scroll {
+  width: 100%;
+  margin-bottom: 8px;
+  white-space: nowrap;
+}
+
+.chip-row {
+  display: inline-flex;
+  gap: 8px;
+}
+
+.chip {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 5px 12px;
+  border: 1px solid #f0c0c5;
+  border-radius: 999px;
+  background: #ffffff;
+  color: #c8001a;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.media-chip {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+  padding: 6px 10px;
+  border: 1px solid #e3e6ea;
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.media-chip-kind {
+  flex-shrink: 0;
+  color: #c8001a;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.media-chip-name {
+  flex: 1;
+  overflow: hidden;
+  color: #4d5560;
+  font-size: 12px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.media-chip-remove {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border-radius: 50%;
+  background: #eef0f3;
+  color: #6b7480;
+  font-size: 15px;
+  line-height: 24px;
+}
+
+.composer-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.composer-icon {
+  flex-shrink: 0;
+  width: 38px;
+  height: 38px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #dfe3e8;
+  border-radius: 50%;
+  background: #ffffff;
+  line-height: 36px;
+}
+
+.composer-icon-text {
+  color: #3a4350;
+  font-size: 19px;
+}
+
+.hold-talk {
+  flex: 1;
+  min-height: 38px;
+  margin: 0;
+  border: 1px solid #dfe3e8;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #232a33;
+  font-size: 16px;
+  font-weight: 600;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.hold-talk.recording {
+  background: #e70014;
+  border-color: #e70014;
+  color: #ffffff;
+}
+
+.composer-input {
+  flex: 1;
+  box-sizing: border-box;
+  width: auto;
+  min-height: 38px;
+  max-height: 110px;
+  padding: 9px 12px;
+  border: 1px solid #dfe3e8;
+  border-radius: 10px;
+  background: #ffffff;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.composer-send {
+  flex-shrink: 0;
+  min-height: 38px;
+  margin: 0;
+  padding: 0 16px;
+  border-radius: 10px;
+  background: #e70014;
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.composer-panel {
+  display: flex;
+  gap: 18px;
+  margin-top: 12px;
+  padding: 4px 6px 0;
+}
+
+.panel-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  line-height: 1.2;
+}
+
+.panel-item::after {
+  border: none;
+}
+
+.panel-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 52px;
+  border: 1px solid #e6e9ed;
+  border-radius: 14px;
+  background: #ffffff;
+  font-size: 24px;
+}
+
+.panel-item-label {
+  color: #5a6270;
+  font-size: 12px;
+}
+
+.panel-hint {
+  display: block;
+  margin-top: 8px;
+  padding-left: 6px;
+  color: #98a1ad;
+  font-size: 11px;
+}
+</style>
diff --git a/mobile-uni/src/pages/user/sop/index.vue b/mobile-uni/src/pages/user/sop/index.vue
index 063998e1..e1e82bfb 100644
--- a/mobile-uni/src/pages/user/sop/index.vue
+++ b/mobile-uni/src/pages/user/sop/index.vue
@@ -1,170 +1,134 @@
 <template>
-  <view class="page sop-page employee-page-shell">
-    <view class="sop-head">
-      <text class="employee-kicker sop-eyebrow">SOP · 话术 · 工作流程</text>
-      <text class="page-title">问</text>
-      <text class="page-subtitle">数字师傅 · SOP问答</text>
-      <text class="sop-context">{{ positionLabel }} · 住宅项目</text>
-      <text class="toolbar-tip">先把问题问清楚，再按需生成总结卡，不伪造分类能力。</text>
+  <view class="page sop-chat-page">
+    <view class="chat-head">
+      <view class="chat-head-row">
+        <text class="chat-title">问 · 数字师傅</text>
+        <text class="chat-context">{{ positionLabel }} · 住宅项目</text>
+      </view>
+      <view class="source-switch chat-source-switch" aria-label="问答来源">
+        <button class="source-option active" aria-current="page">企业问师傅</button>
+        <button class="source-option" @click="openWebAi">问 AI（全网）</button>
+      </view>
     </view>
 
-    <view class="source-switch employee-card" aria-label="问答来源">
-      <button class="source-option active" aria-current="page">企业问师傅</button>
-      <button class="source-option" @click="openWebAi">问 AI（全网）</button>
-    </view>
-
-    <view class="panel query-panel employee-card">
-      <view class="query-hero">
-        <view class="query-copy">
-          <text class="query-title">问师傅</text>
-          <text class="query-subtitle">直接问工作中的 SOP、话术和流程</text>
+    <scroll-view scroll-y class="chat-thread" :scroll-top="threadScrollTop" :scroll-with-animation="true">
+      <view class="thread-inner">
+        <view class="bubble-row left">
+          <view class="avatar master-avatar">师</view>
+          <view class="bubble master">
+            <text class="bubble-text">你好，我是老师傅。工作里的 SOP、话术、流程直接问我，答案都带引用依据；也可以按住下面的按钮说话。</text>
+          </view>
         </view>
-        <view class="query-visual" aria-hidden="true">
-          <view class="query-bubble primary"><text>•••</text></view>
-          <view class="query-bubble secondary"><text>•••</text></view>
+
+        <template v-for="msg in messages" :key="msg.id">
+          <view v-if="msg.role === 'user'" class="bubble-row right">
+            <view class="bubble user">
+              <view v-if="msg.voice" class="bubble-tag">🎤 语音转文字</view>
+              <view v-if="msg.mediaName" class="bubble-tag">📎 {{ msg.mediaKind === 'video' ? '现场视频' : '现场图片' }} · {{ msg.mediaName }}</view>
+              <text class="bubble-text">{{ msg.text }}</text>
+            </view>
+          </view>
+
+          <view v-else-if="msg.role === 'system'" class="system-row">
+            <text class="system-text">{{ msg.text }}</text>
+          </view>
+
+          <view v-else-if="msg.role === 'pending'" class="bubble-row left">
+            <view class="avatar master-avatar">师</view>
+            <view class="bubble master pending-bubble">
+              <text class="bubble-text">师傅思考中…</text>
+            </view>
+          </view>
+
+          <view v-else class="bubble-row left">
+            <view class="avatar master-avatar">师</view>
+            <view class="bubble master">
+              <text class="bubble-text">{{ msg.result.answer || '未生成直接答案，请查看引用依据。' }}</text>
+              <view v-if="msg.result.keyPoints?.length" class="bubble-keypoints">
+                <text v-for="(point, index) in msg.result.keyPoints" :key="point" class="bubble-keypoint">
+                  {{ index + 1 }}. {{ cleanOrderedText(point) }}
+                </text>
+              </view>
+              <view v-if="msg.result.cautions?.length" class="bubble-cautions">
+                <text v-for="item in msg.result.cautions" :key="item" class="bubble-caution">⚠ {{ item }}</text>
+              </view>
+              <text v-if="msg.result.noEvidence" class="bubble-noevidence">当前授权空间内没有足够依据。</text>
+
+              <view class="bubble-actions">
+                <button class="bubble-action" @click="toggleAnswerSpeech(msg)">{{ speechButtonLabel(`answer-${msg.id}`) }}</button>
+                <button v-if="msg.result.snippets?.length" class="bubble-action" @click="msg.citationsOpen = !msg.citationsOpen">
+                  引用 {{ msg.result.snippets.length }} 条 {{ msg.citationsOpen ? '▲' : '▼' }}
+                </button>
+                <button v-if="msg.toolCode === ''" class="bubble-action" :disabled="summaryLoading" @click="buildSummaryCard(msg)">
+                  {{ summaryLoading ? '生成中' : '总结卡' }}
+                </button>
+              </view>
+              <view v-if="msg.toolCode === ''" class="bubble-actions feedback-row">
+                <button
+                  class="bubble-action"
+                  :class="{ active: msg.feedbackVerdict === 'up' }"
+                  :disabled="msg.feedbackSubmitting || Boolean(msg.feedbackVerdict)"
+                  @click="feedback('up', msg)"
+                >
+                  有帮助
+                </button>
+                <button
+                  class="bubble-action"
+                  :class="{ negative: msg.feedbackVerdict === 'down' }"
+                  :disabled="msg.feedbackSubmitting || Boolean(msg.feedbackVerdict)"
+                  @click="feedback('down', msg)"
+                >
+                  没解决
+                </button>
+                <text v-if="msg.feedbackVerdict" class="feedback-note">
+                  {{ msg.feedbackVerdict === 'up' ? '已记录' : '已进入复核' }}
+                </text>
+              </view>
+
+              <view v-if="msg.citationsOpen && msg.result.snippets?.length" class="bubble-citations">
+                <view v-for="(snippet, index) in msg.result.snippets" :key="`${snippet.docTitle}-${index}`" class="citation">
+                  <text class="citation-title">{{ snippet.docTitle }}</text>
+                  <text v-if="snippet.spaceCode" class="citation-meta">知识空间：{{ snippet.spaceCode }}</text>
+                  <text class="citation-content">{{ snippetExcerpt(snippet.content) }}</text>
+                  <text v-if="snippet.fragmentId" class="citation-meta">片段 #{{ snippet.fragmentId }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </template>
+
+        <view v-if="!loggedIn" class="bubble-row left">
+          <view class="avatar master-avatar">师</view>
+          <view class="bubble master">
+            <text class="bubble-text">登录后才能查询 SOP、生成总结卡并反馈答案。</text>
+            <view class="bubble-actions">
+              <button class="bubble-action primary" @click="goLogin">去登录</button>
+            </view>
+          </view>
         </view>
-      </view>
-      <textarea
-        v-model="query"
-        class="textarea sop-query-textarea"
-        maxlength="200"
-        :placeholder="quickQuestionPlaceholder"
-      />
-      <view class="voice-query-actions">
-        <button
-          class="secondary-button voice-query-button"
-          :class="{ 'recording-active': voiceRecording }"
-          :disabled="loading || voiceTranscribing"
-          @click="toggleVoiceRecording"
-        >
-          {{ voiceRecording ? '停止录音' : voiceTranscribing ? '转写中' : '语音提问' }}
-        </button>
-        <button
-          class="ghost-button voice-query-button"
-          :disabled="loading || voiceRecording || voiceTranscribing"
-          @click="pickVoiceAudio"
-        >
-          {{ voiceTranscribing ? '转写中' : '选择音频' }}
-        </button>
-      </view>
-      <text class="voice-query-hint">录音会先转成文字，确认问题后再提交；麦克风不可用时可选择音频。</text>
-      <view class="media-actions">
-        <button class="ghost-button media-button" :disabled="loading" @click="pickMedia">
-          ＋ 上传图片或视频
-        </button>
-        <text class="media-hint">图片≤10MB，视频≤100MB；仅用于本次现场分析</text>
-      </view>
-      <view v-if="selectedMedia" class="media-file">
-        <view class="media-file-copy">
-          <text class="media-kind">{{ selectedMedia.kind === 'video' ? '现场视频' : '现场图片' }}</text>
-          <text class="media-name">{{ selectedMedia.name }}</text>
-        </view>
-        <button class="media-remove" :disabled="loading" aria-label="移除附件" @click="clearMedia">×</button>
-      </view>
-      <text class="query-caption">常见问题可以直接点下面快捷问法，结果会保留引用依据。</text>
-      <view class="chip-row">
-        <button v-for="item in quickQuestions" :key="item" class="chip" :disabled="loading" @click="useQuickQuestion(item)">
-          {{ item }}
-        </button>
-      </view>
-      <button class="secondary-button data-tool-button" :disabled="loading" @click="runDataTool(defaultToolCode)">
-        {{ defaultToolCode === 'TEAM_PRACTICE_SUMMARY' ? '团队训练概况' : '我的训练概况' }}
-      </button>
-      <button class="primary-button query-submit" :disabled="loading || voiceRecording || voiceTranscribing" @click="search">
-        {{ loading ? '检索中' : '问老师傅' }}
-      </button>
-      <text v-if="message" class="status-message">{{ message }}</text>
-    </view>
 
-    <view v-if="loggedIn && !result" class="knowledge-tip-card employee-card">
-      <view class="knowledge-tip-icon">⌕</view>
-      <view class="knowledge-tip-copy">
-        <text class="knowledge-tip-title">知识库引用可追溯</text>
-        <text class="knowledge-tip-desc">答案来自标准 SOP、附件来源，查得清楚、用得放心</text>
+        <view :style="{ height: '12px' }" />
       </view>
-      <text class="knowledge-tip-arrow">›</text>
-    </view>
+    </scroll-view>
 
-    <view v-if="loggedIn && !result && !loading" class="answer-empty employee-card">
-      <text class="answer-empty-icon">•••</text>
-      <text class="answer-empty-title">暂无相关回答</text>
-      <text class="answer-empty-desc">换个问题试试吧</text>
-    </view>
-
-    <view v-if="!loggedIn" class="panel login-panel employee-card">
-      <view>
-        <text class="panel-title">需要登录</text>
-        <text class="muted block">登录后才能查询 SOP、生成总结卡并反馈答案。</text>
-      </view>
-      <button class="primary-button login-button" @click="goLogin">去登录</button>
-    </view>
-
-    <view v-if="result" class="panel answer-panel employee-card">
-      <view class="answer-title-row">
-        <text class="panel-title">师傅回答</text>
-        <button class="voice-button" :disabled="speechState.status === 'loading' && speechState.key !== 'answer'" @click="toggleAnswerSpeech">
-          {{ speechButtonLabel('answer') }}
-        </button>
-      </view>
-      <view class="question-card">
-        <text class="question-label">我的问题</text>
-        <text class="question-text">{{ query }}</text>
-      </view>
-      <view class="answer-copy-card">
-        <text class="answer-text">{{ result.answer || '未生成直接答案,请查看下方引用。' }}</text>
-      </view>
-      <text v-if="result.noEvidence" class="status-message">当前授权空间内没有足够依据。</text>
-
-      <view v-if="result.keyPoints?.length" class="keypoints">
-        <text v-for="(point, index) in result.keyPoints" :key="point" class="keypoint">
-          {{ index + 1 }}. {{ cleanOrderedText(point) }}
-        </text>
-      </view>
-
-      <view v-if="result.cautions?.length" class="cautions">
-        <text v-for="item in result.cautions" :key="item">{{ item }}</text>
-      </view>
-
-      <view v-if="currentToolCode === ''" class="feedback-actions">
-        <button
-          class="secondary-button"
-          :class="{ active: feedbackVerdict === 'up' }"
-          :disabled="feedbackSubmitting || Boolean(feedbackVerdict)"
-          @click="feedback('up')"
-        >
-          有帮助
-        </button>
-        <button
-          class="secondary-button"
-          :class="{ active: feedbackVerdict === 'down', negative: feedbackVerdict === 'down' }"
-          :disabled="feedbackSubmitting || Boolean(feedbackVerdict)"
-          @click="feedback('down')"
-        >
-          没解决
-        </button>
-      </view>
-      <text v-if="feedbackVerdict" class="feedback-status">
-        {{ feedbackVerdict === 'up' ? '已记录为有帮助' : '已提交未解决反馈，后续会继续优化这条答案' }}
-      </text>
-    </view>
-
-    <view v-if="result?.snippets?.length" class="panel sources-panel">
-      <text class="panel-title">引用依据</text>
-      <view v-for="(snippet, index) in result.snippets" :key="`${snippet.docTitle}-${index}`" class="snippet">
-        <text class="snippet-title">{{ snippet.docTitle }}</text>
-        <text v-if="snippet.spaceCode" class="snippet-id">知识空间：{{ snippet.spaceCode }}</text>
-        <text class="snippet-content">{{ snippetExcerpt(snippet.content) }}</text>
-        <text v-if="snippet.fragmentId" class="snippet-id">片段 #{{ snippet.fragmentId }}</text>
-      </view>
-    </view>
-
-    <view v-if="result && currentToolCode === ''" class="panel summary-panel employee-card">
-      <text class="panel-title">总结卡</text>
-      <text class="muted summary-copy">需要时再生成，适合把一段 SOP 整理成步骤卡、话术卡和提醒卡。</text>
-      <button class="ghost-button" :disabled="summaryLoading" @click="buildSummaryCard">
-        {{ summaryLoading ? '生成中' : '生成总结卡' }}
-      </button>
-    </view>
+    <ChatComposer
+      ref="composerRef"
+      :disabled="!loggedIn"
+      :transcribing="voiceTranscribing"
+      :placeholder="quickQuestionPlaceholder"
+      :maxlength="200"
+      :quick-questions="quickQuestions"
+      :media-name="selectedMedia?.name || ''"
+      :media-kind="selectedMedia?.kind || ''"
+      :tool-label="defaultToolCode === 'TEAM_PRACTICE_SUMMARY' ? '团队训练概况' : '我的训练概况'"
+      @send="handleComposerSend"
+      @voice-blob="handleVoiceBlob"
+      @pick-audio="pickVoiceAudio"
+      @pick-media="pickMedia"
+      @clear-media="clearMedia"
+      @quick="useQuickQuestion"
+      @tool="runDataTool(defaultToolCode)"
+    />
 
     <view v-if="summaryCard" class="modal-mask" @click="closeSummary">
       <view class="modal-card" @click.stop>
@@ -245,7 +209,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { nextTick, ref } from 'vue';
 import { onHide, onShow, onUnload } from '@dcloudio/uni-app';
 import type {
   AnswerFeedbackVerdict,
@@ -254,6 +218,7 @@ import type {
   SpeechPlaybackStatus,
   SummaryCardResponse
 } from '@/types/api';
+import ChatComposer from '@/components/chat/ChatComposer.vue';
 import {
   chooseKnowledgeMedia,
   generateSummaryCard,
@@ -272,66 +237,103 @@ import {
 } from '@/services/auth';
 import { resetPageScroll } from '@/services/navigation';
 import { ensureEmployeePosition } from '@/services/position';
-import {
-  chooseSpeechAudio,
-  createSpeechPlaybackController,
-  transcribeSpeechBlob,
-  transcribeSpeechFile
-} from '@/services/speech';
+import { chooseSpeechAudio, createSpeechPlaybackController, transcribeSpeechBlob, transcribeSpeechFile } from '@/services/speech';
 import { downloadSummaryCardImage } from '@/services/summary-card-image';
+import { computed } from 'vue';
+
+type ToolCode = '' | 'MY_PRACTICE_SUMMARY' | 'TEAM_PRACTICE_SUMMARY';
+
+interface UserMsg {
+  id: number;
+  role: 'user';
+  text: string;
+  voice?: boolean;
+  mediaKind?: string;
+  mediaName?: string;
+}
+
+interface MasterMsg {
+  id: number;
+  role: 'master';
+  result: KnowledgeSearchResponse;
+  toolCode: ToolCode;
+  feedbackVerdict: AnswerFeedbackVerdict | '';
+  feedbackSubmitting: boolean;
+  citationsOpen: boolean;
+}
+
+interface SystemMsg {
+  id: number;
+  role: 'system';
+  text: string;
+}
+
+interface PendingMsg {
+  id: number;
+  role: 'pending';
+}
+
+type ChatMsg = UserMsg | MasterMsg | SystemMsg | PendingMsg;
 
 const positionProfile = ref(getSelectedPositionProfile());
 const positionLabel = ref(getSelectedPosition());
 const quickQuestions = computed(() => positionProfile.value.quickQuestions);
 const quickQuestionPlaceholder = computed(() => `例如: ${quickQuestions.value[0] || '岗位SOP怎么处理?'}`);
-const query = ref('');
-const result = ref<KnowledgeSearchResponse | null>(null);
+
+const messages = ref<ChatMsg[]>([]);
+const threadScrollTop = ref(0);
+const composerRef = ref<InstanceType<typeof ChatComposer> | null>(null);
 const summaryCard = ref<SummaryCardResponse | null>(null);
 const loading = ref(false);
 const summaryLoading = ref(false);
 const downloadingCard = ref(false);
 const selectedMedia = ref<KnowledgeMediaSelectedFile | null>(null);
 const speechState = ref<{ key: string; status: SpeechPlaybackStatus }>({ key: '', status: 'idle' });
-const voiceRecording = ref(false);
 const voiceTranscribing = ref(false);
-const voiceRecorder = ref<MediaRecorder | null>(null);
-const voiceStream = ref<MediaStream | null>(null);
-const voiceStarting = ref(false);
-const feedbackSubmitting = ref(false);
-const feedbackVerdict = ref<AnswerFeedbackVerdict | ''>('');
-const message = ref('');
 const loggedIn = ref(false);
 const pendingSopQueryKey = 'aihr_sop_pending_query';
 const pendingToolKey = 'aihr_sop_pending_tool';
-const currentToolCode = ref<'' | 'MY_PRACTICE_SUMMARY' | 'TEAM_PRACTICE_SUMMARY'>('');
 const currentRole = ref(String(uni.getStorageSync(roleKey) || ''));
 const supervisorLearner = ref(isSupervisorLearnerMode());
-let voiceCaptureGeneration = 0;
+let msgSeq = 0;
 let voiceTranscriptionGeneration = 0;
 let abortVoiceTranscription: (() => void) | null = null;
 let knowledgeSearchGeneration = 0;
 let activeMediaUploadTask: ReturnType<typeof uni.uploadFile> | null = null;
+
 const defaultToolCode = computed<'MY_PRACTICE_SUMMARY' | 'TEAM_PRACTICE_SUMMARY'>(() =>
   currentRole.value === 'supervisor' && !supervisorLearner.value
     ? 'TEAM_PRACTICE_SUMMARY'
     : 'MY_PRACTICE_SUMMARY'
 );
+
 const speechPlayback = createSpeechPlaybackController(
   (state) => { speechState.value = state; },
-  (text) => {
-    message.value = text;
-    uni.showToast({ title: text, icon: 'none' });
-  }
+  (text) => { uni.showToast({ title: text, icon: 'none' }); }
 );
 
-const resetResultState = () => {
-  result.value = null;
-  summaryCard.value = null;
-  feedbackVerdict.value = '';
-  feedbackSubmitting.value = false;
-  currentToolCode.value = '';
+const scrollToBottom = () => {
+  void nextTick(() => {
+    threadScrollTop.value = 100000 + msgSeq * 200;
+  });
 };
 
+const pushMsg = <T extends ChatMsg>(msg: Omit<T, 'id'>): T => {
+  const withId = { ...msg, id: ++msgSeq } as T;
+  messages.value = [...messages.value, withId];
+  scrollToBottom();
+  return withId;
+};
+
+const replaceMsg = (id: number, next: ChatMsg | null) => {
+  messages.value = next
+    ? messages.value.map((item) => (item.id === id ? next : item))
+    : messages.value.filter((item) => item.id !== id);
+  scrollToBottom();
+};
+
+const pushSystem = (text: string) => pushMsg<SystemMsg>({ role: 'system', text });
+
 const refreshAuthState = () => {
   loggedIn.value = isLoggedIn();
   positionLabel.value = getSelectedPosition();
@@ -347,54 +349,67 @@ const cancelPendingMediaSearch = () => {
   loading.value = false;
 };
 
-const handleRequestError = (error: unknown, fallback: string, wasLoggedIn = loggedIn.value) => {
+const requestErrorText = (error: unknown, fallback: string) => {
   refreshAuthState();
-  if (wasLoggedIn && !loggedIn.value) {
-    resetResultState();
-    message.value = '登录已过期，请重新登录';
-    return true;
-  }
-  message.value = error instanceof Error ? error.message : fallback;
-  return false;
+  if (!loggedIn.value) return '登录已过期，请重新登录';
+  return error instanceof Error ? error.message : fallback;
 };
 
-const search = async () => {
-  if (loading.value || voiceRecording.value || voiceTranscribing.value) return;
-  const value = query.value.trim() || (selectedMedia.value ? '请根据附件现场情况，告诉我应该按什么 SOP 处理' : '');
-  if (!value) {
-    message.value = '请先输入问题';
+const sendQuestion = async (rawText: string, options: { voice?: boolean } = {}) => {
+  if (loading.value) {
+    uni.showToast({ title: '上一条还在检索中，请稍候', icon: 'none' });
+    return;
+  }
+  const media = selectedMedia.value;
+  const text = rawText.trim() || (media ? '请根据附件现场情况，告诉我应该按什么 SOP 处理' : '');
+  if (!text) {
+    uni.showToast({ title: '请先输入问题', icon: 'none' });
     return;
   }
-  query.value = value;
   refreshAuthState();
   if (!loggedIn.value) {
-    uni.setStorageSync(pendingSopQueryKey, value);
+    uni.setStorageSync(pendingSopQueryKey, text);
     goLogin();
     return;
   }
   if (!(await ensureEmployeePosition('/pages/user/sop/index'))) {
     return;
   }
-  positionProfile.value = getSelectedPositionProfile();
-  positionLabel.value = getSelectedPosition();
+  refreshAuthState();
+  pushMsg<UserMsg>({
+    role: 'user',
+    text,
+    voice: options.voice,
+    mediaKind: media?.kind,
+    mediaName: media?.name
+  });
+  selectedMedia.value = null;
+  const pending = pushMsg<PendingMsg>({ role: 'pending' });
   loading.value = true;
   const generation = ++knowledgeSearchGeneration;
-  message.value = '';
-  resetResultState();
   try {
-    const nextResult = selectedMedia.value
-      ? await searchKnowledgeWithMedia(selectedMedia.value, value, getSelectedPosition(), (task) => {
+    const nextResult = media
+      ? await searchKnowledgeWithMedia(media, text, getSelectedPosition(), (task) => {
           if (generation === knowledgeSearchGeneration) activeMediaUploadTask = task;
         })
-      : await searchKnowledge(value);
+      : await searchKnowledge(text);
     if (generation !== knowledgeSearchGeneration) return;
-    result.value = nextResult;
-    if (!result.value.answer && !result.value.snippets?.length) {
-      message.value = '未检索到可引用内容';
+    replaceMsg(pending.id, {
+      id: pending.id,
+      role: 'master',
+      result: nextResult,
+      toolCode: '',
+      feedbackVerdict: '',
+      feedbackSubmitting: false,
+      citationsOpen: false
+    });
+    if (!nextResult.answer && !nextResult.snippets?.length) {
+      pushSystem('未检索到可引用内容，换个问法试试');
     }
   } catch (error) {
     if (generation !== knowledgeSearchGeneration) return;
-    handleRequestError(error, '检索失败', true);
+    replaceMsg(pending.id, null);
+    pushSystem(requestErrorText(error, '检索失败，请稍后重试'));
   } finally {
     if (generation === knowledgeSearchGeneration) {
       activeMediaUploadTask = null;
@@ -403,6 +418,15 @@ const search = async () => {
   }
 };
 
+const handleComposerSend = (text: string) => {
+  void sendQuestion(text);
+};
+
+const useQuickQuestion = (value: string) => {
+  selectedMedia.value = null;
+  void sendQuestion(value);
+};
+
 const runDataTool = async (toolCode: 'MY_PRACTICE_SUMMARY' | 'TEAM_PRACTICE_SUMMARY') => {
   if (loading.value) return;
   refreshAuthState();
@@ -414,42 +438,44 @@ const runDataTool = async (toolCode: 'MY_PRACTICE_SUMMARY' | 'TEAM_PRACTICE_SUMM
   const effectiveToolCode = supervisorLearner.value && toolCode === 'TEAM_PRACTICE_SUMMARY'
     ? 'MY_PRACTICE_SUMMARY'
     : toolCode;
-  const generation = ++knowledgeSearchGeneration;
-  loading.value = true;
-  message.value = '';
-  resetResultState();
-  selectedMedia.value = null;
-  currentToolCode.value = effectiveToolCode;
   const question = effectiveToolCode === 'TEAM_PRACTICE_SUMMARY' ? '查询我的团队训练概况' : '查询我的训练概况';
-  query.value = question;
+  selectedMedia.value = null;
+  pushMsg<UserMsg>({ role: 'user', text: question });
+  const pending = pushMsg<PendingMsg>({ role: 'pending' });
+  loading.value = true;
+  const generation = ++knowledgeSearchGeneration;
   try {
     const nextResult = await queryKnowledgeTool(effectiveToolCode, question);
     if (generation !== knowledgeSearchGeneration) return;
-    result.value = nextResult;
+    replaceMsg(pending.id, {
+      id: pending.id,
+      role: 'master',
+      result: nextResult,
+      toolCode: effectiveToolCode,
+      feedbackVerdict: '',
+      feedbackSubmitting: false,
+      citationsOpen: false
+    });
   } catch (error) {
     if (generation !== knowledgeSearchGeneration) return;
-    handleRequestError(error, '训练概况查询失败', true);
+    replaceMsg(pending.id, null);
+    pushSystem(requestErrorText(error, '训练概况查询失败'));
   } finally {
     if (generation === knowledgeSearchGeneration) loading.value = false;
   }
 };
 
-const useQuickQuestion = (value: string) => {
-  selectedMedia.value = null;
-  query.value = value;
-  void search();
-};
-
 const pickMedia = async () => {
   if (loading.value) return;
   try {
     selectedMedia.value = await chooseKnowledgeMedia();
-    message.value = selectedMedia.value.kind === 'video'
-      ? '已选择视频，提交后会提取语音、画面文字和场景信息'
-      : '已选择图片，可补充一句现场问题后提交';
+    uni.showToast({
+      title: selectedMedia.value.kind === 'video' ? '已选择视频，发送时一起分析' : '已选择图片，发送时一起分析',
+      icon: 'none'
+    });
   } catch (error) {
     const text = error instanceof Error ? error.message : '附件选择失败';
-    if (text !== '未选择附件') message.value = text;
+    if (text !== '未选择附件') uni.showToast({ title: text, icon: 'none' });
   }
 };
 
@@ -458,11 +484,6 @@ const clearMedia = () => {
   selectedMedia.value = null;
 };
 
-const stopVoiceTracks = () => {
-  voiceStream.value?.getTracks().forEach((track) => track.stop());
-  voiceStream.value = null;
-};
-
 const cancelVoiceTranscription = () => {
   voiceTranscriptionGeneration += 1;
   abortVoiceTranscription?.();
@@ -470,43 +491,24 @@ const cancelVoiceTranscription = () => {
   voiceTranscribing.value = false;
 };
 
-const cancelVoiceRecording = () => {
-  voiceCaptureGeneration += 1;
-  cancelVoiceTranscription();
-  voiceStarting.value = false;
-  const recorder = voiceRecorder.value;
-  if (recorder && recorder.state !== 'inactive') {
-    recorder.ondataavailable = null;
-    recorder.onstop = null;
-    recorder.stop();
-  }
-  voiceRecorder.value = null;
-  stopVoiceTracks();
-  voiceRecording.value = false;
-};
-
-const applyVoiceTranscription = (text?: string) => {
-  const value = (text || '').trim();
-  if (!value) throw new Error('语音没有识别到文字');
-  const current = query.value.trim();
-  query.value = current ? `${current}\n${value}` : value;
-  message.value = '语音已转成文字，请确认问题后提交';
-};
-
-const transcribeVoiceBlob = async (blob: Blob) => {
+const handleVoiceBlob = async (blob: Blob) => {
   if (voiceTranscribing.value) return;
   const generation = ++voiceTranscriptionGeneration;
   voiceTranscribing.value = true;
-  message.value = '语音转写中';
   try {
     const result = await transcribeSpeechBlob(blob, 'sop-question.webm', (abort) => {
       if (generation === voiceTranscriptionGeneration) abortVoiceTranscription = abort;
     });
     if (generation !== voiceTranscriptionGeneration) return;
-    applyVoiceTranscription(result.text);
+    const text = (result.text || '').trim();
+    if (!text) {
+      pushSystem('语音没有识别到文字，请再说一遍');
+      return;
+    }
+    void sendQuestion(text, { voice: true });
   } catch (error) {
     if (generation !== voiceTranscriptionGeneration) return;
-    message.value = error instanceof Error ? error.message : '语音转写失败，请改用文字输入';
+    pushSystem(error instanceof Error ? error.message : '语音转写失败，请改用文字输入');
   } finally {
     if (generation === voiceTranscriptionGeneration) {
       abortVoiceTranscription = null;
@@ -516,10 +518,9 @@ const transcribeVoiceBlob = async (blob: Blob) => {
 };
 
 const pickVoiceAudio = async () => {
-  if (loading.value || voiceRecording.value || voiceTranscribing.value) return;
+  if (loading.value || voiceTranscribing.value) return;
   const generation = ++voiceTranscriptionGeneration;
   voiceTranscribing.value = true;
-  message.value = '语音转写中';
   try {
     const file = await chooseSpeechAudio();
     if (generation !== voiceTranscriptionGeneration) return;
@@ -527,11 +528,16 @@ const pickVoiceAudio = async () => {
       if (generation === voiceTranscriptionGeneration) abortVoiceTranscription = abort;
     });
     if (generation !== voiceTranscriptionGeneration) return;
-    applyVoiceTranscription(result.text);
+    const text = (result.text || '').trim();
+    if (!text) {
+      pushSystem('语音没有识别到文字，请再试一次');
+      return;
+    }
+    void sendQuestion(text, { voice: true });
   } catch (error) {
     if (generation !== voiceTranscriptionGeneration) return;
     const text = error instanceof Error ? error.message : '语音转写失败，请改用文字输入';
-    if (text !== '未选择音频') message.value = text;
+    if (text !== '未选择音频') pushSystem(text);
   } finally {
     if (generation === voiceTranscriptionGeneration) {
       abortVoiceTranscription = null;
@@ -540,62 +546,6 @@ const pickVoiceAudio = async () => {
   }
 };
 
-const startVoiceRecording = async () => {
-  if (loading.value || voiceStarting.value || voiceRecording.value || voiceTranscribing.value) return;
-  if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
-    await pickVoiceAudio();
-    return;
-  }
-  const generation = ++voiceCaptureGeneration;
-  voiceStarting.value = true;
-  try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    if (generation !== voiceCaptureGeneration) {
-      stream.getTracks().forEach((track) => track.stop());
-      return;
-    }
-    voiceStream.value = stream;
-    const recorder = new MediaRecorder(stream);
-    const chunks: Blob[] = [];
-    voiceRecorder.value = recorder;
-    recorder.ondataavailable = (event) => {
-      if (event.data?.size) chunks.push(event.data);
-    };
-    recorder.onstop = () => {
-      voiceRecording.value = false;
-      voiceRecorder.value = null;
-      stopVoiceTracks();
-      const blob = new Blob(chunks, { type: recorder.mimeType || 'audio/webm' });
-      if (!blob.size) {
-        message.value = '未录到音频，请改用文字输入';
-        return;
-      }
-      void transcribeVoiceBlob(blob);
-    };
-    recorder.start();
-    voiceRecording.value = true;
-    message.value = '正在录音，再点一次结束';
-  } catch {
-    stopVoiceTracks();
-    if (generation === voiceCaptureGeneration) await pickVoiceAudio();
-  } finally {
-    if (generation === voiceCaptureGeneration) voiceStarting.value = false;
-  }
-};
-
-const toggleVoiceRecording = () => {
-  if (voiceStarting.value) return;
-  if (voiceRecording.value) {
-    const recorder = voiceRecorder.value;
-    if (recorder && recorder.state !== 'inactive') {
-      message.value = '录音结束，正在转写';
-      recorder.stop();
-    }
-    return;
-  }
-  void startVoiceRecording();
-};
-
 const snippetExcerpt = (text = '') => {
   const value = text.trim();
   return value.length > 260 ? `${value.slice(0, 260)}...` : value;
@@ -607,11 +557,11 @@ const cleanOrderedText = (text = '') =>
     .replace(/^(?:[一二三四五六七八九十]+[、.．]|[0-9]+[.)、.．])\s*/, '')
     .trim();
 
-const feedback = async (verdict: AnswerFeedbackVerdict) => {
-  if (!result.value || feedbackSubmitting.value || feedbackVerdict.value) return;
+const feedback = async (verdict: AnswerFeedbackVerdict, msg: MasterMsg) => {
+  if (msg.feedbackSubmitting || msg.feedbackVerdict) return;
   const fragmentIds = Array.from(
     new Set(
-      (result.value.snippets || [])
+      (msg.result.snippets || [])
         .map((item) => item.fragmentId)
         .filter((id): id is number => typeof id === 'number' && id > 0)
     )
@@ -620,40 +570,33 @@ const feedback = async (verdict: AnswerFeedbackVerdict) => {
     uni.showToast({ title: '暂无可反馈依据', icon: 'none' });
     return;
   }
-
-  feedbackSubmitting.value = true;
+  msg.feedbackSubmitting = true;
   try {
     await submitAnswerFeedback({
-      queryText: result.value.queryText || query.value,
+      queryText: msg.result.queryText || '',
       fragmentIds,
       verdict,
-      reviewId: result.value.reviewId
+      reviewId: msg.result.reviewId
     });
-    feedbackVerdict.value = verdict;
+    msg.feedbackVerdict = verdict;
     uni.showToast({ title: verdict === 'down' ? '已进入复核' : '已记录', icon: 'none' });
   } catch (error) {
-    if (!handleRequestError(error, '反馈失败', true)) {
-      uni.showToast({
-        title: message.value,
-        icon: 'none'
-      });
-    }
+    uni.showToast({ title: requestErrorText(error, '反馈失败'), icon: 'none' });
   } finally {
-    feedbackSubmitting.value = false;
+    msg.feedbackSubmitting = false;
   }
 };
 
-const buildSummaryCard = async () => {
+const buildSummaryCard = async (msg: MasterMsg) => {
   if (summaryLoading.value) return;
-  const value = (result.value?.queryText || query.value).trim();
+  const value = (msg.result.queryText || '').trim();
   if (!value) return;
   summaryLoading.value = true;
-  message.value = '';
   summaryCard.value = null;
   try {
     summaryCard.value = await generateSummaryCard(value);
   } catch (error) {
-    handleRequestError(error, '总结卡生成失败', true);
+    pushSystem(requestErrorText(error, '总结卡生成失败'));
   } finally {
     summaryLoading.value = false;
   }
@@ -665,20 +608,18 @@ const closeSummary = () => {
 };
 
 const speechButtonLabel = (key: string) => {
-  if (speechState.value.key !== key) return '语音播报';
+  if (speechState.value.key !== key) return '播报';
   if (speechState.value.status === 'loading') return '生成语音中';
-  if (speechState.value.status === 'playing') return '停止播报';
-  return '语音播报';
+  if (speechState.value.status === 'playing') return '停止';
+  return '播报';
 };
 
-const answerSpeechText = () => {
-  if (!result.value) return '';
-  return [
-    result.value.answer,
-    ...(result.value.keyPoints || []).map((item, index) => `第${index + 1}点，${cleanOrderedText(item)}`),
-    ...(result.value.cautions || []).map((item) => `注意，${item}`)
+const answerSpeechText = (msg: MasterMsg) =>
+  [
+    msg.result.answer,
+    ...(msg.result.keyPoints || []).map((item, index) => `第${index + 1}点，${cleanOrderedText(item)}`),
+    ...(msg.result.cautions || []).map((item) => `注意，${item}`)
   ].filter(Boolean).join('。');
-};
 
 const summarySpeechText = () => {
   if (!summaryCard.value) return '';
@@ -689,8 +630,8 @@ const summarySpeechText = () => {
   ].filter(Boolean).join('。');
 };
 
-const toggleAnswerSpeech = () => {
-  void speechPlayback.toggle('answer', answerSpeechText());
+const toggleAnswerSpeech = (msg: MasterMsg) => {
+  void speechPlayback.toggle(`answer-${msg.id}`, answerSpeechText(msg));
 };
 
 const toggleSummarySpeech = () => {
@@ -705,7 +646,6 @@ const downloadSummary = async () => {
     uni.showToast({ title: '总结卡图片已下载', icon: 'none' });
   } catch (error) {
     const text = error instanceof Error ? error.message : '总结卡下载失败';
-    message.value = text;
     uni.showToast({ title: text, icon: 'none' });
   } finally {
     downloadingCard.value = false;
@@ -728,14 +668,11 @@ const handleShow = async () => {
     return;
   }
   positionProfile.value = getSelectedPositionProfile();
-  if (!loggedIn.value) {
-    resetResultState();
-  }
+  scrollToBottom();
   const pending = uni.getStorageSync(pendingSopQueryKey);
   const pendingTool = uni.getStorageSync(pendingToolKey);
   if (pendingTool === 'MY_PRACTICE_SUMMARY' || pendingTool === 'TEAM_PRACTICE_SUMMARY') {
     if (!loggedIn.value) {
-      message.value = '登录后继续查询训练概况';
       goLogin();
       return;
     }
@@ -743,18 +680,9 @@ const handleShow = async () => {
     void runDataTool(pendingTool);
     return;
   }
-  if (!pending) {
-    if (loggedIn.value && query.value.trim() && message.value === '登录后继续查询该问题') {
-      void search();
-    }
-    return;
-  }
-  query.value = String(pending);
-  if (loggedIn.value) {
+  if (pending && loggedIn.value) {
     uni.removeStorageSync(pendingSopQueryKey);
-    void search();
-  } else {
-    message.value = '登录后继续查询该问题';
+    void sendQuestion(String(pending));
   }
 };
 
@@ -764,13 +692,15 @@ onShow(() => {
 
 onHide(() => {
   speechPlayback.stop();
-  cancelVoiceRecording();
+  composerRef.value?.teardown();
+  cancelVoiceTranscription();
   cancelPendingMediaSearch();
 });
 
 onUnload(() => {
   speechPlayback.destroy();
-  cancelVoiceRecording();
+  composerRef.value?.teardown();
+  cancelVoiceTranscription();
 });
 </script>
 
@@ -1815,4 +1745,277 @@ onUnload(() => {
 .modal-footer .footer-close {
   grid-column: span 2;
 }
+
+/* ===== chat layout (WeChat-style rebuild) ===== */
+.sop-chat-page {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
+  background: #f2f3f5;
+  overflow: hidden;
+}
+
+.chat-head {
+  flex-shrink: 0;
+  padding: 10px 14px 8px;
+  background: #ffffff;
+  border-bottom: 1px solid #ebedf0;
+}
+
+.chat-head-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.chat-title {
+  color: #18202b;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.chat-context {
+  color: #8a93a0;
+  font-size: 12px;
+}
+
+.chat-source-switch {
+  display: flex;
+  padding: 3px;
+  border-radius: 999px;
+  background: #f2f3f5;
+}
+
+.chat-source-switch .source-option {
+  flex: 1;
+  margin: 0;
+  padding: 6px 0;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: #5a6270;
+  font-size: 14px;
+  line-height: 1.3;
+}
+
+.chat-source-switch .source-option.active {
+  background: #ffffff;
+  color: #c8001a;
+  font-weight: 700;
+  box-shadow: 0 1px 4px rgba(20, 24, 31, 0.08);
+}
+
+.chat-thread {
+  flex: 1;
+  min-height: 0;
+}
+
+.thread-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 14px 12px 6px;
+}
+
+.bubble-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.bubble-row.right {
+  justify-content: flex-end;
+}
+
+.avatar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.master-avatar {
+  background: #e70014;
+  color: #ffffff;
+}
+
+.bubble {
+  max-width: 82%;
+  padding: 10px 12px;
+  border-radius: 12px;
+  word-break: break-word;
+}
+
+.bubble.master {
+  background: #ffffff;
+  border-top-left-radius: 4px;
+  box-shadow: 0 1px 3px rgba(20, 24, 31, 0.06);
+}
+
+.bubble.user {
+  background: #ffd8dc;
+  border-top-right-radius: 4px;
+}
+
+.bubble-text {
+  display: block;
+  color: #232a33;
+  font-size: 15px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+}
+
+.bubble-tag {
+  display: inline-block;
+  margin-bottom: 6px;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(200, 0, 26, 0.08);
+  color: #a04a00;
+  font-size: 11px;
+}
+
+.bubble.user .bubble-tag {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.bubble-keypoints {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed #eceff2;
+}
+
+.bubble-keypoint {
+  color: #38424e;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.bubble-cautions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.bubble-caution {
+  color: #a04a00;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.bubble-noevidence {
+  display: block;
+  margin-top: 8px;
+  color: #c8001a;
+  font-size: 13px;
+}
+
+.bubble-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.bubble-action {
+  margin: 0;
+  padding: 4px 12px;
+  border: 1px solid #e3e6ea;
+  border-radius: 999px;
+  background: #f7f8fa;
+  color: #38424e;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.bubble-action.active {
+  border-color: #1f9d55;
+  color: #168243;
+}
+
+.bubble-action.negative {
+  border-color: #e07f88;
+  color: #bd0010;
+}
+
+.bubble-action.primary {
+  border-color: #e70014;
+  background: #e70014;
+  color: #ffffff;
+}
+
+.feedback-note {
+  color: #8a93a0;
+  font-size: 12px;
+}
+
+.bubble-citations {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px dashed #eceff2;
+}
+
+.citation {
+  padding: 8px 10px;
+  border-left: 3px solid #f0c0c5;
+  border-radius: 6px;
+  background: #fafbfc;
+}
+
+.citation-title {
+  display: block;
+  color: #232a33;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.citation-meta {
+  display: block;
+  margin-top: 2px;
+  color: #98a1ad;
+  font-size: 11px;
+}
+
+.citation-content {
+  display: block;
+  margin-top: 4px;
+  color: #4d5560;
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.system-row {
+  display: flex;
+  justify-content: center;
+  padding: 2px 0;
+}
+
+.system-text {
+  max-width: 86%;
+  padding: 4px 12px;
+  border-radius: 999px;
+  background: rgba(20, 24, 31, 0.06);
+  color: #6b7480;
+  font-size: 12px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.pending-bubble .bubble-text {
+  color: #8a93a0;
+}
 </style>