ConversationList Store

import { useEffect } from 'react';
import {
  ConversationMarkType,
  useChatContext,
} from '@tencentcloud/chat-uikit-react';
import './styles.css';

function ConversationListBasicDemo() {
  const {
    activeConversation,
    clearConversationUnreadCount,
    conversationList,
    loadConversations,
    markConversation,
    setActiveConversation,
    totalUnreadCount,
  } = useChatContext();

  useEffect(() => {
    loadConversations();
  }, [loadConversations]);

  const handleSelectConversation = async (conversationID: string) => {
    setActiveConversation(conversationID);
    await clearConversationUnreadCount(conversationID);
    await markConversation([conversationID], ConversationMarkType.Unread, false);
  };

  return (
    <div className="conversation-list-basic-demo">
      <div className="conversation-list-basic-demo__stat">
        <span>Unread Message Count</span>
        <strong>{totalUnreadCount}</strong>
      </div>
      <div className="conversation-list-basic-demo__list">
        {conversationList.map(conversation => (
          <button
            className={
              activeConversation?.conversationID === conversation.conversationID
                ? 'conversation-list-basic-demo__item conversation-list-basic-demo__item--active'
                : 'conversation-list-basic-demo__item'
            }
            key={conversation.conversationID}
            onClick={() => handleSelectConversation(conversation.conversationID)}
            type="button"
          >
            <span>{conversation.title || conversation.conversationID}</span>
            <small>{conversation.conversationID}</small>
            {conversation.unreadCount > 0 && (
              <em>{conversation.unreadCount}</em>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

import { useCallback, useEffect, useMemo, useState } from 'react';
import {
  ConversationListStore,
  ConversationMarkType,
  type ConversationInfo,
} from '@tencentcloud/chat-uikit-react';
import './styles.css';

function formatTime(conversation: ConversationInfo) {
  const timestamp = conversation.lastMessage?.timestamp;
  if (!timestamp) {
    return '';
  }
  return timestamp.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  });
}

function getLastMessageText(conversation: ConversationInfo) {
  const payload = conversation.lastMessage?.messagePayload;
  if (payload && 'text' in payload && typeof payload.text === 'string') {
    return payload.text;
  }
  return conversation.draft ? `[Draft] ${conversation.draft}` : 'No messages yet';
}

function ConversationListStoreBasicDemo() {
  const {
    clearConversationUnreadCount,
    conversationList,
    getConversationInfo,
    hasMoreConversations,
    loadConversations,
    loadMoreConversations,
    markConversation,
    pinConversation,
    totalUnreadCount,
  } = ConversationListStore.create();

  const [activeConversationID, setActiveConversationID] = useState('');
  const [loading, setLoading] = useState(false);
  const [actionError, setActionError] = useState('');

  const activeConversation = useMemo(() => {
    return conversationList.find(conversation => conversation.conversationID === activeConversationID);
  }, [activeConversationID, conversationList]);

  const handleLoadConversations = useCallback(async () => {
    setLoading(true);
    setActionError('');
    try {
      await loadConversations();
    } catch (error) {
      setActionError(error instanceof Error ? error.message : 'Failed to load conversations');
    } finally {
      setLoading(false);
    }
  }, [loadConversations]);

  useEffect(() => {
    void handleLoadConversations();
  }, [handleLoadConversations]);

  const handleSelectConversation = async (conversationID: string) => {
    setActiveConversationID(conversationID);
    setActionError('');
    try {
      await clearConversationUnreadCount(conversationID);
      await markConversation([conversationID], ConversationMarkType.Unread, false);
    } catch (error) {
      setActionError(error instanceof Error ? error.message : 'Failed to select conversation');
    }
  };

  const handleTogglePin = async (conversation: ConversationInfo) => {
    setActionError('');
    try {
      await pinConversation(conversation.conversationID, !conversation.isPinned);
    } catch (error) {
      setActionError(error instanceof Error ? error.message : 'Failed to update pin status');
    }
  };

  const handleLoadMore = async () => {
    setActionError('');
    try {
      await loadMoreConversations();
    } catch (error) {
      setActionError(error instanceof Error ? error.message : 'Failed to load more conversations');
    }
  };

  const handleStartC2CConversation = async () => {
    const normalizedUserID = window.prompt('Enter user ID')?.trim();
    if (!normalizedUserID) {
      return;
    }

    setActionError('');
    try {
      const conversation = await getConversationInfo(`C2C${normalizedUserID}`);
      setActiveConversationID(conversation.conversationID);
      await loadConversations();
    } catch (error) {
      setActionError(error instanceof Error ? error.message : 'Failed to start C2C conversation');
    }
  };

  return (
    <div className="conversation-list-store-basic-demo">
      <div className="conversation-list-store-basic-demo__header">
        <div>
          <h2>ConversationListStore Basic</h2>
          <p>Use ConversationListStore.create() to build a custom conversation list.</p>
        </div>
        <div className="conversation-list-store-basic-demo__actions">
          <button
            className="conversation-list-store-basic-demo__refresh"
            onClick={handleStartC2CConversation}
            type="button"
          >
            Start C2C
          </button>
          <button
            className="conversation-list-store-basic-demo__refresh"
            disabled={loading}
            onClick={handleLoadConversations}
            type="button"
          >
            {loading ? 'Loading...' : 'Refresh'}
          </button>
        </div>
      </div>

      <div className="conversation-list-store-basic-demo__stats">
        <span>Total unread</span>
        <strong>{totalUnreadCount}</strong>
      </div>

      {actionError && (
        <div className="conversation-list-store-basic-demo__error">{actionError}</div>
      )}

      <div className="conversation-list-store-basic-demo__layout">
        <div className="conversation-list-store-basic-demo__list">
          {conversationList.map(conversation => (
            <article
              className={
                activeConversationID === conversation.conversationID
                  ? 'conversation-list-store-basic-demo__item conversation-list-store-basic-demo__item--active'
                  : 'conversation-list-store-basic-demo__item'
              }
              key={conversation.conversationID}
            >
              <button
                className="conversation-list-store-basic-demo__main"
                onClick={() => handleSelectConversation(conversation.conversationID)}
                type="button"
              >
                <span className="conversation-list-store-basic-demo__avatar">
                  {(conversation.title || conversation.conversationID).slice(0, 1).toUpperCase()}
                </span>
                <span className="conversation-list-store-basic-demo__content">
                  <span className="conversation-list-store-basic-demo__row">
                    <strong>{conversation.title || conversation.conversationID}</strong>
                    <time>{formatTime(conversation)}</time>
                  </span>
                  <span className="conversation-list-store-basic-demo__message">
                    {getLastMessageText(conversation)}
                  </span>
                  <small>{conversation.conversationID}</small>
                </span>
              </button>

              <div className="conversation-list-store-basic-demo__meta">
                {conversation.unreadCount > 0 && (
                  <em>{conversation.unreadCount}</em>
                )}
                <button
                  className={
                    conversation.isPinned
                      ? 'conversation-list-store-basic-demo__pin conversation-list-store-basic-demo__pin--active'
                      : 'conversation-list-store-basic-demo__pin'
                  }
                  onClick={() => handleTogglePin(conversation)}
                  type="button"
                >
                  {conversation.isPinned ? 'Unpin' : 'Pin'}
                </button>
              </div>
            </article>
          ))}

          {conversationList.length === 0 && !loading && (
            <div className="conversation-list-store-basic-demo__empty">No conversations</div>
          )}

          {hasMoreConversations && (
            <button
              className="conversation-list-store-basic-demo__load-more"
              onClick={handleLoadMore}
              type="button"
            >
              Load more
            </button>
          )}
        </div>

        <aside className="conversation-list-store-basic-demo__detail">
          <span>Selected conversation</span>
          <strong>{activeConversation?.title || activeConversationID || 'None'}</strong>
          <small>{activeConversation?.conversationID || 'Click a conversation to clear unread count.'}</small>
        </aside>
      </div>
    </div>
  );
}