feat: Added image file viewer (#288)

ticket: https://sendbird.atlassian.net/browse/AC-2608 discussion: https://sendbird.slack.com/archives/C0585965FFA/p1719296345153639 uikit change: sendbird/sendbird-uikit-react#1150 ### Changelog - Added file viewer feature for image file message ### After [4 sprints - Client JS - Agile Board - Jira (2).webm](https://github.com/sendbird/chat-ai-widget/assets/16806397/099740f4-79fb-4f22-bf64-6c5cc1aff77f) --------- Co-authored-by: bang9 <[email protected]>
sendbird · Jun 26, 2024 · 25b9cfa · 25b9cfa
1 parent 603f392
commit 25b9cfa
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 27 deletions.
diff --git a/packages/uikit b/packages/uikit
diff --git a/src/components/CustomMessage.tsx b/src/components/CustomMessage.tsx
@@ -140,7 +140,9 @@ export default function CustomMessage(props: Props) {
           wideContainer={isVideoMessage(message)}
           {...commonProps}
           botUser={botUser}
-          bodyComponent={<FileMessage message={message} />}
+          bodyComponent={
+            <FileMessage message={message} profileUrl={botProfileUrl} />
+          }
           createdAt={message.createdAt}
           messageFeedback={renderFeedbackButtons()}
         />

diff --git a/src/components/FileMessage.tsx b/src/components/FileMessage.tsx
@@ -1,19 +1,23 @@
 import '../css/index.css';
 import { FileMessage as ChatFileMessage } from '@sendbird/chat/message';
+import { useState } from 'react';
 
+import FileViewer from '@uikit/modules/GroupChannel/components/FileViewer';
 import { useGroupChannelContext } from '@uikit/modules/GroupChannel/context/GroupChannelProvider';
+import Avatar from '@uikit/ui/Avatar';
 import { isImageMessage, isVideoMessage } from '@uikit/utils';
-// import { FileViewerComponent } from '@sendbird/uikit-react/ui/FileViewer';
-// import {downloadFileWithUrl, noop} from '../utils';
-// import {createPortal} from 'react-dom';
+
+import BotProfileImage from './BotProfileImage';
 
 type Props = {
   message: ChatFileMessage;
+  profileUrl: string;
 };
 
 export default function FileMessage(props: Props) {
-  const { message } = props;
+  const { message, profileUrl } = props;
   const { scrollToBottom } = useGroupChannelContext();
+  const [showFileViewer, setShowFileViewer] = useState(false);
 
   // const root = document.getElementById('aichatbot-widget-window');
 
@@ -23,40 +27,45 @@ export default function FileMessage(props: Props) {
    */
   return (
     <div className="sendbird-ai-widget-file-message-root">
-      {/*Please keep the commented code for referencing in the future when adding file viewer*/}
-      {/*
-      {root &&
-        showPreview &&
-        createPortal(
-          <FileViewerComponent
-            profileUrl={message.sender?.profileUrl}
-            nickname={message.sender?.nickname}
-            name={message.name}
-            type={message.type}
-            url={message?.url}
-            isByMe={false}
-            disableDelete={(message.threadInfo?.replyCount || 0) > 0}
-            onClose={() => setShowPreview(false)}
-            onDelete={noop}
-            onDownloadClick={() => downloadFileWithUrl(message.url)}
-          />,
-          root!
-        )}
-        */}
       {isVideoMessage(message) && (
         <video controls className="sendbird-ai-widget-file-message">
           <source src={message.url} type={message.type} />
           <track kind="captions" />
         </video>
       )}
       {isImageMessage(message) && (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
         <img
           className="sendbird-ai-widget-file-message"
           src={message.url}
           alt={''}
           onLoad={() => {
             scrollToBottom();
           }}
+          onClick={() => setShowFileViewer(true)}
+        />
+      )}
+      {showFileViewer && (
+        <FileViewer
+          message={message}
+          onCancel={() => setShowFileViewer(false)}
+          profile={
+            profileUrl != '' ? (
+              <Avatar
+                src={profileUrl}
+                alt="botProfileImage"
+                height="32px"
+                width="32px"
+              />
+            ) : (
+              <BotProfileImage
+                width={32}
+                height={32}
+                iconWidth={18}
+                iconHeight={18}
+              />
+            )
+          }
         />
       )}
     </div>

diff --git a/src/css/index.css b/src/css/index.css
@@ -54,7 +54,6 @@
 }
 
 .sendbird-fileviewer__header__left {
-  max-width: 272px;
 }
 
 .sendbird-fileviewer {
@@ -75,6 +74,7 @@ input:focus {
 .sendbird-ai-widget-file-message {
   border-radius: 16px;
   width: 100%;
+  cursor: pointer;
 }
 
 .sendbird-word__url {
+7 −2		src/modules/GroupChannel/components/FileViewer/FileViewerView.tsx
+2 −5		src/modules/GroupChannel/components/FileViewer/index.scss
+3 −1		src/modules/GroupChannel/components/FileViewer/index.tsx
+1 −5		src/ui/FileViewer/index.scss