TanWenyan
|
c93a87a65e
|
优化思考模式AI回复的UI显示,支持<think>标签解析
新增功能:
1. 创建消息解析工具 message-parser.ts
- 解析 <think> 标签,提取思考过程
- 分离思考内容和实际回复
2. 创建思考过程展示组件 thinking-block.tsx
- 可折叠/展开的思考过程区域
- 参考 GPT-5 和 Claude 网页版设计
- 默认折叠,点击展开查看详细思考过程
3. 修改聊天消息组件 chat-message.tsx
- 集成思考过程解析和展示
- 思考过程单独显示在顶部
- 实际回复正常显示在下方
4. 新增样式 thinking-block.css
- 契合当前淡绿色(#a4e2ad)配色方案
- 渐变背景和流畅动画效果
- 灯泡图标标识思考过程
- 完整的响应式设计
UI效果:
- 思考过程:淡绿色渐变背景,可折叠区域
- 实际回复:正常Markdown渲染
- 交互流畅:展开/折叠动画平滑
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-30 15:21:27 +08:00 |
|