Skip to content

README.md

Latest commit

 

History

History
120 lines (87 loc) · 3.97 KB

README.md

File metadata and controls

120 lines (87 loc) · 3.97 KB
Raw

🤖 React Chatbot

A simple and clean chat interface built with React 19. Type a message and get an instant response from an AI-powered chatbot, with smooth auto-scroll and a minimal UI.

Live demo: vscrm.github.io/React-Chatbot

✨ Features

  • Real-time chat with an AI chatbot powered by the supersimpledev package
  • Distinct UI layout for user and bot messages with avatars
  • Auto-scroll to the latest message on every update
  • Send messages via the Send button or by pressing Enter
  • Clean, minimal interface with responsive layout

🚀 Tech Stack

Technology Version Purpose
React 19 UI library and component state management
Vite 8 Build tool and dev server with HMR
supersimpledev 8.x AI chatbot engine (Chatbot.getResponse())
gh-pages 6.x Automated deployment to GitHub Pages from the dist folder
ESLint 10 Code linting with React Hooks and React Refresh plugins

🏗️ Project Structure

React-Chatbot/
├── public/
│   └── Logo.svg
├── src/
│   ├── assets/
│   │   ├── robot.png              # Bot avatar
│   │   └── user.png               # User avatar
│   ├── components/
│   │   └── chats/
│   │       ├── ChatInput.jsx      # Text input + Send button, calls Chatbot.getResponse()
│   │       ├── ChatInput.css
│   │       ├── ChatMessage.jsx    # Single message bubble with avatar
│   │       ├── ChatMessage.css
│   │       ├── ChatMessages.jsx   # Scrollable message list with auto-scroll
│   │       └── ChatMessages.css
│   ├── App.jsx                    # Root component, holds chatMessages state
│   ├── App.css
│   ├── index.css                  # Global styles
│   └── main.jsx                   # Entry point
├── .gitignore
├── eslint.config.js
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── vite.config.js                 # Build config with base path for GitHub Pages

⚙️ How It Works

  1. The user types a message in ChatInput and presses Send or Enter
  2. The message is added to chatMessages state in App.jsx as { sender: 'user', ... }
  3. Chatbot.getResponse(inputText) from the supersimpledev package is called synchronously
  4. The bot response is appended to chatMessages as { sender: 'robot', ... }
  5. ChatMessages uses a useRef + useEffect to auto-scroll to the bottom on every update
  6. Each message is rendered by ChatMessage, which picks the correct avatar based on sender

🛠️ Getting Started

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

# Deploy to GitHub Pages
npm run deploy

🌐 Deployment

The app is deployed to GitHub Pages via the gh-pages package.

npm run deploy
# Builds the project and pushes /dist to the gh-pages branch automatically

vite.config.js is configured with base: '/React-Chatbot/' to match the GitHub Pages URL structure.

🙏 Acknowledgements

This project was built while following the SuperSimpleDev React course — a practical, beginner-friendly guide to learning modern React from scratch.

Thank you to SuperSimpleDev for the open-source materials and the supersimpledev npm package that powers the chatbot engine in this project. 🙏

📄 License

License: MIT