Fix arrow redirection for starred messages not currently loaded

packages/react/src/lib/scrollToMessage.js

@@ -0,0 +1,14 @@
+const scrollToMessage = (messageId) => {
+  requestAnimationFrame(() => {
+    const element = document.getElementById(messageId);
+
+    if (!element) return;
+
+    element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+    });
+  });
+};
+
+export default scrollToMessage;

packages/react/src/store/pinnedMessageStore.js

@@ -1,8 +1,40 @@
 import { create } from 'zustand';
+import { getMessageById } from '../../lib/api';
+import { useMessageStore } from '../messageStore';
 
 const usePinnedMessageStore = create((set) => ({
   showPinned: false,
-  setShowPinned: (showPinned) => set(() => ({ showPinned })),
+  isJumping: false,
+  error: null,
+
+  setShowPinned: (showPinned) => set({ showPinned }),
+
+  resetError: () => set({ error: null }),
+  jumpToMessage: async (messageId) => {
+    const { messages, addMessages } = useMessageStore.getState();
+
+    set({ isJumping: true, error: null });
+
+    try {
+      const alreadyLoaded = messages.some(
+        (msg) => msg._id === messageId
+      );
+
+      if (alreadyLoaded) return;
+
+      const message = await getMessageById(messageId);
+
+      if (message) {
+        addMessages([message]);
+      }
+    } catch (err) {
+      set({ error: 'Failed to load pinned message' });
+      console.error(err);
+    } finally {
+      set({ isJumping: false });
+    }
+  },
 }));
 
 export default usePinnedMessageStore;
+

packages/react/src/views/Message/Message.js

@@ -231,6 +231,7 @@ const Message = ({
         </MessageDivider>
       )}
       <Box
+        id={message._id}
         className={appendClassNames('ec-message', classNames)}
         css={[
           variantStyles.messageParent || styles.main,

packages/react/src/views/MessageAggregators/StarredMessages.js

@@ -1,21 +1,34 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import { useStarredMessageStore, useUserStore } from '../../store';
 import { MessageAggregator } from './common/MessageAggregator';
+import scrollToMessage from '../../lib/scrollToMessage';
 
 const StarredMessages = () => {
   const authenticatedUserId = useUserStore((state) => state.userId);
   const { variantOverrides } = useComponentOverrides('StarredMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
-  const starredMessages = useStarredMessageStore(
-    (state) => state.starredMessages
-  );
+
+  const {
+    starredMessages,
+    jumpToMessage,
+    isJumping,
+  } = useStarredMessageStore();
+
   const shouldRender = useCallback(
     (msg) =>
       msg.starred &&
       msg.starred.some((star) => star._id === authenticatedUserId),
     [authenticatedUserId]
   );
+
+  const handleJumpToMessage = async (message) => {
+    if (!message?._id || isJumping) return;
+
+    await jumpToMessage(message._id);
+    scrollToMessage(message._id);
+  };
+
   return (
     <MessageAggregator
       title="Starred Messages"
@@ -24,6 +37,7 @@ const StarredMessages = () => {
       fetchedMessageList={starredMessages}
       shouldRender={shouldRender}
       viewType={viewType}
+      onJumpToMessage={handleJumpToMessage}
     />
   );
 };