@tencentcloud/chat-uikit-react 0.0.2 → 1.0.0

package/src/components/TUIMessage/utils/emojiMap.ts

@@ -150,6 +150,150 @@ export const emojiMap:IEmojiMap = {
   '[鼓掌]': 'emoji_140@2x.png',
   '[龇牙]': 'emoji_141@2x.png',
 };
+export const emojiEnKey:IEmojiMap = {
+  '[NO]': '[no]',
+  '[OK]': '[ok]',
+  '[下雨]': '[rain]',
+  '[么么哒]': '[muah]',
+  '[乒乓]': '[ping pong]',
+  '[便便]': '[poo]',
+  '[信封]': '[mail]',
+  '[偷笑]': '[snicker]',
+  '[傲慢]': '[arrogant]',
+  '[再见]': '[bye]',
+  '[冷汗]': '[sweat]',
+  '[凋谢]': '[wither]',
+  '[刀]': '[knife]',
+  '[删除]': '[delete]',
+  '[勾引]': '[hook]',
+  '[发呆]': '[daze]',
+  '[发抖]': '[shaking]',
+  '[可怜]': '[pitiful]',
+  '[可爱]': '[cute]',
+  '[右哼哼]': '[right hum]',
+  '[右太极]': '[right Tai Chi]',
+  '[右车头]': '[right head]',
+  '[吐]': '[vomit]',
+  '[吓]': '[scare]',
+  '[咒骂]': '[curse]',
+  '[咖啡]': '[cafe]',
+  '[啤酒]': '[beer]',
+  '[嘘]': '[hiss]',
+  '[回头]': '[look back]',
+  '[困]': '[sleepy]',
+  '[坏笑]': '[bad laugh]',
+  '[多云]': '[cloud]',
+  '[大兵]': '[soldiers]',
+  '[大哭]': '[cry]',
+  '[太阳]': '[sun]',
+  '[奋斗]': '[struggle]',
+  '[奶瓶]': '[feeding bottle]',
+  '[委屈]': '[wronged]',
+  '[害羞]': '[shy]',
+  '[尴尬]': '[awkward]',
+  '[左哼哼]': '[left hem]',
+  '[左太极]': '[left Tai Chi]',
+  '[左车头]': '[left head]',
+  '[差劲]': '[poor]',
+  '[弱]': '[weak]',
+  '[强]': '[stong]',
+  '[彩带]': '[ribbon]',
+  '[彩球]': '[ball]',
+  '[得意]': '[proud]',
+  '[微笑]': '[smile]',
+  '[心碎了]': '[heartbroken]',
+  '[快哭了]': '[almost cry]',
+  '[怄火]': '[ire]',
+  '[怒]': '[anger]',
+  '[惊恐]': '[terrify]',
+  '[惊讶]': '[flummox]',
+  '[憨笑]': '[smirk]',
+  '[手枪]': '[gun]',
+  '[打哈欠]': '[yawn]',
+  '[抓狂]': '[crazy]',
+  '[折磨]': '[torment]',
+  '[抠鼻]': '[nose picking]',
+  '[抱抱]': '[hug]',
+  '[抱拳]': '[hug fist]',
+  '[拳头]': '[fist]',
+  '[挥手]': '[waving hands]',
+  '[握手]': '[shake hands]',
+  '[撇嘴]': '[pouted]',
+  '[擦汗]': '[wipe sweat]',
+  '[敲打]': '[knock on the head]',
+  '[晕]': '[faint]',
+  '[月亮]': '[moon]',
+  '[棒棒糖]': '[lollipop]',
+  '[汽车]': '[car]',
+  '[沙发]': '[sofa]',
+  '[流汗]': '[sweat]',
+  '[流泪]': '[tears]',
+  '[激动]': '[excitement]',
+  '[灯泡]': '[light]',
+  '[炸弹]': '[bomb]',
+  '[熊猫]': '[panda]',
+  '[爆筋]': '[exploding muscle]',
+  '[爱你]': '[love you]',
+  '[爱心]': '[love heart]',
+  '[爱情]': '[love]',
+  '[猪头]': '[pig]',
+  '[猫咪]': '[cat]',
+  '[献吻]': '[kiss]',
+  '[玫瑰]': '[rose]',
+  '[瓢虫]': '[ladybird]',
+  '[疑问]': '[what]',
+  '[白眼]': '[rolling eyes]',
+  '[皮球]': '[rubber ball]',
+  '[睡觉]': '[sleep]',
+  '[磕头]': '[kowtow]',
+  '[示爱]': '[show love]',
+  '[礼品袋]': '[gift bag]',
+  '[礼物]': '[gift]',
+  '[篮球]': '[basketball]',
+  '[米饭]': '[rice]',
+  '[糗大了]': '[shame]',
+  '[红双喜]': '[happiness]',
+  '[红灯笼]': '[lantern]',
+  '[纸巾]': '[tissue]',
+  '[胜利]': '[victory]',
+  '[色]': '[lecherous]',
+  '[药]': '[medicine]',
+  '[菜刀]': '[kitchen knife]',
+  '[蛋糕]': '[coke]',
+  '[蜡烛]': '[candle]',
+  '[街舞]': '[hip hop]',
+  '[衰]': '[decline]',
+  '[西瓜]': '[lemon]',
+  '[调皮]': '[naughty]',
+  '[象棋]': '[chess]',
+  '[跳绳]': '[jump rope]',
+  '[跳跳]': '[jump]',
+  '[车厢]': '[compartment]',
+  '[转圈]': '[turn in circles]',
+  '[鄙视]': '[contempt]',
+  '[酷]': '[cool]',
+  '[钞票]': '[money]',
+  '[钻戒]': '[diamond]',
+  '[闪电]': '[lightning]',
+  '[闭嘴]': '[shut up]',
+  '[闹钟]': '[clock]',
+  '[阴险]': '[sinister]',
+  '[难过]': '[sad]',
+  '[雨伞]': '[umbrella]',
+  '[青蛙]': '[frog]',
+  '[面条]': '[noodles]',
+  '[鞭炮]': '[firecracker]',
+  '[风车]': '[windmill]',
+  '[飞吻]': '[blow kisses]',
+  '[飞机]': '[air]',
+  '[饥饿]': '[hunger]',
+  '[香蕉]': '[banana]',
+  '[骷髅]': '[skull]',
+  '[麦克风]': '[mic]',
+  '[麻将]': '[mahjong]',
+  '[鼓掌]': '[handclap]',
+  '[龇牙]': '[happy]',
+};
 export const emojiName:Array<string> = [
   '[龇牙]',
   '[调皮]',
@@ -309,3 +453,40 @@ export const bigEmojiList:Array<IBigEmojiListItem> = [
       'gcs08', 'gcs09', 'gcs10', 'gcs11', 'gcs12', 'gcs13', 'gcs14', 'gcs15', 'gcs16'],
   },
 ];
+
+/**
+ * Convert to expression key
+ * @param { string } data text
+ * @param { number } type 0:Convert to Chinese expression key 1: Convert to English expression key
+ * @returns { string } the converted text
+ */
+export function formatEmojiString(data: string, type = 0) {
+  let text = data;
+  const replace = {
+    key: type === 0 ? 1 : 0,
+    value: type,
+  };
+  Object.entries(emojiEnKey).map((item) => {
+    if (text.includes(item[replace.key])) {
+      text = transText(text, item[replace.key], item[replace.value]);
+    }
+    return item;
+  });
+  return text;
+}
+
+/**
+ * recursive replacement text
+ * @param { string } data text
+ * @param { string } replaceVal the value to replace
+ * @param { string } value replace Value
+ * @returns { string } the replaced value
+ */
+function transText(data: string, replaceVal:string, value: string) {
+  let text = data;
+  text = text.replace(replaceVal, value);
+  if (text.includes(replaceVal)) {
+    text = transText(text, replaceVal, value);
+  }
+  return text;
+}

package/src/components/TUIMessage/utils/index.ts

@@ -118,21 +118,21 @@ export function handleTipMessageShowContext(message: Message) {
   }
   switch (message.payload.operationType) {
     case TIM.TYPES.GRP_TIP_MBR_JOIN:
-      options.text = `${userName} ${t('message.tip.加入群组')}`;
+      options.text = `${userName} ${t('message.tip.Join in group')}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_QUIT:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.退出群组')}`;
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.quit group')}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.被')}${message.payload.operatorID}${t(
-        'message.tip.踢出群组',
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by')}${message.payload.operatorID}${t(
+        'message.tip.kicked out of group',
       )}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.成为管理员')}`;
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.become admin')}`;
       break;
     case TIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
-      options.text = `${t('message.tip.群成员')}：${userName} ${t('message.tip.被撤销管理员')}`;
+      options.text = `${t('message.tip.member')}：${userName} ${t('message.tip.by revoked administrator')}`;
       break;
     case TIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
       // options.text =  `${userName} 修改群组资料`;
@@ -141,15 +141,15 @@ export function handleTipMessageShowContext(message: Message) {
     case TIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
       message.payload.memberList.map((member:any) => {
         if (member.muteTime > 0) {
-          options.text = `${t('message.tip.群成员')}：${member.userID}${t('message.tip.被禁言')}`;
+          options.text = `${t('message.tip.member')}：${member.userID}${t('message.tip.muted')}`;
         } else {
-          options.text = `${t('message.tip.群成员')}：${member.userID}${t('message.tip.被取消禁言')}`;
+          options.text = `${t('message.tip.member')}：${member.userID}${t('message.tip.unmuted')}`;
         }
         return member;
       });
       break;
     default:
-      options.text = `[${t('message.tip.群提示消息')}]`;
+      options.text = `[${t('message.tip.reminder message')}]`;
       break;
   }
   return options;
@@ -164,19 +164,19 @@ function handleTipGrpUpdated(message: Message) {
   switch (name) {
     case 'muteAllMembers':
       if (newGroupProfile[name]) {
-        text = `${t('message.tip.管理员')} ${operatorID} ${t('message.tip.开启全员禁言')}`;
+        text = `${t('message.tip.admin')} ${operatorID} ${t('message.tip.enable all staff mute')}`;
       } else {
-        text = `${t('message.tip.管理员')} ${operatorID} ${t('message.tip.取消全员禁言')}`;
+        text = `${t('message.tip.admin')} ${operatorID} ${t('message.tip.unmute everyone')}`;
       }
       break;
     case 'ownerID':
-      text = `${newGroupProfile[name]} ${t('message.tip.成为新的群主')}`;
+      text = `${newGroupProfile[name]} ${t('message.tip.become the new owner')}`;
       break;
     case 'groupName':
-      text = `${operatorID} ${t('message.tip.修改群名为')} ${newGroupProfile[name]}`;
+      text = `${operatorID} ${t('message.tip.modify group name')} ${newGroupProfile[name]}`;
       break;
     case 'notification':
-      text = `${operatorID} ${t('message.tip.发布新公告')}`;
+      text = `${operatorID} ${t('message.tip.post a new announcement')}`;
       break;
     default:
       break;

package/src/components/TUIMessageInput/EmojiPicker.tsx

@@ -3,7 +3,8 @@ import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext'
 import { Icon, IconTypes } from '../Icon';
 import { Popup } from '../Popup';
 import {
-  emojiUrl, emojiName, emojiMap, bigEmojiList, faceUrl, IBigEmojiListItem,
+  emojiUrl, emojiName, emojiMap,
+  // bigEmojiList, faceUrl, IBigEmojiListItem,
 } from '../TUIMessage/utils/emojiMap';
 
 import type { EmojiData } from './hooks';
@@ -11,6 +12,7 @@ import type { EmojiData } from './hooks';
 export function EmojiPicker():React.ReactElement {
   const [show, setShow] = useState(false);
   const [index, setIndex] = useState(0);
+  const [className, setClassName] = useState('');
 
   const handleShow = () => {
     setShow(!show);
@@ -36,13 +38,18 @@ export function EmojiPicker():React.ReactElement {
     }
   };
 
+  const handleVisible = (data) => {
+    setClassName(`${!data.top && 'emoji-plugin-top'} ${!data.left && 'emoji-plugin-right'}`);
+  };
+
   return (
     <div className="emoji-picker input-plugin-popup">
       <Icon width={20} height={20} type={IconTypes.EMOJI} onClick={handleShow} />
       <Popup
-        className="input-plugin-popup-box"
+        className={`input-plugin-popup-box ${className}`}
         show={show}
         close={handleShow}
+        handleVisible={handleVisible}
       >
         <ul className="face-list">
           {

package/src/components/TUIMessageInput/InputPluginsDefalut.tsx

@@ -7,18 +7,85 @@ import { useUploadElement } from './hooks/useUploadElement';
 import { MESSAGE_TYPE_NAME } from '../../constants';
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
 import { Icon, IconTypes } from '../Icon';
+import { useTUIChatStateContext } from '../../context';
 
 export function InputPluginsDefalut():React.ReactElement {
   const {
     sendUploadMessage,
-    plugins: propPlugins,
-    showNumber,
-    MoreIcon,
+    // pluginConfig: {
+    //   plugins: propsPlugins,
+    //   showNumber: propsShowNumber,
+    //   MoreIcon: propsMoreIcon,
+    //   isEmojiPicker: porpsIsEmojiPicker,
+    //   isImagePicker: porpsIsImagePicker,
+    //   isVideoPicker: porpsIsVideoPicker,
+    //   isFilePicker: porpsIsFilePicker,
+    // },
+    pluginConfig: propsPluginConfig,
   } = useTUIMessageInputContext('TUIMessageInputDefault');
 
+  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
+
+  // const {
+  //   pluginConfig: {
+  //     plugins: contextPlugins,
+  //     showNumber: contextShowNumber,
+  //     MoreIcon: contextMoreIcon,
+  //     isEmojiPicker: contextIsEmojiPicker,
+  //     isImagePicker: contextIsImagePicker,
+  //     isVideoPicker: contextIsVideoPicker,
+  //     isFilePicker: contextIsFilePicker,
+  //   },
+  // } = TUIMessageInputConfig;
+
+  // const propPlugins = propsPlugins || contextPlugins || [];
+  // const showNumber = propsShowNumber || contextShowNumber || 1;
+  // const MoreIcon = propsMoreIcon || contextMoreIcon;
+
+  const propPlugins = propsPluginConfig?.plugins
+  || TUIMessageInputConfig?.pluginConfig?.plugins || [];
+  const showNumber = propsPluginConfig?.showNumber
+  || TUIMessageInputConfig?.pluginConfig?.showNumber || 1;
+  const MoreIcon = propsPluginConfig?.MoreIcon || TUIMessageInputConfig?.pluginConfig?.MoreIcon;
+
+  const handlePluginBoolenParams = (
+    porpsVal?:boolean | undefined,
+    contextVal?:boolean | undefined,
+    defaultVal?: boolean,
+  ) => {
+    if (typeof (porpsVal) === 'boolean') {
+      return porpsVal;
+    }
+    if (typeof (contextVal) === 'boolean') {
+      return contextVal;
+    }
+    return defaultVal;
+  };
+
+  const isEmojiPicker = handlePluginBoolenParams(
+    propsPluginConfig?.isEmojiPicker,
+    TUIMessageInputConfig?.pluginConfig?.isEmojiPicker,
+    true,
+  );
+  const isImagePicker = handlePluginBoolenParams(
+    propsPluginConfig?.isImagePicker,
+    TUIMessageInputConfig?.pluginConfig?.isImagePicker,
+    true,
+  );
+  const isVideoPicker = handlePluginBoolenParams(
+    propsPluginConfig?.isVideoPicker,
+    TUIMessageInputConfig?.pluginConfig?.isVideoPicker,
+    true,
+  );
+  const isFilePicker = handlePluginBoolenParams(
+    propsPluginConfig?.isFilePicker,
+    TUIMessageInputConfig?.pluginConfig?.isFilePicker,
+    true,
+  );
+
   const pluginsRef = useRef(null);
 
-  const ImagePicker = useUploadElement({
+  const ImagePicker = isImagePicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.IMAGE} />
@@ -33,7 +100,7 @@ export function InputPluginsDefalut():React.ReactElement {
     },
   });
 
-  const VideoPicker = useUploadElement({
+  const VideoPicker = isVideoPicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.VIDEO} />
@@ -48,7 +115,7 @@ export function InputPluginsDefalut():React.ReactElement {
     },
   });
 
-  const FilePicker = useUploadElement({
+  const FilePicker = isFilePicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
         <Icon width={20} height={20} type={IconTypes.DOCUMENT} />
@@ -62,8 +129,9 @@ export function InputPluginsDefalut():React.ReactElement {
       sendUploadMessage({ file }, MESSAGE_TYPE_NAME.FILE);
     },
   });
-  const plugins = propPlugins
-  || [<EmojiPicker />, ImagePicker, VideoPicker, FilePicker];
+  const plugins = [
+    isEmojiPicker && <EmojiPicker />, ImagePicker, VideoPicker, FilePicker, ...propPlugins,
+  ].filter((item) => item);
 
   return <Plugins ref={pluginsRef} plugins={plugins} showNumber={showNumber} MoreIcon={MoreIcon} />;
 }

package/src/components/TUIMessageInput/InputQuoteDefalut.tsx

@@ -6,6 +6,7 @@ import { useTUIChatActionContext } from '../../context';
 import { Icon, IconTypes } from '../Icon';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useHandleQuoteMessage } from './hooks/useHandleQuoteMessage';
+import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
 interface InputQuoteProps {
   message?: Message
@@ -33,7 +34,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>{context?.messageAbstract}</span>
+        <span>{formatEmojiString(context?.messageAbstract, 1)}</span>
       </div>
       <Icon className="icon" width={12} height={12} type={IconTypes.CLOSE} onClick={handleClose} />
     </div>

package/src/components/TUIMessageInput/TUIMessageInput.tsx

@@ -14,43 +14,58 @@ import { InputQuoteDefalut } from './InputQuoteDefalut';
 import { TUIMessageInputDefault } from './TUIMessageInputDefault';
 import { InputPluginsDefalut } from './InputPluginsDefalut';
 import { TUIForward } from './TUIForward';
+import { Transmitter } from './Transmitter';
 
-export interface TUIMessageInputProps {
+export interface PluginConfigProps {
+  plugins?: Array<React.ReactElement>,
+  showNumber?: number,
+  MoreIcon?: React.ReactElement,
+  isEmojiPicker?: boolean,
+  isImagePicker?: boolean,
+  isVideoPicker?: boolean,
+  isFilePicker?: boolean,
+}
+
+export interface TUIMessageInputBasicProps {
   disabled?: boolean,
+  focus?: boolean,
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  isTransmitter?: boolean,
+  className?: string,
+  pluginConfig?: PluginConfigProps,
+}
+
+export interface TUIMessageInputProps extends TUIMessageInputBasicProps {
   TUIMessageInput?: React.ComponentType,
   InputPlugins?: React.ComponentType<UnknowPorps>,
   InputQuote?: React.ComponentType<UnknowPorps>,
-  focus?: boolean,
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  plugins?: Array<React.ReactElement>,
-  showNumber?: number,
-  MoreIcon?: React.ReactElement,
 }
+
 function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
 :React.ReactElement {
   const {
     children,
     disabled: propsDisabled,
-    focus = true,
-    plugins,
-    showNumber = 1,
-    MoreIcon,
+    focus: propsFoces,
+    pluginConfig,
+    textareaRef: propsTextareaRef,
   } = props;
   const messageInputState = useMessageInputState(props);
-  const { conversation } = useTUIKitContext('TUIMessageInput');
-  const { textareaRef } = useTUIChatStateContext('TUIMessageInput');
+  const { textareaRef, conversation } = useTUIChatStateContext('TUIMessageInput');
+
+  const contextDisabled = conversation?.type === TIM.TYPES.CONV_SYSTEM;
+
+  const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
 
-  const contextDisabled = conversation.type === TIM.TYPES.CONV_SYSTEM;
+  const focus = propsFoces || TUIMessageInputConfig?.focus;
 
   const messageInputContextValue = useCreateMessageInputContext({
     ...messageInputState,
     ...props,
-    textareaRef,
-    disabled: propsDisabled || contextDisabled,
-    focus,
-    plugins,
-    showNumber,
-    MoreIcon,
+    textareaRef: propsTextareaRef || TUIMessageInputConfig?.textareaRef || textareaRef,
+    disabled: propsDisabled || TUIMessageInputConfig?.disabled || contextDisabled,
+    focus: typeof (focus) === 'boolean' ? focus : true,
+    pluginConfig,
   });
 
   return (
@@ -66,6 +81,8 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
     TUIMessageInput: PropTUIMessageInput,
     InputPlugins: PropInputPlugins,
     InputQuote: PropInputQuote,
+    isTransmitter = false,
+    className,
   } = props;
 
   const {
@@ -78,13 +95,16 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
   || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
   const InputQuote = PropInputQuote || ContextInputQuote || InputQuoteDefalut;
   return (
-    <div className="tui-message-input">
+    <div className={`tui-message-input ${className}`}>
       <TUIMessageInputProvider {...props}>
         <TUIForward />
         <InputQuote />
         <div className="tui-message-input-main">
-          <InputPlugins />
-          <Input />
+          <div className="tui-message-input-box">
+            <InputPlugins />
+            <Input />
+          </div>
+          {isTransmitter && <Transmitter />}
         </div>
       </TUIMessageInputProvider>
     </div>

package/src/components/TUIMessageInput/TUIMessageInputDefault.tsx

@@ -3,6 +3,7 @@ import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
 
 import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
 
 export function TUIMessageInputDefault():React.ReactElement {
   const {
@@ -23,7 +24,7 @@ export function TUIMessageInputDefault():React.ReactElement {
   // operateData
   useEffect(() => {
     if (operateData[MESSAGE_OPERATE.REVOKE]) {
-      setText(operateData[MESSAGE_OPERATE.REVOKE].payload.text);
+      setText(formatEmojiString(operateData[MESSAGE_OPERATE.REVOKE].payload.text, 1));
     }
   }, [operateData]);
 

package/src/components/TUIMessageInput/Transmitter.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { Icon, IconTypes } from '../Icon';
+
+export function Transmitter():React.ReactElement {
+  const {
+    handleSubmit,
+  } = useTUIMessageInputContext('Transmitter');
+
+  return (
+    <div className="transmitter">
+      <Icon className="icon-send" type={IconTypes.SEND} onClick={handleSubmit} />
+    </div>
+  );
+}

package/src/components/TUIMessageInput/hooks/useCreateMessageInputContext.ts

@@ -11,9 +11,7 @@ export const useCreateMessageInputContext = (value:any) => {
     disabled,
     focus,
     operateData,
-    plugins,
-    showNumber,
-    MoreIcon,
+    pluginConfig,
   } = value;
   const messageInputContext = useMemo(
     () => ({
@@ -26,9 +24,7 @@ export const useCreateMessageInputContext = (value:any) => {
       disabled,
       focus,
       operateData,
-      plugins,
-      showNumber,
-      MoreIcon,
+      pluginConfig,
       ...value,
     }),
     [
@@ -40,10 +36,8 @@ export const useCreateMessageInputContext = (value:any) => {
       sendFaceMessage,
       disabled,
       focus,
-      plugins,
-      showNumber,
-      MoreIcon,
       operateData,
+      pluginConfig,
     ],
   );
 

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

@@ -4,6 +4,7 @@ import {
   useCallback,
 } from 'react';
 import { useTUIChatActionContext } from '../../../context';
+import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface EmojiData {
@@ -25,7 +26,7 @@ export function useEmojiPicker<T extends useEmojiPickerProps>(props:PropsWithChi
   const { sendMessage, createFaceMessage } = useTUIChatActionContext('useEmojiPicker');
 
   const onSelectEmoji = (emoji:EmojiData) => {
-    insertText(emoji.data);
+    insertText(emojiEnKey[emoji.data]);
   };
 
   const sendFaceMessage = useCallback((emoji:EmojiData) => {

package/src/components/TUIMessageInput/hooks/useMessageInputState.tsx

@@ -51,6 +51,13 @@ const reducer = (state:IinitState, action) => {
 export const useMessageInputState = (props:TUIMessageInputProps) => {
   const [state, dispatch] = useReducer(reducer, initState);
   const { focus, textareaRef } = props;
+
+  const {
+    sendUploadMessage,
+  } = useUploadPicker({
+    state,
+    dispatch,
+  });
   const {
     handleChange,
     handleSubmit,
@@ -64,6 +71,7 @@ export const useMessageInputState = (props:TUIMessageInputProps) => {
     dispatch,
     textareaRef,
     focus,
+    sendUploadMessage,
   });
 
   const {
@@ -76,13 +84,6 @@ export const useMessageInputState = (props:TUIMessageInputProps) => {
     insertText,
   });
 
-  const {
-    sendUploadMessage,
-  } = useUploadPicker({
-    state,
-    dispatch,
-  });
-
   return {
     ...state,
     handleChange,