v5: [Composer Redesign] Voice Recording (#1267)

* Add snack bar notifications on voice recording flow

* Recording view redesign

* Handle voice recording gestures

* Improve gesture animations

* Fix shimmering effect in Slide to cancel label

* Redesign recording state

* Improve lock animation

* Do some cleanup and refactoring

* Fix keyboard and attachment picker edge cases

* Merge `LockedView` and `RecordingView` into `ComposerVoiceRcordingInputView`

* Improve hold recording UX

* Fix microphone icon to not being filled

* Use the ConfirmEditButton when publishing voice recording

* Hide lock view after the recording is locked

* Hide microphone when recording is stopped

* Update trash and stop icon sizes

* Fix additional spacing in playback controls

* Add accent color to the audio duration text when it is playing

* Add custom slider thumb

* Add test coverage

* Redesign the voice recording composer attachment view

* Fix waveform not having the same slider thumb

* Overall refactoring and cleanup

* Rename composer voice recording attachment view to follow the rest of the patterns

* Move VoiceRecording attachment folder

* Fix dismiss overlay in composer recording attachment view

* Update Message View voice recording attachment

* Fix current user voice recording attachment view not having blue borders

* Reuse the play-pause button

* Fix color of control border colors

* Fix swipe to reply being triggered when sliding voice recording progress view

* Minor cleanups

* PR feedback cleanup

* Some more PR cleanups

* Refactor gesture location state

* Cache the roundedSliderThumbImage

* Add active and inactive slider thumb versions

* Do not use env object for the view model

* Add audio playing snapshots

* Re record snapshots

* Remove recording label and fix ForEach index

* Reuse composer voice recording animation

* Fix demo app not compiling

* Fix not able to send regular messages

* Remove view model from CompoerVoiceRecordingInputVIew

* Fix E2E Test for edit button

Author: nuno-vieira

DemoAppSwiftUI/AppleMessageComposerView.swift

@@ -86,6 +86,7 @@ struct AppleMessageComposerView<Factory: ViewFactory>: View, KeyboardReadable {
                     selectedRangeLocation: $viewModel.selectedRangeLocation,
                     command: $viewModel.composerCommand,
                     recordingState: $viewModel.recordingState,
+                    recordingGestureLocation: $viewModel.recordingGestureLocation,
                     composerAssets: viewModel.composerAssets,
                     addedCustomAttachments: viewModel.addedCustomAttachments,
                     addedVoiceRecordings: viewModel.addedVoiceRecordings,
@@ -95,12 +96,18 @@ struct AppleMessageComposerView<Factory: ViewFactory>: View, KeyboardReadable {
                     cooldownDuration: viewModel.cooldownDuration,
                     hasContent: viewModel.hasContent,
                     canSendMessage: viewModel.canSendMessage,
+                    audioRecordingInfo: viewModel.audioRecordingInfo,
+                    pendingAudioRecordingURL: viewModel.pendingAudioRecording?.url,
                     onCustomAttachmentTap: viewModel.customAttachmentTapped(_:),
                     removeAttachmentWithId: viewModel.removeAttachment(with:),
                     sendMessage: {},
                     onImagePasted: viewModel.imagePasted,
                     startRecording: viewModel.startRecording,
                     stopRecording: viewModel.stopRecording,
+                    confirmRecording: viewModel.confirmRecording,
+                    discardRecording: viewModel.discardRecording,
+                    previewRecording: viewModel.previewRecording,
+                    showRecordingTip: viewModel.showRecordingTip,
                     sendInChannelShown: viewModel.sendInChannelShown,
                     showReplyInChannel: $viewModel.showReplyInChannel
                 )

Sources/StreamChatSwiftUI/ChatComposer/Attachments/ComposerVoiceRecordingAttachmentView.swift

@@ -0,0 +1,119 @@
+//
+// Copyright © 2026 Stream.io Inc. All rights reserved.
+//
+
+import StreamChat
+import SwiftUI
+
+public struct ComposerVoiceRecordingContainerView: View {
+    @Injected(\.tokens) private var tokens
+    @Injected(\.utils) private var utils
+
+    @StateObject var voiceRecordingHandler = VoiceRecordingHandler()
+
+    var addedVoiceRecordings: [AddedVoiceRecording]
+    var onDiscardAttachment: (String) -> Void
+
+    public init(addedVoiceRecordings: [AddedVoiceRecording], onDiscardAttachment: @escaping (String) -> Void) {
+        self.addedVoiceRecordings = addedVoiceRecordings
+        self.onDiscardAttachment = onDiscardAttachment
+    }
+
+    private var player: AudioPlaying {
+        utils.audioPlayer
+    }
+
+    public var body: some View {
+        VStack(spacing: tokens.spacingXxs) {
+            ForEach(addedVoiceRecordings) { recording in
+                ComposerVoiceRecordingAttachmentView(
+                    handler: voiceRecordingHandler,
+                    recording: recording,
+                    onDiscardAttachment: onDiscardAttachment
+                )
+            }
+        }
+        .onAppear {
+            player.subscribe(voiceRecordingHandler)
+        }
+    }
+}
+
+// MARK: - Single Voice Recording Attachment
+
+struct ComposerVoiceRecordingAttachmentView: View {
+    @Injected(\.colors) private var colors
+    @Injected(\.fonts) private var fonts
+    @Injected(\.tokens) private var tokens
+    @Injected(\.utils) private var utils
+
+    @ObservedObject var handler: VoiceRecordingHandler
+
+    let recording: AddedVoiceRecording
+    var onDiscardAttachment: (String) -> Void
+
+    private var isActive: Bool { handler.isActive(for: recording.url) }
+    private var showContextDuration: Bool { isActive && handler.context.currentTime > 0 }
+
+    var body: some View {
+        HStack(spacing: tokens.spacingXs) {
+            playButton
+            contentArea
+            playbackSpeedToggle
+        }
+        .padding(.top, tokens.spacingMd)
+        .padding(.leading, tokens.spacingSm)
+        .padding(.bottom, tokens.spacingMd)
+        .padding(.trailing, tokens.spacingSm)
+        .frame(height: 72)
+        .background(Color(colors.backgroundElevationElevation1))
+        .cornerRadius(tokens.radiusLg)
+        .overlay(
+            RoundedRectangle(cornerRadius: tokens.radiusLg)
+                .strokeBorder(Color(colors.borderCoreOpacity10), lineWidth: 1)
+        )
+        .dismissButtonOverlayModifier {
+            onDiscardAttachment(recording.url.absoluteString)
+        }
+        .onReceive(handler.$context) { _ in
+            handler.updatePlaybackState(for: recording.url)
+        }
+    }
+
+    // MARK: - Play Button
+
+    private var playButton: some View {
+        PlayPauseButton(isPlaying: handler.isPlaying && isActive) {
+            handler.togglePlayback(for: recording.url)
+        }
+    }
+
+    // MARK: - Content Area
+
+    private var contentArea: some View {
+        HStack(spacing: tokens.spacingXs) {
+            Text(utils.videoDurationFormatter.format(showContextDuration ? handler.context.currentTime : recording.duration) ?? "")
+                .font(fonts.footnote.monospacedDigit())
+                .foregroundColor(Color(colors.textSecondary))
+
+            WaveformViewSwiftUI(
+                audioContext: isActive ? handler.context : nil,
+                addedVoiceRecording: recording,
+                isPlaying: handler.isPlaying && isActive,
+                onSliderChanged: { timeInterval in
+                    handler.seek(to: timeInterval, loadingFrom: isActive ? nil : recording.url)
+                },
+                onSliderTapped: {
+                    handler.togglePlayback(for: recording.url)
+                }
+            )
+            .frame(height: 20)
+        }
+    }
+
+    // MARK: - Speed Toggle
+
+    private var playbackSpeedToggle: some View {
+        PlaybackSpeedToggle(handler: handler)
+    }
+}