@tencentcloud/chat-uikit-react 2.2.5 → 2.2.7

package/src/components/TUIMessage/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 '../TUIChat/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/MessageStatus.tsx

@@ -1,19 +1,19 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { useTUIMessageContext, useTUIKitContext } from '../../context';
-import { getTimeStamp } from '../untils';
+import { useTUIMessageContext, useUIKit } from '../../context';
+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;
-  const { language } = useTUIKitContext('TUIChat');
+  const { language } = useUIKit('TUIChat');
   const {
     isShowTime,
   } = useTUIMessageContext('MessageStatustWithContext');
@@ -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/MessageText.tsx

@@ -3,21 +3,21 @@ import TencentCloudChat, { Message } from '@tencentcloud/chat';
 import { UnknowPorps, useTUIChatStateContext, useComponentContext } from '../../context';
 
 export interface MessageContextProps {
-  context?: UnknowPorps,
-  message?: Message,
-  className?: string,
+  context?: UnknowPorps;
+  message?: Message;
+  className?: string;
 }
 
-function MessageTextWithContext <T extends MessageContextProps>(
-  props: PropsWithChildren<T>,
-):React.ReactElement {
+function MessageTextWithContext(props: PropsWithChildren<MessageContextProps>) {
   const {
     context,
     message,
     children,
   } = props;
+
   const { MessageTextPlugins } = useComponentContext('MessageText');
   const { firstSendMessage } = useTUIChatStateContext('MessageText');
+
   if (MessageTextPlugins && message?.flow === 'in' && (firstSendMessage && firstSendMessage?.time <= message?.time)) {
     return (
       <div className={`bubble message-text bubble-${message.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
@@ -25,14 +25,15 @@ function MessageTextWithContext <T extends MessageContextProps>(
       </div>
     );
   }
-  const urlToLink = function (text: string) {
+
+  function urlToLink(text: string) {
     if (!text) {
       return text;
     }
-    // eslint-disable-next-line no-useless-escape
     const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
-    return text.replace(urlRegex, (website) => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
-  };
+    return text.replace(urlRegex, website => `<a class='website' href='${website}' target='_blank'>${website}</a>`);
+  }
+
   return (
     <div className={`bubble message-text bubble-${message?.flow} ${message?.conversationType === TencentCloudChat.TYPES.CONV_GROUP ? 'group' : ''}`}>
       <div className="message-text-content">
@@ -43,8 +44,9 @@ function MessageTextWithContext <T extends MessageContextProps>(
               <p
                 className="message-text-content-p"
                 key={item.src + key}
-                dangerouslySetInnerHTML={{ __html: urlToLink(item.text) }}
-              />
+              >
+                {item.text}
+              </p>
             );
           }
           return <img className="text-img" key={item.src + key} src={item.src} alt="" />;
@@ -55,10 +57,9 @@ function MessageTextWithContext <T extends MessageContextProps>(
   );
 }
 
-const MemoizedMessageText = React.memo(MessageTextWithContext) as
-typeof MessageTextWithContext;
+const MemoizedMessageText = React.memo(MessageTextWithContext) as typeof MessageTextWithContext;
 
-export function MessageText(props:MessageContextProps):React.ReactElement {
+export function MessageText(props: MessageContextProps) {
   return (
     <MemoizedMessageText {...props} />
   );

package/src/components/TUIMessage/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 { useTUIChatActionContext, useTUIKitContext } from '../../../context';
+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) => {
@@ -24,7 +24,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     revokeMessage,
   } = useTUIChatActionContext('useDeleteHandler');
   const { t } = useTranslation();
-  const { chat } = useTUIKitContext('useDeleteHandler');
+  const { chat } = useUIKit('useDeleteHandler');
 
   const handleDelMessage = useCallback(async (event?: any) => {
     event.preventDefault();
@@ -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/hooks/useMessageReply.ts

@@ -1,10 +1,10 @@
 import { useLayoutEffect, useState } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { useTUIChatStateContext, useTUIKitContext } from '../../../context';
-import { JSONStringToParse } from '../../untils';
+import { useTUIChatStateContext, useUIKit } from '../../../context';
+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;
@@ -26,14 +26,14 @@ export const useMessageReply = <T extends messageContextParams>(params:T) => {
   const [replyMessage, setReplyMessage] = useState(null);
   const [messageID, setMessageID] = useState('');
 
-  const { chat } = useTUIKitContext('TUIChat');
+  const { chat } = useUIKit('TUIChat');
   const { messageList } = useTUIChatStateContext('useMessageReply');
 
   useLayoutEffect(() => {
     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/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);
   }
 }