Commit a55a6290 authored by Navodya Pasqual's avatar Navodya Pasqual

DH updated

parent 8f9524df
...@@ -2,11 +2,13 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,11 +2,13 @@ import React, { useState, useEffect } from 'react';
import Axios from 'axios'; import Axios from 'axios';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { List, Icon, Avatar } from 'antd'; import { List, Icon, Avatar } from 'antd';
import avatar from './images/avatar.png';
import { saveMessage } from '../functions/actions/digitalHuman_actions'; import { saveMessage } from '../functions/actions/digitalHuman_actions';
import Message from './sections/messageChat'; import Message from './sections/messageChat';
import Card from "./sections/cardChat"; import Card from "./sections/cardChat";
import './styles/digitalHuman.css'; import './styles/digitalHuman.css';
import { FaMicrophone } from "react-icons/fa";
import { IoSend } from "react-icons/io5";
const SpeechRecognition = const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition
...@@ -160,7 +162,7 @@ function DigitalHuman() { ...@@ -160,7 +162,7 @@ function DigitalHuman() {
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' ? <Icon type="robot" /> : <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' }}>
<List.Item.Meta <List.Item.Meta
...@@ -191,7 +193,7 @@ function DigitalHuman() { ...@@ -191,7 +193,7 @@ function DigitalHuman() {
</div> </div>
<div className='chat_footer'> <div className='chat_footer'>
<button className={cls} onClick={() => { setCls((cls) => (cls === "red" ? "green" : "red")); setIsListening(prevState => !prevState); }}> <button className={cls} onClick={() => { setCls((cls) => (cls === "red" ? "green" : "red")); setIsListening(prevState => !prevState); }}>
<i className="fas fa-microphone" style={{color: 'white'}}></i> <FaMicrophone style={{color: 'black'}}/>
</button> </button>
<input <input
placeholder="Send a message..." placeholder="Send a message..."
...@@ -199,8 +201,8 @@ function DigitalHuman() { ...@@ -199,8 +201,8 @@ function DigitalHuman() {
type="text" type="text"
value={note} value={note}
/> />
<button onClick={onClicksHanlder} disabled={!note}> <button className='send' style={{backgroundColor: 'transparent'}} onClick={onClicksHanlder} disabled={!note}>
<i className="fas fa-paper-plane" ></i> <IoSend style={{color: '#F05454', width: '40px', fontSize:'2em'}}/>
</button> </button>
</div> </div>
</div> </div>
......
import React from 'react' import React from 'react'
import { List, Icon, Avatar } from 'antd'; import { List, Icon, Avatar } from 'antd';
import '../styles/sectionStyles.css'; import '../styles/sectionStyles.css';
import avatar from '../images/avatar.png';
function Message(props) { function Message(props) {
const AvatarSrc = props.who ==='Bot' ? <Icon type="robot" /> : <Icon type="smile" /> const AvatarSrc = props.who ==='Bot' ? <img src={avatar} /> : <Icon type="smile" />
return ( return (
<div> <div>
......
...@@ -14,7 +14,7 @@ body { ...@@ -14,7 +14,7 @@ body {
background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%); background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
} }
.red { .red {
background-color: red; background-color: #E55D87;
width: 45px; width: 45px;
height: 45px; height: 45px;
border: 1px solid #eee; border: 1px solid #eee;
...@@ -31,28 +31,29 @@ body { ...@@ -31,28 +31,29 @@ body {
-webkit-transform: scale(1.1); -webkit-transform: scale(1.1);
-moz-transform: scale(1.1); -moz-transform: scale(1.1);
transform: scale(1.1); transform: scale(1.1);
background-color: rgba(255, 0, 0, 0.863); background-color: #e47397;
} }
.green { .green {
background-color: green; background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
width: 45px; width: 45px;
height: 45px; height: 45px;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 100%; border-radius: 100%;
bottom: 0; bottom: 0;
box-shadow: 0 2px 5px var(--border) rgb(0 0 0 / 10%);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
transition: 0.5s;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.green:hover { .green:hover {
background-position: right center;
-webkit-transform: scale(1.1); -webkit-transform: scale(1.1);
-moz-transform: scale(1.1); -moz-transform: scale(1.1);
transform: scale(1.1); transform: scale(1.1);
background-color: rgba(0, 128, 0, 0.863);
} }
body { body {
...@@ -92,8 +93,25 @@ body { ...@@ -92,8 +93,25 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 62px; height: 62px;
background-color: antiquewhite; }
border-top: 1px solid rgb(175, 37, 37);
.chat_footer {
/* ff 3.6+ */
background: -moz-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* safari 5.1+,chrome 10+ */
background: -webkit-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* opera 11.10+ */
background: -o-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* ie 10+ */
background: -ms-radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
/* global 92%+ browsers support */
background: radial-gradient(circle at 30% -100%, #042c54 25%, rgba(4, 44, 84, 1) 85%, rgba(27, 120, 222, 1) 100%);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
} }
.chat_footer>input { .chat_footer>input {
...@@ -101,6 +119,10 @@ body { ...@@ -101,6 +119,10 @@ body {
border-radius: 30px; border-radius: 30px;
padding: 10px; padding: 10px;
border: none; border: none;
font-family: var(--font-family);
background: #040C18;
color: white;
margin-left: 10px;
} }
.chat_footer>button { .chat_footer>button {
......
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