feat(ui): add audio recording components

packages/stream_chat_flutter/example/android/app/build.gradle

@@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
-    compileSdkVersion 33
+    compileSdkVersion 34
 
     sourceSets {
         main.java.srcDirs += 'src/main/kotlin'

packages/stream_chat_flutter/example/ios/Runner.xcodeproj/project.pbxproj

@@ -155,7 +155,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1300;
+				LastUpgradeCheck = 1430;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
@@ -204,6 +204,7 @@
 			files = (
 			);
 			inputPaths = (
+				"${TARGET_BUILD_DIR}/${INFOPLIST_PATH}",
 			);
 			name = "Thin Binary";
 			outputPaths = (

packages/stream_chat_flutter/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1300"
+   LastUpgradeVersion = "1430"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

packages/stream_chat_flutter/example/pubspec.yaml

@@ -17,6 +17,18 @@ dependencies:
   stream_chat_localizations: ^7.2.0-hotfix.1
   stream_chat_persistence: ^7.2.0-hotfix.1
 
+dependency_overrides:
+  stream_chat:
+    path: ../../stream_chat
+  stream_chat_flutter:
+    path: ..
+  stream_chat_flutter_core:
+    path: ../../stream_chat_flutter_core
+  stream_chat_localizations:
+    path: ../../stream_chat_localizations
+  stream_chat_persistence:
+    path: ../../stream_chat_persistence
+
 flutter:
   uses-material-design: true
   assets:

packages/stream_chat_flutter/lib/src/message_input/audio_message_send_button/audio_message_send_button.dart

@@ -0,0 +1,4 @@
+export 'stream_audio_message_controllers.dart';
+export 'stream_audio_message_gesture_state.dart';
+export 'stream_audio_message_overlays.dart';
+export 'stream_audio_message_send_button.dart';

packages/stream_chat_flutter/lib/src/message_input/audio_message_send_button/stream_audio_message_controllers.dart

@@ -0,0 +1,184 @@
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+/// Widget that displays the audio recording controls.
+class StreamAudioMessageControllers extends StatefulWidget {
+  /// Creates a new StreamAudioMessageControllers
+  const StreamAudioMessageControllers({super.key});
+
+  @override
+  State<StreamAudioMessageControllers> createState() =>
+      _StreamAudioMessageControllersState();
+}
+
+class _StreamAudioMessageControllersState
+    extends State<StreamAudioMessageControllers> with TickerProviderStateMixin {
+  Color? iconColor;
+  DateTime? _startTime;
+  Timer? _timer;
+  late final AnimationController _controller;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    final audioRecordingMessageTheme = AudioRecordingMessageTheme.of(context);
+
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 500),
+      vsync: this,
+    );
+    _controller.forward();
+
+    Future.delayed(
+      const Duration(seconds: 1),
+      () {
+        if (mounted) {
+          setState(() {
+            iconColor =
+                audioRecordingMessageTheme.recordingIndicatorColorActive;
+            _startTime = DateTime.now();
+          });
+        }
+      },
+    );
+
+    _timer = Timer.periodic(
+      const Duration(seconds: 1),
+      (timer) {
+        if (_startTime == null) {
+          return;
+        }
+        setState(() {});
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _timer?.cancel();
+    _controller.dispose();
+    super.dispose();
+  }
+
+  String get duration {
+    if (_startTime == null) {
+      return '0:00';
+    }
+    final diff = DateTime.now().difference(_startTime!);
+    return '${diff.inMinutes}:${diff.inSeconds.toString().padLeft(2, '0')}';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final audioRecordingMessageTheme = AudioRecordingMessageTheme.of(context);
+
+    return SlideTransition(
+      position: Tween<Offset>(
+        begin: const Offset(1, 0),
+        end: Offset.zero,
+      ).animate(
+        CurvedAnimation(
+          parent: _controller,
+          curve: Curves.easeIn,
+        ),
+      ),
+      child: Row(
+        children: [
+          const SizedBox(width: 8),
+          StreamSvgIcon.iconMic(
+            color: iconColor,
+            size: 24,
+          ),
+          if (_startTime != null) ...[
+            const SizedBox(width: 8),
+            SizedBox(
+              width: 50,
+              child: Text(
+                duration,
+                style: TextStyle(
+                  fontSize: 16,
+                  color: audioRecordingMessageTheme.recordingIndicatorColorIdle,
+                ),
+              ),
+            ),
+          ] else
+            const SizedBox(width: 58),
+          const Expanded(
+            child: _CancelRecordingPanel(
+              key: ValueKey('cancelRecordingPanel'),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _CancelRecordingPanel extends StatefulWidget {
+  const _CancelRecordingPanel({super.key});
+
+  @override
+  State<_CancelRecordingPanel> createState() => _CancelRecordingPanelState();
+}
+
+class _CancelRecordingPanelState extends State<_CancelRecordingPanel>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final audioRecordingMessageTheme = AudioRecordingMessageTheme.of(context);
+
+    final state = GestureStateProvider.maybeOf(context);
+    final offset = state?.offset;
+    final width = MediaQuery.of(context).size.width / 3;
+    final opacity = offset != null ? 1 - (offset.dx.abs() / width) : 1.0;
+
+    return AnimatedBuilder(
+      animation: _controller,
+      builder: (context, child) {
+        return Transform.translate(
+          offset: offset != null ? Offset(offset.dx, 0) : Offset.zero,
+          child: Opacity(
+            opacity: max(min(opacity, 1), 0),
+            child: child,
+          ),
+        );
+      },
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Text(
+            'Slide to cancel',
+            style: TextStyle(
+              fontSize: 16,
+              color: audioRecordingMessageTheme.cancelTextColor,
+            ),
+          ),
+          StreamSvgIcon.left(
+            size: 24,
+            color: audioRecordingMessageTheme.cancelTextColor,
+          ),
+        ],
+      ),
+    );
+  }
+}

packages/stream_chat_flutter/lib/src/message_input/audio_message_send_button/stream_audio_message_gesture_state.dart

@@ -0,0 +1,42 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter/widgets.dart';
+
+/// Tracks the offset of the drag gesture
+class GestureStateProvider extends InheritedWidget {
+  /// Creates a new OffsetTracker
+  const GestureStateProvider({
+    super.key,
+    required super.child,
+    required this.state,
+  });
+
+  /// The drag gestures' state information
+  final GestureState state;
+
+  /// Returns the state of the drag gesture
+  static GestureState? maybeOf(BuildContext context) {
+    final provider =
+        context.dependOnInheritedWidgetOfExactType<GestureStateProvider>();
+    return provider?.state;
+  }
+
+  @override
+  bool updateShouldNotify(GestureStateProvider oldWidget) {
+    return oldWidget.state != state;
+  }
+}
+
+/// Tracks any state that needs to be communicated between the audio recording
+/// components
+class GestureState extends Equatable {
+  /// Creates a new GestureState
+  const GestureState({
+    required this.offset,
+  });
+
+  /// The offset of the drag gesture
+  final Offset offset;
+
+  @override
+  List<Object?> get props => [offset];
+}