UI updated

Backend/Node/output.txt

-Abstraction is a very important feature of OOPs that allows displaying only the important information and hiding the implementation details.
\ No newline at end of file
+Abstraction is a very important feature of OOPs that allows displaying only the important information and hiding the implementation details. For example, while riding a bike, you know that if you raise the accelerator, the speed will increase, but you don’t know how it actually happens. This is abstraction as the implementation details are hidden from the rider.
\ No newline at end of file

frontend/src/digitalHuman/digitalHuman.js

@@ -9,6 +9,7 @@ import Card from "./sections/cardChat";
 import './styles/digitalHuman.css';
 import { FaMicrophone } from "react-icons/fa";
 import { IoSend } from "react-icons/io5";
+import image from "./images/avatar.png";
 
 const SpeechRecognition =
     window.SpeechRecognition || window.webkitSpeechRecognition
@@ -185,13 +186,22 @@ function DigitalHuman() {
     }
 
     return (
-        <div className='chat'>
+        <div className='digitalHuamn'>
+            <div className='avatar'>
+                <img src={image} width='100%'/>
+            </div>
+            <div className='avatar'>
+            <div className='chat' style={{
+            height: `465px`,
+            overflow: "scroll",
+            
+          }}>
                 <div className='chat_body'>
                     {renderMessage(messagesFromRedux)}
                 </div>
                 <div className='chat_footer'>
                     <button className={cls} onClick={() => { setCls((cls) => (cls === "red" ? "green" : "red")); setIsListening(prevState => !prevState); }}>
-                    <FaMicrophone style={{color: 'black'}}/> 
+                        <FaMicrophone style={{ color: 'black' }} />
                     </button>
                     <input
                         placeholder="Send a message..."
@@ -199,11 +209,13 @@ function DigitalHuman() {
                         type="text"
                         value={note}
                     />
-                <button className='send' style={{backgroundColor: 'transparent'}} onClick={onClicksHanlder} disabled={!note}>
-                    <IoSend style={{color: '#F05454', width: '40px', fontSize:'2em'}}/>
+                    <button className='send' style={{ backgroundColor: 'transparent' }} onClick={onClicksHanlder} disabled={!note}>
+                        <IoSend style={{ color: '#F05454', width: '40px', fontSize: '2em' }} />
                     </button>
                 </div>
             </div>
+            </div>
+        </div>
     )
 }
 

frontend/src/digitalHuman/styles/digitalHuman.css

+.digitalHuamn {
+    display: flex;
+}
+
+.avatar {
+    flex: 1;
+}  
+
+.avatar:first-child{
+    overflow: hidden;
+    border-radius: 2px;
+
+}
+
+.avatar:last-child {
+    border: 2px solid #F05454;
+}
+.chat{
+    overflow-y: scroll;
+    position: relative;
+    flex-direction: column-reverse;
+} 
+
 body {
     background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
 
@@ -88,7 +111,7 @@ body {
     display: flex;
     position: fixed;
     bottom: 0;
-    width: 100%;
+    width: 50%;
     overflow-y: hidden;
     justify-content: space-between;
     align-items: center;