fix(llc): fix [Flutter Web] TypeError JSArray (#2172)

* fix(llc): fix [Flutter Web] TypeError JSArray

* chore: update CHANGELOG.md

Author: xsahil03x

packages/stream_chat/CHANGELOG.md

@@ -1,3 +1,10 @@
+## Upcoming
+
+🐞 Fixed
+
+- [[#2171]](https://github.com/GetStream/stream-chat-flutter/issues/2171) Fixed [Flutter Web]
+  dynamic TypeError
+
 ## 8.3.0
 
 ✅ Added

packages/stream_chat/lib/src/client/channel.dart

@@ -2509,35 +2509,35 @@ class ChannelClientState {
 
   /// Update channelState with updated information.
   void updateChannelState(ChannelState updatedState) {
-    final _existingStateMessages = [...messages];
+    final _existingStateMessages = <Message>[...messages];
     final newMessages = <Message>[
-      ..._existingStateMessages.merge(updatedState.messages),
+      ..._existingStateMessages.merge(
+        updatedState.messages,
+        key: (message) => message.id,
+        update: (original, updated) => updated.syncWith(original),
+      ),
     ].sorted(_sortByCreatedAt);
 
-    final _existingStateWatchers = _channelState.watchers ?? [];
-    final _updatedStateWatchers = updatedState.watchers ?? [];
+    final _existingStateWatchers = <User>[...?_channelState.watchers];
     final newWatchers = <User>[
-      ..._updatedStateWatchers,
-      ..._existingStateWatchers
-          .where((w) =>
-              !_updatedStateWatchers.any((newWatcher) => newWatcher.id == w.id))
-          .toList(),
-    ];
-
-    final newMembers = <Member>[
-      ...updatedState.members ?? [],
+      ..._existingStateWatchers.merge(
+        updatedState.watchers,
+        key: (watcher) => watcher.id,
+        update: (original, updated) => updated,
+      ),
     ];
 
-    final _existingStateRead = _channelState.read ?? [];
-    final _updatedStateRead = updatedState.read ?? [];
+    final _existingStateRead = <Read>[...?_channelState.read];
     final newReads = <Read>[
-      ..._updatedStateRead,
-      ..._existingStateRead
-          .where((r) =>
-              !_updatedStateRead.any((newRead) => newRead.user.id == r.user.id))
-          .toList(),
+      ..._existingStateRead.merge(
+        updatedState.read,
+        key: (read) => read.user.id,
+        update: (original, updated) => updated,
+      ),
     ];
 
+    final newMembers = <Member>[...?updatedState.members];
+
     _checkExpiredAttachmentMessages(updatedState);
 
     _channelState = _channelState.copyWith(
@@ -2730,21 +2730,3 @@ bool _pinIsValid(Message message) {
   final now = DateTime.now();
   return message.pinExpires!.isAfter(now);
 }
-
-extension on Iterable<Message> {
-  Iterable<Message> merge(Iterable<Message>? other) {
-    if (other == null) return this;
-
-    final messageMap = {for (final message in this) message.id: message};
-
-    for (final message in other) {
-      messageMap.update(
-        message.id,
-        message.syncWith,
-        ifAbsent: () => message,
-      );
-    }
-
-    return messageMap.values;
-  }
-}

packages/stream_chat/lib/src/core/util/extension.dart

@@ -31,3 +31,49 @@ extension StringX on String {
     }
   }
 }
+
+/// Extension providing merge functionality for any iterable.
+extension IterableMergeExtension<T extends Object?> on Iterable<T> {
+  /// Merges this iterable with another iterable of the same type.
+  ///
+  /// This method allows merging two iterables by identifying items with the
+  /// same key and using an update function to combine them. Items that exist
+  /// only in one iterable will be included in the result.
+  ///
+  /// Example:
+  /// ```dart
+  /// final list1 = [User(id: '1', name: 'John'), User(id: '2', name: 'Alice')];
+  /// final list2 = [User(id: '1', age: 30), User(id: '3', name: 'Bob')];
+  ///
+  /// final merged = list1.merge(
+  ///   list2,
+  ///   key: (user) => user.id,
+  ///   update: (original, updated) => original.copyWith(age: updated.age),
+  /// );
+  ///
+  /// // Result: [
+  /// //  User(id: '1', name: 'John', age: 30),
+  /// //  User(id: '2', name: 'Alice'),
+  /// //  User(id: '3', name: 'Bob'),
+  /// // ]
+  /// ```
+  Iterable<T> merge<K>(
+    Iterable<T>? other, {
+    required K Function(T item) key,
+    required T Function(T original, T updated) update,
+  }) {
+    if (other == null) return this;
+
+    final itemMap = {for (final item in this) key(item): item};
+
+    for (final item in other) {
+      itemMap.update(
+        key(item),
+        (original) => update(original, item),
+        ifAbsent: () => item,
+      );
+    }
+
+    return itemMap.values;
+  }
+}