feat: Mobile input mode added to message input

Author: szuperaz

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

@@ -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.spec.ts

@@ -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.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/message-input-config.service.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.component.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).
+   */
+  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/textarea.directive.spec.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)
+      );
+    });
   });
 });

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

@@ -19,6 +19,7 @@ export class TextareaDirective implements OnChanges {
   @Input() componentRef: ComponentRef<TextareaInterface> | undefined;
   @Input() areMentionsEnabled: boolean | undefined;
   @Input() mentionScope?: 'channel' | 'application';
+  @Input() inputMode!: 'mobile' | 'desktop';
   @Input() value = '';
   @Input() placeholder: string | undefined;
   @Output() readonly valueChange = new EventEmitter<string>();
@@ -57,6 +58,7 @@ export class TextareaDirective implements OnChanges {
         this.componentRef.instance.mentionScope = this.mentionScope;
         this.componentRef.instance.value = this.value;
         this.componentRef.instance.placeholder = this.placeholder;
+        this.componentRef.instance.inputMode = this.inputMode;
       }
     }
     if (changes.areMentionsEnabled) {
@@ -71,6 +73,9 @@ export class TextareaDirective implements OnChanges {
     if (changes.placeholder) {
       this.componentRef.instance.placeholder = this.placeholder;
     }
+    if (changes.inputMode) {
+      this.componentRef.instance.inputMode = this.inputMode;
+    }
     // ngOnChanges not called for dynamic components since we don't use template binding
     let changesToPropagate = {};
     this.unpropagatedChanges.forEach(

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

@@ -9,4 +9,5 @@ export interface TextareaInterface extends OnChanges {
   areMentionsEnabled?: boolean;
   mentionScope?: 'channel' | 'application';
   placeholder?: string;
+  inputMode: 'mobile' | 'desktop';
 }

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

@@ -12,5 +12,5 @@
   "
   rows="1"
   (input)="inputChanged()"
-  (keydown.enter)="sent($event)"
+  (keydown.enter)="enterHit($event)"
 ></textarea>

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

@@ -36,6 +36,7 @@ describe('TextareaComponent', () => {
     fixture = TestBed.createComponent(TextareaComponent);
     component = fixture.componentInstance;
     nativeElement = fixture.nativeElement as HTMLElement;
+    component.inputMode = 'desktop';
     queryTextarea = () =>
       nativeElement.querySelector('[data-testid="textarea"]');
     fixture.detectChanges();
@@ -68,7 +69,7 @@ describe('TextareaComponent', () => {
     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();
@@ -81,7 +82,7 @@ describe('TextareaComponent', () => {
     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();
@@ -96,6 +97,22 @@ describe('TextareaComponent', () => {
     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);