From 20daf91fe8cf1442d2d77b423607b5549872763c Mon Sep 17 00:00:00 2001
From: Zita Szupera <szuperaz@gmail.com>
Date: Tue, 17 Sep 2024 16:54:59 +0200
Subject: [PATCH] feat: add voice recording option

---
 .../src/lib/icon/icon.component.ts             |  3 ++-
 .../message-input/message-input.component.html |  7 +++++++
 .../message-input.component.spec.ts            | 18 +++++++++++++++++-
 .../message-input/message-input.component.ts   |  4 ++++
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/projects/stream-chat-angular/src/lib/icon/icon.component.ts b/projects/stream-chat-angular/src/lib/icon/icon.component.ts
index a4b47637..3bc04abf 100644
--- a/projects/stream-chat-angular/src/lib/icon/icon.component.ts
+++ b/projects/stream-chat-angular/src/lib/icon/icon.component.ts
@@ -20,7 +20,8 @@ export type Icon =
   | 'download'
   | 'error'
   | 'play'
-  | 'pause';
+  | 'pause'
+  | 'mic';
 
 /**
  * The `Icon` component can be used to display different icons (i. e. message delivered icon).
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.html b/projects/stream-chat-angular/src/lib/message-input/message-input.component.html
index 7842f3da..388c3ad8 100644
--- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.html
+++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.html
@@ -157,6 +157,13 @@
       >
         {{ cooldown$ | async }}
       </div>
+      <button
+        *ngIf="displayVoiceRecordingButton"
+        class="str-chat__start-recording-audio-button"
+        data-testid="start-voice-recording"
+      >
+        <stream-icon-placeholder icon="mic"></stream-icon-placeholder>
+      </button>
     </div>
   </ng-container>
   <ng-template #notAllowed>
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts
index 80d56d7b..bf73a136 100644
--- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts
+++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts
@@ -233,7 +233,7 @@ describe('MessageInputComponent', () => {
     expect(spy).not.toHaveBeenCalledWith();
   });
 
-  it(`shouldn't display send button if corresponding input if #displaySendButton`, () => {
+  it(`shouldn't display send button if corresponding input is false`, () => {
     component.displaySendButton = false;
     fixture.detectChanges();
 
@@ -245,6 +245,22 @@ describe('MessageInputComponent', () => {
     expect(querySendButton()).not.toBeNull();
   });
 
+  it(`shouldn't display voice recording button if corresponding input is false`, () => {
+    component.displayVoiceRecordingButton = false;
+    fixture.detectChanges();
+
+    expect(
+      nativeElement.querySelector('[data-testid="start-voice-recording"]')
+    ).toBeNull();
+
+    component.displayVoiceRecordingButton = true;
+    fixture.detectChanges();
+
+    expect(
+      nativeElement.querySelector('[data-testid="start-voice-recording"]')
+    ).not.toBeNull();
+  });
+
   it('should emit #messageUpdate event if message update was successful', async () => {
     const messageToEdit = mockMessage();
     component.message = messageToEdit;
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts
index 5f3f25f1..e2fb51d1 100644
--- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts
+++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts
@@ -99,6 +99,10 @@ export class MessageInputComponent
    * Use this input to control wether a send button is rendered or not. If you don't render a send button, you can still trigger message send using the `sendMessage$` input.
    */
   @Input() displaySendButton = true;
+  /**
+   * You can enable/disable voice recordings with this input
+   */
+  @Input() displayVoiceRecordingButton = false;
   /**
    * Emits when a message was successfuly sent or updated
    */