isometrik-chat 0.1.0

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

@@ -0,0 +1,856 @@
+import React, { useEffect, useRef, useState } from "react";
+import "./styles.css";
+import watsappbg from "../../../assets/images/watsappbg.png";
+import darkbg from "../../../assets/images/drkbg.jpg";
+import MessagesBox from "../../../components/ChatBox/MessagesBox";
+import client from "../../../utils/chatSdk";
+import { chatAttachmentOptions, deletemesageForSelf, getDeviceId, getMediaUrl, mediaUploadValidator, deleteMessageforEveryOne, generatedMessagePresignedUrls, documentUploadValidator, validDocumentType, encodeChatBody } from "../../../lib/helpers";
+import PaginationForMsg from "../pagination/paginationForMsg";
+import styled, { css } from "styled-components";
+import { mobile } from "../../../utils/media";
+import Picker, { Theme } from 'emoji-picker-react';
+import {
+  ATTACH_FILE,
+  CAMERA,
+  DOCUMENT,
+  EMOJI_ICON,
+  GALLERY,
+  POll,
+  SENDICON,
+  STICKER,
+  USER,
+  VOICE,
+  CLOSE_ICON,
+} from "../../../utils/global";
+import ImageComponent from "../../../components/ImageComponent";
+import OutsideAlerter from "../../../components/OutsideAlerter/OutsideAlerter";
+// import ReplyChatMessage from "../ReplyChatMessage/ReplyChatMessage";
+import CustomModal from "../../../components/CustomModal";
+import ModalDialog from "../../../components/Modal/ModalDialog";
+import AudioRecorder from "./AudioRecorder";
+import TakePhoto from "./TakePhoto";
+import { getCookie } from "../../../lib/session";
+import { MESSAGE_DELETE_FOR_ALL, MESSAGE_DELETE_LOCAL } from "../../../lib/constant";
+
+const ChatMessages = styled.div`
+  overflow-y: auto;
+  height: calc(100vh - 145px);
+
+  --overflow-style: none;
+  scrollbar-width: none;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  ${mobile(css`
+    height: calc(100vh - 200px);
+  `)}
+`;
+
+const FormContainer = styled.form`
+  .custom_mic_icon{
+      margin-right: 1rem;
+  }
+
+  ${mobile(css`
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+  `)}
+`;
+
+const PollImage = styled.p`
+  background: linear-gradient(to top, #039889 50%, #00ae9b 50%);
+  height: 50px;
+  width: 50px;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const GalleryImage = styled.p`
+  background: linear-gradient(to top, #d120bf 50%, #b553dd 50%);
+  height: 50px;
+  width: 50px;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+const DocumentImage = styled.p`
+  background: linear-gradient(to top, #208ad1 50%, #5353dd 50%);
+  height: 50px;
+  width: 50px;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const CameraImage = styled.p`
+  background: linear-gradient(to top, #eb138f 50%, #f40073 50%);
+  height: 50px;
+  width: 50px;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+
+const UserImage = styled.p`
+  background: linear-gradient(to top, #00aaff 50%, #0000ff 50%);
+  height: 50px;
+  width: 50px;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const StickerImage = styled.p`
+  background: linear-gradient(to top, #1395eb 50%, #0000ff 50%);
+  height: 50px;
+  width: 50px;
+  border-radius: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+    position: relative;
+`;
+
+const AttachFile = styled.div`
+  position: absolute;
+  bottom: 60px;
+  left: 50px;
+  cursor: pointer;
+  visibility: hidden;
+  transform: translateY(50px);
+  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: left top;
+  z-index: 999;
+  ${(props) =>
+    props.uploadFiles &&
+    css`
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    `}
+`;
+
+const AttachFileContainer = styled.div`
+      position: relative;
+`;
+
+const ChatBoxBodyContainer = styled.div`
+  ${mobile(css`
+    height: calc(100vh - 132px);
+  `)}
+`;
+const BlockUserFooter = styled.div`
+  background-color: var(--modal_color);
+  padding: 14px 19px;
+  width: 100%;
+`;
+
+const BlockUserFooterText = styled.p`
+    color: var(--black);
+    text-align: center;
+    margin: 10px 0;
+`;
+
+const EmojiPicker = styled.div`
+position:absolute;
+left:0px;
+bottom:68px;
+width:100%;
+z-index: 999;
+visibility:hidden;
+transform: translateY(70px);
+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: left top;
+${(props) =>
+    props.isShowEmojiPicker &&
+    css`
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  `}
+`;
+
+const ChatMessageWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+`;
+
+const ReplyMessage = styled.div`
+position:absolute;
+left:0px;
+bottom:0px;
+width:100%;
+z-index: 999;
+visibility:hidden;
+transform: translateY(30px);
+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: left top;
+${(props) =>
+    props?.reply &&
+    css`
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  `}
+
+`;
+
+const ShowHoverItem = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.5rem 1rem;
+  background: var(--bg-white);
+  position: absolute;
+  left: 60px;
+  top: 0;
+  color:  var( --black);
+  white-space: nowrap;
+  border-radius: 20px;
+`;
+
+function Chatbox(props) {
+  const {
+    sidebarChatItem,
+    messages,
+    getPaginationMessagesData,
+    findUserId,
+    state,
+    setState,
+    setGetMessageTextLength,
+    userConversationDetail,
+    setslideShow,
+    setMessageInfo,
+    messageInfo,
+    MessageInfoHandler,
+    setMessageChat,
+    setSearchShow,
+    setToastStatus,
+    setMediaDocs,
+    userDetails,
+    handleImgVidClick,
+    setIsOpen,
+    isOpen,
+    getMediaDocs,
+    theme,
+  } = props;
+  const [messageText, setMessageText] = useState("");
+  const [uploadFiles, setUploadFiles] = useState(false);
+  const [isShowEmojiPicker, setIsShowEmojiPicker] = useState(false);
+  const [isReply, setIsReply] = useState(false);
+  const [reply, setReply] = useState({ isreply: false, Data: {}, showReplyMessage: false });
+  const [deleteMessage, setDeleteMessage] = useState({ delete: false, data: {} })
+  const [isDelete, setIsDelete] = useState(false)
+  const [audioRecorderStatus, setAudioRecorderStatus] = useState(false);
+  const [recordedStream, setRecordedStream] = useState('');
+  const [takeCameraPhoto, setTakeCameraPhoto] = useState(false);
+  const [convertClickedImageToFileType, setConvertClickedImageToFileType] = useState('');
+  const [hoveredItem, setHoveredItem] = useState(null);
+  const [showAudioRecordButton, setShowAudioRecordButton] = useState(true);
+  const submitAudioRecordingRef = useRef();
+  const chatScrollMessageRef = useRef(null);
+  const selectImageUploadRef = useRef(null);
+  const documentUploadRef = useRef(null);
+  const userId = getCookie("userId");
+  const isSelfMessage = (userId === deleteMessage?.data?.chat?.senderInfo?.userId || userId === deleteMessage?.data?.chat?.senderId);
+
+  useEffect(() => {
+    setGetMessageTextLength(messageText);
+  }, [messageText]);
+
+  useEffect(() => {
+    setMessageText('');
+  }, [findUserId?.conversationId])
+
+  const sendRecordedAudioServer = async () => {
+    const recordedStreamAttachment = {};
+    const currentTimestamp = new Date().getTime();
+    const file = new File([recordedStream], "recording.mp3", {
+      type: "audio/mp3",
+    });
+    recordedStreamAttachment.name = file?.name;
+    recordedStreamAttachment.size = file?.size;
+    recordedStreamAttachment.extension = 'mp3';
+    recordedStreamAttachment.attachmentType = 2;
+    recordedStreamAttachment.mimeType = 'mp3';
+    const payload = {
+      conversationId: sidebarChatItem?.conversationId,
+      attachments: [
+        {
+          nameWithExtension: "unnamed.mp3",
+          mediaType: 2,
+          mediaId: `${currentTimestamp}`,
+        }
+      ]
+    }
+    try {
+      const res = await generatedMessagePresignedUrls(payload);
+      recordedStreamAttachment.thumbnailUrl = res?.presignedUrls?.[0].thumbnailUrl;
+      recordedStreamAttachment.mediaUrl = res?.presignedUrls?.[0].mediaUrl;
+      recordedStreamAttachment.mediaId = res?.presignedUrls?.[0].mediaId;
+      if (res) {
+        const uploadAudio = await getMediaUrl(res?.presignedUrls[0].mediaPresignedUrl, file, 'mp3');
+      }
+      return recordedStreamAttachment;
+    } catch (error) {
+      console.error('error', error);
+      setToastStatus({ open: true, variant: 'error', message: error?.msg || error?.message || '' })
+    }
+  }
+
+  const handleChatMessages = async (e) => {
+    e.preventDefault();
+    setMessageText("");
+    // replyMessageCloseHandler();
+    const messagePayload = await getChatMessagePayload();
+    try {
+      const res = await client?.message?.postMessages(messagePayload);
+      console.log(res, 'res');
+    } catch (error) {
+      console.log("err", error);
+    }
+  };
+
+  const getChatMessagePayload = async (e) => {
+    const deviceId = await getDeviceId();
+    // e.preventDefault();
+    // setMessageText("");
+    const payload = {
+      showInConversation: true,
+      metaData: {
+        secretMessage: true,
+      },
+      messageType: 0,
+      events: {
+        updateUnreadCount: true,
+        sendPushNotification: true,
+      },
+      encrypted: true,
+      deviceId: deviceId.substring(0, 100),
+      customType: "NormalMessage",
+      conversationId: sidebarChatItem?.conversationId,
+      conversationType: sidebarChatItem?.conversationType,
+      isGroup: sidebarChatItem?.isGroup,
+      body: encodeChatBody(messageText),
+      searchableTags: [encodeChatBody(messageText)],
+    };
+    if (reply?.isreply === true) {
+      payload.customType = 'Reply';
+      payload.messageType = 2;
+      payload.parentMessageId = reply?.data?.chat?.messageId;
+      return payload;
+    } else if (audioRecorderStatus) {
+      const attachments = await sendRecordedAudioServer();
+      payload.attachments = [attachments];
+      payload.customType = 'audio';
+      payload.body = btoa('Voice message');
+      payload.searchableTags = [btoa('Voice message')]
+      payload.notificationBody = 'Sent you an Audio';
+      payload.notificationTitle = sidebarChatItem?.senderName;
+      return payload;
+    } else {
+      return payload;
+    }
+  }
+
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      handleSubmit(event);
+    }
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    submitAudioRecordingRef?.current?.handleDeleteButtonClick();
+    setAudioRecorderStatus(false);
+    handleChatMessages(event);
+    setIsShowEmojiPicker(false);
+    setReply({ ...reply, isreply: false, showReplyMessage: true });
+    setShowAudioRecordButton(true);
+  };
+
+  const uploadImageToServer = async (file, documentType) => {
+    try {
+      let filesObj = {};
+      const mediaId = String(new Date().getTime() + Math.floor(Math.random() * 1000));
+      filesObj[mediaId] = {
+        nameWithExtension: file?.name,
+        mediaType: 0,
+        mediaId,
+        size: file?.size,
+        mimeType: file?.type,
+        file
+      }
+      const presignedUrlPayload = {
+        conversationId: sidebarChatItem?.conversationId,
+        attachments: Object.values(filesObj)
+      }
+      const response = await client?.message?.postMessagesPresignedurls(presignedUrlPayload);
+      const deviceId = await getDeviceId();
+      if (response?.presignedUrls) {
+        response?.presignedUrls.forEach(async (element) => {
+          const attachmentsForImg = [];
+          const fileExtensionType = filesObj[element?.mediaId].mimeType.split('/')[1];
+          attachmentsForImg.push({
+            thumbnailUrl: element?.thumbnailUrl,
+            mediaUrl: element?.mediaUrl,
+            mediaId: element?.mediaId,
+            size: filesObj[element?.mediaId].size,
+            mimeType: filesObj[element?.mediaId].mimeType,
+            name: filesObj[element?.mediaId].nameWithExtension,
+            extension: fileExtensionType,
+            attachmentType: 0
+          })
+          await getMediaUrl(element?.mediaPresignedUrl, filesObj[element.mediaId].file, filesObj[element.mediaId].file.type).then(async () => {
+            const messagePayload = {
+              showInConversation: true,
+              messageType: 0,
+              encrypted: true,
+              deviceId: deviceId,
+              conversationId: sidebarChatItem?.conversationId,
+              body: fileExtensionType === 'mp4' ? btoa('video') : documentType ? btoa('document') : btoa('image'),
+              parentMessageId: null,
+              metaData: null,
+              events: null,
+              attachments: attachmentsForImg,
+              notificationBody: `Sent you ${fileExtensionType === 'mp4' ? 'a video' :
+              documentType ? 'a document' : 'an image'} `,
+              notificationTitle: userDetails?.userName,
+            }
+            if (documentType) {
+              messagePayload.customType = 'document'
+            }
+            await client?.message?.postMessages(messagePayload);
+          }).catch((err) => {
+            console.log(err, 'err');
+          })
+        });
+      }
+    } catch (e) {
+      console.log("error from galleryClickHandler", e);
+    }
+  }
+
+  const galleryClickHandler = async (e) => {
+    try {
+      const file = e.target.files[0];
+      const { valid, error } = mediaUploadValidator(file);
+      if (!valid) {
+        setToastStatus({ open: true, message: 'File Size should be less than 50MB.', variant: 'error' })
+        return;
+      }
+      await uploadImageToServer(file);
+    } catch (error) {
+      console.error('error', error);
+    }
+  }
+
+  // const textarea = document.querySelector("textarea");
+  // textarea.addEventListener( e=>{
+  //   textarea.style.height = "59px";
+  //   let scHeight = e.target.scrollHeight;
+  //   textarea.style.height = `${scHeight}px`; 
+  // })
+  const audioHandler = () => {
+    setAudioRecorderStatus(true);
+    setShowAudioRecordButton(false);
+  }
+
+  const audioCloseHandler = () => {
+    setAudioRecorderStatus(false);
+    setShowAudioRecordButton(true);
+    setMessageText('');
+  }
+
+  const handleOnEmojiClick = (emojiObject) => {
+    setMessageText((prevInput) => prevInput + emojiObject.emoji);
+  };
+
+
+  const allMessagesArray = () => {
+    try {
+      let currIndex;
+      if (findUserId.action === MESSAGE_DELETE_FOR_ALL) {
+        currIndex = state?.messages[findUserId?.conversationId].findIndex(
+          (obj) =>
+            (obj.messageId === findUserId?.messageIds[0])
+        );
+        const removeMessageObj = state?.messages[findUserId?.conversationId].splice(currIndex, 1);
+
+        setState((prev) => {
+          return {
+            ...prev,
+            messages: {
+              ...prev.messages,
+              [sidebarChatItem?.conversationId]: [...state?.messages[findUserId?.conversationId]],
+            },
+          };
+        });
+      };
+    } catch (error) {
+      console.error('error', error);
+    }
+  }
+
+  const sortedMessageArraySelf = () => {
+    try {
+      let currIndex;
+      currIndex = state?.messages[findUserId?.conversationId].findIndex(
+        (obj) =>
+          (obj.messageId === deleteMessage?.data?.chat?.messageId)
+      );
+      state?.messages[findUserId?.conversationId].splice(currIndex, 1);
+      setState((prev) => {
+        return {
+          ...prev,
+          messages: {
+            ...prev.messages,
+            [sidebarChatItem?.conversationId]: [...state?.messages[findUserId?.conversationId]],
+          },
+        };
+      });
+    } catch (error) {
+      console.error('error', error);
+    }
+  }
+
+  useEffect(() => {
+    if (findUserId.action === MESSAGE_DELETE_FOR_ALL) {
+      allMessagesArray();
+    }
+  }, [findUserId]);
+
+  const deleteMesageHandler = async () => {
+    try {
+      const res = await deletemesageForSelf(sidebarChatItem?.conversationId, deleteMessage?.data?.chat?.messageId);
+      sortedMessageArraySelf();
+      setDeleteMessage({ ...deleteMessage, delete: false, data: {} });
+      setIsDelete(true);
+    } catch (error) {
+      console.error('error', error);
+      setToastStatus({ open: true, variant: "error", message: error.messages || error });
+    }
+
+  }
+
+  const cancleDeleteMessage = () => {
+    setDeleteMessage({ ...deleteMessage, delete: false, data: {} });
+  }
+
+  const deleteMessageEveryone = async () => {
+    try {
+      const res = await deleteMessageforEveryOne(sidebarChatItem?.conversationId, deleteMessage?.data?.chat?.messageId);
+      setDeleteMessage({ ...deleteMessage, delete: false, data: {} });
+    } catch (error) {
+      console.error('error', error);
+      setToastStatus({ open: true, variant: "error", message: error.messages || error });
+    }
+  }
+
+  const sendClickedImage = async () => {
+    try {
+      const { valid, error } = mediaUploadValidator(convertClickedImageToFileType);
+      if (!valid) {
+        setToastStatus({ open: true, message: 'File Size should be less than 50MB.', variant: 'error' })
+        return;
+      }
+      await uploadImageToServer(convertClickedImageToFileType);
+      setTakeCameraPhoto(false);
+    } catch (error) {
+      console.error('error', error);
+    }
+  }
+
+  const attachmentOptionClickHandler = (data) => {
+    setUploadFiles(!uploadFiles);
+    setHoveredItem(null);
+    if (data.id === 0) {
+      setTakeCameraPhoto(true);
+    } else if (data.id === 2) {
+      selectImageUploadRef.current.click();
+    } else if (data.id === 1) {
+      documentUploadRef.current.click();
+    }
+  }
+
+  const handleOnFocus = () => {
+    console.log('!!! -- handleOnFocus -- !!!');
+    window.scrollTo(0, 0);
+    document.body.scrollTop = 0;
+  }
+
+  const documentUploadHandler = async (e) => {
+    try {
+      const file = e.target.files[0];
+      const { valid, error } = documentUploadValidator(file);
+      if (!valid) {
+        setToastStatus({ open: true, message: error, variant: 'error' })
+        return;
+      };
+      await uploadImageToServer(file, true);
+    } catch (error) {
+      console.error(error, 'error');
+      setToastStatus({ open: true, message: 'Something went wrong!', variant: 'error' })
+    }
+
+  }
+
+  return (
+    <>
+      <PaginationForMsg
+        elementRef={chatScrollMessageRef}
+        pageEventHandler={getPaginationMessagesData}
+        isTop={true}
+      />
+      {
+        takeCameraPhoto ?
+          <>
+            <TakePhoto setConvertClickedImageToFileType={setConvertClickedImageToFileType} sendClickedImage={sendClickedImage} theme={props?.theme} isTakePhotoModal={takeCameraPhoto} onClose={() => setTakeCameraPhoto(false)} />
+          </> :
+          <>
+            <ChatBoxBodyContainer
+              className="chatbox_body"
+              id="allMessages"
+              style={{
+                background: `url(${props?.theme === true ? darkbg : watsappbg})`,
+              }}
+            >
+              <ChatMessages ref={chatScrollMessageRef} id="chat-messages">
+                <MessagesBox
+                  getUsersChatMessagesDetail={messages || []}
+                  chatProfileData={sidebarChatItem?.opponentDetails}
+                  conversationId={sidebarChatItem?.conversationId}
+                  theme={props?.theme}
+                  findUserId={findUserId}
+                  state={state}
+                  setState={setState}
+                  chatContainerRef={chatScrollMessageRef}
+                  setslideShow={setslideShow}
+                  setMessageInfo={setMessageInfo}
+                  messageInfo={messageInfo}
+                  MessageInfoHandler={MessageInfoHandler}
+                  setMessageChat={setMessageChat}
+                  setSearchShow={setSearchShow}
+                  setToastStatus={setToastStatus}
+                  setIsReply={setIsReply}
+                  isReply={isReply}
+                  setReply={setReply}
+                  reply={reply}
+                  setDeleteMessage={setDeleteMessage}
+                  deleteMessage={deleteMessage}
+                  setIsDelete={setIsDelete}
+                  isDelete={isDelete}
+                  setMediaDocs={setMediaDocs}
+                  userDetails={userDetails}
+                  handleImgVidClick={handleImgVidClick}
+                  setIsOpen={setIsOpen}
+                  isOpen={isOpen}
+                  getMediaDocs={getMediaDocs}
+                />
+              </ChatMessages>
+            </ChatBoxBodyContainer>
+            <FormContainer>
+              {
+                userConversationDetail?.messagingDisabled ?
+                  <BlockUserFooter>
+                    <BlockUserFooterText>{`Can't send a message to blocked contact ${userConversationDetail.opponentDetails.userName} .`}</BlockUserFooterText>
+                  </BlockUserFooter>
+                  :
+                  <div
+                    className={
+                      !props?.footer ? "chat_footer footerChat" : "chat_footer footer"
+                    }
+                  >
+                    {/* <ReplyMessage reply={reply?.isreply}>
+                      {reply?.isreply && <ReplyChatMessage setReply={setReply} reply={reply} />}
+                    </ReplyMessage> */}
+                    {isShowEmojiPicker &&
+                      <ImageComponent
+                        src={CLOSE_ICON}
+                        style={{ margin: "0px 10px", padding: "2px" }}
+                        className={props?.theme ? "darkicons" : "lighticons"}
+                        onClick={() => setIsShowEmojiPicker(false)}
+                      />}
+                    {
+                      !audioRecorderStatus
+                      &&
+                      <>
+                        <OutsideAlerter onClose={() => setIsShowEmojiPicker(false)}>
+                          {
+                            !isShowEmojiPicker &&
+                            <ImageComponent
+                            src={EMOJI_ICON}
+                            className={props?.theme ? "dark_footer_icons" : "light_footer_icons"}
+                            onClick={() => setIsShowEmojiPicker(true)}
+                          />
+                          }
+                          
+                          <EmojiPicker isShowEmojiPicker={isShowEmojiPicker}>
+                            <Picker
+                              width="100%"
+                              className=""
+                              onEmojiClick={(e) => handleOnEmojiClick(e)}
+                              autoFocusSearch
+                              emojiStyle="apple"
+                              height="100%"
+                              previewConfig={{ showPreview: false, defaultCaption: 'hello' }}
+                            />
+                          </EmojiPicker> </OutsideAlerter>
+                        <ChatMessageWrapper>
+                          <OutsideAlerter onClose={() => setUploadFiles(false)}>
+                            <ImageComponent
+                              onClick={() => setUploadFiles(!uploadFiles)}
+                              style={{ margilLeft: "10px", height: "35px", width: "35px" }}
+                              src={ATTACH_FILE}
+                              className={props?.theme ? "dark_footer_icons" : "light_footer_icons"}
+                            />
+                            <AttachFile uploadFiles={uploadFiles}>
+                              <AttachFileContainer>
+                                {
+                                  chatAttachmentOptions.map(data => (
+                                    <CameraImage key={data.title}
+                                      onMouseEnter={() => setHoveredItem(data.title)}
+                                      onMouseLeave={() => setHoveredItem(null)}
+                                    >
+                                      <ImageComponent
+                                        onClick={() => {
+                                          attachmentOptionClickHandler(data);
+                                        }}
+                                        src={data.imageUrl}
+                                        className="darkicons"
+                                      />
+                                      {hoveredItem === data.title &&
+                                        <ShowHoverItem>
+                                          {hoveredItem}
+                                        </ShowHoverItem>
+                                      }
+                                    </CameraImage>
+                                  ))
+                                }
+                                <input type="file" ref={documentUploadRef} className="d-none" onChange={documentUploadHandler} name="" id="" />
+                                <input ref={selectImageUploadRef} accept="image/png, image/gif, image/jpeg, input/jpg, video/mp4" multiple type="file" name="file" id="file-input" onClick={(event) => event.target.value = null} className="d-none" onChange={galleryClickHandler} />
+                              </AttachFileContainer>
+                            </AttachFile>
+                          </OutsideAlerter>
+                          <textarea
+                            style={{ resize: "none", height: "50px" }}
+                            placeholder="Type a message..."
+                            name="text"
+                            value={messageText}
+                            onChange={(e) => setMessageText(e.target.value)}
+                            onKeyDown={handleKeyDown}
+                            onFocus={handleOnFocus}
+                          />
+                        </ChatMessageWrapper>
+                      </>
+                    }
+                    {
+                      audioRecorderStatus &&
+                      <AudioRecorder audioRecorderStatus={audioRecorderStatus} theme={theme} setAudioRecorderStatus={setAudioRecorderStatus} ref={submitAudioRecordingRef} setRecordedStream={setRecordedStream} conversationId={sidebarChatItem?.conversationId} onClose={() => audioCloseHandler()} setMessageText={setMessageText} recordedStream={recordedStream} />
+                    }
+                    <div>
+                      <>
+                        {
+                          showAudioRecordButton && !messageText?.length &&
+                          (
+                            <span className="cursor-pointer">
+                              <ImageComponent
+                                onClick={() => audioHandler()}
+                                src={VOICE}
+                                className={props?.theme ? "dark_footer_icons" : "light_footer_icons"}
+                              />
+                            </span>
+                          )
+                        }
+                      </>
+                      <>
+                        {
+                          (messageText?.length || messageText) &&
+                          <ImageComponent
+                            onClick={handleSubmit}
+                            src={SENDICON}
+                            className={props?.theme ? "dark_footer_icons" : "light_footer_icons"}
+                          />
+                        }
+                      </>
+                    </div>
+                  </div>
+              }
+              {/* <OutsideAlerter onClose={()=>setUploadFiles(false)}>
+         <AttachFile uploadFiles={uploadFiles}>
+             <PollImage >
+             <ImageComponent
+              onClick={()=>setUploadFiles(!uploadFiles)}
+              src={POll}
+              className="darkicons"
+            />
+             </PollImage>
+             <UserImage>
+             <ImageComponent
+              onClick={()=>setUploadFiles(!uploadFiles)}
+              src={USER}
+              className="darkicons"
+            />
+             </UserImage>
+             <DocumentImage>
+             <ImageComponent
+              onClick={()=>setUploadFiles(!uploadFiles)}
+              src={DOCUMENT}
+              className="darkicons"
+            />
+             </DocumentImage>
+             <CameraImage>
+             <ImageComponent
+              onClick={()=>setUploadFiles(!uploadFiles)}
+              src={CAMERA}
+              className="darkicons"
+            />
+             </CameraImage>
+             <StickerImage>
+             <ImageComponent
+              
+              onClick={()=>setUploadFiles(!uploadFiles)}
+              src={STICKER}
+              className="darkicons"
+            />
+             </StickerImage>
+             <GalleryImage>
+             <ImageComponent
+              onClick={()=>setUploadFiles(!uploadFiles)}
+              src={GALLERY}
+              className="darkicons"
+            />
+             </GalleryImage>
+              </AttachFile>
+        </OutsideAlerter>         */}
+            </FormContainer>
+
+
+            <CustomModal open={deleteMessage?.delete} >
+              <ModalDialog DeleteModal={"Delete messages"} isSelfMessage={isSelfMessage} handleOnCloseModal={cancleDeleteMessage} deleteMesageHandler={deleteMesageHandler} handleUnblockUser={deleteMessageEveryone} setToastStatus={setToastStatus}
+              />
+            </CustomModal>
+
+
+          </>
+      }
+    </>
+  );
+}
+
+export default Chatbox;