Merge pull request #409 from GetStream/message-input-mobile-ux

Message input mobile ux

Author: szuperaz

package-lock.json

@@ -117,7 +117,7 @@
     "@ngx-translate/core": "^13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "3.8.0",
+    "@stream-io/stream-chat-css": "3.9.0",
     "@stream-io/transliterate": "^1.5.2",
     "angular-mentions": "^1.4.0",
     "dayjs": "^1.10.7",

package.json

@@ -12,7 +12,7 @@
   "
   rows="1"
   (input)="inputChanged()"
-  (keydown.enter)="sent($event)"
+  (keydown.enter)="enterHit($event)"
   [mentionConfig]="autocompleteConfig"
   (searchTerm)="autcompleteSearchTermChanged($event)"
   [mentionListTemplate]="autocompleteItem"

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.html

@@ -60,6 +60,7 @@ describe('AutocompleteTextareaComponent', () => {
     fixture = TestBed.createComponent(AutocompleteTextareaComponent);
     component = fixture.componentInstance;
     nativeElement = fixture.nativeElement as HTMLElement;
+    component.inputMode = 'desktop';
     queryTextarea = () =>
       nativeElement.querySelector('[data-testid="textarea"]');
     fixture.detectChanges();
@@ -101,7 +102,7 @@ describe('AutocompleteTextareaComponent', () => {
     expect(spy).toHaveBeenCalledWith('message');
   });
 
-  it(`shouldn't emit #valueChange if enter is hit`, () => {
+  it(`shouldn't emit #valueChange if enter is hit and #inputMode is desktop`, () => {
     const spy = jasmine.createSpy();
     component.valueChange.subscribe(spy);
     const textarea = queryTextarea();
@@ -114,7 +115,7 @@ describe('AutocompleteTextareaComponent', () => {
     expect(spy).not.toHaveBeenCalled();
   });
 
-  it('should emit #send if enter is hit', () => {
+  it('should emit #send if enter is hit and #inputMode is desktop', () => {
     const spy = jasmine.createSpy();
     component.send.subscribe(spy);
     const textarea = queryTextarea();
@@ -129,6 +130,22 @@ describe('AutocompleteTextareaComponent', () => {
     expect(event.preventDefault).toHaveBeenCalledWith();
   });
 
+  it(`shouldn't emit #send if enter is hit and #inputMode is mobile`, () => {
+    component.inputMode = 'mobile';
+    const spy = jasmine.createSpy();
+    component.send.subscribe(spy);
+    const textarea = queryTextarea();
+    const message = 'This is my message';
+    textarea!.value = message;
+    const event = new KeyboardEvent('keydown', { key: 'Enter' });
+    spyOn(event, 'preventDefault');
+    textarea?.dispatchEvent(event);
+    fixture.detectChanges();
+
+    expect(spy).not.toHaveBeenCalled();
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+
   it(`shouldn't emit #send if shift+enter is hit`, () => {
     const spy = jasmine.createSpy();
     component.send.subscribe(spy);

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts

@@ -54,6 +54,10 @@ export class AutocompleteTextareaComponent
    * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
    */
   @Input() areMentionsEnabled: boolean | undefined = true;
+  /**
+   * See [`MessageInputConfigService`](../services/MessageInputConfigService.mdx) for more information
+   */
+  @Input() inputMode!: 'desktop' | 'mobile';
   /**
    * The scope for user mentions, either members of the current channel of members of the application. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
    */
@@ -236,10 +240,12 @@ export class AutocompleteTextareaComponent
     this.updateMentionedUsersFromText();
   }
 
-  sent(event: Event) {
-    event.preventDefault();
-    this.updateMentionedUsersFromText();
-    this.send.next();
+  enterHit(event: Event) {
+    if (this.inputMode === 'desktop') {
+      event.preventDefault();
+      this.updateMentionedUsersFromText();
+      this.send.next();
+    }
   }
 
   private adjustTextareaHeight() {

projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts

@@ -24,5 +24,10 @@ export class MessageInputConfigService {
    */
   mentionScope: 'channel' | 'application' | undefined = 'channel';
 
+  /**
+   * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input.
+   */
+  inputMode: 'desktop' | 'mobile' = 'desktop';
+
   constructor() {}
 }

projects/stream-chat-angular/src/lib/message-input/message-input-config.service.ts

@@ -107,6 +107,7 @@
             [areMentionsEnabled]="areMentionsEnabled"
             [mentionScope]="mentionScope"
             [placeholder]="textareaPlaceholder"
+            [inputMode]="inputMode"
           ></ng-container>
         </ng-container>
         <ng-template #disabledTextarea>
@@ -286,6 +287,7 @@
             (userMentions)="mentionedUsers = $event"
             [areMentionsEnabled]="areMentionsEnabled"
             [mentionScope]="mentionScope"
+            [inputMode]="inputMode"
             [placeholder]="textareaPlaceholder"
           ></ng-container>
           <div class="str-chat__message-textarea-emoji-picker">

projects/stream-chat-angular/src/lib/message-input/message-input.component.html

@@ -176,6 +176,7 @@ describe('MessageInputComponent', () => {
 
     expect(textarea?.value).toEqual('Hi');
     expect(textarea?.areMentionsEnabled).toBeTrue();
+    expect(textarea?.inputMode).toBe(component.inputMode);
 
     textarea?.valueChange.next('Hi, how are you?');
     fixture.detectChanges();

projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts

@@ -82,6 +82,10 @@ export class MessageInputComponent
    * An observable that can be used to trigger message sending from the outside
    */
   @Input() sendMessage$: Observable<void> | undefined;
+  /**
+   * In `desktop` mode the `Enter` key will trigger message sending, in `mobile` mode the `Enter` key will insert a new line to the message input. If no value is provided, it is set from the [`MessageInputConfigService`](../services/MessageInputConfigService.mdx).
+   */
+  @Input() inputMode: 'desktop' | 'mobile';
   /**
    * Emits when a message was successfuly sent or updated
    */
@@ -182,6 +186,7 @@ export class MessageInputComponent
       this.configService.isMultipleFileUploadEnabled;
     this.areMentionsEnabled = this.configService.areMentionsEnabled;
     this.mentionScope = this.configService.mentionScope;
+    this.inputMode = this.configService.inputMode;
 
     this.subscriptions.push(
       this.typingStart$.subscribe(
@@ -271,6 +276,9 @@ export class MessageInputComponent
     if (changes.mode) {
       this.setCanSendMessages();
     }
+    if (changes.inputMode) {
+      this.configService.inputMode = this.inputMode;
+    }
     if (changes.sendMessage$) {
       if (this.sendMessageSubcription) {
         this.sendMessageSubcription.unsubscribe();

projects/stream-chat-angular/src/lib/message-input/message-input.component.ts

@@ -17,6 +17,7 @@ describe('TextareaDirective', () => {
       directive = new TextareaDirective({} as ViewContainerRef);
       mockComponent = {
         value: '',
+        inputMode: 'desktop',
         valueChange: new EventEmitter<string>(),
         send: new EventEmitter<void>(),
         ngOnChanges: () => {},
@@ -57,6 +58,7 @@ describe('TextareaDirective', () => {
       directive = new TextareaDirective({} as ViewContainerRef);
       mockComponent = {
         value: '',
+        inputMode: 'desktop',
         valueChange: new EventEmitter<string>(),
         send: new EventEmitter<void>(),
         userMentions: new EventEmitter<UserResponse[]>(),
@@ -86,5 +88,16 @@ describe('TextareaDirective', () => {
         jasmine.any(Object)
       );
     });
+
+    it('should pass on #inputMode', () => {
+      directive.inputMode = 'mobile';
+      spyOn(mockComponent, 'ngOnChanges');
+      directive.ngOnChanges({ inputMode: {} as any as SimpleChange });
+
+      expect(mockComponent.inputMode).toBe('mobile');
+      expect(mockComponent.ngOnChanges).toHaveBeenCalledWith(
+        jasmine.any(Object)
+      );
+    });
   });
 });