@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/scripts/publish-github.js

@@ -1,60 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-// Change directory to tuikit/examples/sample-chat
-process.chdir(path.join('examples', 'sample-chat'));
-
-// Remove .env file
-fs.unlinkSync('.env');
-
-// Remove package.json
-fs.unlinkSync('package.json');
-
-// Rename package-github.json to package.json
-fs.renameSync('package-github.json', 'package.json');
-
-// Change directory to src
-process.chdir('src');
-
-// Remove demo directory
-fs.rmdirSync('demo', { recursive: true });
-
-// Rename 'components' directory to 'demo'
-fs.renameSync('components', 'demo');
-
-// Remove social-demo to demo
-fs.rmdirSync('social-demo', { recursive: true });
-
-// Change directory to live-demo
-process.chdir('live-demo');
-
-// Remove live-demo.tsx file
-fs.unlinkSync('live-demo.tsx');
-
-// Change directory back to src
-process.chdir('../');
-
-// Copy live-demo directory to ../../live-chat/src
-execSync('cp -r live-demo ../../live-chat/src');
-
-// Remove live-demo directory
-fs.rmdirSync('live-demo', { recursive: true });
-
-// Remove bot-demo directory
-fs.rmdirSync('bot-demo', { recursive: true });
-
-// Change directory to debug
-process.chdir('debug');
-
-// Replace 20000737 with 0 in GenerateTestUserSig.js
-fs.writeFileSync('GenerateTestUserSig.js', fs.readFileSync('GenerateTestUserSig.js', 'utf8').replace(/20000737/g, '0'));
-
-// Change directory back to src
-process.chdir('../');
-
-// Change directory to ../../live-chat/src/debug
-process.chdir(path.join('../', '../', 'live-chat', 'src', 'debug'));
-
-// Replace 20000737 with 0 in GenerateTestUserSig.js
-fs.writeFileSync('GenerateTestUserSig.js', fs.readFileSync('GenerateTestUserSig.js', 'utf8').replace(/20000737/g, '0'));

package/scripts/publish-intl-demo.js

@@ -1,14 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-// Change directory to tuikit/examples/sample-chat
-process.chdir(path.join('examples', 'sample-chat'));
-
-// Change directory to src
-process.chdir('src');
-process.chdir('social-demo');
-// Remove file
-fs.unlinkSync('index.tsx');
-// Rename index-intl.tsx to index
-fs.renameSync('index-intl.tsx', 'index.tsx');

package/scripts/publish-intl-experience-demo.js

@@ -1,14 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-// Change directory to tuikit/examples/sample-chat
-process.chdir(path.join('examples', 'sample-chat'));
-
-// Change directory to src
-process.chdir('src');
-process.chdir('demo');
-// Remove file
-fs.unlinkSync('SampleChat.tsx');
-// Rename index-intl.tsx to index
-fs.renameSync('SampleChat-experience.tsx', 'SampleChat.tsx');

package/src/components/TUIChat/unitls.ts

@@ -1,39 +0,0 @@
-import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import constant from '../../constants';
-import { JSONStringToParse } from '../untils';
-
-export const handleMessage = (messageList:Array<Message>):Array<Message> => {
-  let customPayloadData: any = null;
-  return messageList.filter((item) => {
-    if (item.type === TencentCloudChat.TYPES.MSG_CUSTOM) {
-      customPayloadData = JSONStringToParse(item?.payload?.data);
-    }
-    if (customPayloadData && customPayloadData?.businessID === constant.TYPE_TYPING) {
-      return false;
-    }
-    return true;
-  });
-};
-
-export const handleEditMessage = (
-  messageList: Array<Message>,
-  message: Message,
-) => {
-  const list = [...messageList];
-  const index = list.findIndex((item) => item?.ID === message?.ID);
-  list[index] = message;
-  return list;
-};
-
-export const handleUploadPendingMessage = (
-  messageList: Array<Message>,
-  message: Message,
-) => {
-  const list = [...messageList];
-  if (!list.some((item:Message) => item.ID === message?.ID)) {
-    list.push(message);
-  }
-  const index = list.findIndex((item) => item?.ID === message?.ID);
-  list[index] = message;
-  return list;
-};

package/src/components/TUIKit/TUIKit.tsx

@@ -1,229 +0,0 @@
-import React, { PropsWithChildren, useState, useEffect } from 'react';
-import { ChatSDK, Conversation } from '@tencentcloud/chat';
-import { TUIStore, StoreName, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { TUILogin } from '@tencentcloud/tui-core';
-import { useTranslation } from 'react-i18next';
-import { isH5, isPC } from '../../utils/env';
-import { useTUIKit, UseContactParams } from './hooks/useTUIKit';
-import { useCreateTUIKitContext } from './hooks/useCreateTUIKitContext';
-import { TUIKitProvider } from '../../context/TUIKitContext';
-import { TUIConversation } from '../TUIConversation';
-import { TUIChat } from '../TUIChat';
-import { TUIManage } from '../TUIManage';
-import { TUIProfile } from '../TUIProfile';
-import { TUIContact } from '../TUIContact';
-import { TUIContactInfo } from '../TUIContact/TUIContactInfo/TUIContactInfo';
-import { TUIKIT_TABBAR } from '../../constants';
-import '../../locales/index';
-import chats from '../Icon/images/chats.svg';
-import chatsSelected from '../Icon/images/chats-selected.svg';
-import contacts from '../Icon/images/contacts.svg';
-import contactsSelected from '../Icon/images/contacts-selected.svg';
-import './styles/index.scss';
-import './styles/h5.scss';
-import '../../styles/index.scss';
-
-export interface ChatProps {
-  chat?: any,
-  language?: string,
-  customClasses?: unknown,
-  activeConversation?: Conversation,
-}
-
-interface RenderPCProps {
-  moduleValue: string,
-  tabbarRender: any,
-  setModuleValue: (value: string) => void
-}
-interface RenderH5Props {
-  moduleValue: string,
-  currentConversationID: string,
-  tabbarRender: any,
-  contactData: UseContactParams,
-  setModuleValue: (value: string) => void
-}
-
-const tabbarList = [
-  {
-    id: 1,
-    name: TUIKIT_TABBAR.CHATS,
-    icon: chats,
-    selectedIcon: chatsSelected,
-    value: TUIKIT_TABBAR.CHATS,
-  },
-  {
-    id: 2,
-    name: TUIKIT_TABBAR.CONTACTS,
-    icon: contacts,
-    selectedIcon: contactsSelected,
-    value: TUIKIT_TABBAR.CONTACTS,
-  },
-];
-const TUIMessageInputConfig = {
-  className: 'sample-h5-input',
-  isTransmitter: true,
-};
-
-function RenderForPC({ moduleValue, tabbarRender, setModuleValue } : RenderPCProps) {
-  return (
-    <>
-      <div className="sample-chat-left-container">
-        <TUIProfile className="sample-chat-profile" />
-        {tabbarRender}
-        {moduleValue === TUIKIT_TABBAR.CHATS && <TUIConversation />}
-        {moduleValue === TUIKIT_TABBAR.CONTACTS && <TUIContact />}
-      </div>
-      {moduleValue === TUIKIT_TABBAR.CHATS && (
-      <>
-        <TUIChat />
-        <TUIManage />
-      </>
-      )}
-      {moduleValue === TUIKIT_TABBAR.CONTACTS && (
-      <TUIContact>
-        <TUIContactInfo
-          showChats={() => {
-            setModuleValue(TUIKIT_TABBAR.CHATS);
-          }}
-        />
-      </TUIContact>
-      )}
-    </>
-  );
-}
-
-function RenderForH5({
-  moduleValue, contactData, tabbarRender, currentConversationID, setModuleValue,
-}: RenderH5Props) {
-  return (
-    <div className='sample-chat-h5'>
-      {!currentConversationID && !contactData && (
-      <div className="sample-chat-h5-container">
-        <TUIProfile className="sample-profile" />
-        {tabbarRender}
-        {moduleValue === TUIKIT_TABBAR.CHATS && <TUIConversation />}
-        {moduleValue === TUIKIT_TABBAR.CONTACTS && <TUIContact />}
-      </div>
-      )}
-      {moduleValue === TUIKIT_TABBAR.CHATS && currentConversationID && (
-      <>
-        <TUIChat TUIMessageInputConfig={TUIMessageInputConfig} />
-        <TUIManage />
-      </>
-      )}
-      { moduleValue === TUIKIT_TABBAR.CONTACTS && contactData && (
-        <TUIContact>
-          <TUIContactInfo
-            showChats={() => {
-              setModuleValue(TUIKIT_TABBAR.CHATS);
-            }}
-          />
-        </TUIContact>
-      )}
-    </div>
-  );
-}
-export function TUIKit<
-  T extends ChatProps
-  >(
-  props:PropsWithChildren<T>,
-):React.ReactElement {
-  const [moduleValue, setModuleValue] = useState('chats');
-  const { t } = useTranslation();
-  const {
-    children,
-    chat = TUILogin.getContext().chat,
-    customClasses,
-    activeConversation,
-    language = 'en-US',
-  } = props;
-
-  (window as any).tencent_cloud_im_csig_react_uikit_23F_xa = true;
-  const {
-    conversation,
-    contactData,
-    setActiveConversation,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  } = useTUIKit({ chat, activeConversation, language });
-  const chatContextValue = useCreateTUIKitContext({
-    chat,
-    language,
-    conversation,
-    contactData,
-    setActiveConversation,
-    customClasses,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  });
-  useEffect(() => {
-    TUIStore.watch(StoreName.CONV, {
-      currentConversation: onCurrentConversation,
-    });
-    return () => {
-      TUIStore.unwatch(StoreName.CONV, {
-        currentConversation: onCurrentConversation,
-      });
-    };
-  }, []);
-
-  const switchTabbar = (value: string) => {
-    setModuleValue(value);
-    TUIConversationService.switchConversation('');
-  };
-  const onCurrentConversation = (conversationModel: IConversationModel) => {
-    setActiveConversation(conversationModel?.getConversation());
-  };
-
-  const tabbarRender = (
-    <div className="sample-chat-tab">
-      {tabbarList.map((item: any) => (
-        <div
-          className="sample-chat-tab-container"
-          key={item.id}
-          role="presentation"
-          onClick={() => {
-            switchTabbar(item.value);
-          }}
-        >
-          <img src={moduleValue === item.value ? item.selectedIcon : item.icon} alt="" />
-          <p className={`sample-chat-tab-text ${moduleValue === item.value ? 'sample-chat-tab-active' : ''}`}>
-            {t(item.name)}
-          </p>
-        </div>
-      ))}
-    </div>
-  );
-
-  return (
-    <TUIKitProvider value={chatContextValue}>
-      <div className="tui-kit">
-        {children ||
-          (isPC && (
-            <RenderForPC
-              moduleValue={moduleValue}
-              tabbarRender={tabbarRender}
-              setModuleValue={setModuleValue}
-            />
-          )) ||
-          (isH5 && (
-            <RenderForH5
-              contactData={contactData}
-              moduleValue={moduleValue}
-              tabbarRender={tabbarRender}
-              currentConversationID={conversation?.conversationID || ''}
-              setModuleValue={setModuleValue}
-            />
-          ))}
-      </div>
-    </TUIKitProvider>
-  );
-}

package/src/components/TUIKit/hooks/useCreateTUIKitContext.tsx

@@ -1,48 +0,0 @@
-import React, { useMemo } from 'react';
-import { TUIKitContextValue } from '../../../context/TUIKitContext';
-
-export const useCreateTUIKitContext = (value:TUIKitContextValue) => {
-  const {
-    chat,
-    language,
-    conversation,
-    contactData,
-    customClasses,
-    setActiveConversation,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  } = value;
-
-  const TUIKitContext = useMemo(
-    () => ({
-      chat,
-      language,
-      conversation,
-      contactData,
-      customClasses,
-      setActiveConversation,
-      myProfile,
-      TUIManageShow,
-      setTUIManageShow,
-      TUIProfileShow,
-      setTUIProfileShow,
-      setActiveContact,
-    }),
-    [
-      language,
-      conversation,
-      contactData,
-      customClasses,
-      chat,
-      TUIManageShow,
-      TUIProfileShow,
-      setTUIProfileShow,
-      myProfile,
-    ],
-  );
-  return TUIKitContext;
-};

package/src/components/TUIKit/hooks/useTUIKit.tsx

@@ -1,99 +0,0 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import {
-  TUIStore,
-  StoreName,
-  IGroupModel
-} from '@tencentcloud/chat-uikit-engine';
-import { useTranslation } from 'react-i18next';
-import {
-  ChatSDK,
-  Conversation,
-  Profile,
-  Friend,
-  FriendApplication,
-} from '@tencentcloud/chat';
-
-interface blockData {
-  type: 'block',
-  data: Profile
-}
-
-interface friendData {
-  type: 'friend',
-  data: Friend
-}
-
-interface friendApplicationData {
-  type: 'friendApplication',
-  data: FriendApplication
-}
-
-interface addFriendData {
-  type: 'addFriend',
-  data: Profile
-}
-
-interface GroupData {
-  type: 'group',
-  data: IGroupModel
-}
-
-export type UseContactParams = blockData | friendData |
-friendApplicationData | addFriendData| GroupData | undefined;
-
-export interface UseChatParams{
-  chat: ChatSDK,
-  activeConversation?: Conversation,
-  language?: string,
-}
-
-export const useTUIKit = ({
-  chat, activeConversation: paramsActiveConversation,
-  language,
-}:UseChatParams) => {
-  const { i18n } = useTranslation();
-  const [conversation, setConversation] = useState<Conversation | undefined>(paramsActiveConversation);
-  const [myProfile, setMyProfile] = useState<Profile>();
-  const [TUIManageShow, setTUIManageShow] = useState<boolean>(false);
-  const [TUIProfileShow, setTUIProfileShow] = useState<boolean>(false);
-  const [contactData, setContactData] = useState<UseContactParams>();
-
-  useEffect(() => {
-    i18n.changeLanguage(language);
-    TUIStore.watch(StoreName.USER, {
-      userProfile: (userProfileData: any) => {
-        setMyProfile(userProfileData);
-      },
-    });
-  }, [language]);
-  const setActiveConversation = useCallback(
-    (activeConversation?: Conversation) => {
-      if (activeConversation) {
-        chat?.setMessageRead({ conversationID: activeConversation.conversationID });
-      }
-      if (conversation && (activeConversation?.conversationID !== conversation.conversationID)) {
-        setTUIManageShow(false);
-      }
-      setConversation(activeConversation);
-    },
-    [chat],
-  );
-  const setActiveContact = (actionContactData?: UseContactParams) => {
-    setContactData(actionContactData);
-  };
-
-  useEffect(() => {
-    paramsActiveConversation && setConversation(paramsActiveConversation);
-  }, [paramsActiveConversation]);
-  return {
-    conversation,
-    contactData,
-    setActiveConversation,
-    myProfile,
-    TUIManageShow,
-    setTUIManageShow,
-    TUIProfileShow,
-    setTUIProfileShow,
-    setActiveContact,
-  };
-};

package/src/components/TUIKit/index.ts

@@ -1,3 +0,0 @@
-export * from './TUIKit';
-export * from './hooks/useTUIKit';
-export * from './hooks/useCreateTUIKitContext';

package/src/components/TUIKit/styles/h5.scss

@@ -1,34 +0,0 @@
-.App {
-  height: 100%;
-}
-#root {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-}
-.sample-chat-h5 {
-  position:relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  &-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    .sample-profile {
-      position: absolute;
-      top: 0;
-      z-index: 1;
-      width:100%;
-      max-width: 100%;
-      min-width: 100%;
-    }
-    .tui-kit-input-box.tui-kit-input-box--focus {
-      outline: none;
-    }
-  }
-  .tui-message-input .tui-kit-input-box--focus {
-    outline: none;
-  }
-}

package/src/components/TUIKit/styles/index.scss

@@ -1,132 +0,0 @@
-@use "../../../styles/colors/color-theme" as *;
-
-.tui-kit {
-  position: relative;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  text-align: initial;
-
-  @include theme() {
-    background-color: get(bg-primary);
-  }
-}
-
-.sample-chat {
-  position: relative;
-  margin: 0 auto;
-  width: calc(100% - 20rem);
-  min-width: 850px;
-  height: 86%;
-  box-sizing: border-box;
-  border-radius: 12px;
-  overflow: hidden;
-
-  &-profile {
-    position: absolute;
-    top: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-  }
-
-  &-left-container {
-    max-width: 360px;
-    min-width: 360px;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  &-tab {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    margin: 12px;
-  }
-
-  &-tab-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-  }
-
-  &-tab-text {
-    font-size: 15px;
-    line-height: 25px;
-    text-align: center;
-  }
-
-  &-tab-active {
-    color: #147aff;
-  }
-}
-
-.tuikit-container {
-  display: flex;
-  height: 100%;
-  position: relative;
-  text-align: initial;
-  box-shadow: 0 11px 20px 0 rgba(0, 0, 0, 30%);
-}
-
-.tui-chat-default {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-position-x: -17px;
-  background-position-y: 173px;
-  padding: 100px 40px 0;
-
-  header {
-    display: flex;
-    align-items: center;
-    font-size: 1.75rem;
-    font-family: PingFangSC-Medium;
-    font-weight: 500;
-    color: #000;
-    letter-spacing: 0;
-
-    img {
-      width: 32px;
-      margin: 0 10px;
-    }
-  }
-
-  .content {
-    max-width: 393px;
-    font-size: 16px;
-    line-height: 24px;
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    color: #666;
-    letter-spacing: 0;
-    padding: 36px 0 20px;
-  }
-
-  .link {
-    font-size: 14px;
-    line-height: 20px;
-    font-family: PingFangSC-Regular;
-    font-weight: 400;
-    color: #666;
-    letter-spacing: 0;
-
-    a {
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      color: #006eff;
-      letter-spacing: 0;
-      text-decoration: none;
-      padding: 0 5px;
-    }
-  }
-}
-
-body {
-  #webpack-dev-server-client-overlay {
-    display: none !important;
-  }
-}