digital human UI changed

frontend/src/digitalHuman/digitalHuman.js

@@ -3,12 +3,208 @@ import Axios from 'axios';
 import { useDispatch, useSelector } from 'react-redux';
 import { List, Icon, Avatar } from 'antd';
 
+import { saveMessage } from '../functions/actions/digitalHuman_actions';
+import Message from './sections/messageChat';
+import Card from "./sections/cardChat";
+import './styles/digitalHuman.css';
+
+const SpeechRecognition =
+    window.SpeechRecognition || window.webkitSpeechRecognition
+const mic = new SpeechRecognition();
+
+mic.continuous = true
+mic.interimResults = true
+mic.lang = 'en-US'
+
 function DigitalHuman() {
+    const dispatch = useDispatch();
+    const messagesFromRedux = useSelector(state => state.message.messages);
+    const [isListening, setIsListening] = useState(false)
+    const [note, setNote] = useState(null)
+
+
+    const [cls, setCls] = useState("green");
+
+    useEffect(() => {
+        eventQuery('welcomeToMyWebsite');
+    }, [])
+
+    useEffect(() => {
+        handleListen()
+    }, [isListening])
+
+    const handleListen = () => {
+        if (isListening) {
+            mic.start()
+            mic.onend = () => {
+                console.log('continue..')
+                mic.start()
+            }
+        } else {
+            mic.stop()
+            mic.onend = () => {
+                console.log('Stopped Mic on Click')
+            }
+        }
+        mic.onstart = () => {
+            console.log('Mics on')
+        }
+
+        mic.onresult = event => {
+            const transcript = Array.from(event.results)
+                .map(result => result[0])
+                .map(result => result.transcript)
+                .join('')
+            console.log(transcript)
+            setNote(transcript)
+            mic.onerror = event => {
+                console.log(event.error)
+            }
+        }
+    }
+
+    const textQuery = async (text) => {
+        //  First  Need to  take care of the message I sent     
+        let conversation = {
+            who: 'user',
+            content: {
+                text: {
+                    text: text
+                }
+            }
+        }
+
+        dispatch(saveMessage(conversation))
+        // console.log('text I sent', conversation)
+        // We need to take care of the message Chatbot sent 
+        const textQueryVariables = {
+            text
+        }
+        try {
+            //I will send request to the textQuery ROUTE 
+            const response = await Axios.post('/api/dialogflow/textQuery', textQueryVariables)
+            for (let content of response.data.fulfillmentMessages) {
+                conversation = {
+                    who: 'Bot',
+                    content: content
+                }
+                dispatch(saveMessage(conversation))
+            }
+        } catch (error) {
+            conversation = {
+                who: 'Bot',
+                content: {
+                    text: {
+                        text: " Error just occured, please check the problem"
+                    }
+                }
+            }
+            dispatch(saveMessage(conversation))
+        }
+    }
+
+    const eventQuery = async (event) => {
+        // We need to take care of the message Chatbot sent 
+        const eventQueryVariables = {
+            event
+        }
+        try {
+            //I will send request to the textQuery ROUTE 
+            const response = await Axios.post('/api/dialogflow/eventQuery', eventQueryVariables)
+            for (let content of response.data.fulfillmentMessages) {
+                let conversation = {
+                    who: 'Bot',
+                    content: content
+                }
+                dispatch(saveMessage(conversation))
+            }
+        } catch (error) {
+            let conversation = {
+                who: 'Bot',
+                content: {
+                    text: {
+                        text: " Error just occured, please check the problem"
+                    }
+                }
+            }
+            dispatch(saveMessage(conversation))
+        }
+    }
+    const keyPressHanlder = (e) => {
+        if (e.key === "Enter") {
+            if (!e.target.value) {
+                return alert('you need to type somthing first')
+            }
+            //we will send request to text query route 
+            textQuery(e.target.value)
+            e.target.value = "";
+        }
+    }
+
+    const onClicksHanlder = () => {
+        if (!note) {
+            return alert('you need to type somthing first')
+        }
+        //we will send request to text query route 
+        textQuery(note);
+        setNote('');
+    }
+
+    const renderCards = (cards) => {
+        return cards.map((card, i) => <Card key={i} cardInfo={card.structValue} />)
+    }
+    const renderOneMessage = (message, i) => {
+        console.log('message', message)
+        // we need to give some condition here to separate message kinds 
+        // 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) {
+            const AvatarSrc = message.who === 'Bot' ? <Icon type="robot" /> : <Icon type="smile" />
+            return <div>
+                <List.Item style={{ padding: '1rem' }}>
+                    <List.Item.Meta
+                        avatar={<Avatar icon={AvatarSrc} />}
+                        title={message.who}
+                        description={renderCards(message.content.payload.fields.card.listValue.values)}
+                    />
+                </List.Item>
+            </div>
+        }
+        // template for card message 
+    }
+
+    const renderMessage = (returnedMessages) => {
+        if (returnedMessages) {
+            return returnedMessages.map((message, i) => {
+                return renderOneMessage(message, i);
+            })
+        } else {
+            return null;
+        }
+    }
+
     return (
-        <div className='chat' >
-            Hi
+        <div className='chat'>
+            <div className='chat_body'>
+                {renderMessage(messagesFromRedux)}
+            </div>
+            <div className='chat_footer'>
+                <button className={cls} onClick={() => { setCls((cls) => (cls === "red" ? "green" : "red")); setIsListening(prevState => !prevState); }}>
+                    <i className="fas fa-microphone" style={{color: 'white'}}></i>
+                </button>
+                <input
+                    placeholder="Send a message..."
+                    onKeyPress={keyPressHanlder}
+                    type="text"
+                    value={note}
+                />
+                <button onClick={onClicksHanlder} disabled={!note}>
+                    <i className="fas fa-paper-plane" ></i>
+                </button>
+            </div>
         </div>
     )
 }
 
-export default DigitalHuman;
+export default DigitalHuman;
\ No newline at end of file

frontend/src/digitalHuman/sections/cardChat.js

+import React from 'react'
+import { Card, Icon } from 'antd';
+
+const { Meta } = Card;
+
+function CardComponent(props) {
+    return (
+        <Card
+            style={{ width: 300 }}
+            cover={
+                <img
+                    alt={props.cardInfo.fields.description.stringValue}
+                    src={props.cardInfo.fields.image.stringValue} />
+            }
+            actions={[
+                <a target="_blank" rel="noopener noreferrer" href={props.cardInfo.fields.link.stringValue}>
+                    <Icon type="ellipsis" key="ellipsis" />
+                </a>
+            ]}
+        >
+            <Meta
+                title={props.cardInfo.fields.stack.stringValue}
+                description={props.cardInfo.fields.description.stringValue}
+            />
+
+        </Card>
+
+    )
+}
+
+export default CardComponent

frontend/src/digitalHuman/sections/messageChat.js

+import React from 'react'
+import { List, Icon, Avatar } from 'antd';
+import '../styles/sectionStyles.css';
+
+function Message(props) {
+
+    const AvatarSrc = props.who ==='Bot' ? <Icon type="robot" /> : <Icon type="smile" />  
+
+    return (
+        <div>
+            { props.who ==='Bot' &&
+                <div className='chat_message'>
+                    <List.Item>
+                        <List.Item.Meta
+                        avatar={<Avatar icon={AvatarSrc} />}
+                        // title={props.who}
+                        description={props.text}
+                    />
+                    </List.Item>
+                   
+                </div>
+            }
+             { props.who ==='user' &&
+                <div className='chat_message chat_recieve'>
+                    <List.Item >
+                    <List.Item.Meta
+                        //avatar={<Avatar icon={AvatarSrc} />}
+                        //title={props.who}
+                        description={props.text}
+                    />
+                    </List.Item>
+                    
+                </div>
+            }
+        </div>
+    )
+}
+
+export default Message

frontend/src/digitalHuman/styles/digitalHuman.css

+body {
+    background: -moz-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* safari 5.1+,chrome 10+ */
+    background: -webkit-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* opera 11.10+ */
+    background: -o-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* ie 10+ */
+    background: -ms-radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+
+    /* global 92%+ browsers support */
+    background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
+}
+.red {
+    background-color: red;
+    width: 45px;
+    height: 45px;
+    border: 1px solid #eee;
+    border-radius: 100%;
+    bottom: 0;
+    box-shadow: 0 2px 5px var(--border) rgb(0 0 0 / 10%);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.red:hover {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    transform: scale(1.1);
+    background-color: rgba(255, 0, 0, 0.863);
+}
+
+.green {
+    background-color: green;
+    width: 45px;
+    height: 45px;
+    border: 1px solid #eee;
+    border-radius: 100%;
+    bottom: 0;
+    box-shadow: 0 2px 5px var(--border) rgb(0 0 0 / 10%);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.green:hover {
+    -webkit-transform: scale(1.1);
+    -moz-transform: scale(1.1);
+    transform: scale(1.1);
+    background-color: rgba(0, 128, 0, 0.863);
+}
+
+body {
+    background-color: black;
+}
+
+.chat {
+    display: flex;
+    flex: 1;
+}
+
+.chat_body {
+    padding: 10px;
+    flex: 1;
+    background-position: center;
+    margin-bottom: 50px;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgb(110, 110, 110);
+    border-radius: 3px;
+}
+
+.chat_footer {
+    padding: 10px;
+    flex: 1;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    overflow-y: hidden;
+    justify-content: space-between;
+    align-items: center;
+    height: 62px;
+    background-color: antiquewhite;
+    border-top: 1px solid rgb(175, 37, 37);
+}
+
+.chat_footer>input {
+    flex: 1;
+    border-radius: 30px;
+    padding: 10px;
+    border: none;
+}
+
+.chat_footer>button {
+    display: flex;
+    border: none;
+}
+
+.chat_footer>i {
+    padding: 10px;
+    color: gray;
+}
+
+.ant-list-item-meta-description {
+    display: flex;
+    color: black !important;
+}
\ No newline at end of file

frontend/src/digitalHuman/styles/sectionStyles.css

+.chat_message{
+    font-size: 16px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: 20px;
+    width: fit-content;
+    border-radius: 10px;
+    background-color: aquamarine;
+    margin-bottom: 10px;
+}
+
+.chat_recieve{
+    margin-left: auto;
+    margin-right: 20px;
+    background-color: aqua;
+}

frontend/src/functions/actions/digitalHuman_actions.js

+export function saveMessage(dataToSubmit) {
+   
+    return {
+        type: 'save_message',
+        payload: dataToSubmit
+    }
+}

frontend/src/functions/reducers/digitalHuman_reducer.js

+export default function (state = {messages:[]}, action) {
+    switch (action.type) {
+        case 'save_message':
+            return {
+                ...state,
+                messages: state.messages.concat(action.payload)
+            }
+        default:
+            return state;
+    }
+}
\ No newline at end of file

frontend/src/functions/reducers/index.js

+import { combineReducers } from 'redux';
+import message from './digitalHuman_reducer';
+
+const rootReducer = combineReducers({
+    message,
+});
+
+export default rootReducer;
\ No newline at end of file

frontend/src/index.js

@@ -2,8 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-
 import "antd/dist/antd.css";
+
+import Reducer from '../src/functions/reducers';
 import { Provider } from 'react-redux';
 import { createStore, applyMiddleware } from 'redux';
 import promiseMiddleware from 'redux-promise';
@@ -15,13 +16,16 @@ const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)
 ReactDOM.render(
   <Provider
     store={createStoreWithMiddleware(
-     
+      Reducer,
       window.__REDUX_DEVTOOLS_EXTENSION__ &&
       window.__REDUX_DEVTOOLS_EXTENSION__()
-    )}>
+    )}
+  >
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>,
-  document.getElementById('root')
-);
+  </Provider>
+
+  ,
+  document.getElementById("root")
+);
\ No newline at end of file

frontend/src/main/ContactUs/styles/contactUs.css

@@ -19,17 +19,17 @@ body {
 
     /* global 92%+ browsers support */
     background: radial-gradient(circle at 3% 25%, rgba(0, 40, 83, 1) 0%, rgba(4, 12, 24, 1) 25%);
-
 }
-
+.contact {
+    background: transparent;
+}
 .contact__container {
     font-family: var(--font-family);
-    padding: 4rem;
+    padding: 3rem;
     display: grid;
-    background: #1f2641;
     grid-template-columns: 40% 60%;
     gap: 4rem;
-    height: 28rem;
+    height: 31rem;
     margin: 7rem 7rem;
     border-radius: 1rem;
 }
@@ -40,7 +40,7 @@ body {
     padding-left: 3rem;
     padding-right: 3rem;
     border-radius: 1rem;
-    bottom: 7rem;
+    bottom: 6rem;
     position: relative;
 }
 
@@ -99,6 +99,12 @@ body {
     margin-bottom: 1rem;
 }
 
+.contact__details li h5{
+    color: var(--color-text);
+    font-size: 0.9rem;
+    font-family: var(--font-family);
+}
+
 .contact__socials {
     display: flex;
     gap: 0.9rem;
@@ -169,9 +175,6 @@ body {
    text-decoration: none;
  }
 
-
-
-
 @media screen and (max-width: 1024px) {
     .contact {
         padding-bottom: 0;