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>
);
}