feat: custom autocompletes

szuperaz · szuperaz · commit e8f5c4990ce2 · 2024-12-03T14:25:19.000+01:00
diff --git a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html
@@ -15,24 +15,34 @@
   (paste)="pasteFromClipboard.emit($event)"
 ></textarea>
 <ng-template #autocompleteItem let-item="item">
-  <div class="rta rta__item str-chat__emojisearch__item" [ngSwitch]="item.type">
-    <div *ngSwitchCase="'mention'" class="rta__entity">
-      <ng-container
-        *ngTemplateOutlet="
-          mentionAutocompleteItemTemplate || defaultMentionTemplate;
-          context: { item: item }
-        "
-      ></ng-container>
+  <ng-container *ngIf="item.templateRef; else builtinItem">
+    <ng-container
+      *ngTemplateOutlet="item.templateRef; context: { item: item }"
+    ></ng-container>
+  </ng-container>
+  <ng-template #builtinItem>
+    <div
+      class="rta rta__item str-chat__emojisearch__item"
+      [ngSwitch]="item.type"
+    >
+      <div *ngSwitchCase="'mention'" class="rta__entity">
+        <ng-container
+          *ngTemplateOutlet="
+            mentionAutocompleteItemTemplate || defaultMentionTemplate;
+            context: { item: item }
+          "
+        ></ng-container>
+      </div>
+      <div *ngSwitchCase="'command'" class="rta__entity">
+        <ng-container
+          *ngTemplateOutlet="
+            commandAutocompleteItemTemplate || defaultCommandTemplate;
+            context: { item: item }
+          "
+        ></ng-container>
+      </div>
     </div>
-    <div *ngSwitchCase="'command'" class="rta__entity">
-      <ng-container
-        *ngTemplateOutlet="
-          commandAutocompleteItemTemplate || defaultCommandTemplate;
-          context: { item: item }
-        "
-      ></ng-container>
-    </div>
-  </div>
+  </ng-template>
 </ng-template>
 
 <ng-template #defaultCommandTemplate let-item="item">
diff --git a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts
@@ -24,10 +24,11 @@ import { UserResponse } from 'stream-chat';
 import { ChannelService } from '../../channel.service';
 import { TextareaInterface } from '../textarea.interface';
 import { ChatClientService } from '../../chat-client.service';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, filter } from 'rxjs/operators';
 import { TransliterationService } from '../../transliteration.service';
 import { EmojiInputService } from '../emoji-input.service';
 import { CustomTemplatesService } from '../../custom-templates.service';
+import { MessageInputConfigService } from '../message-input-config.service';
 
 /**
  * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
@@ -137,13 +138,21 @@ export class AutocompleteTextareaComponent
     private transliterationService: TransliterationService,
     private emojiInputService: EmojiInputService,
     private customTemplatesService: CustomTemplatesService,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
+    private messageInputConfigService: MessageInputConfigService
   ) {
-    this.searchTerm$.pipe(debounceTime(300)).subscribe((searchTerm) => {
-      if (searchTerm.startsWith(this.mentionTriggerChar)) {
-        void this.updateMentionOptions(searchTerm);
-      }
-    });
+    this.searchTerm$
+      .pipe(
+        filter((searchTerm) => searchTerm.length !== 1),
+        debounceTime(300)
+      )
+      .subscribe((searchTerm) => {
+        if (searchTerm.startsWith(this.mentionTriggerChar)) {
+          void this.updateMentionOptions(searchTerm);
+        } else {
+          void this.updateCustomAutocompleteOptions(searchTerm);
+        }
+      });
     this.subscriptions.push(
       this.channelService.activeChannel$.subscribe((channel) => {
         const commands = channel?.getConfig()?.commands || [];
@@ -155,6 +164,7 @@ export class AutocompleteTextareaComponent
         this.mentionedUsers = [];
         this.userMentions.next([...this.mentionedUsers]);
         void this.updateMentionOptions(this.searchTerm$.getValue());
+        void this.updateCustomAutocompleteOptions(this.searchTerm$.getValue());
       })
     );
     this.subscriptions.push(
@@ -183,20 +193,60 @@ export class AutocompleteTextareaComponent
       this.userMentionConfig,
       this.slashCommandConfig,
     ];
+    this.subscriptions.push(
+      this.messageInputConfigService.customAutocompletes$.subscribe(
+        (customConfigs) => {
+          const builtInItems =
+            this.autocompleteConfig.mentions?.filter(
+              (m) =>
+                m === this.userMentionConfig || m === this.slashCommandConfig
+            ) ?? [];
+          const transformedCustomConfigs = customConfigs.map((c) => {
+            const copy: Mentions = {
+              items: c.options.map((o) => ({
+                ...o,
+                templateRef: c.templateRef,
+              })),
+              triggerChar: c.triggerCharacter,
+              dropUp: true,
+              labelKey: this.autocompleteKey,
+              returnTrigger: true,
+              allowSpace: c.allowSpace,
+              mentionFilter: (
+                searchString: string,
+                items: { autocompleteLabel: string }[]
+              ) => this.filter(searchString, items),
+              mentionSelect: (item, triggerChar) =>
+                this.itemSelectedFromAutocompleteList(
+                  item as MentionAutcompleteListItem,
+                  triggerChar
+                ),
+            };
+
+            return copy;
+          });
+
+          this.autocompleteConfig.mentions = [
+            ...builtInItems,
+            ...transformedCustomConfigs,
+          ];
+          this.autocompleteConfig = { ...this.autocompleteConfig };
+        }
+      )
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.areMentionsEnabled) {
-      if (this.areMentionsEnabled) {
-        this.autocompleteConfig.mentions = [
-          this.userMentionConfig,
-          this.slashCommandConfig,
-        ];
-        this.autocompleteConfig = { ...this.autocompleteConfig };
-      } else {
-        this.autocompleteConfig.mentions = [this.slashCommandConfig];
-        this.autocompleteConfig = { ...this.autocompleteConfig };
-      }
+      this.autocompleteConfig.mentions =
+        this.autocompleteConfig?.mentions?.filter((c) => {
+          if (c !== this.userMentionConfig) {
+            return true;
+          } else {
+            return this.areMentionsEnabled;
+          }
+        }) ?? [];
+      this.autocompleteConfig = { ...this.autocompleteConfig };
     }
     if (changes.mentionScope) {
       void this.updateMentionOptions(this.searchTerm$.getValue());
@@ -258,11 +308,14 @@ export class AutocompleteTextareaComponent
   }
 
   autcompleteSearchTermChanged(searchTerm: string) {
-    if (searchTerm === this.mentionTriggerChar) {
-      void this.updateMentionOptions();
-    } else {
-      this.searchTerm$.next(searchTerm);
+    if (searchTerm.length === 1) {
+      if (searchTerm === this.mentionTriggerChar) {
+        void this.updateMentionOptions();
+      } else {
+        void this.updateCustomAutocompleteOptions(searchTerm);
+      }
     }
+    this.searchTerm$.next(searchTerm);
   }
 
   inputChanged() {
@@ -326,8 +379,7 @@ export class AutocompleteTextareaComponent
     );
     this.userMentionConfig.items = items;
     this.autocompleteConfig.mentions = [
-      this.userMentionConfig,
-      this.slashCommandConfig,
+      ...(this.autocompleteConfig?.mentions ?? []),
     ];
     this.autocompleteConfig = { ...this.autocompleteConfig };
     this.cdRef.detectChanges();
@@ -346,4 +398,31 @@ export class AutocompleteTextareaComponent
       this.mentionedUsers = updatedMentionedUsers;
     }
   }
+
+  private async updateCustomAutocompleteOptions(searchTerm: string) {
+    if (
+      this.messageInputConfigService.customAutocompletes$.getValue().length ===
+      0
+    ) {
+      return;
+    }
+    const customMentionConfig = this.autocompleteConfig.mentions?.find(
+      (c) => c.triggerChar && searchTerm.startsWith(c.triggerChar)
+    );
+    const customAutocompleteConfig = customMentionConfig
+      ? this.messageInputConfigService.customAutocompletes$
+          .getValue()
+          .find((c) => c.triggerCharacter === customMentionConfig?.triggerChar)
+      : undefined;
+    if (customMentionConfig && customAutocompleteConfig?.updateOptions) {
+      const newOptions = await customAutocompleteConfig.updateOptions(
+        searchTerm.replace(customMentionConfig.triggerChar || '', '')
+      );
+      customMentionConfig.items = newOptions.map((o) => ({
+        ...o,
+        templateRef: customAutocompleteConfig.templateRef,
+      }));
+      this.autocompleteConfig = { ...this.autocompleteConfig };
+    }
+  }
 }
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts b/projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts
@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import { MessageInputComponent } from './message-input.component';
+import { BehaviorSubject } from 'rxjs';
+import { CustomAutocomplete } from '../types';
 
 /**
  * The `MessageInputConfigService` is used to keep a consistent configuration among the different [`MessageInput`](../components/MessageInputComponent.mdx) components if your UI has more than one input component.
@@ -47,6 +49,12 @@ export class MessageInputConfigService {
     event: ClipboardEvent,
     inputComponent: MessageInputComponent
   ) => void;
+  /**
+   * Add custom autocomplete configurations to the message input
+   *
+   * Only works when using StreamAutocompleteTextareaModule
+   */
+  customAutocompletes$ = new BehaviorSubject<CustomAutocomplete[]>([]);
 
   constructor() {}
 }
diff --git a/projects/stream-chat-angular/src/lib/types.ts b/projects/stream-chat-angular/src/lib/types.ts
@@ -500,3 +500,43 @@ export type ThreadReplyButtonContext<
 > = {
   message: StreamMessage<T>;
 };
+
+export type CustomAutocompleteItemContext = {
+  item: CustomAutocompleteItem;
+};
+
+export type CustomAutocompleteItem = {
+  /**
+   * This is the text that will be inserted into the message input once a user selects an option (appended after the trigger character)
+   */
+  autocompleteLabel: string;
+};
+
+export type CustomAutocomplete = {
+  /**
+   * The character that will trigger the autocomplete (for example #)
+   *
+   * The SDK supports @ and / by default, so you can't use those
+   */
+  triggerCharacter: string;
+  /**
+   * The HTML template to display an item in the autocomplete list
+   */
+  templateRef: TemplateRef<{ item: CustomAutocompleteItem }>;
+  /**
+   * Set to `true` if space characters can be part of the `autocompleteLabel`
+   */
+  allowSpace: boolean;
+  /**
+   * The options to choose from
+   *
+   * In case you want to use dynamic/server-side filtering, use `updateOptions` instead
+   */
+  options: CustomAutocompleteItem[];
+  /**
+   * If you want to have dynamic/server-side filtering provide a  method that will be called any time the autocomplete options should be filtered
+   * @param searchTerm the text to filter by (without the trigger character), can be an empty string
+   * @returns a promise that will resolve to the options, you should take care of error handling
+   */
+  updateOptions?: (searchTerm: string) => Promise<CustomAutocompleteItem[]>;
+};
