@tencentcloud/chat-uikit-react 2.2.6 → 2.2.8

package/src/components/{TUIMessageInput/TUIForward.tsx → MessageInput/Forward.tsx}

@@ -15,17 +15,17 @@ import { MESSAGE_OPERATE } from '../../constants';
 import { useHandleForwardMessage } from './hooks';
 
 interface HandleForwardParams {
-  list?:Array<Conversation>,
-  message?:Message,
+  list?: Conversation[];
+  message?: Message;
 }
 
 interface TUIForwardToProps {
-  handleForward?: (data:HandleForwardParams) => void,
+  handleForward?: (data: HandleForwardParams) => void;
 }
 
-export function TUIForward <T extends TUIForwardToProps>(
+export function Forward<T extends TUIForwardToProps>(
   props: PropsWithChildren<T>,
-):React.ReactElement {
+): React.ReactElement {
   const {
     handleForward: propsHandleForward,
   } = props;
@@ -39,7 +39,6 @@ export function TUIForward <T extends TUIForwardToProps>(
   const { message, sendForwardMessage, conversationList = [] } = useHandleForwardMessage();
 
   const handleClose = useCallback(() => {
-    
     operateMessage && operateMessage({
       // eslint-disable-next-line
       // @ts-ignore
@@ -47,7 +46,7 @@ export function TUIForward <T extends TUIForwardToProps>(
     });
   }, [operateMessage]);
 
-  //const FrequentlyList = conversationList.slice(0, 2);
+  // const FrequentlyList = conversationList.slice(0, 2);
   const RecentList = conversationList;
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -70,7 +69,7 @@ export function TUIForward <T extends TUIForwardToProps>(
       // @ts-ignore
       setSelectList([...selectList, e.value]);
     } else {
-      setSelectList(selectList.filter((item) => item !== e.value));
+      setSelectList(selectList.filter(item => item !== e.value));
     }
   };
 
@@ -104,7 +103,7 @@ export function TUIForward <T extends TUIForwardToProps>(
   // @ts-ignore
   return message && conversationList.length > 0 && (
     <Model onClick={handleClose}>
-      <div role="button" tabIndex={0} className="tui-forward" onClick={(e) => {stopPropagation(e)}}>
+      <div role="button" tabIndex={0} className="tui-forward" onClick={(e) => { stopPropagation(e); }}>
         <header className="tui-forward-header">
           <Icon
             type={IconTypes.CANCEL}
@@ -127,33 +126,33 @@ export function TUIForward <T extends TUIForwardToProps>(
         <main className="tui-forward-main">
           {
             searchValue && (
-            <ul className="tui-forward-list">
-              <h3 className="tui-forward-list-title">{t('TUIChat.Search Result')}</h3>
-              {
-                searchResult.length > 0 && searchResult.map((item: any) => (
-                  <li key={item.conversationID} className="tui-forward-list-item">
-                    <label htmlFor={`${item.conversationID}`} className="info">
-                      <Avatar image={getDisplayImage(item)} size={40} />
-                      <div className="info-nick">{getDisplayTitle(item)}</div>
-                    </label>
-                    <Checkbox
-                      onChange={(e) => {handleCheckboxChange(e)}}
-                      id={`${item.conversationID}`}
-                      value={item}
-                    />
-                  </li>
-                ))
-              }
-              {
-              searchResult.length === 0
-              && <p className="no-result">{t('TUIChat.No Result')}</p>
-              }
-            </ul>
+              <ul className="tui-forward-list">
+                <h3 className="tui-forward-list-title">{t('TUIChat.Search Result')}</h3>
+                {
+                  searchResult.length > 0 && searchResult.map((item: any) => (
+                    <li key={item.conversationID} className="tui-forward-list-item">
+                      <label htmlFor={`${item.conversationID}`} className="info">
+                        <Avatar image={getDisplayImage(item)} size={40} />
+                        <div className="info-nick">{getDisplayTitle(item)}</div>
+                      </label>
+                      <Checkbox
+                        onChange={(e) => { handleCheckboxChange(e); }}
+                        id={`${item.conversationID}`}
+                        value={item}
+                      />
+                    </li>
+                  ))
+                }
+                {
+                  searchResult.length === 0
+                  && <p className="no-result">{t('TUIChat.No Result')}</p>
+                }
+              </ul>
             )
           }
           { !searchValue && RecentList.length > 0 && (
-          <ul className="tui-forward-list">
-            {
+            <ul className="tui-forward-list">
+              {
                 RecentList.map((item: any) => (
                   <li key={item.conversationID} className="tui-forward-list-item">
                     <label htmlFor={`${item.conversationID}`} className="info">
@@ -168,13 +167,19 @@ export function TUIForward <T extends TUIForwardToProps>(
                   </li>
                 ))
               }
-          </ul>
+            </ul>
           )}
         </main>
         <footer className="tui-forward-footer">
           <div className="tui-forward-footer-name">{selectList.length > 0 && handleDisplayForwardName(selectList)}</div>
-          <button type="button" className="button" onClick={handleForward} 
-          disabled={selectList.length === 0}>{t('TUIChat.Forward')}</button>
+          <button
+            type="button"
+            className="button"
+            onClick={handleForward}
+            disabled={selectList.length === 0}
+          >
+            {t('TUIChat.Forward')}
+          </button>
         </footer>
       </div>
     </Model>

package/src/components/{TUIMessageInput → MessageInput}/InputPluginsDefalut.tsx

@@ -4,13 +4,13 @@ import './styles/index.scss';
 
 import { EmojiPicker } from './EmojiPicker';
 import { Plugins } from '../Plugins';
-import { IPluginsRef } from '../ConversationPreview';
+import { IPluginsRef } from '../Plugins';
 import { useUploadElement } from './hooks/useUploadElement';
 import { MESSAGE_TYPE_NAME } from '../../constants';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 import { useTUIChatStateContext } from '../../context';
-export function InputPluginsDefalut():React.ReactElement {
+export function InputPluginsDefalut(): React.ReactElement {
   const {
     sendUploadMessage,
     pluginConfig: propsPluginConfig,
@@ -20,14 +20,14 @@ export function InputPluginsDefalut():React.ReactElement {
   const { TUIMessageInputConfig } = useTUIChatStateContext('TUIMessageInput');
 
   const propPlugins = propsPluginConfig?.plugins
-  || TUIMessageInputConfig?.pluginConfig?.plugins || [];
+    || TUIMessageInputConfig?.pluginConfig?.plugins || [];
   const showNumber = propsPluginConfig?.showNumber
-  || TUIMessageInputConfig?.pluginConfig?.showNumber || 1;
+    || TUIMessageInputConfig?.pluginConfig?.showNumber || 1;
   const MoreIcon = propsPluginConfig?.MoreIcon || TUIMessageInputConfig?.pluginConfig?.MoreIcon;
 
   const handlePluginBoolenParams = (
-    porpsVal?:boolean | undefined,
-    contextVal?:boolean | undefined,
+    porpsVal?: boolean | undefined,
+    contextVal?: boolean | undefined,
     defaultVal?: boolean,
   ) => {
     if (typeof (porpsVal) === 'boolean') {
@@ -65,13 +65,13 @@ export function InputPluginsDefalut():React.ReactElement {
   const ImagePicker = isImagePicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
-        <Icon width={20} height={20} type={IconTypes.IMAGE} />
+        <i className="iconfont input-icon">&#xe604;</i>
         <span>{t('TUIChat.Image')}</span>
       </div>
     ),
     type: 'image',
     accept: 'image/*',
-    onChange: (file:HTMLInputElement | File) => {
+    onChange: (file: HTMLInputElement | File) => {
       pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.IMAGE);
     },
@@ -80,13 +80,13 @@ export function InputPluginsDefalut():React.ReactElement {
   const VideoPicker = isVideoPicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
-        <Icon width={20} height={20} type={IconTypes.VIDEO} />
+        <i className="iconfont input-icon">&#xe603;</i>
         <span>{t('TUIChat.Video')}</span>
       </div>
     ),
     type: 'video',
     accept: 'video/*',
-    onChange: (file:HTMLInputElement | File) => {
+    onChange: (file: HTMLInputElement | File) => {
       pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.VIDEO);
     },
@@ -95,20 +95,20 @@ export function InputPluginsDefalut():React.ReactElement {
   const FilePicker = isFilePicker && useUploadElement({
     children: (
       <div className="input-plugin-item">
-        <Icon width={20} height={20} type={IconTypes.DOCUMENT} />
+        <i className="iconfont input-icon">&#xe602;</i>
         <span>{t('TUIChat.File')}</span>
       </div>
     ),
     type: 'file',
     accept: 'file/*',
-    onChange: (file:HTMLInputElement | File) => {
+    onChange: (file: HTMLInputElement | File) => {
       pluginsRef?.current?.closeMore && pluginsRef.current.closeMore();
       sendUploadMessage && sendUploadMessage({ file }, MESSAGE_TYPE_NAME.FILE);
     },
   });
   const plugins = [
     isEmojiPicker && <EmojiPicker />, ImagePicker, VideoPicker, FilePicker, ...propPlugins,
-  ].filter((item) => item);
+  ].filter(item => item);
 
   return <Plugins ref={pluginsRef} plugins={plugins} showNumber={showNumber} MoreIcon={MoreIcon} />;
 }

package/src/components/{TUIMessageInput → MessageInput}/InputQuoteDefalut.tsx

@@ -6,7 +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';
+import { formatEmojiString } from '../MessageElement/utils/emojiMap';
 
 interface InputQuoteProps {
   message?: Message

package/src/components/{TUIMessageInput/TUIMessageInput.tsx → MessageInput/MessageInput.tsx}

@@ -1,6 +1,6 @@
 import React, { MutableRefObject, PropsWithChildren } from 'react';
 import TencentCloudChat from '@tencentcloud/chat';
-import { TUIMessageInputContextProvider } from '../../context/TUIMessageInputContext';
+import { TUIMessageInputContextProvider } from '../../context/MessageInputContext';
 import { useMessageInputState, useCreateMessageInputContext } from './hooks';
 import './styles/index.scss';
 import {
@@ -11,38 +11,37 @@ import {
 } from '../../context';
 import { EmptyStateIndicator } from '../EmptyStateIndicator';
 import { InputQuoteDefalut } from './InputQuoteDefalut';
-import { TUIMessageInputDefault } from './TUIMessageInputDefault';
+import { TUIMessageInputDefault } from './MessageInputDefault';
 import { InputPluginsDefalut } from './InputPluginsDefalut';
-import { TUIForward } from './TUIForward';
+import { Forward } from './Forward';
 import { Transmitter } from './Transmitter';
 
 export interface PluginConfigProps {
-  plugins?: Array<React.ReactElement>,
-  showNumber?: number,
-  MoreIcon?: React.ReactElement,
-  isEmojiPicker?: boolean,
-  isImagePicker?: boolean,
-  isVideoPicker?: boolean,
-  isFilePicker?: boolean,
+  plugins?: 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,
+  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>,
+  TUIMessageInput?: React.ComponentType;
+  InputPlugins?: React.ComponentType<UnknowPorps>;
+  InputQuote?: React.ComponentType<UnknowPorps>;
 }
 
-function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
-:React.ReactElement {
+function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWithChildren<T>): React.ReactElement {
   const {
     children,
     disabled: propsDisabled,
@@ -75,8 +74,7 @@ function TUIMessageInputProvider<T extends TUIMessageInputProps>(props: PropsWit
   );
 }
 
-function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsWithChildren<T>)
-:React.ReactElement {
+function UnMemoizedMessageInput<T extends TUIMessageInputProps>(props: PropsWithChildren<T>): React.ReactElement {
   const {
     TUIMessageInput: PropTUIMessageInput,
     InputPlugins: PropInputPlugins,
@@ -97,12 +95,12 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
   } = useComponentContext('TUIMessageInput');
   const Input = PropTUIMessageInput || ContextInput || TUIMessageInputDefault;
   const InputPlugins = PropInputPlugins
-  || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
+    || ContextInputPlugins || InputPluginsDefalut || EmptyStateIndicator;
   const InputQuote = PropInputQuote || ContextInputQuote || InputQuoteDefalut;
   return (
     <div className={`tui-message-input ${className}`}>
       <TUIMessageInputProvider {...props}>
-        <TUIForward />
+        <Forward />
         <InputQuote />
         <div className="tui-message-input-main">
           <div className="tui-message-input-box">
@@ -115,5 +113,5 @@ function UnMemoizedTUIMessageInput<T extends TUIMessageInputProps>(props: PropsW
     </div>
   );
 }
-export const TUIMessageInput = React.memo(UnMemoizedTUIMessageInput) as
-typeof UnMemoizedTUIMessageInput;
+export const MessageInput = React.memo(UnMemoizedMessageInput) as
+typeof UnMemoizedMessageInput;

package/src/components/{TUIMessageInput/TUIMessageInputDefault.tsx → MessageInput/MessageInputDefault.tsx}

@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
 import { MESSAGE_OPERATE } from '../../constants';
 import { useTUIChatStateContext } from '../../context';
 import { isPC } from '../../utils/env';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
-import { formatEmojiString } from '../TUIMessage/utils/emojiMap';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
+import { formatEmojiString } from '../MessageElement/utils/emojiMap';
 
-export function TUIMessageInputDefault():React.ReactElement {
+export function TUIMessageInputDefault(): React.ReactElement {
   const {
     text,
     disabled,
@@ -67,18 +67,18 @@ export function TUIMessageInputDefault():React.ReactElement {
       {
         !disabled
         && (
-        <textarea
-          placeholder={t('TUIChat.Enter a message')}
-          rows={1}
-          value={text}
-          // eslint-disable-next-line
+          <textarea
+            placeholder={t('TUIChat.Enter a message')}
+            rows={1}
+            value={text}
+            // eslint-disable-next-line
           // @ts-ignore
-          ref={textareaRef}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={(e:any) => {handleBlur(e)}}
-        />
+            ref={textareaRef}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+            onBlur={(e: any) => { handleBlur(e); }}
+          />
         )
       }
     </div>

package/src/components/{TUIMessageInput → MessageInput}/Transmitter.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { useTUIMessageInputContext } from '../../context/TUIMessageInputContext';
+import { useTUIMessageInputContext } from '../../context/MessageInputContext';
 import { Icon, IconTypes } from '../Icon';
 
-export function Transmitter():React.ReactElement {
+export function Transmitter(): React.ReactElement {
   const {
     handleSubmit,
   } = useTUIMessageInputContext('Transmitter');

package/src/components/{TUIMessageInput → MessageInput}/hooks/useEmojiPicker.tsx

@@ -5,7 +5,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TUIChatService } from '@tencentcloud/chat-uikit-engine';
-import { emojiEnKey } from '../../TUIMessage/utils/emojiMap';
+import { emojiEnKey } from '../../MessageElement/utils/emojiMap';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface EmojiData {

package/src/components/{TUIMessageInput → MessageInput}/hooks/useHandleForwardMessage.tsx

@@ -8,7 +8,7 @@ import {
   useTUIChatStateContext, useUIKit,
 } from '../../../context';
 
-export function useHandleForwardMessage(msg?:Message) {
+export function useHandleForwardMessage(msg?: Message) {
   const {
     operateData,
   } = useTUIChatStateContext('TUIMessageInputDefault');
@@ -18,14 +18,15 @@ export function useHandleForwardMessage(msg?:Message) {
 
   const message = msg || (operateData && operateData[MESSAGE_OPERATE.FORWARD]);
 
-  const sendForwardMessage = (list:Array<Conversation>) => {
-    list.map((item:Conversation) => {
-      message &&  TUIChatService.sendForwardMessage([item], [message]);
+  const sendForwardMessage = (list: Conversation[]) => {
+    list.map((item: Conversation) => {
+      message && TUIChatService.sendForwardMessage([item], [message]);
       return item;
     });
   };
 
   useEffect(() => {
+    if (!chat) return;
     (async () => {
       const res = await chat.getConversationList();
       setConversationList(res?.data?.conversationList.filter(

package/src/components/{TUIMessageInput → MessageInput}/hooks/useMessageInputState.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, useReducer } from 'react';
 import { CONSTANT_DISPATCH_TYPE } from '../../../constants';
-import type { TUIMessageInputProps } from '../TUIMessageInput';
+import type { TUIMessageInputProps } from '../MessageInput';
 import { useEmojiPicker } from './useEmojiPicker';
 import { useMessageInputText } from './useMessageInputText';
 import { useUploadPicker } from './useUploadPicker';

package/src/components/{TUIMessageInput → MessageInput}/hooks/useMessageInputText.tsx

@@ -11,20 +11,20 @@ import {
   useTUIChatActionContext,
   useUIKit,
 } from '../../../context';
-import { enableSampleTaskStatus } from '../../untils';
-import { formatEmojiString } from '../../TUIMessage/utils/emojiMap';
+import { enableSampleTaskStatus } from '../../utils';
+import { formatEmojiString } from '../../MessageElement/utils/emojiMap';
 import { useHandleQuoteMessage } from './useHandleQuoteMessage';
 import type { IbaseStateProps, ICursorPos } from './useMessageInputState';
 import { filesData } from './useUploadPicker';
 import { de } from 'date-fns/locale';
 
 interface useMessageInputTextProps extends IbaseStateProps {
-  focus?: boolean,
-  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>,
-  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void
+  focus?: boolean;
+  textareaRef?: MutableRefObject<HTMLTextAreaElement | undefined>;
+  sendUploadMessage?: (file: filesData, type: MESSAGE_TYPE_NAME) => void;
 }
 
-export const useMessageInputText = (props:useMessageInputTextProps) => {
+export const useMessageInputText = (props: useMessageInputTextProps) => {
   const {
     state,
     dispatch,
@@ -33,7 +33,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     sendUploadMessage,
   } = props;
 
-  const { chat } = useUIKit('useMessageInputText');
+  const { chat } = useUIKit();
   const { operateMessage, setFirstSendMessage } = useTUIChatActionContext('TUIMessageInput');
 
   const { cloudCustomData } = useHandleQuoteMessage();
@@ -48,7 +48,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
       }
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-        getNewText: (text:string) => event.target.value,
+        getNewText: (text: string) => event.target.value,
       });
     },
     [chat],
@@ -61,7 +61,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     if (!state.text) {
       return;
     }
-    const options:any = {
+    const options: any = {
       payload: {
         text: formatEmojiString(state.text),
       },
@@ -75,7 +75,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     });
     enableSampleTaskStatus('sendMessage');
     dispatch({
-      getNewText: (text:string) => '',
+      getNewText: (text: string) => '',
       type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
     });
     operateMessage && operateMessage({
@@ -86,7 +86,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
   };
 
   const handleKeyDown = useCallback(
-    (event?:React.KeyboardEvent<EventTarget>) => {
+    (event?: React.KeyboardEvent<EventTarget>) => {
       if (!event?.ctrlKey && event?.code && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
         event?.preventDefault();
         handleSubmit(event);
@@ -94,7 +94,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
       if (event?.ctrlKey && enterCodeList.indexOf(event?.code) > -1 && event.keyCode === 13) {
         dispatch({
           type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-          getNewText: (text:string) => `${text}\n`,
+          getNewText: (text: string) => `${text}\n`,
         });
       }
     },
@@ -115,7 +115,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
             item.getAsString((str: string) => {
               dispatch({
                 type: CONSTANT_DISPATCH_TYPE.SET_TEXT,
-                getNewText: (text:string) => `${text}${str}`,
+                getNewText: (text: string) => `${text}${str}`,
               });
             });
             return true;
@@ -138,7 +138,7 @@ export const useMessageInputText = (props:useMessageInputTextProps) => {
     (textToInsert: string) => {
       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) => `${text.slice(0, state?.cursorPos?.start || 0)}${textToInsert}${text.slice(state?.cursorPos?.start || 0)}`,
       });
       dispatch({
         type: CONSTANT_DISPATCH_TYPE.SET_CURSOR_POS,

package/src/components/{TUIMessageInput → MessageInput}/hooks/useUploadPicker.tsx

@@ -6,15 +6,15 @@ import {
   TUIChatService,
 } from '@tencentcloud/chat-uikit-engine';
 import { MESSAGE_TYPE_NAME } from '../../../constants';
-import { enableSampleTaskStatus } from '../../untils';
+import { enableSampleTaskStatus } from '../../utils';
 import { useTUIChatActionContext } from '../../../context';
 import type { IbaseStateProps } from './useMessageInputState';
 
 export interface filesData {
-  file: HTMLInputElement | File
+  file: HTMLInputElement | File;
 }
 
-export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildren<T>) {
+export function useUploadPicker<T extends IbaseStateProps>(props: PropsWithChildren<T>) {
   const {
     updateUploadPendingMessageList,
   } = useTUIChatActionContext('useUploadPicker');
@@ -25,7 +25,7 @@ export function useUploadPicker<T extends IbaseStateProps>(props:PropsWithChildr
     [MESSAGE_TYPE_NAME.FILE]: TUIChatService.sendFileMessage,
   };
 
-  const sendUploadMessage = useCallback((file: filesData, type:MESSAGE_TYPE_NAME) => {
+  const sendUploadMessage = useCallback((file: filesData, type: MESSAGE_TYPE_NAME) => {
     creatUploadMessage[type]({
       payload: file,
     });

package/src/components/MessageInput/index.ts

@@ -0,0 +1,3 @@
+export * from './MessageInput';
+export * from './MessageInputDefault';
+export * from './InputPluginsDefalut';

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

@@ -0,0 +1,40 @@
+@use "../../../styles/colors/color-theme" as *;
+
+.tui-message-input {
+  @include theme() {
+    background-color: get(bg-color-operate);
+  }
+
+  .tui-kit-input-box--focus {
+    @include theme() {
+      outline: 1px solid get(text-color-link);
+    }
+  }
+
+  .input-box {
+    @include theme() {
+      background-color: get(bg-color-input);
+      border: 1px solid get(stroke-color-primary);
+    }
+  }
+}
+
+.input-plugin-popup {
+  &-box {
+    border-radius: 16px;
+
+    @include theme() {
+      background-color: get(dropdown-color-default);
+      box-shadow: 0 0 10px 0 get(shadow-color);
+    }
+  }
+}
+
+.input-icon {
+  width: 20px;
+  height: 20px;
+
+  @include theme() {
+    color: get(text-color-primary);
+  }
+}