🤖 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.

• 📺 Course video: youtube.com/watch?v=TtPXvEcE11E
• 💻 Course GitHub: github.com/SuperSimpleDev/react-course

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

---

📄 License