Chat conversation
Alternating chat rows with avatars and entrance motion.
Preview & code
GFA Studio CLI · Coming soon
GFA just shared a new component.
Whoa — checking it right now.
How does it look?
Bro, let him cook!
Installation
CLI
GFA Studio CLI — Coming soon
The `npx gfa-studio` installer is not published yet. Use Manual install below or download the artifact JSON.
Artifact JSON
https://ui.gkhn.dev/gfa/chat-conversation.jsonManual
- Download the component source from https://ui.gkhn.dev/gfa/chat-conversation.json (or copy from this repo: apps/web/src/blocks/gfa/chat-conversation.tsx).
- Place it in your project (for example: ./src/blocks/gfa/chat-conversation.tsx) and adjust imports/aliases.
- Ensure cn from @/lib/utils exists.
- Theme tokens and utilities should align with globals.css.
Dependencies
Uses next/image, Motion (motion/react with useInView and useReducedMotion), and cn from @/lib/utils. Client-only; animations start once when the root intersects the viewport.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | ChatMessage[] | CHAT_CONVERSATION_DEMO_MESSAGES | Ordered thread to render; each entry needs id, side, text, and avatarSrc (remote URLs must be allowed in next.config images.remotePatterns). |
| className | string | — | Optional wrapper classes on the outer column (e.g. max width or padding). |
`ChatMessage` shape
Each row needs a stable string id, side ("left" | "right"), bubble text, and avatarSrc for next/image. Pass messages to override the default thread, or import CHAT_CONVERSATION_DEMO_MESSAGES to reuse the built-in copy.