Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Chatly is a premium dark-mode mobile AI chat application designed to facilitate intuitive interactions with AI. The app focuses on providing seamless conversations, web search capabilities, image creation, and document management, all within a clean and minimal aesthetic.

## CORE FEATURES
1. **Home Screen**: A welcoming interface with a central greeting and easy access to key features through glassmorphism-style buttons.
2. **Chat Interface**: An interactive chat area displaying distinct message bubbles for user and AI responses, complete with a typing indicator and smooth scrolling.
3. **Side Drawer Menu**: A sliding menu from the left featuring app navigation, recent chats, and an upgrade option, ensuring easy access to all functionalities.
4. **Input Area**: A persistent input box for user queries, with options for attachments and AI model selection, enhancing the chat experience.
5. **Profile Section**: A simple settings sheet accessible via the user avatar, allowing users to manage their display name and settings.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design emphasizes clean lines, ample white space, and a focus on typography for an elegant user experience.
- **Color Mode**: Light theme with dark text on light backgrounds, promoting readability and accessibility.
- **Layout**: 
  - Home Screen: Central greeting with a hamburger menu and profile avatar, flanked by feature buttons in a 2+1 grid.
  - Chat Interface: Scrollable area for messages with a clear distinction between user and AI messages.
  - Side Drawer: Slides in from the left with a dark overlay, featuring navigation options and recent chats.
- **Typography**: Use the Inter font with a strong size hierarchy to enhance readability: large for greetings, medium for body text.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust type checking and improved developer experience.
- **Styling**: Tailwind CSS for rapid styling and adherence to a minimalist aesthetic.
- **UI Components**: Utilize the shadcn/ui Sheet component for the side drawer implementation.
- **State Management**: Local state management using React's `useState` and `Context` for chat messages and drawer state.

## IMPLEMENTATION STEPS
1. **Set Up the React Project**: Create a new React project with TypeScript support and install Tailwind CSS.
2. **Create the Home Screen**: 
   - Implement the full black background and central greeting text.
   - Add the hamburger menu and profile avatar in the top corners.
   - Develop the glassmorphism-style buttons for Web Search, Create Image, and AI Documents in a 2+1 grid layout.
3. **Build the Chat Interface**: 
   - Design a scrollable area for message display, incorporating distinct user and AI message bubbles.
   - Add a typing indicator animation for AI responses and ensure smooth scrolling behavior.
4. **Develop the Side Drawer Menu**: 
   - Implement the sliding drawer with a dark overlay, housing navigation items and recent chat history.
   - Include an upgrade card with a gradient button at the bottom.
5. **Create the Input Area**: 
   - Add a floating input box with attachment options, AI model selection, and microphone integration.
   - Include a subtle disclaimer text for user awareness.
6. **Implement Profile Settings**: 
   - Design a settings sheet that opens when the avatar is tapped, displaying user configurations.
7. **Test for Responsiveness**: Ensure the app is optimized for a 390×844 viewport and responsive up to tablet sizes.

## USER EXPERIENCE
Users will be greeted with a friendly message on the home screen, easily navigating through the app via the hamburger menu. Engaging in conversations is seamless, with smooth transitions to the chat interface and clear message differentiation. The side drawer provides a user-friendly way to access recent chats and tools, while the input area encourages interaction with AI. The overall experience is designed to be intuitive, responsive, and visually appealing, promoting user engagement and satisfaction.