Fixing mentions issue and adding autocompleteSuggestionsLimit prop

Author: vishalnarkhede

src/components/MessageInput/MessageInput.tsx

@@ -164,6 +164,10 @@ export type MessageInputProps<
    * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileIcon.tsx
    */
   AttachmentFileIcon?: React.ComponentType<FileIconProps>;
+  /**
+   * Max number of suggestions to display in list. Defaults to 10.
+   */
+  autocompleteSuggestionsLimit?: number;
   /**
    * Compress image with quality (from 0 to 1, where 1 is best quality).
    * On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images,
@@ -215,6 +219,7 @@ export type MessageInputProps<
   ImageUploadPreview?: React.ComponentType<ImageUploadPreviewProps>;
   /** Initial value to set on input */
   initialValue?: string;
+
   /**
    * Custom UI component for AutoCompleteInput.
    * Defaults to and accepts same props as: https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/AutoCompleteInput/AutoCompleteInput.tsx
@@ -309,6 +314,7 @@ export const MessageInput = <
     hasImagePicker = true,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialValue,
+    autocompleteSuggestionsLimit = 10,
     Input,
     maxNumberOfFiles = 10,
     onChangeText: onChangeTextProp,
@@ -615,6 +621,7 @@ export const MessageInput = <
 
     const triggerSettings = channel
       ? ACITriggerSettings<At, Ch, Co, Ev, Me, Re, Us>({
+          autocompleteSuggestionsLimit,
           channel,
           onMentionSelectItem: onSelectItem,
           t,

src/utils/utils.ts

@@ -150,6 +150,20 @@ const getMembersAndWatchers = <
   );
 };
 
+type QueryMembersFunction = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType
+>(
+  channel: Channel<At, Ch, Co, Ev, Me, Re, Us>,
+  query: SuggestionUser<Us>['name'],
+  onReady?: (users: SuggestionUser<Us>[]) => void,
+) => Promise<void>;
+
 // TODO: test to see if this function works as it integrated a debounce function
 const queryMembers = async <
   At extends UnknownType = DefaultAttachmentType,
@@ -164,27 +178,30 @@ const queryMembers = async <
   query: SuggestionUser<Us>['name'],
   onReady?: (users: SuggestionUser<Us>[]) => void,
 ): Promise<void> => {
-  await debounce(
-    async () => {
-      if (typeof query === 'string') {
-        const response = (await ((channel as unknown) as Channel).queryMembers({
-          name: { $autocomplete: query },
-        })) as ChannelMemberAPIResponse<Us>;
-
-        const users: SuggestionUser<Us>[] = [];
-        response.members.forEach(
-          (member) => isUserResponse(member.user) && users.push(member.user),
-        );
-        if (onReady && users) {
-          onReady(users);
-        }
-      }
-    },
-    200,
-    { leading: false, trailing: true },
-  );
+  if (typeof query === 'string') {
+    const response = (await ((channel as unknown) as Channel).queryMembers({
+      name: { $autocomplete: query },
+    })) as ChannelMemberAPIResponse<Us>;
+
+    const users: SuggestionUser<Us>[] = [];
+    response.members.forEach(
+      (member) => isUserResponse(member.user) && users.push(member.user),
+    );
+    if (onReady && users) {
+      onReady(users);
+    }
+  }
 };
 
+export const queryMembersDebounced = debounce<QueryMembersFunction>(
+  queryMembers,
+  200,
+  {
+    leading: false,
+    trailing: true,
+  },
+);
+
 export const isMentionTrigger = (trigger: Trigger): trigger is '@' =>
   trigger === '@';
 
@@ -223,7 +240,7 @@ export type TriggerSettings<
         data: SuggestionUser<Us>[],
         q: SuggestionUser<Us>['name'],
       ) => void,
-    ) => SuggestionUser<Us>[] | Promise<void>;
+    ) => SuggestionUser<Us>[] | Promise<void> | void;
     output: (
       entity: SuggestionUser<Us>,
     ) => {
@@ -246,6 +263,7 @@ export type ACITriggerSettingsParams<
 > = {
   channel: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   onMentionSelectItem: (item: SuggestionUser<Us>) => void;
+  autocompleteSuggestionsLimit?: number;
 } & Pick<TranslationContextValue, 't'>;
 
 /**
@@ -271,6 +289,7 @@ export const ACITriggerSettings = <
   channel,
   onMentionSelectItem,
   t = (msg: string) => msg,
+  autocompleteSuggestionsLimit = 10,
 }: ACITriggerSettingsParams<At, Ch, Co, Ev, Me, Re, Us>): TriggerSettings<
   Co,
   Us
@@ -300,7 +319,7 @@ export const ACITriggerSettings = <
         return 0;
       });
 
-      const result = selectedCommands.slice(0, 10);
+      const result = selectedCommands.slice(0, autocompleteSuggestionsLimit);
 
       if (onReady) {
         onReady(result, query);
@@ -343,7 +362,7 @@ export const ACITriggerSettings = <
           return false;
         });
 
-        const data = matchingUsers.slice(0, 10);
+        const data = matchingUsers.slice(0, autocompleteSuggestionsLimit);
 
         if (onReady) {
           onReady(data, query);
@@ -352,7 +371,7 @@ export const ACITriggerSettings = <
         return data;
       }
 
-      return queryMembers(channel, query, (data) => {
+      return queryMembersDebounced(channel, query, (data) => {
         if (onReady) {
           onReady(data, query);
         }