AI Chat

Animated chat interface with physics-based input, typing indicator, and aurora burst on send.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

ai-chat.tsx

Usage

import { AiChat } from "@/components/unlumen-ui/ai-chat";

<AiChat />;

API Reference

AiChat

This component is self-contained and takes no props. All state (messages, input, typing indicator) is managed internally.

Notes

  • Physics input: the input bar uses useSpring from motion/react to apply a subtle bounce on focus and a kick-up animation on send.
  • Typing indicator: a three-dot animated indicator appears after a short delay while the assistant "thinks", then is replaced by the reply.
  • Aurora burst: sending a message triggers a brief colored aurora sweep that rises up from the input bar.
  • Auto-resize: the textarea grows with content and collapses back when cleared.
  • Multiline mode: exceeding a single line (or pressing the + button) expands the input area and reveals attachment action buttons with staggered entrance animations.
  • Keyboard: Enter sends, Shift+Enter inserts a new line.

Credits

Inspired by some AI input components from Skiper-ui

Built by léo

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.