isometrik-chat 0.1.0

package/src/components/ChatBox/MessagesBox.js

@@ -0,0 +1,533 @@
+import React, { useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import ChatBubble from "./ChatBubble";
+import Icon from "../Icon";
+import { getCookie } from "../../lib/session";
+import { getMediaUrl, getMessageDateSorted, mediaUploadValidator, validDocumentType } from "../../lib/helpers";
+import { BOTTOM_ARROW } from "../../utils/global";
+import { mobile } from "../../utils/media";
+import SliderCarousal from "../../view/component/Carousle";
+import DialogBox from "../../view/component/DialogBox";
+import client from "../../utils/chatSdk";
+import UpperMenuBar from "../../view/component/Carousle/UpperMenuBar";
+import { MESSAGE_DELETE_FOR_ALL, MESSAGE_DELETE_LOCAL } from "../../lib/constant";
+import Toaster from "../../view/component/Toaster/Toaster";
+import ImageComponent from "../ImageComponent";
+
+const ChatMessagesSection = styled.section`
+  display: flex;
+  justify-content: center;
+  margin: 15px 0 10px;
+  height: 100%;
+  ${mobile(css`
+      height: calc(100% - 10px)
+  `)}
+
+  .block {
+    display: block;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .mediaContainer {
+    max-width: 21rem;
+    ${mobile(css`
+      max-width: 14rem;
+    `)}
+  }
+
+  .user_self_chat {
+    margin: 0.25rem 0 0.25rem auto;
+    max-width: 65%;
+    border-radius: 7.5px;
+    --wt-bg-opacity: 1;
+    padding:0.2rem 0.4rem;
+    background-color: var(--sender_chatbg);
+    position:relative;
+    ${mobile(css`
+        max-width: 90%;
+    `)}
+  }
+
+  .user_chat {
+    margin: 0.25rem 0;
+    max-width: 65%;
+    padding: 0.5rem;
+    width: fit-content;
+    border-bottom-right-radius: 7.5px;
+    border-bottom-left-radius: 7.5px;
+    --tw-bg-opacity: 1;
+    background-color: var(--white);
+    position:relative;
+
+    ${mobile(css`
+        max-width: 90%;
+    `)}
+  }
+`;
+
+const ChatMessagesMain = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  position: relative;
+  height: 100%;
+
+  .user_self_chat:first-of-type{
+    margin-top: auto !important;
+  }
+
+  .user_chat:first-of-type {
+    margin-top: auto !important;
+  }
+`;
+
+const ChatDateWrapper = styled.div`
+  text-align: center;
+  margin: 10px 0 14px;
+  position: relative;
+`;
+
+const ChatDate = styled.span`
+  background-color: var(--gray_color);
+  display: inline-block;
+  color: var(--black);
+  font-size: 0.75rem;
+  padding: 7px 10px;
+  border-radius: 5px;
+  max-width: fit-content;
+  margin: 0 auto;
+  box-shadow: 0 1px 0.5px rgba(var(--shadow-rgb),.13);
+`;
+
+const StickyChatDate = styled.span`
+  background-color: var(--gray_color);
+  position: fixed;
+  margin-top: 10px;
+  color: var(--black);
+  font-size: 0.75rem;
+  padding: 7px 10px;
+  border-radius: 5px;
+  z-index: 10;
+  box-shadow: 0 1px 0.5px rgba(var(--shadow-rgb),.13);
+`;
+
+const ScrollToBottom = styled.div`
+  position: fixed;
+  bottom: 90px;
+  right: 35px;
+  z-index: 10;
+  cursor: pointer;
+  border-radius: 50%;
+  padding: 6px;
+  background: white;
+  box-shadow: 0 0 10px rgba(0,0,0, 0.3);
+  ${mobile(css`
+    right: 15px;
+  `)}
+`;
+
+const ChatEncryptionMsg = styled.div`
+  background-color: var(--sender_chatbg);
+  color: var(--encrypted_color);
+  font-size: 0.77rem;
+  text-align: center;
+  padding: 5px 10px;
+  position: relative;
+  margin-bottom: 8px;
+  border-radius: 5px;
+  line-height: 20px;
+`;
+
+const ChatEncryptionIcon = styled(Icon)`
+  color: var(--encrypted_color);
+  margin: 0 5px 3px;
+`;
+
+const ChatImageSent = styled.div`
+  position: relative;
+  max-width: 280px;
+  max-height: 339px;
+  .chat_image{
+    width: 100%;
+    height: 100%;
+  }
+
+`;
+
+const ImageOverlay = styled.div`
+    width: 100%;
+    height: 100px;
+    position: absolute;
+    bottom: 0;
+    background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.6) 100%);
+`;
+
+const ChatVideo = styled.video`
+    max-height: 340px;
+    object-fit: contain;
+`;
+
+
+const MessagesBox = (props) => {
+  const {
+    chatProfileData,
+    getUsersChatMessagesDetail,
+    conversationId,
+    findUserId,
+    state,
+    setState,
+    chatContainerRef,
+    theme,
+    setslideShow,
+    setMessageInfo,
+    messageInfo,
+    setMessageChat,
+    setSearchShow,
+    setIsReply,
+    isReply,
+    setReply,
+    reply,
+    setDeleteMessage,
+    deleteMessage,
+    isDelete,
+    setMediaDocs,
+    userDetails,
+    handleImgVidClick,
+    setIsOpen,
+    isOpen
+  } = props;
+  const messages =
+    Object.keys(getUsersChatMessagesDetail).length > 0 &&
+    !!getUsersChatMessagesDetail?.[conversationId]
+      ? getUsersChatMessagesDetail[conversationId]?.length > 0
+        ? [...getUsersChatMessagesDetail[conversationId]]?.reverse()
+        : [getUsersChatMessagesDetail[conversationId]]?.reverse()
+      : "";
+
+  const [allMsg, setAllMsg] = useState([]);
+  const [deliverMessage, setDeliverMessage] = useState("");
+  const [readMessage, setReadMessage] = useState("");
+  const dateWithMessages = new Set([]);
+  const dateBadgesArr = [];
+  const [stickyDateBadge, setStickyDateBadge] = useState('');
+  const [showBadge, setShowBadge] = useState(false);
+  const [ showBottomScroller, setShowBottomScroller ] = useState(false);
+  // const [isOpen, setIsOpen] = useState(false);
+  const [toastStatus, setToastStatus] = useState({open: false, message: '', variant: ''});
+
+
+  useEffect(() => {
+      setAllMsg([...messages]);
+
+  }, [messages.length]);
+
+  // Commenting the reply message code as we don't need this feature now -  
+  // const getReplyMessageData = (chat) => {
+  //     const replyData = allMsg.filter(replyMessage => replyMessage.messageId === chat?.parentMessageId)[0];
+  //     return replyData;     
+  // }
+
+  // useEffect(() => {
+  //   // component.scrollTo({
+  //     //   left: 0,
+  //     //   top: document?.body?.scrollHeight,
+  //     //   behavior: "smooth",
+  //     // });
+  //     const component = document.getElementById("chat-messages");
+  //     component.scrollTo(0, document.documentElement.scrollHeight);
+  // }, [messages]);
+
+  const userId = getCookie("userId");
+
+
+  const handleOnDrop = (e) => {
+    try {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const confirmSendMedia = window.confirm(`Are you sure you want to send ${e.dataTransfer.files.length} files?`);
+  
+      let filesObj = {};
+        for (const file of e.dataTransfer.files) {
+          const { valid, error } = mediaUploadValidator(file);
+          if (!valid) {
+            setToastStatus({ open: true, message: error, variant: 'error' });
+            return;
+          }
+          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
+          }
+        }
+  
+      if(confirmSendMedia) uploadAndSendMedia(filesObj);
+    }
+    catch(error) {
+      console.log('error while dropping files in the chat box -- ', error);
+      setToastStatus({ open: true, message: error.messages || 'Error while dropping files, please try again!', variant: 'error' });
+    }
+  }
+
+  const handleOnDragover = (e) => {
+    e.preventDefault();
+  }
+
+  const uploadAndSendMedia = async (filesObj) => {
+    try {
+      const presignedUrlPayload = {
+        conversationId,
+        attachments: Object.values(filesObj)
+      }
+      const response = await client?.message?.postMessagesPresignedurls(presignedUrlPayload);
+      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: 'PKQ1',
+              conversationId,
+              body: fileExtensionType === 'mp4' ? 'video' : 
+              validDocumentType[fileExtensionType] ? 'document' : 'image',
+              parentMessageId: null,
+              metaData: null,
+              events: null,
+              attachments: attachmentsForImg,
+              notificationBody: `Sent you ${fileExtensionType === 'mp4' ? 'a video' : 
+              validDocumentType[fileExtensionType] ? 'a document' : 'an image'} `,
+              notificationTitle: userDetails?.userName,
+            }
+            await client?.message?.postMessages(messagePayload);
+          }).catch((err) => {
+            console.log(err, 'err');
+          })
+        });
+      }
+    }
+    catch(err) {
+      console.log('error uploading files via drag and drop -- ', err )
+    }
+  }
+
+  const handleOnChatScroll = (e) => {
+    const showBottomScroller = (e.target.scrollTop + e.target.clientHeight) <= e.target.scrollHeight - 30;
+    setShowBottomScroller(showBottomScroller);
+    const isAtTop = e.target.scrollTop === 0;
+    const isAtBottom = e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight - 5;
+    if(isAtTop || isAtBottom) setShowBadge(false);
+    else setShowBadge(true);
+  }
+
+  const scrollToBottom = () => {
+    setTimeout(() => chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight, 100);
+  }
+
+  useEffect(() => {
+    if(!allMsg.length) return;
+    const component = document.getElementById("chat-messages");
+
+    if(allMsg[allMsg.length - 1]?.body) { // only for initial load or if we send/receive a new message
+      scrollToBottom();
+    }
+    // component.scrollTo({
+    //   top: document.body.scrollHeight,
+    //   behavior: "auto"
+    // });
+    component.addEventListener("scroll", handleOnChatScroll);
+    component.addEventListener("drop", handleOnDrop);  // to get the files after they are dropped in the chat-box
+    component.addEventListener("dragover", handleOnDragover);  // to enable drag and drop media files
+
+    const dateBadges = document.getElementsByClassName("date-badge");
+
+    const observer = new IntersectionObserver(([entry]) => {
+      const { top } = entry.boundingClientRect;
+
+      const isElementEnteringFromTop = entry.isIntersecting && top <= 110;
+      const isElementExitingFromTop = !entry.isIntersecting && top <= 110;
+
+
+      if(isElementEnteringFromTop) {
+        console.log('entry from top -- ', entry.target.innerHTML);
+        const idx = dateBadgesArr.findIndex((ele) => ele === entry.target.innerHTML);
+        if(idx <= dateBadgesArr.length - 1) {
+          setStickyDateBadge(dateBadgesArr[idx + 1]);
+        }
+      } else if(isElementExitingFromTop){
+        console.log('exit from top --- ', entry.target.innerHTML);
+        const idx = dateBadgesArr.findIndex((ele) => ele === entry.target.innerHTML);
+        setStickyDateBadge(dateBadgesArr[idx]);
+      }
+    }, { threshold: 1, rootMargin: '-100px 0px 0px 0px' })
+
+    if(dateBadges.length) {
+      Array.from(dateBadges).forEach(badge => observer.observe(badge));
+    }
+
+    return () => {
+      if(dateBadges.length) {
+        Array.from(dateBadges).forEach(badge => observer.unobserve(badge));
+      }
+      component.removeEventListener("scroll", handleOnChatScroll);
+      component.removeEventListener("drop", handleOnDrop);
+      component.removeEventListener("dragover", handleOnDragover);
+    }
+  }, [allMsg]);
+
+
+  const getDateBadge = (timeStamp) => {
+    if (dateWithMessages.has(getMessageDateSorted(timeStamp)) ) return;
+    dateWithMessages.add(getMessageDateSorted(timeStamp));
+    dateBadgesArr.unshift(getMessageDateSorted(timeStamp));
+    return <ChatDate className="date-badge">{  getMessageDateSorted(timeStamp)}</ChatDate>
+  }
+  const handleHoverOut = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+    <ChatMessagesSection>
+      {/* <ChatDateWrapper> */}
+      {showBadge && <StickyChatDate>{stickyDateBadge}</StickyChatDate>}
+      {showBottomScroller && <ScrollToBottom onClick={scrollToBottom}><img src={BOTTOM_ARROW}  alt="bottom_arrow_icon" /></ScrollToBottom>}
+      {/* </ChatDateWrapper> */}
+      {/* <ChatEncryptionMsg>
+        <ChatEncryptionIcon id="lock" className="chat__encryption-icon" />
+        Messages are end-to-end encrypted. No one outside of this chat, not even
+        WhatsApp, can read or listen to them. Click to learn more.
+      </ChatEncryptionMsg> */}
+      <ChatMessagesMain>
+        {allMsg &&
+          allMsg.map((chat, index) => {
+            if (chat.body) {
+              getMessageDateSorted(chat.sentAt);
+            }
+            return (
+              <>
+              {
+                (chat?.body || chat?.customType === 'audio') && 
+                <>
+                  {getDateBadge(chat.sentAt)}
+                    {chat.attachments && chat?.customType !== 'audio' && chat?.customType !== 'document'  ?
+                      chat.attachments.map((imgData, index) => (
+                        <div
+                          key={index}
+                          onClick={() => handleImgVidClick(imgData?.mediaId)}
+                          className={`d-flex flex-column pointer ${(chat.senderInfo?.userId || chat?.senderId) ===
+                            chatProfileData?.userId
+                            ? "user_chat mr-auto"
+                            : "user_self_chat ml-auto"}`}>
+                          {
+                            imgData?.extension === 'mp4'
+                              ? 
+                              <ChatVideo controls style={{ objectFit: 'contain' }}>
+                                  <source src={imgData.mediaUrl} type="video/mp4" />
+                              </ChatVideo>
+                              : 
+                              <ChatImageSent>
+                                <ImageComponent className="chat_image" src={imgData.mediaUrl} alt="chat_image" />
+                                <ImageOverlay /> 
+                              </ChatImageSent>
+                          }
+                            <ChatBubble
+                          chat={chat}
+                          findUserId={findUserId}
+                          state={state}
+                          setState={setState}
+                          chatProfileData={chatProfileData}
+                          deliverMessage={deliverMessage}
+                          readMessage={readMessage}
+                          theme={theme}
+                          setslideShow={setslideShow}
+                          setMessageInfo={setMessageInfo}
+                          messageInfo={messageInfo}
+                          setMessageChat={setMessageChat}
+                          setSearchShow={setSearchShow}
+                          isMedia={chat?.attachments}
+                          setIsReply={setIsReply}
+                          isReply={isReply}
+                          setReply={setReply}
+                          reply={reply}
+                          setDeleteMessage={setDeleteMessage}
+                          deleteMessage={deleteMessage}
+                          // getReplyMessageData={getReplyMessageData(chat)}
+                          isOpen={isOpen}
+                          setIsOpen={setIsOpen}
+                          
+                        />
+                        </div>
+                      ))
+                      :
+                      <>   
+                      <div
+                        key={index}
+                        onMouseLeave={handleHoverOut}
+                        className={`${(chat.senderInfo?.userId || chat?.senderId) ===
+                          chatProfileData?.userId
+                          ? "user_chat"
+                          : "user_self_chat"
+                          }`}                    
+                      >
+                        <ChatBubble
+                          chat={chat}
+                          findUserId={findUserId}
+                          state={state}
+                          setState={setState}
+                          chatProfileData={chatProfileData}
+                          deliverMessage={deliverMessage}
+                          readMessage={readMessage}
+                          theme={theme}
+                          setslideShow={setslideShow}
+                          setMessageInfo={setMessageInfo}
+                          messageInfo={messageInfo}
+                          setMessageChat={setMessageChat}
+                          setSearchShow={setSearchShow}
+                          isReply={isReply}
+                          setIsReply={setIsReply}
+                          setReply={setReply}
+                          reply={reply}
+                          setDeleteMessage={setDeleteMessage}
+                          deleteMessage={deleteMessage}
+                          // getReplyMessageData={getReplyMessageData(chat)}
+                          isOpen={isOpen}
+                          setIsOpen={setIsOpen}
+                        />
+                      </div>
+                      </>
+                    }
+              </>
+              }
+              </>
+            );
+          })}
+      </ChatMessagesMain>
+    </ChatMessagesSection>
+      {
+        <Toaster message={toastStatus.message} variant={toastStatus.variant} open={toastStatus.open} onClose={() => setToastStatus({open: false})} theme={theme} />
+      }
+    </>
+  );
+};
+
+export default MessagesBox;

package/src/components/CustomModal.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import OutsideAlerter from './OutsideAlerter/OutsideAlerter';
+const CustomModal = (props) => {
+  const { 
+    modelWidth,
+    backDropClick = false,   // close the model if clicked outside the model
+    onClose,
+   } = props;
+  return (
+    <>
+    {props.open ? 
+      <div className='modal'>
+        <div className='model-content'>
+          {backDropClick 
+          ? <OutsideAlerter onClose={onClose}>{props.children}</OutsideAlerter>
+          : <>{props.children}</>}
+        </div>
+      </div>
+    : null}
+    <style jsx>{`
+      .modal {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed; 
+        left: 0;
+        top: 0;
+        width: 100%; 
+        height: 100vh;
+        overflow: auto;
+        background-color:  var(--modal-backdrop);
+      }
+      .model-content {
+        width: ${modelWidth || '70vw'};
+        max-width: 70vw;
+        max-height: 90vh;
+        border-radius: 12px;
+        overflow: hidden;
+        // box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
+        animation: popup 0.5s;
+      }
+      @keyframes popup {
+        0%{
+          transform: scale(0.8);
+        }
+        100%{
+          transform: scale(1);
+        }
+      }
+      @media(max-width: 576px) {
+        .model-content {
+          width: 90%;
+        }
+      }
+    `}</style>
+    </>
+  )
+}
+
+export default CustomModal;

package/src/components/Icon.js

@@ -0,0 +1,10 @@
+import Icons from "../assets/icons";
+
+const allIcons = Icons;
+
+const Icon = ({ id, ...props }) => {
+  const selectedIcon = allIcons[id];
+  return selectedIcon ? selectedIcon(props) : null;
+};
+
+export default Icon;

package/src/components/ImageComponent.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { APP_NAME } from "../utils/global";
+
+const ImageComponent = (props) => {
+  const { src, className, height, width, alt, loading, ...other } = props;
+
+  return (
+    <img
+      height={height || ""}
+      width={width || ""}
+      alt={alt || APP_NAME}
+      src={props.src}
+      loading={loading || "lazy"}
+      className={className}
+      {...other}
+      // onError={(e) => {
+      //   e.target.onerror = null;
+      //   e.target.src = "";
+      // }}
+    />
+  );
+};
+
+export default ImageComponent;