Voice Recording

Introduction

The Compose UI Components Chat SDK provides the flexibility to customize the visual presentation of audio recording. You can personalize the way audio recording is displayed and make it more unique according to your preferences and requirements.

Enabling Audio Recording

MessageComposer in Compose UI Components serves as the container where audio recording functionality is rendered. It provides the necessary components and elements to handle the recording process and display relevant user interface elements related to audio recording.

Let's display enabled audio recording button by setting AudioRecordingTheme.enabled to true in our MessageComposerTheme:

ChatTheme(
    messageComposerTheme = MessageComposerTheme.defaultTheme().let {
        it.copy(
            audioRecording = it.audioRecording.copy(
                enabled = true,
            ),
        )
    },
) {
    // Your UI
}

This will show the microphone button in the MessageComposer next to the send button.

Send and Record buttons visibility

If you want to show the send button only when there's text in the input, you can do that by setting AudioRecordingTheme.showRecordButtonOverSend to true in the MessageComposerTheme. This way, the send button will only be visible when there's something typed in the composer.

ChatTheme(
    messageComposerTheme = MessageComposerTheme.defaultTheme().let {
        it.copy(
            audioRecording = it.audioRecording.copy(
                enabled = true,
                showRecordButtonOverSend = true,
            ),
        )
    },
) {
    // Your UI
}

note

Only certain attributes were used here, you can find the rest in the source code here.

Customization

Customize MessageComposer

You can customize the audio recording theming by overriding MessageComposerTheme.audioRecording in ChatTheme.

ChatTheme(
    messageComposerTheme = MessageComposerTheme.defaultTheme().let {
        it.copy(
            audioRecording = it.audioRecording.copy(
                // Customize the audio recording theme here
            ),
        )
    },
) {
    // Your UI
}

The MessageComposerTheme contains the AudioRecordingTheme and AttachmentsPreviewTheme:

public data class MessageComposerTheme(
    //...
    val audioRecording: AudioRecordingTheme,
    val attachmentsPreview: AttachmentsPreviewTheme,
    //...
)

The AudioRecordingTheme contains the following attributes:

public data class AudioRecordingTheme(
    /** Whether the audio recording feature is enabled. */
    val enabled: Boolean,
    
    /** Sends the recording on "Complete" button click.  If false, attaches it for manual sending. */
    val sendOnComplete: Boolean,
    
    /** Whether to show the record button over the send button. */
    val showRecordButtonOverSend: Boolean,
    
    /** The style for the record button. */
    val recordButton: IconContainerStyle,
    
    /** The theme for the floating icons. */
    val floatingIcons: AudioRecordingFloatingIconsTheme,
    
    /** The theme for the slide to cancel component. */
    val slideToCancel: AudioRecordingSlideToCancelTheme,
    
    /** The theme for the audio recording playback component. */
    val playback: AudioRecordingPlaybackTheme,
    
    /** The theme for the audio recording controls component. */
    val controls: AudioRecordingControlsTheme,
    
    /** The theme for the hold to record component. */
    val holdToRecord: AudioRecordingHoldToRecordTheme,
    
    /** The theme for the permission rationale component. */
    val permissionRationale: AudioRecordingPermissionRationaleTheme,
)

The AttachmentsPreviewTheme contains the AudioRecordingAttachmentPreviewTheme:

public data class AttachmentsPreviewTheme(
    //...
    val audioRecording: AudioRecordingAttachmentPreviewTheme,
    //...
)

And AudioRecordingAttachmentPreviewTheme contains the following attributes:

public data class AudioRecordingAttachmentPreviewTheme(
    
    /** The size of the audio recording attachment preview. */
    public val size: ComponentSize,
    
    /** The padding for the audio recording attachment preview. */
    public val padding: ComponentPadding,
    
    /** The style for the play button. */
    public val playButton: IconContainerStyle,
    
    /** The style for the pause button. */
    public val pauseButton: IconContainerStyle,

    /** The style for the timer component. */
    public val timerStyle: TextContainerStyle,
    
    /** The style for the waveform slider. */
    public val waveformSliderStyle: WaveformSliderLayoutStyle,
)

Customize MessageList

To customize the audio recording attachment in the MessageList, you can override MessageTheme.audioRecording in ChatTheme.

ChatTheme(
    ownMessageTheme = MessageTheme.defaultOwnTheme().let {
        it.copy(
            audioRecording = AudioRecordingAttachmentTheme.defaultOwnTheme().copy(
                // Customize the audio recording attachment theme here
            ),
        )
    },
    otherMessageTheme = MessageTheme.defaultOtherTheme().let {
        it.copy(
            audioRecording = AudioRecordingAttachmentTheme.defaultOtherTheme().copy(
                // Customize the audio recording attachment theme here
            ),
        )
    },
) {
    // Your UI
}

The MessageTheme contains the AudioRecordingAttachmentTheme:

public data class MessageTheme(
    //...
    val audioRecording: AudioRecordingAttachmentTheme,
    //...
)

And AudioRecordingAttachmentTheme contains the following attributes:

public data class AudioRecordingAttachmentTheme(
    /** The size of the audio recording attachment. */
    public val size: ComponentSize,
    
    /** The padding for the audio recording attachment. */
    public val padding: ComponentPadding,
    
    /** The style for the play button. */
    public val playButton: IconContainerStyle,
    
    /** The style for the pause button. */
    public val pauseButton: IconContainerStyle,

    /** The style for the timer component. */
    public val timerStyle: TextContainerStyle,
    
    /** The style for the waveform slider. */
    public val waveformSliderStyle: WaveformSliderLayoutStyle,
    
    /** The width of the tail container which holds the speed button and the content type icon. */
    public val tailWidth: Dp,
    
    /** The style for the speed button. */
    public val speedButton: TextContainerStyle,
    
    /** The style for the content type icon. */
    public val contentTypeIcon: IconStyle,
)