AI 组件库 ChatUI 3.0 正式发布！阿里再一次领先！

来源：前端开发爱好者

最近我们团队正在寻找一款能够同时适配移动端 和 PC 端 的优秀 AI 聊天组件库！

然而，目前市面上的许多组件库，如 Ant Design X 和 Element Plus X，大多侧重于 PC 端的使用场景，且在移动端的适配和组件丰富性方面存在明显不足。

然而，近日阿里达摩院 发布的 ChatUI 3.0 组件库，无疑为我们带来了全新的希望。

它不仅在移动和 PC 端都能完美适配，还提供了极其丰富的组件生态！

接下来，我们来深入解析 ChatUI 3.0 的亮点和优势。

什么是 ChatUI 3.0 ？

ChatUI 3.0 是阿里达摩院推出的一款专注于智能对话领域的组件库。

它基于丰富的业务场景沉淀，提供了 50 + 基础组件，覆盖了电商、零售、餐饮、出行等多种行业需求。

这些组件不仅功能强大，还支持快速搭建各类业务模板，极大地提升了开发效率。

ChatUI 3.0 优势

移动 PC 适配支持

ChatUI 3.0 在移动和 PC 端的适配方面表现出色。

它采用了响应式设计，能够根据屏幕尺寸自动调整布局，确保在不同设备上都能提供良好的用户体验。

组件丰富多样

ChatUI 3.0 的组件库非常丰富，不仅涵盖了对话式界面所需的各类组件

还包含了移动端常见 的组件，如按钮、布局、表单、卡片、Toast 和 Modal 等。

这意味着我们可以使用 ChatUI 3.0 一站式满足所有业务需求，无需再安装其他组件库，简化了项目依赖管理。

灵活的主题定制

ChatUI 3.0 支持灵活的主题定制，通过一致化色彩封装，开发者只需定义品牌色彩，即可实现全局组件的一致性

并且一键支持深色模式。

这一功能大幅降低了设计和开发成本，帮助品牌快速打造专属对话界面，提升品牌形象。

优秀组件介绍

Chat 对话容器

Chat 对话容器是 ChatUI 3.0 的核心组件之一，它负责管理整个对话界面的布局和交互逻辑。

通过简单的配置，我们可以快速搭建出一个功能完善的对话容器，支持多轮对话 、消息历史记录等功能。

TypingBubble 打字气泡

TypingBubble 组件用于模拟打字效果，让用户感受到更加真实的对话体验。

它可以通过简单的属性配置来控制打字速度 、气泡样式等，满足不同场景下的需求。

Think 思考中

Think 思考中组件用于展示 AI 的思考过程，将复杂的推理步骤以可视化的方式呈现给用户。

这不仅增加了对话的透明度，还能提升用户对 AI 的信任感。

Typing 输入中

Typing 输入中组件用于显示用户输入状态，提供视觉反馈，增强用户体验。

它可以根据输入内容动态调整样式，确保在不同设备上都能良好显示。

MessageStatus 消息状态

MessageStatus 组件用于展示消息的发送状态，如已发送 、已读、失败等。

它通过直观的图标和颜色提示，帮助用户了解消息的最新状态。

移动端常见组件

ChatUI 3.0 提供了丰富的移动端组件 ，涵盖按钮、布局、表单、卡片、Toast 和 Modal 等，支持多种样式和交互效果。

这些组件的全面性和实用性，使 ChatUI 3.0 成为移动端开发的得力助手。

如何快速上手 ChatUI 3.0

安装

通过 npm 安装 ChatUI 3.0：

bash 复制代码

npm install @chatui/core -S

引入组件库及样式

在项目中引入 ChatUI 3.0 的组件和样式：

javascript 复制代码

import React from 'react';
import '@chatui/core/es/styles/index.less';
import Chat, { Bubble, useMessages } from '@chatui/core';
import '@chatui/core/dist/index.css';

使用组件

以下是一个简单的使用示例：

ini 复制代码

const App = () => {
  const { messages, appendMsg, setTyping } = useMessages([]);

function handleSend(type, val) {
    if (type === 'text' && val.trim()) {
      appendMsg({
        type: 'text',
        content: { text: val },
        position: 'right',
      });

      setTyping(true);

      setTimeout(() => {
        appendMsg({
          type: 'text',
          content: { text: 'Bala bala' },
        });
      }, 1000);
    }
  }

function renderMessageContent(msg) {
    const { content } = msg;
    return <Bubble content={content.text} />;
  }

return (
    <Chat
      navbar={{ title: '智能助理' }}
      messages={messages}
      renderMessageContent={renderMessageContent}
      onSend={handleSend}
    />
  );
};

通过以上步骤，我们就可以快速搭建出一个功能完善的 AI 聊天应用。

ChatUI 3.0 的组件设计简洁明了，API 文档详细，即使是新手开发者也能轻松上手。

从一个前端开发者的视角来看，ChatUI 3.0 是一款非常优秀的 AI 组件库。

它不仅提供了丰富的组件和强大的功能，还通过一系列设计原则和优化策略，帮助我们构建更加智能、高效的对话界面。

无论是用于聊天应用还是企业级系统，ChatUI 3.0 都能显著提升开发效率和用户体验。

ChatUI 3.0 官方地址 ：https://chatui.io/
ChatUI 3.0 Github 地址 ：https://github.com/alibaba/ChatUI

ChatUI 3.0 主题定制 ：https://market.m.taobao.com/app/chatui/theme-builder/index.html