msglist: Display typing indicators on typing.

Because we don't have a Figma design yet, this revision supports a basic
design similar to the web app when there are people typing.

Fixes #665.

Signed-off-by: Zixuan James Li <[email protected]>

Author: PIG208

assets/l10n/app_en.arb

@@ -479,5 +479,24 @@
       "senderFullName": {"type": "String", "example": "Alice"},
       "numOthers": {"type": "int", "example": "4"}
     }
+  },
+  "onePersonTyping": "{typist} is typing...",
+  "@onePersonTyping": {
+    "description": "Text to display when there is a user typing.",
+    "placeholders": {
+      "typist": {"type": "String", "example": "Alice"}
+    }
+  },
+  "twoPeopleTyping": "{typist} and {otherTypist} are typing...",
+  "@twoPeopleTyping": {
+    "description": "Text to display when there are two users typing.",
+    "placeholders": {
+      "typist": {"type": "String", "example": "Alice"},
+      "otherTypist": {"type": "String", "example": "Bob"}
+    }
+  },
+  "manyPeopleTyping": "Several people are typing...",
+  "@manyPeopleTyping": {
+    "description": "Text to display when there are multiple users typing."
   }
 }

lib/api/route/events.dart

@@ -16,7 +16,7 @@ Future<InitialSnapshot> registerQueue(ApiConnection connection) {
       'notification_settings_null': true,
       'bulk_message_deletion': true,
       'user_avatar_url_field_optional': false, // TODO(#254): turn on
-      'stream_typing_notifications': false, // TODO implement
+      'stream_typing_notifications': true,
       'user_settings_object': true,
     },
   });

lib/widgets/message_list.dart

@@ -2,6 +2,7 @@ import 'dart:math';
 
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_color_models/flutter_color_models.dart';
 import 'package:flutter_gen/gen_l10n/zulip_localizations.dart';
 import 'package:intl/intl.dart';
 
@@ -11,6 +12,7 @@ import '../api/route/messages.dart';
 import '../model/message_list.dart';
 import '../model/narrow.dart';
 import '../model/store.dart';
+import '../model/typing_status.dart';
 import 'action_sheet.dart';
 import 'compose_box.dart';
 import 'content.dart';
@@ -326,17 +328,19 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
           final valueKey = key as ValueKey<int>;
           final index = model!.findItemWithMessageId(valueKey.value);
           if (index == -1) return null;
-          return length - 1 - (index - 2);
+          return length - 1 - (index - 3);
         },
-        childCount: length + 2,
+        childCount: length + 3,
         (context, i) {
           // To reinforce that the end of the feed has been reached:
           //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20Mark-as-read/near/1680603
           if (i == 0) return const SizedBox(height: 36);
 
           if (i == 1) return MarkAsReadWidget(narrow: widget.narrow);
 
-          final data = model!.items[length - 1 - (i - 2)];
+          if (i == 2) return TypingStatusWidget(narrow: widget.narrow);
+
+          final data = model!.items[length - 1 - (i - 3)];
           return _buildItem(data, i);
         }));
 
@@ -510,6 +514,68 @@ class MarkAsReadWidget extends StatelessWidget {
   }
 }
 
+class _TypingStatusState extends State<TypingStatusWidget> with PerAccountStoreAwareStateMixin<TypingStatusWidget> {
+  TypingStatus? model;
+
+  @override
+  void onNewStore() {
+    model?.removeListener(_modelChanged);
+    model = PerAccountStoreWidget.of(context).typingStatus
+      ..addListener(_modelChanged);
+  }
+
+  @override
+  void dispose() {
+    model?.removeListener(_modelChanged);
+    super.dispose();
+  }
+
+  void _modelChanged() {
+    setState(() {
+      // The actual state lives in [model].
+      // This method was called because that just changed.
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
+    final narrow = widget.narrow;
+    const placeholder = SizedBox(height: 8);
+    if (narrow is! SendableNarrow) return placeholder;
+
+    final typistNames = model!.typistIdsInNarrow(narrow)
+      .where((id) => id != store.selfUserId)
+      .map((id) => store.users[id]!.fullName)
+      .toList();
+    if (typistNames.isEmpty) return placeholder;
+
+    final localization = ZulipLocalizations.of(context);
+    final String text = switch (typistNames.length) {
+      1 => localization.onePersonTyping(typistNames[0]),
+      2 => localization.twoPeopleTyping(typistNames[0], typistNames[1]),
+      _ => localization.manyPeopleTyping,
+    };
+
+    return Padding(
+      padding: const EdgeInsets.only(left: 16, top: 2),
+      child: Text(text,
+        textAlign: TextAlign.left,
+        style: const TextStyle(
+          color: HslColor(0, 0, 53), fontStyle: FontStyle.italic)),
+    );
+  }
+}
+
+class TypingStatusWidget extends StatefulWidget {
+  const TypingStatusWidget({super.key, required this.narrow});
+
+  final Narrow narrow;
+
+  @override
+  State<StatefulWidget> createState() => _TypingStatusState();
+}
+
 class RecipientHeader extends StatelessWidget {
   const RecipientHeader({super.key, required this.message, required this.narrow});
 

test/widgets/message_list_test.dart

@@ -1009,4 +1009,61 @@ void main() {
       });
     });
   });
+
+  group('TypingStatus', () {
+    final users = [eg.selfUser, eg.otherUser, eg.thirdUser, eg.fourthUser];
+    final finder = find.descendant(
+      of: find.byType(TypingStatusWidget),
+      matching: find.byType(Text)
+    );
+
+    checkTyping(WidgetTester tester, TypingEvent event, {required String expected}) async {
+      await store.handleEvent(event);
+      await tester.pump();
+      check(finder.evaluate()).single.has((x) => x.widget, 'widget').isA<Text>()
+        .data.equals(expected);
+    }
+
+    testTyping(WidgetTester tester, SendableNarrow narrow) async {
+      check(finder.evaluate()).isEmpty();
+      await checkTyping(tester,
+        eg.typingEvent(narrow, TypingOp.start, eg.otherUser.userId),
+        expected: 'Other User is typing...');
+      await checkTyping(tester,
+        eg.typingEvent(narrow, TypingOp.start, eg.selfUser.userId),
+        expected: 'Other User is typing...');
+      await checkTyping(tester,
+        eg.typingEvent(narrow, TypingOp.start, eg.thirdUser.userId),
+        expected: 'Other User and Third User are typing...');
+      await checkTyping(tester,
+        eg.typingEvent(narrow, TypingOp.start, eg.fourthUser.userId),
+        expected: 'Several people are typing...');
+      await checkTyping(tester,
+        eg.typingEvent(narrow, TypingOp.stop, eg.otherUser.userId),
+        expected: 'Third User and Fourth User are typing...');
+      // Verify that typing indicators expire after a set duration.
+      await tester.pump(const Duration(seconds: 15));
+      check(finder.evaluate()).isEmpty();
+    }
+
+    testWidgets('typing in dm', (tester) async {
+      final message = eg.dmMessage(from: eg.otherUser, to: [eg.selfUser]);
+      final narrow = DmNarrow.withUsers(
+        users.map((u) => u.userId).toList(),
+        selfUserId: eg.selfUser.userId);
+      await setupMessageListPage(tester,
+        narrow: narrow, users: users, messages: [message]);
+      await tester.pump();
+      await testTyping(tester, narrow);
+    });
+
+    testWidgets('typing in topic', (tester) async {
+      final message = eg.streamMessage();
+      final narrow = TopicNarrow.ofMessage(message);
+      await setupMessageListPage(tester,
+        narrow: narrow, users: users, messages: [message]);
+      await tester.pump();
+      await testTyping(tester, narrow);
+    });
+  });
 }