isometrik-chat 0.1.0

package/src/view/component/MainChatBox/index.js

@@ -0,0 +1,819 @@
+import React, { useState, useEffect, useRef } from "react";
+import Chatbox from "../Chatbox.js/index.js";
+import "./styles.css";
+import { fontSize } from "../../../Data";
+import ContactInfo from "../ContactInfo";
+import MenuDialog from "../menuDialog/index.js";
+import client from "../../../utils/chatSdk.js";
+import {
+  BACKICON,
+  MENU_ICON,
+  SEARCH,
+  placeholdeImage,
+} from "../../../utils/global.js";
+import { getCookie, setCookie } from "../../../lib/session/index.js";
+import ImageComponent from "../../../components/ImageComponent.js";
+import styled, { css } from "styled-components";
+import { useDetectOutsideClick } from "../../../components/common/Modal/useDetectOutsideClick.js";
+import { mobile } from "../../../utils/media.js";
+import OutsideAlerter from "../../../components/OutsideAlerter/OutsideAlerter.js";
+import {
+  clearConversationSelfMessages,
+  deleteConversationSelfMessages,
+  getTimeWithMeridian,
+  getUserConversationDetails,
+  postBlockUser,
+  postUnblockUser,
+} from "../../../lib/helpers.js";
+import useThrottle from "../../../hooks/useThrottle.js";
+import { DAYS, HOURS, MINUTES, MONTHS, SECONDS, YEARS } from "../../../lib/constant.js";
+import Toaster from "../Toaster/Toaster.js";
+import DialogBox from "../DialogBox.js";
+import UpperMenuBar from "../Carousle/UpperMenuBar.js";
+import SliderCarousal from "../Carousle/index.js";
+import { ChatState } from "../../../ChatContext.js";
+
+const PlaceholderBackGround = styled.div`
+  padding: 28px;
+  background-color: var(--intro-background);
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  width: 70vw;
+  height: 100%;
+  flex-direction: column;
+  ${mobile(css`
+    display: none;
+  `)}
+`;
+
+const MenuContainer = styled.div`
+  position: absolute;
+  background: var(--modal_color);
+  color: var(--black);
+  top: 45px;
+  right: 20px;
+  z-index: 999;
+  padding: 1rem 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity 331ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform-origin: right top;
+  width: 230px;
+  ${(props) =>
+    props.isActive &&
+    css`
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    `}
+`;
+
+const ModalContainer = styled.div`
+  background-color: var(--modal_color);
+  position: absolute;
+  top: 45px;
+  right: 20px;
+  z-index: 999;
+  width: 230px;
+  color: var(--black);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: opacity 331ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform-origin: right top;
+  padding: 1rem 0;
+
+  ${(props) =>
+    props.isMenu &&
+    css`
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    `}
+
+  ${mobile(css`
+    top: 50px;
+    left: 150px;
+  `)}
+`;
+
+const ModalMenu = styled.ul`
+  background: var(--modal_color);
+  color: var(--black);
+  box-shadow: -3px 0px 4px rgba(194, 194, 194, 0.25);
+  border-radius: 4px;
+  padding: 1rem 0;
+  position: absolute;
+  top: 8px;
+  right: 0px;
+  width: 180px;
+  opacity: 0;
+  cursor: pointer;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transform-origin: left top;
+  transition: opacity 331ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  z-index: 999;
+  ${(props) =>
+    props.isActive &&
+    css`
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    `}
+`;
+
+const ItemList = styled.li`
+  padding: 0 2rem;
+  margin: 0;
+  line-height: 2.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 14.5px;
+  color: var(--primary);
+  padding-right: 58px !important;
+`;
+
+let contactHeaderMenu = [
+  "Contact info",
+  "Select message",
+  "Close chat",
+  "Mute notifications",
+  "Disappering message",
+  "Clear message",
+  "Delete chat",
+  "Report",
+  "Block",
+];
+
+const getSelfMenuBar = (blockStatus) => {
+  return [
+  {
+    id: 1,
+    header: "Contact info",
+  },
+  // {
+  //   id: 2,
+  //   header: "Select message",
+  // },
+  // {
+  //   id: 3,
+  //   header: "Close chat",
+  // },
+  // {
+  //   id: 4,
+  //   header: "Mute notifications",
+  // },
+  // {
+  //   id: 5,
+  //   header: "Disappering message",
+  // },
+  {
+    id: 6,
+    header: "Clear chat",
+  },
+  {
+    id: 7,
+    header: "Delete chat",
+  },
+  // {
+  //   id: 8,
+  //   header: "Report",
+  // },
+  {
+    id: 9,
+    header: blockStatus ? 'Unblock' : "Block",  },
+  ];
+};
+
+const ChatBoxContainer = styled.div`
+  height: calc(100vh - 62px);
+`;
+
+const TypingText = styled.div`
+  color: var(--black);
+  visibility: visible;
+  user-select: text;
+  overflow-y: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-grow: 1;
+  align-items: flex-start;
+  font-size: 0.8125rem;
+  line-height: 1.5385;
+  min-height: 20px;
+`;
+
+function MainChat(props) {
+  const {
+    sidebarChatItem,
+    state,
+    setState,
+    setIsSidebarShow,
+    preventMessageRef,
+    getPaginationMessagesData,
+    isSidebarShow,
+    setShowProfilePicture,
+    findUserId,
+    setUserBlockModal,
+    setClearChatModal,
+    setDeleteChatModal,
+    setslideShow,
+    slideShow,
+    setSearchShow,
+    searchShow,
+    setUserConversationDetail,
+    userConversationDetail,
+    setMessageInfo,
+    messageInfo,
+    debounceSearchMessages,
+    enteredSearchQuery,
+    searchedMessageArray,
+    searchMessageLoaderStatus,
+    setMediaDocs,
+    mediaDocs,
+    sidebarData,
+    userDetails,
+  } = props;
+
+  // const [slideShow, setslideShow] = useState(false);
+  const [footer, setFooter] = useState(false);
+  // const [searchShow, setSearchShow] = useState(false);
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const [isMenu, setIsMenu] = useState(false);
+  // const [clearChatModal, setClearChatModal] = useState(false);
+  // const [deleteChatModal, setDeleteChatModal] = useState(false);
+  const [typing, setTyping] = useState(false);
+  const [online, setOnline] = useState(false);
+  const [userLastSeen, setUserLastSeen] = useState('');
+  const [getUserCurrentTime, setGetUserCurrentTime] = useState("");
+  const [getMessageTextLength, setGetMessageTextLength] = useState("");
+  // const [userBlockModal, setUserBlockModal] = useState(false);
+  // const [userConversationDetail, setUserConversationDetail] = useState({});
+  const [chatMediaAttachments, setChatMediaAttachments ] = useState([]);
+  const [chatMedia, setChatMedia ] = useState([]);
+  const [selectedMediaIndex, setSelectedMediaIndex] = useState(0);
+  const scrolledPositionRef = useRef(0);
+  const dialogueBoxRef = useRef(null);
+  const [messageChat , setMessageChat] = useState();
+  const [toastStatus, setToastStatus] = useState({open: false, message: '', variant: ''});
+  const open = Boolean(anchorEl);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const { theme } = ChatState();
+
+  const handleClickSlideShow = () => {
+    getMediaDocs();
+    setslideShow(true);
+    setSearchShow(false);
+    setMessageInfo(false);
+    setFooter(true);
+  };
+
+  const searchShowHandler = () => {
+    setslideShow(false);
+    setSearchShow(true);
+    setMessageInfo(false);
+  };
+
+  const handleClosee = () => {
+    setslideShow(false);
+    setSearchShow(false);
+    setMessageInfo(false);
+  };
+
+  const handler = () => {
+    setFooter(false);
+  };
+
+  const mediaContact = () => {
+    setslideShow(true);
+  };
+
+  function getLastSeen(lastSeenTimestamp) {
+    console.log('getLastSeen -- ', lastSeenTimestamp, new Date(lastSeenTimestamp));
+    try {
+      const lastSeenDate = new Date(lastSeenTimestamp);
+      const currentDate = new Date();
+
+      if (lastSeenDate.getTime() > currentDate.getTime())
+        console.log("Invalid input");
+      else {
+        const timeDiffInYears = Math.round(
+          (currentDate.getTime() - lastSeenDate.getTime()) / YEARS
+        );
+        const timeDiffInMonths = Math.round(
+          (currentDate.getTime() - lastSeenDate.getTime()) / MONTHS
+        );
+        const timeDiffInDays = Math.round(
+          (currentDate.getTime() - lastSeenDate.getTime()) / DAYS
+        );
+        const timeDiffInHours = Math.round(
+          (currentDate.getTime() - lastSeenDate.getTime()) / HOURS
+        );
+        const timeDiffInMinutes = Math.round(
+          (currentDate.getTime() - lastSeenDate.getTime()) / MINUTES
+        );
+        const timeDiffInSeconds = Math.round(
+          (currentDate.getTime() - lastSeenDate.getTime()) / SECONDS
+        );
+        if (timeDiffInSeconds < 60) {
+          setGetUserCurrentTime("🟢 last seen just now");
+        } else if (timeDiffInMinutes < 60) {
+          setGetUserCurrentTime(
+            `Last seen ${
+              timeDiffInMinutes === 1
+                ? "a minute"
+                : timeDiffInMinutes + " minutes"
+            } ago`
+          );
+        } else if (timeDiffInHours < 24) {
+          if (timeDiffInHours === 1) {
+            setGetUserCurrentTime(
+              `Last seen an hour ago at ${getTimeWithMeridian(lastSeenDate)}`
+            );
+          } else {
+            setGetUserCurrentTime(
+              `Last seen ${
+                lastSeenDate.getDate() === currentDate.getDate()
+                  ? "today"
+                  : "yesterday"
+              } at ${getTimeWithMeridian(lastSeenDate)}`
+            );
+          }
+        } else if (timeDiffInDays < 30) {
+          setGetUserCurrentTime(
+            `Last seen ${
+              timeDiffInDays === 1 ? "a day" : timeDiffInDays + " days"
+            } ago`
+          );
+        } else if (timeDiffInMonths < 12) {
+          setGetUserCurrentTime(
+            `Last seen ${
+              timeDiffInMonths === 1 ? "a month" : timeDiffInMonths + " months"
+            } ago`
+          );
+        } else {
+          setGetUserCurrentTime(
+            `Last seen ${
+              timeDiffInYears === 1 ? "an year" : timeDiffInYears + " years"
+            } ago`
+          );
+        }
+      }
+    }
+    catch(err) {
+      console.error('Error calculating lastSeen from getLastSeen()');
+    }
+  }
+
+  const throttledTyping = useThrottle(
+    async () => {
+      const payload = {
+        conversationId: sidebarChatItem?.conversationId,
+      };
+      try {
+        if (getMessageTextLength) {
+          await client.message.postIndicateTyping(payload).then((res) => {
+            // setTyping(res.msg === "Typing event sent successfully.");
+          });
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    3000,
+    false
+  );
+
+
+  const throttledOnline = async (conId) => {
+      const payload = {
+        conversationId: conId,
+      };
+      try {
+        if (Object?.keys(conId)?.length > 0) {
+          // if (findUserId !== undefined && Object?.keys(findUserId)?.length > 0) {
+          await client.Conversation.getConversationDetails(
+            payload,
+            conId
+          ).then((res) => {
+            if (res?.conversationDetails?.opponentDetails?.lastSeen === -1) {
+              setOnline(true);
+            }else{
+              setOnline(false);
+              console.log('last Seen from API - ', res?.conversationDetails?.opponentDetails?.lastSeen, new Date(res?.conversationDetails?.opponentDetails?.lastSeen));
+              setUserLastSeen(
+                res?.conversationDetails?.opponentDetails?.lastSeen
+              );
+            }
+          });
+          // }
+        }
+      } catch (error) {
+        console.error(error);
+      }
+  }
+
+  useEffect(() => {
+    if(!sidebarChatItem) return;
+    setSearchShow(false);
+    setUserLastSeen(sidebarChatItem?.opponentDetails?.lastSeen);
+    const intervalId = setInterval(() => {
+      throttledOnline(sidebarChatItem?.conversationId);
+    }, 30000);
+
+    return () => clearInterval(intervalId);
+  }, [sidebarChatItem]);
+
+  useEffect(() => {
+    if (!userLastSeen) return;
+    getLastSeen(userLastSeen);
+  }, [userLastSeen]);
+  
+  useEffect(() => {
+      if (sidebarChatItem?.opponentDetails?.lastSeen === -1) {
+        setOnline(true);
+      }else{
+        setOnline(false);
+      }
+      throttledTyping();
+  }, [findUserId, getMessageTextLength, sidebarChatItem?.conversationId]);
+
+  const userId = getCookie("userId");
+  useEffect(() => {
+    if (
+      findUserId?.action === "typingEvent" &&
+      findUserId.conversationId === sidebarChatItem?.conversationId &&
+      findUserId.userId !== userId
+    ) {
+      setTyping(true);
+    }
+
+    if (findUserId) {
+      const timeoutId = setTimeout(() => {
+        return setTyping(false);
+      }, 3000);
+      return(() => clearTimeout(timeoutId));
+    } else {
+      return setTyping(true);
+    }
+  }, [ findUserId]);
+
+  useEffect(() => {
+    const fetchUserConversationDetail = async () => {
+      const response = await getUserConversationDetails(sidebarChatItem?.conversationId);
+      setUserConversationDetail(response);
+    }
+    fetchUserConversationDetail();
+  }, [sidebarChatItem?.conversationId])
+  
+
+  useEffect(() => {
+    const payload = {
+      conversationId: sidebarChatItem?.conversationId,
+    };
+    sidebarChatItem &&
+      client?.message
+        ?.getMessages(payload)
+        .then((res) => {
+          const filteredResponseData = res.messages.filter(data => data?.body?.length > 0);
+
+          setState((prev) => {
+            return {
+              ...prev,
+              messages: {
+                ...prev?.messages,
+                [sidebarChatItem?.conversationId]: filteredResponseData,
+              },
+            };
+          });
+        })
+        .catch((err) => console.log(err, "err"));
+  }, [sidebarChatItem]);
+
+  const dropdownRef = useRef(null);
+  const [isActive, setIsActive] = useDetectOutsideClick(true);
+  const onClick = () => setIsActive(!isActive);
+
+  const arrowClick = () => {
+    setState({...state, selectedConvId : ''});
+    sidebarData(null);
+    setIsSidebarShow(false);
+    setCookie("isShow", false);
+  };
+
+  const getUserStatus = () => {
+    let value = -1;
+    if (
+      typing 
+      && findUserId?.conversationId === sidebarChatItem?.conversationId
+    ) {
+      value = 0;
+    } else if (!typing && online) {
+      value = 1;
+    } else if (!typing && !online) {
+      value = 2;
+    }
+    switch (value) {
+      case 0:
+        return "typing...";
+      case 1:
+        return "Online";
+      case 2:
+        return getUserCurrentTime;
+      default:
+        return getUserCurrentTime;
+    }
+  };
+
+  // const clearChatMessages = async () => {
+  //     const res  =  await clearConversationSelfMessages(sidebarChatItem?.conversationId);
+  //     setToastStatus({open: true, variant:"success", message: res.msg});
+  //     const getLastIndexValue = state.messages[sidebarChatItem?.conversationId].pop();
+  //     state.messages[sidebarChatItem?.conversationId] =  [getLastIndexValue];
+  //     setState((prev) => {
+  //       return {
+  //         ...prev,
+  //         messages: {
+  //           [sidebarChatItem?.conversationId]: [getLastIndexValue]
+  //         }
+  //       }
+  //     })
+  //     setClearChatModal(false);
+  // }
+  // const handleBlockUser = async() => {
+  //   try {
+  //     const res = await postBlockUser(sidebarChatItem?.opponentDetails?.userId);
+  //     setToastStatus({open: true, variant:"success", message: res.msg});
+  //     const response = await getUserConversationDetails(sidebarChatItem?.conversationId);
+  //     setUserConversationDetail(response);
+  //     setUserBlockModal(false);
+  //   } catch (error) {
+  //     setUserBlockModal(false);
+  //     setToastStatus({open: true, variant:"success", message: error.messages});
+  //     console.error('error', error)
+  //   }
+  // }
+
+  // const handleUnblockUser = async () => {
+  //   try {
+  //     const res = await postUnblockUser(sidebarChatItem?.opponentDetails?.userId);
+  //     setToastStatus({open: true, variant:"success", message: res.msg});
+  //     const response = await getUserConversationDetails(sidebarChatItem?.conversationId);
+  //     setUserConversationDetail(response);
+  //     setUserBlockModal(false);
+  //   } catch (error) {
+  //     setUserBlockModal(false);
+  //     setToastStatus({open: true, variant:"success", message: error.messages});
+  //     console.error('error', error);
+  //   }
+  // }
+
+  // const deleteChatMessages = async () => {
+  //   try {
+  //     const res = await deleteConversationSelfMessages(sidebarChatItem?.conversationId);
+  //     setToastStatus({open: true, variant:"success", message: res.msg});
+  //     handleClosee();
+  //     setDeleteChatModal(false);
+  //   } catch (error) {
+  //     setToastStatus({open: true, variant:"success", message: error.messages});
+  //     handleClosee();
+  //     setDeleteChatModal(false);
+  //     console.error('error', error);
+  //   }
+  // };
+
+  const getMediaDocs = async () => {
+    const conversationId = sidebarChatItem?.conversationId;
+    const payload = {
+      limit: 20,
+      skip: 0,
+      isGroup: false,
+      conversationId,
+      attachmentTypes: 0 // to get all media of particular conversation
+    };
+    try {
+      const res = await client.message.getMessages(payload);
+      setChatMedia([...res?.messages]);
+      setMediaDocs([...res?.messages]);
+      const mediaItems = [];
+      res?.messages.forEach((message) => message.attachments.forEach((media) => mediaItems.push(media)));
+      setChatMediaAttachments([...mediaItems]);
+      return res;
+    } catch (error) {
+      setToastStatus({open: true, variant:"error", message: 'No media or docs found.'});
+    }
+  }
+
+  const handleImgVidClick = async (mediaId) => {
+    const selectedIndex = chatMediaAttachments.findIndex(data => data.mediaId === mediaId);
+    if (selectedIndex === -1) {
+      try {
+        const res = await getMediaDocs();
+      if (res) {
+        const selectedIndex = res.messages.findIndex(data => data?.attachments[0]?.mediaId === mediaId);
+        scrolledPositionRef.current = selectedIndex;
+        setSelectedMediaIndex(selectedIndex);
+        dialogueBoxRef.current.showModal();
+      }
+      } catch (error) {
+        console.error('error', error);
+        setToastStatus({open: true, variant:"error", message: error.messages});
+      }
+      
+    }else{
+      scrolledPositionRef.current = selectedIndex;
+      setSelectedMediaIndex(selectedIndex);
+      dialogueBoxRef.current.showModal();
+    }
+  };
+
+
+  return (
+    <>
+      {props?.sidebarChatItem ? (
+        <div className={slideShow || searchShow || messageInfo ? "mainChatt" : "mainChat"}>
+          <div
+            className={slideShow || searchShow || messageInfo ? "chat_Header" : "chat_header"}
+          >
+            <span className="arrow_icon">
+              <ImageComponent
+                src={BACKICON}
+                className={props?.theme ? "darkicons" : "lighticons"}
+                style={{ marginRight: "10px" }}
+                onClick={arrowClick}
+              />
+            </span>
+            <img
+              onClick={handleClickSlideShow}
+              src={sidebarChatItem?.opponentDetails?.userProfileImageUrl}
+              className="user_image pointer"
+              alt="opponent_profile_picture"
+            />
+
+            <div className="chat_headerInfo">
+              <p
+                style={{ fontSize: fontSize?.name }}
+                onClick={handleClickSlideShow}
+                className="pointer"
+              >
+                {sidebarChatItem?.opponentDetails?.userName}
+              </p>
+              <TypingText>{getUserStatus()}</TypingText>
+              <div className="chat_headerInfo">
+                {JSON.stringify(sidebarChatItem?.online)}
+              </div>
+            </div>
+            <div className="chat_header_right">
+              <span className="m-4 icons pointer search_icon">
+                <ImageComponent
+                  onClick={searchShowHandler}
+                  src={SEARCH}
+                  className={theme ? "darkicons" : "lighticons"}
+                />
+              </span>
+              <span className="icons pointer menu_icon">
+                <ImageComponent
+                  isActive={isActive}
+                  onClick={() => setIsActive(!isActive)}
+                  src={MENU_ICON}
+                  className={theme ? "darkicons" : "lighticons"}
+                />
+
+              </span>
+
+              <OutsideAlerter onClose={() => setIsActive(false)}>
+                <MenuContainer isActive={isActive}>
+                  <MenuDialog
+                  menuData={getSelfMenuBar(userConversationDetail?.messagingDisabled)}
+                   isMenu={isActive}
+                   setIsMenu={setIsActive}
+                   setClearChatModal={setClearChatModal}
+                   setDeleteChatModal={setDeleteChatModal}
+                   setUserBlockModal={setUserBlockModal}
+                   handleClickSlideShow={handleClickSlideShow}
+                   userConversationDetail={userConversationDetail}
+              />
+                </MenuContainer>
+              </OutsideAlerter>
+            </div>
+          </div>
+
+          <ChatBoxContainer className="chatBox">
+            <Chatbox
+              sidebarChatItem={sidebarChatItem}
+              messages={state?.messages}
+              theme={theme}
+              getPaginationMessagesData={getPaginationMessagesData}
+              preventMessageRef={preventMessageRef}
+              findUserId={findUserId}
+              state={state}
+              setState={setState}
+              setGetMessageTextLength={setGetMessageTextLength}
+              userConversationDetail={userConversationDetail}
+              setslideShow={setslideShow}
+              setMessageInfo={setMessageInfo}
+              messageInfo={messageInfo}
+              setMessageChat={setMessageChat}
+              slideShow={slideShow}
+              setSearchShow={setSearchShow}
+              setMediaDocs={setMediaDocs}
+              userDetails={userDetails}
+              handleImgVidClick={handleImgVidClick}
+              setIsOpen={setIsOpen}
+              isOpen={isOpen}
+              getMediaDocs={getMediaDocs}
+              setToastStatus={setToastStatus}
+            />
+          </ChatBoxContainer>
+        </div>
+      ) : (
+        <div className="chatbox_Bg">
+          <PlaceholderBackGround className="bg">
+            <div>
+            <div>
+              <ImageComponent src={placeholdeImage}  />
+            </div>
+            <div>
+              <h1>Isometrik Chat</h1>
+            </div>
+            <div className="text_Color  text">
+            Isometrik web chat is fully sync with mobile isomterik chat , all  charts are synced when connected to the network
+            </div>
+            </div>
+          </PlaceholderBackGround>
+        </div>
+      )}
+      <div className={slideShow || searchShow || messageInfo ? "contactInfo" : "contact"}>
+        <ContactInfo
+          handleClosee={handleClosee}
+          searchShow={searchShow}
+          sidebarChatItem={props?.sidebarChatItem}
+          handler={handler}
+          slideShow={slideShow}
+          mediaContact={mediaContact}
+          theme={theme}
+          setShowProfilePicture={setShowProfilePicture}
+          setDeleteChatModal={setDeleteChatModal}
+          userConversationDetail={userConversationDetail}
+          setUserBlockModal={setUserBlockModal}
+          Messages={state}
+          setMessageInfo={setMessageInfo}
+          messageInfo={messageInfo}
+          conversationId={sidebarChatItem?.conversationId}
+          setMessageChat={setMessageChat}
+          messageChat={messageChat}
+          mediaDocs={mediaDocs}
+          debounceSearchMessages={debounceSearchMessages}
+          enteredSearchQuery={enteredSearchQuery}
+          searchedMessageArray={searchedMessageArray}
+          searchMessageLoaderStatus={searchMessageLoaderStatus}
+          handleImgVidClick={handleImgVidClick}
+        />
+      </div>
+      {
+    !isOpen && 
+      <DialogBox dialogueBoxRef={dialogueBoxRef} >
+        <div className='d-flex justify-content-center h-100' style={{ flexDirection: 'column' }}>
+          <UpperMenuBar chatMedia={chatMedia} selectedMediaIndex={selectedMediaIndex} scrolledPositionRef={scrolledPositionRef} />
+          <SliderCarousal assets={chatMediaAttachments} selectedMediaIndex={selectedMediaIndex} scrolledPositionRef={scrolledPositionRef} />
+        </div>
+      </DialogBox>
+      }
+      <>
+      {
+        <Toaster message={toastStatus.message} variant={toastStatus.variant} open={toastStatus.open} onClose={() => setToastStatus({open: false})} theme={theme} />
+      }
+      </>
+      <style jsx>{`
+        @media (max-width: 48rem) {
+          .mainChat {
+            width: 100vw;
+            display: ${!isSidebarShow ? "none" : "block"};
+          }
+          .contactInfo {
+            width: 100vw;
+          }
+        }
+        @media (min-width: 48rem) {
+          .mainChat .arrow_icon {
+            display: none;
+          }
+        }
+      `}</style>
+    </>
+  );
+}
+export default MainChat;