React - Using CSS stylesheet with React

 CSS (Cascading Style Sheets) is a standard stylesheet language used to control visual presentation, layout and design of web pages. For an analoogy of this to get a better representation of CSS, we consider it in conjunction with HTML. While HTML will build the raw skeleton of the website (walls and beams etc), CSS acts as the interior designer, adding colors, fonts, spacing, formatting etc to the components of the website to make the website look more presentable and professional.

We work on below code.

React - Chatbot - Response from the bot 

Below title we had the following style tab.

<style>
   button {
	 background-color: green;
   } 
</style>

But with this piece of code, it will style all the SEND button tabs to green. To avoid this we give our Send button a className as below and use that same className orefixed with a dot in the stylesheet element.

<button
   onClick = {sendMessage}
   className="send-button"
>Send</button>

We then add additional properties to this .send-button stylesheet element. 

If we see this code on the browser -> inspect -> elements, we can see the BUTTON element having the HTMLclass="send-button".

<button class="send-button">Send</button>

We add additional properties to .send-button stylesheet element so that the final code will be as below

.send-button {
	 background-color: rgb(25,135,84);
	 color: white;
	 padding: 12px 20px;
	 margin-left: 10px;
	 border: none;
	 border-radius: 10px;
	 font-size:15px;
	 cursor : pointer;
} 

We now style the textbox for the input text messages. We give the input textbox a className.

<input placeholder="Send a message to chatbot" 
	 size="30"
	 onChange={saveInputText}
	 value={inputText}
	 className="chat-input"
/>

We now make the definition for this "chat-input" class in the CSS style tab below .send-button. We make the size of the textbox flexible i.e. - the textbox should automatically adjust to the size of the browser page. For this we use a CSS feature called flexbox.

Flexbox allows us to create a flexible layout. By layout we mean the positioning of the elements on the website. To use Flexbox we follow 3 steps

• Create a container around the elements that we need to position in the flexible layout. 
• Add display:flex property to the container stylesheet element.
• Use the features of flexbox for the container elements.

Using flexbox, we create a container for the messages textbox and Send button, called chat-input-container and we use the flex-grow property to set its value to 1.

We include chat input and Send buttons inside a div container element and give it the name chat-input-container

 <div className="chat-input-container"> 
  {/* using fragment to remove extra div elements */}
	 <input placeholder="Send a message to chatbot" 
	 size="30"
	 onChange={saveInputText}
	 value={inputText}
	 className="chat-input"
	 />
	 <button
	   onClick = {sendMessage}
	   className="send-button"
	 >Send</button>
 </div> 

The definition for the .chat-input-container stylesheet element and the modified definition of .chat-input are as below

.chat-input {
	  padding : 12px 15px;
	  border-radius : 10px;
	  border-width : 1px;
	  font-size:15px;
	  flex-grow:1;
}

.chat-input-container{
	display:flex;
}

We also set the max width for the chatbot, which includes the message history, the textbox and send button. For this we create a flexbox container in App function called "app-container" which will include all ChatInput and ChatMessages components.

<div className="app-container">
	<ChatInput 
	   chatMessages={chatMessages}
	   setChatMessages={setChatMessages}
	 />
	<ChatMessages 
	  chatMessages={chatMessages}
	/>
</div>

The definition for the .app-container is as below

.app-container{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
}

To place the chat messages on the right for the user and on the left for the robot, we use a javascript feature called the Ternary Operator. It works like an if-else statement. The ternary operator inserts an if-else statement directly in the JSX.

For the ChatMessage element we define a className as follows

<div className={sender === 'user' ? 'chat-message-user' : 'chat-message-robot'}> 
  {sender === 'robot' && <img src="robot.jpeg" width= "50"/>}
	{message}
  {sender === 'user' && <img src="human.jpeg" width= "50"/>}
</div>

If we refresh the browser page, inspect -> Elements and click on a div element having chat messages, we see that each chat message has a class, either "chat-message-user" or "chat-message-robot".

We now style the chat messages for the user and robot claaaNames.

.chat-message-user {
 display: flex;
 justify-content: end;
 align-items: start;
}

.chat-message-robot {
 display: flex;
 align-items: start; 
}

.chat-message-text {
  background-color: rgb(238,238,238);
  padding : 15px 20px;
  border-radius : 10px;
  margin-right : 10px;
  margin-left : 10px;
  margin-bottom: 20px;
  max-width: 300px;
}

To display the messages of the robot on the right we set the property justify-content: end; 

We style the properties of each individual chat message also. For this we give the messages a class name "chat-message-text".

<div className={
	sender === 'user' 
	? 'chat-message-user' 
	: 'chat-message-robot'
  }> {/* use div element to put the ChatMessage on a new line */}
  {sender === 'robot' && <img src="robot.jpeg" width= "50"/>}
  <div className="chat-message-text">  
	{message}
  </div>  
  {sender === 'user' && <img src="human.jpeg" width= "50"/>}
</div>

After setting margin-bottom: 20px;, we notice the chatbot images for the user and robot are stretched. This is because they are components of the flexbox, and their default alignment behavior is stretch. So the images appear elongated. To resolve this we add a flex property to both .chat-message-user and .chat-message-robot align-items: start; With this , the elements in the flexbox container take up their actual height/width dimensions. Also if there are multiple elements in the container having varying heights, they will all align in a straight line.