快速集成

import {
  UIKitProvider,
  useLoginState,
  LoginStatus,
  ConversationList,
  Chat,
  ChatHeader,
  MessageList,
  MessageInput,
  useUIOpenControlState,
  ChatSetting,
  Search,
  VariantType,
  ContactList,
  ContactInfo,
} from "@tencentcloud/chat-uikit-react";
import { useState } from "react";
import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";


function App() {
  const userID = '';        // 替换为您的 userID
  const SDKAppID = 0;        // 替换为您的 SDKAppID (注意: SDKAppID 是数字类型）
  const SDKSecretKey = '';   // 替换为您的 SDKSecretKey

  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
  const [activeTab, setActiveTab] = useState('chats');

  const { userSig } = GenerateTestUserSig.genTestUserSig({ 
    userID,
    SDKAppID,
    SecretKey: SDKSecretKey,
  });
  
  const { status } = useLoginState({
    SDKAppID,
    userID,
    userSig,
  })

  if (status !== LoginStatus.SUCCESS) {
    return <div>Loading...</div>
  }
  
  // 语言支持 en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // 主题支持 light(default) / dark
  return (
    <UIKitProvider>
      <div style={{ height: '100vh', width: '100vw', display: 'flex', flexDirection: 'row' }}>
        <ul>
          <li onClick={() => {setActiveTab('chats')}}>chats</li>
          <li onClick={() => {setActiveTab('contacts')}}>contact</li>
        </ul>
        {
          activeTab === 'chats' && (
            <>
              <ConversationList style={{ minWidth: '300px', maxWidth: '350px' }}/>
              <Chat PlaceholderEmpty="No messages yet">
                <ChatHeader />
                <MessageList />
                <MessageInput />
              </Chat>
              {isChatSettingOpen && <ChatSetting />}
              {isChatSearchOpen &&  <Search style={{ minWidth: '300px'}} variant={VariantType.EMBEDDED} />}
            </>
          )
        }
        {
          activeTab === 'contacts' && (
            <>
              <ContactList style={{ minWidth: '300px', maxWidth: '350px' }}/>
              <ContactInfo 
                PlaceholderEmpty="No contact yet"
                onSendMessage={() => {setActiveTab('chats')}}
                onEnterGroup={() => {setActiveTab('chats')}}
              />
            </>
          )
        }
      </div>
    </UIKitProvider>
  );
}

export default App;