🚀 Features

-> Authentication UI (AuthForm.jsx) for login/signup

-> Chat Application Layout (ChatApp.jsx) with sidebar, messages, and input

-> Interactive Chat Interface (ChatInterface.jsx)

-> Reusable Components

-> ChatMessage.jsx → Renders individual chat messages

-> ChatInput.jsx → Input field with placeholder animations

-> ChatSidebar.jsx → Sidebar for navigation/history

-> PlaceholderField.jsx & PlaceholderInput.jsx → UI enhancements

-> Error Handling (NotFound.jsx).

📂 Project Structure

src/ | └── components/

  ├── UI/                   # UI-specific components
  
  ├── lib/                  # Utility functions
  
  ├── AuthForm.jsx          # Authentication form
  
  ├── ChatApp.jsx           # Main Chat Application wrapper
  
  ├── ChatInput.jsx         # Chat input field
  
  ├── ChatInterface.jsx     # Chat interface (messages + input)
  
  ├── ChatMessage.jsx       # Single chat message UI
  
  ├── ChatSidebar.jsx       # Sidebar with options/chat history
  
  ├── NotFound.jsx          # 404 page
  
  ├── PlaceholderField.jsx  # Placeholder field component
  
  └── PlaceholderInput.jsx  # Placeholder input component

🛠️ Tech Stack

Frontend: React + Vite

Styling: Tailwind CSS / Custom CSS

UI Components: Radix UI, ShadCN (optional based on usage)

⚡ Getting Started

Clone the repo

git clone https://github.com/harsharora-code/ChatBot-UI.git

cd ChatBot-UI

1. Install dependencies

npm install

2. Start development server

npm run dev

3. Build for production

npm run build

4. Preview production build

npm run preview