feat: enable navigation from files list to corresponding messages in chat body

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

@@ -6,9 +6,12 @@ import {
   Modal,
   Button,
   Icon,
+  useTheme,
   useToastBarDispatch,
   useComponentOverrides,
   appendClassNames,
+  lighten,
+  darken,
 } from '@embeddedchat/ui-elements';
 import FilePreviewContainer from './FilePreviewContainer';
 import FileBodyContainer from '../Message/MessageBodyContainer';
@@ -17,14 +20,17 @@ import FilePreviewHeader from './FilePreviewHeader';
 import { MessageBody as FileBody } from '../Message/MessageBody';
 import { FileMetrics } from './FileMetrics';
 import { useRCContext } from '../../context/RCInstance';
-import { useMessageStore } from '../../store';
+import { useMessageStore, useSidebarStore } from '../../store';
 import { fileDisplayStyles as styles } from './Files.styles';
 
 const FileMessage = ({ fileMessage }) => {
   const { classNames, styleOverrides } = useComponentOverrides('FileMessage');
   const dispatchToastMessage = useToastBarDispatch();
   const { RCInstance } = useRCContext();
   const messages = useMessageStore((state) => state.messages);
+  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
+  const { theme } = useTheme();
+  const { mode } = useTheme();
 
   const [fileToDelete, setFileToDelete] = useState({});
 
@@ -37,6 +43,39 @@ const FileMessage = ({ fileMessage }) => {
     document.body.removeChild(anchor);
   }, []);
 
+  const navigateToFile = (msg) => {
+    if (!msg || !msg._id) {
+      console.error('Invalid message object:', msg);
+      return;
+    }
+
+    const message = messages.find((mg) => mg?.file?._id === msg._id);
+
+    if (message) {
+      let element;
+      setTimeout(() => {
+        const childElement = document.getElementById(
+          `ec-message-body-${message._id}`
+        );
+        element = childElement.closest('.ec-message');
+
+        if (element) {
+          setShowSidebar(false);
+          element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+
+          element.style.backgroundColor =
+            mode === 'light'
+              ? darken(theme.colors.warning, 0.03)
+              : lighten(theme.colors.warningForeground, 0.03);
+
+          setTimeout(() => {
+            element.style.backgroundColor = '';
+          }, 2000);
+        }
+      }, 300);
+    }
+  };
+
   const deleteFile = useCallback(
     async (file) => {
       messages.forEach(async (message) => {
@@ -92,10 +131,16 @@ const FileMessage = ({ fileMessage }) => {
             },
             {
               id: 'delete',
-              action: () => setFileToDelete(fileMessage),
+              action: () => setFileToDelete(fileMessage._id),
               label: 'Delete',
               icon: 'trash',
             },
+            {
+              id: 'navigate',
+              action: () => navigateToFile(fileMessage),
+              label: 'Jump to message',
+              icon: 'arrow-jump',
+            },
           ]}
         />
       </Box>

packages/ui-elements/src/components/Icon/icons/ArrowJump.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ArrowJump = (props) => (
+  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8.00003 6.5C8.00003 5.94772 8.44774 5.5 9.00003 5.5H17.5C18.0523 5.5 18.5 5.94772 18.5 6.5V22.5858L21.2929 19.7929C21.6834 19.4024 22.3166 19.4024 22.7071 19.7929C23.0977 20.1834 23.0977 20.8166 22.7071 21.2071L18.2071 25.7071C17.8166 26.0976 17.1834 26.0976 16.7929 25.7071L12.2929 21.2071C11.9024 20.8166 11.9024 20.1834 12.2929 19.7929C12.6834 19.4024 13.3166 19.4024 13.7071 19.7929L16.5 22.5858V7.5H10V13.5C10 14.0523 9.55231 14.5 9.00003 14.5C8.44774 14.5 8.00003 14.0523 8.00003 13.5V6.5Z" />
+  </svg>
+);
+
+export default ArrowJump;

packages/ui-elements/src/components/Icon/icons/index.js

@@ -61,6 +61,7 @@ import Arc from './Arc';
 import Avatar from './Avatar';
 import FormatText from './FormatText';
 import Cog from './Cog';
+import ArrowJump from './ArrowJump';
 
 const icons = {
   file: File,
@@ -126,6 +127,7 @@ const icons = {
   avatar: Avatar,
   'format-text': FormatText,
   cog: Cog,
+  'arrow-jump': ArrowJump,
 };
 
 export default icons;