├── .gitignore ├── README.md ├── components └── chatbot │ ├── index.js │ ├── steps.js │ └── styles.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── api │ └── hello.js └── index.js ├── public ├── favicon.ico └── vercel.svg └── styles ├── Home.module.css └── globals.css /.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 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env.local 29 | .env.development.local 30 | .env.test.local 31 | .env.production.local 32 | 33 | # vercel 34 | .vercel 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | ``` 12 | 13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 14 | 15 | ## Demo 16 | 17 | https://agitated-aryabhata-126fe9.netlify.app/ 18 | -------------------------------------------------------------------------------- /components/chatbot/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ChatBot from 'react-simple-chatbot'; 3 | import Wrapper from './styles'; 4 | import steps from './steps'; 5 | 6 | 7 | function ChatbotWrapper() { 8 | return ( 9 | 10 | 14 | 15 | ); 16 | } 17 | 18 | export default ChatbotWrapper; -------------------------------------------------------------------------------- /components/chatbot/steps.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | id: '1', 4 | message: 'What is your name?', 5 | trigger: '2', 6 | }, 7 | { 8 | id: '2', 9 | user: true, 10 | trigger: '3', 11 | }, 12 | { 13 | id: '3', 14 | message: 'Hi {previousValue}, nice to meet you!', 15 | trigger: '4', 16 | }, 17 | { 18 | id: '4', 19 | message: 'Select any service to proceed', 20 | trigger: '5', 21 | }, 22 | { 23 | id: '5', 24 | options: [ 25 | { value: "Laundry", label: 'Laundry', trigger: '7' }, 26 | { value: "Cleaning", label: 'Cleaning', trigger: '7' }, 27 | { value: "AC repair", label: 'AC repair', trigger: '6' }, 28 | ], 29 | }, 30 | { 31 | id: '6', 32 | message: 'Sorry! we are not operating {previousValue} right now ', 33 | trigger: '2', 34 | }, 35 | { 36 | id: '7', 37 | message: 'Awesome! We will be connecting you to our {previousValue} service executive!', 38 | end: true, 39 | }, 40 | ]; 41 | 42 | -------------------------------------------------------------------------------- /components/chatbot/styles.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | export default styled.div` 4 | .rsc-os-option-element { 5 | cursor: pointer; 6 | } 7 | `; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chat-bot", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "export": "npm run build && next export" 10 | }, 11 | "dependencies": { 12 | "next": "9.5.3", 13 | "react": "16.13.1", 14 | "react-device-detect": "^1.14.0", 15 | "react-dom": "16.13.1", 16 | "react-simple-chatbot": "^0.6.1", 17 | "styled-components": "^5.2.0" 18 | } 19 | } -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | class MyDocument extends Document { 4 | static async getInitialProps(ctx) { 5 | const initialProps = await Document.getInitialProps(ctx) 6 | return { ...initialProps } 7 | } 8 | render() { 9 | return ( 10 | 11 | 12 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 24 | 39 | 40 | 41 | ) 42 | } 43 | } 44 | 45 | export default MyDocument -------------------------------------------------------------------------------- /pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default (req, res) => { 4 | res.statusCode = 200 5 | res.json({ name: 'John Doe' }) 6 | } 7 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Head from 'next/head' 3 | import dynamic from 'next/dynamic'; 4 | import { 5 | browserName, 6 | browserVersion, 7 | deviceType, 8 | osName, 9 | osVersion 10 | } from "react-device-detect"; 11 | import styles from '../styles/Home.module.css'; 12 | const ChatBot = dynamic(import('../components/chatbot'), { ssr: false }); 13 | 14 | class Home extends React.Component { 15 | state = { 16 | ip: {} 17 | } 18 | componentDidMount() { 19 | this.setState({ 20 | iploading: true 21 | }) 22 | fetch('https://ipapi.co/json/').then(res => res.json()).then(data => { 23 | this.setState({ 24 | ip: data, 25 | iploading: false 26 | }) 27 | console.log(data) 28 | }).catch(err => { 29 | console.err(err); 30 | this.setState({ 31 | iploading: false 32 | }) 33 | }) 34 | } 35 | render() { 36 | const { ip, iploading } = this.state; 37 | return ( 38 |
39 | 40 | Chat bot sandbox with NextJS 41 | 42 | 43 |
44 | 45 |
46 |
47 |

Browser details

48 |

Name: {browserName}

49 |

Browser version: {browserVersion}

50 |

Device type: {deviceType}

51 |

Operating System: {osName}

52 |

Operating System Version: {osVersion}

53 |
54 | {!iploading ?
55 |

IP details

56 |

IP address: {ip.ip}

57 |

City: {ip.city}

58 |

State: {ip.region}

59 |

Country: {ip.country_name}

60 |

Country Code: {ip.country}

61 |

Country calling code: {ip.country_calling_code}

62 |

Currency: {ip.currency}

63 |

Lat. and Long.: {ip.latitude}, {ip.longitude}

64 |
:
Loading...
} 65 |
66 |
67 |
68 | ) 69 | } 70 | } 71 | 72 | export default Home; 73 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ssakethraj/chatbot-nextjs/c2312b62e884e4590a4a124c4a5054fd6719764d/public/favicon.ico -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | min-height: 100vh; 3 | padding: 0 0.5rem; 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: center; 7 | align-items: center; 8 | } 9 | 10 | .main { 11 | padding: 5rem 0; 12 | flex: 1; 13 | display: flex; 14 | flex-direction: column; 15 | justify-content: center; 16 | align-items: center; 17 | } 18 | 19 | .footer { 20 | width: 100%; 21 | height: 100px; 22 | border-top: 1px solid #eaeaea; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | } 27 | 28 | .footer img { 29 | margin-left: 0.5rem; 30 | } 31 | 32 | .footer a { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | } 37 | 38 | .title a { 39 | color: #0070f3; 40 | text-decoration: none; 41 | } 42 | 43 | .title a:hover, 44 | .title a:focus, 45 | .title a:active { 46 | text-decoration: underline; 47 | } 48 | 49 | .title { 50 | margin: 0; 51 | line-height: 1.15; 52 | font-size: 4rem; 53 | } 54 | 55 | .title, 56 | .description { 57 | text-align: center; 58 | } 59 | 60 | .description { 61 | line-height: 1.5; 62 | font-size: 1.5rem; 63 | } 64 | 65 | .code { 66 | background: #fafafa; 67 | border-radius: 5px; 68 | padding: 0.75rem; 69 | font-size: 1.1rem; 70 | font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, 71 | Bitstream Vera Sans Mono, Courier New, monospace; 72 | } 73 | 74 | .grid { 75 | display: flex; 76 | align-items: center; 77 | justify-content: center; 78 | flex-wrap: wrap; 79 | 80 | max-width: 800px; 81 | margin-top: 3rem; 82 | } 83 | 84 | .card { 85 | margin: 1rem; 86 | flex-basis: 45%; 87 | padding: 1.5rem; 88 | text-align: left; 89 | color: inherit; 90 | text-decoration: none; 91 | box-shadow: 0px 0px 15px grey; 92 | min-height: 360px; 93 | min-width: 350px; 94 | transition: color 0.15s ease, box-shadow 0.15s ease; 95 | } 96 | 97 | .card:hover, 98 | .card:focus, 99 | .card:active { 100 | box-shadow: 0px 0px 30px grey; 101 | } 102 | 103 | .card h3 { 104 | margin: 0 0 1rem 0; 105 | font-size: 1.5rem; 106 | } 107 | 108 | .card p { 109 | margin: 0; 110 | font-size: 1.25rem; 111 | line-height: 1.5; 112 | } 113 | 114 | .logo { 115 | height: 1em; 116 | } 117 | 118 | @media (max-width: 600px) { 119 | .grid { 120 | width: 100%; 121 | flex-direction: column; 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | .chat-container { 19 | position: fixed; 20 | left: 10px; 21 | bottom: 10px; 22 | } 23 | 24 | .chatroom { 25 | background-color: hsl(0deg 0% 56%); 26 | } 27 | --------------------------------------------------------------------------------