tencent cloud

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

const config = {
  SDKAppID: 0, // Your SDKAppID, Get it from Step 4
  userID: 'YOUR_USER_ID', // Login UserID, Get it from Step 5
  userSig: 'YOUR_USER_SIG', // Your userSig, 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 SampleChat() {
  // language support en-US / zh-CN / ja-JP / ko-KR
  return (
    <div style={{display: 'flex', height: '100vh'}}>
      <UIKitProvider language={"en-US"}>
        <div style={{maxWidth: '400px'}}>
          <Profile />
          <ConversationList />
        </div>
        <Chat>
          <ChatHeader />
          <MessageList />
          <MessageInput />
        </Chat>
        <ChatSetting />
      </UIKitProvider>
    </div>
  );
}