From 0121d3c6ce1b7ef9c7de2ba7078116203ad66205 Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Fri, 15 Sep 2023 16:01:51 +0200
Subject: [PATCH] feat: slash commands only activate for first chartacter

---
 .../autocomplete-textarea.component.html      |  2 +-
 .../autocomplete-textarea.component.spec.ts   | 62 +++++++++++++++++++
 .../autocomplete-textarea.component.ts        | 16 ++++-
 3 files changed, 77 insertions(+), 3 deletions(-)

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
index 329086ae..e0d96bdb 100644
--- 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
@@ -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/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts
index 2600715d..bd25bdc5 100644
--- a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts
+++ b/projects/stream-chat-angular/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/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
index ce98a575..afbda9d8 100644
--- 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
@@ -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) {