ChatUI 3.0 是阿里达摩院推出的 “对话式交互” 开源组件库,在智能对话领域具有诸多优势,以下为你详细介绍:
- 组件丰富实用:提供 50 多个基础组件,涵盖电商、零售、餐饮、出行等多种行业需求,包括对话式界面所需的各类组件以及移动端常见组件,如按钮、布局、表单、卡片、Toast 和 Modal 等,可一站式满足业务需求,简化项目依赖管理。
- 提升开发效率:基于 React 开发,使用 TypeScript 提供完整类型定义文件1。Chat 对话容器是核心组件之一,通过简单配置就能快速搭建出功能完善的对话容器,支持多轮对话、消息历史记录等功能,让开发者将重心放在业务开发上,无需关心机型差异或整体布局设计。
- 优化用户体验:TypingBubble 组件模拟打字效果,Think 思考中组件将 AI 的思考过程可视化,Typing 输入中组件显示用户输入状态,MessageStatus 组件展示消息发送状态,通过直观图标和颜色提示,帮助用户了解消息最新状态,这些都有助于提升用户对 AI 的信任感和使用体验。
- 支持定制化:支持灵活的样式定制,通过一致化色彩封装,开发者只需定义品牌色彩,即可实现全局组件的一致性,并且一键支持深色模式,还提供在线主题编辑器,支持可视化编辑主题。同时支持多语言和本土化特性,以及无障碍访问,已通过深圳市无障碍研究会的认证,做到了组件级别支持可访问性,默认对障碍人群友好。
- 响应式设计:采用响应式设计,能够根据屏幕尺寸自动调整布局,在无线和 PC 端都能友好展现,通过配置断点,在超过一定宽度时以宽屏模式展示,内部组件交互形式也会相应改变,为不同设备的用户提供良好的使用体验
ChatUI 3.0 有以下核心组件:
- Chat 对话容器:负责管理整个对话界面的布局和交互逻辑,通过简单配置就能快速搭建出功能完善的对话容器,支持多轮对话、消息历史记录等功能。
- TypingBubble 组件:用于模拟打字效果,让用户感受到更加真实的对话体验,可通过简单属性配置控制打字速度、气泡样式等。
- Think 思考中组件:用于展示 AI 的思考过程,将复杂的推理步骤以可视化的方式呈现给用户,增加对话透明度,提升用户对 AI 的信任感。
- Typing 输入中组件:用于显示用户输入状态,提供视觉反馈,增强用户体验,可根据输入内容动态调整样式。
- MessageStatus 组件:用于展示消息的发送状态,如已发送、已读、失败等,通过直观的图标和颜色提示,帮助用户了解消息的最新状态。