fischer
/
fischer-agentkit
1
0
Fork 0
Code Issues Pull Requests Actions 87 Packages Projects Releases Wiki Activity
fischer-agentkit/docs/brainstorms/2026-07-02-private-board-re...

9.2 KiB
Raw Blame History

date topic
2026-07-02 private-board-restrictions-and-scheme-b-bubbles

Summary

收尾私董会（@board）模块的 UI 细节与单会话状态约束。三处改动：(1) 限制一个对话只能存在一个私董会，新建私董会必须从新会话发起；(2) 将 BoardBannerCard（私董会开始卡片）从带边框 / 紫条 / 进度条 / 专家 chip 的重样式简化为单行标题 + 副标题；(3) 给所有 AssistantText 渲染添加方案 B 风格的浅灰圆角矩形气泡，与方案 B 截图保持一致。

Problem Frame

私董会功能自 2026-06 上线以来已能正确触发多轮讨论，但 UI 上仍残留三处粗糙点：

  1. 单会话多私董会无约束。ChatInput.vue:75 的"私董会"按钮 @click 直接 showBoardModal = true，对当前会话是否已经存在私董会无任何判断。后端在 board_started 事件中没有按会话做去重，连续两次 SendMessage("@board:...") 会在同一会话里创建第二个私董会，叠加在第一个未结束的私董会之上，boardState.experts 被覆盖、轮次错乱、StickyModeHeader 头像数与实际不符。
  2. BoardBannerCard 样式过重。BoardBannerCard.vue:55-137 使用了 background / border / border-radius / box-shadow 四件套 + 4px 紫条 + 进度条 + 专家 chip pill，与方案 B 整体"克制、不重样式"的取向冲突。方案 B 截图（参考 docs/.../2026-06-18-chat-area-vi-redesign-requirements.md 中的方案 B 示意）的"开始"标题区域是单行文本，不带装饰。
  3. 方案 B 气泡未落地。方案 B 截图中的"专家发言"区域是有浅灰圆角矩形气泡包裹内容（不是无气泡），与 ChatGPT / Notion AI 风格一致。当前 AssistantText.vue:1-30 的内容区 .assistant-text 没有背景 / 边框 / 圆角，气泡效果完全缺失。

Key Decisions

  • 私董会限制的"已存在"判断以 boardState.status 为准：status === 'discussing' | 'concluding' 时禁止在当前会话再次发起；status === 'completed' | 'dissolved' | null 时允许（已完成 / 已解散的旧私董会不阻塞新私董会）。判断点放在 ChatInput.vue "私董会"按钮 @click 处（最自然的 UX 拦截点），不放在 BoardMeetingModal 内部（避免用户填表后才发现不能发起）。

  • 私董会限制的反馈方式是 a-modal 弹窗 + 快捷新建按钮。点击"私董会"按钮时若检测到已有私董会，弹出 a-modal，标题"当前会话已存在私董会"，副文"请新建会话来创建新的私董会"，按钮"我知道了" + "新建会话"。"新建会话"按钮直接调用 chatStore.createConversation() 并 chatStore.selectConversation(newId)，让用户立即在新会话里继续操作。

  • BoardBannerCard 简化为单行标题 + 副标题。完全去掉 BankOutlined 图标、专家 chip 列表、4px 紫条、进度条、卡片背景 / 边框 / 圆角 / 阴影。最终输出形如：

    私董会 — 利用 agent 实现私董会的功能，应该用什么功能来打动客户
轮次：第 1 / 5 轮

    标题字号 = var(--font-base) 加粗 + 主题文本；副标题字号 = var(--font-xs) + var(--text-tertiary)。StickyModeHeader 顶部的紫色"私董会"徽章 + 主题 + 专家头像组保持不变，承担需要"重样式"的展示职责。

  • 方案 B 浅灰气泡应用到所有 assistant 消息。具体范围：role === 'assistant' 的所有 MessageShell 内的内容（普通 chat、@team 阶段、@board 发言、Debate、Plan exec、Tool result 等）都加同款浅灰圆角矩形气泡；role === 'user' 的用户消息气泡保留现有 UserBubble.vue 的右对齐独立样式，不加 AssistantText 风格的浅灰块。气泡使用 token 颜色（var(--bg-secondary) 或 var(--bg-elevated) 系）+ 圆角 var(--radius-md) + 内边距 var(--space-3) var(--space-4)，确保与方案 B 截图视觉一致；颜色与边框用 CSS 变量绑定，禁止硬编码 #f3f4f6 / #fbfbfa / #ededec 等值。

  • 气泡内的代码块、表格、行内代码样式保持不变。AssistantText.vue:257-401 的 pre / hljs / code / table 样式已经在 dark-on-light 配色上做了适配（--code-bg / --code-fg / --code-keyword 等 token），气泡背景换浅灰后这些 token 自动适配，不需要单独再改。

  • 不触碰 StickyModeHeader 顶部条。顶部条的紫色边框、徽章、4 个专家头像等不属于本次改动范围。

Requirements

单会话私董会限制

  • R1. ChatInput.vue 的"私董会"按钮 @click 处理函数在打开 BoardMeetingModal 前，先检查 chatStore.boardState.value：若非 null 且 status === 'discussing' | 'concluding'，触发 a-modal 弹窗，不打开 BoardMeetingModal。
  • R2. a-modal 弹窗内容：标题"当前会话已存在私董会"，副文案"请新建会话来创建新的私董会"，按钮"我知道了"（关闭弹窗）+ "新建会话"（主操作）。"新建会话"按钮点击后：(a) 关闭弹窗；(b) 调用 chatStore.createConversation()；(c) await chatStore.selectConversation(newId)；(d) 不自动打开 BoardMeetingModal，由用户在新会话中再次点击"私董会"按钮继续。
  • R3. 若 boardState.value === null 或 status === 'completed' | 'dissolved'，保持当前行为：showBoardModal = true 直接打开 BoardMeetingModal，不弹提示。
  • R4. 判定不依赖后端 / is_board 标记 / conv.is_board——以前端 chatStore.boardState.value 实时状态为权威源，避免 reload 后误判。

私董会开始卡片简化

  • R5. BoardBannerCard.vue 重构为单行标题 + 副标题：保留 topic / maxRounds / currentRound props（向后兼容调用方），不再使用 experts props（删除 prop）。
  • R6. 模板输出仅两行：第一行 私董会 — {topic}（无 BankOutlined、无边框、无背景、无圆角、无 4px 紫条）；第二行 轮次：第 {currentRound} / {maxRounds} 轮（小灰字）。
  • R7. <style scoped> 中删除 .board-banner-card / .board-banner-card__bar / .board-banner-card__chip 等所有重样式相关类；保留 .board-banner-card__title / .board-banner-card__meta 两条最小样式。
  • R8. useMessageRenderer.ts 中 board_started 的渲染路径不变（仍然渲染 BoardBannerCard 组件），确保 streaming 期间与 reload 后的视觉一致。

AssistantText 浅灰气泡

  • R9. MessageShell.vue 的 .message-shell__content 增加浅灰气泡样式：仅当 role === 'assistant' 时生效（user 角色不触发）；background: var(--bg-secondary) + border-radius: var(--radius-md) + padding: var(--space-3) var(--space-4) + border: 1px solid var(--border-color) + color: var(--text-primary)。
  • R10. 气泡样式不使用 !important，不覆盖组件内已有的代码块 / 表格 / 路由 tag 样式（这些样式已经在 R-9 之外独立维护）。
  • R11. 浅灰气泡不影响 BoardRoundCard 内 AssistantText 的渲染（已统一走 MessageShell 槽位）。
  • R12. 私董会专家发言（board_speech / board_summary）、普通 chat assistant 消息、@team 阶段消息、Debate 消息都通过 MessageShell + AssistantText 渲染，因此统一获得 R-9 浅灰气泡，无需逐个组件加样式。
  • R13. 气泡宽度继承 .message-shell__content 的现有 width: 100%; max-width: 100%——气泡跟随消息列宽自适应，不强制固定最大宽度。

Scope Boundaries

Deferred for later

  • 后端按会话去重 board_started：本次只做前端拦截，不改后端逻辑。后端允许同一会话收到多次 board_started 是当前事实，本次不做接口变更；前端的"未在新会话发起"拦截在功能上等价于"阻止重复发起"。如果未来需要在多端 / 多浏览器同步场景下做强一致，再考虑后端校验。
  • StickyModeHeader 顶部条的视觉细化（徽章大小、专家头像间距、紫色边框粗细）不在本次范围。
  • BoardConclusionCard / DebateBannerCard / TeamPlanCard 等其他 board 模式组件的样式统一：本次只改 BoardBannerCard，其他卡片样式留待后续迭代。

Outside this product's identity

  • 不调整方案 B 调色板（expertIdentity.ts 的 12 色 PALETTE）和专家头像首字符规则。
  • 不调整私董会后端流程（BoardOrchestrator / chatStream 事件顺序）。
  • 不调整 AssistantText 的 markdown 渲染逻辑、代码高亮、表格样式。

Dependencies / Assumptions

  • 假设：chatStore.createConversation() 存在并返回新会话 id（chatStore.ts:310 已确认）。
  • 假设：chatStore.selectConversation(id) 可异步调用（chatStore.ts:218 已确认）。
  • 假设：BoardState.status 类型为 "discussing" | "concluding" | "completed" | "dissolved"（chatStream.ts:65 已确认），"已存在私董会"判断取 discussing | concluding。
  • 假设：--bg-secondary / --radius-md / --space-3 / --space-4 / --border-color / --text-primary 已在 tokens.css 中定义并被前端使用（styles/tokens.css 已确认存在）。
  • 不确定性：私董会可能存在的中间状态（forming / executing / synthesizing 等）目前不在 BoardState.status 联合中；如果未来增加新 status，本次"已存在"判断需扩展。