Fixed 2122

src/components/Cards/ItemDetailsCard/ItemDetailsCard.js

   toggleDeleteOfferModal,
   toggleEditOfferModal,
 } from "../../../store/actions/modal/modalActions";
+import { fetchChats } from "../../../store/actions/chat/chatActions";
 
 const ItemDetailsCard = (props) => {
   // const offer = props.offer;
   const date = formatDateLocale(new Date(offer?._created));
 
   const startExchange = () => {
+    dispatch(fetchChats({ userId: userId, offerId: props.offer._id }));
     startChat(chats, offer, userId);
   };
 
     );
   };
 
-  console.log(props)
+  console.log(props);
   return (
     <>
       <ItemDetailsCardContainer

src/components/DirectChat/DirectChat.js

 import SkeletonDirectChat from "./SkeletonDirectChat/SkeletonDirectChat";
 import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
 import { CHAT_SCOPE } from "../../store/actions/chat/chatActionConstants";
-import {
-  selectUserId,
-} from "../../store/selectors/loginSelectors";
+import { selectUserId } from "../../store/selectors/loginSelectors";
 import {
   acceptExchangeSocket,
   addMessageListener,

src/components/Header/UserButton/UserButton.js

 
 const UserButton = (props) => {
   const location = useLocation();
-  const {t} = useTranslation();
+  const { t } = useTranslation();
   const [userPopoverOpen, setUserPopoverOpen] = useState(false);
   const [userAnchorEl, setUserAnchorEl] = useState(null);
 
             color: selectedTheme.colors.primaryPurple,
           }}
         >
-          <AccountCircle />
+          <AccountCircle onClick={openUserPopover} />
         </IconButton>
       </UserButtonContainer>
       <PopoverComponent

src/store/saga/chatSaga.js

         _id: newChatId,
         message: {
           user: {
-            _id: userId
+            _id: userId,
           },
           text: payload.payload.message,
           _created: new Date().toISOString(),