快速集成

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

function App() {
  const { isChatSettingOpen, isChatSearchOpen } = useUIOpenControlState();
  const { status } = useLoginState({
    SDKAppID: 0, // 参考步骤 4
    userID: '',  // 参考步骤 5
    userSig: '', // 参考步骤 5
  })

  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' }}>
        <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} />}
      </div>
    </UIKitProvider>
  );
}

export default App;