fix(ui): auto-scroll on optimistic local messages

Subscribe to `channel.state.messagesStream` (or `threadsStream[parentId]`
in thread mode) instead of `channel.on(EventType.messageNew)` so the list
follows to the new bottom message the moment it lands in state. The event
path only fires on server-confirmed messages, which meant the user's own
send wasn't auto-scrolled until the server round-trip completed.

The data-source-driven pattern matches what the Android, iOS, and React
Native SDKs do. New-message detection uses a `lengthGrew && lastChanged`
check between emissions; the bottom-most snapshot is seeded from current
state on subscribe so we don't auto-scroll on the BehaviorSubject replay.
The synchronous `controller.scrollTo(index: 0)` call still clears SPL's
anchor key before `didUpdateWidget` (no race).

Adds an `auto_scroll_test.dart` covering: other-user-at-bottom,
other-user-scrolled-up, own-message-scrolled-up, optimistic local send,
and rapid burst.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: xsahil03x

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,10 @@
+## Upcoming Changes
+
+🐞 Fixed
+
+- Fixed `StreamMessageListView` not auto-scrolling to the bottom on the user's own outgoing message
+  until the server confirmed it.
+
 ## 9.24.0
 
 ✅ Added

packages/stream_chat_flutter/lib/src/message_list_view/message_list_view.dart

@@ -416,7 +416,7 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
   MessageListController get _messageListController =>
       widget.messageListController ?? _defaultController;
 
-  StreamSubscription? _messageNewListener;
+  StreamSubscription<Message>? _messageNewListener;
   StreamSubscription? _userReadListener;
 
   @override
@@ -444,40 +444,11 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
       debouncedMarkRead.cancel();
       debouncedMarkThreadRead.cancel();
 
-      _messageNewListener?.cancel();
       _userReadListener?.cancel();
 
       _unreadState.value = _readUnreadSnapshot();
 
-      _messageNewListener =
-          streamChannel!.channel.on(EventType.messageNew).listen((event) {
-        final message = event.message;
-        if (message == null) return;
-        if (message.parentId != widget.parentMessage?.id) return;
-
-        // Don't fight a scroll already in motion (drag, fling, or
-        // still-running animated scrollTo).
-        if (_scrollController?.isScrolling == true) return;
-
-        final currentUser = streamChannel?.channel.client.state.currentUser;
-        final isOwnMessage = message.user?.id == currentUser?.id;
-        final isAtBottom = !_showScrollToBottom.value;
-
-        // Auto-scroll on own messages always; on others only when the
-        // user is already at the bottom. For "far from bottom", SPL's
-        // itemKeyBuilder anchor preservation keeps the visible
-        // content pinned.
-        if (!isOwnMessage && !isAtBottom) return;
-
-        // Synchronous (not post-frame) so SPL's `_scrollTo` clears
-        // its anchor key before the next `didUpdateWidget` — otherwise
-        // anchor preservation would yank the layout back and produce
-        // a visible "shift, then animate" glitch.
-        if (_scrollController case final controller?
-            when controller.isAttached) {
-          controller.scrollTo(index: 0);
-        }
-      });
+      _subscribeMessageNewListener();
 
       _userReadListener =
           streamChannel!.channel.state?.currentUserReadStream.listen((_) {
@@ -486,6 +457,44 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
     }
   }
 
+  // `newMessageStream` fires on every path that grows the bottom of
+  // the list — server-confirmed `message.new` events AND optimistic
+  // local sends — so we follow to the new bottom for both. Gated on
+  // `isUpToDate` to match Android/iOS/RN: no auto-scroll while the
+  // channel is loaded around a historic id.
+  void _subscribeMessageNewListener() {
+    _messageNewListener?.cancel();
+    final state = streamChannel?.channel.state;
+    if (state == null) return;
+    final newMessageStream = switch (widget.parentMessage?.id) {
+      final parentId? => state.newThreadMessageStream(parentId),
+      _ => state.newMessageStream,
+    };
+    _messageNewListener = newMessageStream.listen((newMessage) {
+      // Don't fight a scroll already in motion (drag, fling, or
+      // still-running animated scrollTo).
+      if (_scrollController?.isScrolling == true) return;
+
+      final currentUser = streamChannel?.channel.client.state.currentUser;
+      final isOwnMessage = newMessage.user?.id == currentUser?.id;
+      final isAtBottom = !_showScrollToBottom.value;
+
+      // Auto-scroll on own messages always; on others only when the
+      // user is already at the bottom. For "far from bottom", SPL's
+      // itemKeyBuilder anchor preservation keeps the visible content
+      // pinned.
+      if (!isOwnMessage && !isAtBottom) return;
+
+      // Synchronous (not post-frame) so SPL's `_scrollTo` clears its
+      // anchor key before the next `didUpdateWidget` — otherwise
+      // anchor preservation would yank the layout back and produce a
+      // visible "shift, then animate" glitch.
+      if (_scrollController case final controller? when controller.isAttached) {
+        controller.scrollTo(index: 0);
+      }
+    });
+  }
+
   @override
   void dispose() {
     // Tear down anything that could write to [_unreadState] or
@@ -1508,3 +1517,75 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
     }
   }
 }
+
+extension on ChannelClientState {
+  /// Emits each message appended to the bottom of [messages] —
+  /// regardless of source: server-confirmed `message.new` events,
+  /// optimistic local sends, or any other path that grows the list.
+  ///
+  /// Detection: the bottom-most message id changed AND its `createdAt`
+  /// is strictly after the previously-seen tail. The `createdAt` check
+  /// guards against firing on deletion-of-tail (the new tail is older)
+  /// and pruning-only emissions.
+  ///
+  /// Gated on [isUpToDate] (matching Android's `areNewestMessagesLoaded`
+  /// and iOS's `isFirstPageLoaded`): while the channel is loaded around
+  /// a historic message, no emissions — composers/UI flows are
+  /// expected to load the live tail before triggering a send. The
+  /// `false → true` flip itself is a wholesale window replacement,
+  /// also suppressed (the next emit re-seeds).
+  Stream<Message> get newMessageStream async* {
+    var wasUpToDate = isUpToDate;
+    var lastSeen = wasUpToDate ? messages.lastOrNull : null;
+
+    await for (final emitted in messagesStream) {
+      if (!isUpToDate) {
+        wasUpToDate = false;
+        lastSeen = null;
+        continue;
+      }
+      if (!wasUpToDate) {
+        wasUpToDate = true;
+        lastSeen = emitted.lastOrNull;
+        continue;
+      }
+      final newLast = emitted.lastOrNull;
+      if (newLast == null) {
+        lastSeen = null;
+        continue;
+      }
+      final isNewArrival = lastSeen == null ||
+          (newLast.id != lastSeen.id &&
+              newLast.createdAt.isAfter(lastSeen.createdAt));
+      lastSeen = newLast;
+      if (isNewArrival) yield newLast;
+    }
+  }
+
+  /// Same as [newMessageStream], scoped to a single thread. Threads
+  /// load lazily on demand; the first non-empty emission after
+  /// subscribe is treated as a seed (the just-loaded page) and not
+  /// surfaced as a "new message."
+  Stream<Message> newThreadMessageStream(String parentMessageId) async* {
+    var seeded = false;
+    Message? lastSeen;
+    await for (final threadsMap in threadsStream) {
+      final threadMessages = threadsMap[parentMessageId] ?? const <Message>[];
+      final newLast = threadMessages.lastOrNull;
+      if (!seeded) {
+        seeded = true;
+        lastSeen = newLast;
+        continue;
+      }
+      if (newLast == null) {
+        lastSeen = null;
+        continue;
+      }
+      final isNewArrival = lastSeen == null ||
+          (newLast.id != lastSeen.id &&
+              newLast.createdAt.isAfter(lastSeen.createdAt));
+      lastSeen = newLast;
+      if (isNewArrival) yield newLast;
+    }
+  }
+}