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.
+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
@@ -161,7 +162,7 @@ function DigitalHuman() {
         // template for normal text 
         if (message.content && message.content.text && message.content.text.text) {
             return <Message key={i} who={message.who} text={message.content.text.text} />
-        } else if (message.content && message.content.payload.fields.card) { 
+        } else if (message.content && message.content.payload.fields.card) {
             const AvatarSrc = message.who === 'Bot' ? <img src={avatar} /> : <Icon type="smile" />
             return <div>
                 <List.Item style={{ padding: '1rem' }}>
@@ -185,23 +186,34 @@ function DigitalHuman() {
     }
 
     return (
-        <div className='chat'>
-            <div className='chat_body'>
-                {renderMessage(messagesFromRedux)}
+        <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' }} />
+                    </button>
+                    <input
+                        placeholder="Send a message..."
+                        onKeyPress={keyPressHanlder}
+                        type="text"
+                        value={note}
+                    />
+                    <button className='send' style={{ backgroundColor: 'transparent' }} onClick={onClicksHanlder} disabled={!note}>
+                        <IoSend style={{ color: '#F05454', width: '40px', fontSize: '2em' }} />
+                    </button>
+                </div>
             </div>
-            <div className='chat_footer'>
-                <button className={cls} onClick={() => { setCls((cls) => (cls === "red" ? "green" : "red")); setIsListening(prevState => !prevState); }}>
-                    <FaMicrophone style={{color: 'black'}}/> 
-                </button>
-                <input
-                    placeholder="Send a message..."
-                    onKeyPress={keyPressHanlder}
-                    type="text"
-                    value={note}
-                />
-                <button className='send' style={{backgroundColor: 'transparent'}} onClick={onClicksHanlder} disabled={!note}>
-                    <IoSend style={{color: '#F05454', width: '40px', fontSize:'2em'}}/>
-                </button>
             </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;