@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

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

@@ -1,36 +0,0 @@
-.tui-place-holder {
-  padding: 0 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-
-  .tui-place-holder__icon {
-    margin: 10px;
-  }
-
-  .tui-place-holder__label {
-    color: #999;
-    font-weight: 400;
-    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-    font-family: PingFangSC-Medium;
-    font-size: 16px;
-    line-height: 22px;
-  }
-
-  .tui-place-holder__button {
-    margin: 20px;
-    background-color: #0365f9;
-    border-radius: 31px;
-    color: #fff;
-    cursor: pointer;
-    /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-    font-family: PingFangSC-Medium;
-    font-size: 14px;
-    line-height: 20px;
-    padding: 12px 36px;
-    text-align: center;
-    user-select: none;
-  }
-}

package/src/components/Toast/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-
-import './styles/index.scss';
-
-interface ToastProps {
-  type?: 'info' | 'warn' | 'error',
-  text?: string,
-  time?: number,
-  className?: string,
-}
-
-export function Toast<
-T extends ToastProps
->(props:React.PropsWithChildren<T>) {
-  const {
-    type = 'info',
-    text,
-    time: propsTime,
-    className,
-  } = props;
-
-  const time = propsTime || 3;
-
-  const root = document.body;
-
-  const elements = document.createElement('div');
-  if(text) {
-    elements.innerText = text ;
-  }
-  elements.className = `toast ${className} ${type}`;
-
-  root.appendChild(elements);
-
-  const toastList = document.getElementsByClassName('toast');
-
-  elements.style.left = `calc(50% - ${elements.clientWidth / 2}px)`;
-  elements.style.zIndex = `${10 + toastList.length - 1}`;
-  elements.style.top = `${elements.clientHeight * (toastList.length - 1)}px`;
-
-  const Timer = setTimeout(() => {
-    root.removeChild(elements);
-    clearTimeout(Timer);
-  }, time * 1000);
-}

package/src/components/Toast/styles/color.scss

@@ -1,11 +0,0 @@
-.info {
-  background: #FFFFFF;
-}
-.warn {
-  color: #FFFFFF;
-  background: #faad14;
-}
-.error {
-  color: #FFFFFF;
-  background: #ff4d4f;
-}

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

@@ -1,2 +0,0 @@
-@import "./layout.scss";
-@import "./color.scss";

package/src/components/Toast/styles/layout.scss

@@ -1,11 +0,0 @@
-.toast {
-  position: fixed;
-  top: 0;
-  z-index: 10;
-  margin: 20px;
-  padding: 10px;
-  box-shadow: 0 11px 20px 0 rgb(0, 0, 0.3);
-  max-width: 50%;
-  word-break: break-all;
-  border-radius: 5px;
-}

package/src/components/utils.ts

@@ -1,96 +0,0 @@
-import {
-  format,
-  formatDistance,
-  isThisWeek,
-  isThisYear,
-  isToday,
-  isYesterday,
-} from 'date-fns';
-import { enGB, zhCN, ja, ko, zhTW } from 'date-fns/locale';
-import TencentCloudChat from '@tencentcloud/chat';
-import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
-import { defaultGroupAvatarWork, defaultUserAvatar } from './Avatar';
-// Determine if it is a JSON string
-export function isJSON(str: string) {
-  if (typeof str === 'string') {
-    try {
-      const data = JSON.parse(str);
-      if (data) {
-        return true;
-      }
-      return false;
-    } catch (error) {
-      return false;
-    }
-  }
-  return false;
-}
-
-// Determine if it is a JSON string
-export function JSONStringToParse(str: string) {
-  if (!isJSON(str)) {
-    return str;
-  }
-  return JSON.parse(str);
-}
-
-export const handleDisplayAvatar = (avatar: string, type: string = TencentCloudChat.TYPES.CONV_C2C) => {
-  let displayImage = avatar;
-  if (!avatar) {
-    switch (type) {
-      case TencentCloudChat.TYPES.CONV_C2C:
-        displayImage = defaultUserAvatar;
-        break;
-      case TencentCloudChat.TYPES.CONV_GROUP:
-        displayImage = defaultGroupAvatarWork;
-        break;
-      default:
-        displayImage = defaultGroupAvatarWork;
-    }
-  }
-  return displayImage;
-};
-
-export const getTimeStamp = (time: number, language = 'en-US') => {
-  const locales: any = {
-    'zh-CN': zhCN,
-    'zh-TW': zhTW,
-    'en-US': enGB,
-    'ja-JP': ja,
-    'ko-KR': ko,
-  };
-  if (!time) {
-    return '';
-  }
-  if (!isThisYear(time)) {
-    return format(time, 'yyyy MMM dd', {
-      locale: locales[language],
-    });
-  }
-  if (isToday(time)) {
-    return format(time, 'p', {
-      locale: locales[language],
-    });
-  }
-  if (isYesterday(time)) {
-    return formatDistance(time, new Date(), {
-      locale: locales[language],
-    });
-  }
-  if (isThisWeek(time)) {
-    return format(time, 'eeee', {
-      locale: locales[language],
-    });
-  }
-  return format(time, 'MMM dd', {
-    locale: locales[language],
-  });
-};
-
-export function enableSampleTaskStatus(taskKey: string) {
-  const tasks = TUIStore.getData(StoreName.APP, 'tasks');
-  if (taskKey in tasks && !tasks[taskKey]) {
-    tasks[taskKey] = true;
-    TUIStore.update(StoreName.APP, 'tasks', tasks);
-  }
-}

package/src/constants.ts

@@ -1,95 +0,0 @@
-const constant = {
-  typeC2C: 'isC2C',
-  typeGroup: 'isGroup',
-  cancel: 'cancel',
-  group: 'GROUP',
-  handleMessage: {
-    revoke: 'revoke',
-    copy: 'copy',
-    delete: 'delete',
-    forward: 'forward',
-    reply: 'reply',
-  },
-  at: '@',
-  all: '所有人',
-  typeForward: 'forward',
-  typeMute: 'mute',
-  typeOrder: 'order',
-  typeService: 'consultion',
-  typeReply: 'quick_reply',
-  typeEvaluate: 'evaluation',
-  typeTextLink: 'text_link',
-  typeAndroid: 'android',
-  typeIphone: 'iphone',
-  typeMini: 'miniprogram',
-  TYPE_TYPING: 'user_typing_status',
-  typeInputStatusIng: 'EIMAMSG_InputStatus_Ing',
-  typeInputStatusEnd: 'EIMAMSG_InputStatus_End',
-};
-
-export enum CONSTANT_DISPATCH_TYPE {
-  RESET = 'reset',
-  SET_CONVERSATION_PRPFILE = 'setConversationProfile',
-  SET_MESSAGELIST = 'setMessageList',
-  SET_UPDATE_MESSAGE = 'setUpdateMessage',
-  SET_EDIT_MESSAGE = 'setEditMessage',
-  SET_REMOVE_MESSAGE = 'setRemoveMessage',
-  SET_HISTORY_MESSAGELIST = 'setHistoryMessageList',
-  SET_NEXT_REQ_MESSAGE_ID = 'setNextReqMessageID',
-  SET_IS_COMPLETE = 'setIsComplete',
-  SET_TEXT = 'setText',
-  SET_HIGH_LIGHTED_MESSAGE_ID ='setHightLightedMessageID',
-  OPERATE_MESSAGE = 'operateMessage',
-  SET_NO_MORE = 'setNoMore',
-  SET_CURSOR_POS = 'setCursorPos',
-  SET_AUDIO_SOURCE = 'setAudioSource',
-  SET_VIDEO_SOURCE = 'setVideoSource',
-  UPDATE_UPLOAD_PENDING_MESSAGE_LIST = 'updateUploadPendingMessageList',
-  SET_FIRST_SEND_MESSAGE = 'setFirstSendMessage',
-  SET_ACTIVE_MESSAGE_ID ='setActiveMessageID',
-
-}
-
-export enum MESSAGE_TYPE {
-  TEXT = 1,
-  CUSTOM = 2,
-  IMAGE = 3,
-  AUDIO = 4,
-  VIDEO = 5,
-  FILE = 6,
-  FACE = 8,
-}
-
-export enum MESSAGE_STATUS {
-  UNSEND = 'unSend',
-  SUCCESS = 'success',
-  FAIL = 'fail',
-}
-
-export enum MESSAGE_FLOW {
-  IN = 'in',
-  OUT = 'out',
-}
-
-export enum MESSAGE_TYPE_NAME {
-  TEXT = 'text',
-  CUSTOM = 'custom',
-  IMAGE = 'image',
-  AUDIO = 'audio',
-  VIDEO = 'video',
-  FILE = 'file',
-  FACE = 'face',
-}
-
-export enum MESSAGE_OPERATE {
-  REVOKE = 'revoke',
-  QUOTE = 'quote',
-  FORWARD = 'forward',
-}
-
-export enum TUIKIT_TABBAR {
-  CHATS = 'chats',
-  CONTACTS = 'contacts',
-}
-
-export default constant;

package/src/context/ChatActionContext.tsx

@@ -1,51 +0,0 @@
-import React, { PropsWithChildren, useContext } from 'react';
-import { Message } from '@tencentcloud/chat';
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { OperateMessageParams } from '../components/Chat/hooks/useHandleMessage';
-
-export interface TUIChatActionContextValue {
-  updateMessage?: (messages: Message[]) => void;
-  setFirstSendMessage?: (message: IMessageModel) => void;
-  editLocalMessage?: (message: Message) => void;
-  operateMessage?: (data?: OperateMessageParams) => void;
-  loadMore?: () => Promise<void>;
-  revokeMessage?: (message: Message) => Promise<Message>;
-  setAudioSource?: (source: HTMLAudioElement | null) => void;
-  setVideoSource?: (source: HTMLVideoElement | null) => void;
-  setHighlightedMessageId?: (highlightedMessageId: string) => void;
-  updateUploadPendingMessageList?: (message?: Message) => void;
-  setActiveMessageID?: (messageID: string) => void;
-  callButtonClicked?: (callMediaType?: number, callType?: any) => void;
-}
-
-export const TUIChatActionContext = React.createContext<
-TUIChatActionContextValue | undefined>(
-  undefined,
-);
-
-export function TUIChatActionProvider({
-  children,
-  value,
-}: PropsWithChildren<{
-  value: TUIChatActionContextValue;
-}>): React.ReactElement {
-  return (
-    <TUIChatActionContext.Provider
-      value={(value as unknown) as TUIChatActionContextValue}
-    >
-      {children}
-    </TUIChatActionContext.Provider>
-  );
-}
-
-export const useTUIChatActionContext = (
-  componentName?: string,
-) => {
-  const contextValue = useContext(TUIChatActionContext);
-
-  if (!contextValue) {
-    return {} as TUIChatActionContextValue;
-  }
-
-  return (contextValue as unknown) as TUIChatActionContextValue;
-};

package/src/context/ChatStateContext.tsx

@@ -1,49 +0,0 @@
-import React, {
-  PropsWithChildren, useContext, MutableRefObject, RefObject,
-} from 'react';
-import { Conversation, Message } from '@tencentcloud/chat';
-import { MessageListProps, TUIMessageInputBasicProps, TUIMessageProps } from '../components';
-import { OperateMessageParams } from '../components/Chat/hooks/useHandleMessage';
-
-export interface TUIChatStateContextValue {
-  conversation?: Conversation;
-  messageList?: Message[];
-  nextReqMessageID?: string;
-  isCompleted?: boolean;
-  init?: boolean;
-  highlightedMessageId?: string;
-  lastMessageID?: string;
-  isSameLastMessageID?: boolean;
-  messageListRef?: RefObject<HTMLDivElement>;
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
-  operateData?: OperateMessageParams;
-  noMore?: boolean;
-  messageConfig?: TUIMessageProps;
-  cloudCustomData?: string;
-  TUIMessageInputConfig?: TUIMessageInputBasicProps;
-  audioSource?: HTMLAudioElement | null;
-  vidoeSource?: HTMLVideoElement | null;
-  TUIMessageListConfig?: MessageListProps;
-  uploadPendingMessageList?: Message[];
-  firstSendMessage?: Message | null;
-  activeMessageID?: string;
-}
-
-export const TUIChatStateContext = React.createContext<TUIChatStateContextValue | null>(null);
-export function TUIChatStateContextProvider({ children, value }: PropsWithChildren<{
-  value: TUIChatStateContextValue;
-}>): React.ReactElement {
-  return (
-    <TUIChatStateContext.Provider value={value}>
-      {children}
-    </TUIChatStateContext.Provider>
-  );
-}
-
-export function useTUIChatStateContext(componentName?: string): TUIChatStateContextValue {
-  const contextValue = useContext(TUIChatStateContext);
-  if (!contextValue && componentName) {
-    return {} as TUIChatStateContextValue;
-  }
-  return (contextValue as unknown) as TUIChatStateContextValue;
-}

package/src/context/ComponentContext.tsx

@@ -1,48 +0,0 @@
-import React, { PropsWithChildren, useContext } from 'react';
-import { TUIChatHeaderDefaultProps } from '../components';
-import type { EmptyStateIndicatorProps } from '../components/EmptyStateIndicator';
-import { MessageContextProps, TUIMessageProps } from '../components/MessageElement';
-
-export interface UnknowPorps {
-  [propsName: string]: any;
-}
-
-export interface ComponentContextValue {
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
-  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>;
-  EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
-  TUIMessageInput?: React.ComponentType<UnknowPorps>;
-  MessageContext?: React.ComponentType<MessageContextProps>;
-  InputPlugins?: React.ComponentType<UnknowPorps>;
-  MessagePlugins?: React.ComponentType<UnknowPorps>;
-  MessageCustomPlugins?: React.ComponentType<UnknowPorps>;
-  MessageTextPlugins?: React.ComponentType<UnknowPorps>;
-  InputQuote?: React.ComponentType<UnknowPorps>;
-}
-
-export const ComponentContext = React.createContext<ComponentContextValue | undefined>(undefined);
-
-export function ComponentProvider({
-  children,
-  value,
-}: PropsWithChildren<{
-  value: ComponentContextValue;
-}>) {
-  return (
-    <ComponentContext.Provider value={(value as unknown) as ComponentContextValue}>
-      {children}
-    </ComponentContext.Provider>
-  );
-}
-
-export function useComponentContext(
-  componentName?: string,
-) {
-  const contextValue = useContext(ComponentContext);
-
-  if (!contextValue) {
-    return {} as ComponentContextValue;
-  }
-
-  return contextValue as ComponentContextValue;
-}

package/src/context/ConversationListContext.tsx

@@ -1,113 +0,0 @@
-import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
-import TUIChatEngine, { IConversationModel, StoreName, TUIConversationService, TUIStore } from '@tencentcloud/chat-uikit-engine';
-
-interface ConversationListProviderProps {
-  /** Specifies a function to filter conversations in the conversation list. */
-  filter?: (conversationList: IConversationModel[]) => IConversationModel[];
-  /** Specifies a function to sort conversations in the conversation list. */
-  sort?: (conversationList: IConversationModel[]) => IConversationModel[];
-}
-interface ConversationListContextType {
-  conversationList: IConversationModel[];
-  filteredAndSortedConversationList: IConversationModel[];
-  currentConversation: IConversationModel | undefined;
-  setCurrentConversation: (conversation: IConversationModel) => void;
-  isLoading: boolean;
-  isLoadError: boolean;
-}
-
-const ConversationListContext = React.createContext<ConversationListContextType | null>(null);
-
-function ConversationListProvider(props: PropsWithChildren<Partial<ConversationListProviderProps>>) {
-  const {
-    filter,
-    sort,
-    children,
-  } = props;
-
-  const [conversationList, setConversationList] = useState<IConversationModel[]>([]);
-
-  const [currentConversation, _setCurrentConversation] = useState<IConversationModel | undefined>(undefined);
-
-  const [filteredAndSortedConversationList, setFilteredAndSortedConversationList] = useState<IConversationModel[]>([]);
-
-  const [isLoading, setIsLoading] = useState(true);
-  const [isLoadError, setIsLoadError] = useState(false);
-
-  useEffect(() => {
-    TUIStore.watch(StoreName.CONV, {
-      conversationList: onConversationListUpdated,
-      currentConversation: onCurrentConversationUpdated,
-    });
-    TUIStore.watch(StoreName.USER, {
-      netStateChange: onNetStateChange,
-    });
-
-    return () => {
-      TUIStore.unwatch(StoreName.CONV, {
-        conversationList: onConversationListUpdated,
-        currentConversation: onCurrentConversationUpdated,
-      });
-      TUIStore.unwatch(StoreName.USER, {
-        netStateChange: onNetStateChange,
-      });
-    };
-  }, []);
-
-  useEffect(() => {
-    // filter & sort conversationList
-    let _conversationList = conversationList;
-    filter && (_conversationList = filter(_conversationList));
-    sort && (_conversationList = sort(_conversationList));
-    setFilteredAndSortedConversationList(_conversationList);
-  }, [conversationList, sort, filter]);
-
-  function onConversationListUpdated(list: IConversationModel[]) {
-    // original conversationList
-    setConversationList(list);
-    if (isLoading) {
-      setIsLoading(false);
-    }
-  }
-
-  function onCurrentConversationUpdated(conversation: IConversationModel) {
-    _setCurrentConversation(conversation);
-  }
-
-  function onNetStateChange(netState: string) {
-    if (netState === TUIChatEngine.TYPES.NET_STATE_DISCONNECTED) {
-      setIsLoadError(true);
-    } else {
-      setIsLoadError(false);
-    }
-  }
-
-  function setCurrentConversation(conversation: IConversationModel) {
-    TUIConversationService.switchConversation(conversation?.conversationID);
-  }
-
-  const value = {
-    conversationList,
-    filteredAndSortedConversationList,
-    currentConversation,
-    setCurrentConversation,
-    isLoading,
-    isLoadError,
-  };
-
-  return (
-    <ConversationListContext.Provider value={value}>
-      {children}
-    </ConversationListContext.Provider>
-  );
-}
-
-function useConversationList() {
-  const context = useContext(ConversationListContext);
-  if (!context) {
-    throw new Error('useConversationList must be used within a useConversationList');
-  }
-  return context;
-}
-
-export { useConversationList, ConversationListProvider, ConversationListContextType, ConversationListProviderProps };

package/src/context/LanguageContext.tsx

@@ -1,61 +0,0 @@
-import {
-  useState,
-  useContext,
-  createContext,
-  useLayoutEffect,
-  PropsWithChildren,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
-
-interface LanguageContextType {
-  language: string;
-  setLanguage: React.Dispatch<React.SetStateAction<string>>;
-}
-
-interface LanguageProviderProps {
-  language: string;
-}
-
-const LanguageContext = createContext<LanguageContextType | null>(null);
-
-function LanguageProvider(props: PropsWithChildren<Partial<LanguageProviderProps>>) {
-  const {
-    language: _language = 'en-US',
-    children,
-  } = props;
-
-  const { i18n } = useTranslation();
-
-  const [language, setLanguage] = useState(_language);
-
-  useLayoutEffect(() => {
-    i18n.changeLanguage(_language);
-    setLanguage(_language);
-  }, [_language, i18n]);
-
-  useLayoutEffect(() => {
-    document.documentElement.lang = _language;
-  }, [_language]);
-
-  const value = {
-    language,
-    setLanguage,
-  };
-
-  return (
-    <LanguageContext.Provider value={value}>
-      {children}
-    </LanguageContext.Provider>
-  );
-}
-
-function useLanguage() {
-  const context = useContext(LanguageContext);
-  if (!context) {
-    throw new Error('useLanguage must be used within a LanguageProvider');
-  }
-  return context;
-}
-
-export { LanguageProvider, useLanguage, LanguageContextType };

package/src/context/MessageContext.tsx

@@ -1,55 +0,0 @@
-import React, { PropsWithChildren, ReactEventHandler, useContext } from 'react';
-import { Message } from '@tencentcloud/chat';
-import { MessagePluginsProps } from '../components';
-
-export enum messageShowType {
-  IN = 'in',
-  OUT = 'out',
-  ALL = 'all',
-  NONE = 'none',
-}
-
-export interface TUIMessageContextValue {
-  message?: Message;
-  handleDelete?: ReactEventHandler;
-  CustemElement?: React.ComponentType<{ message: Message }>;
-  TextElement?: React.ComponentType<{ message: Message }>;
-  ImageElement?: React.ComponentType<{ message: Message }>;
-  VideoElement?: React.ComponentType<{ message: Message }>;
-  AudioElement?: React.ComponentType<{ message: Message }>;
-  FileElement?: React.ComponentType<{ message: Message }>;
-  MergerElement?: React.ComponentType<{ message: Message }>;
-  LocationElement?: React.ComponentType<{ message: Message }>;
-  FaceElement?: React.ComponentType<{ message: Message }>;
-  filter?: (data: Message) => void;
-  isShowTime?: boolean;
-  isShowRead?: boolean;
-  plugin?: MessagePluginsProps;
-  prefix?: React.ReactElement | string;
-  suffix?: React.ReactElement | string;
-  customName?: React.ReactElement;
-  showAvatar?: messageShowType;
-  showName?: messageShowType;
-  customAvatar?: React.ReactElement;
-  isShowProgress?: boolean;
-  Progress?: React.ComponentType<{ message: Message }>;
-}
-
-export const TUIMessageContext = React.createContext<TUIMessageContextValue>({});
-export function TUIMessageContextProvider({ children, value }: PropsWithChildren<{
-  value: TUIMessageContextValue;
-}>): React.ReactElement {
-  return (
-    <TUIMessageContext.Provider value={value}>
-      {children}
-    </TUIMessageContext.Provider>
-  );
-}
-
-export function useTUIMessageContext(componentName?: string): TUIMessageContextValue {
-  const contextValue = useContext(TUIMessageContext);
-  if (!contextValue && componentName) {
-    return {} as TUIMessageContextValue;
-  }
-  return (contextValue as unknown) as TUIMessageContextValue;
-}