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

@@ -483,5 +483,24 @@
   "notifSelfUser": "You",
   "@notifSelfUser": {
     "description": "Display name for the user themself, to show after replying in an Android notification"
+  },
+  "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,13 +2,15 @@ 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';
 
 import '../api/model/model.dart';
 import '../model/message_list.dart';
 import '../model/narrow.dart';
 import '../model/store.dart';
+import '../model/typing_status.dart';
 import 'action_sheet.dart';
 import 'actions.dart';
 import 'compose_box.dart';
@@ -346,17 +348,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);
         }));
 
@@ -530,6 +534,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 localization = ZulipLocalizations.of(context);
+    final typistNames = model!.typistIdsInNarrow(narrow)
+      .where((id) => id != store.selfUserId)
+      .map((id) => store.users[id]?.fullName ?? localization.unknownUserName)
+      .toList();
+    if (typistNames.isEmpty) return placeholder;
+
+    final String text = switch (typistNames.length) {
+      1 => localization.onePersonTyping(typistNames[0]),
+      2 => localization.twoPeopleTyping(typistNames[0], typistNames[1]),
+      _ => localization.manyPeopleTyping,
+    };
+
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(start: 16, top: 2),
+      child: Text(text,
+        textAlign: TextAlign.start,
+        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

@@ -981,4 +981,70 @@ 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);
+    }
+
+    final dmMessage = eg.dmMessage(from: eg.otherUser, to: [eg.selfUser]);
+    final dmNarrow = DmNarrow.withUsers(
+      users.map((u) => u.userId).toList(),
+      selfUserId: eg.selfUser.userId);
+
+    final streamMessage = eg.streamMessage();
+    final topicNarrow = TopicNarrow.ofMessage(streamMessage);
+
+    for (final (description, message, narrow) in [
+      ('typing in dm',    dmMessage,      dmNarrow),
+      ('typing in topic', streamMessage,  topicNarrow),
+    ]) {
+      testWidgets(description, (tester) async {
+        await setupMessageListPage(tester,
+          narrow: narrow, users: users, messages: [message]);
+        await tester.pump();
+        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('unknown user typing', (tester) async {
+      final streamMessage = eg.streamMessage();
+      final narrow = TopicNarrow.ofMessage(streamMessage);
+      await setupMessageListPage(tester,
+        narrow: narrow, users: [], messages: [streamMessage]);
+      await checkTyping(tester,
+        eg.typingEvent(narrow, TypingOp.start, 1000),
+        expected: '(unknown user) is typing…',
+      );
+      // Wait for the pending timers to end.
+      await tester.pump(const Duration(seconds: 15));
+    });
+  });
 }