如果默认会话列表界面无法满足您的业务需求，您可通过会话列表组件的自定义参数进行界面自定义。

自定义参数概览

会话列表组件（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)	会话免打扰状态改变事件

自定义示例

自定义“会话列表为空时的内容”

• 示例代码

  const renderSessionListEmpty = () => {
      return (
        <div>
          <img style={{width: '100%'}} src='https://yx-web-nosdn.netease.im/common/2946c48f29d747305e68b1ddf27f3472/无成员可添加@3x.png'/>
          <div className='no-session'>暂无会话</div>
        </div>
      )
  }
  
  <ConversationContainer  renderSessionListEmpty={renderSessionListEmpty}/>
  

• 效果对比

  默认	自定义后

自定义会话的展示内容

您可自定义会话列表中某个会话对象的头像、昵称以及最后一条消息的展示。

• 示例代码

  import { ComplexAvatarContainer } from '@xkit-yx/im-kit-ui'
  //全局上下文
  const { store } = useStateContext()
  const renderCustomP2pSession = (options) => {
    return (
      <div className='session-item' onClick={() => options.onSessionItemClick(options.session)}>
          <img className='avatar' src={options.session.avatar}/>
          <div >
            <div className='nick'>{store.uiStore.getAppellation({account: options.session.account})}</div>
            <div className='msg-body'>{options.session.lastMsg.body}</div>
          </div>
      </div>
    )
  }
  <ConversationContainer  
    renderCustomP2pSession={renderCustomP2pSession}
  />
  

• 示例代码解读

  上述示例代码的const renderCustomP2pSession = (options) => {}中，options的定义为options: {session: NimKitCoreTypes.ISession} & ConversationCallbackProps) ，其中ISession和ConversationCallbackProps的定义如下：

  type ISession = P2PSession | TeamSession; // 会话类型，P2PSession表示单聊，TeamSession表示群聊
  type ConversationCallbackProps = {
      /* 点击事件 */
      onSessionItemClick: (session: NimKitCoreTypes.ISession) => void; 
      /* 右键删除事件 */
      onSessionItemDeleteClick: (session: NimKitCoreTypes.ISession) => void;
      /* 右键置顶事件 */
      onSessionItemStickTopChange: (session: NimKitCoreTypes.ISession, isTop: boolean) => void;
      /* 右键静音事件 */
      onSessionItemMuteChange: (session: NimKitCoreTypes.ISession, mute: boolean) => void;
  }
  

• 效果对比

  默认	自定义后

自定义会话元素

可自定义的会话元素包括会话名称、会话消息、单聊会话头像和群聊会话头像。

下文以自定义渲染会话名称为例，介绍的如何在所有会话的名称前都加上“云信”。

• 示例代码

  import { ComplexAvatarContainer } from '@xkit-yx/im-kit-ui'
  //全局上下文
  const { store } = useStateContext()
  const renderSessionName = (options) => {
    return (
      <div style={{fontWeight: 'bold'}}>云信-{store.uiStore.getAppellation({account: options.session.account})}</div>
    )
  }
  
  <ConversationContainer  
    renderSessionName={renderSessionName}
  />
  

• 效果对比

  默认	自定义后