Merge branch 'develop'

docusaurus/docs/Flutter/guides/autocomplete_triggers.mdx

@@ -0,0 +1,118 @@
+---
+id: autocomplete_triggers
+title: Adding Custom Autocomplete Triggers
+---
+
+Adding Custom Autocomplete Triggers
+
+### Introduction
+
+The [StreamMessageInput](../stream_chat_flutter/message_input.mdx) widget provides a way to add custom autocomplete triggers using the `StreamMessageInput.customAutocompleteTriggers` property.
+
+By default we provide autocomplete triggers for mentions and commands, but it's very easy to add your custom ones.
+
+### Add Emoji Autocomplete Trigger
+
+To add a custom emoji autocomplete trigger, you must first create an `AutoCompleteOptions` widget.
+This widget will be used to show the autocomplete options.
+
+For this example we're using two external dependencies: 
+
+- [emojis](https://pub.dev/packages/emojis)
+- [substring_highlight](https://pub.dev/packages/substring_highlight)
+
+```dart
+import 'package:emojis/emoji.dart';
+import 'package:flutter/material.dart';
+
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:substring_highlight/substring_highlight.dart';
+
+/// Overlay for displaying emoji that can be used
+class StreamEmojiAutocompleteOptions extends StatelessWidget {
+  /// Constructor for creating a [StreamEmojiAutocompleteOptions]
+  const StreamEmojiAutocompleteOptions({
+    super.key,
+    required this.query,
+    this.onEmojiSelected,
+  });
+
+  /// Query for searching emoji.
+  final String query;
+
+  /// Callback called when an emoji is selected.
+  final ValueSetter<Emoji>? onEmojiSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    final emojis = Emoji.all().where((it) {
+      final normalizedQuery = query.toUpperCase();
+      final normalizedShortName = it.shortName.toUpperCase();
+
+      return normalizedShortName.contains(normalizedQuery);
+    });
+
+    if (emojis.isEmpty) return const SizedBox.shrink();
+
+    return StreamAutocompleteOptions<Emoji>(
+      options: emojis,
+      optionBuilder: (context, emoji) {
+        final themeData = Theme.of(context);
+        return ListTile(
+          dense: true,
+          horizontalTitleGap: 0,
+          leading: Text(
+            emoji.char,
+            style: themeData.textTheme.headline6!.copyWith(
+              fontSize: 24,
+            ),
+          ),
+          title: SubstringHighlight(
+            text: emoji.shortName,
+            term: query,
+            textStyleHighlight: themeData.textTheme.headline6!.copyWith(
+              color: Colors.yellow,
+              fontSize: 14.5,
+              fontWeight: FontWeight.bold,
+            ),
+            textStyle: themeData.textTheme.headline6!.copyWith(
+              fontSize: 14.5,
+            ),
+          ),
+          onTap: onEmojiSelected == null ? null : () => onEmojiSelected!(emoji),
+        );
+      },
+    );
+  }
+}
+```
+
+Now it's time to use the `StreamEmojiAutocompleteOptions` widget.
+
+```dart
+StreamMessageInput(
+  customAutocompleteTriggers: [
+    StreamAutocompleteTrigger(
+      trigger: ':',
+      minimumRequiredCharacters: 2,
+      optionsViewBuilder: (
+        context,
+        autocompleteQuery,
+        messageEditingController,
+      ) {
+        final query = autocompleteQuery.query;
+        return StreamEmojiAutocompleteOptions(
+          query: query,
+          onEmojiSelected: (emoji) {
+            // accepting the autocomplete option.
+            StreamAutocomplete.of(context).acceptAutocompleteOption(
+              emoji.char,
+              keepTrigger: false,
+            );
+          },
+        );
+      },
+    ),
+  ],
+),
+```