tencent cloud

import { useEffect } from 'react';
import { TUIChat, TUIChatHeader, TUIConversation, TUIKit, TUIManage, TUIMessageInput, TUIMessageList, TUIProfile } 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
}

export default function SampleChat() {
  const init = () => {
    TUILogin.login({
      ...config,
      useUploadPlugin: true
    }).then(() => {
      openChat();
    }).catch(() => { });
  }
  useEffect(() => {
    init();
  }, [])

  const openChat = () => {
    // 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);
  };

  // language support en-US / zh-CN / ja-JP / ko-KR
  return (
    <TUIKit language={"en-US"}>
      <div className="sample-chat-left-container">
        <TUIProfile className="sample-chat-profile" />
        <TUIConversation />
      </div>
      <TUIChat>
        <TUIChatHeader />
        <TUIMessageList />
        <TUIMessageInput />
      </TUIChat>
      <TUIManage></TUIManage>
    </TUIKit>
  )
}

mkdir -p ./src/TUIKit && rsync -av  ./node_modules/@tencentcloud/chat-uikit-react/ ./src/TUIKit