Chat UI 🤖

A stunning, chat interface built with Next.js 14 and Tailwind CSS. Features a modern design with glass morphism, theme switching, real-time interactions, and fluid animations. Perfect for AI chat applications or modern messaging platforms.

🌓 UI Preview

Dark Theme

Light Theme

✨ Features

🎨 Modern Design

• Stunning gradient effects and animations
• Responsive design that works on all devices
• Beautiful glass-morphism effects
• Dark and light theme support with system preference detection
• Smooth transitions and hover effects
• Animated background blobs

💬 Chat Interface

• Real-time message updates
• Typing indicators with bouncing dots animation
• Auto-expanding text input
• Message threading with user and AI bubbles
• Smart message scrolling with auto-scroll to bottom
• Auto-focus on input after AI responses
• Support for markdown-style bullet points in responses

⚡ User Experience

• Keyboard shortcuts (Enter to send, Shift + Enter for new line)
• Example prompts for quick start
• Loading states and disabled states for better feedback
• Smooth animations for message transitions
• Responsive textarea with auto-height adjustment
• Clear visual hierarchy for messages

🎯 Navigation

• Clean navigation bar with theme switcher
• Back button for easy navigation
• URL parameter support for initial messages
• Seamless routing between pages

🛠 Technical Features

• Built with Next.js 14 and React
• Tailwind CSS for styling
• TypeScript for type safety
• Client-side message handling
• Theme persistence in local storage
• Efficient DOM updates and renders

🚀 Getting Started

Prerequisites

• Node.js 18.0 or later
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/thakurcoderz/ai-chat-ui.git
   cd ai-chat-ui
   

2. Install dependencies:

   npm install
   # or
   yarn install
   

3. Run the development server:

   npm run dev
   # or
   yarn dev
   

4. Open http://localhost:3000 in your browser.

📦 Project Structure

├── app/
│   ├── components/         # Reusable components
│   ├── constants/         # UI constants and text
│   ├── chat/             # Chat page
│   ├── globals.css       # Global styles
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Landing page
├── public/               # Static assets
├── tailwind.config.ts    # Tailwind configuration
└── package.json          # Project dependencies

🎨 Theme Customization

The application uses CSS variables for theming, which can be customized in globals.css:

• Light theme colors
• Dark theme colors
• Gradient colors
• Accent colors

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.