@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/src/components/TUIChat/TUIChat.tsx

@@ -9,8 +9,8 @@ import TUIChatEngine, {
   TUIStore,
   StoreName,
 } from '@tencentcloud/chat-uikit-engine';
-import { JSONStringToParse } from '../untils';
-import { useTUIKitContext } from '../../context/TUIKitContext';
+import { JSONStringToParse } from '../utils';
+import { useUIKit, useUIManager } from '../../context';
 import { TUIChatStateContextProvider } from '../../context/TUIChatStateContext';
 import { TUIChatActionProvider } from '../../context/TUIChatActionContext';
 import { ComponentProvider, UnknowPorps } from '../../context/ComponentContext';
@@ -39,47 +39,49 @@ import { TUIMessageInput as TUIMessageInputElement, TUIMessageInputBasicProps }
 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 UnMemoizedTUIChat<T extends TUIChatProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     conversation: propsConversation,
     EmptyPlaceholder = <EmptyStateIndicator listType="chat" />,
   } = props;
 
-  const { conversation: contextConversation, chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit();
+  const { conversation: contextConversation } = useUIManager('TUIChat');
 
   const conversation = propsConversation || contextConversation;
 
@@ -95,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,
@@ -121,6 +123,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     cloudCustomData,
     TUIMessageInputConfig,
     TUIMessageListConfig,
+    callButtonClicked,
   } = props;
 
   const [state, dispatch] = useReducer<any>(chatReducer, {
@@ -162,7 +165,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
     setHighlightedMessageId,
     setActiveMessageID,
   } = useHandleMessage({
-    // eslint-disable-next-line 
+    // eslint-disable-next-line
     // @ts-ignore
     state,
     dispatch,
@@ -182,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({
@@ -222,7 +225,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       });
     }
   };
-      // eslint-disable-next-line
+  // eslint-disable-next-line
       // @ts-ignore
   const chatActionContextValue: TUIChatActionContextValue = useMemo(
     () => ({
@@ -236,6 +239,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       setActiveMessageID,
       updateUploadPendingMessageList,
       setFirstSendMessage,
+      callButtonClicked,
     }),
     [
       editLocalMessage,
@@ -248,6 +252,7 @@ function TUIChatInner <T extends TUIChatInnerProps>(
       setActiveMessageID,
       updateUploadPendingMessageList,
       setFirstSendMessage,
+      callButtonClicked,
     ],
   );
 
@@ -268,7 +273,7 @@ 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}>

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 { useTUIKitContext } 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 { setActiveContact } = useTUIKitContext('TUIContact');
+  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,58 +64,95 @@ 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('');
     setActiveContact();
   };
-  const { setTUIManageShow } = useTUIKitContext();
+  const { setTUIManageShow } = useUIManager();
   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} />;
 }