tencent cloud

import React from 'react';
import { TUILogin } from '@tencentcloud/tui-core';
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { Profile, ConversationList, Chat, ChatHeader, MessageList, MessageInput, ChatSetting } from '@tencentcloud/chat-uikit-react';

import '@tencentcloud/chat-uikit-react/dist/esm/index.css'

const config = {
  SDKAppID: 0, // Your SDKAppID, number type, Get it from Step 4
  userID: 'YOUR_USER_ID', // Login UserID, string type,  Get it from Step 5
  userSig: 'YOUR_USER_SIG', // Your userSig, string type,  Get it from Step 5
}

TUILogin.login({
  ...config,
  useUploadPlugin: true
}).then(() => {
  openDefaultChat();
}).catch(() => {});

function openDefaultChat() {
  // 1v1 chat: conversationID = `C2C${userID}`
  // group chat: conversationID = `GROUP${groupID}`
  const userID = 'administrator'; // userID: Recipient of the Message userID, Get it from Step 5
  const conversationID = `C2C${userID}`;
  TUIConversationService.switchConversation(conversationID);
}

export default function App() {
  // language support en-US(default) / zh-CN / ja-JP / ko-KR / zh-TW
  // theme support light(default) / dark
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language='en-US' theme='light'>
        <div style={{ display: 'flex', flexDirection: 'column', maxWidth: '30%' }}>
          <Profile />
          <ConversationList />
        </div>
        <Chat>
          <ChatHeader />
          <MessageList />
          <MessageInput />
        </Chat>
        <ChatSetting />
      </UIKitProvider>
    </div>   
  );
}