From 2858b8c157867e6228b4c4e4d4943518712bcf98 Mon Sep 17 00:00:00 2001
From: Anirban Singha <anirbansingha20@gmail.com>
Date: Tue, 24 Dec 2024 15:15:04 +0530
Subject: [PATCH] feat: enable navigation from files list to corresponding
 messages in chat body

---
 .../src/views/FileMessage/FileMessage.js      | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/views/FileMessage/FileMessage.js b/packages/react/src/views/FileMessage/FileMessage.js
index a074e981e..6d3d06bee 100644
--- a/packages/react/src/views/FileMessage/FileMessage.js
+++ b/packages/react/src/views/FileMessage/FileMessage.js
@@ -17,7 +17,7 @@ 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 }) => {
@@ -25,6 +25,7 @@ const FileMessage = ({ fileMessage }) => {
   const dispatchToastMessage = useToastBarDispatch();
   const { RCInstance } = useRCContext();
   const messages = useMessageStore((state) => state.messages);
+  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
 
   const [fileToDelete, setFileToDelete] = useState({});
 
@@ -37,6 +38,23 @@ const FileMessage = ({ fileMessage }) => {
     document.body.removeChild(anchor);
   }, []);
 
+  const navigateToFile = (id) => {
+    const message = messages.find((msg) => msg?.file?._id === id);
+    if (message) {
+      const element = document.getElementById(`ec-message-body-${message._id}`);
+      if (element) {
+        element.style.backgroundColor = '#ffeb3b';
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        setShowSidebar(false);
+
+        setTimeout(() => {
+          element.style.backgroundColor = '';
+          element.style.transition = 'background-color 0.5s ease-out';
+        }, 2000);
+      }
+    }
+  };
+
   const deleteFile = useCallback(
     async (file) => {
       messages.forEach(async (message) => {
@@ -92,10 +110,16 @@ const FileMessage = ({ fileMessage }) => {
             },
             {
               id: 'delete',
-              action: () => setFileToDelete(fileMessage),
+              action: () => setFileToDelete(fileMessage._id),
               label: 'Delete',
               icon: 'trash',
             },
+            {
+              id: 'navigate',
+              action: () => navigateToFile(fileMessage._id),
+              label: 'Navigate',
+              icon: 'arrow-back',
+            },
           ]}
         />
       </Box>