feat: 重构AI消息气泡结构,集成thinking、tool和content为统一block

- AI消息使用统一的可折叠容器(message-block)
- thinking和tool使用相同样式,支持展开/收起
- 工具调用显示input/output内容,区分入参和出参
- 添加状态徽章样式(running/completed/error + 脉冲动画)
- 消息气泡添加毛玻璃效果和精细阴影
- 删除file场景(分析上传的报表)
- 同步更新main specs
This commit is contained in:
2026-04-19 16:34:50 +08:00
parent 9dd2d4a1fc
commit 7125753ca2
4 changed files with 300 additions and 118 deletions

View File

@@ -0,0 +1,89 @@
## Purpose
定义AI消息中思考过程、工具调用和对话正文的多Block结构规范。
## ADDED Requirements
### Requirement: AI消息Block结构
AI消息气泡内 SHALL 支持多个Block的灵活组织Block类型包括thinking、tool、content三种。
#### Scenario: 单个Thinking Block
- **WHEN** AI消息包含thinking过程
- **THEN** 在消息气泡内显示thinking Block包含标题、执行时间、可展开的详细内容
#### Scenario: 单个Tool Block
- **WHEN** AI消息包含工具调用
- **THEN** 在消息气泡内显示tool Block包含工具名称、状态(input/output)
#### Scenario: 多个Block组合
- **WHEN** AI消息包含多个thinking和tool
- **THEN** 按声明顺序依次显示最后显示content
- **AND** 所有thinking和tool必须在content之前
### Requirement: 可折叠容器
Thinking和Tool Block SHALL 使用统一的可折叠容器样式。
#### Scenario: 展开状态
- **WHEN** 用户点击Block头部
- **THEN** 显示详细内容区域
#### Scenario: 收起状态
- **WHEN** Block初始状态为收起
- **THEN** 只显示头部标题和状态,点击后展开
#### Scenario: Thinking默认展开
- **WHEN** 渲染thinking Block
- **THEN** 默认展开显示内容
#### Scenario: Tool默认收起
- **WHEN** 渲染tool Block
- **THEN** 默认收起,只显示头部
### Requirement: 工具调用显示
Tool Block SHALL 清晰展示input和output内容。
#### Scenario: 显示输入参数
- **WHEN** tool Block展开
- **THEN** 显示INPUT区域包含JSON格式化的调用参数
#### Scenario: 显示返回结果
- **WHEN** tool执行完成
- **THEN** 显示OUTPUT区域包含JSON格式化的返回值
#### Scenario: 执行状态
- **WHEN** 渲染tool Block
- **THEN** 显示执行状态running(运行中)/completed(完成)/error(失败)
- **AND** running状态带脉冲动画
### Requirement: 时间显示
时间显示在Block头部的status区域中。
#### Scenario: Block执行时间
- **WHEN** 渲染thinking或tool Block
- **THEN** 在头部status区域显示执行耗时如"2.1s"
#### Scenario: Content时间
- **WHEN** 渲染content Block
- **THEN** 在Block底部显示消息发送时间如"14:31"
### Requirement: 消息气泡样式
AI消息气泡 SHALL 使用毛玻璃效果和精细阴影。
#### Scenario: 毛玻璃效果
- **WHEN** 渲染AI消息气泡
- **THEN** 使用backdrop-filter: blur(12px)实现毛玻璃效果
#### Scenario: 精细阴影
- **WHEN** 渲染AI消息气泡
- **THEN** 使用多层阴影实现精细立体效果
### Requirement: 场景数据
消息场景数据 SHALL 符合新的Block结构。
#### Scenario: 删除File场景
- **WHEN** 系统加载场景列表
- **THEN** 不包含file场景
#### Scenario: 场景消息结构
- **WHEN** 渲染场景消息
- **THEN** 使用blocks结构组织thinking、tool、content