├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.png ├── images │ ├── ChatBot.gif │ ├── first.jpg │ ├── logo.png │ ├── second.jpg │ └── third.jpg ├── index.html ├── manifest.json ├── offline.html ├── robots.txt └── serviceworker.js └── src ├── App.css ├── App.js ├── bootstrap.min.css ├── components ├── Faq.js ├── Footer.js ├── Header.js ├── Help.js ├── Slider.js └── chatbot │ ├── Chatbot.js │ ├── Link.js │ └── Post.js ├── index.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Chat-Bot using simple-react-chatbot 2 | --- 3 | 4 | [Live Demo](https://akash52.github.io/react-chatbot) 5 | 6 | ## About 7 | 8 | Project Purpose was people can efficiently solve his/her queries using chatbot 9 | 10 | ### Prerequisites 11 | 12 | - [NodeJS](https://nodejs.org/en/) 13 | - [Git Bash](https://git-scm.com/downloads) 14 | 15 | 16 | ### Installing your local machine 17 | 18 | - git clone https://github.com/codeEye0123/react-chatbot 19 | - cd react-chatbot 20 | - npm install (these command install relevant dependencies) 21 | - npm start 22 | The demo will be live at `http://localhost:3000` 23 | 24 | 25 | ## Features 26 | 27 | - Fully Progressive Web Application 28 | - Single Page Appliacation (SPA) 29 | - Responsive 30 | 31 | 32 | ## ⛏️ Built Using 33 | 34 | - [ReactJS](https://reactjs.org/) 35 | - [React Bootstrap](https://react-bootstrap.github.io/) 36 | 37 | ## Sample 38 | 39 |

40 | 41 |

42 | 43 | 44 | ## Feel Free to use your upcoming projects ! 45 | 46 | ### 🎉 Acknowledgements 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chat-boat", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "axios": "^0.21.1", 10 | "bootstrap": "^4.5.3", 11 | "bootswatch": "^4.5.2", 12 | "react": "^17.0.1", 13 | "react-awesome-slider": "^4.1.0", 14 | "react-bootstrap": "^1.4.0", 15 | "react-dom": "^17.0.1", 16 | "react-faq-component": "^1.3.0", 17 | "react-router-bootstrap": "^0.25.0", 18 | "react-router-dom": "^5.2.0", 19 | "react-scripts": "4.0.2", 20 | "react-simple-chatbot": "^0.6.1", 21 | "speech-synthesis": "^0.3.2", 22 | "styled-components": "^5.2.1", 23 | "web-vitals": "^1.0.1" 24 | }, 25 | "scripts": { 26 | "start": "react-scripts start", 27 | "build": "react-scripts build", 28 | "test": "react-scripts test", 29 | "eject": "react-scripts eject" 30 | }, 31 | "eslintConfig": { 32 | "extends": [ 33 | "react-app", 34 | "react-app/jest" 35 | ] 36 | }, 37 | "browserslist": { 38 | "production": [ 39 | ">0.2%", 40 | "not dead", 41 | "not op_mini all" 42 | ], 43 | "development": [ 44 | "last 1 chrome version", 45 | "last 1 firefox version", 46 | "last 1 safari version" 47 | ] 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeEye0123/react-chatbot/26d1f5d28612da21c30d747243f773e833649eb4/public/favicon.png -------------------------------------------------------------------------------- /public/images/ChatBot.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeEye0123/react-chatbot/26d1f5d28612da21c30d747243f773e833649eb4/public/images/ChatBot.gif -------------------------------------------------------------------------------- /public/images/first.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeEye0123/react-chatbot/26d1f5d28612da21c30d747243f773e833649eb4/public/images/first.jpg -------------------------------------------------------------------------------- /public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeEye0123/react-chatbot/26d1f5d28612da21c30d747243f773e833649eb4/public/images/logo.png -------------------------------------------------------------------------------- /public/images/second.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeEye0123/react-chatbot/26d1f5d28612da21c30d747243f773e833649eb4/public/images/second.jpg -------------------------------------------------------------------------------- /public/images/third.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeEye0123/react-chatbot/26d1f5d28612da21c30d747243f773e833649eb4/public/images/third.jpg -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 13 | 17 | 18 | 22 | 23 | 32 | Chat-Bot 33 | 34 | 35 | 36 |
37 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "ChatBot", 3 | "name": "Welcome to ChatBot", 4 | "icons": [{ 5 | "src": "/images/logo.png", 6 | "type": "image/png", 7 | "sizes": "1024x1024" 8 | }], 9 | "start_url": ".", 10 | "display": "standalone", 11 | "theme_color": "#000000", 12 | "background_color": "#ffffff" 13 | } -------------------------------------------------------------------------------- /public/offline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Akash Chauhan 7 | 37 | 38 | 39 | 40 |
41 |

42 | Please go online to For Chat 43 |

44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/serviceworker.js: -------------------------------------------------------------------------------- 1 | const CACHE_NAME = "version-1"; 2 | const urlsToCache = ['index.html', 'offline.html']; 3 | 4 | const self = this; 5 | 6 | //install SW 7 | 8 | self.addEventListener('install', (event) => { 9 | 10 | event.waitUntil( 11 | caches.open(CACHE_NAME) 12 | .then((cache) => { 13 | console.log('Opened Cache'); 14 | return cache.addAll(urlsToCache); 15 | }) 16 | ) 17 | 18 | }); 19 | 20 | 21 | //Listen for response 22 | self.addEventListener('fetch', (event) => { 23 | 24 | event.respondWith( 25 | caches.match(event.request) 26 | .then(() => { 27 | return fetch(event.request) 28 | .catch(() => caches.match('offline.html')) 29 | }) 30 | ) 31 | 32 | }); 33 | 34 | //Activate teh SW 35 | self.addEventListener('activate', (event) => { 36 | 37 | const cachesWhitelist = []; 38 | cachesWhitelist.push(CACHE_NAME); 39 | 40 | event.waitUntil( 41 | caches.keys().then((cacheNames) => Promise.all( 42 | cacheNames.map((cacheNames) => { 43 | if (!cachesWhitelist.includes(cacheNames)) { 44 | return caches.delete(cacheNames); 45 | } 46 | }) 47 | )) 48 | ) 49 | 50 | }); -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Heebo:300&display=swap'); 2 | 3 | .bot { 4 | bottom: 0; 5 | right: 0; 6 | margin: 10px; 7 | position: fixed; 8 | width: 350px; 9 | z-index: 94; 10 | } 11 | 12 | .btn { 13 | margin: 5px; 14 | width: 40px; 15 | height: 40px; 16 | bottom: 40px; 17 | right: 40px; 18 | margin-bottom: 30px; 19 | float: right; 20 | background-color: #1e524c; 21 | color: #fff; 22 | border-radius: 50px; 23 | text-align: center; 24 | box-shadow: 2px 2px 3px #999; 25 | } 26 | .btn:hover { 27 | opacity: 0.9; 28 | } 29 | .btn:focus { 30 | outline: none; 31 | } 32 | 33 | a { 34 | text-decoration: none; 35 | } 36 | 37 | .img { 38 | height: 200px; 39 | width: 300px; 40 | } 41 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import Chatbot from './Components/chatbot/Chatbot' 3 | import { Container } from 'react-bootstrap' 4 | import { BrowserRouter as Router, Route } from 'react-router-dom' 5 | import Footer from './Components/Footer' 6 | import Header from './Components/Header' 7 | import Faq from './Components/Faq' 8 | import Help from './Components/Help' 9 | import './App.css' 10 | import Slider from './Components/Slider' 11 | 12 | const App = () => { 13 | return ( 14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 | 24 | 25 | 26 |
27 |
28 |