feat(angular): voice recording (#313)

### 🎯 Goal

_Describe why we are making this change_

### 🛠 Implementation details

_Provide a description of the implementation_

### 🎨 UI Changes

_Add relevant screenshots_

Make sure to test with both Angular and React (with both `MessageList`
and `VirtualizedMessageList` components) SDKs

src/v2/styles/AudioRecorder/AudioRecorder-layout.scss

@@ -10,7 +10,8 @@
   padding-inline: 1rem;
 }
 
-.str-chat__audio_recorder {
+.str-chat__audio_recorder,
+stream-voice-recorder-wavebar {
   @include utils.flex-row-center;
   gap: 0.375rem;
 
@@ -21,28 +22,52 @@
     padding: 0;
   }
 
-  .str-chat__audio_recorder__cancel-button svg {
-    height: 28px;
+  .str-chat__audio_recorder__cancel-button {
+    --str-chat-icon-height: 28px;
+
+    svg {
+      height: 28px;
+    }
   }
 
-  .str-chat__audio_recorder__toggle-playback-button svg {
-    height: 16px;
+  .str-chat__audio_recorder__toggle-playback-button {
+    --str-chat-icon-height: 16px;
+
+    svg {
+      height: 16px;
+    }
   }
 
-  .str-chat__audio_recorder__pause-recording-button svg {
-    height: 12px;
+  .str-chat__audio_recorder__pause-recording-button {
+    --str-chat-icon-height: 12px;
+
+    svg {
+      height: 12px;
+    }
   }
 
-  .str-chat__audio_recorder__resume-recording-button svg {
-    height: 24px;
+  .str-chat__audio_recorder__resume-recording-button {
+    --str-chat-icon-height: 24px;
+
+    svg {
+      height: 24px;
+    }
   }
 
-  .str-chat__audio_recorder__stop-button svg {
-    height: 12px;
+  .str-chat__audio_recorder__stop-button {
+    --str-chat-icon-height: 12px;
+
+    svg {
+      height: 12px;
+    }
   }
 
-  .str-chat__audio_recorder__complete-button svg {
-    height: 16px;
+  .str-chat__audio_recorder__complete-button {
+    --str-chat-icon-height: 16px;
+
+    svg {
+      height: 16px;
+    }
   }
 
   .str-chat__recording-timer {
@@ -86,4 +111,29 @@
   .str-chat__audio_recorder__waveform-box {
     overflow-x: hidden;
   }
-}
+}
+
+.str-chat__audio_recorder-container {
+  .str-chat__message-attachment__voice-recording-widget {
+    display: flex;
+    gap: var(--str-chat__spacing-1_5);
+
+    .str-chat__message-attachment-voice-recording-widget--first-row {
+      display: none;
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__audio-state {
+      display: flex;
+      gap: var(--str-chat__spacing-1_5);
+
+      .str-chat__message-attachment__voice-recording-widget__timer {
+        min-width: 3rem;
+        align-self: center;
+      }
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__right-section {
+      display: none;
+    }
+  }
+}

src/v2/styles/AudioRecorder/AudioRecorder-theme.scss

@@ -17,15 +17,24 @@
   }
 
   .str-chat__audio_recorder__cancel-button {
+    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
     color: var(--str-chat__text-low-emphasis-color);
   }
 
   .str-chat__audio_recorder__toggle-playback-button {
+    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
     color: var(--str-chat__text-low-emphasis-color);
   }
 
+  .str-chat__message-attachment-audio-widget--play-button {
+    --str-chat-icon-color: var(--str-chat__text-low-emphasis-color);
+    box-shadow: none;
+    border: none;
+  }
+
   .str-chat__audio_recorder__pause-recording-button,
   .str-chat__audio_recorder__resume-recording-button {
+    --str-chat-icon-color: var(--str-chat__danger-color);
     color: var(--str-chat__danger-color);
   }
 
@@ -36,6 +45,7 @@
 
   .str-chat__audio_recorder__stop-button,
   .str-chat__audio_recorder__complete-button {
+    --str-chat-icon-color: var(--str-chat__on-primary-color);
     border-radius: var(--str-chat__border-radius-circle);
     color: var(--str-chat__on-primary-color);
     background-color: var(--str-chat__primary-color);
@@ -48,4 +58,4 @@
       }
     }
   }
-}
+}

src/v2/styles/Icon/Icon-layout.scss

@@ -30,7 +30,6 @@
   content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==');
 }
 
-// Copy icon mapping here
 .str-chat__icon--action::before {
   content: '\e800';
 } /* '' */
@@ -85,3 +84,9 @@
 .str-chat__icon--attach::before {
   content: '\e811';
 } /* '' */
+.str-chat__icon--mic::before {
+  content: '\e812';
+} /* '' */
+.str-chat__icon--bin::before {
+  content: '\e813';
+} /* '' */

src/v2/styles/MessageInput/MessageInput-layout.scss

@@ -149,6 +149,7 @@
   }
 
   .str-chat__start-recording-audio-button {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 25);
     @include utils.flex-row-center;
     cursor: pointer;
     padding: 0;

src/v2/styles/MessageInput/MessageInput-theme.scss

@@ -228,6 +228,7 @@
   }
 
   .str-chat__start-recording-audio-button {
+    --str-chat-icon-color: var(--str-chat__start-recording-audio-button-color);
     @include utils.component-layer-overrides('start-recording-audio-button');
 
     &:disabled {