@tencentcloud/chat-uikit-react 2.3.0 → 2.3.1

package/src/components/Contact/ContactInfo/groupInfo.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { TUIConversationService, IGroupModel, IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIManager } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 import { Icon, IconTypes } from '../../Icon';
 import { isH5 } from '../../../utils/env';
 import '../index.scss';
@@ -9,7 +9,7 @@ import { Avatar, defaultUserAvatar } from '../../Avatar';
 
 interface Props {
   group: IGroupModel;
-  showChats?: () => void,
+  showChats?: () => void;
 }
 
 export function UnMemoizedGroupInfo<T extends Props>(
@@ -17,8 +17,8 @@ export function UnMemoizedGroupInfo<T extends Props>(
 ): React.ReactElement {
   const { group, showChats } = props;
 
-  const { setActiveContact, setActiveConversation } = useUIManager('TUIContact');
-  const { t } = useTranslation();
+  const { setActiveContact, setActiveConversation } = useUIManagerStore('TUIContact');
+  const { t } = useUIKit();
   const { groupID, name, avatar } = group;
 
   const back = () => {
@@ -31,34 +31,34 @@ export function UnMemoizedGroupInfo<T extends Props>(
     TUIConversationService.switchConversation(conversationID).then(
       (conversationModel: IConversationModel) => {
         setActiveConversation(conversationModel.getConversation());
-      }
+      },
     );
   };
 
   return (
     <>
-     <div className="tui-contact-info-header">
-      {isH5 && (
-      <Icon
-        width={9}
-        height={16}
-        type={IconTypes.BACK}
-        onClick={back}
-      />
-      )}
-      <div className="header-container">
-        <div className="header-container-avatar">
-          <Avatar size={60} image={avatar || defaultUserAvatar} />
-          <div className="header-container-name">{name || groupID}</div>
+      <div className="tui-contact-info-header">
+        {isH5 && (
+          <Icon
+            width={9}
+            height={16}
+            type={IconTypes.BACK}
+            onClick={back}
+          />
+        )}
+        <div className="header-container">
+          <div className="header-container-avatar">
+            <Avatar size={60} image={avatar || defaultUserAvatar} />
+            <div className="header-container-name">{name || groupID}</div>
+          </div>
+          <div className="header-container-text">{`groupID:${groupID}`}</div>
         </div>
-        <div className="header-container-text">{`groupID:${groupID}`}</div>
       </div>
-     </div>
-     <div className="tui-contact-info-content">
+      <div className="tui-contact-info-content">
         <div className="content-btn-container">
           <div className="content-item-btn confirm-btn" role="button" tabIndex={0} onClick={openGroupConversation}>{t('TUIContact.Send Message')}</div>
         </div>
-     </div>
+      </div>
     </>
   );
 }

package/src/components/Contact/ContactInfo/hooks/useContactInfo.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
 import { Toast } from '../../../Toast';
-import { useUIKit } from '../../../../context';
+import { useUIManagerStore } from '../../../../store';
 
 function useContactInfo() {
-  const { chat } = useUIKit('useContactInfo');
+  const { chat } = useUIManagerStore();
 
   const removeFromBlocklist = useCallback((userID: string) => {
     chat.removeFromBlacklist({

package/src/components/Contact/ContactInfo/index.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contact-info {
   width: 100%;

package/src/components/Contact/ContactList/ContactList.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import TencentCloudChat from '@tencentcloud/chat';
 import { isH5 } from '../../../utils/env';
-import { useUIManager, useTUIContactContext } from '../../../context';
+import { useTUIContactContext } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 import useContactInfo from '../ContactInfo/hooks/useContactInfo';
 import useTUIContact from '../hooks/useTUIContact';
 import { Avatar, defaultUserAvatar } from '../../Avatar';
@@ -19,8 +20,8 @@ interface RenderContactListProps {
 }
 
 function UnMemoizedContactList<T>(): React.ReactElement {
-  const { setActiveContact } = useUIManager();
-  const { t } = useTranslation();
+  const { setActiveContact } = useUIManagerStore();
+  const { t } = useUIKit();
   const {
     isShowContactList, friendList, blocklistProfile, friendApplicationList,
   } = useTUIContactContext('TUIContactList');

package/src/components/Contact/ContactList/index.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contacts-list {
   flex: 1 1 auto;

package/src/components/Contact/hooks/useTUIContact.tsx

@@ -5,10 +5,10 @@ import {
   StoreName,
   IGroupModel,
 } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 
 function useTUIContact() {
-  const { chat } = useUIKit();
+  const { chat } = useUIManagerStore();
   const [friendList, setFriendList] = useState([]);
   const [blockList, setBlockList] = useState([]);
   const [friendApplicationList, setFriendApplicationList] = useState([]);

package/src/components/Contact/index.scss

@@ -1,4 +1,4 @@
-@use "../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contacts {
   height: 100%;

package/src/components/ContactSearch/ContactSearch.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useUIManager, useTUIContactContext } from '../../context';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
+import { useTUIContactContext } from '../../context';
+import { useUIManagerStore } from '../../store';
 import useContactSearch from './hooks/useContactSearch';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar, defaultUserAvatar } from '../Avatar';
@@ -8,8 +9,8 @@ import { Input } from '../Input';
 import './index.scss';
 
 export function UnMemoizedContactSearch<T>(): React.ReactElement {
-  const { setActiveContact } = useUIManager('TUIContactSearch');
-  const { t } = useTranslation();
+  const { setActiveContact } = useUIManagerStore('TUIContactSearch');
+  const { t } = useUIKit();
   const { friendList, setShowContactList } = useTUIContactContext('TUIContactList');
   const [isShowSearchResult, setShowSearchResult] = useState(false);
   const { checkFriend, isBlock, getUserProfile } = useContactSearch();

package/src/components/ContactSearch/hooks/useContactSearch.tsx

@@ -1,15 +1,16 @@
 import TencentCloudChat from '@tencentcloud/chat';
-import { useUIKit, useTUIContactContext } from '../../../context';
+import { useTUIContactContext } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 
 function useContactSearch() {
   const { blockList } = useTUIContactContext('TUIContactList');
-  const { chat } = useUIKit('TUIContactSearch');
+  const { chat } = useUIManagerStore();
 
   const checkFriend = (info: any): Promise<any> => chat.checkFriend({
     userIDList: [info?.userID],
     type: TencentCloudChat.TYPES.SNS_CHECK_TYPE_BOTH,
   }).then((res: any) => res?.data?.successUserIDList[0]?.relation
-      === TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY);
+    === TencentCloudChat.TYPES.SNS_TYPE_BOTH_WAY);
 
   const isBlock = (userID: string) => (
     blockList?.includes(userID)

package/src/components/ContactSearch/index.scss

@@ -1,4 +1,4 @@
-@use "../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-contact-search {
   width: 100%;

package/src/components/ConversationActions/ConversationActions.scss

@@ -1,4 +1,4 @@
-@use "../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-conversation-actions {
   display: flex;

package/src/components/ConversationActions/ConversationActions.tsx

@@ -1,6 +1,6 @@
 // ConversationActions.tsx
 import React, { useRef, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
 import cs from 'classnames';
 
@@ -78,7 +78,7 @@ const ConversationActions = (props: IConversationActionsProps) => {
     style,
   } = props;
 
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const pluginsRef = useRef<IPluginsRef>(null);
   const [conversationActions, setConversationActions] = React.useState<Record<string, IConversationActionItem>>({});
 

package/src/components/ConversationCreate/ConversationCreate.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { CreateGroupParams, IConversationModel, TUIConversationService } from '@tencentcloud/chat-uikit-engine';
 import cs from 'classnames';
 
@@ -34,7 +34,7 @@ export function ConversationCreate<T extends IConversationCreateProps>(props: T)
     onBeforeCreateConversation,
     onConversationCreated,
   } = props;
-  const { t } = useTranslation();
+  const { t } = useUIKit();
 
   const [showCreateModel, setShowCreateModel] = useState(false);
   const [isCreateGroup, setIsCreateGroup] = useState(false);

package/src/components/ConversationCreate/ConversationCreateGroupDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { Profile } from '@tencentcloud/chat';
 import { CreateGroupParams, IConversationModel } from '@tencentcloud/chat-uikit-engine';
 import { Input } from '../Input';
@@ -16,7 +16,7 @@ import {
 } from '../Avatar';
 import { PageStateTypes } from './ConversationCreate';
 import { ConversationGroupTypeInfo, GroupType, typeInfoList } from './ConversationGroupTypeInfo';
-import { useUIManager } from '../../context';
+import { useUIManagerStore } from '../../store';
 import { createGroupConversation } from '../../hooks/useConversation';
 
 export interface ConversationCreateGroupDetailProps {
@@ -34,8 +34,8 @@ export function ConversationCreateGroupDetail(props: ConversationCreateGroupDeta
     onBeforeCreateConversation,
     onConversationCreated,
   } = props;
-  const { t } = useTranslation();
-  const { setActiveConversation, myProfile } = useUIManager();
+  const { t } = useUIKit();
+  const { setActiveConversation, myProfile } = useUIManagerStore();
   const temp = [...profileList];
   myProfile && temp.unshift(myProfile);
   const name = temp.map(item => item.nick || item.userID).toString();

package/src/components/ConversationCreate/ConversationCreateUserSelectList.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { Profile } from '@tencentcloud/chat';
 import { Input } from '../Input';
 import { Icon, IconTypes } from '../Icon';
@@ -7,7 +7,7 @@ import { ConversationCreateSelectView, ConversationCreateSelectViewProps } from
 import { Avatar, defaultUserAvatar } from '../Avatar';
 import { useConversationCreate } from './hooks/useConversationCreate';
 import { createC2CConversation } from '../../hooks/useConversation';
-import { useUIKit } from '../../context';
+import { useUIManagerStore } from '../../store';
 import { PageStateTypes } from './ConversationCreate';
 import { Toast } from '../Toast';
 import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
@@ -33,9 +33,9 @@ export function ConversationCreateUserSelectList(props: ConversationCreateUserSe
     onBeforeCreateConversation,
     onConversationCreated,
   } = props;
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const [searchValue, setSearchValue] = useState('');
-  const { chat } = useUIKit();
+  const { chat } = useUIManagerStore();
   const [friendList, setFriendList] = useState<any>({});
   const {
     getFriendListSortSearchResult,

package/src/components/ConversationCreate/ConversationGroupTypeInfo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
 import './styles/conversationGroupTypeInfo.scss';
 import { PageStateTypes } from './ConversationCreate';
@@ -27,7 +27,7 @@ export const typeInfoList: Array<{ type: GroupType; name: string; des: string }>
 export function ConversationGroupTypeInfo(props: ConversationGroupTypeInfoProps) {
   const { groupType, setGroupType, setPageState } = props;
 
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const selectGroupType = (type: GroupType) => {
     setGroupType(type);
     setPageState(PageStateTypes.CREATE_DETAIL);

package/src/components/ConversationCreate/styles/ConversationCreateGroupDetail.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-conversation-create-group-detail {
   display: flex;

package/src/components/ConversationCreate/styles/conversationCreateSelectView.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .conversation-create-select-view {
   display: flex;

package/src/components/ConversationCreate/styles/conversationGroupTypeInfo.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-conversation-group-type-info {
   display: flex;

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

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-conversation-create-container {
   display: flex;

package/src/components/ConversationList/ConversationList.scss

@@ -1,4 +1,4 @@
-@use "../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-chat-list {
   flex: 1;

package/src/components/ConversationList/ConversationListContent/ConversationListContent.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-chat-list__container {
   display: flex;

package/src/components/ConversationList/ConversationListHeader/ConversationListHeader.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-chat-list__header {
   display: flex;

package/src/components/ConversationPreview/ConversationPreview.scss

@@ -1,4 +1,4 @@
-@use "../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-conversation-preview {
   display: flex;

package/src/components/ConversationPreview/ConversationPreview.tsx

@@ -2,12 +2,12 @@
 import React, { CSSProperties, useEffect, useRef, useState } from 'react';
 import cs from 'classnames';
 import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { Icon, IconTypes } from '../Icon';
 import { Avatar as DefaultAvatar, type AvatarProps } from '../Avatar';
 import { ConversationActions as DefaultConversationActions, type IConversationActionsConfig, type IConversationActionsProps } from '../ConversationActions';
 import { useConversationList } from '../../context/ConversationListContext';
-import { useUIManager } from '../../context/UIManagerContext';
-import { useUIKit } from '../../context';
+import { useUIManagerStore } from '../../store';
 import useLongPress from '../../hooks/useLongPress';
 import useMouseHover from '../../hooks/useMouseHover';
 import { generateHighlightTitle, getLatestMessagePreview } from './utils';
@@ -92,7 +92,7 @@ function ConversationPreviewAbstract(props: {
   conversation: IConversationModel;
 }): string | JSX.Element {
   const { conversation } = props;
-  const { myProfile } = useUIManager();
+  const { myProfile } = useUIManagerStore();
   return (
     <div className="uikit-conversation-preview__abstract">
       {getLatestMessagePreview(conversation, myProfile)}

package/src/components/ConversationPreview/utils.tsx

@@ -1,7 +1,7 @@
 import TUIChatEngine, { IConversationModel } from '@tencentcloud/chat-uikit-engine';
-import { formatEmojiString } from '../MessageElement/utils/emojiMap';
 import { Conversation, Profile } from '@tencentcloud/chat';
 import { defaultGroupAvatarWork, defaultUserAvatar } from '../Avatar';
+import { transformTextWithEmojiKeyToName } from '../MessageElement/utils/decodeText';
 
 interface IMessageProfile {
   name?: string;
@@ -57,7 +57,7 @@ export const getLatestMessagePreview = (
     }}
     >
       <span>{from}</span>
-      <span>{lastMessage.isRevoked ? 'recalled a message' : formatEmojiString(messageForShow, 1)}</span>
+      <span>{lastMessage.isRevoked ? 'recalled a message' : transformTextWithEmojiKeyToName(messageForShow)}</span>
     </div>
   );
 };

package/src/components/ConversationSearch/ConversationSearch.scss

@@ -1,4 +1,4 @@
-@use "../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-conversation-search {
   display: flex;

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-conversation-search-input {
   height: 36px;

package/src/components/ConversationSearch/ConversationSearchInput/ConversationSearchInput.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { Icon, IconTypes } from '../../Icon';
 import { Input, InputProps } from '../../Input';
 import classNames from 'classnames';
@@ -18,7 +18,7 @@ function ConversationSearchInput(props: IConversationSearchInputProps) {
     onFocus,
     onBlur,
   } = props;
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   return (
     <Input
       className={classNames(

package/src/components/ConversationSearch/ConversationSearchResult/ConversationSearchResult.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .uikit-conversation-search-result {
   display: flex;

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

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .div-with-edit {
   flex: 1;

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

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 $primary-color: royalblue;
 

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

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .tui-kit-input-box {
   //width: 100%;
@@ -6,7 +6,7 @@
   align-items: center;
   border-radius: 10px;
   padding: 0 8px;
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
 
   @include theme() {

package/src/components/MessageElement/MessageCustom.tsx

@@ -1,11 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { JSONStringToParse } from '../utils';
 import { isCallMessage } from './utils';
 import type { MessageContextProps } from './MessageText';
 import { useComponentContext, useTUIChatActionContext } from '../../context';
-import { useUIManager } from '../../context';
+import { useUIManagerStore } from '../../store';
 import { CallMessage } from '@tencentcloud/call-uikit-react';
 import { startCall } from '../Chat/utils';
 
@@ -17,10 +17,10 @@ function MessageCustomWithContext<T extends MessageContextProps>(
     message,
     children,
   } = props;
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const { callButtonClicked } = useTUIChatActionContext('TUIChat');
   const { MessageCustomPlugins } = useComponentContext('MessageCustom');
-  const { conversation } = useUIManager('MessageCustom');
+  const { conversation } = useUIManagerStore('MessageCustom');
   const handleContext = (data: any) => {
     if (data.data === 'Hyperlink') {
       const extension = JSONStringToParse(data?.extension);

package/src/components/MessageElement/MessagePlugins.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import TencentCloudChat from '@tencentcloud/chat';
 import './styles/index.scss';
 
@@ -39,7 +39,7 @@ export function MessagePlugins<T extends MessagePluginsProps>(
     config: propsPluginConfig,
   } = props;
 
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const [className, setClassName] = useState('');
   const [popStyle, setPopStyle] = useState({});
   const pluginsRef = useRef<IPluginsRef>();
@@ -114,7 +114,7 @@ export function MessagePlugins<T extends MessagePluginsProps>(
     },
     message,
     isShow: pluginConfig.revoke.isShow
-    && (message?.status === MESSAGE_STATUS.SUCCESS && message.flow === MESSAGE_FLOW.OUT),
+      && (message?.status === MESSAGE_STATUS.SUCCESS && message.flow === MESSAGE_FLOW.OUT),
     relateMessageType: pluginConfig.revoke.relateMessageType,
   });
 

package/src/components/MessageElement/MessageRevoke.tsx

@@ -1,17 +1,17 @@
 import React, { PropsWithChildren, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import TencentCloudChat from '@tencentcloud/chat';
 import { MESSAGE_FLOW, MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatActionContext } from '../../context';
 import type { MessageContextProps } from './MessageText';
 
-function MessageRevokeWithContext <T extends MessageContextProps>(
+function MessageRevokeWithContext<T extends MessageContextProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     message,
   } = props;
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const { operateMessage } = useTUIChatActionContext('MessageRevokeWithContext');
 
   const handleRevoke = useCallback(() => {
@@ -41,7 +41,7 @@ function MessageRevokeWithContext <T extends MessageContextProps>(
 const MemoizedMessageRevoke = React.memo(MessageRevokeWithContext) as
 typeof MessageRevokeWithContext;
 
-export function MessageRevoke(props:MessageContextProps):React.ReactElement {
+export function MessageRevoke(props: MessageContextProps): React.ReactElement {
   return (
     <MemoizedMessageRevoke {...props} />
   );

package/src/components/MessageElement/MessageStatus.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { useTUIMessageContext, useUIKit } from '../../context';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
+import { useTUIMessageContext } from '../../context';
 import { getTimeStamp } from '../utils';
 
 export interface MessageContextProps {

package/src/components/MessageElement/hooks/useMessageHandler.ts

@@ -1,11 +1,13 @@
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 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 '../../utils';
-import { useTUIChatActionContext, useUIKit } from '../../../context';
+import { useTUIChatActionContext } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 import { Toast } from '../../Toast';
+import { transformTextWithEmojiKeyToName } from '../utils/decodeText';
 
 interface MessageHandlerProps {
   handleError?: (error: any) => void;
@@ -23,8 +25,8 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
     operateMessage,
     revokeMessage,
   } = useTUIChatActionContext('useDeleteHandler');
-  const { t } = useTranslation();
-  const { chat } = useUIKit('useDeleteHandler');
+  const { t } = useUIKit();
+  const { chat } = useUIManagerStore();
 
   const handleDelMessage = useCallback(async (event?: any) => {
     event.preventDefault();
@@ -66,9 +68,10 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
 
   const handleCopyMessage = useCallback((event?: any) => {
     event.preventDefault();
+    const copyText = transformTextWithEmojiKeyToName(message?.payload.text);
     if (navigator.clipboard) {
       // clipboard api
-      navigator.clipboard.writeText(message?.payload.text);
+      navigator.clipboard.writeText(copyText);
     } else {
       const textarea = document.createElement('textarea');
       document.body.appendChild(textarea);
@@ -76,7 +79,7 @@ export const useMessageHandler = (props: MessageHandlerProps) => {
       textarea.style.position = 'fixed';
       textarea.style.clip = 'rect(0 0 0 0)';
       textarea.style.top = '10px';
-      textarea.value = message?.payload.text;
+      textarea.value = copyText;
       // select
       textarea.select();
       // copy