Update from GetStream/stream-chat-android@d579324

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

@@ -0,0 +1,201 @@
+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/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`
+
+```kotlin
+public data class MessageComposerTheme(
+    //...
+    val audioRecording: AudioRecordingTheme,
+    //...
+)
+```
+
+And `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,
+)
+```
+
+### 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 height of the audio recording attachment. */
+    public val height: Dp,
+
+    /** 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 width of the timer text. */
+    public val timerTextWidth: Dp,
+
+    /** The text style for the timer text. */
+    public val timerTextStyle: TextStyle,
+
+    /** The style for the waveform slider. */
+    public val waveformSliderStyle: WaveformSliderStyle,
+
+    /** The height of the waveform slider. */
+    public val waveformSliderHeight: Dp,
+
+    /** The padding for the waveform slider. */
+    public val waveformSliderPadding: ComponentPadding,
+
+    /** 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",
       ]