feat: slash commands only activate for first chartacter

GetStream · Sep 15, 2023 · 0121d3c · 0121d3c
1 parent 5fb9916
commit 0121d3c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 3 deletions.
diff --git a/...-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html b/...-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html
@@ -40,7 +40,7 @@
 </ng-template>
 
 <ng-template #defaultCommandTemplate let-item="item">
-  <div class="str-chat__slash-command">
+  <div class="str-chat__slash-command str-chat-angular__slash-command">
     <span class="str-chat__slash-command-header">
       <strong
         class="str-chat__slash-command-name"

diff --git a/...gular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts b/...gular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts
@@ -481,4 +481,66 @@ describe('AutocompleteTextareaComponent', () => {
 
     expect(height).toBeGreaterThan(0);
   });
+
+  it('should control slash command auto complete visibility', () => {
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeUndefined();
+
+    component.value = '/';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeUndefined();
+
+    component.value = '/ban';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeUndefined();
+
+    component.value = '/ban ';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeTrue();
+
+    component.value = '/ban @';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeUndefined();
+
+    component.value = 'http:/';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeTrue();
+
+    component.value = 'http://getstream.io @';
+    fixture.detectChanges();
+
+    expect(
+      fixture.debugElement.classes[
+        'str-chat__message-textarea-angular-host--autocomplete-hidden'
+      ]
+    ).toBeUndefined();
+  });
 });
diff --git a/...at-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts b/...at-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts
@@ -40,12 +40,11 @@ import { ThemeService } from '../../theme.service';
 export class AutocompleteTextareaComponent
   implements TextareaInterface, OnChanges, AfterViewInit
 {
-  @HostBinding() class =
-    'str-chat__textarea str-chat__message-textarea-angular-host';
   /**
    * The value of the input HTML element.
    */
   @Input() value = '';
+
   /**
    * Placeholder of the textarea
    */
@@ -173,6 +172,19 @@ export class AutocompleteTextareaComponent
     this.themeVersion = this.themeService.themeVersion;
   }
 
+  @HostBinding()
+  get class() {
+    return `str-chat__textarea str-chat__message-textarea-angular-host ${
+      (this.value.includes(' ') ||
+        !this.value.startsWith(this.commandTriggerChar) ||
+        this.value.lastIndexOf(this.commandTriggerChar) !== 0) &&
+      this.value.lastIndexOf(this.commandTriggerChar) >
+        this.value.lastIndexOf(this.mentionTriggerChar)
+        ? 'str-chat__message-textarea-angular-host--autocomplete-hidden'
+        : ''
+    }`;
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.areMentionsEnabled) {
       if (this.areMentionsEnabled) {