Draft Messages

The XML UI components SDK provides a way to create and manage draft messages.

Drafts are disabled by default. In order to enable this feature, you need to enable the ChatUI.draftMessagesEnabled.

Basic Usage

When draft messages are enabled, the logic of saving and deleting drafts will be handled automatically by the SDK. When a user starts typing a message and then navigates away from the conversation, the message content is automatically saved as a draft, for both Channels and Threads.

When the user returns to the conversation, the draft message will be loaded automatically into the composer. If the user clears the composer content or publishes the message, the draft will be deleted.

The draft messages user flow is described in the following diagram:

flowchart LR
    A[User Action]
    A -->|Leave Channel| F[Update Channel Draft]
    A -->|Leave Thread| E[Update Thread Draft]
    A -->|Clear Composer Content| D[Delete Draft]
    A -->|Publish Message| D[Delete Draft]

Customization

By default, the only additional UI added to the SDK when drafts are enabled is a preview of the draft message in the channel list. When a draft is saved, the draft message is shown in the channel list until the message is published or deleted. The message composer is populated with the draft message content as well.

Draft Message on Channel List

The ChannelListView displays the content of the draft message when it is present instead of the last message received within the channel. New attribute has been added to customize the text style of the label that precedes the message.

<io.getstream.chat.android.ui.feature.channels.list.ChannelListView
        android:id="@+id/channelsView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/searchInputView"
        app:streamUiDraftMessageLabelTextColor="@android:color/holo_blue_light"
        />

Transformers can be used to customizee this style dynamically as well:

TransformStyle.channelListStyleTransformer = StyleTransformer<ChannelListViewStyle> {
    it.copy(
        draftMessageLabel = TextStyle(
            size = context.getDimension(R.dimen.draft_message_label_size),
            color = context.getColorCompat(R.color.draft_message_label_color),
        ),
    )
}

Draft Events

By default, the SDK will react whenever a draft is updated or deleted. But, in case your app needs additional logic, these are the available draft events:

• DraftUpdatedEvent: Triggered when a draft is updated.
• DraftDeletedEvent: Triggered when a draft is deleted.

Draft Messages on GlobalState

The GlobalState provides two new properties you can observe to be aware of any new change on the state of the draft messages on different channels and threads.

val globalState = ChatClient.instance().globalState
globalState.channelDraftMessages.collect { draftMessages ->
    // draftMessages is a map of channel id to draft message
}

globalState.threadDraftMessages.collect { threadDraftMessages ->
    // threadDraftMessages is a map of thread message id to draft message
}