aegon-gen 1.0.0

package/src/views/TemplateCenter/index.vue

@@ -0,0 +1,1205 @@
+<template>
+  <div class="template-center-page">
+    <PageHeader title="IR-DEMO" />
+
+    <div class="chatbot-report-shell">
+      <!-- 左侧：报告配置 -->
+      <aside class="chatbot-report-panel chatbot-report-panel--config left">
+        <div class="chatbot-report-panel__body">
+          <h3 class="chatbot-report-config-title">報告配置</h3>
+          <div class="chatbot-report-field">
+            <span class="chatbot-report-field__label">名稱</span>
+            <span class="chatbot-report-field__value">
+              {{ activeConversation?.label || 'Hedera 鏈上運營 2026' }}
+            </span>
+            <EditPen class="chatbot-report-field__edit" @click="newChat" />
+          </div>
+          <div class="chatbot-report-field">
+            <span class="chatbot-report-field__label">模型</span>
+            <span class="chatbot-report-field__value">
+              {{ useLocalFallback ? '本地知識庫' : displayModel }}
+            </span>
+            <EditPen class="chatbot-report-field__edit" @click="useLocalFallback = !useLocalFallback" />
+          </div>
+          <div class="chatbot-report-field chatbot-report-field--readonly">
+            <span class="chatbot-report-field__label">語言</span>
+            <span class="chatbot-report-field__value">中文</span>
+          </div>
+          <div class="chatbot-report-field chatbot-report-field--readonly">
+            <span class="chatbot-report-field__label">行業</span>
+            <span class="chatbot-report-field__value">Hedera 鏈上運營</span>
+          </div>
+          <div class="chatbot-report-field chatbot-report-field--readonly">
+            <span class="chatbot-report-field__label">年份</span>
+            <span class="chatbot-report-field__value">2026</span>
+          </div>
+
+          <div class="chatbot-report-section-title">信息源</div>
+          <div class="chatbot-report-add-source" role="presentation">
+            <div style="display: flex; align-items: center;justify-content: center;">
+              <span class="chatbot-report-add-source__icon"><Plus /></span>
+            </div>
+            <div>
+              添加信息源
+            </div>
+          </div>
+          <button type="button" class="chatbot-report-web-search" @click="webSearch = !webSearch">
+            <CheckMark :checked="webSearch" />
+            在網絡中搜索信息源
+          </button>
+
+          <div class="chatbot-report-source-select">
+            <div class="chatbot-report-select-all" @click="toggleAllDocs">
+              <span>選擇所有信息源</span>
+              <CheckMark :checked="allDocsSelected" />
+            </div>
+
+            <div class="chatbot-report-doc-group">
+              <div
+                class="chatbot-report-doc-group__header chatbot-report-source-row"
+                @click="toggleDocGroup(SHARED_DOCS.map(d => d.id))"
+              >
+                <span class="chatbot-report-source-row__label">共享文檔集</span>
+                <CheckMark :checked="SHARED_DOCS.every(d => selectedDocs[d.id])" />
+              </div>
+              <div
+                v-for="doc in SHARED_DOCS"
+                :key="doc.id"
+                class="chatbot-report-source-row chatbot-report-source-row--doc"
+                @click="toggleDoc(doc.id)"
+              >
+                <PdfIcon />
+                <span class="chatbot-report-source-row__label">{{ doc.title }}</span>
+                <CheckMark :checked="!!selectedDocs[doc.id]" />
+              </div>
+            </div>
+
+            <div class="chatbot-report-doc-group">
+              <div
+                class="chatbot-report-doc-group__header chatbot-report-source-row"
+                @click="toggleDocGroup(PERSONAL_DOCS.map(d => d.id))"
+              >
+                <span class="chatbot-report-source-row__label">個人文檔集</span>
+                <CheckMark :checked="PERSONAL_DOCS.every(d => selectedDocs[d.id])" />
+              </div>
+              <div
+                v-for="doc in PERSONAL_DOCS"
+                :key="doc.id"
+                class="chatbot-report-source-row chatbot-report-source-row--doc"
+                @click="toggleDoc(doc.id)"
+              >
+                <PdfIcon />
+                <span class="chatbot-report-source-row__label">{{ doc.title }}</span>
+                <CheckMark :checked="!!selectedDocs[doc.id]" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <!-- 中间：对话预览（当前注释，保留占位） -->
+      <main class="chatbot-report-center center">
+        <div class="chatbot-report-toolbar">
+          <el-button class="chatbot-report-btn-outline" @click="backToChapterEdit">返回章节编辑</el-button>
+          <div>
+            <el-button
+              class="chatbot-report-btn-outline"
+              :icon="Download"
+              :disabled="!reportPreviewVisible"
+              @click="exportReportPdf"
+            >
+              匯出為 PDF
+            </el-button>
+            <el-button
+              class="chatbot-report-btn-outline"
+              :icon="Download"
+              :disabled="!reportPreviewVisible"
+              @click="exportReportWord"
+            >
+              匯出為 Word
+            </el-button>
+          </div>
+        </div>
+
+        <div v-if="!reportPreviewVisible" class="chatbot-report-center__empty">
+          <p>選擇章節後點擊「生成報告」預覽內容</p>
+        </div>
+        <div v-else class="chatbot-report-center__preview">
+          <!-- 暂时：SSE 流式调试面板（postRequest + Token） -->
+          <div class="chatbot-report-stream-debug">
+            <div v-if="isRequesting" class="chatbot-report-stream-debug__status">输出中...</div>
+            <div class="chatbot-report-stream-debug__body">{{ reportStreamText || '等待 SSE 数据...' }}</div>
+          </div>
+          <!-- index9 预览（调试完成后可改回 v-if="!reportSseDebug"） -->
+          <GenAiIndex9
+            v-if="false"
+            ref="reportPreviewRef"
+            embedded
+            :key="reportPreviewKey"
+          />
+        </div>
+      </main>
+
+      <!-- 右侧：生成報告設置 -->
+      <aside class="chatbot-report-panel chatbot-report-panel--settings right">
+        <div class="chatbot-report-panel__body">
+          <h3 class="chatbot-report-config-title">生成報告設置</h3>
+
+          <div class="chatbot-report-chapter-select">
+            <div class="chatbot-report-chapter-header">
+              <span class="chatbot-report-chapter-header__title">選擇章節及版本</span>
+              <div class="chatbot-report-chapter-header__all" @click="toggleAllChapters">
+                <CheckMark :checked="allChaptersSelected" />
+                <span>全部章節</span>
+              </div>
+            </div>
+            <div class="chatbot-report-chapter-list">
+              <div
+                v-for="preset in orderedPresets"
+                :key="preset.key"
+                class="chatbot-report-chapter-row"
+                :class="{
+                  'is-dragging': dragChapterKey === preset.key,
+                  'is-drag-over': dragOverChapterKey === preset.key,
+                }"
+                draggable="true"
+                @dragstart="onChapterDragStart($event, preset.key)"
+                @dragend="handleChapterDragEnd"
+                @dragover.prevent="setDragOverChapterKey(preset.key)"
+                @drop="handleChapterDrop(preset.key)"
+              >
+                <CheckMark
+                  :checked="!!selectedChapters[preset.key]"
+                  @click.stop="toggleChapter(preset.key)"
+                  @mousedown.stop
+                  @dragstart.prevent
+                />
+                <span
+                  class="chatbot-report-chapter-row__label"
+                  @click="setActiveKey(preset.key); sendMessage(preset.label)"
+                >
+                  {{ preset.label }}
+                </span>
+                <select
+                  class="chatbot-report-chapter-row__version"
+                  :value="chapterVersions[preset.key]"
+                  @change="chapterVersions[preset.key] = ($event.target as HTMLSelectElement).value"
+                  @click.stop
+                  @mousedown.stop
+                >
+                  <option v-for="v in CHAPTER_VERSIONS" :key="v" :value="v">{{ v }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="chatbot-report-section-title chatbot-report-section-title--settings">生成報告方式</div>
+          <el-radio-group v-model="reportMode" class="chatbot-report-radio-group">
+            <el-radio value="polish">拼裝並潤色</el-radio>
+            <el-radio value="rewrite">重寫整篇報告</el-radio>
+          </el-radio-group>
+
+          <button
+            type="button"
+            class="chatbot-report-generate-btn"
+            :disabled="isRequesting"
+            @click="generateFromChapters"
+          >
+            生成報告
+          </button>
+
+          <div class="chatbot-report-history">
+            <div class="chatbot-report-history__title">報告歷史</div>
+            <div class="chatbot-report-history-list">
+              <div
+                v-for="item in reportHistory"
+                :key="item.key"
+                class="chatbot-report-history-row"
+                :class="{ 'is-active': item.key === activeHistoryKey }"
+                @click="activeHistoryKey = item.key"
+              >
+                <span class="chatbot-report-history-item__indicator" aria-hidden="true" />
+                <div class="chatbot-report-history-item">
+                  <div class="chatbot-report-history-item__body">
+                    <div class="chatbot-report-history-item__title">{{ item.title }}</div>
+                    <div class="chatbot-report-history-item__meta">
+                      {{ item.author }} {{ item.time }}
+                    </div>
+                  </div>
+                  <MoreFilled class="chatbot-report-history-item__menu" @click.stop />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, nextTick, h, defineComponent, onUnmounted } from 'vue'
+import { ElButton, ElRadioGroup, ElRadio } from 'element-plus'
+import {
+  EditPen,
+  Plus,
+  Download,
+  MoreFilled,
+} from '@element-plus/icons-vue'
+import GenAiIndex9 from '../../components/GEN-AI/index9.vue'
+import {
+  MOCK_REPORT_STREAM_TEXT,
+  reportApi,
+  streamGenerateReport,
+} from '../../api'
+import {
+  CHAT_MODEL,
+  streamChatCompletion,
+} from './service'
+import {
+  HEDERA_SYSTEM_PROMPT,
+  matchLocalKnowledge,
+} from './Knowledge'
+
+const displayModel = CHAT_MODEL.split('/').pop()?.replace(/:.*$/, '') ?? 'Qwen3-Max'
+
+const SHARED_DOCS = [
+  { id: 'hts', title: 'Hedera HTS 代币创建与 KYC 操作指南' },
+  { id: 'hscs', title: 'HSCS 智能合约部署与调试手册' },
+  { id: 'rwa', title: 'RWA 上链 metadata 与 HCS 存证说明' },
+]
+const PERSONAL_DOCS = [
+  { id: 'env', title: 'Operator .env 配置与 Mirror Node 说明' },
+  { id: 'gov', title: 'Governance 密钥矩阵与 KYC 准入流程' },
+  { id: 'audit', title: 'AI 审计与链上风险事件采样' },
+]
+const ALL_DOC_IDS = [...SHARED_DOCS, ...PERSONAL_DOCS].map(d => d.id)
+const HEDERA_PRESETS = [
+  { key: 'preset-summary', label: '摘要與本年總結', group: 'Hedera' },
+  { key: 'preset-macro', label: '宏觀環境與政策背景', group: 'Hedera' },
+  { key: 'preset-industry', label: '行業運行情況與核心指標', group: 'Hedera' },
+  { key: 'preset-competition', label: '競爭格局與商業模式演變', group: 'Hedera' },
+  { key: 'preset-risk', label: '關鍵風險與監管關切', group: 'Hedera' },
+  { key: 'preset-appendix', label: '附錄：數據、方法與名詞解釋', group: 'Hedera' },
+]
+const CHAPTER_VERSIONS = ['V1', 'V2', 'V3']
+
+type ParsedMessage = { role: 'user'; content: string } | { role: 'assistant'; content: string; thinkContent?: string }
+type ConversationItem = { key: string; label: string; group?: string; isDraft?: boolean }
+type ReportHistoryItem = { key: string; title: string; author: string; time: string }
+
+const CheckMark = defineComponent({
+  name: 'CheckMark',
+  inheritAttrs: false,
+  props: {
+    checked: { type: Boolean, required: true },
+  },
+  emits: ['click'],
+  setup(props, { emit, attrs }) {
+    return () =>
+      h('span', {
+        ...attrs,
+        class: ['chatbot-report-check', props.checked && 'is-checked', attrs.class],
+        onClick: (e: MouseEvent) => emit('click', e),
+      })
+  },
+})
+
+const PdfIcon = defineComponent({
+  name: 'PdfIcon',
+  setup() {
+    return () =>
+      h(
+        'svg',
+        {
+          xmlns: 'http://www.w3.org/2000/svg',
+          viewBox: '0 0 1024 1024',
+          class: 'chatbot-report-doc-card__pdf',
+        },
+        [
+          h('path', {
+            fill: 'currentColor',
+            d: 'M832 384H576V128H192v768h640zm-26.496-64L640 154.496V320zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32m160 448h384v64H320zm0-192h160v64H320zm0 384h384v64H320z',
+          }),
+        ],
+      )
+  },
+})
+
+const useLocalFallback = ref(false)
+const webSearch = ref(true)
+const conversations = ref<ConversationItem[]>([
+  { key: 'default', label: 'Hedera 运营问答', group: '今天', isDraft: true },
+  ...HEDERA_PRESETS,
+])
+const activeKey = ref('default')
+const activeHistoryKey = ref('history-final')
+const reportHistory = ref<ReportHistoryItem[]>([
+  { key: 'history-final', title: '定稿版本', author: '陳大文', time: '15min前' },
+  { key: 'history-v2', title: 'V2', author: '陳大文', time: '15min前' },
+])
+const inputValue = ref('')
+const selectedDocs = ref<Record<string, boolean>>(Object.fromEntries(ALL_DOC_IDS.map(id => [id, true])))
+const selectedChapters = ref<Record<string, boolean>>(Object.fromEntries(HEDERA_PRESETS.map(p => [p.key, true])))
+const chapterVersions = ref<Record<string, string>>(Object.fromEntries(HEDERA_PRESETS.map(p => [p.key, 'V3'])))
+const chapterOrder = ref<string[]>(HEDERA_PRESETS.map(p => p.key))
+const reportMode = ref('polish')
+const isRequesting = ref(false)
+const reportPreviewVisible = ref(false)
+const reportPreviewKey = ref(0)
+const reportPreviewRef = ref<InstanceType<typeof GenAiIndex9> | null>(null)
+/** 报告 SSE 流文本：Mock 或真实接口返回，后续可替换 index9 内容源 */
+const reportStreamText = ref('')
+let reportStreamAbort: AbortController | null = null
+const messages = ref<ParsedMessage[]>([])
+const dragChapterKey = ref<string | null>(null)
+const dragOverChapterKey = ref<string | null>(null)
+
+const setDragOverChapterKey = (key: string) => {
+  dragOverChapterKey.value = key
+}
+
+const activeConversation = computed(() => conversations.value.find(c => c.key === activeKey.value))
+const orderedPresets = computed(() => chapterOrder.value.map(key => HEDERA_PRESETS.find(p => p.key === key)!).filter(Boolean))
+const allDocsSelected = computed(() => ALL_DOC_IDS.every(id => selectedDocs.value[id]))
+const allChaptersSelected = computed(() => HEDERA_PRESETS.every(p => selectedChapters.value[p.key]))
+
+const toggleDoc = (id: string) => {
+  selectedDocs.value[id] = !selectedDocs.value[id]
+}
+const toggleAllDocs = () => {
+  const next = !allDocsSelected.value
+  selectedDocs.value = Object.fromEntries(ALL_DOC_IDS.map(id => [id, next]))
+}
+const toggleDocGroup = (ids: string[]) => {
+  const allOn = ids.every(id => selectedDocs.value[id])
+  ids.forEach(id => {
+    selectedDocs.value[id] = !allOn
+  })
+}
+const toggleChapter = (key: string) => {
+  selectedChapters.value[key] = !selectedChapters.value[key]
+}
+const toggleAllChapters = () => {
+  const next = !allChaptersSelected.value
+  HEDERA_PRESETS.forEach(p => {
+    selectedChapters.value[p.key] = next
+  })
+}
+const setActiveKey = (key: string) => {
+  activeKey.value = key
+}
+const newChat = () => {
+  const key = crypto.randomUUID()
+  conversations.value = [{ key, label: '新对话', group: '今天', isDraft: true }, ...conversations.value.filter(c => c.key !== key)]
+  activeKey.value = key
+  messages.value = []
+}
+const backToChapterEdit = () => {
+  reportPreviewVisible.value = false
+}
+const generateFromChapters = async () => {
+  const selected = orderedPresets.value.filter(p => selectedChapters.value[p.key])
+  if (!selected.length) return
+
+  const token = reportApi.getToken()
+  if (!token) {
+    alert('请先登录')
+    return
+  }
+
+  if (reportStreamAbort) reportStreamAbort.abort()
+  reportStreamAbort = new AbortController()
+
+  isRequesting.value = true
+  reportStreamText.value = ''
+  reportPreviewKey.value += 1
+  reportPreviewVisible.value = true
+
+  const question = selected.map(p => p.label).join('、')
+
+  try {
+    for await (const chunk of streamGenerateReport(
+      {
+        userId: 'user001',
+        question,
+        chapters: selected.map(p => p.label),
+        chapterVersions: Object.fromEntries(
+          selected.map((p) => [p.key, chapterVersions.value[p.key] ?? 'V3']),
+        ),
+        reportMode: reportMode.value,
+      },
+      reportStreamAbort.signal,
+    )) {
+      reportStreamText.value += chunk
+    }
+  } catch (err) {
+    if ((err as Error).name !== 'AbortError') {
+      console.error('流异常', err)
+      reportStreamText.value = `[SSE 请求失败] ${(err as Error).message}\n\n${MOCK_REPORT_STREAM_TEXT}`
+    }
+  } finally {
+    isRequesting.value = false
+    reportStreamAbort = null
+  }
+}
+
+onUnmounted(() => {
+  reportStreamAbort?.abort()
+})
+const exportReportPdf = () => {
+  reportPreviewRef.value?.handleExportPDF()
+}
+const exportReportWord = () => {
+  reportPreviewRef.value?.handleExportWord()
+}
+
+const handleChapterDragStart = (key: string) => {
+  dragChapterKey.value = key
+  dragOverChapterKey.value = key
+}
+const onChapterDragStart = (event: DragEvent, key: string) => {
+  if ((event.target as HTMLElement).closest('.chatbot-report-check, .chatbot-report-chapter-row__version')) {
+    event.preventDefault()
+    return
+  }
+  handleChapterDragStart(key)
+}
+const handleChapterDragEnd = () => {
+  dragChapterKey.value = null
+  dragOverChapterKey.value = null
+}
+const handleChapterDrop = (targetKey: string) => {
+  const draggingKey = dragChapterKey.value
+  if (draggingKey && draggingKey !== targetKey) {
+    const newOrder = [...chapterOrder.value]
+    const fromIdx = newOrder.indexOf(draggingKey)
+    const toIdx = newOrder.indexOf(targetKey)
+    if (fromIdx !== -1 && toIdx !== -1) {
+      newOrder.splice(fromIdx, 1)
+      newOrder.splice(toIdx, 0, draggingKey)
+      chapterOrder.value = newOrder
+    }
+  }
+  handleChapterDragEnd()
+}
+
+const sendMessage = async (text: string) => {
+  if (!text.trim()) return
+  inputValue.value = ''
+  messages.value.push({ role: 'user', content: text })
+  if (useLocalFallback.value) {
+    const answer = matchLocalKnowledge(text) ?? '本地知识库暂未收录该问题。请切换「云端模型」或尝试：创建代币、KYC、RWA、HSCS、暂停代币、Mirror Node 等关键词。'
+    messages.value.push({ role: 'assistant', content: answer })
+    return
+  }
+  isRequesting.value = true
+  const apiMessages = [
+    { role: 'system', content: HEDERA_SYSTEM_PROMPT },
+    { role: 'user', content: text },
+  ]
+  try {
+    let fullContent = ''
+    messages.value.push({ role: 'assistant', content: '' })
+    const lastIndex = messages.value.length - 1
+    for await (const chunk of streamChatCompletion(apiMessages)) {
+      fullContent += chunk
+      messages.value[lastIndex] = { role: 'assistant', content: fullContent }
+      await nextTick()
+    }
+  } catch (err) {
+    console.error(err)
+    messages.value.push({ role: 'assistant', content: '请求失败，请检查网络或 API 配置。' })
+  } finally {
+    isRequesting.value = false
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.template-center-page {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--report-bg, #f3f3f3);
+}
+
+.chatbot-report-shell {
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  --report-border: #ebebeb;
+  --report-bg: #f3f3f3;
+  --report-text: #1a1a1a;
+  --report-muted: #999;
+  --report-card-bg: #f5f5f5;
+  --report-add-blue: #4a90d9;
+
+  flex: 1;
+  display: flex;
+  gap: 0px;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--report-bg);
+  padding: 20px;
+}
+
+.chatbot-report-shell .left,
+.chatbot-report-shell .right {
+  width: 20%;
+  min-width: 280px;
+  flex-shrink: 0;
+}
+
+.chatbot-report-shell .center {
+  flex: 1;
+  min-width: 520px;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.chatbot-report-panel {
+  background: #fff;
+  border: 0px solid var(--report-border);
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.chatbot-report-panel--config .chatbot-report-panel__body,
+.chatbot-report-panel--settings .chatbot-report-panel__body {
+  padding: 16px 18px 20px;
+}
+
+.chatbot-report-panel__head {
+  padding: 14px 16px 10px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--report-text);
+  border-bottom: 1px solid #f0f0f0;
+  flex-shrink: 0;
+}
+
+.chatbot-report-panel__body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.chatbot-report-config-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--report-text);
+  margin: 0 0 4px;
+}
+
+.chatbot-report-field {
+  display: grid;
+  grid-template-columns: 72px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 0;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 13px;
+}
+
+.chatbot-report-field--readonly {
+  grid-template-columns: 72px 1fr;
+}
+
+.chatbot-report-field__label {
+  color: var(--report-muted);
+}
+
+.chatbot-report-field__value {
+  text-align: right;
+  color: #555;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatbot-report-field__edit {
+  color: var(--report-accent);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.chatbot-report-section-title {
+  margin: 18px 0 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--report-text);
+}
+
+.chatbot-report-add-source {
+  border: 1px dashed #d9d9d9;
+  border-radius: 20px;
+  padding: 20px;
+  text-align: center;
+  color: var(--report-muted);
+  cursor: pointer;
+  font-size: 13px;
+  background: #fff;
+  transition: border-color 0.2s;
+}
+
+.chatbot-report-add-source:hover {
+  border-color: var(--report-add-blue);
+}
+
+.chatbot-report-add-source__icon {
+  display: block;
+  font-size: 24px;
+  line-height: 1;
+  margin-bottom: 8px;
+  color: var(--report-add-blue);
+  width: 20px;
+}
+
+.chatbot-report-doc-card__pdf {
+  width: 14px;
+  height: 14px;
+  color: #c53355;
+  flex-shrink: 0;
+}
+
+.chatbot-report-web-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border: none;
+  border-radius: 6px;
+  background: var(--report-card-bg);
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  box-sizing: border-box;
+}
+
+.chatbot-report-source-select .chatbot-report-source-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--source-check-size);
+  column-gap: var(--source-check-gap);
+  align-items: center;
+  width: 100%;
+  padding: 10px var(--source-row-padding-x);
+  border: none;
+  border-radius: 6px;
+  background: var(--report-card-bg);
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+  box-sizing: border-box;
+}
+
+.chatbot-report-source-select .chatbot-report-source-row--doc {
+  grid-template-columns: 14px minmax(0, 1fr) var(--source-check-size);
+}
+
+.chatbot-report-web-search:hover,
+.chatbot-report-source-row:hover {
+  background: #efefef;
+}
+
+.chatbot-report-web-search {
+  margin-top: 12px;
+}
+
+.chatbot-report-source-row__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chatbot-report-source-select {
+  --source-check-size: 20px;
+  --source-check-gap: 10px;
+  --source-row-padding-x: 12px;
+}
+
+.chatbot-report-select-all {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--source-check-size);
+  column-gap: var(--source-check-gap);
+  align-items: center;
+  padding: 0 var(--source-row-padding-x);
+  margin: 16px 0 10px;
+  font-size: 13px;
+  color: #555;
+  cursor: pointer;
+}
+
+.chatbot-report-source-select .chatbot-report-check {
+  justify-self: end;
+}
+
+.chatbot-report-check {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  position: relative;
+  transition: all 0.2s;
+  cursor: pointer;
+  background: #fff;
+}
+
+.chatbot-report-check.is-checked {
+  border-color: #c53355;
+  background-color: #c53355;
+}
+
+.chatbot-report-check.is-checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.chatbot-report-doc-group {
+  margin-top: 14px;
+}
+
+.chatbot-report-doc-group .chatbot-report-source-row {
+  margin-bottom: 8px;
+}
+
+.chatbot-report-doc-group .chatbot-report-source-row:last-child {
+  margin-bottom: 0;
+}
+
+.chatbot-report-doc-group__header.chatbot-report-source-row {
+  font-weight: 600;
+  color: var(--report-text);
+}
+
+.chatbot-report-center {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: #fff;
+  border-left: 1px solid var(--report-border);
+  border-right: 1px solid var(--report-border);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.chatbot-report-center__empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 24px;
+  color: #999;
+  font-size: 14px;
+  background: #fff;
+}
+
+.chatbot-report-center__preview {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.chatbot-report-stream-debug {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.chatbot-report-stream-debug__status {
+  flex-shrink: 0;
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--report-accent);
+  border-bottom: 1px solid var(--report-border);
+}
+
+.chatbot-report-stream-debug__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 20px 28px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.chatbot-report-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  flex-shrink: 0;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.chatbot-report-btn-outline {
+  border: 1px solid var(--report-accent) !important;
+  color: var(--report-accent) !important;
+  background: #fff !important;
+  border-radius: 4px !important;
+  font-size: 13px !important;
+  height: 32px !important;
+  padding-inline: 14px !important;
+}
+
+.chatbot-report-btn-outline:hover {
+  background: var(--report-accent-soft) !important;
+}
+
+.chatbot-report-document {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px 28px 24px;
+  background: #fafafa;
+  min-height: 0;
+}
+
+.chatbot-report-document__paper {
+  max-width: 720px;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid #eee;
+  padding: 32px 36px 40px;
+  min-height: 100%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+}
+
+.chatbot-report-document__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 20px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.chatbot-report-document__welcome {
+  text-align: center;
+  padding: 48px 16px 32px;
+  color: var(--report-muted);
+}
+
+.chatbot-report-document__welcome h2 {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--report-text);
+  margin: 0 0 12px;
+}
+
+.chatbot-report-messages {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.chatbot-report-sender {
+  flex-shrink: 0;
+  padding: 12px 16px 14px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+
+.chatbot-report-chapter-select {
+  --chapter-check-size: 20px;
+  --chapter-version-width: 52px;
+  margin-top: 8px;
+}
+
+.chatbot-report-chapter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.chatbot-report-chapter-header__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.chatbot-report-chapter-header__all {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #555;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.chatbot-report-chapter-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.chatbot-report-chapter-row {
+  display: grid;
+  grid-template-columns: var(--chapter-check-size) minmax(0, 1fr) var(--chapter-version-width);
+  column-gap: 8px;
+  align-items: center;
+  padding: 7px 4px;
+  margin: 0 -4px;
+  font-size: 13px;
+  color: #333;
+  border-radius: 6px;
+  cursor: grab;
+  user-select: none;
+  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.chatbot-report-chapter-row:hover {
+  background: var(--report-card-bg);
+}
+
+.chatbot-report-chapter-row.is-dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+
+.chatbot-report-chapter-row.is-drag-over {
+  background: #fdf0f2;
+  box-shadow: inset 0 0 0 1px rgba(197, 51, 85, 0.35);
+}
+
+.chatbot-report-chapter-row .chatbot-report-check {
+  cursor: pointer;
+}
+
+.chatbot-report-chapter-row__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  line-height: 1.45;
+  color: #333;
+}
+
+.chatbot-report-chapter-row__version {
+  width: var(--chapter-version-width);
+  height: 26px;
+  padding: 0 18px 0 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #333;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23999' d='M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 12px;
+  appearance: none;
+  cursor: pointer;
+  justify-self: end;
+  box-sizing: border-box;
+}
+
+.chatbot-report-section-title--settings {
+  margin: 20px 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.chatbot-report-radio-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 0 0 20px;
+}
+
+.chatbot-report-radio-group :deep(.el-radio) {
+  margin-right: 0;
+  height: auto;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__label) {
+  font-size: 13px;
+  color: #333;
+  padding-left: 8px;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__inner) {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d9d9d9;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {
+  border-color: #c53355;
+  background: #c53355;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__inner::after) {
+  width: 6px;
+  height: 6px;
+  background-color: #fff;
+}
+
+.chatbot-report-generate-btn {
+  display: block;
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c53355;
+  color: #c53355;
+  background: #fff;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  margin: 0 auto 24px;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.chatbot-report-generate-btn:hover:not(:disabled) {
+  background: #fdf0f2;
+}
+
+.chatbot-report-generate-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.chatbot-report-history {
+  border-top: 1px solid #f0f0f0;
+  padding-top: 20px;
+}
+
+.chatbot-report-history__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  margin-bottom: 12px;
+}
+
+.chatbot-report-history-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chatbot-report-history-row {
+  display: grid;
+  grid-template-columns: 4px minmax(0, 1fr);
+  column-gap: 10px;
+  align-items: stretch;
+  cursor: pointer;
+}
+
+.chatbot-report-history-item__indicator {
+  width: 4px;
+  border-radius: 2px;
+  background: transparent;
+  align-self: center;
+  min-height: 36px;
+  transition: background 0.15s;
+}
+
+.chatbot-report-history-row.is-active .chatbot-report-history-item__indicator {
+  background: #c53355;
+}
+
+.chatbot-report-history-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  transition: background 0.15s;
+}
+
+.chatbot-report-history-row.is-active .chatbot-report-history-item {
+  background: #fdf0f3;
+}
+
+.chatbot-report-history-row:not(.is-active):hover .chatbot-report-history-item {
+  background: #fafafa;
+}
+
+.chatbot-report-history-item__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.chatbot-report-history-item__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  line-height: 1.4;
+}
+
+.chatbot-report-history-item__meta {
+  margin-top: 2px;
+  color: #999;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+.chatbot-report-history-item__menu {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+  color: #c53355;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+@media (max-width: 1200px) {
+  .chatbot-report-shell {
+    flex-direction: column;
+    overflow-y: auto;
+  }
+
+  .chatbot-report-shell .left,
+  .chatbot-report-shell .right {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .chatbot-report-shell .center {
+    min-width: 0;
+    min-height: 420px;
+  }
+}
+</style>