Chat UI Kit React

几分钟内使用 React 组件构建您自己的聊天界面。 chatscope 的 Chat UI Kit 是一个用于开发网页聊天应用的开源 UI 工具包。

厌倦了与粘性滚动条、可编辑内容、响应式设计、CSS 技巧的斗争吗？ 这个工具包就是为您准备的！查看所有功能。

Chat UI Kit 为您带来超高速的聊天界面开发 🚀

演示

• 功能齐全的聊天应用：https://demo.chatscope.io
• Zoe、Akane、Eliot 和 Joe：https://chatscope.io/demo/chat-friends
• 与火星人聊天（他偶尔在线）：https://mars.chatscope.io

演示索引：https://chatscope.io/demo。

安装

组件库

使用 yarn：

yarn add @chatscope/chat-ui-kit-react

使用 npm：

npm install @chatscope/chat-ui-kit-react

样式

使用 yarn：

yarn add @chatscope/chat-ui-kit-styles

使用 npm：

npm install @chatscope/chat-ui-kit-styles

使用方法

ESM

import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  MainContainer,
  ChatContainer,
  MessageList,
  Message,
  MessageInput,
} from "@chatscope/chat-ui-kit-react";

<div style={{ position: "relative", height: "500px" }}>
  <MainContainer>
    <ChatContainer>
      <MessageList>
        <Message
          model={{
            message: "Hello my friend",
            sentTime: "just now",
            sender: "Joe",
          }}
        />
      </MessageList>
      <MessageInput placeholder="Type message here" />
    </ChatContainer>
  </MainContainer>
</div>;

太棒了！您的第一个聊天界面已经准备就绪！

UMD

UMD 用法在我们的 Storybook 中有文档说明。

文档

查看我们友好的 Storybook。

Typescript

该库用 Javascript 编写，但从 1.9.3 版本开始，包中提供了 Typescript 类型定义。

另请参阅

@chatscope/use-chat 是一个用于聊天应用状态管理的 React hook。 查看它，看看您自己可以多轻松地实现聊天逻辑。

表示支持

如果您已经制作了一个很棒的聊天界面并且喜欢这个库，请给这个仓库点个 ⭐！

社区和支持

• 在 @chatscope 上发推
• 在 Discord 上聊天
• 在 Facebook 上关注
• 阅读 chatscope 博客 上的文章

网站

https://chatscope.io

许可证

MIT