From 489d4d3ea09d144aa4a84a3c8c2c72741aff9f34 Mon Sep 17 00:00:00 2001
From: Liam Hongman Cho <liam.cho@sendbird.com>
Date: Wed, 5 Jun 2024 13:54:25 +0900
Subject: [PATCH] feat: Added video message support (#259)

### Changelog
- Supports video typed file messages when sent by bot user

### Side note
- [Video message takes up 'wide
view'.](https://sendbird.slack.com/archives/C0585965FFA/p1717486126855269?thread_ts=1717397963.921489&cid=C0585965FFA)

### Ticket
https://sendbird.atlassian.net/browse/AC-2197

### After

[Video and Audio APIs - Learn web development _
MDN.webm](https://github.com/sendbird/chat-ai-widget/assets/16806397/843c2e49-6496-43df-9979-7bb1eebe41fc)

[Video and Audio APIs - Learn web development _ MDN
(1).webm](https://github.com/sendbird/chat-ai-widget/assets/16806397/22602105-18b2-47ee-be90-72c0dce2f8b8)


Note: The testing is when message is sent by me not bot. It is only for
testing. In production, only bot message is supported.
---
 src/App.tsx                      |  1 -
 src/components/ChatAiWidget.tsx  |  2 +-
 src/components/CustomMessage.tsx |  3 ++-
 src/components/FileMessage.tsx   | 29 +++++++++++++++++++++--------
 src/css/index.css                |  2 +-
 5 files changed, 25 insertions(+), 12 deletions(-)

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%;
 }