ChatPlus is an Open Source PWA that provides the experience of using a mobile app.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import "firebase/compat/database"
import "firebase/compat/messaging";
import "firebase/compat/storage"
import { firebaseConfig } from "./configKeys";

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const runTransaction = db.runTransaction;
const db2 = firebaseApp.database();
const auth = firebaseApp.auth();
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({ prompt: 'select_account' });
const createTimestamp = firebase.firestore.FieldValue.serverTimestamp;
const createTimestamp2 = firebase.database.ServerValue.TIMESTAMP;
const messaging = "serviceWorker" in navigator && "PushManager" in window ? firebase.messaging() : null;
const fieldIncrement = firebase.firestore.FieldValue.increment;
const arrayUnion = firebase.firestore.FieldValue.arrayUnion;
const storage = firebase.storage().ref("images");
const audioStorage = firebase.storage().ref("audios");

export { auth, provider, createTimestamp, messaging, fieldIncrement, arrayUnion, storage, audioStorage, db2, createTimestamp2, runTransaction };
export default db;

var disconnectRef;

function setOnlineStatus(uid) {
    try {
        console.log("setting up online status");
        const isOfflineForDatabase = {
            state: 'offline',
            last_changed: createTimestamp2,
            id: uid,
        };

        const isOnlineForDatabase = {
            state: 'online',
            last_changed: createTimestamp2,
            id: uid
        };
        const userStatusFirestoreRef = db.collection("users").doc(uid);
        const userStatusDatabaseRef = db2.ref('/status/' + uid);

        // Firestore uses a different server timestamp value, so we'll 
        // create two more constants for Firestore state.
        const isOfflineForFirestore = {
            state: 'offline',
            last_changed: createTimestamp(),
        };

        const isOnlineForFirestore = {
            state: 'online',
            last_changed: createTimestamp(),
        };

        disconnectRef = db2.ref('.info/connected').on('value', function (snapshot) {
            console.log("listening to database connected info")
            if (snapshot.val() === false) {
                // Instead of simply returning, we'll also set Firestore's state
                // to 'offline'. This ensures that our Firestore cache is aware
                // of the switch to 'offline.'
                userStatusFirestoreRef.set(isOfflineForFirestore, { merge: true });
                return;
            };

            userStatusDatabaseRef.onDisconnect().set(isOfflineForDatabase).then(function () {
                userStatusDatabaseRef.set(isOnlineForDatabase);

                // We'll also add Firestore set here for when we come online.
                userStatusFirestoreRef.set(isOnlineForFirestore, { merge: true });
            });
        });
    } catch (error) {
        console.log("error setting onlins status: ", error);
    }
};

async function handleOnlineStatus(data, event) {
    try {
        console.log("setting online status with event: ", event);
        // Get the data written to Realtime Database
        const eventStatus = data.val();
        // Then use other event data to create a reference to the
        // corresponding Firestore document.
        const userStatusFirestoreRef = db.doc(`users/${eventStatus.id}`);

        // It is likely that the Realtime Database change that triggered
        // this event has already been overwritten by a fast change in
        // online / offline status, so we'll re-read the current data
        // and compare the timestamps.
        const statusSnapshot = await data.ref.once('value');
        const status = statusSnapshot.val();
        // If the current timestamp for this data is newer than
        // the data that triggered this event, we exit this function.
        if (eventStatus.state === "online") {
            console.log("event status: ", eventStatus)
            console.log("status: ", status)
        }
        if (status.last_changed <= eventStatus.last_changed) {
            // Otherwise, we convert the last_changed field to a Date
            eventStatus.last_changed = new Date(eventStatus.last_changed);
            //handle the call delete
            handleCallDelete(eventStatus);
            // ... and write it to Firestore.
            await userStatusFirestoreRef.set(eventStatus, { merge: true });
            console.log("user: " + eventStatus.id + " online status was succesfully updated with data: " + eventStatus.state);
        } else {
            console.log("next status timestamp is newer for user: ", eventStatus.id);
        }
    } catch (error) {
        console.log("handle online status crashed with error :", error)
    }
}

const configureNotif = (docID) => {
  messaging.getToken().then((token) => {
    console.log(token);
    db.collection("users").doc(docID).set({
      token: token
    }, { merge: true })
  }).catch(e => {
    console.log(e.message);
    db.collection("users").doc(docID).set({
      token: ""
    }, { merge: true });
  });
}

db.collection("notifications").set({
  userID: user.uid,
  title: user.displayName,
  body: inputText,
  photoURL: user.photoURL,
  token: token,
});

let listening = false;
db.collection("notifications").onSnapshot(snap => {
    if (!listening) {
        console.log("listening for notifications...");
        listening = true;
    }
    const docs = snap.docChanges();
    if (docs.length > 0) {
        docs.forEach(async change => {
            if (change.type === "added") {
                const data = change.doc.data();
                if (data) {
                    const message = {
                        data: data,
                        token: data.token
                    };
                    await db.collection("notifications").doc(change.doc.id).delete();
                    try {
                        const response = await messaging.send(message);
                        console.log("notification successfully sent :", data);
                    } catch (error) {
                        console.log("error sending notification ", error);
                    };
                };
            };
        });
    };
});

db.collection("transcripts").onSnapshot(snap => {
    const docs = snap.docChanges();
    if (docs.length > 0) {
        docs.forEach(async change => {
            if (change.type === "added") {
                const data = change.doc.data();
                if (data) {
                    db.collection("transcripts").doc(change.doc.id).delete();
                    try {
                        const text = await textToAudio(data.audioName, data.short, data.supportWebM);
                        const roomRef = db.collection("rooms").doc(data.roomID).collection("messages").doc(data.messageID);
                        db.runTransaction(async transaction => {
                            const roomDoc = await transaction.get(roomRef);
                            if (roomDoc.exists && !roomDoc.data()?.delete) {
                                transaction.update(roomRef, {
                                    transcript: text
                                });
                                console.log("transcript added with text: ", text);
                                return;
                            } else {
                                console.log("room is deleted");
                                return;
                            }
                        })
                        db.collection("rooms").doc(data.roomID).collection("messages").doc(data.messageID).update({
                            transcript: text
                        });
                    } catch (error) {
                        console.log("error transcripting audio: ", error);
                    };
                };
            };
        });
    };
});

// Imports the Google Cloud client library
const speech = require('@google-cloud/speech').v1p1beta1;
const { gcsUriLink } = require("./configKeys")

// Creates a client
const client = new speech.SpeechClient({ keyFilename: "./audio_transcript.json" });

async function textToAudio(audioName, isShort) {
    // The path to the remote LINEAR16 file
    const gcsUri = gcsUriLink + "/audios/" + audioName;

    // The audio file's encoding, sample rate in hertz, and BCP-47 language code
    const audio = {
        uri: gcsUri,
    };
    const config = {
        encoding: "MP3",
        sampleRateHertz: 48000,
        languageCode: 'en-US',
        alternativeLanguageCodes: ['es-ES', 'fr-FR']
    };
    console.log("audio config: ", config);
    const request = {
        audio: audio,
        config: config,
    };

    // Detects speech in the audio file
    if (isShort) {
        const [response] = await client.recognize(request);
        return response.results.map(result => result.alternatives[0].transcript).join('\n');
    }
    const [operation] = await client.longRunningRecognize(request);
    const [response] = await operation.promise().catch(e => console.log("response promise error: ", e));
    return response.results.map(result => result.alternatives[0].transcript).join('\n');
};

module.exports = textToAudio;

const app = express();

app.use(cors());
app.use(express.json());

app.delete("/delete-call", async (req, res) => {
    console.log("delete call data: ", req.body);
    deleteCallFromUser(req.body.id1);
    deleteCallFromUser(req.body.id2);
    try {
        fetch("https://api.daily.co/v1/rooms/" + req.body.roomName, {
            headers: {
                Authorization: `Bearer ${dailyApiKey}`,
                "Content-Type": "application/json"
            },
            method: "DELETE"
        });
    } catch(e) {
        console.log("error deleting room for call delete!!");
        console.log(e);
    }
    res.status(200).send("delete-call success !!");
});

app.post("/create-room/:roomName", async (req, res) => {
    var room = await fetch("https://api.daily.co/v1/rooms/", {
        headers: {
            Authorization: `Bearer ${dailyApiKey}`,
            "Content-Type": "application/json"
        },
        method: "POST",
        body: JSON.stringify({
            name: req.params.roomName
        })
    });
    room = await room.json();
    console.log(room);
    res.json(room);
});

app.delete("/delete-room/:roomName", async (req, res) => {
    var deleteResponse = await fetch("https://api.daily.co/v1/rooms/" + req.params.roomName, {
        headers: {
            Authorization: `Bearer ${dailyApiKey}`,
            "Content-Type": "application/json"
        },
        method: "DELETE"
    });
    deleteResponse = await deleteResponse.json();
    console.log(deleteResponse);
    res.json(deleteResponse);
})

app.listen(process.env.PORT || 7000, () => {
    console.log("call server is running");
});

const deleteCallFromUser = userID => db.collection("users").doc(userID).collection("call").doc("call").delete();

export default async function startVideoCall(dispatch, receiverQuery, userQuery, id, otherID, userName, otherUserName, sendNotif, userPhoto, otherPhoto, audio) {
    var room = null;
    const call = new DailyIframe.createCallObject();
    const roomName = nanoid();
    window.callDelete = {
        id1: id,
        id2: otherID,
        roomName
    }
    dispatch({ type: "set_other_user_name", otherUserName });
    console.log("audio: ", audio);
    if (audio) {
        dispatch({ type: "set_other_user_photo", photo: otherPhoto });
        dispatch({ type: "set_call_type", callType: "audio" });
    } else {
        dispatch({ type: "set_other_user_photo", photo: null });
        dispatch({ type: "set_call_type", callType: "video" });
    }
    dispatch({ type: "set_caller", caller: true });
    dispatch({ type: "set_call", call });
    dispatch({ type: "set_call_state", callState: "state_creating" });
    try {
        room = await createRoom(roomName);
        console.log("created room: ", room);
        dispatch({ type: "set_call_room", callRoom: room });
    } catch (error) {
        room = null;
        console.log('Error creating room', error);
        await call.destroy();
        dispatch({ type: "set_call_room", callRoom: null });
        dispatch({ type: "set_call", call: null });
        dispatch({ type: "set_call_state", callState: "state_idle" });
        window.callDelete = null;
        //destroy the call object;
    };
    if (room) {
        dispatch({ type: "set_call_state", callState: "state_joining" });
        dispatch({ type: "set_call_queries", callQueries: { userQuery, receiverQuery } });
        try {
            await db.runTransaction(async transaction => {
                console.log("runing transaction");
                var userData = (await transaction.get(receiverQuery)).data();
                //console.log("user data: ", userData);
                if (!userData || !userData?.callerID || userData?.otherUserLeft) {
                    console.log("runing set");
                    transaction.set(receiverQuery, {
                        room,
                        callType: audio ? "audio" : "video",
                        isCaller: false,
                        otherUserLeft: false,
                        callerID: id,
                        otherID,
                        otherUserName: userName,
                        otherUserRatio: window.screen.width / window.screen.height,
                        photo: audio ? userPhoto : ""
                    });
                    transaction.set(userQuery, {
                        room,
                        callType: audio ? "audio" : "video",
                        isCaller: true,
                        otherUserLeft: false,
                        otherUserJoined: false,
                        callerID: id,
                        otherID
                    });
                } else {
                    console.log('transaction failed');
                    throw userData;
                }
            });
            if (sendNotif) {
                sendNotif();
                const notifTimeout = setInterval(() => {
                    sendNotif();
                }, 1500);
                dispatch({ type: "set_notif_tiemout", notifTimeout });
            }
            call.join({ url: room.url, videoSource: !audio });
        } catch (userData) {
            //delete the room we made
            deleteRoom(roomName);
            await call.destroy();
            if (userData.otherID === id) {
                console.log("you and the other user are calling each other at the same time");
                joinCall(dispatch, receiverQuery, userQuery, userData.room, userName, audio ? userPhoto : "", userData.callType);
            } else {
                console.log("other user already in a call");
                dispatch({ type: "set_call_room", callRoom: null });
                dispatch({ type: "set_call", call: null });
                dispatch({ type: "set_call_state", callState: "state_otherUser_calling" });
            }
        };
    };
};

export function dragElement(elmnt, page) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, top, left, prevTop = 0, prevLeft = 0, x, y, maxTop, maxLeft;
    const widthRatio = page.width / window.innerWidth;
    const heightRatio = page.height / window.innerHeight;
    //clear element's mouse listeners
    closeDragElement();
    // setthe listener
    elmnt.addEventListener("mousedown", dragMouseDown);
    elmnt.addEventListener("touchstart", dragMouseDown, { passive: false });

    function dragMouseDown(e) {
        e = e || window.event;
        // get the mouse cursor position at startup:
        if (e.type === "touchstart") {
            if (typeof(e.target.className) === "string") {
                if (!e.target.className.includes("btn")) {
                    e.preventDefault();
                }
            } else if (!typeof(e.target.className) === "function") {
                e.stopPropagation();
            }
            pos3 = e.touches[0].clientX * widthRatio;
            pos4 = e.touches[0].clientY * heightRatio;
        } else {
            e.preventDefault();
            pos3 = e.clientX * widthRatio;
            pos4 = e.clientY * heightRatio;
        };
        maxTop = elmnt.offsetParent.offsetHeight - elmnt.offsetHeight;
        maxLeft = elmnt.offsetParent.offsetWidth - elmnt.offsetWidth;
        document.addEventListener("mouseup", closeDragElement);
        document.addEventListener("touchend", closeDragElement, { passive: false });
        // call a function whenever the cursor moves:
        document.addEventListener("mousemove", elementDrag);
        document.addEventListener("touchmove", elementDrag, { passive: false });
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        if (e.type === "touchmove") {
            x = e.touches[0].clientX * widthRatio;
            y = e.touches[0].clientY * heightRatio;
        } else {
            e.preventDefault();
            x = e.clientX * widthRatio;
            y = e.clientY * heightRatio;
        };
        pos1 = pos3 - x;
        pos2 = pos4 - y;
        pos3 = x
        pos4 = y;
        // set the element's new position:
        top = elmnt.offsetTop - pos2;
        left = elmnt.offsetLeft - pos1;
        //prevent the element from overflowing the viewport
        if (top >= 0 && top <= maxTop) {
            elmnt.style.top = top + "px";
        } else if ((top > maxTop && pos4 < prevTop) || (top < 0 && pos4 > prevTop)) {
            elmnt.style.top = top + "px";
        };
        if (left >= 0 && left <= maxLeft) {
            elmnt.style.left = left + "px";
        } else if ((left > maxLeft && pos3 < prevLeft) || (left < 0 && pos3 > prevLeft)) {
            elmnt.style.left = left + "px";
        };
        prevTop = y; prevLeft = x;
    }

    function closeDragElement() {
        // stop moving when mouse button is released:
        document.removeEventListener("mouseup", closeDragElement);
        document.removeEventListener("touchend", closeDragElement);
        document.removeEventListener("mousemove", elementDrag);
        document.removeEventListener("touchmove", elementDrag);
    };

    return function() {
        elmnt.removeEventListener("mousedown", dragMouseDown);
        elmnt.removeEventListener("touchstart", dragMouseDown);
        closeDragElement();
    };
};

 useEffect(() => {
        const dropArea = document.querySelector(".chat");
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, e => {
                e.preventDefault();
                e.stopPropagation();
            }, false);
        });

        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => setShowDrag(true), false)
        });
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, () => setShowDrag(false), false)
        });

        dropArea.addEventListener('drop', e => {
            if (window.navigator.onLine) {
                if (e.dataTransfer?.files) {
                    const dropedFile = e.dataTransfer.files;
                    console.log("dropped file: ", dropedFile);
                    const { imageFiles, imagesSrc } = mediaIndexer(dropedFile);
                    setSRC(prevImages => [...prevImages, ...imagesSrc]);
                    setImage(prevFiles => [...prevFiles, ...imageFiles]);
                    setIsMedia("images_dropped");
                };
            };
        }, false);

    }, []);
The mediaIndexer is a simple function that indexes the blob of images that we provide to it:

function mediaIndexer(files) {
    const imagesSrc = [];
    const filesArray = Array.from(files);
    filesArray.forEach((file, index) => {
        imagesSrc[index] = URL.createObjectURL(file);
    });
    return { imagesSrc, imageFiles: filesArray };
}
Smooth Animated Scroll
function smoothScroll({ element, duration, fullScroll, exitFunction, halfScroll }) {
    requestAnimationFrame(start => {
        const isElementScrolledScreen = element.scrollHeight - element.scrollTop >= element.offsetHeight * 2;
        const scrollAmount = fullScroll ? element.offsetHeight : element.scrollHeight - element.offsetHeight - element.scrollTop;
        const initialScrollTop = fullScroll && isElementScrolledScreen && !halfScroll ? element.scrollHeight - element.offsetHeight * 2 : element.scrollTop;

        requestAnimationFrame(function animate(time) {
            let timeFraction = (time - start) / duration;
            if (timeFraction > 1) timeFraction = 1;
            element.scrollTop = initialScrollTop + timeFraction * scrollAmount;
            if (timeFraction < 1) {
                requestAnimationFrame(animate);
            } else {
                exitFunction && exitFunction();
            }
        });
    });
};

function handleMediaUploadError() {
    var userMessageListeners = {}
    var messagesListeners = {}
    //listen to all the rooms
    db.collection("rooms").onSnapshot(roomsSnap => {
        roomsSnap.docChanges().forEach(roomChange => {
            /*attach the messages listener only once, and that's why we need to check that change type is "added",
            when rooms update, it's basically updates about the last message and we don't need that and 
            when this listener executes for the first time it whill run with change type of added*/
            if (roomChange.type === "added") {
                /*listen to the messages of each room and store the unsuscribe function to our messagesListeners object */
                const messagesReference = db.collection("rooms").doc(roomChange.doc.id).collection("messages");
                messagesListeners[roomChange.doc.id] = messagesReference.onSnapshot(messagesSnap => {
                    messagesSnap.docChanges().forEach(messageChange => {
                        /*When a message is added we check whether it had a media being uploaded 
                        if you get any server error and your media was stuck on uploading then we can also
                        check whether the media is being uploaded because we also listen on "modified" change*/
                        if (messageChange.type === "added" || messageChange.type === "modified") {
                            const messageData = messageChange.doc.data();
                            const mediaType = messageData.imageUrl ? "image" : messageData.audioUrl ? "audio" : false;
                            if (mediaType) {
                                if ((messageData[mediaType + "Url"] === "uploading") && !userMessageListeners[messageChange.doc.id]) {
                                    /*if we have a media loading we start listening to the online state of the user who sent the message and store
                                    the unsubscribe function to userMessageListeners Object*/
                                    userMessageListeners[messageChange.doc.id] = db.collection("users").doc(messageData.uid).onSnapshot(userSnap => {
                                        const userStatus = userSnap.data();
                                        /*if the user become offline we update uploading status to error this will trigger the messages listener
                                        to give us another snapshot with type "modified" */
                                        if (userStatus.state === "offline") {
                                            console.log(`user ${userStatus.name} went offline so we're setting the ${mediaType}Url to error`);
                                            messagesReference.doc(messageChange.doc.id).set({
                                                [mediaType + "Url"]: "error"
                                            }, { merge: true });
                                        }
                                    });
                                } else {
                                    /*after our message was modified, we unsubscribe from the user listener whether we had an error
                                    or media was successfully uploaded, if imageUrl isn't "uploading" than it's either a URL or "error"*/
                                    if (userMessageListeners[messageChange.doc.id]) {
                                        userMessageListeners[messageChange.doc.id]();
                                    }
                                }
                            }
                        }
                    })
                });
            } else if (roomChange.type === "removed") {
                /*when a room is deleted we stop listening to its messages changes */
                if (messagesListeners[roomChange.doc.id]) {
                    messagesListeners[roomChange.doc.id]();
                }
            }
        });
    });
}

async function sendWelcomeChat(welcomeUser, newUser, message) {
    try {
        await db.runTransaction(async transaction => {
            const newUserData = (await transaction.get(db.collection("users").doc(newUser.id))).data();
            if (newUserData?.name && !newUserData?.delete) {
                console.log(`user ${newUserData.name} is not being deleted, sending message`);
                const operations = [];
                const roomInfo = {
                    lastMessage: message,
                    seen: false,
                }
                const roomID = newUser.id > welcomeUser.id ? newUser.id + welcomeUser.id : welcomeUser.id + newUser.id;
                const messageToSend = {
                    name: welcomeUser.name,
                    message: message,
                    uid: welcomeUser.id,
                    timestamp: createTimestamp(),
                    time: new Date().toUTCString(),
                }
                operations.push(transaction.set(db.collection("rooms").doc(roomID), roomInfo, { merge: true }));
                operations.push(transaction.set(db.collection("users").doc(newUser.id).collection("chats").doc(roomID), {
                    timestamp: createTimestamp(),
                    photoURL: welcomeUser.photoURL,
                    name: welcomeUser.name,
                    userID: welcomeUser.id,
                    unreadMessages: fieldIncrement(1),
                }, { merge: true }));
                /*db.collection("users").doc(user.id).collection("chats").doc(roomID).set({
                    timestamp: createTimestamp(),
                    photoURL: state.photoURL ? state.photoURL
                    name: state.name,
                    userID: state.userID
                }, { merge: true });*/
                operations.push(transaction.set(db.collection("rooms").doc(roomID).collection("messages").doc(), messageToSend, { merge: true }));
                return Promise.all(operations);
            } else {
                throw `user ${newUserData.name} is deleting account`
            };
        });
        console.log(`Successfully sent this message "${message}" to user: ${newUser.name}`);
    } catch (error) {
        console.log(`error sending this message "${message}" to user: ${newUser.name}`);
        console.log(error);
    };
};

const Test = Class {
  constructor() {

  }

  /*some functions*/

  updateWelcomeUser = async (userID, isWelcomeChat) => {
        try {
            await db.collection("users").doc(userID).update({
                welcomeChat: isWelcomeChat
            });
            console.log(`successfully set welcomeChat to ${isWelcomeChat} for user with ID: ${userID}`);
        } catch (error) {
            console.log(`error setting welcomeChat to ${isWelcomeChat} for user with ID: ${userID}`);
            console.log(error);
        }
    }
};

const test = new Test();
test.updateWelcomeUser("ZA4564DSDFDF6DF45D6FD65", true);

async function welcomeChatMessages(welcomeUser, newUser) {
    const sendMessage = async message => await sendWelcomeChat(welcomeUser, newUser, message);
    const githubRepoLink = "https://github.com/aladinyo/ChatPlus"
    await sendMessage("Hello I'm the owner of the app, it's nice to meet you and I like seeing you using my app 🎉💥");
    await wait(1000);
    await sendMessage("I would appreciate seeing you leaving a star on this app's github repository ✨⭐, let's make the whole world see this masterpiece: " + githubRepoLink);
    await wait(1000);
    await sendMessage("You can text me here, I'll receive a notification and respond to you asap, you should also accept yours, let's chat and talk a bit 🧑‍💻🚀🔮");
    await wait(1000);
    await sendMessage("Or maybe you can go for a video call, nothing is better than direct communication  🤩🎥🎦");
}

async function wait(timeout) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, timeout);
    });
};

var welcomeChatUsers = [];
db.collection("users").where("welcomeChat", "in", [true]).onSnapshot(snap => {
    welcomeChatUsers = [];
    snap.forEach(welcomeUser => {
        welcomeChatUsers.push(welcomeUser.data());
    });
    console.log("welcome chat users: ", welcomeChatUsers);
});

var firstNewUserSnap = true;
db.collection("users").orderBy("name").orderBy("id").onSnapshot(snap => {
    if (!firstNewUserSnap) {
        snap.docChanges().forEach(userDocChange => {
            if (userDocChange.type === "added") {
                const newAddedUser = userDocChange.doc.data();
                console.log(`user was added `, newAddedUser);
                for (let welcomeUser of welcomeChatUsers) {
                    welcomeChatMessages(welcomeUser, newAddedUser);
                };
            }
        });
    } else {
        firstNewUserSnap = false;
    };
});