# Chatbot
升级版的 gradio Chatbot。
- 支持前端匀速流式输出 message
- 支持输出多模态内容（音频、视频、语音、文件、文本）
- 支持多 agent 场景
- 支持自定义渲染组件，并与 Python 侧事件交互
## 如何使用
### 基本使用
### 多模态 & 支持本地文件的展示
### 控制打字机单句 message 开关
### 支持手风琴内容展示
在返回的内容中加入 `accordion` 标签，可以在内容中加入手风琴，更多用法详见 Markdown 内置自定义标签
同时为了适配大模型的工具调用链路，额外对某些大模型的格式做了预设配置，支持下述格式的预设处理（会将下面的格式转换成上方`accordion`标签包裹形式）
```python
import modelscope_gradio_components as mgr
from modelscope_gradio_components.components.Chatbot.llm_thinking_presets import qwen
# 添加 qwen 解析预设
mgr.Chatbot(llm_thinking_presets=[qwen()])
```
```text
Action: image_gen
Action Input: {"text": "风和日丽", "resolution": "1024*1024"}
Observation:  根据您的描述"风和日丽"，我生成了一张图片。
Action: 「任意文本表示，将展示为思考链调用的名称」
Action Input: 「任意json or md 内容，将展示到调用过程的下拉框」
Observation: 「任意 md 内容，将作为完成调用的展示的下拉框内」
```
### 支持用户选择交互
在返回的内容中加入 `select-box` 标签，更多用法详见 Markdown 内置自定义标签
### 多 bot 场景
### 自定义标签（高阶用法，需要了解前端知识）
详见 Markdown 组件
## API 及参数列表
以下 API 均为在原有 gradio Chatbot 外的额外拓展参数。
### value
接口定义：
```python
class FileMessage(GradioModel):
file: FileData
alt_text: Optional[str] = None
class MultimodalMessage(GradioModel):
name: Optional[str] = None
text: Optional[str] = None
flushing: Optional[bool] = None
avatar: Optional[Union[str, FileData]] = ''
files: Optional[List[Union[FileMessage, dict, FileData, str]]] = None
# 支持多 bot 场景
MultimodalMessageItem = Optional[Union[MultimodalMessage, MultimodalInputData,
dict, str]]
class ChatbotData(GradioRootModel):
root: List[Tuple[Union[MultimodalMessageItem, List[MultimodalMessageItem]],
Union[MultimodalMessageItem,
List[MultimodalMessageItem]]]]
```
### props
| 属性 | 类型 | 默认值 | 描述 |
| -------------------- | -------------------------------------------------------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| flushing | bool | True | 是否开启打字机效果。默认只有 bot 的 message 会开启，可以通过单独修改 message 的 flushing 属性精确控制每一条 message 的显示效果 |
| enable_base64 | bool | False | 是否支持渲染的内容为 base64，因为直接渲染 base64 有安全问题，默认为 False。 |
| preview | bool | True | 是否开启图片预览功能 |
| avatar_images | tuple\[str \| Path \| None \| dict \| list, str \| Path \| None \| dict\| list\] | None | 拓展gr.Chatbot的参数值，除了接收 url 外还可以接收 dict 和 list，dict 可以传入avatar和name字段，name字段在渲染时会显示在头像下方。
- 当传入 dict 时，必须包含有avatar字段。
- 当传入 list 时，一般对应多 bot 模式，每一项可以接收前面所有的值，每个 bot 的头像与 message 中 bot 的位置一一对应 |
| avatar_image_align | Literal['top', 'middle', 'bottom'] | 'bottom' | 控制头像与 message 的对齐方式，默认为下对齐 |
| avatar_image_width | int | 45 | 头像与名称的宽度 |
| flushing_speed | int | 3 | 打字机速度，值为 1 - 10，值越大速度越快 |
| llm_thinking_presets | list\[dict\] | \[\] | llm 思考链路解析预设，可以将 llm 调用工具的输出格式转为固定的前端展示格式，需要从modelscope_gradio_components.Chatbot.llm_thinking_presets引入，目前支持：qwen |
| custom_components | dict\[str, CustomComponentDict\] CustomComponentDict 定义见下方 | None | 支持用户定义自定义标签，并通过 js 控制标签渲染样式与触发 python 事件。 |
**CustomComponent 定义如下**
```python
class CustomComponentDict(TypedDict):
props: Optional[List[str]]
template: Optional[str]
js: Optional[str]
```
### 内置的自定义标签
见 Markdown 内置自定义标签
### event listeners
| 事件 | 描述 |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `mgr.Chatbot.flushed(fn, ···)` | 当打字机效果结束时触发。EventData 为：
- index：当前 message 的 index tuple。
- value：当前 message value。 |
| `mgr.Chatbot.custom(fn, ···)` | 自定义标签触发事件时触发，EventData 为：
- index：前 message 的 index tuple。
- tag：当前触发的标签。
- tag_index：当前触发标签的 index，此 index 在 mesage 的 index tuple 基础上重新计算。
- value：自定义传入的值。 |