Messaging
Chat interfaces, message bubbles, and typing indicators for real-time messaging.
Chat Interface
Full chat UI with message bubbles, typing indicator, and send input.
Preview
Alice
Press Enter to send, Shift+Enter for new line
Chat Interface.tsx
import { ChatInterface } from "@launchapp/design-system/blocks/messaging";const messages = [ { id: "1", content: "Hey! How's it going?", sender: { id: "user1", name: "Alice" }, timestamp: "10:00 AM", isOwn: false }, { id: "2", content: "Great, thanks! Working on the new feature.", sender: { id: "me", name: "Me" }, timestamp: "10:01 AM", isOwn: true },];export default function Page() { return ( <ChatInterface messages={messages} title="Alice" onSend={(msg) => console.log("send", msg)} /> );}Message Bubbles
Chat message bubble components for own and other messages.
Preview
No preview available
See the code snippet below for usage.
Message Bubbles.tsx
import { MessageBubbles } from "@launchapp/design-system/blocks/messaging";const messages = [ { id: "1", content: "Hello there!", isOwn: false, sender: "Alice", timestamp: "10:00 AM" }, { id: "2", content: "Hi Alice!", isOwn: true, timestamp: "10:01 AM" },];export default function Page() { return <MessageBubbles messages={messages} />;}Typing Indicator
Animated typing indicator showing when someone is composing a message.
Preview
No preview available
See the code snippet below for usage.
Typing Indicator.tsx
import { TypingIndicator } from "@launchapp/design-system/blocks/messaging";export default function Page() { return <TypingIndicator userName="Alice" />;}