Merge pull request #457 from GetStream/vishal/autocomplete-fix

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

@@ -6,7 +6,7 @@ import type {
   ChannelMemberResponse,
   UserResponse,
 } from 'stream-chat';
-
+import type { DebouncedFunc } from 'lodash';
 import type { CommandsItemProps } from '../components/AutoCompleteInput/CommandsItem';
 import type { MentionsItemProps } from '../components/AutoCompleteInput/MentionsItem';
 import type {
@@ -101,7 +101,6 @@ const getMembers = <
   const members = (channel.state.members as unknown) as ChannelMemberResponse<
     Us
   >[];
-
   return members && Object.values(members).length
     ? (Object.values(members).filter((member) => member.user) as Array<
         ChannelMemberResponse<Us> & { user: UserResponse<Us> }
@@ -149,6 +148,19 @@ const getMembersAndWatchers = <
     }, {} as { [key: string]: SuggestionUser<Us> }),
   );
 };
+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 <
@@ -164,27 +176,24 @@ 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(queryMembers, 200, {
+  leading: false,
+  trailing: true,
+});
 export const isMentionTrigger = (trigger: Trigger): trigger is '@' =>
   trigger === '@';
 
@@ -223,7 +232,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 +255,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 +281,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 +311,7 @@ export const ACITriggerSettings = <
         return 0;
       });
 
-      const result = selectedCommands.slice(0, 10);
+      const result = selectedCommands.slice(0, autocompleteSuggestionsLimit);
 
       if (onReady) {
         onReady(result, query);
@@ -343,16 +354,17 @@ export const ACITriggerSettings = <
           return false;
         });
 
-        const data = matchingUsers.slice(0, 10);
+        const data = matchingUsers.slice(0, autocompleteSuggestionsLimit);
 
         if (onReady) {
           onReady(data, query);
         }
 
         return data;
       }
-
-      return queryMembers(channel, query, (data) => {
+      return (queryMembersDebounced as DebouncedFunc<
+        QueryMembersFunction<At, Ch, Co, Ev, Me, Re, Us>
+      >)(channel, query, (data) => {
         if (onReady) {
           onReady(data, query);
         }