@ARAbdullaSL

.env

@@ -0,0 +1,6 @@
+MONGO_URI=mongodb+srv://user:321465@cluster0.7jcofhm.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0
+CLOUDINARY_NAME=dtl9ly6ry
+CLOUDINARY_API_KEY=936793283939455
+CLOUDINARY_API_SECRET=YdqS9mHradZrHx6gJYOVTVEu8oI
+JWT_SECRET_KEY=AIzaSyA9ynkASznKmmLRppnQpTIRipJe9RK34NA
+JWT_EXPIRES_IN=1200d

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+client/src/assets/Sender[[:space:]]Call[[:space:]]Request[[:space:]]Tone.mp3 filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,28 @@
+# Base image
+FROM quay.io/suhailtechinfo/suhail-v2
+
+# Create the app directory with correct permissions
+RUN mkdir -p /home/app && chown -R node:node /home/app
+
+# Set the working directory
+WORKDIR /home/app
+
+# Copy the entire app directory into the container with the correct ownership
+COPY --chown=node:node . .
+
+# Install dependencies
+RUN npm install || yarn install
+
+# Create the start.sh script with the correct permissions
+RUN echo '#!/bin/sh\nnpm start' > start.sh \
+    && chmod +x start.sh \
+    && chown node:node start.sh
+
+# Switch to the 'node' user
+USER node
+
+# Expose the port
+EXPOSE 3000
+
+# Run the start.sh script
+CMD ["sh", "start.sh"]

app.js

@@ -0,0 +1,37 @@
+const express = require("express");
+const cookieParser = require("cookie-parser");
+const cors = require("cors");
+
+const app = express();
+const authRouter = require("./routers/authRouter");
+const contactsRouter = require("./routers/contactsRouter");
+const chatRoomRouter = require("./routers/chatRoomRouter");
+const profileRouter = require("./routers/profileRouter");
+const uploadRouter = require("./routers/uploadRouter");
+const ReqError = require("./utilities/ReqError");
+const errorController = require("./controllers/errorController");
+
+app.use(express.json({ limit: "50mb" }));
+app.use(cookieParser());
+app.use(cors());
+
+// Routes
+app.use("/api/user", authRouter);
+
+// Protector
+app.use("/api/*", (req, res, next) => {
+  if (!req.cookies.userId)
+    return next(new ReqError(400, "You are not logged in"));
+
+  next();
+});
+
+app.use("/api/contacts", contactsRouter);
+app.use("/api/profile", profileRouter);
+app.use("/api/chatRoom", chatRoomRouter);
+app.use("/api/upload", uploadRouter);
+
+// Error handle middleware
+app.use(errorController);
+
+module.exports = app;

client/.env

@@ -0,0 +1,7 @@
+    REACT_APP_BOT_ID=63e2b0bdc3f617f799a8b6b1
+    REACT_APP_BOT_USERNAME=EddieBot
+    REACT_APP_BOT_NAME=Telegram Bot
+    REACT_APP_BOT_URL=https://www.botlibre.com/rest/json/chat
+    REACT_APP_BOT_APPLICATION_ID=2496722781764642402
+    REACT_APP_BOT_APPLICATION_INSTANCE=12332376
+    REACT_APP_CLOUDINARY_NAME=dlanhtzbw

client/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "client",
+  "proxy": "http://localhost:4000",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "cloudinary-react": "^1.8.1",
+    "emoji-picker-react": "^4.3.0",
+    "formik": "^2.2.9",
+    "framer-motion": "^7.5.3",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-jplayer": "^7.1.3",
+    "react-media-recorder": "^1.6.6",
+    "react-redux": "^8.0.4",
+    "react-router-dom": "^6.4.2",
+    "react-scripts": "5.0.1",
+    "simple-peer": "^9.11.1",
+    "socket.io-client": "^4.5.3",
+    "web-vitals": "^2.1.4",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "npx react-scripts start",
+    "build": "npx react-scripts build",
+    "test": "npx react-scripts test",
+    "eject": "npx react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.17",
+    "tailwindcss": "^3.1.8"
+  }
+}

client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

client/public/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      rel="icon"
+      href="%PUBLIC_URL%/favicon.svg"
+      sizes="any"
+      type="image/svg+xml"
+    />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Telegram Web</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

client/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

client/src/App.jsx

@@ -0,0 +1,49 @@
+import DeleteChat from "./components/globals/DeleteChat";
+import DeleteContact from "./components/globals/DeleteContact";
+import NewContactForm from "./components/globals/NewContactForm";
+import Sidebar from "./components/globals/Sidebar";
+import VoiceCallModal from "./components/globals/VoiceCallModal";
+import VideoCallModal from "./components/globals/VideoCallModal";
+import Authentication from "./pages/Authentication";
+import Chat from "./pages/Chat";
+import UserProfile from "./pages/UserProfile";
+import useInit from "./hooks/useInit";
+import Notification from "./components/globals/Notification";
+import { useSelector } from "react-redux";
+import useAppHeight from "./hooks/useAppHeight";
+
+function App() {
+  // Initialize application
+  const { loggedIn } = useInit();
+  const modalType = useSelector((state) => state.modalReducer.type);
+  useAppHeight();
+
+  return (
+    <div className="w-full h-full flex overflow-hidden bg-primary relative">
+      {loggedIn && (
+        <>
+          {/* Sidebar to show ChatList, Contacts, Settings Page */}
+          <Sidebar />
+          {/* Chat to show messages */}
+          <Chat />
+          <UserProfile />
+        </>
+      )}
+
+      {!loggedIn && <Authentication />}
+
+      {/* Notification */}
+      <Notification />
+
+      {/* Modals */}
+      <DeleteChat />
+      <DeleteContact />
+      <NewContactForm />
+
+      {modalType === "voiceCallModal" && <VoiceCallModal />}
+      {modalType === "videoCallModal" && <VideoCallModal />}
+    </div>
+  );
+}
+
+export default App;

client/src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

client/src/assets/Sender Call Request Tone.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ed43a89773e88b65bbb501cde8e0aa14cbc43611afafb919841a50cb913661bd
+size 1203108

client/src/components/globals/CTAIconWrapper.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+function CTAIconWrapper({ className, children, onClick }) {
+  return (
+    <div
+      onClick={onClick}
+      className={`bg-cta-icon flex items-center justify-center w-[5.5rem] h-[5.5rem] rounded-full ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default CTAIconWrapper;

client/src/components/globals/DeleteChat.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { modalActions } from "../../store/modalSlice";
+import Modal from "./Modal";
+import useFetch from "../../hooks/useFetch";
+import { chatActions } from "../../store/chatSlice";
+import useSocket from "../../hooks/useSocket";
+
+function DeleteChat() {
+  const dispatch = useDispatch();
+  const chatData = useSelector((state) => state.modalReducer.payload.chatData);
+  const { socketEmit } = useSocket();
+
+  const deleteChatRoom = () => {
+    socketEmit("user:chatRoomClear", {
+      chatRoomId: chatData?.chatRoomId || chatData?._id,
+    });
+    dispatch(chatActions.setChatUnactive());
+  };
+
+  return (
+    <Modal
+      onClick={() => dispatch(modalActions.closeModal())}
+      typeValue="deleteChatModal"
+      className="w-[30rem] !px-[2rem] pb-[2rem]"
+      canOverlayClose={true}
+    >
+      <h2 className="font-semibold text-[2rem]">Discard Chat</h2>
+      <p className="">
+        Are you sure you want to delete the chat with{" "}
+        {chatData?.profile?.name || chatData?.chatProfile?.username}
+      </p>
+      <div className="flex items-center justify-center gap-[2rem] mt-[1rem]">
+        <button className="text-cta-icon rounded-md font-semibold uppercase p-[1rem] hover:bg-secondary-light-text">
+          Cancel
+        </button>
+        <button
+          onClick={() => {
+            deleteChatRoom();
+          }}
+          className="text-danger rounded-md font-semibold uppercase p-[1rem] hover:bg-secondary-light-text"
+        >
+          Delete Chat
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+export default DeleteChat;

client/src/components/globals/DeleteContact.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { modalActions } from "../../store/modalSlice";
+import Modal from "./Modal";
+import useFetch from "../../hooks/useFetch";
+import { contactsActions } from "../../store/contactsSlice";
+import { chatActions } from "../../store/chatSlice";
+import { userProfileActions } from "../../store/userProfileSlice";
+
+function DeleteContact() {
+  const dispatch = useDispatch();
+  const chatRoomId = useSelector(
+    (state) => state.chatReducer.currentChatRoom._id
+  );
+  const contactData = useSelector((state) => state.modalReducer.payload);
+  const { reqFn: deleteContact } = useFetch({
+    method: "DELETE",
+    url: "/contacts",
+  });
+
+  const deleteContactHandler = async () => {
+    // Hide profile
+    dispatch(userProfileActions.hideProfile());
+    // Delete contact from database
+    await deleteContact({ username: contactData?.profile?.username });
+    // Remove contact from redux store
+    dispatch(contactsActions.removeContact({ id: contactData?.profile?._id }));
+    // Deactivate chat
+    dispatch(chatActions.removeChatRoom({ chatRoomId }));
+    dispatch(chatActions.setChatUnactive());
+  };
+
+  return (
+    <Modal
+      onClick={() => dispatch(modalActions.closeModal())}
+      typeValue="deleteContactModal"
+      className="w-[30rem] !px-[2rem] pb-[2rem]"
+      canOverlayClose={true}
+    >
+      <h2 className="font-semibold text-[2rem]">Delete Contact</h2>
+      <p className="">
+        Are you sure you want to delete {contactData?.profile?.name} contact?
+      </p>
+      <div className="flex items-center justify-center gap-[2rem] mt-[1rem]">
+        <button className="text-cta-icon rounded-md font-semibold uppercase p-[1rem] hover:bg-secondary-light-text">
+          Cancel
+        </button>
+        <button
+          onClick={deleteContactHandler}
+          className="text-danger rounded-md font-semibold uppercase p-[1rem] hover:bg-secondary-light-text"
+        >
+          Delete Contact
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+export default DeleteContact;

client/src/components/globals/FormField.jsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Field } from "formik";
+
+function FormField({
+  labelName,
+  labelClassName,
+  name,
+  value,
+  error,
+  required,
+  fieldType,
+}) {
+  return (
+    <div className="relative group">
+      <label
+        onClick={(event) =>
+          event.currentTarget.closest("div").querySelector("input").focus()
+        }
+        htmlFor={name}
+        className={`${labelClassName}
+        absolute 
+        ${
+          value
+            ? "text-[1.4rem] -top-[1.1rem] -translate-y-0 "
+            : "top-1/2 -translate-y-1/2 text-[1.6rem]"
+        } group-focus-within:-top-[1.1rem]
+        group-focus-within:-translate-y-0
+        left-[1.5rem] group-focus-within:left-[1rem]
+        bg-primary 
+        text-secondary-text group-focus-within:text-cta-icon
+        px-[.3rem] 
+        duration-200
+        group-focus-within:text-[1.4rem]
+        `}
+      >
+        {labelName} ({required ? "required" : "optional"})
+      </label>
+      <Field
+        name={name}
+        className="bg-transparent border border-secondary-text rounded-2xl py-[1rem] group-focus-within:outline-none px-[1.5rem] focus-within:border-2 focus-within:border-cta-icon w-full"
+        type={fieldType ? fieldType : "text"}
+      />
+    </div>
+  );
+}
+
+export default FormField;

client/src/components/globals/Header.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Header({ children, className }) {
+  return <header className={`h-[5.6rem] ${className}`}>{children}</header>;
+}
+
+export default Header;

client/src/components/globals/IconWrapper.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+function IconWrapper({ active, children, className, onClick }) {
+  return (
+    <div
+      className={`flex items-center justify-center w-[4rem] h-[4rem] rounded-full cursor-pointer hover:bg-secondary-light-text ${
+        active && "bg-secondary-light-text"
+      } ${className}`}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default IconWrapper;

client/src/components/globals/Image.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Image as CloudImage, Placeholder } from "cloudinary-react";
+import process from "process";
+
+function Image({ src, alt, className }) {
+  return (
+    <CloudImage
+      cloudName={process.env.REACT_APP_CLOUDINARY_NAME}
+      publicId={src}
+      alt={alt}
+      className={`${className} object-center object-cover`}
+    >
+      <Placeholder type="blur" />
+    </CloudImage>
+  );
+}
+
+export default Image;

client/src/components/globals/MessageCheck.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+function MessageCheck({ readStatus, deliveredStatus, className }) {
+  const computedClassName = `!fill-transparent !stroke-avatar-check ${className}`;
+  // Message sent gives a single check
+  const singleCheck = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 24 24"
+      className="w-[1.4rem] h-[1.4rem]"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="m4 12l6 6L20 6"
+        className={computedClassName}
+      />
+    </svg>
+  );
+
+  // Message delivered gives double check, message read gives a colored double check
+  const doubleCheck = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 32 32"
+      className="w-[1.6rem] h-[1.6rem]"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="m4 17l5 5l12-12m-5 10l2 2l12-12"
+        className={`${computedClassName} ${
+          readStatus && "!stroke-avatar-check-read"
+        }`}
+      />
+    </svg>
+  );
+
+  return <span>{deliveredStatus ? doubleCheck : singleCheck}</span>;
+}
+
+export default MessageCheck;

client/src/components/globals/Modal.jsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useSelector } from "react-redux";
+import Overlay from "./Overlay";
+
+function Modal({ className, children, typeValue, canOverlayClose, onClick }) {
+  const { type, positions } = useSelector((state) => state.modalReducer);
+
+  return (
+    <AnimatePresence>
+      {type === typeValue && (
+        <Overlay canOverlayClose={canOverlayClose === false ? false : true}>
+          <motion.div
+            initial={{
+              scale: 0,
+            }}
+            animate={{
+              scale: 1,
+              opacity: 1,
+              transition: {
+                duration: 0.2,
+              },
+            }}
+            exit={{
+              scale: 0,
+              transition: {
+                duration: 0.2,
+              },
+            }}
+            className={`bg-modal backdrop-blur-[100px] py-[1rem] px-[.5rem] flex flex-col gap-[.5rem] w-fit rounded-md shadow-md shadow-box-shadow absolute ${className}`}
+            id="modal"
+            style={{
+              ...positions,
+            }}
+            onClick={onClick}
+          >
+            {children}
+          </motion.div>
+        </Overlay>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default Modal;

client/src/components/globals/ModalChild.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+function ModalChild({ children, onClick, className }) {
+  return (
+    <div
+      onClick={onClick}
+      className={`flex items-center gap-[.8rem] hover:bg-secondary-light-text modal-child text-[1.4rem] font-medium capitalize px-[1rem] py-[.5rem] rounded-md cursor-default duration-200 active:scale-95 ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default ModalChild;

client/src/components/globals/NewContactForm.jsx

@@ -0,0 +1,130 @@
+import React from "react";
+import Modal from "./Modal";
+import { Formik, Form } from "formik";
+import * as Yup from "yup";
+import IconWrapper from "./IconWrapper";
+import FormField from "./FormField";
+import { useDispatch } from "react-redux";
+import { modalActions } from "../../store/modalSlice";
+import useFetch from "../../hooks/useFetch";
+import { contactsActions } from "../../store/contactsSlice";
+import useSocket from "../../hooks/useSocket";
+import { chatListActions } from "../../store/chatListSlice";
+
+const formSchema = Yup.object().shape({
+  name: Yup.string().required("Field is required"),
+  username: Yup.string().required("Field is required"),
+});
+
+function NewContactForm() {
+  const dispatch = useDispatch();
+  const { socketEmit } = useSocket();
+  const { reqFn } = useFetch({ method: "POST", url: "/contacts" }, (data) => {
+    dispatch(contactsActions.addContact(data.data.contact));
+    socketEmit("user:joinRooms", { rooms: [data.data.contact.chatRoomId] });
+    dispatch(
+      chatListActions.addToChatList({
+        newChat: {
+          chatRoomId: data.data.contact.chatRoomId,
+          roomType: "Private",
+          latestMessage: {},
+          unreadMessagesCount: 0,
+          pinned: false,
+          mode: null,
+          profile: {
+            name: data.data.contact.name,
+            ...data.data.contact.contactDetails,
+          },
+        },
+      })
+    );
+  });
+
+  const addContact = async (values) => {
+    await reqFn(values);
+    dispatch(modalActions.closeModal({}));
+  };
+
+  return (
+    <Modal
+      typeValue="newContactForm"
+      className="mx-[1rem] !bg-primary backdrop-blur-0"
+      canOverlayClose={false}
+    >
+      <Formik
+        validationSchema={formSchema}
+        initialValues={{
+          name: "",
+          username: "",
+        }}
+        onSubmit={addContact}
+      >
+        {({ errors, touched, values }) => (
+          <Form
+            className="px-[1rem] py-[1rem] flex flex-col gap-[2rem] w-[38rem]"
+            autoComplete="off"
+          >
+            {/* Header */}
+            <div className="flex items-center">
+              <IconWrapper onClick={() => dispatch(modalActions.closeModal())}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
+                    strokeWidth={1}
+                    className=""
+                  />
+                </svg>
+              </IconWrapper>
+              <h2 className="text-[2rem] font-semibold ml-[1rem]">
+                Add Contact
+              </h2>
+              <button
+                type="submit"
+                className={`text-white uppercase px-[2rem] py-[1rem] rounded-md bg-cta-icon ml-auto
+                ${(!values.name || !values.username) && "opacity-60"}`}
+              >
+                Add
+              </button>
+            </div>
+            {/* Top */}
+            <div className="flex items-center mb-[.5rem] gap-[1.5rem]">
+              {/* Avatar */}
+              <div className="w-[10rem] h-[10rem] rounded-full bg-cta-icon flex items-center justify-center text-[2.5rem] text-white font-bold uppercase">
+                {values.name[0]} {values.name?.split(" ")?.[1]?.[0]}
+              </div>
+              {/* Forms */}
+              <div className="flex-grow">
+                <FormField
+                  name="name"
+                  labelName="Name"
+                  required={true}
+                  error={errors.name}
+                  touched={touched.name}
+                  value={values.name}
+                />
+              </div>
+            </div>
+            {/* Bottom */}
+            <FormField
+              name="username"
+              labelName="Username"
+              required={true}
+              error={errors.username}
+              touched={touched.username}
+              value={values.username}
+            />
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+}
+
+export default NewContactForm;

client/src/components/globals/Notification.jsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { notificationActions } from "../../store/notificationSlice";
+import { motion, AnimatePresence } from "framer-motion";
+
+function Notification() {
+  const notifications = useSelector((state) => state.notificationReducer);
+  const dispatch = useDispatch();
+
+  return (
+    <div className="absolute right-0 z-[10000] space-y-[.5rem]">
+      <AnimatePresence>
+        {notifications.map(({ message, type, id }) => (
+          <motion.div
+            initial={{
+              translateX: "32rem",
+              opacity: 0.5,
+            }}
+            animate={{
+              translateX: 0,
+              opacity: 1,
+            }}
+            exit={{
+              translateX: "32rem",
+              opacity: 0.5,
+            }}
+            key={id}
+            className={`bg-primary border-l-[3px] flex justify-between pl-[2rem] w-[30rem] rounded-l-[.5rem] ${
+              type === "error" && "border-l-danger"
+            }`}
+          >
+            <span className="my-[3rem] mr-[.5rem]">{message}</span>
+            <span
+              onClick={() =>
+                dispatch(notificationActions.removeNotification(id))
+              }
+              className="flex items-center justify-center w-[4.5rem] hover:bg-secondary-light-text"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  fill="currentColor"
+                  d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z"
+                />
+              </svg>
+            </span>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+export default Notification;

client/src/components/globals/Overlay.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { modalActions } from "../../store/modalSlice";
+
+function Overlay({ children, canOverlayClose }) {
+  const dispatch = useDispatch();
+
+  const closeModal = () => {
+    if (!canOverlayClose) return;
+    dispatch(modalActions.closeModal());
+  };
+
+  return (
+    <div
+      onClick={(event) => {
+        if (event.target.id !== "overlay") return;
+        closeModal("Click caused it");
+      }}
+      className=" w-full h-full absolute z-20 top-0 left-0 flex items-center justify-center"
+      id="overlay"
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Overlay;

client/src/components/globals/Sidebar.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import ChatList from "../../pages/ChatList";
+import Contacts from "../../pages/Contacts";
+import SelectContacts from "../../pages/SelectContacts";
+import Settings from "../../pages/Settings";
+
+function Sidebar() {
+  const chatActive = useSelector((state) => state.chatReducer.active);
+  return (
+    <div
+      id="side-bar"
+      className={`w-[42rem] duration-200 h-full relative overflow-x-hidden shrink-0 sm:w-full ${
+        chatActive && "lg:w-0"
+      }`}
+    >
+      <ChatList />
+      <Contacts />
+      <Settings />
+      <SelectContacts />
+    </div>
+  );
+}
+
+export default Sidebar;

client/src/components/globals/Spinner.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+function Spinner({ className }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 24 24"
+      className={`${className} animate-spin`}
+    >
+      <path
+        fill="currentColor"
+        d="M12 21a9 9 0 1 1 6.18-15.55a.75.75 0 0 1 0 1.06a.74.74 0 0 1-1.06 0A7.51 7.51 0 1 0 19.5 12a.75.75 0 0 1 1.5 0a9 9 0 0 1-9 9Z"
+        className="fill-white stroke-white"
+      />
+    </svg>
+  );
+}
+
+export default Spinner;

client/src/components/globals/VideoCallModal.jsx

@@ -0,0 +1,142 @@
+import React from "react";
+import Modal from "./Modal";
+import usePeer from "../../hooks/usePeer";
+import { useSelector } from "react-redux";
+import CTAIconWrapper from "./CTAIconWrapper";
+import callReceiverTone from "../../assets/Receiver Call Request Tone.mp3";
+import callSenderTone from "../../assets/Sender Call Request Tone.mp3";
+
+function VideoCallModal() {
+  const { partnerProfile, callDetail } = useSelector(
+    (state) => state.modalReducer.payload
+  );
+
+  const {
+    userMediaRef,
+    callStatus,
+    partnerMediaRef,
+    acceptCall,
+    callAccepted,
+    endCall,
+    denyCall,
+    duration,
+  } = usePeer({
+    mediaOptions: { video: true, audio: true },
+    callDetail,
+    partnerProfile,
+  });
+
+  return (
+    <Modal
+      typeValue="videoCallModal"
+      canOverlayClose={false}
+      className="!h-full !w-full !py-0 !px-0"
+    >
+      {/* Partner video */}
+      <video
+        ref={partnerMediaRef}
+        className={`${
+          callAccepted ? "w-full h-full object-cover object-center" : "hidden"
+        }`}
+        autoPlay
+        playsInline
+      />
+
+      {/* User video */}
+      <video
+        ref={userMediaRef}
+        className={`rounded-lg duration-100 object-cover object-center ${
+          callAccepted
+            ? "w-[30rem] h-[30rem] absolute bottom-0 right-0 md:w-[12rem] md:h-[25rem]"
+            : "w-full h-full"
+        }`}
+        autoPlay
+        playsInline
+        muted
+      />
+
+      <div
+        className={`duration-100 flex items-center text-white ${
+          callAccepted
+            ? "left-[5rem] top-[3rem] gap-[3rem] absolute"
+            : "pt-[5rem] text-center w-full absolute flex-col gap-[1rem]"
+        }`}
+      >
+        <p className="text-[2.5rem] font-semibold">
+          {partnerProfile?.name || partnerProfile?.username}
+        </p>
+        {/* Call progress */}
+        <span className="capitalize">
+          {callAccepted ? duration : `${callStatus}...`}
+        </span>
+      </div>
+
+      {/* Pick call buttons */}
+      <div className="flex gap-[20rem] mt-auto mb-[5rem] absolute left-[50%] -translate-x-[50%] bottom-[5rem]">
+        <div
+          onClick={() => (callAccepted ? endCall() : denyCall("Busy"))}
+          className=""
+        >
+          <CTAIconWrapper className="bg-danger">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 16 16"
+            >
+              <path
+                fill="currentColor"
+                d="M15.897 9c.125.867.207 2.053-.182 2.507c-.643.751-4.714.751-4.714-.751c0-.756.67-1.252.027-2.003c-.632-.738-1.766-.75-3.027-.751s-2.394.012-3.027.751c-.643.751.027 1.247.027 2.003c0 1.501-4.071 1.501-4.714.751C-.102 11.053-.02 9.867.105 9c.096-.579.339-1.203 1.118-2c1.168-1.09 2.935-1.98 6.716-2h.126c3.781.019 5.548.91 6.716 2c.778.797 1.022 1.421 1.118 2z"
+                className="fill-white stroke-transparent"
+              />
+            </svg>
+          </CTAIconWrapper>
+        </div>
+        {!callAccepted && !callDetail.caller && (
+          <div onClick={acceptCall} className="mt-auto mb-[5rem]">
+            <CTAIconWrapper className="bg-[#0ac630]">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  fill="currentColor"
+                  d="M15.897 9c.125.867.207 2.053-.182 2.507c-.643.751-4.714.751-4.714-.751c0-.756.67-1.252.027-2.003c-.632-.738-1.766-.75-3.027-.751s-2.394.012-3.027.751c-.643.751.027 1.247.027 2.003c0 1.501-4.071 1.501-4.714.751C-.102 11.053-.02 9.867.105 9c.096-.579.339-1.203 1.118-2c1.168-1.09 2.935-1.98 6.716-2h.126c3.781.019 5.548.91 6.716 2c.778.797 1.022 1.421 1.118 2z"
+                  className="fill-white stroke-transparent"
+                />
+              </svg>
+            </CTAIconWrapper>
+          </div>
+        )}
+      </div>
+
+      {/* Ringtones */}
+      {callDetail.caller && !callAccepted && (
+        <audio
+          src={callSenderTone}
+          autoPlay
+          playsInline
+          loop
+          hidden
+          controlsList="nodownload"
+        />
+      )}
+      {!callDetail.caller && !callAccepted && (
+        <audio
+          src={callReceiverTone}
+          autoPlay
+          playsInline
+          loop
+          hidden
+          controlsList="nodownload"
+        />
+      )}
+    </Modal>
+  );
+}
+
+export default VideoCallModal;

client/src/components/globals/VoiceCallModal.jsx

@@ -0,0 +1,137 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import CTAIconWrapper from "./CTAIconWrapper";
+import Modal from "./Modal";
+import Image from "../globals/Image";
+import usePeer from "../../hooks/usePeer";
+import callReceiverTone from "../../assets/Receiver Call Request Tone.mp3";
+import callSenderTone from "../../assets/Sender Call Request Tone.mp3";
+
+function VoiceCallModal() {
+  const { partnerProfile, callDetail } = useSelector(
+    (state) => state.modalReducer.payload
+  );
+
+  const {
+    userMediaRef,
+    callStatus,
+    partnerMediaRef,
+    acceptCall,
+    callAccepted,
+    endCall,
+    denyCall,
+    duration,
+  } = usePeer({
+    mediaOptions: { video: false, audio: true },
+    callDetail,
+    partnerProfile,
+  });
+
+  return (
+    <Modal
+      typeValue="voiceCallModal"
+      canOverlayClose={false}
+      className="!p-0 !rounded-3xl sm:!rounded-none overflow-hidden text-white h-fit"
+    >
+      <Image
+        src={partnerProfile?.avatar}
+        alt={partnerProfile?.username}
+        className="w-[40rem] h-[50rem] sm:w-full sm:h-full"
+      />
+      <div
+        className={`flex flex-col items-center absolute top-0 right-0 w-full h-full`}
+      >
+        <div className="pt-[5rem] text-center w-full">
+          <p className="text-[2.5rem] font-semibold">
+            {partnerProfile?.name || partnerProfile?.username}
+          </p>
+          {/* Call progress */}
+          <span className="block mt-[1rem] capitalize">
+            {callAccepted ? duration : `${callStatus}...`}
+          </span>
+        </div>
+        <div className="flex gap-[20rem] mt-auto mb-[5rem]">
+          <div
+            onClick={() => (callAccepted ? endCall() : denyCall("Busy"))}
+            className=""
+          >
+            <CTAIconWrapper className="bg-danger">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 16 16"
+              >
+                <path
+                  fill="currentColor"
+                  d="M15.897 9c.125.867.207 2.053-.182 2.507c-.643.751-4.714.751-4.714-.751c0-.756.67-1.252.027-2.003c-.632-.738-1.766-.75-3.027-.751s-2.394.012-3.027.751c-.643.751.027 1.247.027 2.003c0 1.501-4.071 1.501-4.714.751C-.102 11.053-.02 9.867.105 9c.096-.579.339-1.203 1.118-2c1.168-1.09 2.935-1.98 6.716-2h.126c3.781.019 5.548.91 6.716 2c.778.797 1.022 1.421 1.118 2z"
+                  className="fill-white stroke-transparent"
+                />
+              </svg>
+            </CTAIconWrapper>
+          </div>
+          {!callAccepted && !callDetail.caller && (
+            <div onClick={acceptCall} className="mt-auto mb-[5rem]">
+              <CTAIconWrapper className="bg-[#0ac630]">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="1em"
+                  height="1em"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M15.897 9c.125.867.207 2.053-.182 2.507c-.643.751-4.714.751-4.714-.751c0-.756.67-1.252.027-2.003c-.632-.738-1.766-.75-3.027-.751s-2.394.012-3.027.751c-.643.751.027 1.247.027 2.003c0 1.501-4.071 1.501-4.714.751C-.102 11.053-.02 9.867.105 9c.096-.579.339-1.203 1.118-2c1.168-1.09 2.935-1.98 6.716-2h.126c3.781.019 5.548.91 6.716 2c.778.797 1.022 1.421 1.118 2z"
+                    className="fill-white stroke-transparent"
+                  />
+                </svg>
+              </CTAIconWrapper>
+            </div>
+          )}
+        </div>
+      </div>
+      {/* Speakers */}
+
+      <audio
+        ref={userMediaRef}
+        autoPlay
+        playsInline
+        muted
+        hidden
+        controlsList="nodownload"
+      />
+      <audio
+        ref={partnerMediaRef}
+        autoPlay
+        playsInline
+        hidden
+        controlsList="nodownload"
+      />
+      {/* Ringtones */}
+      {callDetail.caller && !callAccepted && (
+        <audio
+          src={callSenderTone}
+          autoPlay
+          playsInline
+          loop
+          hidden
+          controlsList="nodownload"
+        />
+      )}
+      {!callDetail.caller && !callAccepted && (
+        <audio
+          src={callReceiverTone}
+          autoPlay
+          playsInline
+          loop
+          hidden
+          controlsList="nodownload"
+        />
+      )}
+    </Modal>
+  );
+}
+
+export default VoiceCallModal;

client/src/components/pages/Authentication/Login.jsx

@@ -0,0 +1,87 @@
+import React from "react";
+import * as Yup from "yup";
+import { Formik, Form } from "formik";
+import FormField from "../../globals/FormField";
+import useFetch from "../../../hooks/useFetch";
+import { useDispatch } from "react-redux";
+import { authActions } from "../../../store/authSlice";
+import Spinner from "../../globals/Spinner";
+
+const schema = Yup.object().shape({
+  username: Yup.string().required("Field is required"),
+  password: Yup.string().required("Field is required"),
+});
+
+function Login({ setUserWantsToLogin }) {
+  const dispatch = useDispatch();
+  // Request to log user in
+  const { reqState, reqFn: loginRequest } = useFetch(
+    { url: "/user/login", method: "POST" },
+    // Success
+    () => {
+      dispatch(authActions.login());
+    }
+  );
+
+  return (
+    <div className="basis-[35rem]">
+      <h1 className="text-cta-icon font-semibold text-[2rem] uppercase mb-[2rem]">
+        Login To Telegram
+      </h1>
+      <Formik
+        initialValues={{
+          username: "",
+          password: "",
+        }}
+        validationSchema={schema}
+        onSubmit={loginRequest}
+      >
+        {({ errors, values }) => (
+          <Form className="flex flex-col gap-[1.5rem]" autoComplete="off">
+            <FormField
+              labelName="Username"
+              labelClassName={`bg-transparent group-focus-within:hidden ${
+                values.username && "hidden"
+              }`}
+              name="username"
+              required={true}
+              value={values.username}
+              error={errors.username}
+            />
+
+            <FormField
+              labelName="Password"
+              labelClassName={`bg-transparent group-focus-within:hidden ${
+                values.password && "hidden"
+              }`}
+              name="password"
+              required={true}
+              value={values.password}
+              error={errors.password}
+              fieldType="password"
+            />
+            <button
+              className={`bg-cta-icon mt-[1rem] p-[1rem] rounded-xl uppercase text-white font-semibold opacity-80 flex items-center justify-center ${
+                !errors.username && !errors.password && "opacity-100"
+              }`}
+              type="submit"
+            >
+              {reqState !== "loading" && "Login"}
+              {reqState === "loading" && (
+                <Spinner className="w-[2.5rem] h-[2.5rem]" />
+              )}
+            </button>
+          </Form>
+        )}
+      </Formik>
+      <div
+        onClick={() => setUserWantsToLogin(false)}
+        className="mt-[2rem] text-right  text-secondary-text underline cursor-pointer hover:text-cta-icon"
+      >
+        New to Telegram
+      </div>
+    </div>
+  );
+}
+
+export default Login;

client/src/components/pages/Authentication/Register.jsx

@@ -0,0 +1,146 @@
+import React from "react";
+import * as Yup from "yup";
+import { Formik, Form } from "formik";
+import FormField from "../../globals/FormField";
+import useFetch from "../../../hooks/useFetch";
+import { useDispatch } from "react-redux";
+import { authActions } from "../../../store/authSlice";
+import Spinner from "../../globals/Spinner";
+import useChatBot from "../../../hooks/useChatBot";
+
+const schema = Yup.object().shape({
+  name: Yup.string()
+    .min(1, "Too short")
+    .max(50, "Too long")
+    .required("Field is required"),
+  username: Yup.string()
+    .min(1, "Too short")
+    .max(50, "Too long")
+    .required("Field is required"),
+  password: Yup.string().required("Field is required"),
+  confirmPassword: Yup.string()
+    .required("Field is required")
+    .oneOf([Yup.ref("password"), null], "Passwords must match"),
+});
+
+function Register({ setUserWantsToLogin }) {
+  const dispatch = useDispatch();
+
+  // Add bot as contact
+  const { reqFn: addBotAsContact, reqState: addBotState } = useFetch(
+    { url: "/contacts", method: "POST" },
+    (data) => {
+      dispatch(
+        authActions.setUserIsNew({
+          isNew: true,
+          payload: { chatRoomId: data.data.contact.chatRoomId },
+        })
+      );
+
+      dispatch(authActions.login());
+    }
+  );
+
+  // Register user
+  const { reqFn, reqState } = useFetch(
+    { url: "/user/register", method: "POST" },
+    () => {
+      addBotAsContact({
+        name: process.env.REACT_APP_BOT_NAME,
+        username: process.env.REACT_APP_BOT_USERNAME,
+      });
+    }
+  );
+
+  return (
+    <div className="basis-[35rem]">
+      <h1 className="text-cta-icon font-semibold text-[2rem] uppercase mb-[2rem]">
+        Join Telegram
+      </h1>
+      <Formik
+        initialValues={{
+          name: "",
+          username: "",
+          password: "",
+          confirmPassword: "",
+        }}
+        validationSchema={schema}
+        onSubmit={reqFn}
+      >
+        {({ errors, values }) => (
+          <Form className="flex flex-col gap-[1.5rem]" autoComplete="off">
+            <FormField
+              labelName="Name"
+              labelClassName={`bg-transparent group-focus-within:hidden ${
+                values.name && "hidden"
+              }`}
+              name="name"
+              required={true}
+              value={values.name}
+              error={errors.name}
+            />
+
+            <FormField
+              labelName="Username"
+              labelClassName={`bg-transparent group-focus-within:hidden ${
+                values.username && "hidden"
+              }`}
+              name="username"
+              required={true}
+              value={values.username}
+              error={errors.username}
+            />
+
+            <FormField
+              labelName="Password"
+              labelClassName={`bg-transparent group-focus-within:hidden ${
+                values.password && "hidden"
+              }`}
+              name="password"
+              required={true}
+              value={values.password}
+              error={errors.password}
+              fieldType="password"
+            />
+
+            <FormField
+              labelName="Confirm Password"
+              labelClassName={`bg-transparent group-focus-within:hidden ${
+                values.confirmPassword && "hidden"
+              }`}
+              name="confirmPassword"
+              required={true}
+              value={values.confirmPassword}
+              error={errors.confirmPassword}
+              fieldType="password"
+            />
+            <button
+              className={`bg-cta-icon mt-[1rem] p-[1rem] rounded-xl uppercase text-white font-semibold opacity-80 flex items-center justify-center ${
+                !errors.name &&
+                !errors.username &&
+                !errors.phoneNumber &&
+                !errors.password &&
+                !errors.confirmPassword &&
+                "opacity-100"
+              }`}
+              type="submit"
+            >
+              {reqState !== "loading" && addBotState !== "loading" && "Join"}
+              {(reqState === "loading" || addBotState === "loading") && (
+                <Spinner className="w-[2.5rem] h-[2.5rem]" />
+              )}
+            </button>
+          </Form>
+        )}
+      </Formik>
+      <div
+        onClick={() => setUserWantsToLogin(true)}
+        className="mt-[2rem] text-right  text-secondary-text underline cursor-pointer hover:text-cta-icon"
+      >
+        Already on Telegram
+      </div>
+    </div>
+  );
+}
+
+export default Register;

client/src/components/pages/Chat/ActionsModal.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { modalActions } from "../../../store/modalSlice";
+import Modal from "../../globals/Modal";
+import ModalChild from "../../globals/ModalChild";
+
+function ActionsModal({ chatProfile }) {
+  const dispatch = useDispatch();
+  const chatRoom = useSelector((state) => state.chatReducer.currentChatRoom);
+  return (
+    <Modal typeValue="actionsModal" className="origin-top-right !w-[18rem]">
+      <ModalChild
+        onClick={() => {
+          dispatch(
+            modalActions.openModal({
+              type: "voiceCallModal",
+              modalChange: true,
+              payload: {
+                partnerProfile: chatProfile,
+                callDetail: { caller: true },
+              },
+              positions: {},
+            })
+          );
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M26 29h-.17C6.18 27.87 3.39 11.29 3 6.23A3 3 0 0 1 5.76 3h5.51a2 2 0 0 1 1.86 1.26L14.65 8a2 2 0 0 1-.44 2.16l-2.13 2.15a9.37 9.37 0 0 0 7.58 7.6l2.17-2.15a2 2 0 0 1 2.17-.41l3.77 1.51A2 2 0 0 1 29 20.72V26a3 3 0 0 1-3 3ZM6 5a1 1 0 0 0-1 1v.08C5.46 12 8.41 26 25.94 27a1 1 0 0 0 1.06-.94v-5.34l-3.77-1.51l-2.87 2.85l-.48-.06c-8.7-1.09-9.88-9.79-9.88-9.88l-.06-.48l2.84-2.87L11.28 5Z"
+            className="!stroke-transparent"
+          />
+        </svg>
+        Call
+      </ModalChild>
+      <ModalChild
+        onClick={() => {
+          dispatch(
+            modalActions.openModal({
+              type: "videoCallModal",
+              payload: {
+                partnerProfile: chatProfile,
+                callDetail: { caller: true },
+              },
+              positions: {},
+            })
+          );
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 32 32"
+        >
+          <path
+            fill="currentColor"
+            d="M2 8v16h22v-3.375l4.563 2.28l1.437.72V8.375l-1.438.72L24 11.374V8H2zm2 2h18v12H4V10zm24 1.625v8.75l-4-2v-4.75l4-2z"
+            className="!stroke-transparent"
+          />
+        </svg>
+        Video Call
+      </ModalChild>
+      <ModalChild
+        onClick={() => {
+          dispatch(
+            modalActions.openModal({
+              type: chatRoom.roomType ? "deleteChatModal" : "leaveGroupModal",
+              payload: { chatData: chatRoom },
+              positions: {},
+            })
+          );
+        }}
+        className="text-danger"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M9 7v0a3 3 0 0 1 3-3v0a3 3 0 0 1 3 3v0M9 7h6M9 7H6m9 0h3m2 0h-2M4 7h2m0 0v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7"
+            className="!fill-transparent !stroke-danger"
+          />
+        </svg>
+        {chatRoom.roomType === "Private" ? "Delete Chat" : "Leave Group"}
+      </ModalChild>
+    </Modal>
+  );
+}
+
+export default ActionsModal;

client/src/components/pages/Chat/AttachFileModal.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import Modal from "../../globals/Modal";
+import ModalChild from "../../globals/ModalChild";
+import useUpload from "../../../hooks/useUpload";
+import useSendMessage from "../../../hooks/useSendMessage";
+
+function AttachFileModal() {
+  const { sendMessage } = useSendMessage();
+  const { handleFileUpload } = useUpload(
+    (uploadData) => {
+      sendMessage({ url: uploadData.public_id });
+    },
+    ["Image"]
+  );
+  return (
+    <Modal typeValue="attachFileModal">
+      <ModalChild
+        onClick={(event) =>
+          event.currentTarget.querySelector("#attachFile").click()
+        }
+      >
+        <input
+          type="file"
+          name="attachFile"
+          id="attachFile"
+          hidden
+          onChange={handleFileUpload}
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Z"
+            className="!fill-transparent"
+          />
+        </svg>
+        Photo
+      </ModalChild>
+    </Modal>
+  );
+}
+
+export default AttachFileModal;

client/src/components/pages/Chat/AttachFileOrRecordDuration.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useDispatch } from "react-redux";
+import { modalActions } from "../../../store/modalSlice";
+import IconWrapper from "../../globals/IconWrapper";
+
+function AttachFileOrRecordDuration({ isRecording, formattedTime }) {
+  const dispatch = useDispatch();
+  //   If user is not recording, show them option to attach an image or video
+  if (!isRecording)
+    return (
+      <IconWrapper
+        className="shrink-0"
+        onClick={() =>
+          dispatch(
+            modalActions.openModal({
+              type: "attachFileModal",
+              positions: { bottom: 90, right: 80 },
+            })
+          )
+        }
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="m15.172 7l-6.586 6.586a2 2 0 1 0 2.828 2.828l6.414-6.586a4 4 0 0 0-5.656-5.656l-6.415 6.585a6 6 0 1 0 8.486 8.486L20.5 13"
+            className="fill-transparent"
+          />
+        </svg>
+      </IconWrapper>
+    );
+
+  if (isRecording)
+    return (
+      <div className="self-center flex items-center gap-[1rem]">
+        <span>{formattedTime}</span>
+        <span className="w-[1rem] h-[1rem] bg-danger rounded-full animate-pulse">
+          &nbsp;
+        </span>
+      </div>
+    );
+}
+
+export default AttachFileOrRecordDuration;

client/src/components/pages/Chat/BubbleTail.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+function BubbleTail({ className, fillColor }) {
+  return (
+    <svg
+      width="11"
+      height="10"
+      viewBox="0 0 11 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`${className} w-[2.5rem] h-[2.5rem] translate-x-[-.6rem] shrink-0`}
+    >
+      <path
+        d="M11 20C4.46592 14.9222 2.16956 10.4109 0 0V20H11Z"
+        fill="#8774E1"
+        className={`${fillColor}`}
+      />
+    </svg>
+  );
+}
+
+export default BubbleTail;

client/src/components/pages/Chat/CTAButtons.jsx

@@ -0,0 +1,194 @@
+import { AnimatePresence, motion } from "framer-motion";
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import useSendMessage from "../../../hooks/useSendMessage";
+import { modalActions } from "../../../store/modalSlice";
+import CTAIconWrapper from "../../globals/CTAIconWrapper";
+
+function CTAButtons({
+  isTyping,
+  isRecording,
+  endRecording,
+  startRecording,
+  setMessageEmpty,
+  pauseRecording,
+}) {
+  const { sendMessage } = useSendMessage(setMessageEmpty);
+  const dispatch = useDispatch();
+
+  const isSending = useSelector(
+    (state) =>
+      state.chatReducer.mode === "sending" ||
+      state.chatReducer.mode?.endsWith("Upload")
+  );
+
+  return (
+    <div className="shrink-0 relative">
+      {/* Pause recording */}
+      {isRecording && (
+        <CTAIconWrapper
+          className="absolute bg-danger top-0 -left-[7rem] z-10"
+          onClick={() => {
+            dispatch(
+              modalActions.openModal({ type: "stopRecordModal", positions: {} })
+            );
+            pauseRecording();
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M9 7v0a3 3 0 0 1 3-3v0a3 3 0 0 1 3 3v0M9 7h6M9 7H6m9 0h3m2 0h-2M4 7h2m0 0v11a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7"
+              className="!fill-transparent !stroke-white"
+            />
+          </svg>
+        </CTAIconWrapper>
+      )}
+
+      {/* Start recording  or send message*/}
+      <CTAIconWrapper
+        onClick={() => {
+          if (!isTyping && !isRecording) startRecording();
+          else {
+            if (isRecording) {
+              endRecording();
+              return;
+            }
+
+            sendMessage();
+          }
+        }}
+        className={`relative ${isRecording && "animate-wave"}`}
+      >
+        {/* Sending message Icon */}
+        <AnimatePresence>
+          {isSending && (
+            <motion.svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                cx="4"
+                cy="12"
+                r="3"
+                fill="currentColor"
+                className="fill-white stroke-transparent"
+              >
+                <animate
+                  id="svgSpinners3DotsBounce0"
+                  attributeName="cy"
+                  begin="0;svgSpinners3DotsBounce1.end+0.25s"
+                  calcMode="spline"
+                  dur="0.6s"
+                  keySplines=".33,.66,.66,1;.33,0,.66,.33"
+                  values="12;6;12"
+                />
+              </circle>
+              <circle
+                cx="12"
+                cy="12"
+                r="3"
+                fill="currentColor"
+                className="fill-white stroke-transparent"
+              >
+                <animate
+                  attributeName="cy"
+                  begin="svgSpinners3DotsBounce0.begin+0.1s"
+                  calcMode="spline"
+                  dur="0.6s"
+                  keySplines=".33,.66,.66,1;.33,0,.66,.33"
+                  values="12;6;12"
+                />
+              </circle>
+              <circle
+                cx="20"
+                cy="12"
+                r="3"
+                fill="currentColor"
+                className="fill-white stroke-transparent"
+              >
+                <animate
+                  id="svgSpinners3DotsBounce1"
+                  attributeName="cy"
+                  begin="svgSpinners3DotsBounce0.begin+0.2s"
+                  calcMode="spline"
+                  dur="0.6s"
+                  keySplines=".33,.66,.66,1;.33,0,.66,.33"
+                  values="12;6;12"
+                />
+              </circle>
+            </motion.svg>
+          )}
+        </AnimatePresence>
+
+        {/* Microphone */}
+        <AnimatePresence>
+          {!isTyping && !isRecording && !isSending && (
+            <motion.svg
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0 }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 32 32"
+            >
+              <path
+                fill="currentColor"
+                d="M23 14v3a7 7 0 0 1-14 0v-3H7v3a9 9 0 0 0 8 8.94V28h-4v2h10v-2h-4v-2.06A9 9 0 0 0 25 17v-3Z"
+                className="fill-white stroke-transparent"
+              />
+              <path
+                fill="currentColor"
+                d="M16 22a5 5 0 0 0 5-5V7a5 5 0 0 0-10 0v10a5 5 0 0 0 5 5Z"
+                className="fill-white stroke-transparent"
+              />
+            </motion.svg>
+          )}
+        </AnimatePresence>
+
+        {/* Send icon */}
+        <AnimatePresence>
+          {(isTyping || isRecording) && (
+            <motion.svg
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              exit={{ scale: 0 }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 24 24"
+              className="absolute"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M9.912 12H4L2.023 4.135A.662.662 0 0 1 2 3.995c-.022-.721.772-1.221 1.46-.891L22 12L3.46 20.896c-.68.327-1.464-.159-1.46-.867a.66.66 0 0 1 .033-.186L3.5 15"
+                className="fill-white stroke-white"
+              />
+            </motion.svg>
+          )}
+        </AnimatePresence>
+      </CTAIconWrapper>
+    </div>
+  );
+}
+
+export default CTAButtons;

client/src/components/pages/Chat/CallMessage.jsx

@@ -0,0 +1,120 @@
+import React from "react";
+import MessageReadStatus from "./MessageReadStatus";
+
+function CallMessage({
+  callDetails,
+  deliveredStatus,
+  readStatus,
+  time,
+  messageReceived,
+}) {
+  return (
+    <div
+      className={`flex rounded-3xl ${
+        messageReceived
+          ? "rounded-bl-none bg-primary"
+          : "rounded-br-none bg-message"
+      } p-[1.5rem] gap-[1rem]`}
+    >
+      <div className="flex items-center gap-[1rem]">
+        {/* Phone Icon */}
+        {callDetails.callType === "voice" && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 32 32"
+          >
+            <path
+              fill="currentColor"
+              d="M26 29h-.17C6.18 27.87 3.39 11.29 3 6.23A3 3 0 0 1 5.76 3h5.51a2 2 0 0 1 1.86 1.26L14.65 8a2 2 0 0 1-.44 2.16l-2.13 2.15a9.37 9.37 0 0 0 7.58 7.6l2.17-2.15a2 2 0 0 1 2.17-.41l3.77 1.51A2 2 0 0 1 29 20.72V26a3 3 0 0 1-3 3ZM6 5a1 1 0 0 0-1 1v.08C5.46 12 8.41 26 25.94 27a1 1 0 0 0 1.06-.94v-5.34l-3.77-1.51l-2.87 2.85l-.48-.06c-8.7-1.09-9.88-9.79-9.88-9.88l-.06-.48l2.84-2.87L11.28 5Z"
+              className="!stroke-transparent fill-primary-text"
+            />
+          </svg>
+        )}
+
+        {/* Video Icon */}
+        {callDetails.callType === "video" && (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 32 32"
+          >
+            <path
+              fill="currentColor"
+              d="M2 8v16h22v-3.375l4.563 2.28l1.437.72V8.375l-1.438.72L24 11.374V8H2zm2 2h18v12H4V10zm24 1.625v8.75l-4-2v-4.75l4-2z"
+              className="!stroke-transparent fill-primary-text"
+            />
+          </svg>
+        )}
+        <div className="flex flex-col">
+          <p className="font-semibold">
+            {messageReceived ? "Incoming call" : "Outgoing call"}
+          </p>
+          <div className="flex items-center gap-[.5rem]">
+            {messageReceived ? (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 24 24"
+                className="w-[2rem] h-[2rem]"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M6 18L18 6M6 8v10h10"
+                  className={`fill-transparent stroke-avatar-check ${
+                    callDetails.callRejectReason && "!stroke-danger"
+                  }`}
+                />
+              </svg>
+            ) : (
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                preserveAspectRatio="xMidYMid meet"
+                viewBox="0 0 24 24"
+                className="w-[2rem] h-[2rem]"
+              >
+                <path
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M18 6L6 18M8 6h10v10"
+                  className={`fill-transparent stroke-avatar-check ${
+                    callDetails.callRejectReason && "!stroke-danger"
+                  }`}
+                />
+              </svg>
+            )}
+            <p className={`text-[1.4rem]`}>
+              {callDetails.callDuration
+                ? callDetails.callDuration
+                : callDetails.callRejectReason}
+            </p>
+          </div>
+        </div>
+      </div>
+      <MessageReadStatus
+        readStatus={readStatus}
+        deliveredStatus={deliveredStatus}
+        messageReceived={messageReceived}
+        time={time}
+        className="self-end translate-y-[1rem]"
+      />
+    </div>
+  );
+}
+
+export default CallMessage;

client/src/components/pages/Chat/ChatHeader.jsx

@@ -0,0 +1,119 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import useChat from "../../../hooks/useChat";
+import useTime from "../../../hooks/useTime";
+import { chatActions } from "../../../store/chatSlice";
+import { modalActions } from "../../../store/modalSlice";
+import { userProfileActions } from "../../../store/userProfileSlice";
+import Header from "../../globals/Header";
+import IconWrapper from "../../globals/IconWrapper";
+import Image from "../../globals/Image";
+import ActionsModal from "./ActionsModal";
+
+function ChatHeader({ chatProfile, className }) {
+  const dispatch = useDispatch();
+  const chatActive = useSelector((state) => state.chatReducer.active);
+  const lastSeenTime = useTime(chatProfile?.status?.lastSeen);
+
+  return (
+    <Header
+      className={`flex items-center px-[2rem] bg-primary border-x border-border shrink-0 z-10 ${className}`}
+    >
+      <div className="flex items-center flex-grow">
+        <IconWrapper
+          id="chatActiveToggler"
+          onClick={() => {
+            if (chatActive) {
+              dispatch(chatActions.setChatUnactive());
+            } else {
+              dispatch(chatActions.setChatActive());
+            }
+          }}
+          className="chatArrow lg:flex mr-[2rem] hidden"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 24 24"
+            className={`${!chatActive && "rotate-180"}`}
+          >
+            <path
+              fill="currentColor"
+              d="M19 11H7.14l3.63-4.36a1 1 0 1 0-1.54-1.28l-5 6a1.19 1.19 0 0 0-.09.15c0 .05 0 .08-.07.13A1 1 0 0 0 4 12a1 1 0 0 0 .07.36c0 .05 0 .08.07.13a1.19 1.19 0 0 0 .09.15l5 6A1 1 0 0 0 10 19a1 1 0 0 0 .64-.23a1 1 0 0 0 .13-1.41L7.14 13H19a1 1 0 0 0 0-2Z"
+              className="stroke-transparent"
+            />
+          </svg>
+        </IconWrapper>
+        {/*  */}
+        <div
+          onClick={(event) => {
+            if (window.innerWidth <= 1000) {
+              if (chatActive) {
+                event.stopPropagation();
+
+                dispatch(userProfileActions.showProfile());
+              }
+            } else {
+              dispatch(userProfileActions.showProfile());
+            }
+          }}
+          className="flex-grow flex items-center  gap-[1.5rem] cursor-pointer"
+        >
+          <Image
+            src={chatProfile.avatar}
+            alt={chatProfile.name || chatProfile.username}
+            className="w-[4.2rem] h-[4.2rem] rounded-full"
+          />
+          <div className="flex flex-col">
+            <h2 className="font-semibold">
+              {chatProfile.name || chatProfile.username}
+            </h2>
+            {chatProfile.mode && (
+              <span className="text-cta-icon italic text-[1.4rem] font-normal -translate-y-[.4rem]">
+                {chatProfile.mode} {chatProfile.mode === "recording" && "audio"}
+                ...
+              </span>
+            )}
+            {!chatProfile.mode && (
+              <span className="text-secondary text-[1.4rem] font-normal -translate-y-[.4rem]">
+                {chatProfile.status?.online
+                  ? "online"
+                  : `last seen at ${lastSeenTime}`}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <IconWrapper
+        onClick={() => {
+          dispatch(
+            modalActions.openModal({
+              type: "actionsModal",
+              positions: { top: 60, right: 30 },
+            })
+          );
+        }}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 24 24"
+          className="shrink-0"
+        >
+          <path
+            fill="currentColor"
+            d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0zm0-6a2 2 0 1 0 4 0a2 2 0 0 0-4 0zm0 12a2 2 0 1 0 4 0a2 2 0 0 0-4 0z"
+            className="!stroke-transparent"
+          />
+        </svg>
+      </IconWrapper>
+      <ActionsModal chatProfile={chatProfile} />
+    </Header>
+  );
+}
+
+export default ChatHeader;

client/src/components/pages/Chat/DayMessages.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import ReceivedMessage from "./ReceivedMessage";
+import SentMessage from "./SentMessage";
+
+function DayMessages({ messagesData }) {
+  const userId = useSelector((state) => state.userReducer.user._id);
+  const [day, setDay] = useState();
+
+  useEffect(() => {
+    const currentDay = new Date(Date.now()).toLocaleString("en-US", {
+      month: "long",
+      day: "2-digit",
+      year: "numeric",
+    });
+
+    const messageDay = new Date(messagesData.day).toLocaleString("en-US", {
+      month: "long",
+      day: "2-digit",
+      year: "numeric",
+    });
+
+    let outputDayString = "";
+
+    // Show Today if current day and message day is the same
+    if (messageDay === currentDay) {
+      outputDayString = "Today";
+    } else {
+      outputDayString = messageDay.split(",")[0];
+    }
+
+    setDay(outputDayString);
+  }, []);
+
+  return (
+    <div className="">
+      <p className="mx-auto w-fit py-[.2rem] px-[1rem] bg-message-highlight rounded-full my-[.5rem] font-semibold text-white">
+        {day}
+      </p>
+      <div className="flex flex-col items-start gap-[.5rem]">
+        {messagesData.messages.map((message) => (
+          <React.Fragment key={message._id}>
+            {message.sender !== userId ? (
+              <ReceivedMessage message={message} />
+            ) : (
+              <SentMessage message={message} />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default DayMessages;

client/src/components/pages/Chat/EmojiModal.jsx

@@ -0,0 +1,39 @@
+import EmojiPicker from "emoji-picker-react";
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+function EmojiModal({ emojiVisible, setEmojiVisible, addEmojiToMessage }) {
+  const handleMouseMovement = (event) => {
+    event.currentTarget.addEventListener("mouseleave", () => {
+      setEmojiVisible(false);
+    });
+  };
+
+  return (
+    <AnimatePresence>
+      {emojiVisible && (
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          exit={{ scale: 0 }}
+          className={`absolute bottom-[9rem] left-0 w-[40rem]  origin-bottom-left sm:static sm:origin-bottom mt-[.5rem] sm:!scale-100 sm:!duration-[1000ms] sm:w-full ${
+            !emojiVisible ? "sm:scale-y-0" : "sm:scale-y-100"
+          }`}
+          id="emojiPicker"
+          onMouseEnter={handleMouseMovement}
+        >
+          <EmojiPicker
+            width="100%"
+            lazyLoadEmojis={true}
+            // onEmojiClick={(emoji, getImageUrl) =>
+            //   setTimeout(() => addEmojiToMessage(emoji, getImageUrl), 100)
+            // }
+            onEmojiClick={addEmojiToMessage}
+          />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default EmojiModal;

client/src/components/pages/Chat/Message.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import CallMessage from "./CallMessage";
+import MessageReadStatus from "./MessageReadStatus";
+import VoiceMessage from "./VoiceMessage";
+import Image from "../../globals/Image";
+
+function Message({ messageData, className, messageReceived }) {
+  // Image messages
+  if (messageData.messageType === "image") {
+    return (
+      <div className="w-[30rem] rounded-3xl overflow-hidden h-[34rem] relative">
+        <Image
+          className="w-full h-full object-cover"
+          src={messageData.imageUrl}
+          alt=""
+        />
+        <MessageReadStatus
+          readStatus={messageData.readStatus}
+          deliveredStatus={messageData.deliveredStatus}
+          messageReceived={messageReceived}
+          time={messageData.timeSent}
+          className="absolute bottom-[1rem] right-[1rem] bg-secondary-light-text rounded-full !text-white"
+        />
+      </div>
+    );
+  }
+
+  if (messageData.messageType === "voice")
+    return (
+      <VoiceMessage
+        deliveredStatus={messageData.deliveredStatus}
+        messageReceived={messageReceived}
+        voiceDuration={messageData.voiceNoteDuration}
+        voiceNoteUrl={messageData.voiceNoteUrl}
+        readStatus={messageData.readStatus}
+        time={messageData.timeSent}
+      />
+    );
+
+  if (messageData.messageType === "call")
+    //   Calls
+    return (
+      <CallMessage
+        callDetails={messageData.callDetails}
+        messageReceived={messageReceived}
+        deliveredStatus={messageData.deliveredStatus}
+        readStatus={messageData.readStatus}
+        time={messageData.timeSent}
+      />
+    );
+
+  // if it's a text message
+  return (
+    <div
+      className={`${className} p-[1.5rem] rounded-3xl sm:text-[1.4rem] overflow-hidden gap-[1rem] relative`}
+    >
+      <div
+        dangerouslySetInnerHTML={{ __html: messageData.message }}
+        className="font-semibold max-w-[25rem] mr-[3.5rem] break-words"
+      ></div>
+      <MessageReadStatus
+        readStatus={messageData.readStatus}
+        deliveredStatus={messageData.deliveredStatus}
+        messageReceived={messageReceived}
+        time={messageData.timeSent}
+        className={`absolute right-[.8rem] bottom-[.5rem] ${
+          messageData.deliveredStatus && "!text-secondary"
+        }`}
+      />
+    </div>
+  );
+}
+
+export default Message;