screens/DSChatBubble

DSChatBubble

screens

since v2.0

Message bubble with sent/received alignment, timestamp, delivery status indicators, and support for text, image, and audio messages.

iOS 17+macOS 14+

Purpose

Chat UIs, comment threads, and in-app messaging screens.

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.

Variants

.sent

Right-aligned. Primary colour background.

.received

Left-aligned. Secondary surface background.

.system

Centred. Used for event messages like 'User joined'.

Props

Prop	Type	Default	Description
messagereq	DSMessage	—	Message model (text, type, timestamp, status).
showAvatar	Bool	true	Shows sender avatar (received only).
onLongPress	(() -> Void)?	nil	Long-press action (shows context menu).

Examples

Chat screen

Scrollable message list.

swift

ScrollView {
    LazyVStack(spacing: DSSpacing.xs) {
        ForEach(messages) { message in
            DSChatBubble(
                message: message,
                showAvatar: message.senderId != currentUser.id
            ) {
                showMessageActions(message)
            }
        }
    }
    .padding(.horizontal, DSSpacing.md)
}

Related Components

Avatar ContextMenu