autocomplete: Implement targeted topic autocomplete

Fixes: zulip#310

Author: Khader-1

lib/api/route/streams.dart

@@ -0,0 +1,42 @@
+import 'package:json_annotation/json_annotation.dart';
+
+import '../core.dart';
+part 'streams.g.dart';
+
+/// https://zulip.com/api/get-stream-topics
+Future<GetTopicsResult> getStreamTopics(
+  ApiConnection connection, {
+  required int streamId,
+}) {
+  return connection.get('getStreamTopics', GetTopicsResult.fromJson,
+      'users/me/$streamId/topics', {});
+}
+
+@JsonSerializable(fieldRename: FieldRename.snake)
+class GetTopicsResult {
+  final List<Topic>? topics;
+
+  GetTopicsResult({
+    required this.topics,
+  });
+
+  factory GetTopicsResult.fromJson(Map<String, dynamic> json) =>
+      _$GetTopicsResultFromJson(json);
+
+  Map<String, dynamic> toJson() => _$GetTopicsResultToJson(this);
+}
+
+@JsonSerializable(fieldRename: FieldRename.snake)
+class Topic {
+  final int maxId;
+  final String name;
+
+  Topic({
+    required this.maxId,
+    required this.name,
+  });
+
+  factory Topic.fromJson(Map<String, dynamic> json) => _$TopicFromJson(json);
+
+  Map<String, dynamic> toJson() => _$TopicToJson(this);
+}

lib/api/route/streams.g.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
@@ -156,6 +167,12 @@ class AutocompleteViewManager {
     autocompleteDataCache.invalidateUser(event.userId);
   }
 
+  void handleTopicsFetchCompleted() {
+    for (final view in _getViewsOfType<TopicAutocompleteView>()) {
+      view.reassemble();
+    }
+  }
+
   /// Called when the app is reassembled during debugging, e.g. for hot reload.
   ///
   /// Calls [AutocompleteView.reassemble] for all that are registered.
@@ -431,6 +448,7 @@ class MentionAutocompleteQuery extends AutocompleteQuery {
 
 class AutocompleteDataCache {
   final Map<int, List<String>> _nameWordsByUser = {};
+  final Map<int, List<String>> _nameWordsByTopic = {};
 
   List<String> nameWordsForUser(User user) {
     return _nameWordsByUser[user.userId] ??= user.fullName.toLowerCase().split(' ');
@@ -439,6 +457,14 @@ class AutocompleteDataCache {
   void invalidateUser(int userId) {
     _nameWordsByUser.remove(userId);
   }
+
+  List<String> nameWordsForTopic(Topic topic) {
+    return _nameWordsByTopic[topic.maxId] ??= topic.name.toLowerCase().split(' ');
+  }
+
+  void invalidateTopic(int topicMaxId) {
+    _nameWordsByTopic.remove(topicMaxId);
+  }
 }
 
 class AutocompleteResult {}
@@ -454,3 +480,101 @@ class UserMentionAutocompleteResult extends MentionAutocompleteResult {
 // TODO(#233): // class UserGroupMentionAutocompleteResult extends MentionAutocompleteResult {
 
 // TODO(#234): // class WildcardMentionAutocompleteResult extends MentionAutocompleteResult {
+
+class TopicAutocompleteDataProvider extends AutocompleteDataProvider<Topic, TopicAutocompleteQuery, TopicAutocompleteResult> {
+  final PerAccountStore store;
+  final StreamNarrow narrow;
+  Iterable<Topic>? topics;
+  bool isFetching = false;
+
+  TopicAutocompleteDataProvider({required this.store, required this.topics, required this.narrow});
+
+  /// 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 (topics != null && !isFetching) return;
+    isFetching = true;
+    final result = await getStreamTopics(store.connection, streamId: narrow.streamId);
+    topics = result.topics;
+    store.autocompleteViewManager.handleTopicsFetchCompleted();
+    isFetching = false;
+  }
+
+  @override
+  Iterable<Topic> getDataForQuery(TopicAutocompleteQuery query) {
+    return topics ?? [];
+  }
+
+  @override
+  TopicAutocompleteResult? testItem(TopicAutocompleteQuery query, Topic item) {
+    if (query.testTopic(item, store.autocompleteViewManager.autocompleteDataCache)) {
+      return TopicAutocompleteResult(topic: item);
+    }
+    return null;
+  }
+}
+
+class TopicAutocompleteView extends AutocompleteView<TopicAutocompleteQuery, TopicAutocompleteResult> {
+  TopicAutocompleteView.init({
+      required super.store,
+      required StreamNarrow narrow,
+  }) : super(dataProvider: TopicAutocompleteDataProvider(
+      store: store,
+      topics: null,
+      narrow: narrow
+    )..fetch());
+}
+
+class TopicAutocompleteQuery extends AutocompleteQuery {
+  TopicAutocompleteQuery(super.raw)
+    : _lowercaseWords = raw.toLowerCase().split(' ');
+
+  final List<String> _lowercaseWords;
+
+  bool testTopic(Topic topic, AutocompleteDataCache cache) {
+    return _testName(topic, cache);
+  }
+
+  bool _testName(Topic topic, AutocompleteDataCache cache) {
+    final List<String> nameWords = cache.nameWordsForTopic(topic);
+
+    int nameWordsIndex = 0;
+    int queryWordsIndex = 0;
+    while (true) {
+      if (queryWordsIndex == _lowercaseWords.length) {
+        return true;
+      }
+      if (nameWordsIndex == nameWords.length) {
+        return false;
+      }
+
+      if (nameWords[nameWordsIndex].startsWith(_lowercaseWords[queryWordsIndex])) {
+        queryWordsIndex++;
+      }
+      nameWordsIndex++;
+    }
+  }
+
+  @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/model/autocomplete.dart

@@ -70,6 +70,36 @@ class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, Me
     });
 }
 
+class TopicAutocomplete extends AutocompleteField<TopicAutocompleteQuery, TopicAutocompleteResult> {
+  TopicAutocomplete({
+      super.key,
+      required StreamNarrow narrow,
+      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, narrow: narrow);
+      },
+      itemBuilder: (context, index, option) => InkWell(
+        onTap: () {
+          final intent = controller.autocompleteIntent();
+          if (intent == null) return;
+          final label = option.topic.name;
+          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.name))));
+}
+
 class AutocompleteField<Q extends AutocompleteQuery, R extends AutocompleteResult> extends StatefulWidget {
   const AutocompleteField({
     super.key,

lib/widgets/autocomplete.dart

@@ -376,6 +376,40 @@ class _StreamContentInputState extends State<_StreamContentInput> {
   }
 }
 
+class _StreamTopicInput extends StatelessWidget {
+  const _StreamTopicInput({
+    required this.narrow,
+    required this.controller,
+    required this.focusNode,
+    required this.contentFocusNode});
+
+  final StreamNarrow narrow;
+  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(
+        narrow: narrow,
+        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 +910,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 +923,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(
+        narrow: widget.narrow,
         controller: _topicController,
-        style: TextStyle(color: colorScheme.onSurface),
-        decoration: InputDecoration(hintText: zulipLocalizations.composeBoxTopicHintText),
+        focusNode: topicFocusNode,
+        contentFocusNode: _contentFocusNode,
       ),
       contentInput: _StreamContentInput(
         narrow: widget.narrow,

lib/widgets/compose_box.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,13 @@ ZulipStream stream({
 }
 const _stream = stream;
 
+Topic topic({
+  int? maxId,
+  String? name,
+}) => Topic(
+  maxId: maxId ?? 123,
+  name: name ?? 'Test Topic #$maxId');
+
 /// Construct an example subscription from a stream.
 ///
 /// We only allow overrides of values specific to the [Subscription], all

test/example_data.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.name, 'name');
+}