@tencentcloud/chat-uikit-react 2.3.0 → 2.3.1

package/src/components/MessageInput/InputQuoteDefalut.tsx

@@ -6,15 +6,15 @@ import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useHandleQuoteMessage } from './hooks/useHandleQuoteMessage';
-import { formatEmojiString } from '../MessageElement/utils/emojiMap';
+import { transformTextWithEmojiKeyToName } from '../MessageElement/utils/decodeText';
 
 interface InputQuoteProps {
-  message?: Message
+  message?: Message;
 }
 
-export function InputQuoteDefalut <T extends InputQuoteProps>(
-  props:PropsWithChildren<T>,
-):React.ReactElement {
+export function InputQuoteDefalut<T extends InputQuoteProps>(
+  props: PropsWithChildren<T>,
+): React.ReactElement {
   const {
     message: propsMessage,
   } = props;
@@ -36,7 +36,7 @@ export function InputQuoteDefalut <T extends InputQuoteProps>(
     <div className="input-quote">
       <div className="input-quote-content">
         <label htmlFor="input-quote-content">{message?.nick || message?.from}</label>
-        <span>{formatEmojiString(context?.messageAbstract, 1)}</span>
+        <span>{transformTextWithEmojiKeyToName(context?.messageAbstract)}</span>
       </div>
       <Icon className="icon" width={12} height={12} type={IconTypes.CLOSE} onClick={handleClose} />
     </div>

package/src/components/MessageInput/MessageInput.tsx

@@ -7,7 +7,6 @@ import {
   UnknowPorps,
   useComponentContext,
   useTUIChatStateContext,
-  useUIManager,
 } from '../../context';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 import { InputQuoteDefalut } from './InputQuoteDefalut';

package/src/components/MessageInput/MessageInputDefault.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
 import { isPC } from '../../utils/env';
 import { useTUIMessageInputContext } from '../../context/MessageInputContext';
-import { formatEmojiString } from '../MessageElement/utils/emojiMap';
+import { transformTextWithEmojiKeyToName } from '../MessageElement/utils/decodeText';
 
 export function TUIMessageInputDefault(): React.ReactElement {
   const {
@@ -18,7 +18,7 @@ export function TUIMessageInputDefault(): React.ReactElement {
     setText,
     setCursorPos,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const {
     operateData,
   } = useTUIChatStateContext('TUIMessageInputDefault');
@@ -26,7 +26,7 @@ export function TUIMessageInputDefault(): React.ReactElement {
   // operateData
   useEffect(() => {
     if (operateData && operateData[MESSAGE_OPERATE.REVOKE]) {
-      setText && setText(formatEmojiString(operateData[MESSAGE_OPERATE.REVOKE].payload.text, 1));
+      setText && setText(transformTextWithEmojiKeyToName(operateData[MESSAGE_OPERATE.REVOKE].payload.text));
     }
   }, [operateData]);
 

package/src/components/MessageInput/hooks/useEmojiPicker.tsx

@@ -3,38 +3,33 @@ import {
   PropsWithChildren,
   useCallback,
 } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
-import { emojiEnKey } from '../../MessageElement/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface EmojiData {
-  index: number,
-  data: string,
+  index: number;
+  data: string;
 }
 
 interface useEmojiPickerProps extends IbaseStateProps {
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  insertText?: (textToInsert: string) => void
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
+  insertText?: (textToInsert: string) => void;
 }
 
-export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChildren<T>) {
+export function useEmojiPicker<T extends useEmojiPickerProps>(props: PropsWithChildren<T>) {
   const {
     textareaRef,
     insertText,
   } = props;
 
-  const { i18n } = useTranslation();
+  const { language } = useUIKit();
 
-  const onSelectEmoji = (emoji:EmojiData) => {
-    if (i18n.language === 'zh-CN') {
-      insertText && insertText(emoji.data);
-    } else {
-      insertText && insertText(emojiEnKey[emoji.data]);
-    }
-  };
+  const onSelectEmoji = useCallback((emoji: EmojiData) => {
+    insertText && insertText(emoji.data);
+  }, [insertText, language]);
 
-  const sendFaceMessage = useCallback((emoji:EmojiData) => {
+  const sendFaceMessage = useCallback((emoji: EmojiData) => {
     TUIChatService.sendFaceMessage({ payload: emoji });
   }, []);
 

package/src/components/MessageInput/hooks/useHandleForwardMessage.tsx

@@ -4,9 +4,8 @@ import {
   TUIChatService,
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_OPERATE } from '../../../constants';
-import {
-  useTUIChatStateContext, useUIKit,
-} from '../../../context';
+import { useTUIChatStateContext } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 
 export function useHandleForwardMessage(msg?: Message) {
   const {
@@ -14,7 +13,7 @@ export function useHandleForwardMessage(msg?: Message) {
   } = useTUIChatStateContext('TUIMessageInputDefault');
 
   const [conversationList, setConversationList] = useState([]);
-  const { chat } = useUIKit('TUIChat');
+  const { chat } = useUIManagerStore();
 
   const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 

package/src/components/MessageInput/hooks/useMessageInputText.tsx

@@ -6,17 +6,17 @@ import React, {
 import {
   TUIChatService,
 } from '@tencentcloud/chat-uikit-engine';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
-  useUIKit,
 } from '../../../context';
+import { useUIManagerStore } from '../../../store';
 import { enableSampleTaskStatus } from '../../utils';
-import { formatEmojiString } from '../../MessageElement/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
+import { transformTextWithEmojiNameToKey } from '../../MessageElement/utils/decodeText';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
 import { filesData } from './useUploadPicker';
-import { de } from 'date-fns/locale';
 
 interface useMessageInputTextProps extends IbaseStateProps {
   focus?: boolean;
@@ -33,7 +33,8 @@ export const useMessageInputText = (props: useMessageInputTextProps) => {
     sendUploadMessage,
   } = props;
 
-  const { chat } = useUIKit();
+  const { t } = useUIKit();
+  const { chat } = useUIManagerStore();
   const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();
@@ -63,7 +64,7 @@ export const useMessageInputText = (props: useMessageInputTextProps) => {
     }
     const options: any = {
       payload: {
-        text: formatEmojiString(state.text),
+        text: transformTextWithEmojiNameToKey(state.text),
       },
     };
     if (cloudCustomData.messageReply) {
@@ -87,11 +88,11 @@ export const useMessageInputText = (props: useMessageInputTextProps) => {
 
   const handleKeyDown = useCallback(
     (event?: React.KeyboardEvent<EventTarget>) => {
-      if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
+      if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.key === 'Enter') {
         event?.preventDefault();
         handleSubmit(event);
       }
-      if (event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
+      if (event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.key === 'Enter') {
         dispatch({
           type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
           getNewText: (text: string) => `${text}\n`,
@@ -136,22 +137,27 @@ export const useMessageInputText = (props: useMessageInputTextProps) => {
 
   const insertText = useCallback(
     (textToInsert: string) => {
+      const insertEmojiName = t(`Emoji.${textToInsert}`) || '';
+      const cursorStart = state.cursorPos?.start || 0;
+      const cursorEnd = state.cursorPos?.end || 0;
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text: string) => `${text.slice(0, state?.cursorPos?.start || 0)}${textToInsert}${text.slice(state?.cursorPos?.start || 0)}`,
+        getNewText: (text: string) => {
+          return `${text.slice(0, cursorStart)}${insertEmojiName}${text.slice(cursorStart)}`;
+        },
       });
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,
         value: {
-          start: state?.cursorPos?.start && state.cursorPos.start + textToInsert.length,
-          end: state?.cursorPos?.end && state.cursorPos.end + textToInsert.length,
+          start: cursorStart + insertEmojiName.length,
+          end: cursorEnd + insertEmojiName.length,
         },
       });
       textareaRef?.current?.focus({
         preventScroll: true,
       });
     },
-    [textareaRef, state],
+    [textareaRef, state.cursorPos],
   );
 
   const setText = useCallback(

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

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

package/src/components/MessageInput/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 input styles
 .tui-message-input {
@@ -161,7 +161,7 @@ ul li {
 
   &:hover {
     @include theme() {
-      color: get(text-color-hover);
+      color: get(text-color-primary);
       background-color: get(dropdown-color-hover);
     }
   }

package/src/components/MessageList/MessageList.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import { Message } from '@tencentcloud/chat';
 import {
   useTUIChatStateContext,
@@ -30,7 +30,7 @@ function TUIMessageListWithContext<T extends MessageListProps>(
     className: propsClassName,
   } = props;
 
-  const { t } = useTranslation();
+  const { t } = useUIKit();
   const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
   const [firstRender, setFirstRender] = useState<boolean>(false);
   const {

package/src/components/MessageList/hooks/useMessageListElement.tsx

@@ -2,7 +2,8 @@ import React, {
   PropsWithChildren, useMemo,
 } from 'react';
 import { Message } from '@tencentcloud/chat';
-import { UnknowPorps, useUIKit } from '../../../context';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
+import { UnknowPorps } from '../../../context';
 import { TUIMessageProps } from '../../MessageElement/Message';
 import { getTimeStamp } from '../../utils';
 
@@ -20,7 +21,7 @@ function useMessageListElement<T extends MessageListElementProps>(
     TUIMessage,
     intervalsTimer,
   } = props;
-  const { language } = useUIKit('TUIConversation');
+  const { language } = useUIKit();
 
   return useMemo(() => enrichedMessageList?.map((item: Message, index: number) => {
     const key = `${item.ID}-${index}`;

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

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

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

@@ -1,4 +1,4 @@
-@use "../../../styles/colors/color-theme" as *;
+@use "~@tencentcloud/uikit-base-component-react/dist/styles/theme/util" as *;
 
 .plugin-popup {
   &-box {

package/src/components/Profile/Profile.tsx

@@ -4,7 +4,7 @@ import { MyProfile } from './myProfile/index';
 import './styles/index.scss';
 import { useMyProfile } from './hooks';
 import { TUIProfileDefault } from './ProfileDefault';
-import { useUIManager } from '../../context';
+import { useUIManagerStore } from '../../store';
 
 interface TUIProfileProps {
   className?: string;
@@ -21,7 +21,7 @@ function UnMemoizedProfile<T extends TUIProfileProps>(
 
   const { myProfile, updateMyProfile } = useMyProfile();
 
-  const { setTUIProfileShow, TUIProfileShow } = useUIManager('TUIProfile');
+  const { setTUIProfileShow, TUIProfileShow } = useUIManagerStore('TUIProfile');
 
   const TUIProfileUIComponent = PropTUIProfile || TUIProfileDefault;
 

package/src/components/Profile/ProfileDefault.tsx

@@ -1,10 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import DatePicker from 'react-date-picker';
+import { useUIKit } from '@tencentcloud/uikit-base-component-react';
 import TencentCloudChat, { Profile } from '@tencentcloud/chat';
 import { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine';
 import { isH5 } from '../../utils/env';
-import { useUIManager } from '../../context';
+import { useUIManagerStore } from '../../store';
 
 import { Avatar } from '../Avatar';
 import { DivWithEdit } from '../DivWithEdit';
@@ -72,8 +72,8 @@ function TUIProfileDefaultWithContext<T extends TUIProfileDefaultProps>(
     update,
   } = props;
 
-  const { t } = useTranslation();
-  const { setTUIProfileShow } = useUIManager('TUIProfileDefault');
+  const { t } = useUIKit();
+  const { setTUIProfileShow } = useUIManagerStore('TUIProfileDefault');
 
   const [isEditName, setIsEditName] = useState('');
 

package/src/components/Profile/myProfile/styles/index.scss

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

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

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

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

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

package/src/context/UIKitContext.tsx

@@ -1,12 +1,8 @@
 import { PropsWithChildren, useState, useContext, createContext, useEffect } from 'react';
-import type {
-  ChatSDK,
-  Conversation,
-} from '@tencentcloud/chat';
 import { TUILogin } from '@tencentcloud/tui-core';
 import { ThemeProvider, useTheme } from './ThemeContext';
 import { LanguageProvider, useLanguage } from './LanguageContext';
-import { UIManagerProvider } from './UIManagerContext';
+import type { ChatSDK, Conversation } from '@tencentcloud/chat';
 
 interface UIKitContextType {
   chat: ChatSDK;
@@ -47,9 +43,7 @@ function UIKitProvider(props: PropsWithChildren<UIKitProviderProps>) {
     <LanguageProvider language={language}>
       <ThemeProvider theme={theme} colors={colors}>
         <UIKitContext.Provider value={value}>
-          <UIManagerProvider activeConversation={activeConversation} customClasses={customClasses}>
-            {children}
-          </UIManagerProvider>
+          {children}
         </UIKitContext.Provider>
       </ThemeProvider>
     </LanguageProvider>

package/src/context/UIManagerContext.tsx

@@ -17,7 +17,7 @@ import {
   type IConversationModel,
 } from '@tencentcloud/chat-uikit-engine';
 import type { IGroupModel } from '@tencentcloud/chat-uikit-engine';
-import { useUIKit } from './UIKitContext';
+import { useUIManagerStore } from '../store';
 
 type blockData = {
   type: 'block';
@@ -66,20 +66,20 @@ type UIManagerContextType = {
 };
 
 type UIManagerProviderProps = {
-  customClasses: string;
   activeConversation: Conversation;
 };
 
+console.warn('UIManagerContext has been deprecated.');
+
 const UIManagerContext = React.createContext<UIManagerContextType | null>(null);
 
 function UIManagerProvider(props: PropsWithChildren<Partial<UIManagerProviderProps>>) {
   const {
-    customClasses,
     activeConversation,
     children,
   } = props;
 
-  const { chat } = useUIKit();
+  const { chat } = useUIManagerStore();
 
   const [conversation, setConversation] = useState<Conversation | undefined>(activeConversation);
   const [contactData, setContactData] = useState<UseContactParams>();
@@ -148,7 +148,7 @@ function UIManagerProvider(props: PropsWithChildren<Partial<UIManagerProviderPro
   );
 }
 
-const useUIManager = (componentName?: string) => {
+const useUIManager = (_componentName?: string) => {
   const context = useContext(UIManagerContext);
   if (!context) {
     throw new Error('useUIManager must be used within a UIManagerProvider');

package/src/context/index.ts

@@ -1,5 +1,4 @@
 export * from './UIKitContext';
-export * from './UIManagerContext';
 export * from './ChatStateContext';
 export * from './ChatActionContext';
 export * from './MessageContext';

package/src/locales/en-US/emoji.ts

@@ -0,0 +1,66 @@
+const emojiTranslation = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[RedPacket]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};
+
+export default emojiTranslation;

package/src/locales/en-US/index.ts

@@ -1,10 +1,12 @@
 import TUIChat from './TUIChat';
+import Emoji from './emoji';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
   TUIChat,
+  Emoji,
   TUIConversation,
   TUIContact,
   TUIProfile,

package/src/locales/index.ts

@@ -1,6 +1,4 @@
-import i18next from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { i18next } from '@tencentcloud/uikit-base-component-react';
 import { message as enMessage } from './en-US/index';
 import { message as zhMessage } from './zh-CN/index';
 import { message as jaMessage } from './ja-JP/index';
@@ -25,22 +23,6 @@ const resources: Record<string, any> = {
   },
 };
 
-i18next.use(initReactI18next).init({
-  resources,
-  lng: 'en-US',
-  interpolation: {
-    escapeValue: false,
-  },
-});
-
-const engineLocaleResources = {
-  'en-US': enMessage,
-  'zh-CN': zhMessage,
-  'ja-JP': jaMessage,
-  'ko-KR': koMessage,
-};
-TUITranslateService.provideLanguages(engineLocaleResources);
-TUITranslateService.useI18n('en-US');
-
-const { t } = i18next;
-export { i18next, t };
+for (const [lng, resource] of Object.entries(resources)) {
+  i18next.addResourceBundle(lng, 'translation', resource.translation, true, false);
+}

package/src/locales/ja-JP/emoji.ts

@@ -0,0 +1,66 @@
+const emojiTranslation = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[瞬き]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[親しみ]',
+  '[TUIEmoji_Haha]': '[笑い]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[言葉無し]',
+  '[TUIEmoji_Amazed]': '[驚き]',
+  '[TUIEmoji_Sorrow]': '[悲しみ]',
+  '[TUIEmoji_Complacent]': '[満足]',
+  '[TUIEmoji_Silly]': '[ばか]',
+  '[TUIEmoji_Lustful]': '[欲望]',
+  '[TUIEmoji_Giggle]': '[笑い]',
+  '[TUIEmoji_Kiss]': '[キス]',
+  '[TUIEmoji_Wail]': '[泣き]',
+  '[TUIEmoji_TearsLaugh]': '[泣き笑い]',
+  '[TUIEmoji_Trapped]': '[困り]',
+  '[TUIEmoji_Mask]': '[マスク]',
+  '[TUIEmoji_Fear]': '[恐怖]',
+  '[TUIEmoji_BareTeeth]': '[歯見せ]',
+  '[TUIEmoji_FlareUp]': '[怒り]',
+  '[TUIEmoji_Yawn]': '[あくび]',
+  '[TUIEmoji_Tact]': '[機知]',
+  '[TUIEmoji_Stareyes]': '[星目]',
+  '[TUIEmoji_ShutUp]': '[黙れ]',
+  '[TUIEmoji_Sigh]': '[ため息]',
+  '[TUIEmoji_Hehe]': '[へへ]',
+  '[TUIEmoji_Silent]': '[沈黙]',
+  '[TUIEmoji_Surprised]': '[驚き]',
+  '[TUIEmoji_Askance]': '[白目]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[モンスター]',
+  '[TUIEmoji_Daemon]': '[悪魔]',
+  '[TUIEmoji_Rage]': '[激怒]',
+  '[TUIEmoji_Fool]': '[バカ]',
+  '[TUIEmoji_Pig]': '[豚]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骸骨]',
+  '[TUIEmoji_Bombs]': '[爆弾]',
+  '[TUIEmoji_Coffee]': '[コーヒー]',
+  '[TUIEmoji_Cake]': '[ケーキ]',
+  '[TUIEmoji_Beer]': '[ビール]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[スイカ]',
+  '[TUIEmoji_Rich]': '[金持ち]',
+  '[TUIEmoji_Heart]': '[ハート]',
+  '[TUIEmoji_Moon]': '[月]',
+  '[TUIEmoji_Sun]': '[太陽]',
+  '[TUIEmoji_Star]': '[星]',
+  '[TUIEmoji_RedPacket]': '[紅包]',
+  '[TUIEmoji_Celebrate]': '[祝い]',
+  '[TUIEmoji_Bless]': '[祝福]',
+  '[TUIEmoji_Fortune]': '[幸運]',
+  '[TUIEmoji_Convinced]': '[納得]',
+  '[TUIEmoji_Prohibit]': '[禁止]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[ナイフ]',
+  '[TUIEmoji_Like]': '[いいね]',
+};
+
+export default emojiTranslation;

package/src/locales/ja-JP/index.ts

@@ -1,10 +1,12 @@
 import TUIChat from './TUIChat';
+import Emoji from './emoji';
 import TUIConversation from './TUIConversation';
 import TUIContact from './TUIContact';
 import TUIProfile from './TUIProfile';
 
 export const message = {
   TUIChat,
+  Emoji,
   TUIConversation,
   TUIContact,
   TUIProfile,