Ably 聊天反应 UI Kit

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

开始

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

• 关于Ably Chat.
• 在 JavaScript 中开始 Ably Chat.
• 开始Ably Chat in React.
• 开始使用 Ably Chat React UI Kit.
• SDK和JavaScript中的使用道克.
• SDK和React中的用法文档.
• SDK和用于反应UI工具包的文档.
• API文档 (JavaScript).
• API文档 (React Hooks).
• API文档(React UI kidg).
• 聊天示例应用.
• 使用 Ably Chat React UI Kit 的 Chat 示例应用 .
• 与游戏 活流聊天演示.

安装

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

支持的平台

此 SDK 支持以下平台:

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

核心组成部分

App 组件

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

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

查特温道

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

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

边栏

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

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

使用量

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

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 独立:

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>
  );
}

释放

这个 变动情况 包含此 SDK 最新发布的细节 。 您还可以查看所有 Ably 的发布 changelog.cably.com (英语)。 。 。 .

贡献

读取 安保人员 准则,协助Ably或 共享反馈或请求 一个新的功能.

支助和已知问题

为了帮助或技术支持,请访问Ably's 支持页面。您还可以查看 github问题 或者自己养活一个.