feat(ui): integrate StreamSnackbar into composer hold-to-record

docs/docs_screenshots/pubspec.yaml

@@ -19,7 +19,11 @@ dependencies:
     sdk: flutter
   record: ^6.2.0
   stream_chat_flutter: ^10.0.1
-  stream_core_flutter: ^0.3.0
+  stream_core_flutter:
+    git:
+      url: https://github.com/GetStream/stream-core-flutter
+      ref: 5353033ea55b88e8f651c604389f0b7b0a839ebe
+      path: packages/stream_core_flutter
 
 dev_dependencies:
   alchemist: ^0.14.0

docs/docs_screenshots/test/voice_recording/voice_recording_test.dart

@@ -116,8 +116,8 @@ Widget _buildVoiceRecordingComposerScaffold({
           children: [
             Expanded(child: Container()),
             Builder(
-              builder: (context) {
-                return Material(
+              builder: (context) => StreamSnackbarPopup(
+                child: Material(
                   child: DecoratedBox(
                     decoration: BoxDecoration(
                       color: context.streamColorScheme.backgroundElevation1,
@@ -132,8 +132,8 @@ Widget _buildVoiceRecordingComposerScaffold({
                       ),
                     ),
                   ),
-                );
-              },
+                ),
+              ),
             ),
           ],
         ),

melos.yaml

@@ -98,7 +98,12 @@ command:
       stream_chat_persistence: ^10.0.1
       streaming_shared_preferences: ^2.0.0
       svg_icon_widget: ^0.0.1
-      stream_core_flutter: ^0.3.0
+      # Pinned to PR #118 (feat: add StreamSnackbar) until released.
+      stream_core_flutter:
+        git:
+          url: https://github.com/GetStream/stream-core-flutter
+          ref: 5353033ea55b88e8f651c604389f0b7b0a839ebe
+          path: packages/stream_core_flutter
       synchronized: ^3.4.0
       thumblr: ^0.0.4
       url_launcher: ^6.3.2

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,14 @@
+## Upcoming
+
+✅ Added
+
+- `StreamMessageComposer` now surfaces the hold-to-record hint through `StreamSnackbar` anchored above the composer, and `StreamChat` provides an app-wide `StreamSnackbarScope` fallback.
+
+⚠️ Deprecated
+
+- `StreamAudioRecorderController.showInfo` is now deprecated. Show your own snackbar via `StreamSnackbarMessenger.of(context).show(StreamSnackbar(...))` instead.
+- `RecordStateIdle.message` is now deprecated; the composer no longer reads it.
+
 ## 10.0.1
 
 🐞 Fixed

packages/stream_chat_flutter/lib/src/message_input/audio_recorder/audio_recorder_controller.dart

@@ -174,6 +174,7 @@ class StreamAudioRecorderController extends ValueNotifier<AudioRecorderState> {
   /// Shows an info message to the user for the given [duration].
   ///
   /// This is useful for showing messages like "Hold to record" or "Recording".
+  @Deprecated('Use StreamSnackbar via StreamSnackbarMessenger instead.')
   void showInfo(
     String message, {
     Duration duration = const Duration(seconds: 3),
@@ -198,6 +199,18 @@ class StreamAudioRecorderController extends ValueNotifier<AudioRecorderState> {
     }
   }
 
+  /// Cancels any pending info-message timer and clears the message on
+  /// [RecordStateIdle]. Counterpart to [showInfo].
+  @Deprecated('Use StreamSnackbar via StreamSnackbarMessenger instead.')
+  void hideInfo() {
+    // Cancel the info timer.
+    _infoTimer?.cancel();
+    _infoTimer = null;
+
+    // Clear the info message if it is currently being shown.
+    if (value case RecordStateIdle()) value = const RecordStateIdle();
+  }
+
   Future<String> _getOutputFilePath(AudioEncoder encoder) async {
     // Ignored on web platform.
     if (CurrentPlatform.isWeb) return '';
@@ -232,6 +245,8 @@ class StreamAudioRecorderController extends ValueNotifier<AudioRecorderState> {
   void dispose() {
     _durationTimer?.cancel();
     _durationTimer = null;
+    _infoTimer?.cancel();
+    _infoTimer = null;
     _recorderAmplitudeSubscription?.cancel();
     _recorder.dispose();
     super.dispose();

packages/stream_chat_flutter/lib/src/message_input/audio_recorder/audio_recorder_state.dart

@@ -9,17 +9,13 @@ sealed class AudioRecorderState {
 
 /// {@template recordStateIdle}
 /// The audio recorder is currently idle and not recording any audio track.
-///
-/// Optionally, provide a [message] to display when the recorder is idle.
-///
-/// For example, when the user has not long pressed the record button long
-/// enough to start recording.
 /// {@endtemplate}
 final class RecordStateIdle extends AudioRecorderState {
   /// {@macro recordStateIdle}
   const RecordStateIdle({this.message}) : super._();
 
   /// The optional message to display when the recorder is idle.
+  @Deprecated('Use StreamSnackbar via StreamSnackbarMessenger instead.')
   final String? message;
 }
 

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

@@ -109,6 +109,10 @@ class _StreamChatMessageInputState extends State<StreamChatMessageInput> {
   void initState() {
     super.initState();
     _initController();
+    widget.audioRecorderController?.addListener(_onAudioRecorderChanged);
+    // Update the snackbar based on the initial state of the audio recorder controller
+    // after the first frame is rendered, to ensure that the BuildContext is fully available for showing the snackbar.
+    WidgetsBinding.instance.addPostFrameCallback((_) => _onAudioRecorderChanged());
   }
 
   @override
@@ -118,10 +122,16 @@ class _StreamChatMessageInputState extends State<StreamChatMessageInput> {
       if (oldWidget.controller == null) _controller.dispose();
       _initController();
     }
+    if (widget.audioRecorderController != oldWidget.audioRecorderController) {
+      oldWidget.audioRecorderController?.removeListener(_onAudioRecorderChanged);
+      widget.audioRecorderController?.addListener(_onAudioRecorderChanged);
+      _onAudioRecorderChanged(); // Update the snackbar based on the new controller's state immediately.
+    }
   }
 
   @override
   void dispose() {
+    widget.audioRecorderController?.removeListener(_onAudioRecorderChanged);
     if (widget.controller == null) _controller.dispose();
     super.dispose();
   }
@@ -130,6 +140,27 @@ class _StreamChatMessageInputState extends State<StreamChatMessageInput> {
     _controller = widget.controller ?? StreamMessageComposerController();
   }
 
+  // Listens to changes in the audio recorder controller and shows/hides a snackbar
+  // with the current message, if any.
+  void _onAudioRecorderChanged() {
+    if (!mounted) return;
+
+    final state = widget.audioRecorderController?.value;
+    final message = state is RecordStateIdle ? state.message : null;
+    final messenger = StreamSnackbarMessenger.maybeOf(context);
+
+    if (message == null || message.isEmpty) return messenger?.removeCurrent();
+    final controller = messenger?.show(StreamSnackbar(message: Text(message)), replace: true);
+    if (controller == null) return;
+
+    // Notify the recorder controller when the snackbar is closed, so it can clear
+    // the message and avoid showing stale messages if the user triggers the recorder again.
+    controller.closed.then((_) {
+      if (!mounted) return;
+      return widget.audioRecorderController?.hideInfo();
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     final audioRecorderController = widget.audioRecorderController;
@@ -149,30 +180,18 @@ class _StreamChatMessageInputState extends State<StreamChatMessageInput> {
         const targetAlignment = AlignmentDirectional.topEnd;
         const followerAlignment = AlignmentDirectional.bottomEnd;
 
-        final idleMessage = state is RecordStateIdle ? state.message : null;
-        final showIdleTooltip = idleMessage != null && idleMessage.isNotEmpty;
-
         return PortalTarget(
-          visible: showIdleTooltip,
           anchor: Aligned(
-            target: Alignment.topCenter,
-            follower: Alignment.bottomCenter,
-            offset: Offset(0, -streamSpacing.md),
+            target: targetAlignment.resolve(textDirection),
+            follower: followerAlignment.resolve(textDirection),
+            offset: Offset(-streamSpacing.md, -streamSpacing.md).directional(textDirection),
           ),
-          portalFollower: showIdleTooltip ? HoldToRecordInfoTooltip(message: idleMessage) : const SizedBox.shrink(),
-          child: PortalTarget(
-            anchor: Aligned(
-              target: targetAlignment.resolve(textDirection),
-              follower: followerAlignment.resolve(textDirection),
-              offset: Offset(-streamSpacing.md, -streamSpacing.md).directional(textDirection),
-            ),
-            visible: state is RecordStateRecording,
-            portalFollower: SwipeToLockButton(isLocked: state is RecordStateRecordingLocked),
-            child: _StreamChatMessageInputContent(
-              widget: widget,
-              inputController: _controller,
-              audioRecorderState: state,
-            ),
+          visible: state is RecordStateRecording,
+          portalFollower: SwipeToLockButton(isLocked: state is RecordStateRecordingLocked),
+          child: _StreamChatMessageInputContent(
+            widget: widget,
+            inputController: _controller,
+            audioRecorderState: state,
           ),
         );
       },

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

@@ -95,7 +95,7 @@ class StreamMessageComposer extends StatelessWidget {
     TextCapitalization textCapitalization = TextCapitalization.sentences,
     bool autofocus = false,
     bool autoCorrect = true,
-  }) : props = MessageComposerProps(
+  }) : props = .new(
          onMessageSent: onMessageSent,
          preMessageSending: preMessageSending,
          messageComposerController: messageComposerController,
@@ -147,8 +147,8 @@ class StreamMessageComposer extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final builder = context.chatComponentBuilder<MessageComposerProps>();
-    if (builder != null) return builder(context, props);
-    return DefaultStreamMessageComposer(props: props);
+    final composer = builder?.call(context, props) ?? DefaultStreamMessageComposer(props: props);
+    return StreamSnackbarPopup(child: composer);
   }
 }
 

packages/stream_chat_flutter/lib/src/stream_chat.dart

@@ -199,7 +199,7 @@ class StreamChatState extends State<StreamChat> {
       onBackgroundEventReceived: widget.onBackgroundEventReceived,
       backgroundKeepAlive: widget.backgroundKeepAlive,
       connectivityStream: widget.connectivityStream,
-      child: widget.child ?? const Empty(),
+      child: StreamSnackbarScope(child: widget.child ?? const Empty()),
     );
 
     final theme = widget.themeData ?? StreamChatThemeData();

packages/stream_chat_flutter/lib/stream_chat_flutter.dart

@@ -98,6 +98,20 @@ export 'package:stream_core_flutter/stream_core_flutter.dart'
         StreamSheetTheme,
         StreamSheetThemeData,
         StreamSheetTransition,
+        StreamSnackbar,
+        StreamSnackbarAction,
+        StreamSnackbarClosedReason,
+        StreamSnackbarController,
+        StreamSnackbarHost,
+        StreamSnackbarMessenger,
+        StreamSnackbarPopup,
+        StreamSnackbarPopupPlacement,
+        StreamSnackbarProps,
+        StreamSnackbarScope,
+        StreamSnackbarStyle,
+        StreamSnackbarTheme,
+        StreamSnackbarThemeData,
+        StreamSnackbarVariant,
         StreamSwitch,
         StreamStepper,
         StreamStepperProps,

packages/stream_chat_flutter/pubspec.yaml

@@ -57,7 +57,11 @@ dependencies:
   share_plus: ">=12.0.2 <14.0.0"
   shimmer: ^3.0.0
   stream_chat_flutter_core: ^10.0.1
-  stream_core_flutter: ^0.3.0
+  stream_core_flutter:
+    git:
+      url: https://github.com/GetStream/stream-core-flutter
+      ref: 5353033ea55b88e8f651c604389f0b7b0a839ebe
+      path: packages/stream_core_flutter
   svg_icon_widget: ^0.0.1
   synchronized: ^3.4.0
   theme_extensions_builder_annotation: ^7.1.0

packages/stream_chat_flutter/test/src/message_input/audio_recorder/audio_recorder_controller_test.dart

@@ -215,6 +215,36 @@ void main() {
     });
   });
 
+  group('hideInfo', () {
+    test('clears the info message immediately', () {
+      controller.showInfo('Test Message');
+      expect((controller.value as RecordStateIdle).message, 'Test Message');
+
+      controller.hideInfo();
+
+      expect((controller.value as RecordStateIdle).message, isNull);
+    });
+
+    test('cancels the pending auto-clear timer', () async {
+      controller.showInfo('Test Message', duration: const Duration(milliseconds: 100));
+      expect((controller.value as RecordStateIdle).message, 'Test Message');
+
+      controller.hideInfo();
+      controller.showInfo('Other Message', duration: const Duration(seconds: 5));
+      expect((controller.value as RecordStateIdle).message, 'Other Message');
+
+      // Wait past the original (now-canceled) timer; the new message must
+      // still be present.
+      await Future.delayed(const Duration(milliseconds: 150));
+      expect((controller.value as RecordStateIdle).message, 'Other Message');
+    });
+
+    test('is a no-op when no info message is being shown', () {
+      controller.hideInfo();
+      expect((controller.value as RecordStateIdle).message, isNull);
+    });
+  });
+
   group('amplitude changes', () {
     setUp(() {
       when(() => mockRecorder.hasPermission(request: false)).thenAnswer((_) async => true);

packages/stream_chat_flutter/test/src/message_input/message_input_attachment_list_test.dart

@@ -89,8 +89,14 @@ void main() {
           ),
         );
 
-        // Expect an empty box
-        expect(find.byType(SizedBox), findsOneWidget);
+        // Expect an empty box rendered by the attachment list itself.
+        expect(
+          find.descendant(
+            of: find.byType(StreamMessageComposerAttachmentList),
+            matching: find.byType(SizedBox),
+          ),
+          findsOneWidget,
+        );
       },
     );
   });
@@ -184,8 +190,14 @@ void main() {
           ),
         );
 
-        // Expect an empty box
-        expect(find.byType(SizedBox), findsOneWidget);
+        // Expect an empty box rendered by the media attachments widget itself.
+        expect(
+          find.descendant(
+            of: find.byType(MessageInputMediaAttachments),
+            matching: find.byType(SizedBox),
+          ),
+          findsOneWidget,
+        );
       },
     );