# @ably/chat-react-ui-kit 中文文档

规范地址：https://npmcn.com/package/%40ably/chat-react-ui-kit/

版本：0\.4\.0
npm 元数据更新时间：2026-11-04T10:27:49.507Z
中文译文更新时间：2026-11-06T22:11:15.926Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ably/chat-react-ui-kit
原文对照：https://npmcn.com/package/%40ably/chat-react-ui-kit/?lang=original
项目主页：https://github.com/ably/ably-chat-react-ui-kit#readme
源码仓库：https://github.com/ably/ably-chat-react-ui-kit

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.5 MB，121 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.0\.0
- 运行依赖：1 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@ably/chat ^2\.0\.0
- 首次发布：2025-10-10T16:23:54.818Z
- 最新版本发布：2026-11-04T10:27:49.113Z
- 近 30 天下载量：2274（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 1 个）

## 中文简介

一个可配置组件库, 用于 @ able/ chat

## 安装

```sh
npm install @ably/chat-react-ui-kit
```

也可以使用：`pnpm add @ably/chat-react-ui-kit`、`yarn add @ably/chat-react-ui-kit`、`bun add @ably/chat-react-ui-kit`

## README

![Ably Chat Header](https://npmcn.com/package/%40ably/chat-react-ui-kit/images/Chat-UI-Kits-github-v1.1.png)

# Ably 聊天反应 UI Kit

一个可配置的UI组件库,用于与Ably Chat SDK构建聊天应用程序. 此软件包提供 与无缝集成的 React 组件 [`@ably/chat`](https://github.com/ably/ably-chat-js) 改为 处理实时消息、存在、打字指标等.

## 开始

所有你需要开始的 Ably Chat React UI Kit :

-   [关于Ably Chat.](https://ably.com/docs/chat)
-   [在 JavaScript 中开始 Ably Chat.](https://ably.com/docs/chat/getting-started/javascript)
-   [开始Ably Chat in React.](https://ably.com/docs/chat/getting-started/react)
-   [开始使用 Ably Chat React UI Kit.](https://ably.com/docs/chat/getting-started/react-ui-kit)
-   [SDK和JavaScript中的使用道克.](https://ably.com/docs/chat/setup?lang=javascript)
-   [SDK和React中的用法文档.](https://ably.com/docs/chat/setup?lang=react)
-   [SDK和用于反应UI工具包的文档.](https://ably.com/docs/chat/react-ui-kit/setup)
-   [API文档 (JavaScript).](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/modules/chat-js.html)
-   [API文档 (React Hooks).](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/modules/chat-react.html)
-   [API文档(React UI kidg).](https://sdk.ably.com/builds/ably/ably-chat-react-ui-kit/main/storybook/)
-   [聊天示例应用.](https://github.com/ably/ably-chat-js/tree/main/demo)
-   [使用 Ably Chat React UI Kit 的 Chat 示例应用 .](https://github.com/ably/ably-chat-react-ui-kit/tree/main/examples/group-chat)
-   与游戏 [活流聊天演示.](https://ably-livestream-chat-demo.vercel.app/)

### 安装

```bash
npm install @ably/chat-react-ui-kit @ably/chat @ably/pubsub-device react react-dom
```

## 支持的平台

此 SDK 支持以下平台:

| 平台 | 支助 |
| --- | --- |
| 浏览器 | 所有主要桌面浏览器,包括Chrome,Firefox,Edge和Opera. 不支持 Internet Explorer . |
| 节点.js | 版本22或更新. |
| 类型脚本 | 完全支持,库用TypeScript来写. |
| 反应 | 18版或更新鲜. 包括与反应生态系统深度融合的提供者和钩子. |

> \[注\] Chat UI组件SDK可以从国家预防机制安装,需要核心Ably Chat SDK作为同级依赖.

## 核心组成部分

### App 组件

完整应用程序组件, 提供框外的完整聊天界面 :

-   室内导航综合侧边栏
-   带有信件显示和输入的聊天区域
-   主题支持( 浅/ 暗模式)
-   神通管理

### 查特温道

单个房间的综合聊天界面,内容包括:

-   带有页码的信件历史
-   实时信息显示
-   信件编辑和删除
-   反应支持
-   打字指标

### 边栏

用于管理多个聊天室的相撞导航组件 :

-   带有活动指标的房间列表
-   会议室的创建和管理
-   出席和占用展示
-   切换集成的主题

## 使用量

以下的例子说明如何利用核心组件设置完整的聊天应用程序. 其中包括初始化Ably客户端,将您的应用程序包装到所需的提供者,以及渲染 `App` 带有边栏和聊天窗口的组件 :

```tsx
import { createClient } from '@ably/pubsub-device';
import { createChatClient } from '@ably/chat';
import { ChatClientProvider } from '@ably/chat/react';
import {
  App,
  ThemeProvider,
  AvatarProvider,
  ChatSettingsProvider,
} from '@ably/chat-react-ui-kit';

// Don't forget to import the styles
import '@ably/chat-react-ui-kit/dist/style.css';

// Initialize the Ably Pub/Sub client with your API key and a unique client ID
const pubsubClient = createClient({
  key: '<your-ably-api-key>',
  clientId: 'user-' + Math.random().toString(36).slice(2, 9),
});

// Create a Chat client using the Ably Pub/Sub client
const chatClient = createChatClient(pubsubClient);

function MyApp() {
  return (
    // ThemeProvider: Enables light/dark mode theming with optional persistence
    <ThemeProvider options={{ persist: true, defaultTheme: 'light' }}>
      {/* AvatarProvider: Manages user avatar state across the application */}
      <AvatarProvider>
        {/* ChatSettingsProvider: Provides chat configuration context */}
        <ChatSettingsProvider>
          {/* ChatClientProvider: Makes the chat client available to all child components */}
          <ChatClientProvider client={chatClient}>
            {/*
              App: The main chat application component
              - Renders a Sidebar for room navigation (create, select, leave rooms)
              - Renders a ChatWindow for the active room with messages, typing indicators, and reactions
              - initialRoomNames: Pre-populate the sidebar with these room names
            */}
            <App initialRoomNames={['general', 'random']} />
          </ChatClientProvider>
        </ChatSettingsProvider>
      </AvatarProvider>
    </ThemeProvider>
  );
}
```

### 使用单个组件

为了控制,你可以使用 `ChatWindow` 财务报告和审定财务报表 `Sidebar` 独立:

```tsx
import { useState } from 'react';
import { ChatRoomProvider } from '@ably/chat/react';
import {
  ChatWindow,
  Sidebar,
  ThemeProvider,
} from '@ably/chat-react-ui-kit';

// Assumes ChatClientProvider is already set up in a parent component

function CustomChatApp() {
  const [rooms, setRooms] = useState<string[]>(['general']);
  const [activeRoom, setActiveRoom] = useState<string | undefined>('general');

  const addRoom = (name: string) => {
    setRooms((prev) => (prev.includes(name) ? prev : [...prev, name]));
    setActiveRoom(name);
  };

  const leaveRoom = (name: string) => {
    setRooms((prev) => {
      const next = prev.filter((r) => r !== name);
      // Update active room based on the new list to avoid stale state
      if (next.length === 0) {
        setActiveRoom(undefined);
      } else if (name === activeRoom) {
        setActiveRoom(next[0]);
      }
      return next;
    });
  };

  return (
    <ThemeProvider>
      <div className="flex h-screen">
        {/* Sidebar: Manages room list, creation, and selection */}
        <Sidebar
          roomNames={rooms}
          activeRoomName={activeRoom}
          addRoom={addRoom}
          setActiveRoom={setActiveRoom}
          leaveRoom={leaveRoom}
        />

        {/* ChatWindow: Displays messages, input, typing indicators for the active room */}
        {activeRoom && (
          <ChatRoomProvider key={activeRoom} name={activeRoom}>
            <ChatWindow
              roomName={activeRoom}
              enableTypingIndicators={true}
            />
          </ChatRoomProvider>
        )}
      </div>
    </ThemeProvider>
  );
}
```

## 释放

这个 [变动情况](https://npmcn.com/package/%40ably/chat-react-ui-kit/CHANGELOG.md) 包含此 SDK 最新发布的细节 。 您还可以查看所有 Ably 的发布 [changelog.cably.com (英语)](https://changelog.ably.com/)。 。 。 .

## 贡献

读取 [安保人员](https://npmcn.com/package/%40ably/chat-react-ui-kit/MAINTAINERS.md) 准则,协助Ably或 [共享反馈或请求](https://forms.gle/mBw9M53NYuCBLFpMA) 一个新的功能.

## 支助和已知问题

为了帮助或技术支持,请访问Ably's [支持页面](https://ably.com/support)。您还可以查看 [github问题](https://github.com/ably/ably-chat-react-ui-kit/issues) 或者自己养活一个.

## 常见问题

### @ably/chat-react-ui-kit 是什么？

一个可配置组件库, 用于 @ able/ chat

### 如何安装 @ably/chat-react-ui-kit？

在项目目录运行 npm install @ably/chat-react-ui-kit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@ably/chat（^2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ably/chat-react-ui-kit 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ably/chat-react-ui-kit 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ably/chat-react-ui-kit 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @ably/chat-react-ui-kit 可以商用吗？

@ably/chat-react-ui-kit 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @ably/chat-react-ui-kit 的下载量有多少？

根据 npm 官方下载统计，@ably/chat-react-ui-kit 在 2026/10/05 – 2026/11/03 这 30 天内被下载 2,274 次，日均约 76 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ably/chat-react-ui-kit 还在维护吗？

最新版本 0\.4\.0 发布于 2026/11/04（3 天前）；至今共发布 5 个版本，其中过去 12 个月发布了 1 个；首次发布于 2025/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。