feat: ✨ Add Typing Indicator in ChatViewList

Author: dhyash-simform

.gitignore

@@ -22,4 +22,6 @@ doc/api/
 .idea/
 .flutter-plugins
 /.flutter-plugins-dependencies
-chat_ui.iml
+chat_ui.iml
+
+devtools_options.yaml

example/.gitignore

@@ -30,6 +30,7 @@
 .pub-cache/
 .pub/
 /build/
+devtools_options.yaml
 
 # Web related
 

example/lib/chat_view_list_screen.dart

@@ -20,10 +20,10 @@ class _ChatViewListScreenState extends State<ChatViewListScreen> {
     final today = DateTime(now.year, now.month, now.day);
     final yesterday = DateTime(now.year, now.month, now.day - 1);
     final lastMessageTime = DateTime.parse('2025-06-06T13:58:00.000Z');
-    var initialUsersList = [
+    final initialChatList = [
       ChatViewListModel(
         id: '1',
-        name: 'Breaking Bad',
+        name: 'Breaking Bad Group',
         lastMessage: Message(
           message:
               'I am not in danger, Skyler. I am the danger. A guy opens his door and gets shot and you think that of me? No. I am the one who knocks!',
@@ -93,7 +93,7 @@ class _ChatViewListScreenState extends State<ChatViewListScreen> {
     ];
 
     controller = ChatViewListController(
-      initialUsersList: initialUsersList,
+      initialChatList: initialChatList,
       scrollController: ScrollController(),
     );
     super.initState();
@@ -113,14 +113,20 @@ class _ChatViewListScreenState extends State<ChatViewListScreen> {
         appbar: const ChatViewListAppBar(
           title: 'Breaking Bad',
         ),
+        listTypeIndicatorConfig: const ListTypeIndicatorConfig(
+          showUserNames: true,
+        ),
         config: ChatViewListConfig(
+          unreadCountConfig: const UnreadCountConfig(
+            style: UnreadCountStyle.count,
+          ),
           chatViewListTileConfig: ChatViewListTileConfig(
             backgroundColor: Colors.blue,
-            onTap: (user) {
+            onTap: (chat) {
               Navigator.of(context).push(
                 MaterialPageRoute(
                   builder: (context) => ChatScreen(
-                    user: user,
+                    chat: chat,
                   ),
                 ),
               );
@@ -135,9 +141,9 @@ class _ChatViewListScreenState extends State<ChatViewListScreen> {
               if (value.isEmpty) {
                 return null;
               }
-              final list = controller.initialUsersList
-                  .where((user) =>
-                      user.name.toLowerCase().contains(value.toLowerCase()))
+              final list = controller.chatListMap.values
+                  .where((chat) =>
+                      chat.name.toLowerCase().contains(value.toLowerCase()))
                   .toList();
               return list;
             },

example/lib/main.dart

@@ -27,12 +27,9 @@ class Example extends StatelessWidget {
 }
 
 class ChatScreen extends StatefulWidget {
-  const ChatScreen({
-    super.key,
-    required this.user,
-  });
+  const ChatScreen({required this.chat, super.key});
 
-  final ChatViewListModel user;
+  final ChatViewListModel chat;
 
   @override
   State<ChatScreen> createState() => _ChatScreenState();
@@ -144,17 +141,17 @@ class _ChatScreenState extends State<ChatScreen> {
         appBar: ChatViewAppBar(
           elevation: theme.elevation,
           backGroundColor: theme.appBarColor,
-          profilePicture: widget.user.imageUrl,
+          profilePicture: widget.chat.imageUrl,
           backArrowColor: theme.backArrowColor,
-          chatTitle: widget.user.name,
+          chatTitle: widget.chat.name,
           chatTitleTextStyle: TextStyle(
             color: theme.appBarTitleTextStyle,
             fontWeight: FontWeight.bold,
             fontSize: 18,
             letterSpacing: 0.25,
           ),
           userStatus:
-              widget.user.userActiveStatus.isOnline ? 'Online' : 'Offline',
+              widget.chat.userActiveStatus.isOnline ? 'Online' : 'Offline',
           userStatusTextStyle: const TextStyle(color: Colors.grey),
           actions: [
             IconButton(

lib/chatview.dart

@@ -24,11 +24,11 @@ library chatview;
 
 export 'package:audio_waveforms/audio_waveforms.dart'
     show
-        WaveStyle,
-        PlayerWaveStyle,
         AndroidEncoder,
+        AndroidOutputFormat,
         IosEncoder,
-        AndroidOutputFormat;
+        PlayerWaveStyle,
+        WaveStyle;
 export 'package:chatview_utils/chatview_utils.dart';
 export 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
 
@@ -40,7 +40,6 @@ export 'src/models/config_models/chat_view_list_user_config.dart';
 export 'src/models/config_models/load_more_widget_config.dart';
 export 'src/models/config_models/receipts_widget_config.dart';
 export 'src/models/config_models/search_config.dart';
-export 'src/models/config_models/unread_widget_config.dart';
 export 'src/models/models.dart';
 export 'src/utils/chat_view_locale.dart';
 export 'src/utils/package_strings.dart';

lib/src/chat_list_view_controller.dart

@@ -24,56 +24,102 @@ import 'dart:async';
 import 'package:flutter/material.dart';
 
 import 'models/chat_view_list_tile.dart';
+import 'values/typedefs.dart';
 
 class ChatViewListController {
   ChatViewListController({
-    required this.initialUsersList,
+    required List<ChatViewListModel> initialChatList,
     required this.scrollController,
-  });
+  }) {
+    final chatListLength = initialChatList.length;
 
-  /// Represents initial chat list users.
-  List<ChatViewListModel> initialUsersList = [];
+    final chatsMap = {
+      for (var i = 0; i < chatListLength; i++)
+        if (initialChatList[i] case final chat) chat.id: chat,
+    };
+
+    chatListMap = chatsMap;
+
+    // Adds the current chat map to the stream controller
+    // after the first frame render.
+    Future.delayed(
+      Duration.zero,
+      () => _chatListStreamController.add(chatListMap),
+    );
+  }
+
+  /// Stores and manages chat items by their unique IDs.
+  /// A map is used for efficient lookup, update, and removal of chats
+  /// by their unique id.
+  Map<String, ChatViewListModel> chatListMap = {};
 
   /// Provides scroll controller for chat list.
   ScrollController scrollController;
 
-  /// Represents chat list user stream
-  StreamController<List<ChatViewListModel>> chatListStreamController =
-      StreamController.broadcast();
+  /// Stream controller to manage the chat list stream.
+  final StreamController<Map<String, ChatViewListModel>>
+      _chatListStreamController =
+      StreamController<Map<String, ChatViewListModel>>.broadcast();
 
-  /// Used to add user in the chat list.
-  void addUser(ChatViewListModel user) {
-    initialUsersList.add(user);
-    if (chatListStreamController.isClosed) return;
-    chatListStreamController.sink.add(initialUsersList);
-  }
+  late final Stream<List<ChatViewListModel>> chatListStream =
+      _chatListStreamController.stream.map(
+    (chatMap) => chatMap.values.toList(),
+  );
 
-  /// Function for loading data while pagination.
-  void loadMoreUsers(List<ChatViewListModel> userList) {
-    initialUsersList.addAll(userList);
-    if (chatListStreamController.isClosed) return;
-    chatListStreamController.sink.add(initialUsersList);
+  /// Adds a chat to the chat list.
+  void addChat(ChatViewListModel chat) {
+    chatListMap[chat.id] = chat;
+    if (_chatListStreamController.isClosed) return;
+    _chatListStreamController.add(chatListMap);
   }
 
-  /// Function to add search results of the chat list in the stream.
-  void updateChatList(List<ChatViewListModel> searchResults) {
-    WidgetsBinding.instance.addPostFrameCallback(
-      (_) {
-        if (chatListStreamController.isClosed) return;
-        chatListStreamController.sink.add(searchResults);
+  /// Function for loading data while pagination.
+  void loadMoreChats(List<ChatViewListModel> chatList) {
+    final chatListLength = chatList.length;
+    chatListMap.addAll(
+      {
+        for (var i = 0; i < chatListLength; i++)
+          if (chatList[i] case final chat) chat.id: chat,
       },
     );
+    if (_chatListStreamController.isClosed) return;
+    _chatListStreamController.add(chatListMap);
+  }
+
+  /// Updates the chat entry in [chatListMap] for the given [chatId] using
+  /// the provided [newChat] callback.
+  ///
+  /// If the chat with [chatId] does not exist, the method returns without
+  /// making changes.
+  void updateChat(String chatId, UpdateChatCallback newChat) {
+    final chat = chatListMap[chatId];
+    if (chat == null) return;
+
+    chatListMap[chatId] = newChat(chat);
+    if (_chatListStreamController.isClosed) return;
+    _chatListStreamController.add(chatListMap);
+  }
+
+  /// Adds the given chat search results to the stream after the current frame.
+  void setSearchChats(List<ChatViewListModel> searchResults) {
+    final searchResultLength = searchResults.length;
+    final searchResultMap = {
+      for (var i = 0; i < searchResultLength; i++)
+        if (searchResults[i] case final chat) chat.id: chat,
+    };
+    if (_chatListStreamController.isClosed) return;
+    _chatListStreamController.add(searchResultMap);
   }
 
   /// Function to clear the search results and show the original chat list.
   void clearSearch() {
-    if (chatListStreamController.isClosed) return;
-    chatListStreamController.sink.add(initialUsersList);
+    if (_chatListStreamController.isClosed) return;
+    _chatListStreamController.add(chatListMap);
   }
 
   /// Used to dispose ValueNotifiers and Streams.
   void dispose() {
     scrollController.dispose();
-    chatListStreamController.close();
+    _chatListStreamController.close();
   }
 }

lib/src/extensions/extensions.dart

@@ -26,6 +26,7 @@ import 'package:intl/intl.dart';
 
 import '../inherited_widgets/configurations_inherited_widgets.dart';
 import '../models/config_models/chat_bubble_configuration.dart';
+import '../models/config_models/chat_list/list_type_indicator_config.dart';
 import '../models/config_models/message_list_configuration.dart';
 import '../models/config_models/reply_suggestions_config.dart';
 import '../utils/constants/constants.dart';
@@ -143,6 +144,37 @@ extension ChatViewStateTitleExtension on String? {
   }
 }
 
+extension TypingIndicatorExtension on List<String> {
+  String toTypingStatus(ListTypeIndicatorConfig listTypeIndicatorConfig) {
+    final prefix = listTypeIndicatorConfig.prefix ?? '';
+    final suffix = listTypeIndicatorConfig.suffix ?? '';
+    final showUserNames = listTypeIndicatorConfig.showUserNames;
+    final locale = PackageStrings.currentLocale;
+    final text = '$prefix${locale.typing}$suffix';
+    if (isEmpty) return text;
+
+    final count = length;
+
+    final firstName = this[0];
+
+    if (count == 1) {
+      return '$firstName ${locale.isVerb} $text';
+    } else if (count == 2) {
+      final newText = showUserNames
+          ? '$firstName & ${this[1]} ${locale.areVerb}'
+          : '$firstName & 1 ${locale.other} ${locale.isVerb}';
+      return '$newText $text';
+    } else if (showUserNames && count == 3) {
+      return '${this[0]}, ${this[1]} & ${this[2]} ${locale.areVerb} $text';
+    } else {
+      final newText = showUserNames
+          ? '$firstName, ${this[1]} & ${length - 2}'
+          : '$firstName & ${count - 1}';
+      return '$newText ${locale.others} ${locale.areVerb} $text';
+    }
+  }
+}
+
 /// Extension on State for accessing inherited widget.
 extension StatefulWidgetExtension on State {
   ChatViewInheritedWidget? get chatViewIW =>

lib/src/models/chat_view_list_tile.dart

@@ -22,9 +22,23 @@
 import 'package:chatview_utils/chatview_utils.dart';
 
 import '../values/enumeration.dart';
+import '../values/typedefs.dart';
+import 'omit.dart';
 
 /// Model class representing a user or group in the chat list.
 class ChatViewListModel {
+  /// Creates a user or group object for the chat list.
+  const ChatViewListModel({
+    required this.id,
+    required this.name,
+    this.chatType = ChatType.user,
+    this.typingUsers = const <String>{},
+    this.userActiveStatus = UserActiveStatus.offline,
+    this.lastMessage,
+    this.imageUrl,
+    this.unreadCount,
+  });
+
   /// Unique identifier for the user or group.
   final String id;
 
@@ -47,14 +61,33 @@ class ChatViewListModel {
   /// Defaults to [UserActiveStatus.offline].
   final UserActiveStatus userActiveStatus;
 
-  /// Creates a user or group object for the chat list.
-  const ChatViewListModel({
-    required this.id,
-    required this.name,
-    this.lastMessage,
-    this.imageUrl,
-    this.unreadCount,
-    this.chatType = ChatType.user,
-    this.userActiveStatus = UserActiveStatus.offline,
-  });
+  // TODO(YASH): Switch to User Object instead of string.
+  /// Set of users currently typing in the chat.
+  final Set<String> typingUsers;
+
+  ChatViewListModel copyWith({
+    Defaulted<String> id = const Omit(),
+    Defaulted<String> name = const Omit(),
+    Defaulted<ChatType> chatType = const Omit(),
+    Defaulted<Set<String>> typingUsers = const Omit(),
+    Defaulted<UserActiveStatus> userActiveStatus = const Omit(),
+    Defaulted<Message>? lastMessage = const Omit(),
+    Defaulted<String>? imageUrl = const Omit(),
+    Defaulted<int>? unreadCount = const Omit(),
+  }) {
+    return ChatViewListModel(
+      id: id is Omit ? this.id : id as String,
+      name: name is Omit ? this.name : name as String,
+      chatType: chatType is Omit ? this.chatType : chatType as ChatType,
+      typingUsers:
+          typingUsers is Omit ? this.typingUsers : typingUsers as Set<String>,
+      userActiveStatus: userActiveStatus is Omit
+          ? this.userActiveStatus
+          : userActiveStatus as UserActiveStatus,
+      lastMessage:
+          lastMessage is Omit ? this.lastMessage : lastMessage as Message?,
+      imageUrl: imageUrl is Omit ? this.imageUrl : imageUrl as String?,
+      unreadCount: unreadCount is Omit ? this.unreadCount : unreadCount as int?,
+    );
+  }
 }