Fix: Include pinned messages from threads in the main chat interface

packages/react/src/hooks/useFetchChatData.js

@@ -6,6 +6,7 @@ import {
   useMemberStore,
   useMessageStore,
   useStarredMessageStore,
+  usePinnedMessageStore,
 } from '../store';
 
 const useFetchChatData = (showRoles) => {
@@ -18,6 +19,9 @@ const useFetchChatData = (showRoles) => {
   const setStarredMessages = useStarredMessageStore(
     (state) => state.setStarredMessages
   );
+  const setPinnedMessages = usePinnedMessageStore(
+    (state) => state.setPinnedMessages
+  );
   const isUserAuthenticated = useUserStore(
     (state) => state.isUserAuthenticated
   );
@@ -109,7 +113,28 @@ const useFetchChatData = (showRoles) => {
     [isUserAuthenticated, RCInstance, setStarredMessages]
   );
 
-  return { getMessagesAndRoles, getStarredMessages };
+  const getPinnedMessages = useCallback(
+    async (anonymousMode) => {
+      if (isUserAuthenticated) {
+        try {
+          if (!isUserAuthenticated && !anonymousMode) {
+            return;
+          }
+          const { messages } = await RCInstance.getPinnedMessages();
+          const sortedMessages = messages.sort(
+            (a, b) => new Date(b.ts) - new Date(a.ts)
+          );
+
+          setPinnedMessages(sortedMessages);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    },
+    [isUserAuthenticated, RCInstance, setPinnedMessages]
+  );
+
+  return { getMessagesAndRoles, getStarredMessages, getPinnedMessages };
 };
 
 export default useFetchChatData;

packages/react/src/store/pinnedMessageStore.js

@@ -3,6 +3,8 @@ import { create } from 'zustand';
 const usePinnedMessageStore = create((set) => ({
   showPinned: false,
   setShowPinned: (showPinned) => set(() => ({ showPinned })),
+  PinnedMessage: [],
+  setPinnedMessages: (PinnedMessage) => set(() => ({ PinnedMessage })),
 }));
 
 export default usePinnedMessageStore;

packages/react/src/views/ChatLayout/ChatLayout.js

@@ -42,6 +42,9 @@ const ChatLayout = () => {
   const setStarredMessages = useStarredMessageStore(
     (state) => state.setStarredMessages
   );
+  const setPinnedMessages = usePinnedMessageStore(
+    (state) => state.setPinnedMessages
+  );
   const starredMessages = useStarredMessageStore(
     (state) => state.starredMessages
   );
@@ -97,6 +100,26 @@ const ChatLayout = () => {
   useEffect(() => {
     getStarredMessages();
   }, [showSidebar]);
+
+  const getPinnedMessages = useCallback(async () => {
+    if (isUserAuthenticated) {
+      try {
+        if (!isUserAuthenticated && !anonymousMode) {
+          return;
+        }
+        const { messages } = await RCInstance.getPinnedMessages();
+        const sortedMessages = messages.sort(
+          (a, b) => new Date(b.ts) - new Date(a.ts)
+        );
+        setPinnedMessages(sortedMessages);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }, [isUserAuthenticated, anonymousMode, RCInstance]);
+  useEffect(() => {
+    getPinnedMessages();
+  }, [showSidebar]);
   return (
     <Box
       css={styles.layout}

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

@@ -66,7 +66,7 @@ const Message = ({
   );
   const addQuoteMessage = useMessageStore((state) => state.addQuoteMessage);
   const openThread = useMessageStore((state) => state.openThread);
-  const { getStarredMessages } = useFetchChatData();
+  const { getStarredMessages, getPinnedMessages } = useFetchChatData();
   const dispatchToastMessage = useToastBarDispatch();
   const { editMessage, setEditMessage } = useMessageStore((state) => ({
     editMessage: state.editMessage,
@@ -135,6 +135,7 @@ const Message = ({
         message: isPinned ? 'Message unpinned' : 'Message pinned',
       });
     }
+    getPinnedMessages();
   };
 
   const handleCopyMessage = async (msg) => {

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

@@ -1,15 +1,18 @@
 import React from 'react';
 import { useComponentOverrides } from '@embeddedchat/ui-elements';
 import { MessageAggregator } from './common/MessageAggregator';
+import { usePinnedMessageStore } from '../../store';
 
 const PinnedMessages = () => {
   const { variantOverrides } = useComponentOverrides('PinnedMessages');
   const viewType = variantOverrides.viewType || 'Sidebar';
+  const pinnedMessages = usePinnedMessageStore((state) => state.PinnedMessage);
   return (
     <MessageAggregator
       title="Pinned Messages"
       iconName="pin"
       noMessageInfo="No Pinned Messages"
+      fetchedMessageList={pinnedMessages}
       shouldRender={(msg) => msg.pinned}
       viewType={viewType}
     />