From 53389bbaa60ad9719e9302b10b3365ee3d280d6e Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 7 Jan 2025 00:44:56 +0530
Subject: [PATCH 1/2] fix

---
 .../src/views/FileMessage/FileMessage.js      | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/views/FileMessage/FileMessage.js b/packages/react/src/views/FileMessage/FileMessage.js
index a074e981ef..fe96494248 100644
--- a/packages/react/src/views/FileMessage/FileMessage.js
+++ b/packages/react/src/views/FileMessage/FileMessage.js
@@ -12,6 +12,7 @@ import {
 } from '@embeddedchat/ui-elements';
 import FilePreviewContainer from './FilePreviewContainer';
 import FileBodyContainer from '../Message/MessageBodyContainer';
+import ImageGallery from '../ImageGallery/ImageGallery';
 
 import FilePreviewHeader from './FilePreviewHeader';
 import { MessageBody as FileBody } from '../Message/MessageBody';
@@ -21,10 +22,12 @@ import { useMessageStore } from '../../store';
 import { fileDisplayStyles as styles } from './Files.styles';
 
 const FileMessage = ({ fileMessage }) => {
+  console.log('fileMessage', fileMessage);
   const { classNames, styleOverrides } = useComponentOverrides('FileMessage');
   const dispatchToastMessage = useToastBarDispatch();
   const { RCInstance } = useRCContext();
   const messages = useMessageStore((state) => state.messages);
+  const [showGallery, setShowGallery] = useState(false);
 
   const [fileToDelete, setFileToDelete] = useState({});
 
@@ -37,6 +40,11 @@ const FileMessage = ({ fileMessage }) => {
     document.body.removeChild(anchor);
   }, []);
 
+  const extractIdFromUrl = (url) => {
+    const match = url.match(/\/file-upload\/(.*?)\//);
+    return match ? match[1] : null;
+  };
+
   const deleteFile = useCallback(
     async (file) => {
       messages.forEach(async (message) => {
@@ -64,12 +72,23 @@ const FileMessage = ({ fileMessage }) => {
     setFileToDelete({});
   };
 
+  const handleFileClick = (file) => {
+    if (file.typeGroup === 'image') {
+      setShowGallery(true);
+    } else {
+      downloadFile(file.url, file.title);
+    }
+  };
+
   return (
     <>
       <Box
         className={appendClassNames('ec-file', classNames)}
         style={styleOverrides}
         css={styles.message}
+        onClick={() => {
+          handleFileClick(fileMessage);
+        }}
       >
         <FilePreviewContainer file={fileMessage} />
         <FileBodyContainer style={{ width: '75%' }}>
@@ -82,7 +101,9 @@ const FileMessage = ({ fileMessage }) => {
           <FileMetrics file={fileMessage} />
         </FileBodyContainer>
         <Menu
-          isToolTip={false}
+          tooltip={{
+            isToolTip: false,
+          }}
           options={[
             {
               id: 'download',
@@ -100,6 +121,13 @@ const FileMessage = ({ fileMessage }) => {
         />
       </Box>
 
+      {showGallery && (
+        <ImageGallery
+          currentFileId={extractIdFromUrl(fileMessage.url)}
+          setShowGallery={setShowGallery}
+        />
+      )}
+
       {fileToDelete && Object.keys(fileToDelete).length > 0 && (
         <Modal onClose={handleOnClose}>
           <Modal.Header>

From 7ee667d2d84376dda8bc258343056d83a61f4bec Mon Sep 17 00:00:00 2001
From: Piyush Bhatt <2023kuec2027@iiitkota.ac.in>
Date: Tue, 7 Jan 2025 00:51:41 +0530
Subject: [PATCH 2/2] lint

---
 packages/react/src/views/FileMessage/FileMessage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/src/views/FileMessage/FileMessage.js b/packages/react/src/views/FileMessage/FileMessage.js
index fe96494248..5681e41e58 100644
--- a/packages/react/src/views/FileMessage/FileMessage.js
+++ b/packages/react/src/views/FileMessage/FileMessage.js
@@ -22,7 +22,6 @@ import { useMessageStore } from '../../store';
 import { fileDisplayStyles as styles } from './Files.styles';
 
 const FileMessage = ({ fileMessage }) => {
-  console.log('fileMessage', fileMessage);
   const { classNames, styleOverrides } = useComponentOverrides('FileMessage');
   const dispatchToastMessage = useToastBarDispatch();
   const { RCInstance } = useRCContext();