Dynamic Chat App with Randomized Replies using ReactJS

In my recent job switch, the interviewer asked me to build a Dynamic Chat App with Randomized Replies using ReactJS.

Requirements that the interviewer shared:

Users should be able to send and receive messages in real time without needing to refresh the page.
Messages should be displayed instantly upon submission.
Provide a text input field where users can type their messages.
Implement a bot feature that generates randomized replies to user messages.
Display user messages on the right side of the chat interface.
Show bot replies on the left side of the chat interface.
Clearly distinguish between user and bot messages using different visual styles or colors (Not mandatory).

Generating Random message:

Let’s take an array of messages, based on a random number let’s pick the message from the array. Below is an implementation.

const generateRandomReply = () => {
    const replies = [
      "Hello!",
      "How can I assist you?",
      "Nice to meet you!",
      "Have a great day!",
      "Subscribe to Rowdy Coders!"
    ];
    const randomIndex = Math.floor(Math.random() * replies.length);
    return Promise.resolve(replies[randomIndex]);
  };

Let’s create the main component with an input box,

// ChatApp.js
import React, { useState } from "react";
import "./ChatApp.css";

const ChatApp = () => {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState("");

  const handleMessageSend = () => {
    if (inputValue.trim() !== "") {
      const newMessage = { text: inputValue, sender: "user" };
      generateRandomReply().then((reply) => {
        const newReply = { text: reply, sender: "bot" };
        setMessages([...messages, newMessage, newReply]);
      });
      setInputValue("");
    }
  };

  const generateRandomReply = () => {
    const replies = [
      "Hello!",
      "How can I assist you?",
      "Nice to meet you!",
      "Have a great day!",
      "Subscribe to Rowdy Coders!",
    ];
    const randomIndex = Math.floor(Math.random() * replies.length);
    return Promise.resolve(replies[randomIndex]);
  };

  return (
    <div className="chat-container">
      <div className="chat-messages">
        {messages.map((message, index) => (
          <div key={index} className={`message-container ${message.sender}`}>
            <div className="message">{message.text}</div>
          </div>
        ))}
      </div>
      <div className="chat-input">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Type your message..."
        />
        <button onClick={handleMessageSend}>Send</button>
      </div>
    </div>
  );
};

export default ChatApp;

To make it look good, it is very much important to style this properly. this is not the mandatory feature that the interviewer expects, but if you are able to achieve this within the time frame then it will be a plus point definitely.

/* ChatApp.css */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.user-message {
  background-color: #d3d3d3;
  align-self: flex-start;
}

.bot-message {
  background-color: #f0f0f0;
  align-self: flex-end;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
}

.chat-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.chat-input button {
  padding: 8px 16px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #0056b3;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.message-container {
  display: flex;
  justify-content: flex-end;
}

.user {
  justify-content: flex-end;
}

.bot {
  justify-content: flex-start;
}

.message {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
}

.user .message {
  background-color: #007bff;
  color: #fff;
}

.bot .message {
  background-color: #f0f0f0;
}

Understanding the Code

ChatApp Component: Manages the state of messages and user input. When the user sends a message, it adds the user’s message and a random reply from the bot to the messages array.
Message Display: Messages are displayed in a scrollable container, with user messages aligned to the right and bot messages aligned to the left.
Message Sending: User input is captured via an input field. Upon clicking the “Send” button, the message is sent, and the input field is cleared.
Random Replies: The generateRandomReply the function selects a random reply from a predefined array of messages, simulating the behaviour of a chatbot.

By using this code, you would be able to create the Chat App that looks some thing like below.