@tencentcloud/chat-uikit-react 2.3.0 → 2.3.1

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

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useState } from 'react';
 import TencentCloudChat, { Message } from '@tencentcloud/chat';
-import { useTUIChatStateContext, useUIKit } from '../../../context';
+import { useTUIChatStateContext } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 import { JSONStringToParse } from '../../utils';
 
 interface messageContextParams {
@@ -26,7 +27,7 @@ export const useMessageReply = <T extends messageContextParams>(params: T) => {
   const [replyMessage, setReplyMessage] = useState(null);
   const [messageID, setMessageID] = useState('');
 
-  const { chat } = useUIKit('TUIChat');
+  const { chat } = useUIManagerStore();
   const { messageList } = useTUIChatStateContext('useMessageReply');
 
   useLayoutEffect(() => {

package/src/components/MessageElement/styles/color.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .message-custom {
   @include theme() {

package/src/components/MessageElement/styles/layout.scss

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .message-default {
   width: 100%;
@@ -479,7 +479,7 @@
     &:hover {
       @include theme() {
         background: get(dropdown-color-hover);
-        color: get(text-color-hover);
+        color: get(text-color-primary);
       }
     }
 

package/src/components/MessageElement/utils/decodeText.ts

@@ -1,13 +1,15 @@
-import { emojiMap, emojiUrl } from './emojiMap';
+import { emojiUrlMap, emojiBaseUrl } from './emojiMap';
+import { i18next } from '@tencentcloud/uikit-base-component-react';
 /** Pass in messageBody (group system message SystemMessage, except group prompt message GroupTip）
  * payload = {
- *  msgType: 'TIMTextElem',
- *  msgContent: {
- *    text: 'AAA[smile]AAA[smile]AAA[smile]'
- *  }
- *}
+ *   msgType: 'TIMTextElem',
+ *   msgContent: {
+ *     text: 'AAA[smile]AAA[smile]AAA[smile]'
+ *   }
+ * }
+ * ! decodeText function has been deprecated
  * */
-export function decodeText(payload:any) {
+export function decodeText(payload: any) {
   const renderDom = [];
   let temp = payload.text;
   let left = -1;
@@ -25,10 +27,10 @@ export function decodeText(payload:any) {
           temp = '';
         } else {
           const emojiKey = temp.slice(0, right + 1);
-          if (emojiMap[emojiKey]) {
+          if (emojiUrlMap[emojiKey]) {
             renderDom.push({
               name: 'img',
-              src: emojiUrl + emojiMap[emojiKey],
+              src: emojiBaseUrl + emojiUrlMap[emojiKey],
             });
             temp = temp.substring(right + 1);
           } else {
@@ -58,3 +60,51 @@ export function decodeText(payload:any) {
   }
   return renderDom;
 }
+
+/**
+ * Transforms a text containing emoji keys to a emoji names with i18n
+ * Example:
+ * 'hello[TUIEmoji_Smile]!' => 'hello[Smile]!''
+ * @param {string} text - The text containing emoji keys.
+ * @return {string} The transformed text with emoji keys replaced by emoji names.
+ */
+export function transformTextWithEmojiKeyToName(text: string) {
+  if (!text) {
+    return '';
+  }
+  const reg = /(\[.+?\])/g;
+  let transformResult: string = text;
+  if (reg.test(text)) {
+    transformResult = text.replace(reg, match => emojiUrlMap[match] ? i18next.t(`Emoji.${match}`) : match);
+  }
+  return transformResult;
+}
+
+const emojiTranslationMap: Record<string, any> = {};
+
+/**
+ * Transforms a text containing emoji names to emoji keys with i18n
+ * Example:
+ * 'hello[Smile]!' => 'hello[TUIEmoji_Smile]!'
+ * @param {string} text - The text containing emoji names.
+ * @return {string} The transformed text with emoji names replaced by emoji keys.
+ */
+export function transformTextWithEmojiNameToKey(text: string) {
+  if (!text) {
+    return '';
+  }
+  const reg = /(\[.+?\])/g;
+  let transformResult: string = text;
+  if (reg.test(text)) {
+    const currentLanguage = i18next.language;
+    if (!emojiTranslationMap[currentLanguage]) {
+      const lngResource = i18next.getDataByLanguage(currentLanguage);
+      if (lngResource?.translation?.Emoji) {
+        emojiTranslationMap[currentLanguage]
+          = Object.fromEntries(Object.entries(lngResource.translation.Emoji).map(([key, value]) => [value, key]));
+      }
+    }
+    transformResult = text.replace(reg, match => emojiTranslationMap[currentLanguage][match] ?? match);
+  }
+  return transformResult;
+}