AI Assistant Card Component

A modern, responsive AI chat interface component built with Next.js, TypeScript, Tailwind CSS, and shadcn/ui.

✨ Features

• 🎨 Modern UI Design - Clean, professional interface with gradient backgrounds and smooth animations
• 📱 Fully Responsive - Works perfectly on desktop, tablet, and mobile devices
• ⌨️ Keyboard Shortcuts - Press Enter to send messages, Shift+Enter for new lines
• 🎯 Interactive Prompts - Quick-start buttons for common AI tasks
• 💬 Real-time Chat - Smooth message flow with typing indicators
• 🎭 Theme Support - Built-in dark/light mode compatibility
• ♿ Accessible - WCAG compliant with proper focus management
• 🚀 Performance Optimized - Fast loading and smooth interactions

🛠️ Tech Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• Package Manager: pnpm

📦 Installation

1. Clone the repository

   git clone <repository-url>
   cd ai-assistant-card

2. Install dependencies

   pnpm install

3. Run the development server

   pnpm run dev

4. Open your browser Navigate to http://localhost:3000

🎯 Usage

Basic Implementation

import { Component as AIAssistantCard } from "@/components/ui/ai-assistant-card";

export default function ChatPage() {
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <AIAssistantCard />
    </div>
  );
}

Component Features

1. Interactive Prompt Badges

• Click on any badge to auto-fill the input with suggested prompts
• Categories: Image Creation, Data Analysis, Planning, Text Summarization, Writing, and More

2. Message Handling

• Type your message and press Enter to send
• Messages appear in a chat-like interface
• AI responses are simulated with "I am AI" for demo purposes

3. Model Selection

• Choose from different AI models (GPT-4, GPT-3.5, etc.)
• Located above the input field for easy access

4. Responsive Design

• Adapts to different screen sizes
• Mobile-optimized touch interactions
• Scalable text and spacing

🎨 Customization

Styling

The component uses Tailwind CSS classes and can be customized by modifying:

// Main card styling
<Card className="flex h-full min-h-[600px] sm:min-h-[700px] lg:min-h-[800px] w-full max-w-[320px] sm:max-w-[400px] lg:max-w-[480px] flex-col gap-4 sm:gap-6 p-4 sm:p-6 shadow-lg border-0 bg-gradient-to-br from-background to-muted/20">

// Message bubbles
<div className="bg-gradient-to-br from-primary to-primary/90 text-primary-foreground">

// Input field
<Textarea className="bg-muted/30 hover:bg-muted/40 focus:bg-muted/50 ... border-2 border-border/40 hover:border-border/70 focus:border-primary/70">

Colors

Modify the badge colors by updating the className:

// Blue badge
className="... border-blue-200/50 bg-blue-50/50 hover:bg-blue-100/50 text-blue-700"

// Orange badge  
className="... border-orange-200/50 bg-orange-50/50 hover:bg-orange-100/50 text-orange-700"

API Integration

Replace the fake API call with your actual endpoint:

const sendMessage = async () => {
  // Replace this with your API call
  const response = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: inputValue, model: selectedModel })
  });
  
  const data = await response.json();
  // Handle response...
};

📁 Project Structure

src/
├── app/
│   ├── globals.css          # Global styles with Tailwind
│   ├── layout.tsx           # Root layout
│   └── page.tsx             # Demo page
├── components/ui/           # shadcn/ui components
│   ├── ai-assistant-card.tsx # Main AI chat component
│   ├── badge.tsx
│   ├── button.tsx
│   ├── card.tsx
│   ├── select.tsx
│   └── textarea.tsx
└── lib/
    └── utils.ts             # Utility functions

🔧 Available Scripts

# Development
pnpm run dev          # Start development server
pnpm run build        # Build for production
pnpm run start        # Start production server
pnpm run lint         # Run ESLint

🎭 Component Props

The main component accepts the following customization options:

interface AIAssistantCardProps {
  // Add custom props here as needed
  className?: string;
  onMessageSend?: (message: string) => void;
  onModelChange?: (model: string) => void;
}

🌟 Key Features Breakdown

1. Responsive Design

• Mobile-first approach
• Breakpoints: sm: (640px+), lg: (1024px+)
• Adaptive text sizes and spacing

2. Accessibility

• Proper ARIA labels
• Keyboard navigation support
• Focus management
• Screen reader friendly

3. Performance

• Optimized re-renders with React hooks
• Smooth animations with CSS transitions
• Lazy loading where applicable

4. User Experience

• Intuitive interface design
• Clear visual feedback
• Smooth interactions
• Loading states

🐛 Troubleshooting

Common Issues

1. Build Errors

   # Clear cache and reinstall
   rm -rf node_modules .next
   pnpm install
   pnpm run build

2. Styling Issues

   • Ensure Tailwind CSS is properly configured
   • Check that all shadcn/ui components are installed

3. TypeScript Errors

   • Verify all dependencies are installed
   • Check tsconfig.json configuration

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• shadcn/ui for the beautiful UI components
• Tailwind CSS for the utility-first CSS framework
• Lucide for the icon set
• Next.js for the React framework

---

Made with ❤️ by [KJAIML]