@tencentcloud/chat-uikit-react 2.2.6 → 2.2.7

package/src/components/TUIManage/styles/index.scss

@@ -1,10 +1,17 @@
+@use "../../../styles/colors/color-theme" as *;
+
 .tui-manage {
   display: flex;
   flex-direction: column;
   width: 22%;
   max-width: 300px;
   min-width: 200px;
-  border-left: 1px solid #f9fafb;
+
+  @include theme() {
+    background-color: get(bg-color-operate);
+    color: get(text-color-primary);
+    border-left: 1px solid get(stroke-color-primary);
+  }
 
   .red {
     color: #ff584c !important;
@@ -19,8 +26,6 @@
       margin-right: 10px;
       font-weight: 700;
       font-size: 14px;
-      font-family: PingFangSC-Medium;
-      line-height: 17px;
     }
   }
 
@@ -39,16 +44,11 @@
         text-align: center;
         font-weight: 700;
         font-size: 24px;
-        font-family: PingFangSC-Medium;
-        line-height: 29px;
         margin-bottom: 10px;
       }
 
       .info-id {
-        font-weight: 400;
         font-size: 12px;
-        font-family: PingFangSC-Medium;
-        line-height: 14px;
         color: #666;
         margin-bottom: 30px;
         text-align: center;
@@ -58,11 +58,13 @@
     .tui-manage-handle {
       .manage-handle-box {
         display: flex;
-        background: rgba(249, 249, 249, 94%);
         align-items: center;
         justify-content: space-between;
         padding: 10px;
-        box-sizing: border-box;
+
+        @include theme() {
+          background: get(bg-color-operate);
+        }
 
         &:nth-child(2) {
           margin-top: 10px;
@@ -71,9 +73,10 @@
 
         .manage-handle-title {
           font-size: 16px;
-          font-family: PingFangSC-Medium;
-          line-height: 22px;
-          color: rgba(0, 0, 0, 60%);
+
+          @include theme() {
+            color: get(text-color-primary);
+          }
         }
       }
     }
@@ -91,5 +94,8 @@
   max-width: 100%;
   min-width: 100%;
   z-index: 1;
-  background: #fff;
+
+  @include theme() {
+    background: get(bg-color-operate);
+  }
 }

package/src/components/TUIMessage/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/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/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,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/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/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/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);
   }
 }