@tencentcloud/chat-uikit-react 2.3.1 → 3.0.0

package/src/components/Chat/ChatState.tsx

@@ -1,129 +0,0 @@
-import type { Reducer } from 'react';
-import { Conversation, Message } from '@tencentcloud/chat';
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-import { CONSTANT_DISPATCH_TYPE } from '../../constants';
-import type { TUIChatStateContextValue } from '../../context';
-import { OperateMessageParams } from './hooks/useHandleMessage';
-import {
-  handleEditMessage,
-  handleUploadPendingMessage,
-} from './utils';
-
-export type ChatStateReducerAction =
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE;
-    value?: Conversation;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST;
-    value?: IMessageModel[];
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE;
-    value?: Message;
-    index?: number;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE;
-    value?: boolean;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.RESET;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID;
-    value?: string;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE;
-    value?: OperateMessageParams;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE;
-    value?: boolean;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE;
-    value?: HTMLAudioElement | null;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE;
-    value?: HTMLVideoElement | null;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST;
-    value?: Message;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE;
-    value?: Message;
-  }
-  | {
-    type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID;
-    value?: string;
-  };
-export type ChatStateReducer = Reducer<TUIChatStateContextValue, ChatStateReducerAction>;
-
-export const chatReducer = (
-  state: TUIChatStateContextValue,
-  action: ChatStateReducerAction,
-) => {
-  switch (action?.type) {
-    case CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE:
-      return { ...state, conversation: action.value };
-    // messageList set
-    case CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST:
-      return {
-        ...state,
-        messageList: action.value,
-      };
-    case CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE:
-      return state.messageList && action.value && {
-        ...state,
-        messageList: [...handleEditMessage(state.messageList, action.value)],
-      };
-    case CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE:
-      return { ...state, isCompleted: action.value };
-    case CONSTANT_DISPATCH_TYPE.RESET:
-      return { ...initialState };
-    case CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID:
-      return { ...state, highlightedMessageId: action.value };
-    case CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE:
-      return { ...state, operateData: { ...action.value } };
-    case CONSTANT_DISPATCH_TYPE.SET_NO_MORE:
-      return { ...state, noMore: action.value };
-    case CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE:
-      return { ...state, audioSource: action.value };
-    case CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE:
-      return { ...state, vidoeSource: action.value };
-    case CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST:
-      return state?.uploadPendingMessageList && action.value && {
-        ...state,
-        uploadPendingMessageList: [
-          ...handleUploadPendingMessage(state.uploadPendingMessageList, action.value),
-        ],
-      };
-    case CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE:
-      return { ...state, firstSendMessage: action.value };
-    case CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID:
-      return { ...state, activeMessageID: action.value };
-  }
-};
-
-export const initialState: TUIChatStateContextValue = {
-  conversation: {} as Conversation,
-  messageList: [],
-  nextReqMessageID: '',
-  isCompleted: false,
-  init: false,
-  highlightedMessageId: '',
-  lastMessageID: '',
-  isSameLastMessageID: false,
-  operateData: {},
-  noMore: false,
-  audioSource: null,
-  vidoeSource: null,
-  uploadPendingMessageList: [],
-  firstSendMessage: null,
-  activeMessageID: '',
-};

package/src/components/Chat/hooks/useCreateTUIChatStateContext.tsx

@@ -1,46 +0,0 @@
-import { useMemo } from 'react';
-import { ChatSDK } from '@tencentcloud/chat';
-import { TUIChatStateContextValue } from '../../../context';
-
-interface CreateTUIChatStateContextProp extends TUIChatStateContextValue {
-  chat?: ChatSDK,
-}
-
-function useCreateTUIChatStateContext(props:CreateTUIChatStateContextProp) {
-  const {
-    chat,
-    conversation,
-    messageList,
-    messageListRef,
-    messageConfig,
-    cloudCustomData,
-    TUIMessageInputConfig,
-    TUIMessageListConfig,
-    ...state
-  } = props;
-  const TUIChatStateContext = useMemo(() => ({
-    chat,
-    conversation,
-    messageList,
-    messageListRef,
-    messageConfig,
-    cloudCustomData,
-    TUIMessageInputConfig,
-    TUIMessageListConfig,
-    ...state,
-  }), [
-    chat,
-    conversation,
-    messageList,
-    messageListRef,
-    messageConfig,
-    cloudCustomData,
-    TUIMessageInputConfig,
-    TUIMessageListConfig,
-    state,
-  ]);
-
-  return TUIChatStateContext;
-}
-
-export default useCreateTUIChatStateContext;

package/src/components/Chat/hooks/useHandleMessage.tsx

@@ -1,65 +0,0 @@
-import { Dispatch, useCallback } from 'react';
-import { ChatSDK, Conversation, Message } from '@tencentcloud/chat';
-import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
-import type { TUIChatStateContextValue } from '../../../context';
-import type { ChatStateReducerAction } from '../ChatState';
-
-export interface CreateMessageProps {
-  chat?: ChatSDK,
-  conversation?: Conversation,
-  state?: TUIChatStateContextValue,
-  dispatch?: Dispatch<ChatStateReducerAction>,
-}
-export interface OperateMessageParams {
-  [propName: string]: Message,
-}
-
-export function useHandleMessage<T extends CreateMessageProps>(props:T) {
-  const {
-    state,
-    dispatch,
-  } = props;
-
-  const operateMessage = useCallback((data: OperateMessageParams) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE,
-      value: data,
-    });
-  }, [dispatch]);
-
-  const setAudioSource = useCallback((data: HTMLAudioElement | null) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE,
-      value: data,
-    });
-  }, [dispatch]);
-
-  const setVideoSource = useCallback((data: HTMLVideoElement | null) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE,
-      value: data,
-    });
-  }, [dispatch]);
-
-  const setHighlightedMessageId = useCallback((highlightedMessageId: string) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID,
-      value: highlightedMessageId,
-    });
-  }, [dispatch]);
-
-  const setActiveMessageID = useCallback((messageID: string) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID,
-      value: messageID,
-    });
-  }, [dispatch]);
-
-  return {
-    operateMessage,
-    setAudioSource,
-    setVideoSource,
-    setHighlightedMessageId,
-    setActiveMessageID,
-  };
-}

package/src/components/Chat/hooks/useHandleMessageList.tsx

@@ -1,47 +0,0 @@
-import { Dispatch, useCallback } from 'react';
-import TencentCloudChat, { ChatSDK, Conversation, Message } from '@tencentcloud/chat';
-import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
-import type { TUIChatStateContextValue } from '../../../context';
-import type { ChatStateReducerAction } from '../ChatState';
-
-export interface CreateMessageProps {
-  chat?: ChatSDK,
-  conversation?: Conversation,
-  state?: TUIChatStateContextValue,
-  dispatch?: Dispatch<ChatStateReducerAction>,
-  filterMessage: any
-}
-
-export interface GetMessageListProps{
-  nextReqMessageID?: string,
-  count?: number,
-}
-
-export function useHandleMessageList<T extends CreateMessageProps>(props:T) {
-  const {
-    chat,
-    conversation,
-    state,
-    dispatch,
-    filterMessage,
-  } = props;
-
-  const editLocalMessage = useCallback((message: Message) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE,
-      value: message,
-    });
-  }, [dispatch]);
-
-  const updateUploadPendingMessageList = useCallback((message: Message) => {
-    dispatch && dispatch({
-      type: CONSTANT_DISPATCH_TYPE.UPDATE_UPLOAD_PENDING_MESSAGE_LIST,
-      value: message,
-    });
-  }, [dispatch]);
-
-  return {
-    editLocalMessage,
-    updateUploadPendingMessageList,
-  };
-}

package/src/components/Chat/hooks/useIsMounted.ts

@@ -1,14 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export const useIsMounted = () => {
-  const isMounted = useRef(false);
-
-  useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return isMounted;
-};

package/src/components/Chat/server.ts

@@ -1,44 +0,0 @@
-import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import {
-  IMessageModel,
-  TUIStore,
-  StoreName,
-  TUIChatService,
-} from '@tencentcloud/chat-uikit-engine';
-
-export default class TUIChatServer {
-  public currentConversationID = '';
-  public currentMessageList: IMessageModel[] = [];
-
-  constructor() {
-    // register service
-    TUICore.registerService(TUIConstants.TUIChat.SERVICE.NAME, this);
-    // watch current conversationID
-    TUIStore.watch(StoreName.CONV, {
-      currentConversationID: (id: string) => {
-        this.currentConversationID = id;
-      },
-    });
-  }
-
-  public onCall(method: string, params: Record<string, any>, callback: void): any {
-    let message;
-    switch (method) {
-      case TUIConstants.TUIChat.SERVICE.METHOD.UPDATE_MESSAGE_LIST:
-        message = params.message;
-        // Two screen-up situations
-        // 1. If the call message conversationID is currentConversation,
-        // You need to use UPDATE_MESSAGE_LIST to update the messageList of TUIStore in the engine to display it on the screen
-        // (because you cannot get the messages you sent at this time)
-        // 2. If the call message conversationID is not currentConversation,
-        // The next time you switch to the conversation where the call message is located, getMessageList can get all the call messages you sent
-        // No need to process here
-        if (message?.conversationID === this.currentConversationID) {
-          TUIChatService.updateMessageList([message], 'push');
-        }
-        break;
-      default:
-        break;
-    }
-  }
-}

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

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

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

@@ -1,15 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.chat {
-  flex: 1;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-}

package/src/components/Chat/utils.ts

@@ -1,72 +0,0 @@
-import TencentCloudChat, { Message, Conversation } from '@tencentcloud/chat';
-import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { useTUIChatActionContext } from '../../context';
-import constant from '../../constants';
-import { JSONStringToParse } from '../utils';
-
-export const handleMessage = (messageList: Message[]): 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: Message[],
-  message: Message,
-) => {
-  const list = [...messageList];
-  const index = list.findIndex(item => item?.ID === message?.ID);
-  list[index] = message;
-  return list;
-};
-
-export const handleUploadPendingMessage = (
-  messageList: 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;
-};
-
-interface IStartCallParams {
-  callType: any;
-  callMediaType: number;
-  userIDList: string[];
-  callButtonClicked?: (callMediaType?: number, callType?: any) => void;
-}
-export const startCall = (params: IStartCallParams) => {
-  const { callType, callMediaType, userIDList, callButtonClicked } = params;
-  if (callType === TUIChatEngine.TYPES.CONV_C2C) {
-    callButtonClicked && callButtonClicked(callMediaType, callType);
-    TUICore.callService({
-      serviceName: TUIConstants.TUICalling.SERVICE.NAME,
-      method: TUIConstants.TUICalling.SERVICE.METHOD.START_CALL,
-      params: {
-        userIDList,
-        type: callMediaType,
-        callParams: {
-          // doc: https://cloud.tencent.com/document/product/269/105713
-          offlinePushInfo: {
-            title: 'call',
-            description: 'you have a call',
-            androidSound: 'private_ring',
-            iOSSound: '01.caf',
-          },
-        },
-      },
-    });
-  }
-};

package/src/components/ChatHeader/ChatHeaderDefault.tsx

@@ -1,167 +0,0 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
-import TencentCloudChat, { Conversation, Group, Profile } from '@tencentcloud/chat';
-import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { Avatar } from '../Avatar';
-import { handleDisplayAvatar } from '../utils';
-import { isH5 } from '../../utils/env';
-import './styles/index.scss';
-import { Icon, IconTypes } from '../Icon';
-import { useTUIChatActionContext } from '../../context';
-import { useUIManagerStore } from '../../store';
-import { startCall } from '../Chat/utils';
-
-export interface TUIChatHeaderDefaultProps {
-  title?: string;
-  avatar?: React.ReactElement | string;
-  isOnline?: boolean;
-  conversation?: Conversation;
-  pluginComponentList?: React.ComponentType[];
-  enableCall?: boolean;
-}
-
-export interface TUIChatHeaderBasicProps extends TUIChatHeaderDefaultProps {
-  isLive?: boolean;
-  opateIcon?: React.ReactElement | string;
-}
-
-function TUIChatHeaderDefaultWithContext<T extends TUIChatHeaderBasicProps>(
-  props: PropsWithChildren<T>,
-): React.ReactElement {
-  const {
-    title: propTitle = '',
-    avatar: propAvatar,
-    isOnline,
-    conversation,
-    isLive,
-    opateIcon,
-    enableCall: propCallEnabled = false,
-  } = props;
-  const { callButtonClicked } = useTUIChatActionContext('TUIChat');
-  const { setActiveContact } = useUIManagerStore('TUIContact');
-  const [title, setTitle] = useState(propTitle);
-  const [avatar, setAvatar] = useState<React.ReactElement | string>('');
-  const [isShowCallIcon, setIsShowCallIcon] = useState<boolean>(false);
-  useEffect(() => {
-    setTitle(propTitle);
-    if (propAvatar) {
-      setAvatar(propAvatar);
-    }
-    switch (conversation?.type) {
-      case TencentCloudChat.TYPES.CONV_C2C:
-        handleC2C(conversation.userProfile, conversation?.remark);
-        const isCalling = TUICore.getService(TUIConstants.TUICalling.SERVICE.NAME) ? true : false;
-        setIsShowCallIcon(isCalling && propCallEnabled);
-        break;
-      case TencentCloudChat.TYPES.CONV_GROUP:
-        handleGroup(conversation.groupProfile);
-        break;
-      case TencentCloudChat.TYPES.CONV_SYSTEM:
-        setTitle('System Notice');
-        break;
-      default:
-        setTitle('');
-        break;
-    }
-  }, [conversation]);
-
-  function handleC2C(userProfile: Profile, remark?: string) {
-    if (!title) {
-      setTitle(remark || userProfile?.nick || userProfile?.userID);
-    }
-    if (!propAvatar) {
-      setAvatar(<Avatar size={32} image={handleDisplayAvatar(userProfile.avatar)} />);
-    }
-  }
-
-  function handleGroup(groupProfile: Group) {
-    if (!title) {
-      setTitle(groupProfile?.name || groupProfile?.groupID);
-    }
-    if (!propAvatar) {
-      setAvatar(
-        <Avatar
-          size={32}
-          image={handleDisplayAvatar(groupProfile.avatar, TencentCloudChat.TYPES.CONV_GROUP)}
-        />,
-      );
-    }
-  }
-
-  const back = () => {
-    TUIConversationService.switchConversation('');
-    setActiveContact();
-  };
-  const { setTUIManageShow } = useUIManagerStore();
-  const openTUIManage = () => {
-    setTUIManageShow && setTUIManageShow(true);
-  };
-  const handleCall = (callMediaType: number) => {
-    const userID = conversation?.userProfile?.userID || '';
-    const callType = conversation?.type || TencentCloudChat.TYPES.CONV_C2C;
-    startCall({ callType, callMediaType, userIDList: [userID], callButtonClicked });
-  };
-  return (
-    <header
-      className={`tui-chat-header ${isLive ? 'tui-chat-live-header' : ''}`}
-      key={conversation?.conversationID}
-    >
-      {isH5 && (
-        <div style={{ paddingRight: '10px' }}>
-          <Icon onClick={back} type={IconTypes.BACK} width={9} height={16} />
-        </div>
-      )}
-      <div
-        className={`tui-chat-header-left ${
-          conversation?.type === TencentCloudChat.TYPES.CONV_SYSTEM
-            ? 'system'
-            : ''
-        }`}
-      >
-        {conversation?.type !== TencentCloudChat.TYPES.CONV_SYSTEM && avatar}
-      </div>
-      <div className="header-content">
-        <h3 className="title">{title}</h3>
-      </div>
-      {isShowCallIcon && (
-        <div className="call-btn-container">
-          <Icon
-            className="call-btn"
-            onClick={() =>
-              handleCall(2)}
-            type={IconTypes.VIDEOCALL}
-            width={24}
-          />
-          <Icon
-            className="call-btn"
-            onClick={() =>
-              handleCall(1)}
-            type={IconTypes.VOICECALL}
-            width={20}
-          />
-        </div>
-      )}
-      <div className="tui-chat-header-right">
-        <div className="header-handle">
-          {opateIcon || (
-            <Icon
-              className="header-handle-more"
-              onClick={openTUIManage}
-              type={IconTypes.ELLIPSE}
-              width={18}
-              height={5}
-            />
-          )}
-        </div>
-      </div>
-    </header>
-  );
-}
-
-const MemoizedTUIChatHeaderDefault = React.memo(TUIChatHeaderDefaultWithContext) as
-typeof TUIChatHeaderDefaultWithContext;
-
-export function ChatHeaderDefault(props: TUIChatHeaderBasicProps): React.ReactElement {
-  const options = { ...props };
-  return <MemoizedTUIChatHeaderDefault {...options} />;
-}

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

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

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

@@ -1,46 +0,0 @@
-@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
-
-.tui-chat-header {
-  padding: 16px 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  @include theme() {
-    background-color: get(bg-color-operate);
-  }
-
-  &-left {
-    display: flex;
-    align-items: center;
-  }
-
-  .header-content {
-    flex: 1;
-    padding: 0 8px;
-  }
-
-  .call-btn-container {
-    display: flex;
-    margin-right: 10px;
-
-    .call-btn {
-      margin-right: 16px;
-    }
-  }
-
-  .title {
-    font-style: normal;
-    font-weight: 700;
-    font-size: 14px;
-
-    @include theme() {
-      color: get(text-color-primary);
-    }
-  }
-
-  .system {
-    height: 32px;
-  }
-}