msglist: Display typing indicators on typing.

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 one 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/model/events.dart

@@ -1,5 +1,6 @@
 import 'package:json_annotation/json_annotation.dart';
 
+import '../../model/algorithms.dart';
 import 'json.dart';
 import 'model.dart';
 
@@ -900,7 +901,7 @@ class TypingEvent extends Event {
     required this.recipientIds,
     required this.streamId,
     required this.topic,
-  });
+  }) : assert(recipientIds == null || isSortedWithoutDuplicates(recipientIds));
 
   static Object? _readSenderId(Map<Object?, Object?> json, String key) {
     return (json['sender'] as Map<String, dynamic>)['user_id'];
@@ -909,7 +910,7 @@ class TypingEvent extends Event {
   static List<int>? _recipientIdsFromJson(Object? json) {
     if (json == null) return null;
     return (json as List<Object?>).map(
-      (item) => (item as Map<String, Object?>)['user_id'] as int).toList();
+      (item) => (item as Map<String, Object?>)['user_id'] as int).toList()..sort();
   }
 
   factory TypingEvent.fromJson(Map<String, dynamic> json) {

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/model/typing_status.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/foundation.dart';
 
 import '../api/model/events.dart';
+import '../log.dart';
 import 'narrow.dart';
 
 /// The model for tracking the typing status organized by narrows.
@@ -38,6 +39,10 @@ class TypingStatus extends ChangeNotifier {
   }
 
   bool _addTypist(SendableNarrow narrow, int typistUserId) {
+    if (typistUserId == selfUserId) {
+      assert(debugLog('typing status: adding self as typist'));
+      return false;
+    }
     final narrowTimerMap = _timerMapsByNarrow[narrow] ??= {};
     final typistTimer = narrowTimerMap[typistUserId];
     final isNewTypist = typistTimer == null;
@@ -64,7 +69,7 @@ class TypingStatus extends ChangeNotifier {
   void handleTypingEvent(TypingEvent event) {
     SendableNarrow narrow = switch (event.messageType) {
       MessageType.direct => DmNarrow(
-        allRecipientIds: event.recipientIds!..sort(), selfUserId: selfUserId),
+        allRecipientIds: event.recipientIds!, selfUserId: selfUserId),
       MessageType.stream => TopicNarrow(event.streamId!, event.topic!),
     };
 

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';
@@ -496,17 +498,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);
         }));
 
@@ -609,6 +613,64 @@ class ScrollToBottomButton extends StatelessWidget {
   }
 }
 
+class TypingStatusWidget extends StatefulWidget {
+  const TypingStatusWidget({super.key, required this.narrow});
+
+  final Narrow narrow;
+
+  @override
+  State<StatefulWidget> createState() => _TypingStatusWidgetState();
+}
+
+class _TypingStatusWidgetState 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 narrow = widget.narrow;
+    if (narrow is! SendableNarrow) return const SizedBox();
+
+    final store = PerAccountStoreWidget.of(context);
+    final localizations = ZulipLocalizations.of(context);
+    final typistIds = model!.typistIdsInNarrow(narrow);
+    if (typistIds.isEmpty) return const SizedBox();
+    final text = switch (typistIds.length) {
+      1 => localizations.onePersonTyping(
+        store.users[typistIds.first]?.fullName ?? localizations.unknownUserName),
+      2 => localizations.twoPeopleTyping(
+        store.users[typistIds.first]?.fullName ?? localizations.unknownUserName,
+        store.users[typistIds.last]?.fullName  ?? localizations.unknownUserName),
+      _ => localizations.manyPeopleTyping,
+    };
+
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(start: 16, top: 2),
+      child: Text(text,
+        style: const TextStyle(
+          color: HslColor(0, 0, 53), fontStyle: FontStyle.italic)));
+  }
+}
+
 class MarkAsReadWidget extends StatefulWidget {
   const MarkAsReadWidget({super.key, required this.narrow});
 

test/api/model/events_test.dart

@@ -241,5 +241,12 @@ void main() {
       check(() => TypingEvent.fromJson({
         ...baseJson, 'message_type': 'stream', 'stream_id': 123})).throws<void>();
     });
+
+    test('direct type sort recipient ids', () {
+      check(TypingEvent.fromJson({
+        ...directMessageJson,
+        'recipients': [4, 10, 8, 2, 1].map((e) => {'user_id': e, 'email': '[email protected]'}).toList(),
+      })).recipientIds.isNotNull().deepEquals([1, 2, 4, 8, 10]);
+    });
   });
 }

test/model/typing_status_test.dart

@@ -98,21 +98,13 @@ void main() {
       checkNotifiedOnce();
     });
 
-    test('sort dm recipients', () {
-      prepareModel(selfUserId: 5);
-      final recipientIds = [5, 4, 10, 8, 2, 1];
-
-      final eventUnsorted = TypingEvent(id: 1, op: TypingOp.start,
-        senderId: 1,
-        messageType: MessageType.direct,
-        recipientIds: recipientIds,
-        streamId: null, topic: null);
-      // DmNarrow's constructor expects the recipient IDs to be sorted,
-      // and [model.handleTypingEvent] should handle that.
-      model.handleTypingEvent(eventUnsorted);
-      check(model.typistIdsInNarrow(
-        DmNarrow(allRecipientIds: recipientIds..sort(), selfUserId: 5),
-      )).single.equals(1);
+    test('ignore adding self as typist', () {
+      prepareModel();
+
+      model.handleTypingEvent(
+        eg.typingEvent(groupNarrow, TypingOp.start, eg.selfUser.userId));
+      checkTypists({});
+      checkNotNotified();
     });
   });