@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIChat/TUIChat.tsx → Chat/Chat.tsx}

@@ -9,71 +9,72 @@ import TUIChatEngine, {
   TUIStore,
   StoreName,
 } from '@tencentcloud/chat-uikit-engine';
-import { JSONStringToParse } from '../untils';
+import { JSONStringToParse } from '../utils';
 import { useUIKit, useUIManager } from '../../context';
-import { TUIChatStateContextProvider } from '../../context/TUIChatStateContext';
-import { TUIChatActionProvider } from '../../context/TUIChatActionContext';
+import { TUIChatStateContextProvider } from '../../context/ChatStateContext';
+import { TUIChatActionProvider } from '../../context/ChatActionContext';
 import { ComponentProvider, UnknowPorps } from '../../context/ComponentContext';
-import type { TUIChatActionContextValue } from '../../context/TUIChatActionContext';
+import type { TUIChatActionContextValue } from '../../context/ChatActionContext';
 import type { ComponentContextValue } from '../../context/ComponentContext';
 import useCreateTUIChatStateContext from './hooks/useCreateTUIChatStateContext';
 
-import type { TUIChatHeaderDefaultProps } from '../TUIChatHeader/TUIChatHeaderDefault';
+import type { TUIChatHeaderDefaultProps } from '../ChatHeader/ChatHeaderDefault';
 
 import {
   TUIMessageProps,
   TUIMessage as TUIMessageDefault,
-} from '../TUIMessage';
-import type { MessageContextProps } from '../TUIMessage/MessageContext';
+} from '../MessageElement';
+import type { MessageContextProps } from '../MessageElement/MessageContext';
 
 import './styles/index.scss';
 import { CONSTANT_DISPATCH_TYPE } from '../../constants';
-import { chatReducer, ChatStateReducer, initialState } from './TUIChatState';
+import { chatReducer, ChatStateReducer, initialState } from './ChatState';
 
 import { useHandleMessageList } from './hooks/useHandleMessageList';
 import { useHandleMessage } from './hooks/useHandleMessage';
 
-import { TUIChatHeader as TUIChatHeaderElement } from '../TUIChatHeader';
-import { MessageListProps, TUIMessageList } from '../TUIMessageList';
-import { TUIMessageInput as TUIMessageInputElement, TUIMessageInputBasicProps } from '../TUIMessageInput';
+import { ChatHeader as ChatHeaderElement } from '../ChatHeader';
+import { MessageListProps, MessageList } from '../MessageList';
+import { MessageInput as MessageInputElement, TUIMessageInputBasicProps } from '../MessageInput';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 
 interface TUIChatProps {
-  className?: string,
-  conversation?: Conversation,
-  EmptyPlaceholder?: React.ReactElement,
-  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>,
-  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
-  MessageContext?: React.ComponentType<MessageContextProps>,
-  TUIMessageInput?: React.ComponentType<UnknowPorps>,
-  InputPlugins?: React.ComponentType<UnknowPorps>,
-  InputQuote?: React.ComponentType<UnknowPorps>,
-  MessagePlugins?: React.ComponentType<UnknowPorps>,
-  MessageCustomPlugins?: React.ComponentType<UnknowPorps>,
-  MessageTextPlugins?: React.ComponentType<UnknowPorps>,
+  className?: string;
+  conversation?: Conversation;
+  EmptyPlaceholder?: React.ReactElement;
+  TUIMessage?: React.ComponentType<TUIMessageProps | UnknowPorps>;
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>;
+  MessageContext?: React.ComponentType<MessageContextProps>;
+  TUIMessageInput?: React.ComponentType<UnknowPorps>;
+  InputPlugins?: React.ComponentType<UnknowPorps>;
+  InputQuote?: React.ComponentType<UnknowPorps>;
+  MessagePlugins?: React.ComponentType<UnknowPorps>;
+  MessageCustomPlugins?: React.ComponentType<UnknowPorps>;
+  MessageTextPlugins?: React.ComponentType<UnknowPorps>;
   onMessageRecevied?: (
-    updateMessage: (event?: Array<Message>) => void,
+    updateMessage: (event?: Message[]) => void,
     event: any,
-  ) => void,
-  sendMessage?: (message:Message, options?:any) => Promise<Message>,
-  revokeMessage?: (message:Message) => Promise<Message>,
-  selectedConversation?: (conversation:Conversation) => Promise<Conversation>,
-  filterMessage?: (messageList: Array<IMessageModel>) => Array<IMessageModel>,
-  messageConfig?: TUIMessageProps,
-  cloudCustomData?: string,
-  TUIMessageInputConfig?: TUIMessageInputBasicProps,
-  TUIMessageListConfig?: MessageListProps,
-  [propName: string]: any,
+  ) => void;
+  sendMessage?: (message: Message, options?: any) => Promise<Message>;
+  revokeMessage?: (message: Message) => Promise<Message>;
+  selectedConversation?: (conversation: Conversation) => Promise<Conversation>;
+  filterMessage?: (messageList: IMessageModel[]) => IMessageModel[];
+  callButtonClicked?: (callMediaType?: number, callType?: any) => void;
+  messageConfig?: TUIMessageProps;
+  cloudCustomData?: string;
+  TUIMessageInputConfig?: TUIMessageInputBasicProps;
+  TUIMessageListConfig?: MessageListProps;
+  [propName: string]: any;
 }
 
 interface TUIChatInnerProps extends TUIChatProps {
-  chat?: ChatSDK,
+  chat?: ChatSDK;
   key?: string;
 }
 
-function UnMemoizedTUIChat <T extends TUIChatProps>(
+function UnMemoizedChat<T extends TUIChatProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     conversation: propsConversation,
     EmptyPlaceholder = <EmptyStateIndicator listType="chat" />,
@@ -96,9 +97,9 @@ function UnMemoizedTUIChat <T extends TUIChatProps>(
   );
 }
 
-function TUIChatInner <T extends TUIChatInnerProps>(
+function TUIChatInner<T extends TUIChatInnerProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     chat,
     conversation,
@@ -122,6 +123,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     cloudCustomData,
     TUIMessageInputConfig,
     TUIMessageListConfig,
+    callButtonClicked,
   } = props;
 
   const [state, dispatch] = useReducer<any>(chatReducer, {
@@ -183,7 +185,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   }, []);
 
   const onMessageListUpdated = (list: IMessageModel[]) => {
-    const messageList = list.filter((message) => !message.isDeleted);
+    const messageList = list.filter(message => !message.isDeleted);
     // eslint-disable-next-line
       // @ts-ignore
     dispatch({
@@ -223,7 +225,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       });
     }
   };
-      // eslint-disable-next-line
+  // eslint-disable-next-line
       // @ts-ignore
   const chatActionContextValue: TUIChatActionContextValue = useMemo(
     () => ({
@@ -237,6 +239,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       setActiveMessageID,
       updateUploadPendingMessageList,
       setFirstSendMessage,
+      callButtonClicked,
     }),
     [
       editLocalMessage,
@@ -249,6 +252,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       setActiveMessageID,
       updateUploadPendingMessageList,
       setFirstSendMessage,
+      callButtonClicked,
     ],
   );
 
@@ -269,16 +273,16 @@ function TUIChatInner <T extends TUIChatInnerProps>(
 
   return (
     <div className={`chat ${className}`}>
-            {/* // eslint-disable-next-line
+      {/* // eslint-disable-next-line
       // @ts-ignore */}
       <TUIChatStateContextProvider value={chatStateContextValue}>
         <TUIChatActionProvider value={chatActionContextValue}>
           <ComponentProvider value={componentContextValue}>
             {children || (
               <>
-                <TUIChatHeaderElement />
-                <TUIMessageList />
-                <TUIMessageInputElement />
+                <ChatHeaderElement />
+                <MessageList />
+                <MessageInputElement />
               </>
             )}
           </ComponentProvider>
@@ -288,4 +292,4 @@ function TUIChatInner <T extends TUIChatInnerProps>(
   );
 }
 
-export const TUIChat = React.memo(UnMemoizedTUIChat) as typeof UnMemoizedTUIChat;
+export const Chat = React.memo(UnMemoizedChat) as typeof UnMemoizedChat;

package/src/components/{TUIChat/TUIChatState.tsx → Chat/ChatState.tsx}

@@ -7,61 +7,61 @@ import { OperateMessageParams } from './hooks/useHandleMessage';
 import {
   handleEditMessage,
   handleUploadPendingMessage,
-} from './unitls';
+} from './utils';
 
 export type ChatStateReducerAction =
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE;
-      value?: Conversation
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_CONVERSATION_PRPFILE;
+    value?: Conversation;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST,
-      value?: Array<IMessageModel>,
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_MESSAGELIST;
+    value?: IMessageModel[];
+  }
   | {
-    type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE,
-    value?: Message,
-    index?: number,
+    type: CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE;
+    value?: Message;
+    index?: number;
   }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE,
-      value?: boolean,
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_IS_COMPLETE;
+    value?: boolean;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.RESET;
-    }
+    type: CONSTANT_DISPATCH_TYPE.RESET;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID,
-      value?: string,
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_HIGH_LIGHTED_MESSAGE_ID;
+    value?: string;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE,
-      value?: OperateMessageParams,
-    }
+    type: CONSTANT_DISPATCH_TYPE.OPERATE_MESSAGE;
+    value?: OperateMessageParams;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE,
-      value?: boolean,
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_NO_MORE;
+    value?: boolean;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE,
-      value?: HTMLAudioElement | null,
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_AUDIO_SOURCE;
+    value?: HTMLAudioElement | null;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_VIDEO_SOURCE,
-      value?: HTMLVideoElement | 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.UPDATE_UPLOAD_PENDING_MESSAGE_LIST;
+    value?: Message;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE;
-      value?: Message;
-    }
+    type: CONSTANT_DISPATCH_TYPE.SET_FIRST_SEND_MESSAGE;
+    value?: Message;
+  }
   | {
-      type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID,
-      value?: string,
-   };
+    type: CONSTANT_DISPATCH_TYPE.SET_ACTIVE_MESSAGE_ID;
+    value?: string;
+  };
 export type ChatStateReducer = Reducer<TUIChatStateContextValue, ChatStateReducerAction>;
 
 export const chatReducer = (
@@ -78,7 +78,7 @@ export const chatReducer = (
         messageList: action.value,
       };
     case CONSTANT_DISPATCH_TYPE.SET_EDIT_MESSAGE:
-      return state.messageList &&  action.value && {
+      return state.messageList && action.value && {
         ...state,
         messageList: [...handleEditMessage(state.messageList, action.value)],
       };
@@ -110,7 +110,7 @@ export const chatReducer = (
   }
 };
 
-export const initialState:TUIChatStateContextValue = {
+export const initialState: TUIChatStateContextValue = {
   conversation: {} as Conversation,
   messageList: [],
   nextReqMessageID: '',

package/src/components/{TUIChat → Chat}/hooks/useHandleMessage.tsx

@@ -2,7 +2,7 @@ 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 '../TUIChatState';
+import type { ChatStateReducerAction } from '../ChatState';
 
 export interface CreateMessageProps {
   chat?: ChatSDK,

package/src/components/{TUIChat → Chat}/hooks/useHandleMessageList.tsx

@@ -2,7 +2,7 @@ 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 '../TUIChatState';
+import type { ChatStateReducerAction } from '../ChatState';
 
 export interface CreateMessageProps {
   chat?: ChatSDK,

package/src/components/Chat/index.ts

@@ -0,0 +1,5 @@
+import Server from './server';
+
+new Server();
+export * from './Chat';
+export * from './hooks/useCreateTUIChatStateContext';

package/src/components/Chat/server.ts

@@ -0,0 +1,44 @@
+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/{TUIChat → Chat}/styles/layout.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .chat {
   flex: 1;
   width: 100%;
@@ -6,5 +8,8 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  background: #FFFFFF;
-}
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+}

package/src/components/Chat/utils.ts

@@ -0,0 +1,72 @@
+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/{TUIChatHeader/TUIChatHeader.tsx → ChatHeader/ChatHeader.tsx}

@@ -1,36 +1,38 @@
 import React, { PropsWithChildren } from 'react';
 import { Conversation } from '@tencentcloud/chat';
-import { useTUIChatStateContext } from '../../context/TUIChatStateContext';
-import type { TUIChatHeaderDefaultProps } from './TUIChatHeaderDefault';
-import { TUIChatHeaderDefault } from './TUIChatHeaderDefault';
+import { useTUIChatStateContext } from '../../context/ChatStateContext';
+import type { TUIChatHeaderDefaultProps } from './ChatHeaderDefault';
+import { ChatHeaderDefault } from './ChatHeaderDefault';
 
 import './styles/index.scss';
 import { useComponentContext } from '../../context';
 
 interface TUIChatHeaderProps {
-  title?: string,
-  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>,
-  conversation?: Conversation,
-  avatar?: React.ReactElement | string,
-  headerOpateIcon?: React.ReactElement | string,
+  title?: string;
+  TUIChatHeader?: React.ComponentType<TUIChatHeaderDefaultProps>;
+  conversation?: Conversation;
+  avatar?: React.ReactElement | string;
+  headerOpateIcon?: React.ReactElement | string;
+  enableCall?: boolean;
 }
 
 function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     title,
     conversation: propsConversation,
     TUIChatHeader: propTUIChatHeader,
     avatar,
     headerOpateIcon,
+    enableCall,
   } = props;
 
   const { conversation: contextConversation } = useTUIChatStateContext('TUIChatHeader');
   const { TUIChatHeader: ContextTUIChatHeader } = useComponentContext('TUIChatHeader');
 
   const TUIChatHeaderUIComponent = propTUIChatHeader
-  || ContextTUIChatHeader || TUIChatHeaderDefault;
+    || ContextTUIChatHeader || ChatHeaderDefault;
   const conversation = propsConversation || contextConversation;
 
   return (
@@ -39,9 +41,10 @@ function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
       conversation={conversation}
       avatar={avatar}
       opateIcon={headerOpateIcon}
+      enableCall={enableCall}
     />
   );
 }
 
-export const TUIChatHeader = React.memo(UnMemoizedTUIChatHeader) as
+export const ChatHeader = React.memo(UnMemoizedTUIChatHeader) as
 typeof UnMemoizedTUIChatHeader;