feat: Clicking Image in files aggregator now opens image Gallery

packages/react/src/views/FileMessage/FileMessage.js

@@ -21,6 +21,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';
@@ -34,6 +35,7 @@ const FileMessage = ({ fileMessage, onDeleteFile }) => {
   const dispatchToastMessage = useToastBarDispatch();
   const { RCInstance } = useRCContext();
   const messages = useMessageStore((state) => state.messages);
+  const [showGallery, setShowGallery] = useState(false);
   const [files, setFiles] = useState([]);
   const theme = useTheme();
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
@@ -61,6 +63,11 @@ const FileMessage = ({ fileMessage, onDeleteFile }) => {
     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) => {
@@ -101,12 +108,23 @@ const FileMessage = ({ fileMessage, onDeleteFile }) => {
     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={[messageStyles, hoverStyle]}
+        onClick={() => {
+          handleFileClick(fileMessage);
+        }}
       >
         <FilePreviewContainer file={fileMessage} />
         <FileBodyContainer style={{ width: '75%' }}>
@@ -119,7 +137,9 @@ const FileMessage = ({ fileMessage, onDeleteFile }) => {
           <FileMetrics file={fileMessage} />
         </FileBodyContainer>
         <Menu
-          isToolTip={false}
+          tooltip={{
+            isToolTip: false,
+          }}
           options={[
             {
               id: 'download',
@@ -137,6 +157,13 @@ const FileMessage = ({ fileMessage, onDeleteFile }) => {
         />
       </Box>
 
+      {showGallery && (
+        <ImageGallery
+          currentFileId={extractIdFromUrl(fileMessage.url)}
+          setShowGallery={setShowGallery}
+        />
+      )}
+
       {fileToDelete && Object.keys(fileToDelete).length > 0 && (
         <Modal onClose={handleOnClose}>
           <Modal.Header>