Skip to content
Snippets Groups Projects
Commit 505cc805 authored by Brahim Ghaouthi's avatar Brahim Ghaouthi
Browse files

add project skeleton

parent 5b10b428
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 29534 additions and 0 deletions
backend-socket.io/.gitignore 0 → 100644
+ 23
− 0
View file @ 505cc805
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
backend-socket.io/package-lock.json 0 → 100644
+ 1247
− 0
View file @ 505cc805
This diff is collapsed.
backend-socket.io/package.json 0 → 100644
+ 6
− 0
View file @ 505cc805
{
"dependencies": {
"express": "^4.17.3",
"socket.io": "^4.4.1"
}
}
backend-socket.io/public/.gitkeep 0 → 100644
+ 0
− 0
View file @ 505cc805
backend-socket.io/server.js 0 → 100644
+ 32
− 0
View file @ 505cc805
/*
* Import packages
*/
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);
server.listen(5000, function () {
console.log("server started at port 5000");
});
app.use(express.static('public'));
io.on("connection", (socket) => {
console.log(`connect ${socket.id}`);
socket.on("disconnect", (reason) => {
console.log(`disconnect ${socket.id} due to ${reason}`);
});
socket.on("question", (data) => {
console.log("recieved question: "+data)
// place your bot-code here !!!
answer = "I am dumb, i cannot answer to \"" + data + "\" yet";
socket.emit("answer", answer);
});
});
frontend-react/.gitignore 0 → 100644
+ 23
− 0
View file @ 505cc805
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
frontend-react/package-lock.json 0 → 100644
+ 27777
− 0
View file @ 505cc805
This diff is collapsed.
frontend-react/package.json 0 → 100644
+ 40
− 0
View file @ 505cc805
{
"name": "my-chatbot",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"socket.io": "^4.4.1",
"socket.io-client": "^4.4.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
frontend-react/public/index.html 0 → 100644
+ 34
− 0
View file @ 505cc805
<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8" />
<title>Internet Technologies Chatbot</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body class="d-flex flex-column h-100">
<noscript>You need to enable JavaScript to run this app.</noscript>
<main class="flex-shrink-0">
<div class="bg-dark text-secondary px-4 py-5 text-center">
<div class="py-5">
<h1 class="display-5 fw-bold text-white">Internet Technologies Chatbot</h1>
<div class="col-lg-6 mx-auto">
<p class="fs-5 mb-4">Welcome to the chatbot of Prof. Dr. Andreas Wölfl. The code to produce this frontend
was taken from templates freely available on the Web. Please visit the following links:</p>
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<a href="https://bootsnipp.com/snippets/ZlkBn"><button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Chat by Pavel Komiagin</button></a>
<a href="https://getbootstrap.com/docs/5.0/examples/heroes/"><button type="button" class="btn btn-outline-light btn-lg px-4"> Dark Mode Hero</button></a>
</div>
</div>
</div>
</div>
<div class="b-example-divider mb-0"></div>
<div id="chatbot"></div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Prof. Dr. Andreas Wölfl, E-Mail: <a href="mailto:andreas.woelfl@th-deg.de">andreas.woelfl@th-deg.de</a></span>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>
frontend-react/src/Chatbot.css 0 → 100644
+ 13
− 0
View file @ 505cc805
.chat_window {
width: calc(100% - 20px);
max-width: 800px;
height: 500px;
border-radius: 10px;
margin: 30px auto;
left: 50%;
top: 30%;
transform: translateX(0%) translateY(0%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
background-color: #f8f8f8;
overflow: hidden;
}
\ No newline at end of file
frontend-react/src/Chatbot.js 0 → 100644
+ 50
− 0
View file @ 505cc805
import React, {useEffect, useState} from "react";
import './Chatbot.css';
import {Header} from "./Header";
import {UserInput} from "./UserInput";
import {MessageArea} from "./MessageArea";
import {io} from "socket.io-client";
const socket = io("ws://localhost:5000");
function Chatbot() {
/*
Handle messages
*/
const [messages, setMessages] = useState([{
text: "Hello, i am the Internet Technologies Chatbot, how can i help you?",
position: "left"
}]);
useEffect(() => {
//if last message is a non-empty question, ask the server
let lastMessage = messages[messages.length - 1]
if (lastMessage.text !== "" && lastMessage.position === "right") {
socket.emit('question', lastMessage.text);
}
//handle server responses
socket.on("answer", (data) => {
setMessages([...messages, {text: data, position: "left"}])
});
}, [messages]);
function onSubmitMessage(inputText) {
setMessages([...messages, {text: inputText, position: "right"}])
}
/*
Render HTML
*/
return (
<div className="chat_window">
<Header />
<MessageArea messages={messages} />
<UserInput onSubmitMessage={onSubmitMessage} />
</div>
);
}
export default Chatbot;
frontend-react/src/Header.css 0 → 100644
+ 32
− 0
View file @ 505cc805
.top_menu {
background-color: #fff;
width: 100%;
padding: 20px 0 15px;
box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
}
.top_menu .buttons {
margin: 3px 0 0 20px;
position: absolute;
}
.top_menu .buttons .button {
width: 16px;
height: 16px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
position: relative;
}
.top_menu .buttons .button.close {
background-color: #f5886e;
}
.top_menu .buttons .button.minimize {
background-color: #fdbf68;
}
.top_menu .buttons .button.maximize {
background-color: #a3d063;
}
.top_menu .title {
text-align: center;
color: #bcbdc0;
font-size: 20px;
}
frontend-react/src/Header.js 0 → 100644
+ 17
− 0
View file @ 505cc805
import React from "react";
import './Header.css'
function Header() {
return (
<div className="top_menu">
<div className="buttons">
<div className="button close"/>
<div className="button minimize"/>
<div className="button maximize"/>
</div>
<div className="title">Chat</div>
</div>
)
}
export {Header}
\ No newline at end of file
frontend-react/src/Message.css 0 → 100644
+ 76
− 0
View file @ 505cc805
#messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
#messages .message.left .avatar {
background-color: #f5886e;
float: left;
}
#messages .message.left .text_wrapper {
background-color: #ffe6cb;
margin-left: 20px;
}
#messages .message.left .text_wrapper::after, #messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ffe6cb;
}
#messages .message.left .text {
color: #c48843;
}
#messages .message.right .avatar {
background-color: #fdbf68;
float: right;
}
#messages .message.right .text_wrapper {
background-color: #c7eafc;
margin-right: 20px;
float: right;
}
#messages .message.right .text_wrapper::after, #messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #c7eafc;
}
#messages .message.right .text {
color: #45829b;
}
#messages .message.appeared {
opacity: 1;
}
#messages .message .avatar {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-block;
}
#messages .message .text_wrapper {
display: inline-block;
padding: 20px;
border-radius: 6px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
#messages .message .text_wrapper::after, #messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
#messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
#messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
\ No newline at end of file
frontend-react/src/Message.js 0 → 100644
+ 16
− 0
View file @ 505cc805
import React from "react";
import './Message.css'
function Message(props) {
return (
<li className={"message appeared " + props.position}>
<div className="avatar"/>
<div className="text_wrapper">
<div className="text">{props.text}</div>
</div>
</li>
)
}
export {Message}
\ No newline at end of file
frontend-react/src/MessageArea.css 0 → 100644
+ 8
− 0
View file @ 505cc805
#messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
\ No newline at end of file
frontend-react/src/MessageArea.js 0 → 100644
+ 32
− 0
View file @ 505cc805
import React, {useEffect, useRef} from "react";
import './MessageArea.css'
import {Message} from "./Message";
function MessageArea(props) {
/*
Autoscrolling
*/
const messagesEndRef = useRef(null)
useEffect(() => {
//scroll to bottom when a message is sent or received
if (props.messages.length > 1) {
scrollToBottom();
}
})
function scrollToBottom() {
messagesEndRef.current.scrollIntoView({behavior: "smooth"})
}
return (
<ul id="messages">
{props.messages.map((item, i) =>
(<Message text={item.text} position={item.position}/>))}
<li ref={messagesEndRef}/>
</ul>
)
}
export {MessageArea}
\ No newline at end of file
frontend-react/src/UserInput.css 0 → 100644
+ 52
− 0
View file @ 505cc805
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border-radius: 25px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
border-radius: 50px;
background-color: #a3d063;
border: 2px solid #a3d063;
color: #fff;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #a3d063;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
\ No newline at end of file
frontend-react/src/UserInput.js 0 → 100644
+ 34
− 0
View file @ 505cc805
import React, {useState} from "react";
import './UserInput.css'
function UserInput(props) {
/*
Handle input text
*/
const [inputText, setInputText] = useState("")
function handleChange(e) {
setInputText(e.target.value)
}
function handleSubmit() {
props.onSubmitMessage(inputText);
setInputText("");
}
return (
<div className="bottom_wrapper clearfix">
<div className="message_input_wrapper">
<input className="message_input" value={inputText} onChange={handleChange}
placeholder="Type your message here..."/>
</div>
<div className="send_message" onClick={handleSubmit}>
<div className="icon"/>
<div className="text">Send</div>
</div>
</div>
)
}
export {UserInput}
\ No newline at end of file
frontend-react/src/index.css 0 → 100644
+ 22
− 0
View file @ 505cc805
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
body {
background-color: #edeff2;
font-family: "Calibri", "Roboto", sans-serif;
}
#chatbot {
position: relative;
}
\ No newline at end of file
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