compose_box: Send typing notifications on content changes

We added getTypingNotificationNarrow to reuse the same code for both
_StreamContentInput and _FixedDestinationContentInput.  This callback
function parallels _SendButton.getDestination -- both of them return a
computed value depending on the states of the Composecontrollers.

It would have been a concern if we intend to use this on the build
function, because it essentially carries a mutable state that the
Flutter Engine does not necessarily know about.  However, simimlar to
_SendButton, we only use that on callback functions, not on user
visible elements.  Plus, _StreamContentInput actually listens to
changes to topicController, but the callback doesn't rely on that
behavior.

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

Author: PIG208

lib/widgets/compose_box.dart

@@ -272,12 +272,14 @@ class ComposeContentController extends ComposeController<ContentValidationError>
 class _ContentInput extends StatefulWidget {
   const _ContentInput({
     required this.narrow,
+    required this.getTypingNotificationNarrow,
     required this.controller,
     required this.focusNode,
     required this.hintText,
   });
 
   final Narrow narrow;
+  final SendableNarrow Function() getTypingNotificationNarrow;
   final ComposeContentController controller;
   final FocusNode focusNode;
   final String hintText;
@@ -287,6 +289,61 @@ class _ContentInput extends StatefulWidget {
 }
 
 class _ContentInputState extends State<_ContentInput> {
+  String? _prevText;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_contentChanged);
+    widget.focusNode.addListener(_focusChanged);
+  }
+
+  @override
+  void didUpdateWidget(covariant _ContentInput oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.controller != oldWidget.controller) {
+      oldWidget.controller.removeListener(_contentChanged);
+      oldWidget.focusNode.removeListener(_focusChanged);
+      widget.controller.addListener(_contentChanged);
+      widget.focusNode.addListener(_focusChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_contentChanged);
+    widget.focusNode.removeListener(_focusChanged);
+    super.dispose();
+  }
+
+  void _contentChanged() {
+    if (_prevText == widget.controller.text) {
+      // [TextEditingController] also notifies the listeners
+      // on selection updates.  Return early because we do not
+      // consider that as typing activity.
+      return;
+    }
+    final store = PerAccountStoreWidget.of(context);
+    store.typingNotifier.handleTypingStatusUpdate(
+      // Check and send a "typing stopped" notification eagerly
+      // if the text gets cleared.
+      destination: widget.controller.text.isEmpty
+                   ? null : widget.getTypingNotificationNarrow());
+    _prevText = widget.controller.text;
+  }
+
+  void _focusChanged() {
+    if (widget.focusNode.hasFocus) {
+      // Content input getting focus doesn't necessarily mean that
+      // the user started typing, so do nothing.
+      return;
+    }
+    // Losing focus usually indicates that the user has navigated away
+    // or clicked on other UI elements.
+    final store = PerAccountStoreWidget.of(context);
+    store.typingNotifier.handleTypingStatusUpdate(destination: null);
+  }
+
   @override
   Widget build(BuildContext context) {
     ColorScheme colorScheme = Theme.of(context).colorScheme;
@@ -375,6 +432,8 @@ class _StreamContentInputState extends State<_StreamContentInput> {
       ?? zulipLocalizations.composeBoxUnknownChannelName;
     return _ContentInput(
       narrow: widget.narrow,
+      getTypingNotificationNarrow: () => TopicNarrow(
+        widget.narrow.streamId, widget.topicController.textNormalized),
       controller: widget.controller,
       focusNode: widget.focusNode,
       hintText: zulipLocalizations.composeBoxChannelContentHint(streamName, _topicTextNormalized));
@@ -451,6 +510,7 @@ class _FixedDestinationContentInput extends StatelessWidget {
   Widget build(BuildContext context) {
     return _ContentInput(
       narrow: narrow,
+      getTypingNotificationNarrow: () => narrow,
       controller: controller,
       focusNode: focusNode,
       hintText: _hintText(context));

test/widgets/compose_box_test.dart

@@ -15,13 +15,16 @@ import 'package:zulip/model/localizations.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 import 'package:zulip/model/typing_status.dart';
+import 'package:zulip/widgets/app.dart';
 import 'package:zulip/widgets/compose_box.dart';
+import 'package:zulip/widgets/page.dart';
 
 import '../api/fake_api.dart';
 import '../example_data.dart' as eg;
 import '../flutter_checks.dart';
 import '../model/binding.dart';
 import '../model/test_store.dart';
+import '../model/typing_status_test.dart';
 import '../stdlib_checks.dart';
 import 'dialog_checks.dart';
 import 'test_app.dart';
@@ -201,6 +204,134 @@ void main() {
     });
   });
 
+  group('ComposeBox typing notification', () {
+    const narrow = TopicNarrow(123, 'some topic');
+
+    // This uses a high feature level to test with the latest version of the
+    // setTypingNotifier API.
+    final account = eg.account(
+      user: eg.selfUser, zulipFeatureLevel: eg.futureZulipFeatureLevel);
+
+    final contentInputFinder = find.byWidgetPredicate(
+      (widget) => widget is TextField && widget.controller is ComposeContentController);
+    final topicInputFinder = find.byWidgetPredicate(
+      (widget) => widget is TextField && widget.controller is ComposeTopicController);
+
+    void checkTypingRequest(TypingOp op, SendableNarrow narrow) =>
+      checkSetTypingStatusRequests(connection, [(op, narrow)]);
+
+    Future<void> checkStartTyping(WidgetTester tester, SendableNarrow narrow) async {
+      connection.prepare(json: {});
+      await tester.enterText(contentInputFinder, 'hello world');
+      checkTypingRequest(TypingOp.start, narrow);
+    }
+
+    testWidgets('smoke TopicNarrow', (tester) async {
+      await prepareComposeBox(tester, narrow: narrow, account: account);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('smoke DmNarrow', (tester) async {
+      final narrow = DmNarrow.withUsers(
+        [eg.otherUser.userId], selfUserId: eg.selfUser.userId);
+      await prepareComposeBox(tester, narrow: narrow, account: account);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('smoke ChannelNarrow', (tester) async {
+      const narrow = ChannelNarrow(123);
+      final destinationNarrow = TopicNarrow(narrow.streamId, 'test topic');
+      await prepareComposeBox(tester, narrow: narrow, account: account);
+
+      await tester.enterText(topicInputFinder, destinationNarrow.topic);
+      // Remove an irrelevant topic request.
+      check(connection.takeRequests()).single
+        ..method.equals('GET')
+        ..url.path.equals('/api/v1/users/me/123/topics');
+
+      await checkStartTyping(tester, destinationNarrow);
+
+      connection.prepare(json: {});
+      await tester.pump(store.typingNotifier.typingStoppedWaitPeriod);
+      checkTypingRequest(TypingOp.stop, destinationNarrow);
+    });
+
+    testWidgets('clearing text stops typing notification', (tester) async {
+      await prepareComposeBox(tester, narrow: narrow, account: account);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      await tester.enterText(contentInputFinder, '');
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    Future<void> prepareComposeBoxWithNavigation(WidgetTester tester) async {
+      addTearDown(testBinding.reset);
+      await testBinding.globalStore.add(account, eg.initialSnapshot(
+        zulipFeatureLevel: account.zulipFeatureLevel));
+
+      await tester.pumpWidget(const ZulipApp());
+      await tester.pump();
+      final navigator = await ZulipApp.navigator;
+      navigator.push(MaterialAccountWidgetRoute(
+        accountId: account.id, page: const ComposeBox(narrow: narrow)));
+      await tester.pumpAndSettle();
+
+      store = await testBinding.globalStore.perAccount(account.id);
+      connection = store.connection as FakeApiConnection;
+    }
+
+    testWidgets('navigating away stops typing notification', (tester) async {
+      await prepareComposeBoxWithNavigation(tester);
+
+      await checkStartTyping(tester, narrow);
+
+      connection.prepare(json: {});
+      (await ZulipApp.navigator).pop();
+      await tester.pump(Duration.zero);
+      checkTypingRequest(TypingOp.stop, narrow);
+    });
+
+    testWidgets('for content input, unfocusing stops typing notification and refocusing does not start it', (tester) async {
+      const narrow = ChannelNarrow(123);
+      final destinationNarrow = TopicNarrow(narrow.streamId, 'test topic');
+      await prepareComposeBox(tester, narrow: narrow, account: account);
+
+      await tester.enterText(topicInputFinder, destinationNarrow.topic);
+      // Remove an irrelevant topic request.
+      check(connection.takeRequests()).single
+        ..method.equals('GET')
+        ..url.path.equals('/api/v1/users/me/123/topics');
+
+      connection.prepare(json: {});
+      await tester.enterText(contentInputFinder, 'hello world');
+      checkTypingRequest(TypingOp.start, destinationNarrow);
+
+      connection.prepare(json: {});
+      // Move focus to the topic input
+      await tester.tap(topicInputFinder);
+      await tester.pump(Duration.zero);
+      checkTypingRequest(TypingOp.stop, destinationNarrow);
+
+      await tester.tap(contentInputFinder);
+      await tester.pump(Duration.zero);
+      // Refocusing on the content input would trigger an update to
+      // [TextEditingController.selection].  Still, we expect no
+      // "typing started" request if the text remains the same.
+    });
+  });
+
   group('message-send request response', () {
     Future<void> setupAndTapSend(WidgetTester tester, {
       required void Function(int messageId) prepareResponse,