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

界面效果

界面集成

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

示例代码如下：

jsx/tsximport 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 秒。
• 如需实现单向消息删除功能，请在云信控制台访问应用管理 > 功能配置 > 基础功能 > 单向消息删除进行开启。

相关信息

如果默认界面无法满足您的业务需求，请根据以下的自定义参数进行自定义。

会话消息组件（chat-kit）提供的自定义参数如下：

参数	类型	说明
actions	Action[]	消息发送按钮组配置，不传使用默认的配置 action: 按钮类型，内置类型包括表情(emoji）、发送图片（sendImg）、发送文字（sendMsg）和发送文件（sendFile），如需自定义请使用自定义 action 名称 visible：boolean 类型，是否显示该按钮，默认 true render: (props: ActionRenderProps) => ReactNode}类型，自定义渲染，如果不传则使用默认渲染方 具体的示例参见自定义消息发送按钮
renderP2pInputPlaceHolder	((session: Session) => string)	自定义渲染单聊聊天输入框 placeholder，具体的示例参见自定义输入框 placeholder
renderTeamInputPlaceHolder	((params: { session: Session; mute: boolean; }) => string)	自定义渲染群组聊天输入框 placeholder，具体的示例参见自定义输入框 placeholder
renderTeamMemberItem	((params: { member: TeamMember & Partial<FriendProfile>; }) => Element | null)	自定义渲染群组成员 item 注：member 的类型请参考TeamMember
onSendText	((data: { value: string; scene: "p2p" | "team" | "superTeam"; to: string; }) => Promise<void>)	发送文字消息的回调，一般用于默认的文字发送缺少想要的字段时。具体使用示例参见实现自定义消息收发
afterTransferTeam	(teamId: string) => Promise	转让群主后的回调
renderP2pCustomMessage	((options: RenderP2pCustomMessageOptions) => Element | null)	渲染单聊中的自定义消息
renderTeamCustomMessage	((options: RenderTeamCustomMessageOptions) => Element | null)	渲染群聊中的自定义消息 注：RenderTeamCustomMessageOptions.msg 的类型请参考 IMMessage
renderEmpty	(() => Element)	自定义渲染未选中任何会话时的内容，具体示例参见自定义未选中会话时的内容
renderHeader	((session: Session) => Element)	自定义渲染会话的 header 样式，具体示例参见自定义会话 header 渲染
selectedSession	string	自定义选中的会话 sessionId，若为群聊场景，则填入 team-teamId；若为单聊场景，则填入 p2p-accountId。一般不用传，内部会处理好选中逻辑
prefix	string	样式前缀，默认值："chat"
commonPrefix	string	公共样式前缀，默认值："common"
renderMessageOuterContent	((msg: IMMessage) => JSX.Element | null | undefined)	自定义渲染会话消息，气泡样式也需要自定义，具体示例参见自定义渲染消息体 注：msg 的类型请参考 IMMessage
renderMessageInnerContent	((msg: IMMessage) => JSX.Element | null | undefined)	自定义渲染会话消息，不需要自定义气泡样式，具体示例参见自定义渲染消息体 注：msg 的类型请参考 IMMessage
msgOperMenu	MsgOperMenuItem[]	自定义渲染消息右键菜单，包括菜单项是否显示（show）、菜单项名称（label、key、icon）、自定义点击事件（onClick），具体示例参见自定义消息右键操作列表
p2pSettingActions	ChatSettingActionItem[]	自定义单聊消息页面右侧的设置栏按钮，具体示例参见自定义消息页面右侧设置栏按钮
teamSettingActions	ChatSettingActionItem[]	自定义群聊消息页面右侧的设置栏按钮，具体示例参见自定义消息页面右侧设置栏按钮