ConversationList State

概述

ConversationListState 是基于 Zustand 的会话列表状态管理钩子，为 ConversationList 组件提供完整的状态管理能力。它管理会话列表数据、当前活跃会话、未读消息数量、网络状态等，并提供会话操作的相关方法。

基本使用

import { useConversationListState } from '@tencentcloud/uikit-component-react';

function ConversationComponent() {
  const {
    conversationList,
    activeConversation,
    totalUnRead,
    netStatus,
    setActiveConversation,
    pinConversation,
    deleteConversation,
    muteConversation
  } = useConversationListState();

  return (
    <div>
      <div>未读消息数: {totalUnRead}</div>
      <div>网络状态: {netStatus}</div>
      {conversationList?.map(conversation => (
        <div 
          key={conversation.conversationID}
          onClick={() => setActiveConversation(conversation.conversationID)}
        >
          {conversation.getShowName()}
        </div>
      ))}
    </div>
  );
}

状态接口

数据

属性名
类型
说明
conversationList
ConversationModel[] | undefined
会话列表数据
activeConversation
ConversationModel | undefined
当前活跃的会话
totalUnRead
number
未读消息总数
netStatus
NET_STATE_CONNECTED | NET_STATE_CONNECTING | NET_STATE_DISCONNECTED
网络连接状态

操作方法

方法名
类型
说明
setActiveConversation
(conversationID: string) => void
设置当前活跃会话
createC2CConversation
(userID: string) => Promise
创建私聊会话
createGroupConversation
(options: CreateGroupParams) => Promise
创建群聊会话
pinConversation
(conversationID: string, isPin: boolean) => Promise
置顶/取消置顶会话
deleteConversation
(conversationID: string) => Promise
删除会话
muteConversation
(conversationID: string, isMute: boolean) => Promise
免打扰/取消免打扰
setConversationDraft
(options: SetConversationDraftParams) => Promise
设置会话草稿
markConversationUnread
(conversationID: string, isUnread: boolean) => void
标记会话已读/未读

网络状态

支持以下网络状态类型：
NET_STATE_CONNECTED - 已连接
NET_STATE_CONNECTING - 连接中
NET_STATE_DISCONNECTED - 已断开

使用示例

1. 基础会话列表

function ConversationList() {
  const {
    conversationList,
    activeConversation,
    totalUnRead,
    setActiveConversation
  } = useConversationListState();

  return (
    <div className="conversation-list">
      <div className="header">
        <h3>会话列表</h3>
        {totalUnRead > 0 && (
          <span className="unread-badge">{totalUnRead}</span>
        )}
      </div>

      <div className="list">
        {conversationList?.map(conversation => (
          <div
            key={conversation.conversationID}
            className={`conversation-item ${
              activeConversation?.conversationID === conversation.conversationID 
                ? 'active' 
                : ''
            }`}
            onClick={() => setActiveConversation(conversation.conversationID)}
          >
            <div className="avatar">
              <img src={conversation.getAvatar()} alt="头像" />
            </div>
            <div className="content">
              <div className="name">{conversation.getShowName()}</div>
              <div className="last-message">{conversation.lastMessage?.messageForShow}</div>
            </div>
            {conversation.unreadCount > 0 && (
              <div className="unread-count">{conversation.unreadCount}</div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

2. 会话操作功能

function ConversationWithActions() {
  const {
    conversationList,
    pinConversation,
    deleteConversation,
    muteConversation,
    markConversationUnread
  } = useConversationListState();

  const handlePin = async (conversationID: string, isPin: boolean) => {
    try {
      await pinConversation(conversationID, isPin);
      console.log(`会话${isPin ? '置顶' : '取消置顶'}成功`);
    } catch (error) {
      console.error('置顶操作失败:', error);
    }
  };

  const handleDelete = async (conversationID: string) => {
    if (confirm('确定要删除这个会话吗？')) {
      try {
        await deleteConversation(conversationID);
        console.log('会话删除成功');
      } catch (error) {
        console.error('删除会话失败:', error);
      }
    }
  };

  const handleMute = async (conversationID: string, isMute: boolean) => {
    try {
      await muteConversation(conversationID, isMute);
      console.log(`会话${isMute ? '设置' : '取消'}免打扰成功`);
    } catch (error) {
      console.error('免打扰设置失败:', error);
    }
  };

  const handleMarkUnread = (conversationID: string, isUnread: boolean) => {
    markConversationUnread(conversationID, isUnread);
    console.log(`会话标记为${isUnread ? '未读' : '已读'}`);
  };

  return (
    <div>
      {conversationList?.map(conversation => (
        <div key={conversation.conversationID} className="conversation-item">
          <div className="conversation-info">
            {conversation.getShowName()}
          </div>

          <div className="conversation-actions">
            <button
              onClick={() => handlePin(
                conversation.conversationID, 
                !conversation.isPinned
              )}
            >
              {conversation.isPinned ? '取消置顶' : '置顶'}
            </button>

            <button
              onClick={() => handleMute(
                conversation.conversationID, 
                !conversation.isMuted
              )}
            >
              {conversation.isMuted ? '取消免打扰' : '免打扰'}
            </button>

            <button
              onClick={() => handleMarkUnread(
                conversation.conversationID, 
                conversation.unreadCount === 0
              )}
            >
              {conversation.unreadCount > 0 ? '标记已读' : '标记未读'}
            </button>

            <button
              onClick={() => handleDelete(conversation.conversationID)}
              className="danger"
            >
              删除
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

3. 创建会话功能

function ConversationCreator() {
  const {
    createC2CConversation,
    createGroupConversation,
    setActiveConversation
  } = useConversationListState();

  const [userID, setUserID] = useState('');
  const [groupName, setGroupName] = useState('');
  const [selectedUsers, setSelectedUsers] = useState<string[]>([]);

  const handleCreateC2C = async () => {
    if (!userID.trim()) {
      alert('请输入用户ID');
      return;
    }

    try {
      const conversation = await createC2CConversation(userID);
      setActiveConversation(conversation.conversationID);
      console.log('私聊创建成功:', conversation.conversationID);
      setUserID('');
    } catch (error) {
      console.error('创建私聊失败:', error);
    }
  };

  const handleCreateGroup = async () => {
    if (!groupName.trim()) {
      alert('请输入群组名称');
      return;
    }
    if (selectedUsers.length === 0) {
      alert('请选择群成员');
      return;
    }

    try {
      const groupParams: CreateGroupParams = {
        name: groupName,
        memberList: selectedUsers.map(userID => ({ userID })),
        type: 'Work', // 工作群
      };

      const conversation = await createGroupConversation(groupParams);
      setActiveConversation(conversation.conversationID);
      console.log('群聊创建成功:', conversation.conversationID);
      setGroupName('');
      setSelectedUsers([]);
    } catch (error) {
      console.error('创建群聊失败:', error);
    }
  };

  return (
    <div className="conversation-creator">
      <div className="create-c2c">
        <h4>创建私聊</h4>
        <input
          type="text"
          value={userID}
          onChange={(e) => setUserID(e.target.value)}
          placeholder="输入用户ID"
        />
        <button onClick={handleCreateC2C}>创建私聊</button>
      </div>

      <div className="create-group">
        <h4>创建群聊</h4>
        <input
          type="text"
          value={groupName}
          onChange={(e) => setGroupName(e.target.value)}
          placeholder="输入群组名称"
        />
        <div className="member-selector">
          {/* 用户选择组件 */}
        </div>
        <button onClick={handleCreateGroup}>创建群聊</button>
      </div>
    </div>
  );
}

4. 会话草稿功能

function ConversationDraft() {
  const { setConversationDraft, activeConversation } = useConversationListState();
  const [draftContent, setDraftContent] = useState('');

  const saveDraft = async () => {
    if (!activeConversation) {
      alert('请先选择一个会话');
      return;
    }

    try {
      await setConversationDraft({
        conversationID: activeConversation.conversationID,
        draftText: draftContent
      });
      console.log('草稿保存成功');
    } catch (error) {
      console.error('草稿保存失败:', error);
    }
  };

  return (
    <div className="conversation-draft">
      <textarea
        value={draftContent}
        onChange={(e) => setDraftContent(e.target.value)}
        placeholder="输入草稿内容..."
      />
      <button onClick={saveDraft}>保存草稿</button>
    </div>
  );
}

WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 隐私条款
  3. 法律
  5. Cookie政策
  7. 腾讯云