feat(chat): optimize style and update docs for 0.5.0

docs/web/api/attachments.md

@@ -0,0 +1,19 @@
+---
+title: Attachments 文件附件
+description: 文件附件。
+isComponent: true
+usage: { title: '', description: '' }
+spline: aigc
+---
+
+### 基础使用
+
+{{ attachments-base }}
+
+### 滚动scrollX
+
+{{ attachments-scrollX }}
+
+### 滚动scrollY
+
+{{ attachments-scrollY }}

docs/web/api/chat-actionbar.md

@@ -0,0 +1,12 @@
+---
+title: ChatActionbar 对话操作栏
+description: ChatActionbar 包含重新生成，点赞，点踩，复制按钮。 内置 Clipboard 可以复制聊天内容，提供按钮的交互样式，监听 actions 相关事件由业务层实现具体逻辑。
+isComponent: true
+usage: { title: "", description: "" }
+spline: ai
+---
+
+### 聊天操作按钮
+
+可以通过`actionBar`配置操作按钮选项和顺序
+{{ chat-action }}

docs/web/api/chat-content.md

@@ -1,5 +1,5 @@
 ---
-title: ChatContent
+title: ChatContent 对话正文
 description: 支持 markdown 格式的渲染。
 isComponent: true
 usage: { title: "", description: "" }

docs/web/api/chat-input.md

@@ -1,5 +1,5 @@
 ---
-title: ChatInput
+title: ChatInput 对话输入
 description: 用于 对话输入。
 isComponent: true
 usage: { title: "", description: "" }

docs/web/api/chat-item.md

@@ -1,5 +1,5 @@
 ---
-title: ChatItem
+title: ChatItem 对话单元
 description: ChatItem 用于在聊天对话中显示单个 item。它可以展示用户的头像、昵称、时间、聊天内容。AI 聊天场景下提供模型切换提示，如果消息仍在发送过程中，它还可以显示一个 loading 效果。
 isComponent: true
 usage: { title: "", description: "" }

docs/web/api/chat-list.md

@@ -0,0 +1,45 @@
+---
+title: ChatList 对话列表
+description: 用于展示对话或者普通对话场景的组件。
+isComponent: true
+usage: { title: "", description: "" }
+spline: ai
+---
+
+### 基础问答
+
+- chat 最基本的组件，包括头像、作者、时间、聊天内容，输入框，适用于各种需要进行聊天的场景。
+- 支持新消息自动滚动到底部，自动检测用户滚动行为，当用户主动滚动时暂停自动滚动
+
+{{ base }}
+
+### 具名插槽
+
+- 通过`avatar`可以调整头像，通过`name`可以调整昵称，通过`datetime`可以调整日期时间，通过`content`可以
+调整聊天内容，通过`actionbar` 可以调整操作按钮，通过`footer` 可以调整 chat 的底部内容。
+- 每个插槽都提供 `{ item, index }` 参数，方便获取当前消息数据和索引
+
+{{ chat-footer-slot }}
+
+### 默认插槽
+
+- 使用 `t-chat-list` 嵌套 `t-chat-message` 遍历聊天列表的方式，提供更灵活的消息渲染控制
+- 通过默认插槽自定义整个聊天列表的渲染逻辑
+- 支持结构化内容类型：`text`、`markdown`、`thinking` 等
+- 灵活配置聊天气泡对齐方式
+- 支持配置聊天气泡框样式：基础、线框、文字
+
+
+{{ chat-with-message }}
+
+### AI 助手可拖拽
+
+搭配`Dialog`非模态类对话框对话框组件
+
+{{ chat-drag }}
+
+### AI 助手悬窗
+
+搭配`Drawer` 抽屉组件
+
+{{ chat-drawer }}

docs/web/api/chat-loading.md

@@ -1,5 +1,5 @@
 ---
-title: ChatLoading
+title: ChatLoading 对话加载
 description: 适用于 Chat 对话场景下的加载组件。
 isComponent: true
 usage: { title: "", description: "" }

docs/web/api/chat-markdown.md

@@ -0,0 +1,33 @@
+---
+title: ChatMarkdown Markdown内容
+description: Markdown格式的消息内容
+isComponent: true
+usage: { title: "", description: "" }
+spline: ai
+---
+
+### 基础用法
+
+{{ base }}
+
+### 主题配置
+
+目前仅支持对`代码块`的主题设置
+
+{{ theme }}
+
+### 配置项及加载插件
+
+组件内置了`cherry-markdown`作为 markdown 解析引擎，可以通过配置项`options`来定制解析规则，其中通过 themeSetting 可以来设置。同时为了减小打包体积，我们只默认加载了部分必要插件，如果需要加载更多插件，可以通过查看[cherry-markdown 文档](https://github.com/Tencent/cherry-markdown/blob/dev/README.CN.md)配置开启，以下给出动态引入`katex公式`插件的示例。
+
+{{ plugin }}
+
+### 自定义事件响应
+
+{{ event }}
+
+### 自定义语法渲染
+
+以下展示了如何基于`cherry createSyntaxHook`机制来实现自定义脚注，语法格式：**[ref:1|标题|摘要|链接]**, 更多更丰富的自定义语法功能和示例，可以参考[cherry-markdown 自定义语法](https://github.com/Tencent/cherry-markdown/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95)
+
+{{ footnote }}

docs/web/api/chat-message.md

@@ -0,0 +1,33 @@
+---
+title: ChatMessage 对话消息体
+description: 对话消息体
+isComponent: true
+usage: { title: '', description: '' }
+spline: aigc
+---
+
+## 基础样式
+### 气泡样式
+对话消息气泡样式，分为基础、线框、文字，默认为文字
+
+{{ chat-message-base }}
+
+### 可配置角色，头像，昵称，位置
+
+{{ configure }}
+
+### 消息状态
+{{ status }}
+
+## 消息内容渲染
+### 内置支持的几种消息内容
+通过配置 `message type`属性，可以渲染内置的几种消息内容：**文件附件列表**、**思考过程**、**搜索结果**、**建议问题**、**Markdown格式内容**、**图片**, 通过`chatContentProps`属性来配置对应类型的属性
+{{ content }}
+
+### 消息内容自定义
+可以通过`植入插槽content插槽`的方式实现，以下是引入了`tvision`自定义渲染`图表`组件的例子：
+{{ custom }}
+
+### 消息操作栏
+消息底部操作栏，通过`植入插槽actionbar`的方式实现，可以直接使用`ChatActionBar`组件，也可以完全自定义实现
+{{ action }}

docs/web/api/chat-reasoning.md

@@ -1,5 +1,5 @@
 ---
-title: ChatReasoning
+title: ChatReasoning 思考过程
 description: 带思维链的markdown渲染。在某些场景下输出最终回答之前，模型会先输出一段思维链内容，以提升最终答案的准确性。
 isComponent: true
 usage: { title: '', description: '' }

docs/web/api/chat-sender.md

@@ -1,5 +1,5 @@
 ---
-title: ChatSender
+title: ChatSender 对话输入
 description: 用于 AI 聊天的输入框，可以扩展模型、多模态等能力。
 isComponent: true
 usage: { title: "", description: "" }
@@ -8,10 +8,22 @@ spline: ai
 
 ### 基础输入框
 
-{{ chat-sender }}
+受控进行输入/发送等状态管理
 
-### 输入框自定义
+{{ chat-sender-base }}
+
+### 附件输入
+
+支持选择附件及展示附件列表，受控进行文件数据管理，示例中模拟了文件上传流程
+
+{{ chat-sender-attachments }}
 
-通过`prefix`,`suffix` 可以调整输入框左下角，右下角区域内容扩展。
+### 输入框自定义
+可输入区域前置部分 `input-prefix` ，输入框底部左侧区域 `footer-prefix` ，输入框底部操作区域 `suffix`
 
 {{ chat-sender-slot }}
+
+
+### 综合示例
+
+{{ chat-sender-mix }}

docs/web/api/chat-thinking.md

@@ -0,0 +1,35 @@
+---
+title: ChatThinking 思考过程
+description: 思考过程
+isComponent: true
+usage: { title: '', description: '' }
+spline: aigc
+---
+
+## 基础用法
+支持通过`maxHeight`来设置展示内容的最大高度，超出会自动滚动；
+
+支持通过`collapsed`来控制面板是否折叠，示例中展示了当内容输出结束时自动收起的效果
+
+{{ think-base }}
+
+
+## 样式设置
+支持通过`layout`来设置思考过程的布局方式
+
+支持通过`animation`来设置思考内容加载过程的动画效果
+
+{{ think-style }}
+
+
+## API
+### ChatThinking Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+content | Object | - | 思考内容对象。TS类型：`{ text?: string; title?: string }` | N
+layout | String | block | 布局方式。可选项： block/border | N
+status | ChatMessageStatus/Function | - | 思考状态。可选项：complete/stop/error/pending | N
+maxHeight | Number | - | 内容区域最大高度，超出会自动滚动 | N
+animation | String | circle | 加载动画类型。可选项： circle/moving/gradient | N
+collapsed | Boolean | false | 是否折叠（受控） | N