[PBE-4800] Support Voice Recording in Compose

CHANGELOG.md

@@ -78,6 +78,7 @@
 ### ✅ Added
 - Add a default theme for `MediaPreviewActivity` and `MediaGalleryPreviewActivity`. [#5391](https://github.com/GetStream/stream-chat-android/pull/5391)
 - Added typing indicator on `ChannelList`. [#5399](https://github.com/GetStream/stream-chat-android/pull/5399)
+- Added support for Audio Recording feature. [#5404](https://github.com/GetStream/stream-chat-android/pull/5404)
 
 ### ⚠️ Changed
 

buildSrc/src/main/kotlin/io/getstream/chat/android/Dependencies.kt

@@ -11,11 +11,12 @@ object Versions {
     internal const val ANDROIDX_ANNOTATIONS = "1.6.0"
     internal const val ANDROIDX_APPCOMPAT = "1.6.1"
     internal const val ANDROIDX_COMPOSE = "1.6.8"
+    internal const val ANDROIDX_COMPOSE_CONSTRAINT_LAYOUT = "1.0.1"
     internal const val ANDROIDX_COMPOSE_MATERIAL3 = "1.2.1"
     internal const val ANDROIDX_CORE_TEST = "2.2.0"
     internal const val ANDROIDX_FRAGMENT = "1.6.1"
     internal const val ANDROIDX_KTX = "1.10.1"
-    internal const val ANDROIDX_LIFECYCLE = "2.6.1"
+    internal const val ANDROIDX_LIFECYCLE = "2.8.5"
     internal const val ANDROIDX_NAVIGATION = "2.5.3"
     internal const val ANDROIDX_PREFERENCES = "1.2.1"
     internal const val ANDROIDX_RECYCLERVIEW = "1.3.1"
@@ -121,6 +122,7 @@ object Dependencies {
     const val composeCompilerPlugin = "org.jetbrains.kotlin:compose-compiler-gradle-plugin:${Versions.KOTLIN}"
     const val composeRuntime = "androidx.compose.runtime:runtime:${Versions.ANDROIDX_COMPOSE}"
     const val composeUi = "androidx.compose.ui:ui:${Versions.ANDROIDX_COMPOSE}"
+    const val composeConstraintLayout = "androidx.constraintlayout:constraintlayout-compose:${Versions.ANDROIDX_COMPOSE_CONSTRAINT_LAYOUT}"
     const val composeUiTest = "androidx.compose.ui:ui-test-junit4:${Versions.ANDROIDX_COMPOSE}"
     const val composeUiTestManifest = "androidx.compose.ui:ui-test-manifest:${Versions.ANDROIDX_COMPOSE}"
     const val composeUiTooling = "androidx.compose.ui:ui-tooling:${Versions.ANDROIDX_COMPOSE}"
@@ -139,6 +141,7 @@ object Dependencies {
     const val composeLandscapistPlaceholder = "com.github.skydoves:landscapist-placeholder:${Versions.LANDSCAPIST}"
     const val composeLandscapistAnimation = "com.github.skydoves:landscapist-animation:${Versions.LANDSCAPIST}"
     const val composeLifecycle = "androidx.lifecycle:lifecycle-runtime-compose:${Versions.ANDROIDX_LIFECYCLE}"
+    const val composeAndroidLifecycle = "androidx.lifecycle:lifecycle-runtime-compose-android:${Versions.ANDROIDX_LIFECYCLE}"
     const val coroutinesAndroid = "org.jetbrains.kotlinx:kotlinx-coroutines-android:${Versions.COROUTINES}"
     const val coroutinesCore = "org.jetbrains.kotlinx:kotlinx-coroutines-core:${Versions.COROUTINES}"
     const val coroutinesTest = "org.jetbrains.kotlinx:kotlinx-coroutines-test:${Versions.COROUTINES}"

docusaurus/docs/Android/compose/guides/enabling-audio-recording.mdx

@@ -0,0 +1,228 @@
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# 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`:
+
+```kotlin
+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.
+
+```kotlin
+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](https://github.com/GetStream/stream-chat-android/blob/main/stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/theme/messages/composer/AudioRecordingTheme.kt).
+:::
+
+## Customization
+
+### Customize `MessageComposer`
+
+You can customize the audio recording theming by overriding `MessageComposerTheme.audioRecording` in `ChatTheme`.
+
+```kotlin
+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`:
+
+```kotlin
+public data class MessageComposerTheme(
+    //...
+    val audioRecording: AudioRecordingTheme,
+    val attachmentsPreview: AttachmentsPreviewTheme,
+    //...
+)
+```
+
+The `AudioRecordingTheme` contains the following attributes:
+
+```kotlin
+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`:
+
+```kotlin
+public data class AttachmentsPreviewTheme(
+    //...
+    val audioRecording: AudioRecordingAttachmentPreviewTheme,
+    //...
+)
+```
+
+And `AudioRecordingAttachmentPreviewTheme` contains the following attributes:
+
+```kotlin
+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`.
+
+```kotlin
+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`:
+
+```kotlin
+public data class MessageTheme(
+    //...
+    val audioRecording: AudioRecordingAttachmentTheme,
+    //...
+)
+```
+
+And `AudioRecordingAttachmentTheme` contains the following attributes:
+
+```kotlin
+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,
+)
+```

docusaurus/sidebars-android.js

@@ -94,6 +94,7 @@ module.exports = {
           ],
         },
         "compose/guides/custom-translations",
+        "compose/guides/enabling-audio-recording",
         "compose/guides/customizing-image-and-video-previews",
         "compose/guides/implementing-own-capabilities",
       ]

stream-chat-android-client/api/stream-chat-android-client.api

@@ -578,14 +578,30 @@ public final class io/getstream/chat/android/client/api/models/WatchChannelReque
 }
 
 public final class io/getstream/chat/android/client/audio/NativeMediaPlayer$Companion {
+	public static final field MEDIA_ERROR_ALREADY_EXISTS I
+	public static final field MEDIA_ERROR_BAD_INDEX I
+	public static final field MEDIA_ERROR_BAD_TYPE I
+	public static final field MEDIA_ERROR_BAD_VALUE I
+	public static final field MEDIA_ERROR_DEAD_OBJECT I
+	public static final field MEDIA_ERROR_FAILED_TRANSACTION I
+	public static final field MEDIA_ERROR_INVALID_OPERATION I
 	public static final field MEDIA_ERROR_IO I
+	public static final field MEDIA_ERROR_JPARKS_BROKE_IT I
 	public static final field MEDIA_ERROR_MALFORMED I
+	public static final field MEDIA_ERROR_NAME_NOT_FOUND I
+	public static final field MEDIA_ERROR_NOT_ENOUGH_DATA I
 	public static final field MEDIA_ERROR_NOT_VALID_FOR_PROGRESSIVE_PLAYBACK I
+	public static final field MEDIA_ERROR_NO_INIT I
+	public static final field MEDIA_ERROR_NO_MEMORY I
+	public static final field MEDIA_ERROR_OK I
+	public static final field MEDIA_ERROR_PERMISSION_DENIED I
 	public static final field MEDIA_ERROR_SERVER_DIED I
 	public static final field MEDIA_ERROR_SYSTEM I
 	public static final field MEDIA_ERROR_TIMED_OUT I
 	public static final field MEDIA_ERROR_UNKNOWN I
+	public static final field MEDIA_ERROR_UNKNOWN_ERROR I
 	public static final field MEDIA_ERROR_UNSUPPORTED I
+	public static final field MEDIA_ERROR_WOULD_BLOCK I
 }
 
 public final class io/getstream/chat/android/client/audio/WaveformExtractorKt {

stream-chat-android-client/detekt-baseline.xml

@@ -2,6 +2,7 @@
 <SmellBaseline>
   <ManuallySuppressedIssues/>
   <CurrentIssues>
+    <ID>ComplexCondition:NativeMediaPlayerMock.kt$NativeMediaPlayerMock$_state != NativeMediaPlayerState.PREPARED &amp;&amp; _state != NativeMediaPlayerState.PAUSED &amp;&amp; _state != NativeMediaPlayerState.STARTED &amp;&amp; _state != NativeMediaPlayerState.PLAYBACK_COMPLETED</ID>
     <ID>ForbiddenComment:MessageUtils.kt$// TODO: type should be a sealed/class or enum at the client level</ID>
     <ID>FunctionOnlyReturningConstant:StringExtensionsKtTest.kt$StringExtensionsKtTest.Companion$fun createStreamCdnImageLinkWithoutDimensionParameters()</ID>
     <ID>LongMethod:ChatClient.kt$ChatClient$private suspend fun handleEvent(event: ChatEvent)</ID>

stream-chat-android-client/src/main/java/io/getstream/chat/android/client/ChatClient.kt

@@ -2852,6 +2852,11 @@ internal constructor(
         return runCatching { userStateService.state.userOrError() }.getOrNull()
     }
 
+    @InternalStreamChatApi
+    public fun getCurrentOrStoredUserId(): String? {
+        return getCurrentUser()?.id ?: getStoredUser()?.id
+    }
+
     public fun getCurrentToken(): String? {
         return runCatching {
             when (userStateService.state) {