messaging/DSMessageBubble

DSMessageBubble

messaging

since v1.2

Chat message bubble with support for custom content, loading states, avatars, and asymmetric styling for user vs. other messages.

iOS 17+macOS 14+

Purpose

Display chat messages, AI responses, or conversational interfaces with rich content and visual distinction between senders.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
contentreq	AnyView	—	Custom content to display in the bubble (text, images, rich content)
isFromUserreq	Bool	—	Whether message is from the current user (affects alignment and styling)
timestamp	Date?	nil	Optional message timestamp
senderName	String?	nil	Optional sender name (shown for non-user messages)
avatar	AnyView?	nil	Custom avatar view (shown for non-user messages)
isLoading	Bool	false	Show typing indicator animation

Examples

Simple text message

Basic text bubble using convenience initializer.

swift

DSMessageBubble(
    text: "Hey! How's it going?",
    isFromUser: true,
    timestamp: Date()
)

AI assistant response

Message from AI with avatar and sender name.

swift

DSMessageBubble(
    text: "I can help you with that! Here are three suggestions...",
    isFromUser: false,
    timestamp: Date(),
    senderName: "AI Assistant",
    avatarText: "AI"
)

Loading state

Show typing indicator while waiting for response.

swift

DSMessageBubble(
    text: "",
    isFromUser: false,
    senderName: "Assistant",
    avatarText: "A",
    isLoading: true
)

Custom content

Rich content with images or custom views.

swift

DSMessageBubble(
    content: AnyView(
        VStack(alignment: .leading, spacing: 8) {
            Text("Check out this design!")
                .dsTextStyle(.bodyMd)
            Image("preview")
                .resizable()
                .scaledToFit()
                .frame(height: 200)
                .cornerRadius(DSRadius.md)
        }
    ),
    isFromUser: true,
    timestamp: Date()
)

When to Use

✓ Use DSMessageBubble for:

• Chat interfaces (1-on-1, group, or AI)
• Messaging apps with conversational UI
• Customer support chat widgets
• AI assistant interactions

✗ Avoid using for:

• Non-conversational notifications (use DSToast or DSAlert)
• Comments or reviews (use DSCard with author info)

Consider instead:

DSToast

For system notifications

DSCard

For non-conversational content with author info

Accessibility

VoiceOver

Announces sender, message content, and timestamp (e.g., 'You, 10:30' or 'John, Hello there, 10:25'). Loading state announces 'Typing...'

Keyboard

Dynamic Type

✓ Supported

Contrast

Colors follow design best practices with adaptive bubble colors for light/dark modes

Traits

.isStaticText for message contentSender context ('You' vs sender name)Timestamp included in announcement

Related Components

ChatInputBar