isometrik-chat 0.1.0

package/src/components/ChatBox/AudioBubble.js

@@ -0,0 +1,162 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import WaveSurfer from 'wavesurfer.js';
+import ImageComponent from '../ImageComponent';
+import { AUDIO_PAUSE, AUDIO_PLAY, CHAT_AUDIO_PAUSE, CHAT_AUDIO_PLAY } from '../../utils/global';
+import { mobile } from '../../utils/media';
+import { getCookie } from '../../lib/session';
+import { convertSecondsToMinutes } from '../../lib/helpers';
+
+const AudioBubbleWrapper = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 0 1rem 0 0;
+    margin: 0.25rem 0 0.25rem auto;
+    border-radius: 7.5px;
+    --wt-bg-opacity: 1;
+    background-color: ${props => props.selfChat ? 'var(--sender_chatbg)' : 'var(--white)'};
+    width: 336px;
+
+    .wavesurfer-timeline-progress{
+        width: 10px !important;
+        height: 10px !important;
+        border-radius: 50% !important;
+        background-color: red !important;
+    }
+
+    .user_profile_picture{
+        width: 55px;
+        height: 55px;
+        object-fit: cover;
+        border-radius: 50%;
+    }
+
+    ${mobile(css`
+        width: 280px;
+    `)}
+
+    .chat_audio_play_pause{
+        width: 20px;
+        height: 20px;
+        filter: ${props => props.theme === true ? 'invert(1)' : 'unset'};
+    }
+
+    .wave_container{
+        width: 100%;
+        wave{
+            z-index: 0;
+            ::-webkit-scrollbar {
+            display: none;
+            }
+            -ms-overflow-style: none;  /* IE and Edge */
+            scrollbar-width: none;  /* Firefox */
+        }
+    }
+`;
+
+const AudioTime = styled.p`
+    font-size: 14px;
+    color: var(--chat_timing);
+    position: absolute;
+    bottom: 0;
+    left: 80px;
+    margin-bottom: -8px;
+`;
+
+const AudioBubble = (props) => {
+    const { chat, theme } = props;
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [audioDuration, setAudioDuration] = useState(0);
+    const [currentAudioId, setCurrentAudioId] = useState(null);
+    const waveformRef = useRef(null);
+    const wavesurfer = useRef(null);
+    const userId = getCookie('userId');
+    let audioUrl = chat?.attachments?.[0].mediaUrl || chat?.attachments?.[0].thumbnailUrl;
+
+
+    useEffect(() => {
+        try {
+            wavesurfer.current = WaveSurfer.create({
+                container: waveformRef.current,
+                waveColor: '#6f8171',
+                progressColor: '#6f8171',
+                height: 40,
+                barHeight: 1.5,
+                barWidth: 3,
+                barGap: 2,
+            });
+            wavesurfer.current.load(audioUrl);
+            
+            wavesurfer.current.on('ready', () => {
+                const totalDuration = wavesurfer.current.getDuration();
+                const getSortedTime = convertSecondsToMinutes(Math.round(totalDuration));
+                setAudioDuration(getSortedTime);
+            });
+            wavesurfer.current.on('audioprocess', () => {
+                const totalDuration = wavesurfer.current.getCurrentTime();
+                const getSortedTime = convertSecondsToMinutes(Math.round(totalDuration));
+                setAudioDuration(getSortedTime);
+            });
+
+            wavesurfer.current.on('finish', () => {
+                setIsPlaying(false);
+                wavesurfer.current.seekTo(0);
+            });
+        } catch (error) {
+            console.error(error, 'error')
+        }
+        
+    
+    return () => {
+        wavesurfer.current.destroy();
+        setIsPlaying(false);
+    };
+    }, []);
+
+    // const audioHandler = () => {
+    //     if (!wavesurfer.current.isPlaying()) {
+    //         setIsPlaying(true);
+    //         wavesurfer.current.play();
+    //     }else{
+    //         setIsPlaying(false);
+    //         wavesurfer.current.pause();
+    //     }
+    // };
+
+    const pauseAudioHandler = () => {
+        setIsPlaying(false);
+        wavesurfer.current.pause();
+        
+    }
+
+    const playAudioHandler = (currentId) => { 
+        setIsPlaying(true);
+        wavesurfer.current.play();
+    }
+
+    const getPlayPauseIcon = () => {
+        if (isPlaying) {
+            return (
+                <ImageComponent onClick={pauseAudioHandler} className="chat_audio_play_pause pointer" src={AUDIO_PLAY} alt="chat_audio_pause" />
+        )
+        }else{
+            return (
+                <ImageComponent onClick={playAudioHandler} className="chat_audio_play_pause pointer" src={AUDIO_PAUSE} alt="chat_audio_play" />
+            )
+        }
+    }
+
+    return (
+        <AudioBubbleWrapper theme={theme} key={chat?.messageId} selfChat={userId === chat?.senderInfo?.userId || userId === chat?.senderId} >
+        <ImageComponent className={'user_profile_picture'} src={chat?.senderProfileImageUrl} alt={'user_profile_picture'} />
+        <AudioTime>{audioDuration}</AudioTime>
+        <div>{getPlayPauseIcon()}</div>
+        <div className='wave_container' ref={waveformRef}></div>
+        
+        </AudioBubbleWrapper>
+    );
+}
+
+export default AudioBubble;

package/src/components/ChatBox/ChatBubble.js

@@ -0,0 +1,232 @@
+import React, { useEffect, useState } from "react";
+import styled,{css}from "styled-components";
+import { decodeChatBody, getTimeWithMeridian } from "../../lib/helpers";
+import { userChatMessageOption, userMenuOptions } from "../../lib/mockData";
+import ChatBubbleReply from "../../view/component/Chatbox.js/ChatBubbleReply";
+import Icon from "../Icon";
+import MessageInfoDropdown from "../MessageInfoDropdown";
+import AudioBubble from "./AudioBubble";
+import { mobile } from "../../utils/media";
+import DocumentBubble from "./DocumentBubble";
+
+const ChatMessageReceiver = styled.div`
+  padding: 3px 5px;
+  font-size: 14px;
+  width:100%;
+  word-break:break-all;
+  align-items:end;
+  border-radius: 5px;
+  margin-bottom: 2px;
+  color: var(--black);
+  margin-left: auto;
+  position:relative;
+  display: flex;
+  ${(props) =>
+         (props.messageLength || props?.messageDataLength) &&
+         css`
+           flex-direction:column;
+           position:relative;
+          `}
+          ${(props) =>
+            props.isMedia &&
+            css`
+             position:absolute !important;
+             display:flex !important;
+             bottom: 15px !important;
+             right:10px !important;
+             justify-content:end !important;
+      
+             `}
+
+  .chat__msg-status-icon {
+    color: #b3b3b3;
+    margin-left: 3px;
+  }
+
+  .chat__msg-status-icon--blue {
+    color: #0da9e5;
+    margin-left: 4px;
+  }
+
+  .message{
+    ${(props) =>
+      props.messageDataLength &&
+      css`
+        margin-bottom:5px;
+       `}
+  }
+`;
+
+const ChatTime = styled.div`
+  font-size: 0.6875rem;
+  display:flex;
+  color: ${props => props.isAttachments ? 'var(--primary-white)' : 'var(--chat_timing)'};
+  margin-bottom:-7px;
+  margin-left:${props => props.isChatDocumentType ? 'auto' : '10px'};
+  ${(props) =>
+    (props?.messageLength) &&
+    css`
+    margin-bottom:5px;
+     `}
+     ${(props) =>
+      (props?.messageDataLength) &&
+      css`
+      margin-bottom:unset;
+       `}
+      ${mobile(css`
+        white-space: nowrap;
+        margin-bottom: -4px;
+      `)}
+`;
+
+
+const ChatMsgFooter = styled.span`
+  display: flex;
+  align-items: flex-end;
+  ${mobile(css`
+      justify-content: flex-end;
+  `)}
+
+  ${(props) =>
+    props.messageLength &&
+    css`
+      position:absolute;
+      top:100%;
+      bottom:0px;
+      right:0px;
+      left:unset;
+     `}
+`;
+const MessageArrow = styled.div`
+${(props) =>
+  props.messageLength &&
+  css`
+    top:0px !important;
+    // right:100px !imporant;
+   `}
+   ${(props) =>
+    props?.messageDataLength &&
+    css`
+      top:-30px !important;
+      right:-6px !imporant;
+     `}
+
+     ${(props) =>
+      props?.isMedia &&
+      css`
+        top:0px !important;
+        right:0px !important;
+       `}
+  
+`;
+
+const ChatMessageBubbleBody = styled.div`
+      display: flex;
+      justify-content: space-between;
+      position: relative;
+      flex-direction: ${props => props.isChatDocumentType ? 'column' : 'row'};
+      ${mobile(css`
+          flex-direction: ${props => props.isAttachments ? 'column' : ''};
+      `)}
+`;
+
+function ChatBubble(props) {
+  const { chat, chatProfileData, deliverMessage, readMessage,theme,setslideShow,setMessageInfo,messageInfo,setMessageChat,setSearchShow, isMedia,setIsReply,isReply,setReply,reply,setDeleteMessage ,deleteMessage,getReplyMessageData, isOpen , setIsOpen , isNotShowDropDown} =
+    props;
+    const [messageLength , setmessageLength] = useState(false);
+    // const [reciver ,isReciver] = useState(false);
+    useEffect(()=>{
+      // if(chat.senderInfo?.userId == chatProfileData){
+      //   isReciver(true);
+      // }
+      if(chat?.body?.length >74){
+       setmessageLength (true);
+      }
+     },[chat,chat?.body?.length]);
+
+  return ( 
+  <>
+    <ChatMessageReceiver  messageDataLength={chat?.body?.length ===74} messageLength={chat?.body?.length >74} isMedia={isMedia}>
+    <div style={{display:"block"}}>
+    {/* {
+    getReplyMessageData?.body?.length &&  <ChatBubbleReply  reply={getReplyMessageData} /> 
+    }  */}
+      
+  <ChatMessageBubbleBody isChatDocumentType={chat?.customType === 'document'}  isAttachments={chat?.attachments?.length > 0}>
+    <>
+    {
+      chat?.customType === "document" && <DocumentBubble chat={chat} />  
+    }  
+    </>
+     {isMedia ? "" :
+      chat?.customType === 'audio' ?  <AudioBubble theme={theme} chat={chat} /> :
+      <>
+      {
+        chat?.customType !== 'document' &&
+        <div className="message" messageDataLength={chat?.body?.length ===74}>{decodeChatBody(chat?.body) }</div> 
+      }
+      </>
+      }  
+          
+      <ChatMsgFooter messageLength={chat?.body?.length >74} >
+        <ChatTime isChatDocumentType={chat?.customType === 'document'} isAttachments={chat?.attachments?.length > 0 && chat?.customType !== 'audio' && chat?.customType !== 'document'}  messageLength={chat?.body?.length >= 74} messageDataLength={chat?.body?.length ===74} >
+          { getTimeWithMeridian(new Date(chat?.sentAt))}
+          <div>
+          {(chat.senderInfo?.userId || chat?.senderId) !== chatProfileData?.userId && (
+          <Icon style={{marginLeft:"2px"}} id={'singleTick'}
+          />
+        )}
+          </div>
+        </ChatTime>
+      </ChatMsgFooter>
+      </ChatMessageBubbleBody>
+      </div>
+    </ChatMessageReceiver>
+    {
+      !isNotShowDropDown && 
+    <MessageArrow  className="messageChat" messageLength={chat?.body?.length >74}  messageDataLength={chat?.body?.length ===74} isMedia={isMedia}>
+          {(chat?.senderInfo?.userId  || chat?.senderId) !== chatProfileData?.userId ? (
+            <>
+            <MessageInfoDropdown theme={theme} messageInfo={messageInfo} setMessageInfo={setMessageInfo}  chat={chat} setMessageChat={setMessageChat} setslideShow={setslideShow} setSearchShow={setSearchShow} menuData={userChatMessageOption} messageLength={messageLength} setIsReply={setIsReply} isReply={isReply} setReply={setReply} reply={reply} setDeleteMessage={setDeleteMessage} deleteMessage={deleteMessage} 
+            // getReplyMessageData={getReplyMessageData}
+            isOpen={isOpen} setIsOpen={setIsOpen}
+            />
+            </>
+          ) : 
+          (
+            <></>
+            // <MessageInfoDropdown theme={theme} messageInfo={messageInfo} setMessageInfo={setMessageInfo}  chat={chat} setMessageChat={setMessageChat} setslideShow={setslideShow} setSearchShow={setSearchShow} menuData={userMenuOptions} userChat={userMenuOptions} messageLength={messageLength} isMedia={isMedia} setIsReply={setIsReply} isReply={isReply} setReply={setReply} reply={reply} deleteMessage={deleteMessage} setDeleteMessage={setDeleteMessage} 
+            // // getReplyMessageData={getReplyMessageData} 
+            // isOpen={isOpen} setIsOpen={setIsOpen} />
+
+          )} 
+    </MessageArrow>
+    }
+    <style jsx>{`
+    .user_self_chat .messageChat{
+      display:none;
+    }
+    .user_self_chat:hover .messageChat {
+      display:inline-block !important;
+      right:0px;
+      position:absolute;
+      top:-10%;
+      right:0px;
+    } 
+
+   .user_chat .messageChat{
+      display:none;
+    }
+    .user_chat:hover .messageChat {
+      display:inline-block !important;
+      right:0px;
+      position:absolute;
+      top:-10%;
+      right:0px;
+    } 
+    `}</style>
+    </>
+  );
+}
+
+export default ChatBubble;

package/src/components/ChatBox/DocumentBubble.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { mobile } from '../../utils/media';
+import ImageComponent from '../ImageComponent';
+import { DOCUMENT, DOWNLOAD_CAROUSEL } from '../../utils/global';
+import { formatBytes } from '../../lib/helpers';
+import { getCookie } from '../../lib/session';
+import { saveAs } from 'file-saver';
+
+const DocumentBubbleWrapper = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    margin: 0.25rem 0 1rem auto;
+    border-radius: 7.5px;
+    background-color: ${props => props.selfChat ? 'var(--reply-background-color)' : 'var( --chat_hover)'};
+    width: 336px;
+    cursor: pointer;
+
+    ${mobile(css`
+        width: 280px;
+    `)}
+
+    .document_icon{
+        width: 26px;
+        height: 30px;
+    }
+`;
+
+const DocumentInfoWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+`;
+
+const DocumentBubbleWrapperInfoContainer = styled.div`
+    position: relative;
+`;
+
+const DocumentBubbleWrapperName = styled.p`
+        margin-bottom: 0;
+
+`;
+
+const DocumentBubbleWrapperSize = styled.p`
+        color: var(--chat_timing);
+        margin-bottom: 0;
+`;
+
+const DownloadIconWrapper = styled.div`
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 1px solid var(--chat_timing);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+`;
+
+const DocumentBubble = (props) => {
+    const { chat } = props;
+    const userId = getCookie('userId');
+
+    const downloadDocumentHandler = () => {
+        saveAs(chat?.attachments?.[0]?.mediaUrl, chat?.attachments?.[0]?.name);
+    }
+
+  return (
+    <DocumentBubbleWrapper selfChat={userId === chat?.senderInfo?.userId || userId === chat?.senderId} 
+    onClick={downloadDocumentHandler} >
+        <DocumentInfoWrapper>
+        <ImageComponent className="document_icon" src={DOCUMENT} alt="document" />
+        <DocumentBubbleWrapperInfoContainer>    
+            <DocumentBubbleWrapperName>{chat?.attachments?.[0]?.name}</DocumentBubbleWrapperName>
+            <DocumentBubbleWrapperSize>{formatBytes(chat?.attachments?.[0]?.size)}</DocumentBubbleWrapperSize>
+        </DocumentBubbleWrapperInfoContainer>
+        </DocumentInfoWrapper>
+        <DownloadIconWrapper>
+         <ImageComponent  src={DOWNLOAD_CAROUSEL} alt="download_document" />
+        </DownloadIconWrapper>
+    </DocumentBubbleWrapper>
+  )
+}
+
+export default DocumentBubble;