l-min-components 1.0.1192 → 1.0.1198

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "l-min-components",
-  "version": "1.0.1192",
+  "version": "1.0.1198",
   "type": "module",
   "files": [
     "src/assets",

package/src/assets/svg/pause.jsx

@@ -1,11 +1,12 @@
 import React from "react";
-export const PauseIcon = ({ width, height, fill }) => (
+export const PauseIcon = ({ width, height, fill, onClick }) => (
   <svg
     width={width || "20"}
     height={height || "20"}
     viewBox="0 0 20 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    onClick={onClick}
   >
     <path
       d="M8 7V13M12 7V13M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"

package/src/assets/svg/recorder.jsx

@@ -1,11 +1,12 @@
 import React from "react";
-export const RecorderIcon = ({ width, height, fill }) => (
+export const RecorderIcon = ({ width, height, fill, onClick }) => (
   <svg
     width={width || "22"}
     height={height || "22"}
     viewBox="0 0 22 22"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    onClick={onClick}
   >
     <path
       fillRule="evenodd"

package/src/assets/svg/recorderPlay.jsx

@@ -1,11 +1,12 @@
 import React from "react";
-export const RecorderPlayIcon = ({ width, height, fill }) => (
+export const RecorderPlayIcon = ({ width, height, fill, onClick }) => (
   <svg
     width={width || "24"}
     height={height || "24"}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    onClick={onClick}
   >
     <path
       d="M12 19C15.31 19 18 16.31 18 13V8C18 4.69 15.31 2 12 2C8.69 2 6 4.69 6 8V13C6 16.31 8.69 19 12 19Z"

package/src/components/header/getHeaderDetails.js

@@ -332,6 +332,44 @@ const useHeader = () => {
     }
   };
 
+
+  const [{ ...getTotalMessagesCountData }, getTotalMessagesCount] = useAxios(
+    {
+      method: "GET",
+    },
+    {
+      manual: true,
+    }
+  );
+
+  const handleTotalMessagesCount = async (
+    account_type,
+    enterprise_account_id
+  ) => {
+    try {
+      let apiUrl;
+
+      if (account_type === "instructor") {
+        // For instructor account type
+        apiUrl = enterprise_account_id
+          ? `/notify/v1/instructor/${enterprise_account_id}/chats/new_messages/` // Affiliate instructor
+          : `/notify/v1/${account_type}/chats/new_messages/`; // Non-affiliate instructor
+      } else if (account_type === "enterprise") {
+        // For enterprise account type
+        apiUrl = `/notify/v1/${account_type}/chats/new_messages/`; // Enterprise
+      } else if (account_type === "personal") {
+        apiUrl = `/notify/v1/chats/new_messages/`;
+      } else {
+      }
+      await getTotalMessagesCount({
+        url: apiUrl,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+
   return {
     handleGetUserDetails,
     userDetails,

package/src/components/messageAddon/InputSection/index.jsx

@@ -46,7 +46,7 @@ const InputSection = ({
   handleCreateMessage,
   createMessageData,
   enterpriseAffiliateID,
-  receiverID
+  receiverID,
 }) => {
   const [showEmoji, setShowEmoji] = useState();
   const [inputMethod, setInputMethod] = useState("text"); // text | recorder
@@ -56,11 +56,11 @@ const InputSection = ({
   }); // state for user text
   const [blobData, setBlobData] = useState({}); //state for audio
   const [recording, setRecording] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
   const [successResponse, setSuccessResponse] = useState(false);
 
   const imageRef = useRef();
   const {
-
     handleCreateMessageWithMedia,
     createMessageWithMediaData,
     createMessageAffiliateData,
@@ -89,7 +89,14 @@ const InputSection = ({
       const data = {
         media: file,
       };
-      handleCreateMessageWithMedia(data.media, receiverID);
+      // handleCreateMessageWithMedia(data.media, receiverID);
+      handleCreateMessageWithMedia(
+        receiverID,
+        accountType,
+        data.media,
+        courseID,
+        enterpriseAffiliateID
+      );
       setInputMethod("text");
       //console.log("uploas", file);
     }
@@ -99,7 +106,13 @@ const InputSection = ({
       setIsMessageSending(true);
 
       setTimeout(() => {
-        handleCreateMessage(receiverID, accountType, text, courseID, enterpriseAffiliateID);
+        handleCreateMessage(
+          receiverID,
+          accountType,
+          text,
+          courseID,
+          enterpriseAffiliateID
+        );
       }, 1000);
     }
   };
@@ -232,6 +245,8 @@ const InputSection = ({
                 setBlobData,
                 recording,
                 setRecording,
+                isPlaying,
+                setIsPlaying,
               }}
             />
           </>
@@ -267,26 +282,41 @@ const Recorder = ({
   setInputMethod,
   recording,
   setRecording,
+  isPlaying,
+  setIsPlaying,
 }) => {
   const [recordingTime, setRecordingTime] = useState(0);
   const waveSurfer = useRef(null);
   const counterRef = useRef();
+  const [pausedTime, setPausedTime] = useState(0);
+
+  console.log("blob", blobData);
+
+  // Reset everything when clicking Bin
+  const clearRecording = () => {
+    if (waveSurfer.current) {
+      waveSurfer.current.stop();
+      waveSurfer.current.empty();
+    }
+
+    setBlobData({ blob: null, url: null });
+    setRecording(false);
+    setIsPlaying(false);
+    setRecordingTime(0);
+    setPausedTime(0);
+    setInputMethod("text");
+  };
 
-  //console.log("blob", blobData);
-  // on record stop, concatenate blob to form a pause and continue recording feature
+  // Concatenate blobs for pause & continue recording
   const handleStop = (data) => {
     const { blob } = data;
-    setBlobData((state) => {
-      const newBlob = state.blob
-        ? new Blob([state.blob, blob], { type: "audio/wav" })
+    setBlobData((prevState) => {
+      const newBlob = prevState.blob
+        ? new Blob([prevState.blob, blob], { type: "audio/wav" })
         : blob;
 
       const url = URL.createObjectURL(newBlob);
-
-      return {
-        blob: newBlob,
-        url,
-      };
+      return { blob: newBlob, url };
     });
   };
 
@@ -294,32 +324,28 @@ const Recorder = ({
     setRecording(true);
   }, []);
 
-  // handle counting time while recording
+  // Handle recording time counter
   useEffect(() => {
-    let time = 0;
     if (recording) {
+      let time = pausedTime;
       counterRef.current = setInterval(() => {
         time++;
-        const currentDuration = waveSurfer.current?.getDuration() ?? 0;
-        // //console.log(waveSurfer.current?.getDuration() ?? 0);
-        setRecordingTime(() => {
-          return Math.floor(currentDuration + time);
-        });
+        setRecordingTime(time);
       }, 1000);
+    } else {
+      clearInterval(counterRef.current);
+      setPausedTime(recordingTime);
     }
-    return () => {
-      if (counterRef.current) {
-        clearInterval(counterRef.current);
-      }
-    };
+
+    return () => clearInterval(counterRef.current);
   }, [recording]);
 
-  //handle creating waves each time
+  // Setup WaveSurfer for playback
   useEffect(() => {
     if (blobData.blob) {
       if (!waveSurfer.current) {
         waveSurfer.current = WaveSurfer.create({
-          container: "#waves",
+          container: "#waves-input",
           waveColor: "#E5AD0E",
           progressColor: "#FECF4C",
           cursorWidth: 0,
@@ -331,6 +357,7 @@ const Recorder = ({
         });
       }
 
+      waveSurfer.current.on("finish", () => setIsPlaying(false));
       waveSurfer.current.loadBlob(blobData.blob);
     }
   }, [blobData.blob]);
@@ -338,33 +365,53 @@ const Recorder = ({
   return (
     <>
       <div className="left-recorder-state">
-        <span className="icon" onClick={(e) => setRecording((state) => !state)}>
-          {recording ? <PauseIcon /> : <RecorderIcon />}
+        <span className="icon">
+          {(recording || isPlaying) && (
+            <PauseIcon
+              onClick={() => {
+                if (recording) {
+                  setRecording(false); // Stop recording
+                } else if (isPlaying) {
+                  waveSurfer.current.pause(); // Pause playback
+                  setIsPlaying(false);
+                }
+              }}
+            />
+          )}
+
+          {!recording && !isPlaying && blobData.blob && (
+            <RecorderIcon
+              onClick={() => {
+                waveSurfer.current.play(); // Play recording
+                setIsPlaying(true);
+              }}
+            />
+          )}
         </span>
+
         <div className="timer">
           {moment.duration(recordingTime, "seconds").minutes()}:
           {moment.duration(recordingTime, "seconds").seconds()}
         </div>
       </div>
+
       <div className="waves-section">
-        {!recording && (
+        {!recording && blobData.blob && (
           <span
             className="icon"
             onClick={() => {
-              waveSurfer.current.playPause();
+              waveSurfer.current.stop(); // Stop playback
+              setIsPlaying(false);
+              setRecording(true); // Resume recording
             }}
           >
             <RecorderPlayIcon />
           </span>
         )}
-        <div id="waves"></div>
-        {!recording && (
-          <span
-            className="icon"
-            onClick={
-              () => setInputMethod("text") // resetting input method, everything about recorder shutdown
-            }
-          >
+        <div id="waves-input"></div>
+
+        {!recording && blobData.blob && (
+          <span className="icon" onClick={clearRecording}>
             <Bin />
           </span>
         )}

package/src/components/messageAddon/hooks/useMedia.js

@@ -43,14 +43,18 @@ const useMedia = () => {
   const [{ ...uploadMediaData }, uploadMedia] = useAxios(
     {
       method: "POST",
-      url: `/media/v1/enterprise/files/`,
+      // url: `/media/v1/enterprise/files/`,
     },
     {
       manual: true,
     }
   );
 
-  const handleUploadMedia = async (files) => {
+  const handleUploadMedia = async (
+    files,
+    account_type,
+    enterprise_account_id
+  ) => {
     try {
       if (files) {
         console.log(files);
@@ -59,7 +63,25 @@ const useMedia = () => {
         // const formdata = new FormData();
         // formdata.append("upload", files.upload);
         // return await uploadMedia({ data: formdata });
-        return await uploadMedia({ data: files });
+        let apiUrl;
+
+        if (account_type === "instructor") {
+          // For instructor account type
+          apiUrl = enterprise_account_id
+            ? `/media/v1/instructor/${enterprise_account_id}/files/` // Affiliate instructor
+            : `/media/v1/${account_type}/files/`; // Non-affiliate instructor
+        } else if (account_type === "enterprise") {
+          // For enterprise account type
+          apiUrl = `/media/v1/${account_type}/files/`; // Enterprise
+        } else if (account_type === "personal") {
+          // For personal account type
+          apiUrl = `/media/v1/files/`;
+        } else {
+          // throw new Error("Invalid account type"); // Optional error handling for unexpected types
+          console.log("Invalid account type");
+        }
+
+        return await uploadMedia({ url: apiUrl, data: files });
       } else {
         return false;
       }
@@ -67,7 +89,6 @@ const useMedia = () => {
       console.log(err);
     }
   };
-
   return {
     getMediaFilesData,
     handleGetMediaFiles,

package/src/components/messageAddon/hooks/useMessaging.js

@@ -103,7 +103,7 @@ const useMessaging = () => {
 
     if (account_type === "instructor") {
       // For instructor account type
-      apiUrl = affiliates
+      apiUrl = enterprise_account_id
         ? `/notify/v1/instructor/${enterprise_account_id}/chats/` // Affiliate instructor
         : `/notify/v1/${account_type}/chats/`; // Non-affiliate instructor
     } else if (account_type === "enterprise") {
@@ -130,7 +130,6 @@ const useMessaging = () => {
     });
   };
 
-
   //POST Create message Affiliate
   const [{ ...createMessageAffiliateData }, createMessageAffiliate] = useAxios(
     {
@@ -170,19 +169,42 @@ const useMessaging = () => {
     }
   );
 
-  const handleCreateMessageWithMedia = async (file, account_id) => {
+  const handleCreateMessageWithMedia = async (
+    account_id,
+    account_type,
+    file,
+    course_id,
+    enterprise_account_id
+  ) => {
     setLoading(true);
     const newUploaded = [];
 
     const formData = new FormData();
     formData.append("upload", file);
-    const uploadedData = await handleUploadMedia(formData);
+    const uploadedData = await handleUploadMedia(formData, account_type, enterprise_account_id);
 
     newUploaded.push(uploadedData?.data?.results[0]);
 
+    let apiUrl;
+
+    if (account_type === "instructor") {
+      // For instructor account type
+      apiUrl = enterprise_account_id
+        ? `/notify/v1/instructor/${enterprise_account_id}/chats/` // Affiliate instructor
+        : `/notify/v1/${account_type}/chats/`; // Non-affiliate instructor
+    } else if (account_type === "enterprise") {
+      // For enterprise account type
+      apiUrl = `/notify/v1/${account_type}/chats/`; // Enterprise
+    } else if (account_type === "personal") {
+      // For personal account type
+      apiUrl = `/notify/v1/chats/`;
+    } else {
+      console.log("Invalid account type");
+    }
+
     // if (uploadMediaData?.data) {
     await createMessageMedia({
-      url: `/notify/v1/chats/`,
+      url: apiUrl,
       data: {
         // ...data,
         ...(newUploaded?.length && {
@@ -191,6 +213,7 @@ const useMessaging = () => {
       },
       params: {
         account_id,
+        course_id,
       },
     });
     // }
@@ -244,12 +267,13 @@ const useMessaging = () => {
     account_id,
     course_id,
     room_id,
+    enterprise_account_id,
     limit,
     offset
   ) => {
     try {
       await roomMessageAffiliate({
-        url: `/notify/v1/instructor/${account_id}/chats/`,
+        url: `/notify/v1/instructor/${enterprise_account_id}/chats/`,
         params: {
           account_id,
           course_id,

package/src/components/messageAddon/hooks/useRooms.js

@@ -326,11 +326,25 @@ const useRooms = () => {
     account_type,
     account_id,
     course_id,
-    data
+    data,
+    enterprise_account_id
   ) => {
     try {
+      let apiUrl;
+
+      if (account_type === "instructor") {
+        apiUrl = enterprise_account_id
+          ? `/notify/v1/instructor/${enterprise_account_id}/rooms/chat_course/` // Affiliate instructor
+          : `/notify/v1/${account_type}/rooms/chat_course/`; // Non-affiliate instructor
+      } else if (account_type === "enterprise") {
+        apiUrl = `/notify/v1/${account_type}/rooms/chat_course/`; // Enterprise
+      } else if (account_type === "personal") {
+        apiUrl = `/notify/v1/rooms/chat_course/`; // For personal account type
+      } else {
+        console.log("Invalid account type");
+      }
       await createRoom({
-        url: `/notify/v1/${account_type}/rooms/chat_course/`,
+        url: apiUrl,
         data: {
           ...data,
         },

package/src/components/messageAddon/messages/index.styled.js

@@ -793,7 +793,6 @@ export const MessageBox = styled.div`
     h6 {
       font-size: 14px;
       font-weight: 400;
-      color: #ffffff;
       /* padding-top: 6px; */
     }
 
@@ -957,6 +956,12 @@ export const TextMessagePanel = styled.div`
         max-height: 58px;
         display: block;
       }
+      #waves-input {
+        /* min-width: 500px; */
+        width: 100%;
+        max-height: 58px;
+        display: block;
+      }
       .react-mic {
         opacity: 0;
         pointer-events: none;

package/src/components/messageAddon/messages/messagebox/messageBubble.jsx

@@ -45,24 +45,21 @@ const MessageBubble = ({
             </div>
           ) : (
             <>
-              {chat?.media?.mimetype === "audio/wav" ? (
-                <div
-                  className={
-                    chat?.user_message ? "user-audio" : "friend-audio"
-                  }>
-                  <WaveSurferPlayer audio={chat?.media?.url} />
-                  <p className="msg-time-stamp">
-                    {moment(chat?.media?.created_at).format("h:mm a")}
-                  </p>
-                </div>
-              ) : (
-                <div className={chat?.user_message ? "user-img" : "friend-img"}>
-                  <img src={chat?.media?.stream_url} />
-                  <p className="msg-time-stamp">
-                    {moment(chat?.created_at).format("h:mm a")}
-                  </p>
-                </div>
-              )}
+              <div
+                className={chat?.user_message ? "user-audio" : "friend-audio"}
+              >
+                <WaveSurferPlayer streamSrc={chat?.media?.url} />
+                {/* <StreamAudioPlayer streamSrc={chat?.media?.url} /> */}
+                {/* <WaveSurferPlayer
+                    height={100}
+                    waveColor="rgb(200, 0, 200)"
+                    progressColor="rgb(100, 0, 100)"
+                    url={chat?.media?.url}
+                  /> */}
+                <p className="msg-time-stamp">
+                  {moment(chat?.media?.created_at).format("h:mm a")}
+                </p>
+              </div>
             </>
           )}
         </div>

package/src/components/messageAddon/messages/messagebox/waveSurferPlayer.jsx

@@ -1,64 +1,154 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  useContext,
+} from "react";
 import WaveSurfer from "wavesurfer.js";
 import { FaPlayCircle, FaPauseCircle } from "react-icons/fa";
-import styled from "styled-components";
+import useAudioPlayer from "../../../useAudioPlayer";
+import AudioWaveComponent from "../../../useAudioPlayer/audioWave";
 
-const WaveSurferPlayer = ({ audio }) => {
-  const containerRef = useRef();
-  const waveSurferRef = useRef();
+const WaveSurferPlayer = ({ size, streamSrc }) => {
+  const { isPlaying, progress, play, pause } = useAudioPlayer({
+    streamSrc,
+  });
+  // const containerRef = useRef();
+  // const waveSurferRef = useRef();
+  // const hlsRef = useRef();
   //  const waveSurferRef = useRef({
   //   isPlaying: () => false,
   // })
-  const [isPlaying, toggleIsPlaying] = useState(false);
+  // const [isPlaying, toggleIsPlaying] = useState(false);
+  // const { accessToken } = useContext(OutletContext);
+  // const account_id = getCookie("defaultAccountID");
 
-  useEffect(() => {
-    waveSurferRef.current = WaveSurfer.create({
-      // container: "#waves",
-      container: containerRef.current,
-      responsive: true,
-      barWidth: 2,
-      barHeight: 10,
-      waveColor: "#E5AD0E",
-      progressColor: "#FECF4C",
-      cursorWidth: 0,
-      height: 30,
-      barGap: 2,
-      barRadius: 2,
-      barMinHeight: 3,
-    });
-    waveSurferRef.current.load(audio);
+  // useEffect(() => {
+  //   if (!src) {
+  //     hlsRef.current = new Hls({
+  //       xhrSetup: function (xhr, url) {
+  //         try {
+  //           const modifiedURL = `${url}?_account=${account_id}`;
+  //           xhr.open("GET", modifiedURL, true);
+  //           xhr.setRequestHeader("Authorization", `Bearer ${accessToken}`);
+  //         } catch (error) {
+  //           console.error("XHR setup error:", error);
+  //         }
+  //       },
+  //     });
+  //   }
 
-    return () => {
-      waveSurferRef.current.destroy();
-    };
-  }, [audio]);
+  //   waveSurferRef.current = WaveSurfer.create({
+  //     // container: "#waves",
+  //     container: containerRef.current,
+  //     responsive: true,
+  //     barWidth: 2,
+  //     barHeight: 10,
+  //     waveColor: "#fff",
+  //     progressColor: "#fff",
+  //     cursorWidth: 0,
+  //     height: 30,
+  //     barGap: 2,
+  //     barRadius: 2,
+  //     barMinHeight: 3,
+  //   });
+  //   // waveSurferRef.current.load(audio);
+  //   // waveSurferRef.current.on("ready", (e) => {
+  //   //   waveSurferRef.current = waveSurfer;
+
+  //   //   console.log("wave", e);
+  //   // });
+
+  //   //stream test
+
+  //   if (Hls?.isSupported() && !src) {
+  //     hlsRef.current.attachMedia(waveSurferRef?.current?.media);
+  //     hlsRef.current.loadSource(
+  //       "https://dev-117782726-api.learngual.com" + audio
+  //     );
+  //     hlsRef.current.startLoad();
+  //   } else {
+  //     waveSurferRef.current.load(src);
+  //   }
+
+  //   waveSurferRef.current.on("finish", () => {
+  //     toggleIsPlaying(false);
+  //   });
+  //   //stream test
+
+  //   return () => {
+  //     // waveSurferRef.current.destroy();
+  //     if (hlsRef.current) {
+  //       hlsRef.current.destroy();
+  //     }
+  //     if (waveSurferRef.current) {
+  //       waveSurferRef.current.destroy();
+  //     }
+  //   };
+  // }, [audio]);
+
+  // const [waveSurfer, setWaveSurfer] = useState(null);
+
+  //   useEffect(() => {
+  //     // Initialize WaveSurfer
+  //     const wavesurfer = WaveSurfer.create({
+  //       container: '#waves', // The ID of the container element
+  //       waveColor: 'violet',
+  //       progressColor: 'purple'
+  //     });
+  //     setWaveSurfer(wavesurfer);
+
+  //     // Cleanup on component unmount
+  //     return () => wavesurfer.destroy();
+  //   }, []);
+
+  //   const loadAudio = async (audio) => {
+  //     try {
+  //       const response = await fetch(audio);
+  //       const audioBlob = await response.blob();
+  //       waveSurfer.loadBlob(audioBlob);
+  //       console.log(response)
+  //     } catch (error) {
+  //       console.error('Error loading audio:', error);
+  //     }
+  //   };
+  console.log("wave", isPlaying);
 
-  //console.log("wave", isPlaying);
   return (
     <div style={{ display: "flex", alignItems: "center", height: "33px" }}>
       <button
         onClick={() => {
-          waveSurferRef.current.playPause();
-          toggleIsPlaying(waveSurferRef.current.isPlaying());
+          
+          // waveSurferRef.current.playPause();
+          // toggleIsPlaying(waveSurferRef.current.isPlaying());
+          // waveSurferRef.current.play();
+          // loadAudio(audio)
+          // toggleIsPlaying(waveSurferRef.current.isPlaying());
+          // waveSurferRef.current.isPlaying()
+          //   ? waveSurferRef.current.pause()
+          //   : waveSurferRef.current.play();
         }}
         type="button"
-        className="audio-btn">
+        className="audio-btn"
+      >
         {isPlaying ? (
-          <FaPauseCircle size="20px" style={{ color: "#FEBF10" }} />
+          <FaPauseCircle
+            size="20px"
+            style={{ color: "#fff" }}
+            onClick={pause}
+          />
         ) : (
-          <FaPlayCircle size="20px" style={{ color: "#FEBF10" }} />
+          <FaPlayCircle size="20px" style={{ color: "#fff" }} onClick={play} />
         )}
       </button>
-      <div
-        ref={containerRef}
-        style={{
-          width: "100%",
-          display: "block",
-          height: 30,
-        }}>
-        {" "}
+      <div id="waves-bubble">
+        <AudioWaveComponent
+          type="small"
+          count={14}
+          playState={isPlaying ? "play" : "paused"}
+        />
       </div>
-      <div id="waves"></div>
     </div>
   );
 };

package/src/components/messageAddon/messages/messages.jsx

@@ -196,7 +196,7 @@ const Messages = ({
       handleRoomRecipientDetails(accountType, receiverID, courseID);
     }
     if (affiliates && accountType === "instructor") {
-      handleRoomMessageAffiliate(receiverID, courseID, roomID);
+      handleRoomMessageAffiliate(receiverID, courseID, roomID, enterpriseAffiliateID);
       handleRoomRecipientDetailsAffiliate(enterpriseAffiliateID, receiverID, courseID); //check later
       // handleRoomRecipientDetails(accountType, receiverID, courseID);
     }
@@ -213,7 +213,7 @@ const Messages = ({
   }, [receiverID, courseID, roomID]);
 
   useEffect(() => {
-    if (createMessageData?.data) {
+    if (createMessageData?.data || createMessageWithMediaData?.data) {
       if (accountType === "enterprise") {
         handleRoomMessage(accountType, receiverID, courseID);
         handleRoomRecipientDetails(accountType, receiverID, courseID);
@@ -223,15 +223,15 @@ const Messages = ({
         handleRoomRecipientDetails(accountType, receiverID, courseID);
       }
       if (affiliates && accountType === "instructor") {
-        handleRoomMessageAffiliate(receiverID, courseID, roomID);
-        handleRoomRecipientDetails(accountType, receiverID, courseID);
+        handleRoomMessageAffiliate(receiverID, courseID, roomID, enterpriseAffiliateID);
+        handleRoomRecipientDetailsAffiliate(enterpriseAffiliateID, receiverID, courseID); //
       }
       if (accountType === "personal") {
         handleRetrieveMessage(receiverID, courseID, roomID);
         handleRoomRecipientDetailsPersonal(receiverID, courseID);
       }
     }
-  }, [createMessageData?.data]);
+  }, [createMessageData?.data, createMessageWithMediaData?.data]);
 
   //console.log("allMessages", allMessages);
   //console.log("handleRoomMessage", roomMessageData);

package/src/hooks/leftNavMenu.jsx

@@ -149,6 +149,7 @@ export const sideMenuOptions = [
         icon: <MessagesIcon />,
         iconActive: <MessagesIconActive />,
         text: "Messages",
+        notifications: true,
       },
       {
         path: "/enterprise/announcements",
@@ -196,6 +197,7 @@ export const sideMenuOptions = [
         icon: <MessagesIcon />,
         iconActive: <MessagesIconActive />,
         text: "Messages",
+        notifications: true,
       },
       {
         path: "/instructor/announcements",
@@ -250,6 +252,7 @@ export const sideMenuOptions = [
         icon: <MessagesIcon />,
         iconActive: <MessagesIconActive />,
         text: "Messages",
+        notifications: true,
       },
       {
         path: "/personal/addons",