ChatSetting

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

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

  // 从控制台获取登录信息
  const { status } = useLoginState({
    SDKAppID: 0,
    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;