CHAT WINDOW, ADDING EMOJI'S TO THE MESSAGES

 TO DISPLAY THE MESSAGES, WE CREATED A CHAT WINDOW THAT WILL BE DISPLAYED WHEN CLICKED ON THE CHAT ICON (FORUM ICON FROM MATERIAL UI).

THE CHAT WINDOW CONSISTS OF A TEXT FIELD, A SEND ICON AN EMOJI ICON AND A CHAT BOX TO DISPLAY THE MESSAGES.

TO ADD EMOJI'S

  const [showEmoji, setShowEmoji] = useState(false);

WE USE NPM PACKAGE EMOJI-PICKER

import EmojiPicker from "emoji-picker-react";

TO INSTALL : npm install emoji-picker-react

TO DISPLAY THE EMOJI BOX WE USE THE EMOJI ICON  , SUCH THAT WHEN CLICKED ON IT , AN EMOJI BOX CONSISTING OF EMOJIS POP'S UP.

 <div className={styles.chatIcons}>
                    <IconButton onClick={() => setShowEmoji(!showEmoji)}>
                      <MoodOutlinedIcon
                        style={{ color: "white", fontSize: "2rem" }}
                      />
                    </IconButton>
                    {showEmoji && (
                      <div className={styles.emojiContainer}>
                        <EmojiPicker
                          style={{ height: "50vh" }}
                          onEmojiClick={(emojiData) =>
                            setMessage((prev) => prev + emojiData.emoji)
                          }
                        />
                      </div>
                    )}


CHAT BOX

STYLING

IN VC.MODULE.CSS

.Icons {
  bottom: 0;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 10;
  background-color: rgb(30, 29, 29);
}

.chatBox {
  color: whitesmoke;
  position: absolute;
  height: 60vh;
  width: 60vh;
  background-color: #1d1c1c;
  right: 0;
  bottom: 0;
  padding: 1rem;
  margin-bottom: 2.7rem;
  border-radius: 10px;
  margin-right: 1.2rem;
}
.chatMessage {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  width: 93%;
  margin-bottom: 10px;
  color: white;
}

.chatIcons .MuiSvgIcon-root {
  position: relative;
  right: 0;
}
.chatIcons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.epr-main {
  height: 12px;
  width: 23px;
}
.emojiContainer {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-bottom: 5rem;
}
.showChats {
  height: 46vh;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overflow-x: hidden;
  position: relative;
  scrollbar-gutter: stable;
}

.chatBox p {
  margin: auto;
}
.sentChat {
  align-self: flex-end;
  background: #848181;
  max-width: 150px;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 5px;
  margin-right: 10px;
  word-break: break-word;
  color: black;
}
.receivedChat {
  align-self: flex-start;
  background-color: rgb(218 217 226);
  max-width: 150px;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 5px;
  word-break: break-word;
  color: black;
}






{showChat ? (
              <div className={styles.chatBox}>
                <h2
                  style={{
                    fontFamily: "Josefin Sans",
                    color: "#4035351",
                    fontSize: "2rem",
                    marginTop: "1rem",
                    marginBottom: "0",
                  }}
                >
                  Chat
                </h2>
                <div className={styles.showChats}>
                  {messages.length > 0 ? (
                    messages.map((msg, index) => {
                      return (
                        <>
SENDER
                          {msg.sender === username ? (
                            <div key={index} className={styles.sentChat}>
                              <p style={{ fontWeight: "bolder" }}>YOU</p>
                              <p>{msg.data}</p>
                            </div>
                          ) : (
RECEIVED CHAT
                            <div key={index} className={styles.receivedChat}>
                              <p style={{ fontWeight: "bolder" }}>
                                {msg.sender.toUpperCase()}
                              </p>
                              <p>{msg.data}</p>
                            </div>
                          )}
                          <div ref={bottomRef}></div>
                        </>
                      );
                    })
                  ) : (
                    <>
                      <p>No messages yet!</p>
                    </>
                  )}
                </div>
                <div className={styles.chatMessage}>
                  <TextField
                    sx={{
                      backgroundColor: "#1e1e1e",
                      borderRadius: "8px",
                      input: {
                        color: "#ffffff",
                      },
                      label: {
                        color: "#ffffff",
                      },
                      "&:hover": {
                        backgroundColor: "#121212",
                      },
                      "& label.Mui-focused": {
                        color: "#ffffff",
                      },
                      "& .MuiOutlinedInput-root": {
                        "& fieldset": {
                          borderColor: "#ffffff",
                        },
                        "&:hover fieldset": {
                          borderColor: "#ffffff",
                        },
                        "&.Mui-focused fieldset": {
                          borderColor: "#ffffff",
                        },
                      },
                    }}
                    fullWidth
                    value={message}
                    label="Enter Message"
                    variant="outlined"
                    onChange={(e) => setMessage(e.target.value)}
                  />
                  <div className={styles.chatIcons}>
                    <IconButton onClick={() => setShowEmoji(!showEmoji)}>
                      <MoodOutlinedIcon
                        style={{ color: "white", fontSize: "2rem" }}
                      />
                    </IconButton>
TO ADD EMOJI'S
                    {showEmoji && (
                      <div className={styles.emojiContainer}>
                        <EmojiPicker
                          style={{ height: "50vh" }}
                          onEmojiClick={(emojiData) =>
                            setMessage((prev) => prev + emojiData.emoji)
                          }
                        />
                      </div>
                    )}
                    <SendRoundedIcon
                      sx={{
                        fontSize: "2rem",
                        "&:hover": {
                          opacity: "0.5",
                          cursor: "pointer",
                        },
                      }}
                      onClick={sendMessage}
                    />
                  </div>
                </div>
              </div>
            ) : (
              <></>
            )}




















Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more