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.

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