Mirrage_1

This is a production-ready Chat Interface component designed specifically for Framer websites. It replicates the look and feel of modern AI chat applications (like ChatGPT or Vercel AI SDK demos) but is built to run entirely within Framer without requiring external NPM packages, stylesheets, or backend code.

Key Features:

• Zero Dependencies: It does not require tailwindcss, lucide-react, or radix-ui. All styling and icons are native, ensuring it works instantly when pasted into any project.

• Simulated Intelligence: It includes a built-in simulation engine. When a user types a message, the component mimics a network delay (customizable duration) and replies with a pre-set "AI" response. This makes it perfect for high-fidelity prototyping or landing page demos.

• Smart Auto-Scrolling: It utilizes a custom useAutoScroll hook that keeps the chat glued to the bottom when new messages arrive but intelligently pauses scrolling if the user manually scrolls up to read history.

• Full Customization:

  • Typography: Integrated with Framer’s native Font controls for precise management of font family, weight, and size.

  • Theming: complete control over primary colors (user bubbles), secondary colors (AI bubbles), and border colors.

  • Assets: Drag-and-drop support for User and AI avatar images.

  • Behavior: Adjustable "Response Delay" to fine-tune the speed of the interaction.