聊天（会话消息）组件(chat-kit）主要功能为传递用户间消息、展示消息、控制聊天，同时提供了聊天输入框、聊天内容展示和控制、聊天设置等功能。

界面效果

界面集成

在您的 React 项目中导入会话消息组件，并设置会话消息界面尺寸，即可集成 IM UIKit 默认的会话消息界面。

示例代码如下：

import React from 'react'
import { ChatContainer } from '@xkit-yx/im-kit-ui'

import '@xkit-yx/im-kit-ui/es/style'

const Page1 = () => {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ChatContainer />
    </div>
  )
}

IM UIKit 默认的会话消息界面，支持如下功能：

• 聊天输入框
  • 发送消息
  • 发送表情
  • 发送图片
  • 发送文件
• 聊天内容展示和控制
  • 聊天消息、好友资料展示
  • 聊天消息撤回、删除、重新编辑
  • 聊天好友拉黑/解除拉黑、删除/添加
• 聊天设置
  • 单聊设置，创建群聊
  • 群聊设置，群解散/群退出、群资料展示与修改、群成员添加/移除、群权限设置等

• 您可在云信控制台访问应用管理 > 功能配置 > 全局功能 > 消息撤回时长中设置消息撤回的时限。设置的时限默认为 120 秒。
• 如需实现单向消息删除功能，请在云信控制台访问应用管理 > 功能配置 > 基础功能 > 单向消息删除进行开启。

相关信息

如果默认界面无法满足您的业务需求，您可参考自定义会话界面 UI 进行自定义。