会话列表组件（conversation-kit）主要功能为显示当前用户的会话（单聊和群聊）列表，同时提供会话点击和右键菜单功能对会话进行操作。

界面效果

界面集成

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

示例代码如下：

jsx/tsximport React from 'react'
import { ConversationContainer } from '@xkit-yx/im-kit-ui'

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

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

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

• 会话点击支持功能
  • 选中会话
  • 重置会话未读数
• 右键菜单支持功能
  • 设置会话免打扰
  • 删除会话

相关信息

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

会话列表组件（conversation-kit）提供的自定义参数如下：

参数	类型	说明
renderSessionListEmpty	(() => Element)	自定义渲染会话列表为空时的内容，具体示例参见自定义“会话列表为空时的内容”
renderCustomP2pSession	(options: {session: NimKitCoreTypes.ISession} & ConversationCallbackProps) => JSX.Element | null | undefined	自定义渲染会话类型是单聊的内容，具体示例参见自定义会话的展示内容
renderCustomTeamSession	(options: {session: NimKitCoreTypes.ISession} & Omit<ConversationCallbackProps, 'onSessionItemMuteChange'>) => JSX.Element | null | undefined	自定义渲染会话类型是群聊的内容，具体示例参见自定义会话的展示内容
renderSessionName	((options: { session: ISession; }) => Element | null)	自定义渲染会话名称。如果单聊会话定义了 renderCustomP2pSession 或群组会话定义了 renderCustomTeamSession 则不生效。具体示例参见自定义会话元素
renderSessionMsg	((options: { session: ISession; }) => Element | null)	自定义渲染会话消息。如果单聊会话定义了 renderCustomP2pSession 或群组会话定义了 renderCustomTeamSession 则不生效
renderP2pSessionAvatar	((options: { session: ISession; }) => Element | null)	自定义渲染单聊会话头像。如果定义了 renderCustomP2pSession 则不生效
renderTeamSessionAvatar	((options: { session: ISession; }) => Element | null)	自定义渲染群聊会话头像。如果定义了 renderCustomTeamSession 则不生效
prefix	string	样式前缀，默认值为"conversation"
commonPrefix	string	公共样式前缀，默认值为"common"
onSessionItemClick	((id: string) => void)	会话点击事件
onSessionItemDeleteClick	((id: string) => void)	会话删除事件
onSessionItemStickTopChange	((id: string, isTop: boolean) => void)	会话置顶状态改变事件
onSessionItemMuteChange	((id: string, mute: boolean) => void)	会话免打扰状态改变事件