autocomplete: Implement targeted topic autocomplete

Fixes: #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/channels.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<QueryT 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);
   }
@@ -492,3 +514,78 @@ class UserMentionAutocompleteResult extends MentionAutocompleteResult {
 // TODO(#233): // class UserGroupMentionAutocompleteResult extends MentionAutocompleteResult {
 
 // TODO(#234): // class WildcardMentionAutocompleteResult extends MentionAutocompleteResult {
+
+class TopicAutocompleteView extends AutocompleteView<TopicAutocompleteQuery, TopicAutocompleteResult, String> {
+  TopicAutocompleteView._({required super.store, required this.streamId});
+
+  factory TopicAutocompleteView.init({required PerAccountStore store, required int streamId}) {
+    final view = TopicAutocompleteView._(store: store, streamId: streamId);
+    store.autocompleteViewManager.registerTopicAutocomplete(view);
+    view._fetch();
+    return view;
+  }
+
+  final int streamId;
+  Iterable<String> _topics = [];
+  bool _isFetching = false;
+
+
+  /// 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 restarts search 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.map((e) => e.name);
+    _isFetching = false;
+    if (_query != null) _startSearch(_query!);
+  }
+
+  @override
+  Iterable<String> getSortedItemsToTest(TopicAutocompleteQuery query) => _topics;
+
+  @override
+  TopicAutocompleteResult? testItem(TopicAutocompleteQuery query, String item) {
+    if (query.testTopic(item)) {
+      return TopicAutocompleteResult(topic: item);
+    }
+    return null;
+  }
+
+  @override
+  void dispose() {
+    store.autocompleteViewManager.unregisterTopicAutocomplete(this);
+    super.dispose();
+  }
+}
+
+class TopicAutocompleteQuery extends AutocompleteQuery {
+  TopicAutocompleteQuery(super.raw);
+
+  bool testTopic(String topic) => topic.isNotEmpty
+    && topic != raw
+    && topic.toLowerCase().contains(raw.toLowerCase());
+
+  @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 String topic;
+
+  TopicAutocompleteResult({required this.topic});
+}

lib/widgets/autocomplete.dart

@@ -217,3 +217,44 @@ class ComposeAutocomplete extends AutocompleteField<MentionAutocompleteQuery, Me
             Text(label)])));
   }
 }
+
+class TopicAutocomplete extends AutocompleteField<TopicAutocompleteQuery, TopicAutocompleteResult, String> {
+  const TopicAutocomplete({
+    super.key,
+    required this.streamId,
+    required ComposeTopicController controller,
+    required super.focusNode,
+    required this.contentFocusNode,
+    required super.fieldViewBuilder,
+  }) : super(controller: controller);
+
+  final  FocusNode contentFocusNode;
+
+  final int streamId;
+
+  @override
+  ComposeTopicController get controller => super.controller as ComposeTopicController;
+
+  @override
+  AutocompleteIntent<TopicAutocompleteQuery>? autocompleteIntent() => controller.autocompleteIntent();
+
+  @override
+  TopicAutocompleteView initViewModel(BuildContext context) {
+    final store = PerAccountStoreWidget.of(context);
+    return TopicAutocompleteView.init(store: store, streamId: streamId);
+  }
+  @override
+  Widget buildItem(BuildContext context, int index, TopicAutocompleteResult option) => InkWell(
+    onTap: () {
+      final intent = autocompleteIntent();
+      if (intent == null) return;
+      final label = option.topic;
+      controller.value = intent.textEditingValue.replaced(TextRange(
+        start: intent.syntaxStart,
+        end: intent.textEditingValue.text.length), label);
+      contentFocusNode.requestFocus();
+    },
+    child: Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      child: Text(option.topic)));
+}

lib/widgets/compose_box.dart

@@ -376,6 +376,38 @@ class _StreamContentInputState extends State<_StreamContentInput> {
   }
 }
 
+class _TopicInput extends StatelessWidget {
+  const _TopicInput({
+    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 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(hintText: zulipLocalizations.composeBoxTopicHintText),
+      ));
+  }
+}
+
 class _FixedDestinationContentInput extends StatelessWidget {
   const _FixedDestinationContentInput({
     required this.narrow,
@@ -942,6 +974,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();
@@ -952,16 +987,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: _TopicInput(
+        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/channels.dart';
 import 'package:zulip/model/narrow.dart';
 import 'package:zulip/model/store.dart';
 
@@ -193,6 +194,11 @@ ZulipStream stream({
 }
 const _stream = stream;
 
+GetStreamTopicsEntry getStreamTopicsEntry({int? maxId, String? name}) {
+  maxId ??= 123;
+  return GetStreamTopicsEntry(maxId: maxId, name: name ?? '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,6 +6,10 @@ 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<AutocompleteQuery>> {
   Subject<int> get syntaxStart => has((i) => i.syntaxStart, 'syntaxStart');
   Subject<AutocompleteQuery> get query => has((i) => i.query, 'query');
@@ -14,3 +18,7 @@ extension AutocompleteIntentChecks on Subject<AutocompleteIntent<AutocompleteQue
 extension UserMentionAutocompleteResultChecks on Subject<UserMentionAutocompleteResult> {
   Subject<int> get userId => has((r) => r.userId, 'userId');
 }
+
+extension TopicAutocompleteResultChecks on Subject<TopicAutocompleteResult> {
+  Subject<String> get topic => has((r) => r.topic, 'topic');
+}