@tfdesign/b-end 1.0.4

package/src/_b_end_runtime/components/ChatMessage.tokens.js

@@ -0,0 +1,257 @@
+/**
+ * ChatMessage — TOKEN_MAP（供平台属性面板展示）
+ *
+ * 分组顺序：文本元素 → 容器区域 → 尺寸布局 → 引用组件
+ */
+export const CHAT_MESSAGE_TOKEN_MAP = {
+  base: [],
+  标题行: [
+    { label: '标题色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '完成色', cssProp: 'color', token: '--color-brand-500', value: '#56D3BC' },
+    { label: '旋转渐变', cssProp: 'background', value: 'conic-gradient(var(--color-cyan-300) → var(--color-purple-300))' },
+    { label: '旋转动效', cssProp: 'animation', value: 'spin 1.1s linear infinite' },
+    { label: '折叠色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+  ],
+  执行说明: [
+    { label: '文字色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+  ],
+  最终结果: [
+    { label: '文字色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '换行策略', cssProp: 'word-break', value: 'break-words / multi-line' },
+  ],
+  产物文字: [
+    { label: '标题色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '次信息色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）', state: 'title' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+  ],
+  操作卡片: [
+    { label: '背景色', cssProp: 'background', token: '--color-chat-incoming', value: 'rgba(52,59,57,0.05)' },
+    { label: '描边色', cssProp: 'border-color', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '宽度策略', cssProp: 'width/max-width', value: 'fit-content / max-width: 100%' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '左内边距', cssProp: 'padding-left', token: '--spacing-2', value: '8px' },
+    { label: '右内边距', cssProp: 'padding-right', token: '--spacing-3', value: '12px' },
+    { label: '纵向内距', cssProp: 'padding-block', token: '--spacing-2', value: '8px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  卡片文字: [
+    { label: '主文案色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '次文案色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '字重', cssProp: 'font-weight', token: '--font-normal', value: '400' },
+    { label: '行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+    { label: '溢出处理', cssProp: 'text-overflow', value: 'ellipsis / nowrap / hidden' },
+  ],
+  处理中: [
+    { label: '轨道描边', cssProp: 'border-color', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '底色', cssProp: 'background', token: '--tfds-ai-execution-processing-fill', value: 'rgba(52,59,57,0.04)' },
+    { label: '扫光渐变', cssProp: 'background-image', token: '--tfds-ai-execution-processing-shimmer', value: 'linear-gradient(90deg, rgba(52,59,57,0.045) 0%, rgba(52,59,57,0.05) 28%, rgba(255,255,255,0.18) 50%, rgba(52,59,57,0.05) 72%, rgba(52,59,57,0.045) 100%)' },
+    { label: '旋转渐变', cssProp: 'background', value: 'conic-gradient(var(--color-brand-500) → var(--color-purple-300))' },
+    { label: '生成动效', cssProp: 'animation', value: 'spin 1.1s linear infinite / shimmer 3s linear infinite' },
+  ],
+  确认卡片: [
+    { label: '描边色', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '背景色', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）', state: 'header' },
+    { label: '正文描边', cssProp: 'border-color', token: '--color-white', value: '#FFFFFF', state: 'body' },
+    { label: '正文底色', cssProp: 'background', token: '--color-card-secondary', value: 'rgba(255,255,255,0.65)', state: 'body' },
+  ],
+  确认按钮: [
+    { label: '主背景', cssProp: 'background', token: '--color-neutral', value: '#343B3A', state: 'primary' },
+    { label: '主文字', cssProp: 'color', token: '--color-white', value: '#FFFFFF', state: 'primary' },
+    { label: '主字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）', state: 'primary' },
+    { label: '次描边', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', state: 'secondary', semanticRef: 'border-default' },
+    { label: '次背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', state: 'secondary' },
+    { label: '次文字', cssProp: 'color', token: '--color-foreground-secondary', value: '#475467', state: 'secondary' },
+    { label: '次字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）', state: 'secondary' },
+  ],
+  结果产物: [
+    { label: '卡片背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
+    { label: '描边色', cssProp: 'border-color', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '卡片宽度', cssProp: 'width', value: '300px / max-width: 100%' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '内边距', cssProp: 'padding', value: '12px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  产物图标: [
+    { label: '尺寸', cssProp: 'width/height', value: '32px' },
+    { label: '来源', cssProp: 'component', value: 'ArtifactIcon (PNG 资源)' },
+    { label: '资源路径', cssProp: 'src', value: 'components/file-type-assets/*.png' },
+    { label: '颜色来源', cssProp: 'style', value: '图标自带配色，不建立 token' },
+  ],
+  图标容器: [
+    { label: '尺寸', cssProp: 'width/height', value: '24px' },
+    { label: '背景渐变', cssProp: 'background-image', token: '--tfds-ai-execution-icon-gradient', value: 'linear-gradient(180deg, rgba(200,214,210,0.09) 0%, rgba(52,59,57,0.09) 100%)' },
+    { label: '描边色', cssProp: 'border-color', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '图标尺寸', cssProp: 'width/height', token: '--size-icon-14', value: '14px' },
+  ],
+  连接线: [
+    { label: '线色', cssProp: 'background', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '线宽', cssProp: 'width', value: '1px' },
+    { label: '轨道宽度', cssProp: 'width', token: '--spacing-4', value: '16px' },
+  ],
+  布局: [
+    { label: '标题间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+    { label: '最小高度', cssProp: 'min-height', value: '80px' },
+    { label: '内容间距', cssProp: 'gap', token: '--spacing-1', value: '4px' },
+    { label: '预览宽度', cssProp: 'width/max-width', value: 'fit-content / max-width: calc(100% - 48px)' },
+  ],
+  AI头像: [
+    { label: '头像尺寸', cssProp: 'width/height', value: '20px' },
+    { label: '头像来源', cssProp: 'src', value: 'catcat.svg（OLA AI 渐变猫头像）' },
+    { label: '名称色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '名称字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '名称字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '名称行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  请求中: [
+    { label: '圆点尺寸', cssProp: 'width/height', value: '6px' },
+    { label: '圆点底色', cssProp: 'background', token: '--color-neutral-500', value: '#858595' },
+    { label: '圆点静止透明度', cssProp: 'opacity', value: '0.3' },
+    { label: '圆点跳动动效', cssProp: 'animation', value: 'tfds-ai-dot-bounce 1.2s ease-in-out infinite' },
+    { label: '圆点错峰间隔', cssProp: 'animation-delay', value: '0 / 0.15s / 0.3s' },
+    { label: '圆点间距', cssProp: 'gap', value: '4px' },
+  ],
+  深度思考: [
+    { label: '标题色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '标题行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+    { label: '展开/收起图标', cssProp: 'icon', value: 'chevron-up/down-stroked / 16px' },
+    { label: '思考引用线', cssProp: 'background', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '引用线宽', cssProp: 'width', value: '1px' },
+    { label: '思考文本色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '思考文本字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '思考文本行高', cssProp: 'line-height', token: '--leading-5', value: '20px' },
+    { label: '展开模式', cssProp: 'state', value: 'thinking 思考中 / completed 完成' },
+  ],
+  任务规划卡片: [
+    { label: '外框背景', cssProp: 'background', token: '--color-fill', value: 'rgba(83,96,143,0.07)' },
+    { label: '外框描边', cssProp: 'border', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08) / 0.5px' },
+    { label: '外框圆角', cssProp: 'border-radius', token: '--radius-lg', value: '12px' },
+    { label: '外框内边距', cssProp: 'padding', value: '12px 16px' },
+    { label: '头部图标容器', cssProp: 'size', value: '32px / 渐变灰底 / 0.5px 描边 / 8px 圆角' },
+    { label: '任务数徽章背景', cssProp: 'background', value: 'rgba(255,255,255,0.6)' },
+    { label: '任务数徽章描边', cssProp: 'border', token: '--color-white', value: '#FFFFFF' },
+    { label: '任务数徽章字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '内容卡背景', cssProp: 'background', value: 'rgba(255,255,255,0.6)' },
+    { label: '内容卡描边', cssProp: 'border', token: '--color-white', value: '#FFFFFF' },
+    { label: '内容卡内边距', cssProp: 'padding', value: '16px 20px' },
+    { label: '任务编号背景', cssProp: 'background', value: 'linear-gradient violet 浅渐变' },
+    { label: '任务编号描边', cssProp: 'border-color', token: '--color-violet-200', value: '#BBACE8' },
+    { label: '任务编号文字色', cssProp: 'color', token: '--color-violet-500', value: '#6D45C5' },
+    { label: '任务标题字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '任务标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '子项圆点', cssProp: 'background', token: '--color-neutral-300', value: '#C7C8D5 / 8px' },
+    { label: '子项文字色', cssProp: 'color', token: '--color-neutral-700', value: '#404150' },
+    { label: '主操作按钮', cssProp: 'background', token: '--color-neutral', value: '#343B3A / 黑底白字 / 32px 高' },
+  ],
+  追问按钮组: [
+    { label: '按钮背景', cssProp: 'background', token: '--color-surface', value: '#FFFFFF' },
+    { label: '按钮描边', cssProp: 'border', token: '--color-border-line-light', value: 'rgba(22,24,35,0.08)' },
+    { label: '按钮圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '按钮高度', cssProp: 'height', value: '40px' },
+    { label: '按钮内边距', cssProp: 'padding', value: '8px 12px' },
+    { label: '按钮文字色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '按钮字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '按钮间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: 'hover 背景', cssProp: 'background', token: '--color-blueGrey-50', value: '#F4F7FB' },
+  ],
+  消息操作组: [
+    { label: '按钮尺寸', cssProp: 'width/height', value: '24px' },
+    { label: '按钮内边距', cssProp: 'padding', value: '4px' },
+    { label: '按钮圆角', cssProp: 'border-radius', token: '--radius-button', value: '6px' },
+    { label: '图标尺寸', cssProp: 'icon-size', value: '16px' },
+    { label: '图标色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '复制次数色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '时间戳色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '时间戳字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '组内间距', cssProp: 'gap', token: '--spacing-3', value: '12px' },
+    { label: '图标列表', cssProp: 'icon', value: 'copy-06-stroked / message-square-01-stroked / thumbs-up-stroked / thumbs-down-stroked' },
+    { label: 'historyMode 占位', cssProp: 'opacity / height', value: 'opacity:0 默认 + 父消息 hover/group/chat-msg → opacity:1，height 始终保留（避免历史消息抖动）' },
+    { label: 'historyMode 过渡', cssProp: 'transition', value: 'opacity 150ms（与 button hover 等节奏对齐）' },
+  ],
+  任务进行中徽章: [
+    { label: '背景色', cssProp: 'background', token: '--color-indigo-50', value: '#ECEFF7' },
+    { label: '描边色', cssProp: 'border-color', token: '--color-indigo-100', value: '#D1D6F0' },
+    { label: '文字色', cssProp: 'color', token: '--color-indigo-400', value: '#5D6DC2' },
+    { label: '图标色', cssProp: 'color', token: '--color-indigo-400', value: '#5D6DC2' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '内边距', cssProp: 'padding', value: '4px 8px' },
+    { label: '图标', cssProp: 'icon', value: 'star-04-stroked / 14px' },
+  ],
+  用户气泡: [
+    { label: '自动背景策略（userBubbleTone=auto）', cssProp: 'logic', value: '父级白色 / --color-surface → bg-fill 灰气泡；父级浅灰 / 蓝灰 / 非白背景 → bg-surface 白气泡' },
+    { label: '浅灰背景上气泡背景（userBubbleTone=surface）', cssProp: 'background', token: '--color-surface', value: '#FFFFFF', semanticRef: 'bg-surface' },
+    { label: '白色背景上气泡背景（userBubbleTone=fill）', cssProp: 'background', token: '--color-fill', value: 'rgba(83, 96, 143, 0.07)', semanticRef: 'fill-default' },
+    { label: '气泡圆角', cssProp: 'border-radius', value: '12px 0 12px 12px（右上不圆，指向用户头像）' },
+    { label: '气泡内边距', cssProp: 'padding', value: '12px 16px' },
+    { label: '气泡宽度', cssProp: 'width', value: 'w-fit + max-width:100%（按内容自适应，附件多时换行）' },
+    { label: '右对齐缩进', cssProp: 'padding-left', value: '8% 容器宽（500px 容器 ≈ 40px / 760px 容器 ≈ 60px）' },
+    { label: '正文色', cssProp: 'color', token: '--color-neutral', value: '#343B3A' },
+    { label: '正文字号', cssProp: 'font-size', token: '--text-sm', value: '14px' },
+    { label: '正文行高', cssProp: 'line-height', value: '26px' },
+    { label: '富文本间距', cssProp: 'gap', value: 'x:8px / y:4px' },
+    { label: '附件行间距', cssProp: 'gap', token: '--spacing-2', value: '8px（附件 wrap 多列时行/列同步 8px）' },
+  ],
+  用户附件卡: [
+    { label: '卡片宽', cssProp: 'width', value: '180px（与 ChatInput 已选附件卡同规格，从输入到发送视觉零跳变）' },
+    { label: '卡片背景', cssProp: 'background', token: '--color-fill', value: 'rgba(2, 33, 17, 0.04)' },
+    { label: '卡片描边', cssProp: 'border-color', token: '--color-border-default', value: '#E4E7EC', semanticRef: 'border-default' },
+    { label: '卡片圆角', cssProp: 'border-radius', token: '--radius-lg', value: '8px' },
+    { label: '卡片内边距', cssProp: 'padding', value: '8px' },
+    { label: '卡片左右间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+    { label: '文件图标盒', cssProp: 'width/height', value: '32×34px' },
+    { label: '文件图标', cssProp: 'src', value: 'pdf.svg 兜底（按后缀映射，与 ChatInput 共用 FILE_TYPE_ICONS 字典）' },
+    { label: '文件名色', cssProp: 'color', token: '--color-foreground', value: '#182230' },
+    { label: '文件名字号', cssProp: 'font-size', token: '--text-xs', value: '12px / 16px' },
+    { label: '文件名截断', cssProp: 'text-overflow', value: 'truncate（鼠标 hover title 看全名）' },
+    { label: '文件大小色', cssProp: 'color', token: '--color-neutral-500', value: '#858595' },
+    { label: '文件大小字号', cssProp: 'font-size', value: '10px / 12px' },
+  ],
+  用户引用条: [
+    { label: '标题色', cssProp: 'color', token: '--color-foreground', value: '#182230', semanticRef: 'text-primary' },
+    { label: '标题字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '标题字重', cssProp: 'font-weight', token: '--font-semibold', value: '600（运行时使用 [font-weight:var(--font-semibold)]）' },
+    { label: '标题行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+    { label: '描述色', cssProp: 'color', token: '--color-foreground-muted', value: '#667085', semanticRef: 'text-tertiary' },
+    { label: '描述字号', cssProp: 'font-size', token: '--text-xs', value: '12px' },
+    { label: '描述行高', cssProp: 'line-height', token: '--leading-4', value: '16px' },
+  ],
+  实体TAG: [
+    { label: 'teal 背景', cssProp: 'background', token: '--color-brand-50', value: '#EAFAF6', state: 'teal' },
+    { label: 'teal 描边', cssProp: 'border-color', token: '--color-brand-100', value: '#CFF3EA', state: 'teal' },
+    { label: 'teal 图标色', cssProp: 'color', token: '--color-brand-700', value: '#18B49D', state: 'teal' },
+    { label: 'indigo 背景', cssProp: 'background', token: '--color-indigo-50', value: '#ECEFF7', state: 'indigo' },
+    { label: 'indigo 描边', cssProp: 'border-color', token: '--color-indigo-100', value: '#D1D6F0', state: 'indigo' },
+    { label: 'indigo 文字色', cssProp: 'color', token: '--color-indigo-400', value: '#5D6DC2', state: 'indigo' },
+    { label: 'violet 背景', cssProp: 'background', token: '--color-violet-50', value: '#F1EEF9', state: 'violet' },
+    { label: 'violet 描边', cssProp: 'border-color', token: '--color-violet-100', value: '#DCD4F3', state: 'violet' },
+    { label: 'violet 文字色', cssProp: 'color', token: '--color-violet-500', value: '#6D45C5', state: 'violet' },
+    { label: '圆角', cssProp: 'border-radius', token: '--radius-md', value: '8px' },
+    { label: '高度', cssProp: 'height', value: '26px' },
+    { label: '内边距', cssProp: 'padding', value: '4px 8px' },
+    { label: '元素间距', cssProp: 'gap', token: '--spacing-2', value: '8px' },
+  ],
+  引用组件: [
+    { label: '状态图标', cssProp: '—', value: 'Icon sm' },
+    { label: '步骤图标', cssProp: '—', value: 'Icon 14px' },
+    { label: '产物图标', cssProp: '—', value: 'Icon 32px / 产物图标分类' },
+    { label: 'AI 头像', cssProp: '—', value: 'img 20px / catcat.svg' },
+    { label: '消息操作图标', cssProp: '—', value: 'Icon 16px / 复制 引用 赞 踩' },
+    { label: '实体 TAG 图标', cssProp: '—', value: 'Icon 14px / message-chat-square 等' },
+    { label: '用户附件卡图标', cssProp: '—', value: 'img 32×34 / pdf.svg（与 ChatInput 共用资源）' },
+  ],
+};

package/src/_b_end_runtime/components/ChatMessagePreview.jsx

@@ -0,0 +1,388 @@
+import { useState } from 'react';
+import ChatMessage, {
+  ALL_ARTIFACT_TYPES,
+  ArtifactIcon,
+  DEFAULT_CHAT_ACTIONS,
+  DEFAULT_CHAT_ARTIFACT_GROUP,
+  DEFAULT_CHAT_CONFIRMS,
+  DEFAULT_CHAT_FOLLOW_UPS,
+  DEFAULT_CHAT_PLAN,
+  DEFAULT_CHAT_RESULT,
+  DEFAULT_CHAT_RESULT_ARTIFACTS,
+  DEFAULT_CHAT_STEPS,
+  DEFAULT_CHAT_TASK_GROUPS,
+  DEFAULT_CHAT_THINKING,
+  DEFAULT_CHAT_TITLE,
+  DEFAULT_CHAT_USER_ATTACHMENTS,
+  DEFAULT_CHAT_USER_CONTENT,
+  DEFAULT_CHAT_USER_QUOTE,
+  ResultArtifactCard,
+  ResultArtifactGroup,
+  useStreamingTaskGroups,
+} from './ChatMessage';
+
+/* 模拟 500px 消息容器，让 8% 缩进对齐 40px */
+const MESSAGE_CONTAINER_STYLE = { width: '500px', maxWidth: '100%' };
+
+/* 操作栏默认常显 props */
+const ACTIONS = { ...DEFAULT_CHAT_ACTIONS, historyMode: false };
+
+const TOOLTIP_TEST_TASK_GROUPS = DEFAULT_CHAT_TASK_GROUPS.map((group, groupIndex) => ({
+  ...group,
+  steps: group.steps.map((step, stepIndex) => ({
+    ...step,
+    actionDetail: stepIndex === 0
+      ? `${step.actionDetail} / long_path/business_service/customer_support/policy_center/version_${groupIndex + 1}_pending_review_records`
+      : step.actionDetail,
+  })),
+}));
+
+/**
+ * 根据 subComponent + variant 返回 ChatMessage props
+ */
+function getProps(subComponent, variant, options = {}) {
+  const userBubbleTone = options.userBubbleTone || 'auto';
+  switch (subComponent) {
+
+    /* ── 执行流（多任务组：每组可独立折叠；processing 组的最后一步显示扫光） ── */
+    case 'execution-flow': {
+      if (variant === 'running') {
+        return {
+          role: 'ai',
+          taskGroups: TOOLTIP_TEST_TASK_GROUPS,
+        };
+      }
+      return {
+        role: 'ai',
+        taskGroups: TOOLTIP_TEST_TASK_GROUPS.map((g) => ({ ...g, status: 'completed' })),
+      };
+    }
+
+    /* ── 文本回复（仅结果文本） ── */
+    case 'text-reply':
+      return {
+        role: 'ai', title: '', steps: null,
+        resultText: '收到，我先去拉平台规则和商家补充条款，分析完会给你一份统一答复口径。',
+      };
+
+    /* ── 深度思考（仅思考块） ── */
+    case 'deep-thinking':
+      if (variant === 'thinking') {
+        return {
+          role: 'ai', status: 'thinking', steps: null,
+          thinking: { state: 'thinking', inProgressLabel: '深度思考中 ...' },
+        };
+      }
+      return {
+        role: 'ai', title: '', steps: null,
+        thinking: {
+          ...DEFAULT_CHAT_THINKING,
+          state: 'completed',
+          defaultExpanded: variant !== 'collapsed',
+        },
+      };
+
+    /* ── 卡片（同一组件，含任务规划 / 配置表单两个变体） ── */
+    case 'card':
+      if (variant === 'config-form') {
+        return {
+          role: 'ai', title: '', steps: null,
+          /* 预览只展示卡片本体，去掉默认数据里的前导引导文本 introText */
+          confirms: DEFAULT_CHAT_CONFIRMS.map(({ introText, ...rest }) => rest),
+        };
+      }
+      return {
+        role: 'ai', title: '', steps: null,
+        plan: DEFAULT_CHAT_PLAN,
+      };
+
+    /* ── 用户消息（仅气泡，无操作栏） ── */
+    case 'user-message':
+      if (variant === 'mixed-tag') {
+        return {
+          role: 'user',
+          userBubbleTone,
+          userContent: DEFAULT_CHAT_USER_CONTENT,
+        };
+      }
+      if (variant === 'with-attachment') {
+        /* 附件不含在气泡内：附件 → 气泡 两个独立行右对齐 */
+        return {
+          role: 'user',
+          userBubbleTone,
+          userContent: [{ type: 'text', value: '附件里是售后规则汇编，请基于这两份文件输出统一答复口径' }],
+          userAttachments: DEFAULT_CHAT_USER_ATTACHMENTS,
+        };
+      }
+      if (variant === 'with-quote') {
+        /* 紫色划词条 / 引用：在气泡上方独立显示 */
+        return {
+          role: 'user',
+          userBubbleTone,
+          userContent: [{ type: 'text', value: '请帮我复盘这次服务的完整链路，并着重分析[用户评价未解决]的原因。生成飞书文档和一份完整的前端页面' }],
+          userQuote: DEFAULT_CHAT_USER_QUOTE,
+        };
+      }
+      return {
+        role: 'user',
+        userBubbleTone,
+        userContent: [{ type: 'text', value: '帮我整理一下抖音电商的售后政策，重点是退货退款、换货和拒收的判责口径' }],
+      };
+
+    /* ── AI 头像+名称（仅头像行） ── */
+    case 'ai-avatar':
+      if (variant === 'loading') {
+        return { role: 'ai', header: true, status: 'requesting', steps: null };
+      }
+      return { role: 'ai', header: true, title: '', steps: null };
+
+    /* ── 对话流（多 ChatMessage 拼接，专用 __renderMode 走下方多消息分支） ──
+     *  ai-rich     · AI 头像 + 文本 + 产物 + 控制条 + 追问（单条）
+     *  multi-turn  · 2 轮 [人 → AI] 文本对话；仅最新一条常显操作栏，其余 historyMode
+     *  ai-task-plan· AI 头像 + 文本 + 任务规划卡片（单条）
+     */
+    case 'conversation': {
+      const HISTORY_ACTIONS = { ...DEFAULT_CHAT_ACTIONS, historyMode: true };
+
+      if (variant === 'multi-turn') {
+        return {
+          __renderMode: 'conversation',
+          messages: [
+            {
+              role: 'user',
+              userBubbleTone,
+              userContent: [{ type: 'text', value: '帮我整理一下抖音电商的售后政策，重点是退货退款、换货和拒收的判责口径' }],
+              actions: HISTORY_ACTIONS,
+              timestamp: '14:02',
+            },
+            {
+              role: 'ai', header: true, title: '', steps: null,
+              resultText: '收到，我先去拉平台规则和商家补充条款，分析完会给你一份统一答复口径。',
+              actions: HISTORY_ACTIONS,
+              timestamp: '14:02',
+            },
+            {
+              role: 'user',
+              userBubbleTone,
+              userContent: [{ type: 'text', value: '再补充一句：拒收场景也要分商家原因和用户原因，分别给到处理路径' }],
+              actions: HISTORY_ACTIONS,
+              timestamp: '14:05',
+            },
+            {
+              role: 'ai', header: true, title: '', steps: null,
+              resultText: '好的，我会把拒收的两类责任划分单独开一节，并补上对应的客服话术模板。',
+              actions: ACTIONS,
+              timestamp: '14:05',
+            },
+          ],
+        };
+      }
+
+      if (variant === 'ai-task-plan') {
+        /* 走独立的有状态预览：点击"开始执行任务"会追加用户消息 + AI 执行流加载 */
+        return { __renderMode: 'conversation-task-plan-interactive' };
+      }
+
+      /* 默认 ai-rich：AI 头像 + 文本 + 产物 + 控制条 + 追问 */
+      return {
+        __renderMode: 'conversation',
+        messages: [
+          {
+            role: 'ai', header: true, title: '', steps: null,
+            resultText: DEFAULT_CHAT_RESULT,
+            resultArtifacts: DEFAULT_CHAT_RESULT_ARTIFACTS,
+            actions: ACTIONS,
+            followUps: DEFAULT_CHAT_FOLLOW_UPS,
+            timestamp: '18:16',
+          },
+        ],
+      };
+    }
+
+    /* ── 产物（拆 3 层：图标 atom / 单卡 molecule / 产物组 organism） ──
+     *  这里先返回标记，由下方 PreviewSwitch 走专用渲染分支（脱离 ChatMessage 容器）
+     */
+    case 'artifact':
+      if (variant === 'icon') {
+        return { __renderMode: 'artifact-icon-grid' };
+      }
+      if (variant === 'card') {
+        return { __renderMode: 'artifact-single-card' };
+      }
+      return { __renderMode: 'artifact-group' };
+
+    /* ── 操作栏（仅操作栏行） ── */
+    case 'action-bar':
+      return {
+        role: 'ai', title: '', steps: null,
+        actions: ACTIONS,
+        timestamp: '18:16',
+      };
+
+    /* ── 追问（仅追问按钮组） ── */
+    case 'follow-up':
+      return {
+        role: 'ai', title: '', steps: null,
+        followUps: DEFAULT_CHAT_FOLLOW_UPS,
+      };
+
+    default:
+      return {
+        role: 'ai', header: true,
+        title: DEFAULT_CHAT_TITLE,
+        steps: DEFAULT_CHAT_STEPS,
+      };
+  }
+}
+
+export default function ChatMessagePreview({
+  subComponent = 'execution-flow',
+  variant = 'completed',
+  userBubbleTone = 'auto',
+}) {
+  const props = getProps(subComponent, variant, { userBubbleTone });
+  const reactKey = `${subComponent}:${variant}:${userBubbleTone}`;
+
+  /* ── 产物 atom 预览：图标网格（5 列 × 3 行 = 15 个 PNG 图标） ── */
+  if (props.__renderMode === 'artifact-icon-grid') {
+    return (
+      <div className="flex h-full w-full min-w-0 items-start justify-center overflow-y-auto p-4">
+        <div className="grid w-full max-w-[500px] grid-cols-5 gap-3" style={MESSAGE_CONTAINER_STYLE}>
+          {ALL_ARTIFACT_TYPES.map((a) => (
+            <div
+              key={a.id}
+              className="flex flex-col items-center gap-1 rounded-md border border-border-line-light p-2"
+              title={a.type}
+            >
+              <ArtifactIcon type={a.type} size={32} />
+              <span className="truncate text-[10px] leading-3 text-foreground-muted">{a.type}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  /* ── 产物 molecule 预览：单张卡片（默认取第一类 PDF） ── */
+  if (props.__renderMode === 'artifact-single-card') {
+    return (
+      <div className="flex h-full w-full min-w-0 items-start justify-center overflow-y-auto p-4">
+        <div className="flex w-full max-w-[500px] flex-col" style={MESSAGE_CONTAINER_STYLE}>
+          <ResultArtifactCard artifact={ALL_ARTIFACT_TYPES[0]} />
+        </div>
+      </div>
+    );
+  }
+
+  /* ── 产物 organism 预览：产物组（枚举所有 15 种类型） ── */
+  if (props.__renderMode === 'artifact-group') {
+    return (
+      <div className="flex h-full w-full min-w-0 items-start justify-center overflow-y-auto p-4">
+        <div className="flex w-full max-w-[500px] flex-col" style={MESSAGE_CONTAINER_STYLE}>
+          <ResultArtifactGroup artifacts={DEFAULT_CHAT_ARTIFACT_GROUP} />
+        </div>
+      </div>
+    );
+  }
+
+  /* ── 对话流预览：把 messages 数组按顺序渲染成多 ChatMessage，消息间留 16px 间距
+   *   每条 ChatMessage 自己是一个 group/chat-msg，hover 隔离不会跨条；
+   *   历史消息 historyMode=true 默认隐藏操作栏，hover 当条才显示
+   */
+  if (props.__renderMode === 'conversation') {
+    return (
+      <div className="flex h-full w-full min-w-0 items-start justify-center overflow-y-auto p-3">
+        <div className="flex w-full max-w-[500px] flex-col gap-4" style={MESSAGE_CONTAINER_STYLE}>
+          {props.messages.map((msg, idx) => (
+            <ChatMessage key={`${reactKey}-${idx}`} {...msg} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  /* ── 对话流·任务规划交互预览：点击"开始执行任务"追加 用户消息 + AI 执行流加载中 ── */
+  if (props.__renderMode === 'conversation-task-plan-interactive') {
+    return <TaskPlanInteractivePreview key={reactKey} userBubbleTone={userBubbleTone} />;
+  }
+
+  /* requesting / thinking 状态无时间戳 */
+  if (props.status === 'requesting' || props.status === 'thinking') {
+    props.timestamp = '';
+  }
+
+  return (
+    <div className="flex h-full w-full min-w-0 items-start justify-center overflow-y-auto p-3">
+      <div className="flex w-full max-w-[500px] flex-col" style={MESSAGE_CONTAINER_STYLE}>
+        <ChatMessage key={reactKey} {...props} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * TaskPlanInteractivePreview — AI 任务规划变体的有状态对话流预览
+ *
+ * 初始：1 条 AI 消息（头像 + 引导文本"我开始规划啦，请稍后..." + 任务规划卡片）
+ * 点击"开始执行任务"后追加：
+ *   1. 用户消息 "开始执行任务"
+ *   2. AI 消息（头像 + 执行流加载中：第 1 组完成、第 2 组进行中）
+ */
+function TaskPlanInteractivePreview({ userBubbleTone = 'auto' }) {
+  const HISTORY_ACTIONS = { ...DEFAULT_CHAT_ACTIONS, historyMode: true };
+  const ACTIONS_LOCAL = { ...DEFAULT_CHAT_ACTIONS, historyMode: false };
+  const [started, setStarted] = useState(false);
+
+  const taskPlanMessage = {
+    role: 'ai',
+    header: true,
+    title: '',
+    steps: null,
+    leadText: '我开始规划啦，请稍后...',
+    plan: {
+      ...DEFAULT_CHAT_PLAN,
+      onPrimaryAction: () => setStarted(true),
+    },
+    /* 处理后该消息会变成历史消息 → historyMode；未处理时操作栏自动隐藏 */
+    actions: started ? HISTORY_ACTIONS : ACTIONS_LOCAL,
+    timestamp: '18:16',
+  };
+
+  return (
+    <div className="flex h-full w-full min-w-0 items-start justify-center overflow-y-auto p-3">
+      <div className="flex w-full max-w-[500px] flex-col gap-4" style={MESSAGE_CONTAINER_STYLE}>
+        <ChatMessage {...taskPlanMessage} />
+        {started ? (
+          <>
+            <ChatMessage
+              role="user"
+              userBubbleTone={userBubbleTone}
+              userContent={[{ type: 'text', value: '开始执行任务' }]}
+              actions={HISTORY_ACTIONS}
+              timestamp="18:16"
+            />
+            {/* 流式执行流：每 600ms 推一个 step，组完成后切下一组 */}
+            <StreamingChatMessage taskGroups={DEFAULT_CHAT_TASK_GROUPS} />
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * StreamingChatMessage — 把执行流的 taskGroups 接到 useStreamingTaskGroups
+ * 使其挂载即开始按 600ms 节奏一条一条刷出；AI 正在执行，最新一条不显示操作栏
+ */
+function StreamingChatMessage({ taskGroups }) {
+  const streamed = useStreamingTaskGroups(taskGroups, { intervalMs: 600 });
+  return (
+    <ChatMessage
+      role="ai"
+      header
+      title=""
+      steps={null}
+      taskGroups={streamed}
+    />
+  );
+}