会中聊天（Web）

import { useEffect } from 'react';
import { useChatContext } from 'tuikit-atomicx-react/chat';
import { useRoomState, useLoginState } from 'tuikit-atomicx-react/room';

function useChatConversationSync() {
  const { setActiveConversation } = useChatContext();
  const { currentRoom } = useRoomState();
  const { loginUserInfo } = useLoginState();

  // roomId 或登录用户变化时绑定活跃会话
  useEffect(() => {
    const roomId = currentRoom?.roomId;
    if (!loginUserInfo?.userId) return;
    if (!roomId) {
      // 退房时清空活跃会话
      setActiveConversation('');
      return;
    }
    // 关键步骤：设置活跃会话 ID，格式为 "GROUP" + roomId
    setActiveConversation(`GROUP${roomId}`);
  }, [currentRoom?.roomId, loginUserInfo?.userId, setActiveConversation]);
}

import { useRef } from 'react';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { MessageList, MessageInput, useMessageActions } from 'tuikit-atomicx-react/chat';
import { useRoomParticipantState } from 'tuikit-atomicx-react/room';
import type { MessageListHandle } from 'tuikit-atomicx-react/chat';

function RoomChatPanel() {
  const { localParticipant } = useRoomParticipantState();

  // isMessageDisabled 由房间后台实时同步，无需轮询
  const isMessageDisabled = localParticipant?.isMessageDisabled;
  const placeholder = isMessageDisabled ? '您已被禁言' : '请输入消息...';

  // 配置消息长按/右键操作菜单
  const messageActionList = useMessageActions(['copy', 'recall', 'delete']);

  // 用于命令式控制，如面板打开时滚动到底部
  const messageListRef = useRef<MessageListHandle>(null);

  return (
    <UIKitProvider theme="light" language="zh-CN">
      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: '8px', gap: '8px' }}>
        {/* 消息列表：展示聊天记录，支持复制、撤回、删除操作 */}
        <MessageList
          ref={messageListRef}
          style={{ flex: 1, overflow: 'hidden' }}
          messageActionList={messageActionList}
        />
        {/* 消息输入框：禁言时禁用；回车发送（不显示发送按钮） */}
        <MessageInput
          style={{ flexShrink: 0, border: '1px solid #e0e0e0', borderRadius: '8px' }}
          placeholder={placeholder}
          disabled={isMessageDisabled}
          hideSendButton
        />
      </div>
    </UIKitProvider>
  );
}

import { useState, useEffect, useRef } from 'react';
import { useChatContext } from 'tuikit-atomicx-react/chat';

function useChatUnreadCount(isChatPanelOpen: boolean) {
  const [unreadCount, setUnreadCount] = useState(0);
  const { activeConversationID, messageListOnEvent } = useChatContext();

  // 用 ref 保持最新值，避免因依赖变化重新订阅
  const isPanelOpenRef = useRef(isChatPanelOpen);
  useEffect(() => {
    isPanelOpenRef.current = isChatPanelOpen;
  }, [isChatPanelOpen]);

  // 订阅新消息事件；活跃会话变化时重新订阅
  useEffect(() => {
    if (!activeConversationID || !messageListOnEvent) return;
    const unsub = messageListOnEvent((event) => {
      if (event.type !== 'onReceiveNewMessage') return;
      const { message } = event;
      // 跳过自己发送的消息，或面板已打开时不计数
      if (message.isSentBySelf || isPanelOpenRef.current) return;
      setUnreadCount(prev => prev + 1);
    });
    return unsub;
  }, [activeConversationID, messageListOnEvent]);

  // 面板打开时清空未读计数
  useEffect(() => {
    if (isChatPanelOpen) {
      setUnreadCount(0);
    }
  }, [isChatPanelOpen]);

  return { unreadCount };
}

import { useEffect } from 'react';
import { useChatContext } from 'tuikit-atomicx-react/chat';
import { useRoomState, useLoginState } from 'tuikit-atomicx-react/room';

function useChatConversationSync() {
  const { setActiveConversation } = useChatContext();
  const { currentRoom } = useRoomState();
  const { loginUserInfo } = useLoginState();

  useEffect(() => {
    const roomId = currentRoom?.roomId;
    if (!loginUserInfo?.userId) return;
    if (!roomId) {
      setActiveConversation('');
      return;
    }
    // 关键步骤：设置活跃会话 ID，格式为 "GROUP" + roomId
    setActiveConversation(`GROUP${roomId}`);
  }, [currentRoom?.roomId, loginUserInfo?.userId, setActiveConversation]);
}

import { useEffect } from 'react';
import { useMessageListStore } from 'tuikit-atomicx-react/chat';

function MessageListPanel({ roomId }: { roomId: string }) {
  const conversationID = `GROUP${roomId}`;

  const {
    messageList,
    hasOlderMessages,
    hasNewerMessages,
    pinnedMessageList,
    loadMessages,
    loadOlderMessages,
    loadNewerMessages,
    onEvent,
  } = useMessageListStore(conversationID);

  useEffect(() => {
    loadMessages();
  }, [conversationID]);

  useEffect(() => {
    return onEvent((event) => {
      if (event.type === 'onReceiveNewMessage') {
        // 触发滚动到底部或未读角标更新
      }
    });
  }, [conversationID]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', padding: '8px' }}>
      {messageList.map(msg => (
        <div key={msg.msgID} style={{ padding: '4px 8px', borderRadius: '4px' }}>
          {msg.messagePayload?.text}
        </div>
      ))}
    </div>
  );
}

import { useState } from 'react';
import { useMessageInputStore } from 'tuikit-atomicx-react/chat';

function MessageInputPanel({ roomId }: { roomId: string }) {
  const conversationID = `GROUP${roomId}`;
  const { sendMessage } = useMessageInputStore(conversationID);

  // 输入框内容由 React state 管理，Store 不持有输入状态
  const [inputText, setInputText] = useState('');

  const handleSend = async () => {
    if (!inputText.trim()) return;
    try {
      await sendMessage({ type: 'textMessage', text: inputText });
      setInputText('');
    } catch (error) {
      console.error('发送失败', error);
    }
  };

  return (
    <input
      value={inputText}
      onChange={(e) => setInputText(e.target.value)}
      onKeyDown={(e) => e.key === 'Enter' && handleSend()}
    />
  );
}