Commit 97ee6a7a authored by Navodya Pasqual's avatar Navodya Pasqual

UI updated

parent 75ab1911
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 \ No newline at end of file
...@@ -9,6 +9,7 @@ import Card from "./sections/cardChat"; ...@@ -9,6 +9,7 @@ import Card from "./sections/cardChat";
import './styles/digitalHuman.css'; import './styles/digitalHuman.css';
import { FaMicrophone } from "react-icons/fa"; import { FaMicrophone } from "react-icons/fa";
import { IoSend } from "react-icons/io5"; import { IoSend } from "react-icons/io5";
import image from "./images/avatar.png";
const SpeechRecognition = const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition
...@@ -161,7 +162,7 @@ function DigitalHuman() { ...@@ -161,7 +162,7 @@ function DigitalHuman() {
// template for normal text // template for normal text
if (message.content && message.content.text && message.content.text.text) { if (message.content && message.content.text && message.content.text.text) {
return <Message key={i} who={message.who} 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" /> const AvatarSrc = message.who === 'Bot' ? <img src={avatar} /> : <Icon type="smile" />
return <div> return <div>
<List.Item style={{ padding: '1rem' }}> <List.Item style={{ padding: '1rem' }}>
...@@ -185,23 +186,34 @@ function DigitalHuman() { ...@@ -185,23 +186,34 @@ function DigitalHuman() {
} }
return ( return (
<div className='chat'> <div className='digitalHuamn'>
<div className='chat_body'> <div className='avatar'>
{renderMessage(messagesFromRedux)} <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>
<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> </div>
) )
......
.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 { body {
background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); 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 { ...@@ -88,7 +111,7 @@ body {
display: flex; display: flex;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 50%;
overflow-y: hidden; overflow-y: hidden;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment