@tencentcloud/chat-uikit-react 2.2.6 → 2.2.7

package/src/components/TUIChat/TUIChatState.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/index.ts

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

package/src/components/TUIChat/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/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/TUIChat/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

@@ -8,29 +8,31 @@ 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 || TUIChatHeaderDefault;
   const conversation = propsConversation || contextConversation;
 
   return (
@@ -39,6 +41,7 @@ function UnMemoizedTUIChatHeader<T extends TUIChatHeaderProps>(
       conversation={conversation}
       avatar={avatar}
       opateIcon={headerOpateIcon}
+      enableCall={enableCall}
     />
   );
 }

package/src/components/TUIChatHeader/TUIChatHeaderDefault.tsx

@@ -1,29 +1,32 @@
 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 '../untils';
+import { handleDisplayAvatar } from '../utils';
 import { isH5 } from '../../utils/env';
 import './styles/index.scss';
 import { Icon, IconTypes } from '../Icon';
-import { useUIManager } from '../../context';
+import { useUIManager, useTUIChatActionContext } from '../../context';
+import { startCall } from '../TUIChat/utils';
 
 export interface TUIChatHeaderDefaultProps {
-  title?: string,
-  avatar?: React.ReactElement | string,
-  isOnline?: boolean,
-  conversation?: Conversation,
-  pluginComponentList?: Array<React.ComponentType>,
+  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,
+  isLive?: boolean;
+  opateIcon?: React.ReactElement | string;
 }
 
-function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
+function TUIChatHeaderDefaultWithContext<T extends TUIChatHeaderBasicProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     title: propTitle = '',
     avatar: propAvatar,
@@ -31,11 +34,13 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     conversation,
     isLive,
     opateIcon,
+    enableCall: propCallEnabled = false,
   } = props;
+  const { callButtonClicked } = useTUIChatActionContext('TUIChat');
   const { setActiveContact } = useUIManager('TUIContact');
   const [title, setTitle] = useState(propTitle);
   const [avatar, setAvatar] = useState<React.ReactElement | string>('');
-
+  const [isShowCallIcon, setIsShowCallIcon] = useState<boolean>(false);
   useEffect(() => {
     setTitle(propTitle);
     if (propAvatar) {
@@ -44,6 +49,8 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     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);
@@ -57,26 +64,28 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
     }
   }, [conversation]);
 
-  const handleC2C = (userProfile: Profile, remark?: string) => {
+  function handleC2C(userProfile: Profile, remark?: string) {
     if (!title) {
       setTitle(remark || userProfile?.nick || userProfile?.userID);
     }
     if (!propAvatar) {
       setAvatar(<Avatar size={32} image={handleDisplayAvatar(userProfile.avatar)} />);
     }
-  };
+  }
 
-  const handleGroup = (groupProfile: Group) => {
+  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)}
-      />);
+      setAvatar(
+        <Avatar
+          size={32}
+          image={handleDisplayAvatar(groupProfile.avatar, TencentCloudChat.TYPES.CONV_GROUP)}
+        />,
+      );
     }
-  };
+  }
 
   const back = () => {
     TUIConversationService.switchConversation('');
@@ -86,29 +95,64 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
   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>)}
+      {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' : ''}`}
+        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} />
-          }
+          {opateIcon || (
+            <Icon
+              className="header-handle-more"
+              onClick={openTUIManage}
+              type={IconTypes.ELLIPSE}
+              width={18}
+              height={5}
+            />
+          )}
         </div>
       </div>
-
     </header>
   );
 }
@@ -116,8 +160,7 @@ function TUIChatHeaderDefaultWithContext <T extends TUIChatHeaderBasicProps>(
 const MemoizedTUIChatHeaderDefault = React.memo(TUIChatHeaderDefaultWithContext) as
 typeof TUIChatHeaderDefaultWithContext;
 
-export function TUIChatHeaderDefault(props: TUIChatHeaderBasicProps)
-:React.ReactElement {
+export function TUIChatHeaderDefault(props: TUIChatHeaderBasicProps): React.ReactElement {
   const options = { ...props };
   return <MemoizedTUIChatHeaderDefault {...options} />;
 }

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

@@ -8,40 +8,47 @@
   align-items: center;
 
   @include theme() {
-    background-color: get(bg-primary);
+    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;
+    }
+  }
+
   &-right {
     .header-handle {
       &-more {
-       padding: 10px 3px;
+        padding: 10px 3px;
       }
     }
   }
+
   .title {
-    font-family: PingFangSC-Medium;
     font-style: normal;
     font-weight: 700;
     font-size: 14px;
 
     @include theme() {
-      color: get(text-primary);
+      color: get(text-color-primary);
     }
-
   }
+
   .system {
     height: 32px;
   }
 }
-
-.tui-chat-live-header {
-
-}