React TypeScript ChatBot

A modern, responsive chatbot component built with React and TypeScript. Features a floating chat icon that opens a beautiful chat window, similar to support chatbots found on many websites.

Features

• 🎨 Modern Design: Beautiful gradient UI with smooth animations
• 💬 Interactive Chat: Real-time messaging with typing indicators
• 📱 Responsive: Works perfectly on desktop and mobile devices
• ⚡ Fast: Built with Vite for lightning-fast development
• 🎯 TypeScript: Fully typed for better development experience
• 🔧 Customizable: Easy to modify and extend

Demo

The chatbot includes:

• Floating chat icon in the bottom-right corner
• Smooth slide-up animation when opening
• Auto-responses to common greetings and questions
• Typing indicator for bot responses
• Message timestamps
• Scrollable message history
• Responsive design that adapts to mobile screens

Getting Started

Prerequisites

• Node.js (version 20.19+ or 22.12+)
• npm or yarn

Installation

1. Clone or download this project

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173/

Building for Production

npm run build

The built files will be in the dist directory.

Usage

The chatbot is already integrated into the main App component. Simply click the chat icon in the bottom-right corner to start chatting.

Customization

You can customize the chatbot by modifying:

• src/components/ChatBot.tsx - Main component logic
• src/components/ChatBot.css - Styling and animations
• Response logic - Update the generateResponse function to customize bot responses

Example Customizations

1. Change Colors: Modify the gradient colors in the CSS file
2. Add API Integration: Replace the mock generateResponse function with actual API calls
3. Modify Position: Change the bottom and right properties in CSS
4. Add Features: Extend with file uploads, emoji picker, or rich text support

Component Structure

src/
├── components/
│   ├── ChatBot.tsx     # Main chatbot component
│   └── ChatBot.css     # Chatbot styles
├── App.tsx             # Main app component
└── main.tsx           # App entry point

Technologies Used

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• CSS3 - Styling with animations and gradients

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

Feel free to submit issues and enhancement requests!

License

This project is open source and available under the MIT License.

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      ...tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      ...tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      ...tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])