isometrik-chat 0.1.0

package/src/pages/WhatsappMainBox/index.js

@@ -0,0 +1,574 @@
+import React, { useEffect, useRef } from "react";
+import Siderbar from "../../view/component/Siderbar";
+import MainChatBox from "../../view/component/MainChatBox";
+import { useState } from "react";
+import client from "../../utils/chatSdk";
+import styled, { css } from "styled-components";
+import { mobile, tabletOnly } from "../../utils/media";
+import { authClear, removeLocalStorage } from "../../lib/session";
+import ImageComponent from "../../components/ImageComponent";
+import {
+  clearConversationSelfMessages,
+  debounce,
+  deleteConversationSelfMessages,
+  // getTimeWithMeridian,
+  getUserConversationDetails,
+  postBlockUser,
+  postUnblockUser,
+} from "../../lib/helpers";
+import ClearChatModal from "../../components/Modal/ClearChatModal";
+import CustomModal from "../../components/CustomModal";
+import DeleteChatModal from "../../components/Modal/DeleteChatModal";
+import BlockUnblockChatModal from "../../components/Modal/BlockUnblockChatModal";
+import Toaster from "../../view/component/Toaster/Toaster";
+import { CONVERSATION_NOT_FOUND } from "../../lib/constant";
+import ProfilePicture from "../../components/ProfilePicture/ProfilePicture";
+import Loader from "../../view/component/Loader/Loader";
+import { ChatState } from "../../ChatContext";
+import Authpage from "../../Authpage";
+
+const WhatsappSection = styled.section`
+  height: 100%;
+  background-color: #dadbd3;
+  display: grid;
+`;
+const WhatsappRightTag = styled.div`
+  background: var(--gray_color);
+`;
+
+const SignOut = styled.div`
+  display: none;
+  background-color: var(--modal_color);
+  position: absolute;
+  bottom: 0px;
+  padding: 20px 75px 20px 20px;
+  width: 100%;
+  align-items: center;
+
+  .userImg {
+    height: 65px;
+    width: 65px;
+    border-radius: 60px;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  ${tabletOnly(css`
+    display: none;
+  `)}
+
+  ${mobile(css`
+    display: flex;
+  `)}
+`;
+
+const ButtonAction = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+  color: white;
+
+  .cancleBtn {
+    background: var(--white);
+    color: var(--button-primary-background);
+    border: 1px solid var(--border_color);
+  }
+
+  .logoutBtn {
+    background-color: var(--button-primary-background);
+    color: var(--white);
+  }
+`;
+
+const ButtonMobileAction = styled.div`
+display:flex;
+`;
+
+
+const UserDetails = styled.div`
+color:var(--black);
+width:72%;
+
+.signOutBtn{
+  padding:7px 15px;
+  border:none;
+  border-radius:20px;
+  background:var(--button-primary-background);
+  color:white;
+  margin-left:0px;
+}
+
+.cancelBtn{
+  padding:7px 15px;
+  border:none;
+  border-radius:20px;
+  background:var(--button-primary-background);
+  color:white;
+  margin-left:10px;
+}
+`;
+
+const Button = styled.button`
+  margin-left: 15px;
+  border-radius: 20px;
+  border: none;
+  padding: 5px 20px 5px 20px;
+`;
+
+const DesktopLogOut = styled.div`
+width:100%;
+height:100%;
+top:0;
+background-color:var(--modal-backDrop);
+position:absolute;
+border:none;
+.logoutModal{
+  background-color: var(--modal_color);
+  color:var(--black);
+  position: absolute; 
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+  width:32rem;
+  top:50%;
+  left:50%;
+  z-index:999;
+  transform: translate(-50%,-50%);
+  padding:20px 24px 6px 22px;
+  line-height: 1.7;
+  max-height:14rem
+  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
+
+  ${mobile(css`
+    display: none;
+  `)}
+ }`;
+
+function WhatsappMainBox(props) {
+  const { showLoader, setShowLoader, theme, userDetails, setUserDetails, findUserId, state, setState, userloggedIn, loading } = ChatState();
+  const {
+    showSideChatHeader,
+  } = props;
+  const [sidebarChatItem, setSidebarChatItem] = useState();
+  const [disabledKey, setDisabledKey] = useState(false);
+  const preventConversationRef = useRef(false);
+  const [isSidebarShow, setIsSidebarShow] = useState(false);
+  const [isLogOut, setIsLogOut] = useState(false);
+  const [showConversationPagingLoader, setShowConversationPagingLoader] = useState(false);
+  const preventMessageRef = useRef(false);
+  const [clearChatModal, setClearChatModal] = useState(false);
+  const [deleteChatModal, setDeleteChatModal] = useState(false);
+  const [userBlockModal, setUserBlockModal] = useState(false);
+  const [userConversationDetail, setUserConversationDetail] = useState({});
+  const [slideShow, setslideShow] = useState(false);
+  const [searchShow, setSearchShow] = useState(false);
+  const [messageInfo, setMessageInfo] = useState(false);
+  const [toastStatus, setToastStatus] = useState({open: false, message: '', variant: ''});
+  const [searchedMessageArray, setSearchedMessageArray] = useState([]);
+  const [searchMessageLoaderStatus, setSearchMessageLoaderStatus] = useState(false);
+  const [conversationNotFound, setConversationNotFound] = useState(false);
+  const [mediaDocs , setMediaDocs] = useState();
+  const [enteredSearchQuery, setEnteredSearchQuery] = useState('');
+  const [showProfilePicture, setShowProfilePicture] = useState({
+    showProfile: false,
+    userName: "",
+    userImageSrc: "",
+    theme: theme,
+  });
+
+  const sidebarData = (sidebarChatItem) => {
+    setSidebarChatItem(sidebarChatItem);
+  };
+  const body = {
+    limit: 20,
+    skip: 0,
+    isGroup: false,
+  };
+  const payload = {
+    limit: 20,
+    skip: 0,
+    isGroup: false,
+    conversationId: sidebarChatItem?.conversationId,
+  };
+  const getHomePageConversationData = async (body, pagingStatus) => {
+    try {
+      if (pagingStatus) {
+        setShowConversationPagingLoader(true);
+      } else {
+        setShowLoader(true);
+      }
+      preventConversationRef.current = true;
+      const res = await client?.Conversation?.getConversations(body);
+      setState((prev) => {
+        return {
+          ...prev,
+            conversations: [...prev.conversations, ...res?.conversations]
+        };
+      });
+      setShowLoader(false);
+      setShowConversationPagingLoader(false);
+    } catch (error) {
+      setState((prev) => {
+        return {
+          ...prev,
+            conversations: [...prev.conversations]
+        };
+      });
+      setConversationNotFound(error?.message === CONVERSATION_NOT_FOUND);
+      setShowLoader(false);
+      setShowConversationPagingLoader(false);
+      console.log(error?.msg , error?.message , "err");
+    } finally {
+      setShowLoader(false);
+      setShowConversationPagingLoader(false);
+      preventConversationRef.current = false;
+    }
+  };
+
+  const getSearchMessages = async (value) => {
+    setEnteredSearchQuery(value);
+    const payload = {
+      conversationId: sidebarChatItem?.conversationId,
+      searchTag: btoa(value),
+    }
+    try {
+      if (value?.length) {
+        setSearchMessageLoaderStatus(true);
+        const res = await client?.message?.getMessages(payload);
+        setSearchedMessageArray([...res?.messages]);
+        setSearchMessageLoaderStatus(false);
+      }else{
+        setSearchedMessageArray([]);
+      }
+    } catch (error) {
+      console.error('error', error);
+      setSearchedMessageArray([]);
+      setSearchMessageLoaderStatus(false);
+    }
+  }
+
+  const debounceSearchMessages = debounce(getSearchMessages, 500);
+
+
+  const getMessageData = async (payload) => {
+    try {
+      if (preventMessageRef.current) return;
+      preventMessageRef.current = true;
+      const res = await client?.message?.getMessages(payload);
+      const filteredResponseData = res.messages.filter(data => data?.body?.length > 0);
+      setState((prev) => {
+        return {
+          ...prev,
+          messages: {
+            ...prev.messages,
+            [sidebarChatItem?.conversationId]: [
+              ...prev.messages[sidebarChatItem?.conversationId],
+              ...filteredResponseData,
+            ],
+          },
+        };
+      });
+    } catch (error) {
+      console.log(error, "err");
+      setToastStatus({ open: true, variant: "error", message: error.messages });
+    } finally {
+      preventMessageRef.current = false;
+    }
+  };
+
+  useEffect(() => {
+    // Users Chat Conversations API
+    getHomePageConversationData(body);
+  }, []);
+
+  const getPaginationHomePageData = () => {
+    if (
+      preventConversationRef.current ||
+      state?.conversations?.length < body.limit ||
+      state?.conversations?.length % body.limit !== 0
+    )
+      return;
+    body.skip = (state?.conversations?.length / body.limit) * body.limit;
+    !conversationNotFound && getHomePageConversationData(body, true);
+  };
+
+  const logOutClick = () => {
+    setIsLogOut(false);
+    setTimeout(() => {
+      setShowLoader(true);
+      authClear();
+    }, 100);
+    setShowLoader(false);
+  };
+
+  const handleClosee = () => {
+    setslideShow(false);
+    setSearchShow(false);
+  };
+  const getPaginationMessagesData = () => {
+    // API called every time message hits top, need to resolve state not updating issue
+    if (
+      preventMessageRef.current ||
+      Object.keys(state?.messages).length === 0 ||
+      state?.messages[sidebarChatItem?.conversationId]?.length <
+      payload.limit ||
+      state?.messages[sidebarChatItem?.conversationId]?.length %
+      payload.limit !==
+      0
+    )
+      return;
+    payload.skip =
+      (state?.messages[sidebarChatItem?.conversationId]?.length /
+        payload.limit) *
+      payload.limit;
+    getMessageData(payload);
+  };
+  const clearChatMessages = async () => {
+    try {
+      setClearChatModal(false);
+      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]
+          }
+        }
+      })
+    } catch (error) {
+      setClearChatModal(false);
+      setToastStatus({ open: true, variant: "error", message: error.messages });
+    }
+    
+
+  }
+  const handleBlockUser = async () => {
+    try {
+      setUserBlockModal(false);
+      const res = await postBlockUser(sidebarChatItem?.opponentDetails?.userId);
+      const response = await getUserConversationDetails(sidebarChatItem?.conversationId);
+      setUserConversationDetail(response);
+      setToastStatus({ open: true, variant: "success", message: res.msg });
+    } catch (error) {
+      setUserBlockModal(false);
+      setToastStatus({ open: true, variant: "error", message: error.messages });
+      console.error('error', error)
+    }
+  }
+
+  const handleUnblockUser = async () => {
+    try {
+      setUserBlockModal(false);
+      const res = await postUnblockUser(sidebarChatItem?.opponentDetails?.userId);
+      setToastStatus({ open: true, variant: "success", message: res.msg });
+      const response = await getUserConversationDetails(sidebarChatItem?.conversationId);
+      setUserConversationDetail(response);
+    } catch (error) {
+      setUserBlockModal(false);
+      setToastStatus({ open: true, variant: "error", message: error.messages });
+      console.error('error', error);
+    }
+  }
+
+  const deleteChatMessages = async () => {
+    try {
+      setDeleteChatModal(false);
+      const res = await deleteConversationSelfMessages(sidebarChatItem?.conversationId);
+      setToastStatus({ open: true, variant: "success", message: res.msg });
+      handleClosee();
+    } catch (error) {
+      console.error('error', error);
+      setToastStatus({ open: true, variant: "error", message: error.messages });
+      setDeleteChatModal(false);
+      handleClosee();
+    }
+  };
+  return (
+    <>
+      <WhatsappSection className="overflow-hidden">
+        {
+          userloggedIn && !loading &&
+        <div className="d-flex" onClick={() => setDisabledKey(!disabledKey)}>
+          <Siderbar
+            state={state}
+            setState={setState}
+            sideData={state?.conversations}
+            sidebarData={sidebarData}
+            disabledKey={disabledKey}
+            userDetails={userDetails}
+            getPaginationHomePageData={getPaginationHomePageData}
+            preventConversationRef={preventConversationRef}
+            setIsSidebarShow={setIsSidebarShow}
+            isSidebarShow={isSidebarShow}
+            isLogOut={isLogOut}
+            setIsLogOut={setIsLogOut}
+            findUserId={findUserId}
+            sidebarChatItem={sidebarChatItem}
+            getHomePageConversationData={getHomePageConversationData}
+            setUserDetails={setUserDetails}
+            setShowLoader={setShowLoader}
+            setShowProfilePicture={setShowProfilePicture}
+            showConversationPagingLoader={showConversationPagingLoader}
+            setToastStatus={setToastStatus}
+            setUserConversationDetail={setUserConversationDetail}
+            profileClose={handleClosee}
+            setMediaDocs={setMediaDocs}
+            showSideChatHeader={showSideChatHeader}
+          />
+          <WhatsappRightTag>
+            <MainChatBox
+              theme={theme}
+              setClearChatModal={setClearChatModal}
+              setDeleteChatModal={setDeleteChatModal}
+              setUserBlockModal={setUserBlockModal}
+              state={state}
+              setState={setState}
+              sidebarChatItem={sidebarChatItem}
+              setIsSidebarShow={setIsSidebarShow}
+              isSidebarShow={isSidebarShow}
+              getPaginationMessagesData={getPaginationMessagesData}
+              preventMessageRef={preventMessageRef}
+              setShowProfilePicture={setShowProfilePicture}
+              findUserId={findUserId}
+              sidebarData={sidebarData}
+              setToastStatus={setToastStatus}
+              setslideShow={setslideShow}
+              slideShow={slideShow}
+              setSearchShow={setSearchShow}
+              searchShow={searchShow}
+              setUserConversationDetail={setUserConversationDetail}
+              userConversationDetail={userConversationDetail}
+              setMessageInfo={setMessageInfo}
+              messageInfo={messageInfo}
+              debounceSearchMessages={debounceSearchMessages}
+              searchedMessageArray={searchedMessageArray}
+              searchMessageLoaderStatus={searchMessageLoaderStatus}
+              handleClosee={handleClosee}
+              setMediaDocs={setMediaDocs}
+              mediaDocs={mediaDocs}
+              userDetails={userDetails}
+              enteredSearchQuery={enteredSearchQuery}
+            />
+          </WhatsappRightTag>
+        </div>
+        }
+        {isLogOut ? (
+          <DesktopLogOut>
+            <div className="logoutModal">
+              <h5>Log out? </h5>
+              <p>Are you sure you want to logout</p>
+              <div>
+                <ButtonAction className="logoutActionbtn">
+                  <Button
+                    className="cancleBtn"
+                    onClick={() => setIsLogOut(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button className="logoutBtn" onClick={logOutClick}>
+                    Log out
+                  </Button>
+                </ButtonAction>
+              </div>
+            </div>
+          </DesktopLogOut>
+        ) : (
+          ""
+        )}
+        {isLogOut && (
+          <SignOut className="signOut">
+            <div style={{ width: "28%" }}>
+              <ImageComponent
+                className="userImg"
+                src={props?.userDetails?.userProfileImageUrl}
+              ></ImageComponent>
+            </div>
+            <UserDetails className="actionBtn">
+              <h5>{props?.userDetails?.userName}</h5>
+              <p>{props?.userDetails?.metaData?.description}</p>
+              <ButtonMobileAction>
+                <Button className="signOutBtn" onClick={logOutClick}>
+                  Sign Out
+                </Button>
+                <Button
+                  className="cancelBtn"
+                  onClick={() => setIsLogOut(false)}
+                >
+                  Cancel
+                </Button>
+              </ButtonMobileAction>
+            </UserDetails>
+          </SignOut>
+        )}
+        {
+          clearChatModal &&
+          <CustomModal  open={clearChatModal} backDropClick={true} onClose={() => setClearChatModal(false)} >
+          <ClearChatModal cancelButtonClick={() => setClearChatModal(false)} confirmButtonClick={clearChatMessages} />
+          </CustomModal>
+        }
+
+        {
+          deleteChatModal &&
+          <CustomModal  open={deleteChatModal} backDropClick={true} onClose={() => setDeleteChatModal(false)} >
+            <DeleteChatModal
+              cancelButtonClick={() => setDeleteChatModal(false)}
+              confirmButtonClick={deleteChatMessages}
+            />
+          </CustomModal>
+        }
+
+        {
+          userBlockModal &&
+          <CustomModal open={userBlockModal}  backDropClick={true} onClose={() => setUserBlockModal(false)} >
+          <BlockUnblockChatModal isUserBlocked={userConversationDetail?.messagingDisabled} userName={sidebarChatItem?.opponentDetails?.userName} 
+            cancelButtonClick={() => setUserBlockModal(false)}
+            confirmButtonClick={userConversationDetail?.messagingDisabled ? handleUnblockUser : handleBlockUser}
+            />
+          </CustomModal>
+        }
+        {
+            
+          <Toaster message={toastStatus.message} variant={toastStatus.variant } open={toastStatus.open} onClose={() => setToastStatus({open: false})} />
+            
+        }
+        { showProfilePicture.showProfile && (
+            <ProfilePicture
+              userName={showProfilePicture.userName}
+              userImageSrc={showProfilePicture.userImageSrc}
+              theme={showProfilePicture.theme}
+              closeHandler={() => setShowProfilePicture({ showProfile: false })}
+            />
+          )}
+
+        {showLoader && <Loader />}
+
+        {!userloggedIn && !loading && <Authpage  theme={theme} 
+      />}
+      </WhatsappSection>
+      <style jsx>
+        {`
+          .logoutModal * {
+            margin-top: 20px;
+          }
+
+          @media (max-width: 48rem) {
+            .sidebar_header {
+              width: 100vw;
+            }
+          }
+          @media (max-width: 48rem) {
+            .sidebar .sidebar_header .sliderr {
+              width: 100vw;
+            }
+            .sidebar {
+              display: ${isSidebarShow ? "none" : "block"};
+            }
+          }
+        `}
+      </style>
+    </>
+  );
+}
+
+export default WhatsappMainBox;

package/src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/services/deliveryStatus.js

@@ -0,0 +1,27 @@
+import client from "../utils/chatSdk";
+
+
+export const markMessagesAsRead = async (data) => {
+    try {
+      const res = await client.message.putRead({
+        timestamp: data.getTime,
+        conversationId: data?.conversationId,
+      });
+      return res;
+    } catch (error) {
+      console.log(error, "error");
+    }
+  };
+  
+  export const putIndicateMessageRead = async (messageId, conversationId) => {
+    const payload = {
+      messageId: messageId,
+      conversationId: conversationId
+    }
+    try {
+      const res = await client.message.putIndicateRead(payload);
+      return res;
+    } catch (error) {
+      console.log(error, "error");
+    }
+  };

package/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/src/utils/chatSdk.js

@@ -0,0 +1,14 @@
+import ChatSdk from 'test-iso-chat-sdk';
+import { getCookie } from '../lib/session';
+const userToken = getCookie('userToken');
+const token =
+  'SFMyNTY.g3QAAAACZAAEZGF0YXQAAAADbQAAAAlhY2NvdW50SWRtAAAAGDYwYjFlZjcwZmZjZjc1MDAwMWQwNDQwZG0AAAAIa2V5c2V0SWRtAAAAJDJmN2QyMmQ3LWI3NDMtNDcxNC04MzdlLWFmMGIxMjliZDU0Mm0AAAAJcHJvamVjdElkbQAAACRmYzRiZmMwOC0zMjQzLTQyMGYtODg0ZC0xY2UzN2QzZjQ1M2JkAAZzaWduZWRuBgDQbglBgwE.bWfQpMCFERbltvCTtWe6vFo7nSgqP3x9GxdOPHDshTs';
+const client = new ChatSdk({
+  baseUrl: 'https://apis.isometrik.io',
+  licenseKey: 'lic-IMKw4CVRR6IHZ26+FhU7S+eG2Egi9NIHjMB',
+  appSecret:
+    'SFMyNTY.g3QAAAACZAAEZGF0YXQAAAADbQAAAAlhY2NvdW50SWRtAAAAGDYwYjFlZjcwZmZjZjc1MDAwMWQwNDQwZG0AAAAIa2V5c2V0SWRtAAAAJDJmN2QyMmQ3LWI3NDMtNDcxNC04MzdlLWFmMGIxMjliZDU0Mm0AAAAJcHJvamVjdElkbQAAACRmYzRiZmMwOC0zMjQzLTQyMGYtODg0ZC0xY2UzN2QzZjQ1M2JkAAZzaWduZWRuBgDIbglBgwE.iMeGupqXUwr5LqeQmq3dquLG5I3IX9eHjlPfegYY-x4',
+  userSecret: token,
+  userToken: userToken,
+});
+export default client;

package/src/utils/global.js

@@ -0,0 +1,57 @@
+export const WhatsappPlaceholderBanner =
+  "/icons/assets/ic_placeholder_banner.svg";
+export const APP_NAME = "whatsapp clone";
+export const  placeholdeImage = "/icons/placeholder.svg"
+export const  ARROW_LOGO = "/icons/arrow_logo.svg"
+export const SHOW_EYE_ICON = "/icons/ic_uil_eye.svg";
+export const HIDE_EYE_ICON = "/icons/ic_uil_eye-slash.svg";
+export const ARROW_LEFT_ICON = "/icons/ic_uil_arrow-left.svg";
+export const SEARCH_ICON = "/icons/ic_uil_search.svg";
+export const LIGHT_MODE = "/icons/light-mode.svg";
+export const USERS = "/icons/users.svg";
+export const STATUS = "/icons/status.svg";
+export const BACKICON = "/icons/back.svg";
+export const DELETEICON = "/icons/delete.svg";
+export const CLOSE_ICON = "/icons/close.svg";
+export const LOCKICON = "/icons/lock.svg";
+export const EDITPENCILICON = "/icons/edit-pencil.svg";
+export const BLOCKICON = "/icons/block.svg";
+export const THUMB_DOWN = "/icons/thumb-down.svg";
+export const FILTER = "/icons/filter.svg";
+export const ATTACH_FILE = "/icons/attach-file.svg";
+export const BELL_ICON = "/icons/bell.svg";
+export const BOTTOM_ARROW = "/icons/bottom-arrow.svg";
+export const MESSAGE = "/icons/message.svg";
+export const ROUND_STAR = "/icons/round-star.svg";
+export const MENU_ICON = "/icons/menu .svg";
+export const SEARCH = "/icons/search.svg";
+export const EMOJI_ICON = "/icons/emoji.svg";
+export const SENDICON = "/icons/send.svg";
+export const RIGHT_ARROW = "/icons/right-arrow.svg";
+export const DISAPEAR_ICON = "/icons/disappear.svg";
+export const CORRECT_ICON = "/icons/right.svg";
+export const CANCEl = "/icons/cancel.svg";
+export const POll = "/icons/poll.svg";
+export const CAMERA = "/icons/camera.svg";
+export const DOCUMENT = "/icons/document.png";
+export const GALLERY = "/icons/gallery.svg";
+export const USER = "/icons/user.svg";
+export const STICKER = "./icons/sticker.svg";
+export const CAMERA_RETAKE = "/icons/retake.png";
+export const Empty_Chat_Placeholder = "/icons/chat empty placeholder.svg";
+export const VOICE = "/icons/voice.png";
+export const CROSS_CAROUSEL = "/icons/crossCarousel.svg";
+export const DOWNLOAD_CAROUSEL = "/icons/downloadCarousel.svg";
+export const EMOJI_FACE_CAROUSEL = "/icons/emojiCarousel.svg";
+export const FORWARD_CAROUSEL = "/icons/forwardCarousel.svg";
+export const GO_TO_MESSAGE_CAROUSEL = "/icons/goToMessageCarousel.svg";
+export const LEFT_ARROW_CAROUSEL = "/icons/leftArrowCarousel.svg";
+export const MENU_CAROUSEL = "/icons/menuCarousel.svg";
+export const STAR_CAROUSEL = "/icons/starCarousel.svg";
+export const LOGIN_BACKGROUND = "/icons/login_background.png";
+
+export const CHAT_AUDIO_PLAY = '/icons/chat_audio_play.png';
+export const CHAT_AUDIO_PAUSE = '/icons/chat_audio_pause.png';
+export const CAMERA_SWITCH = '/icons/camera-switch.svg';
+export const AUDIO_PAUSE = '/icons/audio_pause.svg';
+export const AUDIO_PLAY = '/icons/audio_play.svg';