diff --git a/src/App.tsx b/src/App.tsx
index ff4bca242..8e47182b9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import { ar } from 'date-fns/locale';
 import React from 'react';
 
 import { StringSet } from '@uikit/ui/Label/stringSet';
diff --git a/src/components/ChatAiWidget.tsx b/src/components/ChatAiWidget.tsx
index a3dfec05d..52940638a 100644
--- a/src/components/ChatAiWidget.tsx
+++ b/src/components/ChatAiWidget.tsx
@@ -47,7 +47,7 @@ const MobileComponent = () => {
   return (
     <>
       <MobileContainer
-        style={{ display: (isOpen && isVisible) ? 'block' : 'none' }}
+        style={{ display: isOpen && isVisible ? 'block' : 'none' }}
         width={mobileContainerWidth}
         id={elementIds.widgetWindow}
       >
diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx
index d86b4d6e6..fa8b7d33d 100644
--- a/src/components/CustomMessage.tsx
+++ b/src/components/CustomMessage.tsx
@@ -1,7 +1,7 @@
 import { User } from '@sendbird/chat';
 
 import TypingDots from '@uikit/ui/TypingIndicatorBubble/TypingDots';
-import { CoreMessageType } from '@uikit/utils';
+import { CoreMessageType, isVideoMessage } from '@uikit/utils';
 
 import AdminMessage from './AdminMessage';
 import BotMessageFeedback from './BotMessageFeedback';
@@ -136,6 +136,7 @@ export default function CustomMessage(props: Props) {
     if (message.isFileMessage()) {
       return (
         <BotMessageWithBodyInput
+          wideContainer={isVideoMessage(message)}
           {...commonProps}
           botUser={botUser}
           bodyComponent={<FileMessage message={message} />}
diff --git a/src/components/FileMessage.tsx b/src/components/FileMessage.tsx
index 0660c1022..f6cf0c51e 100644
--- a/src/components/FileMessage.tsx
+++ b/src/components/FileMessage.tsx
@@ -2,6 +2,7 @@ import '../css/index.css';
 import { FileMessage as ChatFileMessage } from '@sendbird/chat/message';
 
 import { useGroupChannelContext } from '@uikit/modules/GroupChannel/context/GroupChannelProvider';
+import { isImageMessage, isVideoMessage } from '@uikit/utils';
 // import { FileViewerComponent } from '@sendbird/uikit-react/ui/FileViewer';
 // import {downloadFileWithUrl, noop} from '../utils';
 // import {createPortal} from 'react-dom';
@@ -16,6 +17,10 @@ export default function FileMessage(props: Props) {
 
   // const root = document.getElementById('aichatbot-widget-window');
 
+  /**
+   * Currently only video and image file messages will be sent.
+   * TODO: In the future, we may support other file types. When we do, we need to update the logic.
+   */
   return (
     <div className="sendbird-ai-widget-file-message-root">
       {/*Please keep the commented code for referencing in the future when adding file viewer*/}
@@ -38,14 +43,22 @@ export default function FileMessage(props: Props) {
           root!
         )}
         */}
-      <img
-        className="sendbird-ai-widget-file-message-image"
-        src={message.url}
-        alt={''}
-        onLoad={() => {
-          scrollToBottom();
-        }}
-      />
+      {isVideoMessage(message) && (
+        <video controls className="sendbird-ai-widget-file-message">
+          <source src={message.url} type={message.type} />
+          <track kind="captions" />
+        </video>
+      )}
+      {isImageMessage(message) && (
+        <img
+          className="sendbird-ai-widget-file-message"
+          src={message.url}
+          alt={''}
+          onLoad={() => {
+            scrollToBottom();
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/css/index.css b/src/css/index.css
index 765474cd3..797d1dbaf 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -76,7 +76,7 @@ input:focus {
   width: 100%;
 }
 
-.sendbird-ai-widget-file-message-image {
+.sendbird-ai-widget-file-message {
   border-radius: 16px;
   width: 100%;
 }