@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIMessage/TUIMessage.tsx → MessageElement/Message.tsx}

@@ -3,50 +3,50 @@ import { Message } from '@tencentcloud/chat';
 
 import { UnknowPorps, useComponentContext, useTUIChatStateContext } from '../../context';
 
-import { messageShowType, TUIMessageContextProvider } from '../../context/TUIMessageContext';
+import { messageShowType, TUIMessageContextProvider } from '../../context/MessageContext';
 import { useMessageHandler } from './hooks';
 
 import './styles/index.scss';
-import { TUIMessageDefault } from './TUIMessageDefault';
+import { TUIMessageDefault } from './MessageDefault';
 import { MessagePlugins as MessagePluginsDefault, MessagePluginsProps } from './MessagePlugins';
 import { MessageContext as MessageContextDefault } from './MessageContext';
 
 interface TUIMessageBasicProps {
-  className?: string,
-  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}>,
+  className?: string;
+  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 interface TUIMessageProps extends TUIMessageBasicProps {
-  message?: Message,
-  className?: string,
-  TUIMessage?: React.ComponentType,
-  MessageContext?: React.ComponentType<UnknowPorps>,
-  MessagePlugins?: React.ComponentType<UnknowPorps>,
-  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}>,
+  message?: Message;
+  className?: string;
+  TUIMessage?: React.ComponentType;
+  MessageContext?: React.ComponentType<UnknowPorps>;
+  MessagePlugins?: React.ComponentType<UnknowPorps>;
+  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 }>;
 }
-function TUIMessageWithContext <T extends TUIMessageProps>(
+function TUIMessageWithContext<T extends TUIMessageProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message: propsMessage,
     TUIMessage: propTUIMessage,
@@ -136,7 +136,7 @@ function TUIMessageWithContext <T extends TUIMessageProps>(
 const MemoizedTUIMessage = React.memo(TUIMessageWithContext) as
 typeof TUIMessageWithContext;
 
-export function TUIMessage(props:TUIMessageProps):React.ReactElement {
+export function TUIMessage(props: TUIMessageProps): React.ReactElement {
   const {
     message,
   } = props;

package/src/components/{TUIMessage → MessageElement}/MessageAvatar.tsx

@@ -5,18 +5,18 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_FLOW } from '../../constants';
 import { messageShowType } from '../../context';
 import { Avatar } from '../Avatar';
-import { handleDisplayAvatar } from '../untils';
+import { handleDisplayAvatar } from '../utils';
 
 export interface MessageAvatarProps {
-  CustomAvatar?: React.ReactElement,
-  className?: string,
-  message: Message,
-  showType?: messageShowType,
+  CustomAvatar?: React.ReactElement;
+  className?: string;
+  message: Message;
+  showType?: messageShowType;
 }
 
-export function MessageAvatar <T extends MessageAvatarProps>(
+export function MessageAvatar<T extends MessageAvatarProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     className,
     CustomAvatar,

package/src/components/{TUIMessage → MessageElement}/MessageBubble.tsx

@@ -6,22 +6,23 @@ import React, {
 } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { MESSAGE_STATUS } from '../../constants';
+import { isCallMessage } from './utils';
 import { useTUIChatActionContext, useTUIChatStateContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { useMessageReply } from './hooks/useMessageReply';
 import { MessageProgress } from './MessageProgress';
 
 export interface MessageBubbleProps {
-  message?: Message,
-  className?: string,
-  children?: ReactNode,
-  Context?: React.ComponentType<any>,
-  Plugins?: React.ComponentType<any> | undefined,
+  message?: Message;
+  className?: string;
+  children?: ReactNode;
+  Context?: React.ComponentType<any>;
+  Plugins?: React.ComponentType<any> | undefined;
 }
 
-function MessageBubbleWithContext <T extends MessageBubbleProps>(
+function MessageBubbleWithContext<T extends MessageBubbleProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message,
     children,
@@ -68,7 +69,7 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
   const handleReplyMessage = () => {
     // eslint-disable-next-line
     // @ts-ignore
-    setHighlightedMessageId  && setHighlightedMessageId(replyMessage?.ID);
+    setHighlightedMessageId && setHighlightedMessageId(replyMessage?.ID);
   };
 
   return (
@@ -90,15 +91,15 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         >
           {
             messageReply && (
-            <div
-              className="meesage-bubble-reply-main"
-              role="menuitem"
-              tabIndex={0}
-              onClick={handleReplyMessage}
-            >
-              <header className="title">{sender}</header>
-              {Context && <Context message={replyMessage} />}
-            </div>
+              <div
+                className="meesage-bubble-reply-main"
+                role="menuitem"
+                tabIndex={0}
+                onClick={handleReplyMessage}
+              >
+                <header className="title">{sender}</header>
+                {Context && <Context message={replyMessage} />}
+              </div>
             )
           }
           {children}
@@ -106,9 +107,9 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
         </div>
         {
           Plugins && (
-          <div className="message-plugin">
-            {PluginsShow && <Plugins message={message} />}
-          </div>
+            <div className="message-plugin">
+              {PluginsShow && <Plugins message={message} />}
+            </div>
           )
         }
       </div>
@@ -129,7 +130,7 @@ function MessageBubbleWithContext <T extends MessageBubbleProps>(
 const MemoizedMessageBubble = React.memo(MessageBubbleWithContext) as
 typeof MessageBubbleWithContext;
 
-export function MessageBubble(props:MessageBubbleProps):React.ReactElement {
+export function MessageBubble(props: MessageBubbleProps): React.ReactElement {
   return (
     <MemoizedMessageBubble {...props} />
   );

package/src/components/{TUIMessage → MessageElement}/MessageCustom.tsx

@@ -1,20 +1,26 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
 import { useTranslation } from 'react-i18next';
-import { JSONStringToParse } from '../untils';
+import { JSONStringToParse } from '../utils';
+import { isCallMessage } from './utils';
 import type { MessageContextProps } from './MessageText';
-import { useComponentContext } from '../../context';
+import { useComponentContext, useTUIChatActionContext } from '../../context';
+import { useUIManager } from '../../context';
+import { CallMessage } from '@tencentcloud/call-uikit-react';
+import { startCall } from '../Chat/utils';
 
-function MessageCustomWithContext <T extends MessageContextProps>(
+function MessageCustomWithContext<T extends MessageContextProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     context,
     message,
     children,
   } = props;
   const { t } = useTranslation();
+  const { callButtonClicked } = useTUIChatActionContext('TUIChat');
   const { MessageCustomPlugins } = useComponentContext('MessageCustom');
+  const { conversation } = useUIManager('MessageCustom');
   const handleContext = (data: any) => {
     if (data.data === 'Hyperlink') {
       const extension = JSONStringToParse(data?.extension);
@@ -43,6 +49,21 @@ function MessageCustomWithContext <T extends MessageContextProps>(
         <MessageCustomPlugins data={JSONStringToParse(data.data).content} />
       );
     }
+
+    if (conversation?.type === 'C2C' && message && isCallMessage(message)) {
+      const callType = conversation?.type;
+      const userID = conversation?.userProfile.userID;
+      return (
+        <CallMessage
+          callType={callType}
+          message={message}
+          onClick={({ callMediaType }: any) =>
+            startCall({ callType, callMediaType, userIDList: [userID], callButtonClicked })}
+        >
+        </CallMessage>
+      );
+    }
+
     return `[${t('TUIChat.Custom message')}]`;
   };
 
@@ -57,7 +78,7 @@ function MessageCustomWithContext <T extends MessageContextProps>(
 const MemoizedMessageCustom = React.memo(MessageCustomWithContext) as
 typeof MessageCustomWithContext;
 
-export function MessageCustom(props:MessageContextProps):React.ReactElement {
+export function MessageCustom(props: MessageContextProps): React.ReactElement {
   return (
     <MemoizedMessageCustom {...props} />
   );

package/src/components/{TUIMessage/TUIMessageDefault.tsx → MessageElement/MessageDefault.tsx}

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
-import type { TUIMessageProps } from './TUIMessage';
+import type { TUIMessageProps } from './Message';
 
 import { MessageBubble } from './MessageBubble';
 import { MessageTip } from './MessageTip';
@@ -12,9 +12,9 @@ import { MessageRevoke } from './MessageRevoke';
 import { MessageName } from './MessageName';
 import { MessageAvatar } from './MessageAvatar';
 
-function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
+function TUIMessageDefaultWithContext<T extends TUIMessageProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message,
     MessageContext: propsMessageContext,
@@ -42,7 +42,7 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
   return (
     <div
       className={
-      `message-default
+        `message-default
       ${(message?.type === TencentCloudChat.TYPES.MSG_GRP_TIP || message?.isRevoked) ? 'tip' : message?.flow}
       ${className}
       `
@@ -64,26 +64,26 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
       && message?.type !== TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE
       && !message?.isRevoked
       && (
-      <div
-        className={`${message?.flow}`}
-        key={message?.ID}
-      >
-        {prefix}
-        {message && <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />}
-        <main data-message-id={message?.ID} className="content">
-          <MessageName message={message} CustomName={customName} showType={showName} />
-          <MessageBubble
-            message={message}
-            Context={MessageContextUIComponent}
-            Plugins={MessagePlugins}
-          >
-            {/* // eslint-disable-next-line
+        <div
+          className={`${message?.flow}`}
+          key={message?.ID}
+        >
+          {prefix}
+          {message && <MessageAvatar message={message} CustomAvatar={customAvatar} showType={showAvatar} />}
+          <main data-message-id={message?.ID} className="content">
+            <MessageName message={message} CustomName={customName} showType={showName} />
+            <MessageBubble
+              message={message}
+              Context={MessageContextUIComponent}
+              Plugins={MessagePlugins}
+            >
+              {/* // eslint-disable-next-line
              // @ts-ignore */}
-            <MessageContextUIComponent message={message} />
-          </MessageBubble>
-        </main>
-        {suffix}
-      </div>
+              <MessageContextUIComponent message={message} />
+            </MessageBubble>
+          </main>
+          {suffix}
+        </div>
       )}
     </div>
   );
@@ -92,7 +92,7 @@ function TUIMessageDefaultWithContext <T extends TUIMessageProps>(
 const MemoizedTUIMessageDefault = React.memo(TUIMessageDefaultWithContext) as
 typeof TUIMessageDefaultWithContext;
 
-export function TUIMessageDefault(props:TUIMessageProps):React.ReactElement {
+export function TUIMessageDefault(props: TUIMessageProps): React.ReactElement {
   const {
     message,
   } = props;

package/src/components/{TUIMessage → MessageElement}/MessagePlugins.tsx

@@ -4,7 +4,7 @@ import TencentCloudChat from '@tencentcloud/chat';
 import './styles/index.scss';
 
 import { Plugins, PluginsProps } from '../Plugins';
-import { IPluginsRef } from '../ConversationPreview';
+import { IPluginsRef } from '../Plugins';
 import { Icon, IconTypes } from '../Icon';
 import { useTUIChatStateContext, useTUIMessageContext } from '../../context';
 import { useMessagePluginElement, useMessageHandler } from './hooks';
@@ -21,17 +21,17 @@ enum PluginsNameEnum {
 export type MessagePluginConfigProps = {
   [propsName in PluginsNameEnum]?: {
     isShow?: boolean;
-    relateMessageType?: TencentCloudChat.TYPES[],
+    relateMessageType?: TencentCloudChat.TYPES[];
   };
 };
 
 export interface MessagePluginsProps extends PluginsProps {
-  config?: MessagePluginConfigProps
+  config?: MessagePluginConfigProps;
 }
 
-export function MessagePlugins <T extends MessagePluginsProps>(
-  props:PropsWithChildren<T>,
-):React.ReactElement {
+export function MessagePlugins<T extends MessagePluginsProps>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
   const {
     plugins: propsPlugins,
     showNumber: propsShowNumber,
@@ -207,7 +207,7 @@ export function MessagePlugins <T extends MessagePluginsProps>(
     CopyElement,
   ];
 
-  const plugins = (propsPlugins || contextPlugin?.plugins || defaultPlugins).filter((item) => item);
+  const plugins = (propsPlugins || contextPlugin?.plugins || defaultPlugins).filter(item => item);
 
   const MoreIcon = propsMoreIcon || contextPlugin?.MoreIcon || <Icon className="icon-more" width={16} height={16} type={IconTypes.MORE} />;
 
@@ -215,16 +215,16 @@ export function MessagePlugins <T extends MessagePluginsProps>(
   // eslint-disable-next-line
   // @ts-ignore
   return message?.status !== MESSAGE_STATUS.UNSEND && (
-  <Plugins
-    className="message-plugin"
-    customClass={className}
-    style={popStyle}
-    ref={pluginsRef}
-    plugins={plugins}
-    showNumber={showNumber}
-    MoreIcon={MoreIcon}
-    root={messageListRef?.current}
-    handleVisible={handleVisible}
-  />
+    <Plugins
+      className="message-plugin"
+      customClass={className}
+      style={popStyle}
+      ref={pluginsRef}
+      plugins={plugins}
+      showNumber={showNumber}
+      MoreIcon={MoreIcon}
+      root={messageListRef?.current}
+      handleVisible={handleVisible}
+    />
   );
 }

package/src/components/{TUIMessage → MessageElement}/MessageStatus.tsx

@@ -1,15 +1,15 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from '@tencentcloud/chat';
 import { useTUIMessageContext, useUIKit } from '../../context';
-import { getTimeStamp } from '../untils';
+import { getTimeStamp } from '../utils';
 
 export interface MessageContextProps {
-  message?: Message,
+  message?: Message;
 }
 
-function MessageStatustWithContext <T extends MessageContextProps>(
+function MessageStatustWithContext<T extends MessageContextProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message,
   } = props;
@@ -30,7 +30,7 @@ function MessageStatustWithContext <T extends MessageContextProps>(
 const MemoizedMessageStatus = React.memo(MessageStatustWithContext) as
 typeof MessageStatustWithContext;
 
-export function MessageStatus(props:MessageContextProps):React.ReactElement {
+export function MessageStatus(props: MessageContextProps): React.ReactElement {
   return (
     <MemoizedMessageStatus
       {...props}

package/src/components/{TUIMessage → MessageElement}/hooks/useMessageHandler.ts

@@ -3,13 +3,13 @@ import { useTranslation } from 'react-i18next';
 import { Message } from '@tencentcloud/chat';
 import { TUIStore } from '@tencentcloud/chat-uikit-engine';
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_FLOW, MESSAGE_OPERATE } from '../../../constants';
-import { enableSampleTaskStatus } from '../../untils';
+import { enableSampleTaskStatus } from '../../utils';
 import { useTUIChatActionContext, useUIKit } from '../../../context';
 import { Toast } from '../../Toast';
 
 interface MessageHandlerProps {
-  handleError?: (error: any) => void,
-  message?: Message,
+  handleError?: (error: any) => void;
+  message?: Message;
 }
 
 export const useMessageHandler = (props: MessageHandlerProps) => {
@@ -54,7 +54,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     });
   }, [message]);
 
-  const handleReplyMessage = useCallback((event?:any) => {
+  const handleReplyMessage = useCallback((event?: any) => {
     event.preventDefault();
     if (!message?.ID || !chat || !operateMessage) {
       return;
@@ -64,7 +64,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     });
   }, [message]);
 
-  const handleCopyMessage = useCallback((event?:any) => {
+  const handleCopyMessage = useCallback((event?: any) => {
     event.preventDefault();
     if (navigator.clipboard) {
       // clipboard api
@@ -103,7 +103,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     }
   }, [message]);
 
-  const handleForWardMessage = useCallback(async (event?:any) => {
+  const handleForWardMessage = useCallback(async (event?: any) => {
     event.preventDefault();
     if (!message?.ID || !chat || !operateMessage) {
       return;

package/src/components/{TUIMessage → MessageElement}/hooks/useMessageReply.ts

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useState } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { useTUIChatStateContext, useUIKit } from '../../../context';
-import { JSONStringToParse } from '../../untils';
+import { JSONStringToParse } from '../../utils';
 
 interface messageContextParams {
-  message?: Message,
+  message?: Message;
 }
 
 const replyType: any = {
@@ -17,7 +17,7 @@ const replyType: any = {
   [TencentCloudChat.TYPES.MSG_CUSTOM]: 2,
 };
 
-export const useMessageReply = <T extends messageContextParams>(params:T) => {
+export const useMessageReply = <T extends messageContextParams>(params: T) => {
   const {
     message,
   } = params;
@@ -33,7 +33,7 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
     message && handleMessageReply(message);
   }, [message]);
 
-  const handleMessageReply = (data:Message) => {
+  const handleMessageReply = (data: Message) => {
     if (!data?.cloudCustomData) {
       return;
     }
@@ -49,7 +49,8 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
       const isSomeID = item.ID === reply?.messageID;
       const isSomeType = isSomeID && replyType[item.type] === reply.messageType;
       const isSomeContent = item.type === TencentCloudChat.TYPES.MSG_TEXT
-        ? item.payload.text === reply.messageAbstract : true;
+        ? item.payload.text === reply.messageAbstract
+        : true;
       return isSomeID && isSomeType && isSomeContent;
     });
     // eslint-disable-next-line

package/src/components/{TUIMessage → MessageElement}/index.ts

@@ -1,3 +1,3 @@
-export * from './TUIMessage';
+export * from './Message';
 export * from './MessagePlugins';
 export * from './MessageContext';

package/src/components/{TUIMessage → MessageElement}/styles/color.scss

@@ -1,21 +1,22 @@
 @use "../../../styles/colors/color-theme" as *;
 
-.message-text,
 .message-custom {
   @include theme() {
-    border: 1px solid get(border-5);
+    border: 1px solid  get(stroke-color-primary);
   }
 }
 
 .bubble {
   @include theme() {
-    background-color: get(bg-primary);
+    background-color: get(bg-color-bubble-reciprocal);
+    color: get(text-color-primary);
   }
 
   &-out {
     @include theme() {
       border: none;
-      background-color: get(bg-secondary);
+      background-color: get(bg-color-bubble-own);
+      color: get(text-color-anti-primary);
     }
   }
 }
@@ -30,7 +31,7 @@
 
 .message-tip {
   @include theme() {
-    color: get(text-secondary);
+    color: get(text-color-secondary);
   }
 }