feat: add file upload limit alert

src/components/BotMessageFeedback.tsx

@@ -2,10 +2,10 @@ import { BaseMessage, Feedback, FeedbackRating } from '@sendbird/chat/message';
 import { useReducer } from 'react';
 
 import FeedbackIconButton from '@uikit/ui/FeedbackIconButton';
-import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal';
 import MessageFeedbackModal from '@uikit/ui/MessageFeedbackModal';
 import MobileFeedbackMenu from '@uikit/ui/MobileFeedbackMenu';
 
+import { AlertModal } from './ui/AlertModal';
 import { elementIds } from '../const';
 import { useConstantState } from '../context/ConstantContext';
 import { Icon } from '../foundation/components/Icon';
@@ -137,13 +137,7 @@ function BotMessageFeedback({ message }: { message: BaseMessage }) {
       }
       {
         // error modal
-        !!state.errorText && (
-          <MessageFeedbackFailedModal
-            text={state.errorText}
-            rootElementId={elementIds.widgetWindow}
-            onCancel={() => setState({ errorText: '' })}
-          />
-        )
+        !!state.errorText && <AlertModal message={state.errorText} onClose={() => setState({ errorText: '' })} />
       }
     </>
   );

src/components/chat/ui/ChatInput.tsx

@@ -1,19 +1,21 @@
 import { css } from '@linaria/core';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
 import MessageInputWrapperView from '@uikit/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView';
 
 import { themedColors } from '../../../foundation/colors/css';
 import { useBlockWhileBotResponding } from '../../../hooks/useBlockWhileBotResponding';
 import { isIOSMobile } from '../../../utils';
+import { AlertModal } from '../../ui/AlertModal';
 import { useChatContext } from '../context/ChatProvider';
 
 // TODO: Remove UIKit
 export const ChatInput = () => {
   const { channel, botUser, dataSource, handlers } = useChatContext();
 
   const ref = useRef<HTMLDivElement>(null);
+  const [limitError, setLimitError] = useState(false);
 
   const { config } = useSendbirdStateContext();
   const isMessageInputDisabled = useBlockWhileBotResponding({
@@ -41,7 +43,11 @@ export const ChatInput = () => {
           handlers.onAfterSendMessage();
           return message;
         }}
+        onFileLimitError={() => setLimitError(true)}
       />
+      {limitError && (
+        <AlertModal message={"You can't upload more than one image"} onClose={() => setLimitError(false)} />
+      )}
     </div>
   );
 };

src/components/messages/FormMessage.tsx

@@ -4,13 +4,13 @@ import styled from 'styled-components';
 
 import { isFormVersionCompatible } from '@uikit/modules/GroupChannel/context/utils';
 import Button from '@uikit/ui/Button';
-import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal';
 
 import FallbackUserMessage from './FallbackUserMessage';
-import { elementIds, widgetStringSet } from '../../const';
+import { widgetStringSet } from '../../const';
 import { useConstantState } from '../../context/ConstantContext';
 import { Label } from '../../foundation/components/Label';
 import FormInput from '../FormInput';
+import { AlertModal } from '../ui/AlertModal';
 
 interface Props {
   message: BaseMessage;
@@ -196,15 +196,7 @@ export default function FormMessage(props: Props) {
           <ButtonText disabled={isButtonDisabled}>{isSubmitted ? 'Submitted successfully' : 'Submit'}</ButtonText>
         </Label>
       </SubmitButton>
-      {submitFailed && (
-        <MessageFeedbackFailedModal
-          text={'Submit failed.'}
-          rootElementId={elementIds.widgetWindow}
-          onCancel={() => {
-            setSubmitFailed(false);
-          }}
-        />
-      )}
+      {submitFailed && <AlertModal message={'Submit failed.'} onClose={() => setSubmitFailed(false)} />}
     </Root>
   );
 }

src/components/ui/AlertModal.tsx

@@ -0,0 +1,13 @@
+import MessageFeedbackFailedModal from '@uikit/ui/MessageFeedbackFailedModal';
+
+import { elementIds } from '../../const';
+
+interface Props {
+  message: string;
+  onClose: () => void;
+}
+
+// TODO: Remove UIKit
+export const AlertModal = ({ message, onClose }: Props) => {
+  return <MessageFeedbackFailedModal text={message} rootElementId={elementIds.widgetWindow} onCancel={onClose} />;
+};