聊天

分类

配置

示例

说明

内容

信息

会话信息数据，可用于受控聊天列表显示的场景。该配置需接受以下对象格式的数组，聊天组件将按照数组顺序从上到下渲染会话内容：

• id：会话唯一识别 ID

• createAt：会话生成时的时间戳

• updateAt：会话更新时的时间戳

• role：会话角色，可为 user 或 assistant

• content：会话内容

• parentId：可选，关联对话 ID

欢迎信息

欢迎语配置信息，用于配置聊天组件的欢迎语内容及其样式表现，主要配置内容如下：

• 类型：欢迎语表现类型，可选“文本”或“卡片”类型，当类型选择为卡片时可配置快捷信息。

• 内容：欢迎语内容文案。

• 文字大小：欢迎语文字内容大小。

• 快捷信息：当类型选择为卡片时生效，用于在欢迎语文字内容下方显示多条快捷发送信息。该信息具体配置如下：

  • 标题：显示文案。

  • 类型：触发行为，可选“发送消息”或“自定义” 。

  • 内容：类型选择为“发送消息”时生效，用于定义快捷消息行为触发后用户发送的内容。

  • 事件：类型选择为“自定义”时生效，用于定义快捷消息行为触发后的自定义事件处理器。

用户内容配置

用户内容配置，用于配置会话流中用户角色会话气泡内容及样式表现，主要配置内容如下：

• 头像：会话气泡头像的内容，可配置图片 URL 或文本。

• 名称：会话气泡名称内容。

• 背景颜色：会话气泡的背景颜色。对应 CSS 属性：background-color，查看 mdn 详细说明。

• 内边距：会话气泡的内边距，对应 CSS padding 属性，可参考mdn 详细说明。

• 边框：会话气泡的边框，对应 CSS border 属性，可参考 mdn 详细说明。

• 边框圆角：会话气泡的边框圆角，对应 CSS 属性：border-radius，查看 mdn 详细说明。

• 文字颜色：会话气泡中文本的颜色。

• 文字大小：会话气泡中文字大小，对应 CSS 属性：font-size，查看mdn 详细说明 。

• 开启额外区域：定义是否在会话内容下方显示额外渲染内容

• 额外信息：定义额外区域渲染的内容信息，内容支持 Markdown 渲染。

助理内容配置

助理内容配置，用于配置会话流中助理角色会话气泡内容及样式表现，具体配置项与用户内容配置相同。

操作栏

操作栏，用于配置会话气泡 hover 时显示的可交互工具栏区域的内容及其触发行为，操作栏配置由以下属性组成：

• 标题：操作项 hover 时显示的标题

• 类型：操作项点击触发行为类型，可选“重新生成”、“复制”、“播放”、“自定义”，各类型触发行为如下：

  • 重新生成：将重新发送会话气泡区域内容的关联提问或提问本身。

  • 复制：复制会话气泡区域的内容到剪贴板。

  • 播放：使用配置好的文字转语音，播放当前消息。

  • 自定义：触发自定义事件。

• 文字转语音：使用播放行为时生效，用于播放当前消息。可参考文字转语音（阿里云智能语音交互）。

• 图标：操作项显示图标。

• 图标颜色：操作项显示图标颜色。

• 隐藏：是否隐藏该操作项。

• 位置：操作项出现位置，可选“工具栏”、“下拉框”或“同时出现”。当选择“下拉框”时，该操作项将仅被收起在操作栏的最后一项。

隐藏输入区域

隐藏输入区域，是否隐藏聊天组件的输入区域。

输入区域配置

输入区域配置，聊天组件输入区域样式及内容定义，具体配置内容如下：

• 占位内容：输入框占位内容。

• 形态变体：输入框表现形态。

• 帮助栏：输入框上方快捷消息项配置，可配置如下属性：

  • 标题：快捷消息项显示内容。

  • 样式：快捷消息项的表现样式，可选“标签”、“链接”或“按钮”三种样式。

  • 类型：快捷消息项点击触发的行为，可选“发送信息”或“自定义”。

  • 内容：当类型为“发送消息”时生效，定义点击快捷消息项后用户角色发送的内容。

• 语音输入：可以禁用或使用“点击说话”模式。

• 语音转文字：开启语音输入时生效，用于将音频转化为文字。可参考语音转文字（阿里云智能语音交互）。

• 图片输入：是否开启图片输入，开启后发送内容将支持图片输入。

• 图片上传路径：开启图片输入时生效，用于选择系统文件存储中的图片上传路径。

• 文件输入：是否开启文件输入，开启后发送内容将支持文件输入，请结合所使用的大模型所处平台的相关文档，对上传的文件进行消费。若对接百炼平台，可参考如何快速构建具有文件交互能力的百炼聊天应用。

• 文件上传路径：开启文件输入时生效，用于选择系统文件存储中的文件上传路径。

• 发送按钮加载中：开启后，发送按钮会被置为加载状态，此时无法发送消息。

显示名称

显示名称，是否在会话气泡中显示用户或助手角色的名称。

开启魔笔增强渲染

开启此选项后，会话气泡内容将支持 HTML 标签渲染，但可能会引起与其他组件渲染的冲突。

开启头像和内容分行显示

开启此选项后，头像和聊天内容换行显示

开启 toc

开启此选项后，可以在 Markdown 中使用 ## 目录 来生成目录。

自定义标签

可以自定义非标准 HTML 标签的渲染模式，例如 <tag> 、<ref>

交互

隐藏

隐藏，详情参见通用属性

隐藏时保留布局

隐藏时保留布局，详情参见通用属性

加载

加载，聊天组件是否显示加载状态。

AI 集成操作

AI 集成操作，用于选择与聊天组件关联“百炼智能体应用集成操作”或“百炼模型集成操作”，详情参见集成百炼应用和集成百炼模型。

高级选项

高级选项，可配置如下属性：

• 性能选项：用于控制聊天回复中文本打印的表现行为，若您需要向性能较低的浏览器提供服务，可考虑将选项切换至“平衡”或“速度优先”。

• 滚动行为：用于控制流式聊天回复内容的动画行为。

样式

外边距

外边距，详情参见通用属性

模式

模式，聊天组件中用户及助手角色的排布方式，可选“文档”或“聊天”两种模式。其中“文档”模式将对助手和用户角色会话内容进行左侧对齐排布。

背景图片

设置一个或者多个背景图像，对应 CSS 属性：background-image，查看 mdn 详细说明

背景色

设置背景色，对应 CSS 属性：background-color，查看 mdn 详细说明

圆角

设置外边框圆角，对应 CSS 属性：border-radius，查看 mdn 详细说明

边框

设置边框属性，对应 CSS 属性：border, 查看 mdn 详细说明

上边框

设置上边框属性，对应 CSS 属性：border-top, 查看 mdn 详细说明

下边框

设置下边框属性，对应 CSS 属性：border-bottom, 查看 mdn 详细说明

左边框

设置左边框属性，对应 CSS 属性：border-left, 查看 mdn 详细说明

右边框

设置右边框属性，对应 CSS 属性：border-right, 查看 mdn 详细说明

名称

类型

示例

说明

chats

Array<{

id: string

createAt: number;

updateAt：number;

role: user | assistant;

content: string;

parentId?: string;

}>

chat1.chats

聊天组件会话数据

loading

boolean

chat1.loading

聊天组件当前加载状态

setChats

func

chat1.setChats(xxx)

设置聊天组件的会话数据

clearChats

func

chat1.clearChats()

清空聊天组件的会话数据

setLoading

func

chat1.setLoading(false)

设置聊天组件的加载状态

clearLoading

func

chat1.clearLoading()

清空聊天组件的加载状态

sendMessage

func

chat1.sendMessage('吃了么您内')

在聊天组件中以用户角色发送一条内容

clearMessage

func

chat1.clearMessage()

清空聊天组件当前会话流

stopGenerateMessage

func

chat1.stopGenerateMessage()

停止聊天组件中当前流式返回内容的进程

setMessageContent

func

chat1.setMessageContent({id: xxxxx, content: xxxx})

将指定 ID 会话数据的内容变更

scrollToBottom

func

chat1.scrollToBottom()

将聊天组件会话流滚动至底部

配置

说明

发送内容时触发的事件

回答完成时触发的事件

图片上传成功时触发的事件（仅在图片输入开启时生效）

图片上传失败时触发的事件（仅在图片输入开启时生效）

图片被删除时触发的事件（仅在图片输入开启时生效）

文件上传成功时触发的事件（仅在文件输入开启时生效）

文件上传失败时触发的事件（仅在文件输入开启时生效）

文件被删除时触发的事件（仅在文件输入开启时生效）