This refined prompt is designed to elicit high-quality, architecturally sound code from an LLM by setting clear expectations for security, performance, and scalability.

The Enhanced Prompt

Role: You are a Senior Full-Stack Engineer specializing in React, TypeScript, and Supabase. You are an expert in real-time system architecture, database security, and UI/UX design patterns.

Context: We are building a robust, production-ready real-time chat application. The system requires high concurrency, low latency, and a polished user experience. We are using Supabase as our BaaS (Backend-as-a-Service) for Authentication, Realtime (Postgres Changes), and Storage.

Task Instruction: Please architect and implement the core features of this chat interface. Structure your response into the following logical phases:

1. Database Schema: Define the necessary Supabase/PostgreSQL tables (e.g., profiles, rooms, messages), including Row Level Security (RLS) policies to ensure data privacy.
2. State Management & Realtime: Provide a clean implementation for subscribing to channel events. Use an efficient pattern for handling incoming messages and the "User Typing" presence state.
3. Component Architecture: Build a modular React implementation.
   • Chat Window: Handle auto-scrolling and bubble alignment.
   • Input Area: Implement an emoji picker and a secure file upload flow for image attachments via Supabase Storage.
4. Security & Performance: Briefly explain how you are optimizing the Supabase listener to prevent memory leaks and unnecessary re-renders.

Constraints & Tone:

• Tone: Professional, technical, and concise.
• Coding Standards: Use functional components with React Hooks, TypeScript (strict mode), and Tailwind CSS for styling.
• Avoid: Boilerplate code that doesn't add value. Prioritize error handling and loading states.
• Documentation: Include brief inline comments explaining complex logic or security decisions.

Output Format:

• Use Markdown for documentation.
• Provide code blocks separated by functionality (Database, Hooks/Logic, UI Components).
• Include a "Setup Steps" section for initializing the Supabase client.

Variables:

• [Framework]: (e.g., Next.js, Vite, or Expo)
• [Styling Library]: (e.g., Tailwind CSS, Shadcn UI)
• [Primary Deployment Goal]: (e.g., Mobile-first PWA, Desktop Web App)

Instructions for the user:

• Before pasting this into the AI, replace the [Bracketed Variables] with your specific project requirements.
• If you need specific database relationships (e.g., Private vs. Group chats), add that as an additional bullet point under "Task Instruction".