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
AJ
Alice
Hey! How's the new design system coming along?
Really well! Just finished the new block previews.
AJ
Alice
That's awesome! Can't wait to see it.
It should be ready for review later today.
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
Alice is typing...
Shows when someone is composing a message.
Typing Indicator.tsx
import { TypingIndicator } from "@launchapp/design-system/blocks/messaging";export default function Page() { return <TypingIndicator userName="Alice" />;}