autocomplete: Implement targeted topic autocomplete

Fixes: zulip#310

Author: Khader-1

lib/model/autocomplete.dart

@@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
 
 import '../api/model/events.dart';
 import '../api/model/model.dart';
+import '../api/route/streams.dart';
 import '../widgets/compose_box.dart';
 import 'narrow.dart';
 import 'store.dart';
@@ -43,6 +44,16 @@ extension ComposeContentAutocomplete on ComposeContentController {
   }
 }
 
+extension ComposeTopicAutocomplete on ComposeTopicController {
+  AutocompleteIntent<TopicAutocompleteQuery>? autocompleteIntent() {
+    if (!selection.isValid || !selection.isNormalized) return null;
+    return AutocompleteIntent(
+      syntaxStart: 0,
+      query: TopicAutocompleteQuery(value.text),
+      textEditingValue: value);
+  }
+}
+
 final RegExp mentionAutocompleteMarkerRegex = (() {
   // What's likely to come before an @-mention: the start of the string,
   // whitespace, or punctuation. Letters are unlikely; in that case an email
@@ -112,6 +123,7 @@ class AutocompleteIntent<Q extends AutocompleteQuery> {
 /// On reassemble, call [reassemble].
 class AutocompleteViewManager {
   final Set<MentionAutocompleteView> _mentionAutocompleteViews = {};
+  final Set<TopicAutocompleteView> _topicAutocompleteViews = {};
 
   AutocompleteDataCache autocompleteDataCache = AutocompleteDataCache();
 
@@ -125,6 +137,16 @@ class AutocompleteViewManager {
     assert(removed);
   }
 
+  void registerTopicAutocomplete(TopicAutocompleteView view) {
+    final added = _topicAutocompleteViews.add(view);
+    assert(added);
+  }
+
+  void unregisterTopicAutocomplete(TopicAutocompleteView view) {
+    final removed = _topicAutocompleteViews.remove(view);
+    assert(removed);
+  }
+
   void handleRealmUserRemoveEvent(RealmUserRemoveEvent event) {
     autocompleteDataCache.invalidateUser(event.userId);
   }
@@ -133,6 +155,12 @@ class AutocompleteViewManager {
     autocompleteDataCache.invalidateUser(event.userId);
   }
 
+  void handleTopicsFetchCompleted() {
+    for (final view in _topicAutocompleteViews) {
+      view.reassemble();
+    }
+  }
+
   /// Called when the app is reassembled during debugging, e.g. for hot reload.
   ///
   /// Calls [MentionAutocompleteView.reassemble] for all that are registered.
@@ -370,6 +398,7 @@ class MentionAutocompleteQuery extends AutocompleteQuery {
 
 class AutocompleteDataCache {
   final Map<int, List<String>> _nameWordsByUser = {};
+  final Map<String, List<String>> _nameWordsByTopic = {};
 
   List<String> nameWordsForUser(User user) {
     return _nameWordsByUser[user.userId] ??= user.fullName.toLowerCase().split(' ');
@@ -378,6 +407,14 @@ class AutocompleteDataCache {
   void invalidateUser(int userId) {
     _nameWordsByUser.remove(userId);
   }
+
+  List<String> nameWordsForTopic(Topic topic) {
+    return _nameWordsByTopic[topic.value] ??= topic.value.toLowerCase().split(' ');
+  }
+
+  void invalidateTopic(String value) {
+    _nameWordsByTopic.remove(value);
+  }
 }
 
 class AutocompleteResult {}
@@ -393,3 +430,80 @@ class UserMentionAutocompleteResult extends MentionAutocompleteResult {
 // TODO(#233): // class UserGroupMentionAutocompleteResult extends MentionAutocompleteResult {
 
 // TODO(#234): // class WildcardMentionAutocompleteResult extends MentionAutocompleteResult {
+
+class TopicAutocompleteView extends AutocompleteView<TopicAutocompleteQuery, TopicAutocompleteResult> {
+  final int streamId;
+  Iterable<Topic> _topics = [];
+  bool _isFetching = false;
+
+  TopicAutocompleteView.init({
+      required super.store,
+      required this.streamId,
+  }) {
+    store.autocompleteViewManager.registerTopicAutocomplete(this);
+    fetch();
+  }
+
+  /// Fetches topics of the current stream narrow, expected to fetch
+  /// only once per lifecycle.
+  ///
+  /// Starts fetching once the stream narrow is active, then when results
+  /// are fetched it notifies `autocompleteViewManager` to refresh UI
+  /// showing the newly fetched topics.
+  Future<void> fetch() async {
+    if (_isFetching) return;
+    _isFetching = true;
+    final result = await getStreamTopics(store.connection, streamId: streamId);
+    _topics = result.topics;
+    store.autocompleteViewManager.handleTopicsFetchCompleted();
+    _isFetching = false;
+  }
+
+  @override
+  Iterable<Topic> getDataForQuery(TopicAutocompleteQuery query) {
+    return _topics;
+  }
+
+  @override
+  TopicAutocompleteResult? testItem(TopicAutocompleteQuery query, Object item) {
+    if (item is Topic) {
+      if (query.testTopic(item, store.autocompleteViewManager.autocompleteDataCache)) {
+        return TopicAutocompleteResult(topic: item);
+      }
+    }
+    return null;
+  }
+
+  @override
+  void dispose() {
+    store.autocompleteViewManager.unregisterTopicAutocomplete(this);
+    super.dispose();
+  }
+}
+
+class TopicAutocompleteQuery extends AutocompleteQuery {
+  TopicAutocompleteQuery(super.raw);
+
+  bool testTopic(Topic topic, AutocompleteDataCache cache) {
+    return _testContainsQueryWords(cache.nameWordsForTopic(topic));
+  }
+
+  @override
+  String toString() {
+    return '${objectRuntimeType(this, 'TopicAutocompleteQuery')}(raw: $raw)';
+  }
+
+  @override
+  bool operator ==(Object other) {
+    return other is TopicAutocompleteQuery && other.raw == raw;
+  }
+
+  @override
+  int get hashCode => Object.hash('TopicAutocompleteQuery', raw);
+}
+
+class TopicAutocompleteResult extends AutocompleteResult {
+  final Topic topic;
+
+  TopicAutocompleteResult({required this.topic});
+}

lib/widgets/autocomplete.dart

@@ -70,6 +70,36 @@ class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, Me
     });
 }
 
+class TopicAutocomplete extends AutocompleteField<TopicAutocompleteQuery, TopicAutocompleteResult> {
+  TopicAutocomplete({
+    super.key,
+    required int streamId,
+    required ComposeTopicController controller,
+    required super.focusNode,
+    required FocusNode contentFocusNode,
+    required super.fieldViewBuilder,
+  }) : super(
+    controller: controller,
+    getAutocompleteIntent: () => controller.autocompleteIntent(),
+    viewModelBuilder: (context) {
+      final store = PerAccountStoreWidget.of(context);
+      return TopicAutocompleteView.init(store: store, streamId: streamId);
+    },
+    itemBuilder: (context, index, option) => InkWell(
+      onTap: () {
+        final intent = controller.autocompleteIntent();
+        if (intent == null) return;
+        final label = option.topic.value;
+        controller.value = intent.textEditingValue.replaced(TextRange(
+          start: intent.syntaxStart,
+          end: intent.textEditingValue.selection.end), label);
+        contentFocusNode.requestFocus();
+      },
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+        child: Text(option.topic.value))));
+}
+
 class AutocompleteField<Q extends AutocompleteQuery, R extends AutocompleteResult> extends StatefulWidget {
   const AutocompleteField({
     super.key,

lib/widgets/compose_box.dart

@@ -376,6 +376,39 @@ class _StreamContentInputState extends State<_StreamContentInput> {
   }
 }
 
+class _StreamTopicInput extends StatelessWidget {
+  const _StreamTopicInput({
+    required this.streamId,
+    required this.controller,
+    required this.focusNode,
+    required this.contentFocusNode});
+
+  final int streamId;
+  final ComposeTopicController controller;
+  final FocusNode focusNode;
+  final FocusNode contentFocusNode;
+
+  @override
+  Widget build(BuildContext context) {
+    final zulipLocalizations = ZulipLocalizations.of(context);
+    ColorScheme colorScheme = Theme.of(context).colorScheme;
+
+    return AutocompleteInputWrapper(
+      child: TopicAutocomplete(
+        streamId: streamId,
+        controller: controller,
+        focusNode: focusNode,
+        contentFocusNode: contentFocusNode,
+        fieldViewBuilder: (context) => TextField(
+          controller: controller,
+          focusNode: focusNode,
+          textInputAction: TextInputAction.next,
+          style: TextStyle(color: colorScheme.onSurface),
+          decoration: InputDecoration.collapsed(hintText: zulipLocalizations.composeBoxTopicHintText),
+        )));
+  }
+}
+
 class _FixedDestinationContentInput extends StatelessWidget {
   const _FixedDestinationContentInput({
     required this.narrow,
@@ -876,6 +909,9 @@ class _StreamComposeBoxState extends State<_StreamComposeBox> implements Compose
   @override FocusNode get contentFocusNode => _contentFocusNode;
   final _contentFocusNode = FocusNode();
 
+  FocusNode get topicFocusNode => _topicFocusNode;
+  final _topicFocusNode = FocusNode();
+
   @override
   void dispose() {
     _topicController.dispose();
@@ -886,16 +922,14 @@ class _StreamComposeBoxState extends State<_StreamComposeBox> implements Compose
 
   @override
   Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-    final zulipLocalizations = ZulipLocalizations.of(context);
-
     return _ComposeBoxLayout(
       contentController: _contentController,
       contentFocusNode: _contentFocusNode,
-      topicInput: TextField(
+      topicInput: _StreamTopicInput(
+        streamId: widget.narrow.streamId,
         controller: _topicController,
-        style: TextStyle(color: colorScheme.onSurface),
-        decoration: InputDecoration(hintText: zulipLocalizations.composeBoxTopicHintText),
+        focusNode: topicFocusNode,
+        contentFocusNode: _contentFocusNode,
       ),
       contentInput: _StreamContentInput(
         narrow: widget.narrow,

test/example_data.dart

@@ -4,6 +4,7 @@ import 'package:zulip/api/model/events.dart';
 import 'package:zulip/api/model/initial_snapshot.dart';
 import 'package:zulip/api/model/model.dart';
 import 'package:zulip/api/route/realm.dart';
+import 'package:zulip/api/route/streams.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 
@@ -180,6 +181,16 @@ ZulipStream stream({
 }
 const _stream = stream;
 
+Topic topic({
+  int? maxId,
+  String? value,
+}) {
+  maxId ??= 123;
+  return Topic(
+  maxId: maxId,
+  value: value ?? 'Test Topic #$maxId');
+}
+
 /// Construct an example subscription from a stream.
 ///
 /// We only allow overrides of values specific to the [Subscription], all

test/model/autocomplete_checks.dart

@@ -6,11 +6,25 @@ extension ComposeContentControllerChecks on Subject<ComposeContentController> {
   Subject<AutocompleteIntent<MentionAutocompleteQuery>?> get autocompleteIntent => has((c) => c.autocompleteIntent(), 'autocompleteIntent');
 }
 
+extension ComposeTopicControllerChecks on Subject<ComposeTopicController> {
+  Subject<AutocompleteIntent<TopicAutocompleteQuery>?> get autocompleteIntent => has((c) => c.autocompleteIntent(), 'autocompleteIntent');
+}
+
 extension AutocompleteIntentChecks on Subject<AutocompleteIntent<MentionAutocompleteQuery>> {
   Subject<int> get syntaxStart => has((i) => i.syntaxStart, 'syntaxStart');
   Subject<MentionAutocompleteQuery> get query => has((i) => i.query, 'query');
 }
 
+extension TopicAutocompleteIntentChecks on Subject<AutocompleteIntent<TopicAutocompleteQuery>> {
+  Subject<int> get syntaxStart => has((i) => i.syntaxStart, 'syntaxStart');
+  Subject<TopicAutocompleteQuery> get query => has((i) => i.query, 'query');
+}
+
 extension UserMentionAutocompleteResultChecks on Subject<UserMentionAutocompleteResult> {
   Subject<int> get userId => has((r) => r.userId, 'userId');
 }
+
+extension TopicAutocompleteResultChecks on Subject<TopicAutocompleteResult> {
+  Subject<int> get maxId => has((r) => r.topic.maxId, 'maxId');
+  Subject<String> get name => has((r) => r.topic.value, 'name');
+}