stream-chat-react 11.14.0 → 11.15.1

package/dist/i18n/tr.json

@@ -1,6 +1,11 @@
 {
+    "Allow access to camera": "Kameraya erişime izin ver",
+    "Allow access to microphone": "Mikrofona erişime izin ver",
+    "An error has occurred during recording": "Kayıt sırasında bir hata oluştu",
+    "An error has occurred during the recording processing": "Kayıt işlemi sırasında bir hata oluştu",
     "Attach files": "Dosya ekle",
     "Cancel": "İptal",
+    "Cannot seek in the recording": "Kayıtta arama yapılamıyor",
     "Channel Missing": "Kanal bulunamıyor",
     "Close": "Kapat",
     "Close emoji picker": "Emoji seçiciyi kapat",
@@ -24,13 +29,16 @@
     "Error pinning message": "Mesaj sabitlenirken hata oluştu",
     "Error removing message pin": "Mesaj PIN'i kaldırılırken hata oluştu",
     "Error reproducing the recording": "Kaydı yeniden üretme hatası",
+    "Error starting recording": "Kayıt başlatılırken hata oluştu",
     "Error unmuting a user ...": "Kullanıcının sesini açarken hata oluştu ...",
+    "Error uploading attachment": "Ek yüklenirken hata oluştu",
     "Error uploading file": "Dosya yüklenirken hata oluştu",
     "Error uploading image": "Resmi yüklerken hata",
     "Error · Unsent": "Hata · Gönderilemedi",
     "Error: {{ errorMessage }}": "Hata: {{ errorMessage }}",
     "Failed to jump to the first unread message": "İlk okunmamış mesaja atlamada hata oluştu",
     "Failed to mark channel as read": "Kanalı okundu olarak işaretleme başarısız oldu",
+    "Failed to play the recording": "Kayıt oynatılamadı",
     "File is too large: {{ size }}, maximum upload size is {{ limit }}": "Dosya çok büyük: {{ size }}, maksimum yükleme boyutu {{ limit }}",
     "Flag": "Bayrak",
     "Latest Messages": "Son Mesajlar",
@@ -43,16 +51,19 @@
     "Message has been successfully flagged": "Mesaj başarıyla bayraklandı",
     "Message pinned": "Mesaj sabitlendi",
     "Messages have been marked unread.": "Mesajlar okunmamış olarak işaretlendi.",
+    "Missing permissions to upload the attachment": "Ek yüklemek için izinler eksik",
     "Mute": "Sessiz",
     "New": "Yeni",
     "New Messages!": "Yeni Mesajlar!",
     "No chats here yet…": "Henüz burada sohbet yok...",
     "No results found": "Sonuç bulunamadı",
     "Nothing yet...": "Şimdilik hiçbir şey...",
+    "Ok": "Tamam",
     "Open emoji picker": "Emoji klavyesini aç",
     "People matching": "Eşleşen kişiler",
     "Pin": "Toplu iğne",
     "Pinned by": "Sabitleyen",
+    "Recording format is not supported and cannot be reproduced": "Kayıt formatı desteklenmiyor ve çoğaltılamıyor",
     "Reply": "Cevapla",
     "Reply to Message": "Mesajı Cevapla",
     "Search": "Arama",
@@ -67,6 +78,8 @@
     "This message did not meet our content guidelines": "Bu mesaj içerik yönergelerimize uygun değil",
     "This message was deleted...": "Bu mesaj silindi",
     "Thread": "Konu",
+    "To start recording, allow the camera access in your browser": "Kayıt yapmaya başlamak için tarayıcınızda kameraya erişime izin verin",
+    "To start recording, allow the microphone access in your browser": "Kayıt yapmaya başlamak için tarayıcınızda mikrofona erişime izin verin",
     "Type your message": "Mesajınızı yazın",
     "Unmute": "Sesini aç",
     "Unpin": "Sabitlemeyi kaldır",

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-64e7e4c0.js');
+var Window = require('./Window-847d5d88.js');
 var React = require('react');
 var streamChat = require('stream-chat');
 var throttle = require('lodash.throttle');
@@ -10,6 +10,7 @@ require('emoji-regex');
 require('linkifyjs');
 require('lodash.uniqby');
 var reactVirtuoso = require('react-virtuoso');
+require('react-player');
 require('@braintree/sanitize-url');
 require('react-image-gallery');
 require('react-dom');
@@ -36,7 +37,6 @@ require('dayjs/locale/pt');
 require('dayjs/locale/ru');
 require('dayjs/locale/tr');
 require('dayjs/locale/en');
-require('react-player');
 require('prop-types');
 require('@babel/runtime/helpers/extends');
 require('@babel/runtime/helpers/defineProperty');
@@ -1344,7 +1344,7 @@ function VirtualizedMessageList(props) {
     return (React__default["default"].createElement(VirtualizedMessageListWithContext, Window.__assign({ channel: channel, channelUnreadUiState: channelUnreadUiState, hasMore: !!hasMore, hasMoreNewer: !!hasMoreNewer, highlightedMessageId: highlightedMessageId, jumpToLatestMessage: jumpToLatestMessage, loadingMore: !!loadingMore, loadingMoreNewer: !!loadingMoreNewer, loadMore: loadMore, loadMoreNewer: loadMoreNewer, messages: messages, notifications: notifications, read: read, suppressAutoscroll: suppressAutoscroll }, props)));
 }
 
-var version = '11.14.0';
+var version = '11.15.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1686,9 +1686,11 @@ exports.AttachmentPreviewList = Window.AttachmentPreviewList;
 exports.AttachmentWithinContainer = Window.AttachmentWithinContainer;
 exports.Audio = Window.Audio;
 exports.AudioContainer = Window.AudioContainer;
+exports.AudioRecorder = Window.AudioRecorder;
 exports.AutoCompleteTextarea = Window.ReactTextareaAutocomplete;
 exports.Avatar = Window.Avatar;
 exports.BaseImage = Window.BaseImage;
+exports.BinIcon = Window.BinIcon;
 exports.Card = Window.Card;
 exports.CardAudio = Window.CardAudio;
 exports.CardContainer = Window.CardContainer;
@@ -1709,6 +1711,7 @@ exports.ChatAutoComplete = Window.ChatAutoComplete;
 exports.ChatContext = Window.ChatContext;
 exports.ChatDown = Window.ChatDown;
 exports.ChatProvider = Window.ChatProvider;
+exports.CheckSignIcon = Window.CheckSignIcon;
 exports.CloseIcon = Window.CloseIcon$1;
 exports.CommandItem = Window.CommandItem;
 exports.ComponentContext = Window.ComponentContext;
@@ -1759,6 +1762,10 @@ exports.MAX_QUERY_CHANNELS_LIMIT = Window.MAX_QUERY_CHANNELS_LIMIT;
 exports.MESSAGE_ACTIONS = Window.MESSAGE_ACTIONS;
 exports.MML = Window.MML;
 exports.MediaContainer = Window.MediaContainer;
+Object.defineProperty(exports, 'MediaRecordingState', {
+    enumerable: true,
+    get: function () { return Window.MediaRecordingState; }
+});
 exports.Message = Window.Message;
 exports.MessageActions = Window.MessageActions;
 exports.MessageActionsBox = Window.MessageActionsBox;
@@ -1785,12 +1792,15 @@ exports.MessageSimple = Window.MessageSimple;
 exports.MessageStatus = Window.MessageStatus;
 exports.MessageText = Window.MessageText;
 exports.MessageTimestamp = Window.MessageTimestamp;
+exports.MicIcon = Window.MicIcon;
 exports.Modal = Window.Modal;
 exports.ModalGallery = Window.ModalGallery;
 exports.NullComponent = Window.NullComponent;
+exports.PauseIcon = Window.PauseIcon;
 exports.PinIcon = Window.PinIcon;
 exports.PinIndicator = Window.PinIndicator;
 exports.PlayButton = Window.PlayButton;
+exports.PlayIcon = Window.PlayIcon;
 exports.PlaybackRateButton = Window.PlaybackRateButton;
 exports.PopperTooltip = Window.PopperTooltip;
 exports.ProgressBar = Window.ProgressBar;
@@ -1800,6 +1810,12 @@ exports.QuotedMessagePreviewHeader = Window.QuotedMessagePreviewHeader;
 exports.ReactionIcon = Window.ReactionIcon;
 exports.ReactionSelector = Window.ReactionSelector;
 exports.ReactionsList = Window.ReactionsList;
+Object.defineProperty(exports, 'RecordingPermission', {
+    enumerable: true,
+    get: function () { return Window.RecordingPermission; }
+});
+exports.RecordingPermissionDeniedNotification = Window.RecordingPermissionDeniedNotification;
+exports.RecordingTimer = Window.RecordingTimer;
 exports.ReplyIcon = Window.ReplyIcon;
 exports.RetryIcon = Window.RetryIcon;
 exports.SUPPORTED_VIDEO_FORMATS = Window.SUPPORTED_VIDEO_FORMATS;
@@ -1817,6 +1833,7 @@ Object.defineProperty(exports, 'SetLinkPreviewMode', {
 });
 exports.SimpleReactionsList = Window.SimpleReactionsList;
 exports.SpriteImage = Window.SpriteImage;
+exports.StartRecordingAudioButton = Window.StartRecordingAudioButton;
 exports.StreamEmoji = Window.StreamEmoji;
 exports.Streami18n = Window.Streami18n;
 exports.ThreadIcon = Window.ThreadIcon;
@@ -1883,6 +1900,7 @@ exports.isDayOrMoment = Window.isDayOrMoment;
 exports.isFileAttachment = Window.isFileAttachment;
 exports.isGalleryAttachmentType = Window.isGalleryAttachmentType;
 exports.isLanguageSupported = Window.isLanguageSupported;
+exports.isLocalAttachment = Window.isLocalAttachment;
 exports.isMediaAttachment = Window.isMediaAttachment;
 exports.isMessageBounced = Window.isMessageBounced;
 exports.isMessageEdited = Window.isMessageEdited;
@@ -1922,6 +1940,7 @@ exports.renderImage = Window.renderImage;
 exports.renderMedia = Window.renderMedia;
 exports.renderPreviewText = Window.renderPreviewText;
 exports.renderText = Window.renderText;
+exports.resampleWaveformData = Window.resampleWaveformData;
 exports.ruTranslations = Window.ruTranslations;
 exports.showMessageActionsBox = Window.showMessageActionsBox;
 exports.trTranslations = Window.trTranslations;

package/dist/scss/v2/AttachmentList/AttachmentList-layout.scss

@@ -335,18 +335,6 @@
     }
   }
 
-  .str-chat__message-attachment-audio-widget--play-button {
-    @include utils.flex-row-center();
-    height: calc(var(--str-chat__spacing-px) * 36);
-    width: calc(var(--str-chat__spacing-px) * 36);
-    cursor: pointer;
-    z-index: 1;
-
-    svg {
-      width: var(--str-chat__spacing-3);
-    }
-  }
-
   .str-chat__message-attachment__voice-recording-widget {
     display: grid;
     grid-template-columns: 36px auto 55px;
@@ -401,7 +389,7 @@
       .str-chat__message-attachment__voice-recording-widget__error-message {
         display: flex;
         align-items: center;
-        justify-content: start;
+        justify-content: flex-start;
         gap: var(--str-chat__spacing-1);
       }
     }
@@ -415,6 +403,7 @@
       width: calc(var(--str-chat__spacing-px) * 45);
     }
 
+    // Angular SDK element, do not remove
     stream-voice-recording-wavebar {
       flex: 1;
     }
@@ -517,6 +506,17 @@
   }
 }
 
+.str-chat__message-attachment-audio-widget--play-button {
+  @include utils.flex-row-center();
+  height: calc(var(--str-chat__spacing-px) * 36);
+  width: calc(var(--str-chat__spacing-px) * 36);
+  cursor: pointer;
+
+  svg {
+    width: var(--str-chat__spacing-3);
+  }
+}
+
 .str-chat__quoted-message-preview {
   /* stylelint-disable-next-line length-zero-no-unit */
   --str-chat__attachment-margin: 0px;
@@ -558,6 +558,31 @@
   }
 }
 
+.str-chat__audio_recorder__waveform-box,
+.str-chat__wave-progress-bar__track {
+  $min_amplitude_height: 2px;
+  position: relative;
+  flex: 1;
+  width: 120px;
+  height: calc(var(--str-chat__spacing-px) * 25);
+  display: flex;
+  align-items: center;
+  gap: var(--str-chat__spacing-px);
+
+  .str-chat__wave-progress-bar__amplitude-bar {
+    width: 2px;
+    min-width: 2px;
+    height: calc(var(--str-chat__wave-progress-bar__amplitude-bar-height) + $min_amplitude_height); // variable set dynamically on element
+  }
+
+  .str-chat__wave-progress-bar__progress-indicator {
+    position: absolute;
+    left: 0;
+    height: calc(100% + $min_amplitude_height + 2px);
+    width: calc(var(--str-chat__spacing-px) * 6);
+  }
+}
+
 .str-chat__attachment-list-angular-host {
   min-width: 0;
 }

package/dist/scss/v2/AttachmentList/AttachmentList-theme.scss

@@ -329,6 +329,7 @@
     .str-chat__message-attachment-file--item-name,
     .str-chat__message-attachment-audio-widget--title {
       font: var(--str-chat__subtitle-medium-text);
+      word-break: keep-all;
     }
 
     .str-chat__message-attachment-file--item-size {
@@ -476,6 +477,11 @@
   }
 }
 
+.str-chat__message-attachment-audio-widget--play-button {
+  @include utils.component-layer-overrides('audio-attachment-controls-button');
+  @include utils.circle-fab-overrides('audio-attachment-controls-button');
+}
+
 .str-chat__message-attachment-card.str-chat__message-attachment-card--audio {
   .str-chat__message-attachment-card--header {
     border-end-start-radius: 0;
@@ -483,6 +489,44 @@
   }
 }
 
+.str-chat__message-attachment__voice-recording-widget {
+  @include utils.component-layer-overrides('voice-recording-attachment-widget');
+
+  .str-chat__message-attachment__voice-recording-widget__title {
+    @include utils.ellipsis-text;
+    word-break: keep-all;
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__message-attachment__voice-recording-widget__timer {
+    font: var(--str-chat__body-text);
+    color: var(--str-chat__text-low-emphasis-color);
+    white-space: nowrap;
+  }
+}
+
+.str-chat__audio_recorder__waveform-box,
+.str-chat__wave-progress-bar__track {
+  cursor: pointer;
+
+  .str-chat__wave-progress-bar__amplitude-bar {
+    background: var(--str-chat__text-low-emphasis-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+
+  .str-chat__wave-progress-bar__amplitude-bar--active {
+    background: var(--str-chat__primary-color);
+  }
+
+  .str-chat__wave-progress-bar__progress-indicator {
+    background-color: #fff;
+    border-radius: var(--str-chat__border-radius-circle);
+    border: 1px solid var(--str-chat__secondary-overlay-color);
+    cursor: grab;
+  }
+}
+
+
 .str-chat-angular__message-attachment-file-single
   .str-chat__message-attachment-file--item-first-row {
   color: var(--str-chat__attachment-list-color);

package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-layout.scss

@@ -46,6 +46,7 @@
     }
   }
 
+  .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     display: flex;
     justify-content: flex-start;
@@ -57,17 +58,10 @@
     padding: 0 var(--str-chat__spacing-4);
     column-gap: var(--str-chat__spacing-2);
 
-    .str-chat__attachment-preview-file-icon {
-      @include utils.flex-row-center;
-
-      svg {
-        height: calc(var(--str-chat__spacing-px) * 37);
-        width: unset;
-      }
-    }
-
-    .str-chat__attachment-preview-file-end {
+    .str-chat__attachment-preview-metadata,
+    .str-chat__attachment-preview-file-end{
       @include utils.ellipsis-text-parent;
+      flex: 1;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -77,7 +71,20 @@
         @include utils.ellipsis-text;
         max-width: 100%;
       }
+    }
 
+    .str-chat__attachment-preview-file-icon {
+      @include utils.flex-row-center;
+
+      svg {
+        height: calc(var(--str-chat__spacing-px) * 37);
+        width: unset;
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-file {
+    .str-chat__attachment-preview-file-end {
       .str-chat__attachment-preview-file-download {
         line-height: calc(var(--str-chat__spacing-px) * 13);
 

package/dist/scss/v2/AttachmentPreviewList/AttachmentPreviewList-theme.scss

@@ -107,6 +107,7 @@
     }
   }
 
+  .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     @include utils.component-layer-overrides('attachment-preview-file');
 
@@ -121,6 +122,21 @@
     }
   }
 
+  .str-chat__attachment-preview-file {
+    .str-chat__attachment-preview-file-download {
+      svg path {
+        fill: var(--str-chat__attachment-preview-download-icon-color);
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-voice-recording {
+    .str-chat__recording-timer {
+      color: var(--str-chat__text-low-emphasis-color);
+      font: var(--str-chat__caption-medium-text);
+    }
+  }
+
   .str-chat__attachment-preview-delete {
     svg {
       background-color: var(--str-chat__attachment-preview-close-icon-background);

package/dist/scss/v2/AudioRecorder/AudioRecorder-layout.scss

@@ -0,0 +1,89 @@
+@use '../utils';
+
+.str-chat__audio_recorder-container {
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: 3.25rem;
+  padding-inline: 1rem;
+}
+
+.str-chat__audio_recorder {
+  @include utils.flex-row-center;
+  gap: 0.375rem;
+
+  button {
+    @include utils.flex-row-center;
+    height: 32px;
+    width: 32px;
+    padding: 0;
+  }
+
+  .str-chat__audio_recorder__cancel-button svg {
+    height: 28px;
+  }
+
+  .str-chat__audio_recorder__toggle-playback-button svg {
+    height: 16px;
+  }
+
+  .str-chat__audio_recorder__pause-recording-button svg {
+    height: 12px;
+  }
+
+  .str-chat__audio_recorder__resume-recording-button svg {
+    height: 24px;
+  }
+
+  .str-chat__audio_recorder__stop-button svg {
+    height: 12px;
+  }
+
+  .str-chat__audio_recorder__complete-button svg {
+    height: 16px;
+  }
+
+  .str-chat__recording-timer {
+    display: flex;
+    align-items: center;
+    width: 3rem;
+  }
+
+  .str-chat__recording-timer--hours {
+    width: 3.75rem;
+  }
+
+  .str-chat__wave-progress-bar__track-container {
+    padding-block: 0.5rem;
+    overflow-x: auto;
+    height: fit-content;
+  }
+
+  .str-chat__waveform-box-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .str-chat__audio_recorder__waveform-box,
+  .str-chat__wave-progress-bar__track {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: 2rem;
+    margin-inline: 1rem;
+  }
+
+  .str-chat__wave-progress-bar__track {
+    width: 120px;
+  }
+
+  .str-chat__audio_recorder__waveform-box {
+    overflow-x: hidden;
+  }
+}

package/dist/scss/v2/AudioRecorder/AudioRecorder-theme.scss

@@ -0,0 +1,51 @@
+@use '../utils';
+
+.str-chat__audio_recorder-container {
+  background-color: var(--str-chat__background-color);
+}
+
+.str-chat__audio_recorder {
+  //@include utils.component-layer-overrides('audio-recorder');
+
+  button {
+    @include utils.button-reset;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  .str-chat__audio_recorder__cancel-button {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+
+  .str-chat__audio_recorder__toggle-playback-button {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+
+  .str-chat__audio_recorder__pause-recording-button,
+  .str-chat__audio_recorder__resume-recording-button {
+    color: var(--str-chat__danger-color);
+  }
+
+  .str-chat__audio_recorder__pause-recording-button {
+    border: 3px solid var(--str-chat__danger-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+
+  .str-chat__audio_recorder__stop-button,
+  .str-chat__audio_recorder__complete-button {
+    border-radius: var(--str-chat__border-radius-circle);
+    color: var(--str-chat__on-primary-color);
+    background-color: var(--str-chat__primary-color);
+
+    .str-chat__loading-indicator svg {
+      linearGradient {
+        stop:last-child {
+          stop-color: var(--str-chat__background-color);
+        }
+      }
+    }
+  }
+}

package/dist/scss/v2/ChannelPreview/ChannelPreview-layout.scss

@@ -36,10 +36,9 @@
     .str-chat__channel-preview-end-first-row {
       display: flex;
       column-gap: var(--str-chat__spacing-1);
-      align-items: center;
+      align-items: stretch;
 
       .str-chat__channel-preview-unread-badge {
-        height: 100%;
         display: flex;
         align-items: center;
         padding: 0 var(--str-chat__spacing-2);
@@ -50,6 +49,24 @@
       }
     }
 
+    .str-chat__channel-preview-end-second-row {
+      @include utils.ellipsis-text-parent;
+      display: flex;
+      column-gap: var(--str-chat__spacing-1);
+      align-items: center;
+
+      .str-chat__channel-preview-messenger--last-message {
+        flex: 1;
+      }
+
+      .str-chat__channel-preview-messenger--status {
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 15);
+          height: calc(var(--str-chat__spacing-px) * 15);
+        }
+      }
+    }
+
     .str-chat__channel-preview-messenger--name,
     .str-chat__channel-preview-messenger--last-message {
       @include utils.ellipsis-text;

package/dist/scss/v2/ChannelPreview/ChannelPreview-theme.scss

@@ -56,6 +56,12 @@
 
   /* Right (left in RTL layout) border of the unread badge */
   --str-chat__channel-preview-unread-badge-border-inline-end: none;
+
+  /* The color of the message status indicator icon (only available in Angular) */
+  --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
+
+  /* The color of the text that displays the message time (only available in Angular) */
+  --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
 }
 
 .str-chat__channel-preview {
@@ -90,6 +96,21 @@
       }
     }
   }
+
+  .str-chat__channel-preview-messenger--status {
+    color: var(--str-chat__channel-preview-message-status-color);
+
+    svg {
+      path {
+        fill: var(--str-chat__channel-preview-message-status-color);
+      }
+    }
+  }
+
+  .str-chat__channel-preview-messenger--time {
+    color: var(--str-chat__channel-preview-message-time-color);
+    font: var(--str-chat__caption-text);
+  }
 }
 
 .str-chat__channel-preview-loading {

package/dist/scss/v2/Message/Message-layout.scss

@@ -76,7 +76,7 @@
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
-    justify-items: start;
+    justify-items: flex-start;
   }
 
   &.str-chat__message--me {
@@ -120,7 +120,7 @@
 
     .str-chat__message-options {
       grid-area: options;
-      align-items: start;
+      align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
       width: calc(3 * var(--str-chat__message-options-button-size));

package/dist/scss/v2/MessageInput/MessageInput-layout.scss

@@ -2,6 +2,7 @@
 
 .str-chat__message-input {
   $send-button-size: calc(var(--str-chat__spacing-px) * 45);
+  $start-audio-recording-button-size: calc(var(--str-chat__spacing-px) * 40);
 
   @include utils.flex-col-center;
   width: 100%;
@@ -145,6 +146,19 @@
     }
   }
 
+  .str-chat__start-recording-audio-button {
+    @include utils.flex-row-center;
+    cursor: pointer;
+    padding: 0;
+    width: $start-audio-recording-button-size;
+    height: $start-audio-recording-button-size;
+    min-width: $start-audio-recording-button-size;
+
+    svg {
+      height: calc(var(--str-chat__spacing-px) * 25);
+    }
+  }
+
   .str-chat__message-input-cooldown {
     @include utils.flex-row-center;
     margin-inline-start: var(--str-chat__spacing-2);
@@ -161,6 +175,21 @@
   .str-chat__quoted-message-preview {
     padding: var(--str-chat__spacing-2);
   }
+
+  .str-chat__recording-permission-denied-notification {
+    position: absolute;
+    left: 0.5rem;
+    max-width: 100%;
+    bottom: 100%;
+    padding: 1rem;
+    margin-inline: 0.5rem;
+    z-index: 2;
+
+    .str-chat__recording-permission-denied-notification__dismiss-button-container {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .str-chat__message-input-angular-host {
@@ -179,7 +208,7 @@
   flex-grow: initial;
 }
 
-[dir='rtl'] .str-chat__send-button {
+[dir='rtl'] .str-chat__send-button, [dir='rtl'] .str-chat__start-recording-audio-button {
   svg {
     transform: scale(-1, 1);
   }