@tencentcloud/chat-uikit-react 0.0.3 → 1.0.0

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

@@ -12,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);
@@ -37,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/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/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,

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

@@ -2,22 +2,21 @@ import React, {
   useCallback,
   ChangeEventHandler,
   MutableRefObject,
-  useEffect,
-  useState,
 } from 'react';
-import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE } from '../../../constants';
+import { CONSTANT_DISPATCH_TYPE, MESSAGE_OPERATE, MESSAGE_TYPE_NAME } from '../../../constants';
 import {
   useTUIChatActionContext,
-  useTUIChatStateContext,
   useTUIKitContext,
 } from '../../../context';
 import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
+import { filesData } from './useUploadPicker';
 
 interface useMessageInputTextProps extends IbaseStateProps {
   focus?: boolean,
   textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
+  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void
 }
 
 export const useMessageInputText = (props:useMessageInputTextProps) => {
@@ -26,19 +25,11 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     dispatch,
     focus,
     textareaRef,
+    sendUploadMessage,
   } = props;
 
-  const [quoteMessage, setQuoteMessage] = useState(null);
-
   const { tim } = useTUIKitContext('useMessageInputText');
   const { sendMessage, createTextMessage, operateMessage } = useTUIChatActionContext('TUIMessageInput');
-  const {
-    operateData,
-  } = useTUIChatStateContext('TUIMessageInputDefault');
-
-  useEffect(() => {
-    setQuoteMessage(operateData[MESSAGE_OPERATE.QUOTE]);
-  }, [operateData]);
 
   const { cloudCustomData } = useHandleQuoteMessage();
 
@@ -101,27 +92,34 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
   );
 
   const handlePasete = useCallback(
-    async (e: ClipboardEvent) => {
+    async (e: React.ClipboardEvent | any) => {
       e.preventDefault();
       if (!(e.clipboardData && e.clipboardData.items)) {
         return;
       }
-      const str = formatEmojiString(e.clipboardData.getData('text'), 1);
-      if (str) {
-        dispatch({
-          type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-          getNewText: (text:string) => `${text}${str}`,
-        });
-      }
-      //  else {
-      //   for (let i = 0; i < e.clipboardData.items.length; i += 1) {
-      //     const item = e.clipboardData.items[i];
-      //     if (item.kind === 'file') {
-      //       const f = item.getAsFile();
-      //       console.log('file', f);
-      //     }
-      //   }
-      // }
+      const { types, items } = e.clipboardData;
+      types.find((type, index) => {
+        const item = items[index];
+        switch (type) {
+          case 'text/plain':
+            item.getAsString((str) => {
+              dispatch({
+                type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
+                getNewText: (text:string) => `${text}${str}`,
+              });
+            });
+            return true;
+          case 'Files': {
+            const file = item.getAsFile();
+            if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
+              sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
+            }
+            return true;
+          }
+          default:
+            return false;
+        }
+      });
     },
     [textareaRef],
   );

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

@@ -16,6 +16,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     createImageMessage,
     createVideoMessage,
     createFileMessage,
+    updataUploadPenddingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
 
   const creatUploadMessage = {
@@ -29,6 +30,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
       payload: file,
       onProgress(num:number) {
         message.progress = num;
+        updataUploadPenddingMessageList(message);
       },
     });
     sendMessage(message);

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

@@ -7,6 +7,7 @@
     display: flex;
     align-items: center;
     padding: 14px 12px;
+    gap: 12px;
     .input-box {
       flex: 1;
       display: flex;
@@ -55,6 +56,11 @@
       display: none;
     }
   }
+  &-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+  }
 }
 
 ul li {
@@ -115,6 +121,9 @@ ul li {
       }
     }
   }
+  .emoji-plugin-right {
+    right: 0;
+  }
 }
 
 
@@ -279,4 +288,11 @@ ul li {
       -webkit-box-orient: vertical;
     }
   }
+}
+
+.transmitter {
+  padding: 0 10px;
+  .icon-send {
+    transform: rotate(90deg);
+  }
 }

package/src/components/TUIMessageList/TUIMessageList.tsx

@@ -14,9 +14,11 @@ import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyState
 
 import './styles/index.scss';
 
-interface MessageListProps extends InfiniteScrollProps {
+export interface MessageListProps extends InfiniteScrollProps {
+  className?: string,
   messageList?: Array<Message>,
   highlightedMessageId?: string,
+  intervalsTimer?: number,
 }
 function TUIMessageListWithContext <T extends MessageListProps>(
   props: PropsWithChildren<T>,
@@ -25,6 +27,7 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     messageList: propsMessageList,
     highlightedMessageId: propsHighlightedMessageId,
     loadMore: propsLoadMore,
+    intervalsTimer: propsIntervalsTimer,
   } = props;
 
   const [ulElement, setUlElement] = useState<HTMLUListElement | null>(null);
@@ -37,20 +40,26 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     isSameLastMessageID,
     messageListRef,
     noMore,
+    TUIMessageListConfig,
   } = useTUIChatStateContext('TUIMessageList');
-  const { loadMore: contextLoadMore } = useTUIChatActionContext('TUIMessageList');
+  const { loadMore: contextLoadMore, setHighlightedMessageId } = useTUIChatActionContext('TUIMessageList');
   const { TUIMessage, EmptyStateIndicator = DefaultEmptyStateIndicator } = useComponentContext('TUIMessageList');
-  const highlightedMessageId = propsHighlightedMessageId || contextHighlightedMessageId;
+
+  const highlightedMessageId = propsHighlightedMessageId
+  || TUIMessageListConfig?.highlightedMessageId
+  || contextHighlightedMessageId;
+  const intervalsTimer = (propsIntervalsTimer || TUIMessageListConfig?.intervalsTimer || 30) * 60;
 
   const { messageList: enrichedMessageList } = useEnrichedMessageList({
-    messageList: propsMessageList || contextMessageList,
+    messageList: propsMessageList || TUIMessageListConfig?.messageList || contextMessageList,
   });
 
-  const loadMore = propsLoadMore || contextLoadMore;
+  const loadMore = propsLoadMore || TUIMessageListConfig?.loadMore || contextLoadMore;
 
   const elements = useMessageListElement({
     enrichedMessageList,
     TUIMessage,
+    intervalsTimer,
   });
 
   useEffect(() => {
@@ -59,10 +68,6 @@ function TUIMessageListWithContext <T extends MessageListProps>(
       if (!isCompleted && parentElement?.clientHeight >= ulElement?.clientHeight) {
         await loadMore();
       }
-      if (highlightedMessageId) {
-        const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
-        element?.scrollIntoView({ block: 'center' });
-      }
 
       if (ulElement?.children && (!firstRender || !isSameLastMessageID)) {
         const HTMLCollection = ulElement?.children || [];
@@ -76,8 +81,25 @@ function TUIMessageListWithContext <T extends MessageListProps>(
     })();
   }, [elements, firstRender]);
 
+  useEffect(() => {
+    if (highlightedMessageId) {
+      const element = ulElement?.querySelector(`[data-message-id='${highlightedMessageId}']`);
+      if (!element) {
+        return;
+      }
+      const { children } = element.children[1];
+      children[children.length - 1].classList.add('high-lighted');
+      element?.scrollIntoView({ block: 'center' });
+      const timer = setTimeout(() => {
+        children[children.length - 1].classList.remove('high-lighted');
+        clearTimeout(timer);
+        setHighlightedMessageId('');
+      }, 1000);
+    }
+  }, [highlightedMessageId]);
+
   return (
-    <div className="message-list" ref={messageListRef}>
+    <div className={`message-list ${!firstRender ? 'hide' : ''}`} ref={messageListRef}>
       {noMore}
       {noMore && <p className="no-more">no More</p>}
       <InfiniteScroll