More customization around message bubble layout

[GiamoE]

We need to render custom message types that don't fit the standard bubble layout:

• System announcements that span full width
• Custom notifications that need different styling

Currently we implement this using AttachmentFactory, which renders inside the bubble with ~75% width constraint and can't remove the bubble background.

iOS SDK Already Has This

The iOS SDK provides ChatMessageLayoutOptions where you can remove .bubble, control alignment, and create full-width messages. Android Compose SDK doesn't have equivalent functionality.

Proposed Solution

Change visibility from internal to public:

// Current @Composable internal fun LazyItemScope.DefaultMessageContainer(...)

// Proposed @Composable public fun LazyItemScope.DefaultMessageContainer(...)

This allows developers to:

• Render custom message types conditionally
• Fall back to default rendering for regular messages
• Avoid reimplementing entire message UI
• Mix custom and default rendering in same list

Do let me know if I missed some thing and if there are other ways to achieve my use case!

With kind regards, Giamo

[VelikovPetar]

Hi @GiamoE,

Have you maybe checked the ChatComponentFactory (docs)? One of the things it allows is to customise the MessageBubble:

class CustomChatComponentFactory : ChatComponentFactory{

    @Composable
    override fun MessageBubble(
        modifier: Modifier,
        message: Message,
        color: Color,
        shape: Shape,
        border: BorderStroke?,
        contentPadding: PaddingValues,
        content: @Composable (() -> Unit),
    ) {
        // Render just the content, without the bubble background
        content()
    }
}

You can also use to override other specific UI components, such as the MessageListItemContainer.

Concerning exposing LazyItemScope.DefaultMessageContainer - you can use MessageContainer instead - the LazyItemScope.DefaultMessageContainer is just our internal wrapper around the MessageContainer and they are equivalent.

About the message item width, we already provide a way to customise the max item width via a property from the StreamDimens class:

ChatTheme(
    dimens = StreamDimens.defaultDimens().copy(
        messageItemMaxWidth = 900.dp
    ),
) {
    MessagesScreen(...)
}

Let me know if this solves your issues!

Best regards, Petar