autocomplete: Implement targeted topic autocomplete

Fixes: #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,7 +3,9 @@ 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';
 
 extension ComposeContentAutocomplete on ComposeContentController {
@@ -42,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
@@ -157,6 +169,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.
@@ -399,6 +417,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(' ');
@@ -407,6 +426,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 {}
@@ -422,3 +449,94 @@ 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;
+
+  TopicAutocompleteDataProvider({required this.store, required this.topics, required this.narrow});
+
+  Iterable<Topic>? topics;
+
+  Future<void> fetch() async {
+    if (topics == null) {
+      final result = await getStreamTopics(store.connection, streamId: narrow.streamId);
+      topics = result.topics;
+      store.autocompleteViewManager.handleTopicsFetchCompleted();
+    }
+  }
+
+  @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

@@ -71,6 +71,42 @@ 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) {
+        return 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

@@ -383,6 +383,43 @@ 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) {
+          return 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,
@@ -882,6 +919,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();
@@ -892,16 +932,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,16 @@ ZulipStream stream({
 }
 const _stream = stream;
 
+Topic topic({
+  int? maxId,
+  String? name,
+}) {
+  return 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