✨ Nexus AI Chatbot

A premium, modern React application powered by Vite that connects to Hugging Face's inference APIs to deliver real-time streaming text responses and state-of-the-art image generation. With a sleek glassmorphic design, persistent session management, and a highly responsive layout, Nexus AI provides an engaging and fluid AI assistant experience.

---

🚀 Live Demo & Repository

• GitHub Repository: MythiCODE25/AI-Chatbot

---

✨ Features

• 💬 Real-Time Streaming Chat: Streams answers chunk-by-chunk for a natural conversation flow using the powerful Qwen/Qwen2.5-72B-Instruct model.
• 🎨 FLUX Image Generation: Seamlessly toggle modes to generate high-fidelity images using the state-of-the-art black-forest-labs/FLUX.1-schnell model.
• 💾 Persistent Session Storage: Automatically saves conversation history, active chat sessions, and theme preferences to localStorage.
• 🌗 Persistent Dark/Light Mode: Smooth transitions between light and dark themes, saved to fit your ambient workspace.
• 🪄 Premium Glassmorphic UI/UX: Includes elegant hover states, custom micro-animations, a clean sidebar for chat history management, and quick-start suggestion cards.
• ⚡ Vite-Powered: Built on the latest Vite framework for lightning-fast development, Hot Module Replacement (HMR), and optimized production builds.

---

🛠️ Tech Stack

• Frontend: React 19
• Bundler & Dev Server: Vite 8
• Styling: Vanilla CSS featuring modern layout patterns (Flexbox/Grid), variables, media queries, and high-performance hardware-accelerated animations.
• Inference APIs: Hugging Face Inference API / Chat Completion Router.

---

📁 Directory Structure

AI-Chatbot/
├── public/                  # Static assets
├── src/
│   ├── assets/              # App images and SVG logos
│   ├── components/          # Reusable UI Components
│   │   ├── ChatWindow.jsx   # Core chat container, landing view, and message flow
│   │   ├── ChatWindow.css   # Layout, greeting styles, and landing cards
│   │   ├── InputBar.jsx     # Text input, mode toggle (Text/Image), and send action
│   │   ├── InputBar.css     # Form styling, modern buttons, and dynamic textareas
│   │   ├── MessageBubble.jsx# Individual messages (Text/Image bubbles with loading spinner)
│   │   ├── MessageBubble.css# Chat bubbles, user/bot avatar, and slide-in animations
│   │   ├── Sidebar.jsx      # Chat management list, search, and dark/light mode toggle
│   │   └── Sidebar.css      # Sidebar layout, delete buttons, and action styling
│   ├── App.jsx              # Application state, theme synchronization, and API handlers
│   ├── index.css            # Global CSS variables, scrollbars, and resetting
│   └── main.jsx             # React DOM entry point
├── .env                     # Local environment configurations (API tokens)
├── .gitignore               # Files excluded from git tracking
├── eslint.config.js         # JavaScript linter configurations
├── index.html               # Main HTML entry point
├── package.json             # NPM dependencies and script tasks
└── vite.config.js           # Vite bundler configurations

---

⚙️ Configuration & Environment Variables

To run the application locally, you must specify your Hugging Face API Token in a .env file at the root of the project:

# Hugging Face Access Token (required for API requests)
VITE_HF_TOKEN=your_huggingface_token_here

# Optional: Override the default text generation model
VITE_MODEL_NAME=Qwen/Qwen2.5-72B-Instruct

Note

You can acquire a free access token by creating an account on Hugging Face and visiting your account settings.

---

🚀 Getting Started

Follow these steps to run the project locally on your machine:

1. Clone the repository

git clone https://github.com/MythiCODE25/AI-Chatbot.git
cd "AI chatbot"

2. Install dependencies

npm install

3. Set up environment variables

Create a .env file in the root directory:

touch .env

Paste in your Hugging Face token:

VITE_HF_TOKEN=your_hf_api_token

4. Run the development server

npm run dev

Open your browser and navigate to the local server URL (usually http://localhost:5173).

---

🤝 Contributing

Contributions are welcome! If you have any suggestions, bug fixes, or enhancements:

1. Fork the project.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

---

📄 License

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