stream-chat-react 11.11.0 → 11.12.1

package/dist/i18n/ko.json

@@ -12,6 +12,7 @@
     "Drag your files here to add to your post": "게시물에 추가하려면 파일을 여기로 끌어다 놓으세요",
     "Edit Message": "메시지 수정",
     "Edit message request failed": "메시지 수정 요청 실패",
+    "Edited": "편집됨",
     "Emoji matching": "이모티콘 매칭",
     "Empty message...": "빈 메시지...",
     "Error adding flag": "플래그를 추가하는 동안 오류가 발생했습니다.",
@@ -22,6 +23,7 @@
     "Error muting a user ...": "사용자를 음소거하는 중에 오류가 발생했습니다...",
     "Error pinning message": "메시지를 핀하는 중에 오류가 발생했습니다.",
     "Error removing message pin": "메시지 핀을 제거하는 중에 오류가 발생했습니다.",
+    "Error reproducing the recording": "녹음 재생 중 오류 발생",
     "Error unmuting a user ...": "사용자 음소거 해제 중 오류 발생...",
     "Error uploading file": "파일 업로드 오류",
     "Error uploading image": "이미지를 업로드하는 동안 오류가 발생했습니다.",
@@ -70,6 +72,7 @@
     "Unread messages": "읽지 않은 메시지",
     "Upload type: \"{{ type }}\" is not allowed": "업로드 유형: \"{{ type }}\"은(는) 허용되지 않습니다.",
     "User uploaded content": "사용자 업로드 콘텐츠",
+    "Voice message": "음성 메시지",
     "Wait until all attachments have uploaded": "모든 첨부 파일이 업로드될 때까지 기다립니다.",
     "You have no channels currently": "현재 채널이 없습니다.",
     "You've reached the maximum number of files": "최대 파일 수에 도달했습니다.",

package/dist/i18n/nl.json

@@ -12,6 +12,7 @@
     "Drag your files here to add to your post": "Sleep je bestanden hier naartoe om aan je bericht toe te voegen",
     "Edit Message": "Pas bericht aan",
     "Edit message request failed": "Verzoek om bericht bewerken mislukt",
+    "Edited": "Bewerkt",
     "Emoji matching": "Emoji-overeenkomsten",
     "Empty message...": "Leeg bericht...",
     "Error adding flag": "Fout bij toevoegen van vlag",
@@ -22,6 +23,7 @@
     "Error muting a user ...": "Fout bij het muten van de gebruiker",
     "Error pinning message": "Fout bij vastzetten van bericht",
     "Error removing message pin": "Fout bij verwijderen van berichtpin",
+    "Error reproducing the recording": "Fout bij het afspelen van de opname",
     "Error unmuting a user ...": "Fout bij het unmuten van de gebruiker",
     "Error uploading file": "Fout bij uploaden bestand",
     "Error uploading image": "Fout bij uploaden afbeelding",
@@ -70,6 +72,7 @@
     "Unread messages": "Ongelezen berichten",
     "Upload type: \"{{ type }}\" is not allowed": "Uploadtype: \"{{ type }}\" is niet toegestaan",
     "User uploaded content": "Gebruikersgeüploade inhoud",
+    "Voice message": "Voicemail",
     "Wait until all attachments have uploaded": "Wacht tot alle bijlagen zijn geüpload",
     "You have no channels currently": "Er zijn geen chats beschikbaar",
     "You've reached the maximum number of files": "Je hebt het maximale aantal bestanden bereikt",

package/dist/i18n/pt.json

@@ -12,6 +12,7 @@
     "Drag your files here to add to your post": "Arraste seus arquivos aqui para adicionar ao seu post",
     "Edit Message": "Editar Mensagem",
     "Edit message request failed": "O pedido de edição da mensagem falhou",
+    "Edited": "Editada",
     "Emoji matching": "Emoji correspondente",
     "Empty message...": "Mensagem vazia...",
     "Error adding flag": "Erro ao reportar",
@@ -22,6 +23,7 @@
     "Error muting a user ...": "Erro ao silenciar um usuário...",
     "Error pinning message": "Erro ao fixar mensagem",
     "Error removing message pin": "Erro ao remover o PIN da mensagem",
+    "Error reproducing the recording": "Erro ao reproduzir a gravação",
     "Error unmuting a user ...": "Erro ao ativar o som de um usuário...",
     "Error uploading file": "Erro ao enviar arquivo",
     "Error uploading image": "Erro ao carregar a imagem",
@@ -70,6 +72,7 @@
     "Unread messages": "Mensagens não lidas",
     "Upload type: \"{{ type }}\" is not allowed": "Tipo de upload: \"{{ type }}\" não é permitido",
     "User uploaded content": "Conteúdo enviado pelo usuário",
+    "Voice message": "Mensagem de voz",
     "Wait until all attachments have uploaded": "Espere até que todos os anexos tenham sido carregados",
     "You have no channels currently": "Você não tem canais atualmente",
     "You've reached the maximum number of files": "Você atingiu o número máximo de arquivos",

package/dist/i18n/ru.json

@@ -12,6 +12,7 @@
     "Drag your files here to add to your post": "Перетащите ваши файлы сюда, чтобы добавить их в ваш пост",
     "Edit Message": "Редактировать сообщение",
     "Edit message request failed": "Не удалось изменить запрос сообщения",
+    "Edited": "Отредактировано",
     "Emoji matching": "Соответствие эмодзи",
     "Empty message...": "Пустое сообщение...",
     "Error adding flag": "Ошибка добавления флага",
@@ -22,6 +23,7 @@
     "Error muting a user ...": "Ошибка отключения уведомлений от пользователя...",
     "Error pinning message": "Сообщение об ошибке при закреплении",
     "Error removing message pin": "Ошибка при удалении булавки сообщения",
+    "Error reproducing the recording": "Ошибка воспроизведения записи",
     "Error unmuting a user ...": "Ошибка включения уведомлений...",
     "Error uploading file": "Ошибка при загрузке файла",
     "Error uploading image": "Ошибка загрузки изображения",
@@ -70,6 +72,7 @@
     "Unread messages": "Непрочитанные сообщения",
     "Upload type: \"{{ type }}\" is not allowed": "Тип загрузки: \"{{ type }}\" не разрешен",
     "User uploaded content": "Пользователь загрузил контент",
+    "Voice message": "Голосовое сообщение",
     "Wait until all attachments have uploaded": "Подождите, пока все вложения загрузятся",
     "You have no channels currently": "У вас нет каналов в данный момент",
     "You've reached the maximum number of files": "Вы достигли максимального количества файлов",

package/dist/i18n/tr.json

@@ -12,6 +12,7 @@
     "Drag your files here to add to your post": "Gönderinize eklemek için dosyalarınızı buraya sürükleyin",
     "Edit Message": "Mesajı Düzenle",
     "Edit message request failed": "Mesaj düzenleme isteği başarısız oldu",
+    "Edited": "Düzenlendi",
     "Emoji matching": "Emoji eşleştirme",
     "Empty message...": "Boş mesaj...",
     "Error adding flag": "Bayrak eklenirken hata oluştu",
@@ -22,6 +23,7 @@
     "Error muting a user ...": "Kullanıcıyı sessize alırken hata oluştu ...",
     "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 unmuting a user ...": "Kullanıcının sesini açarken hata oluştu ...",
     "Error uploading file": "Dosya yüklenirken hata oluştu",
     "Error uploading image": "Resmi yüklerken hata",
@@ -70,6 +72,7 @@
     "Unread messages": "Okunmamış mesajlar",
     "Upload type: \"{{ type }}\" is not allowed": "Yükleme türü: \"{{ type }}\" izin verilmez",
     "User uploaded content": "Kullanıcı tarafından yüklenen içerik",
+    "Voice message": "Sesli mesaj",
     "Wait until all attachments have uploaded": "Tüm ekler yüklenene kadar bekleyin",
     "You have no channels currently": "Henüz kanalınız yok",
     "You've reached the maximum number of files": "Maksimum dosya sayısına ulaştınız",

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-194c5448.js');
+var Window = require('./Window-40a618cb.js');
 var React = require('react');
 var streamChat = require('stream-chat');
 var reactVirtuoso = require('react-virtuoso');
@@ -1047,8 +1047,8 @@ var Footer = function () {
     return TypingIndicator ? React__default["default"].createElement(TypingIndicator, { avatarSize: 24 }) : null;
 };
 var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _k = virtuosoContext.unreadMessageCount, unreadMessageCount = _k === void 0 ? 0 : _k, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
+    var _a, _b, _c, _d, _e, _f, _g;
+    var additionalMessageInputProps = virtuosoContext.additionalMessageInputProps, closeReactionSelectorOnClick = virtuosoContext.closeReactionSelectorOnClick, customMessageActions = virtuosoContext.customMessageActions, customMessageRenderer = virtuosoContext.customMessageRenderer, DateSeparator = virtuosoContext.DateSeparator, firstUnreadMessageId = virtuosoContext.firstUnreadMessageId, lastReadMessageId = virtuosoContext.lastReadMessageId, lastReceivedMessageId = virtuosoContext.lastReceivedMessageId, MessageUIComponent = virtuosoContext.Message, messageActions = virtuosoContext.messageActions, MessageSystem = virtuosoContext.MessageSystem, numItemsPrepended = virtuosoContext.numItemsPrepended, ownMessagesReadByOthers = virtuosoContext.ownMessagesReadByOthers, messageList = virtuosoContext.processedMessages, shouldGroupByUser = virtuosoContext.shouldGroupByUser, sortReactionDetails = virtuosoContext.sortReactionDetails, sortReactions = virtuosoContext.sortReactions, _h = virtuosoContext.unreadMessageCount, unreadMessageCount = _h === void 0 ? 0 : _h, UnreadMessagesSeparator = virtuosoContext.UnreadMessagesSeparator, virtuosoRef = virtuosoContext.virtuosoRef;
     var streamMessageIndex = calculateItemIndex(virtuosoIndex, numItemsPrepended);
     if (customMessageRenderer) {
         return customMessageRenderer(messageList, streamMessageIndex);
@@ -1065,13 +1065,18 @@ var messageRenderer = function (virtuosoIndex, _data, virtuosoContext) {
     var groupedByUser = shouldGroupByUser &&
         streamMessageIndex > 0 &&
         ((_a = message.user) === null || _a === void 0 ? void 0 : _a.id) === ((_b = messageList[streamMessageIndex - 1].user) === null || _b === void 0 ? void 0 : _b.id);
-    var firstOfGroup = shouldGroupByUser && ((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_e = (_d = messageList[streamMessageIndex - 1]) === null || _d === void 0 ? void 0 : _d.user) === null || _e === void 0 ? void 0 : _e.id);
-    var endOfGroup = shouldGroupByUser && ((_f = message.user) === null || _f === void 0 ? void 0 : _f.id) !== ((_h = (_g = messageList[streamMessageIndex + 1]) === null || _g === void 0 ? void 0 : _g.user) === null || _h === void 0 ? void 0 : _h.id);
+    var maybePrevMessage = messageList[streamMessageIndex - 1];
+    var maybeNextMessage = messageList[streamMessageIndex + 1];
+    var firstOfGroup = shouldGroupByUser &&
+        (((_c = message.user) === null || _c === void 0 ? void 0 : _c.id) !== ((_d = maybePrevMessage === null || maybePrevMessage === void 0 ? void 0 : maybePrevMessage.user) === null || _d === void 0 ? void 0 : _d.id) ||
+            (maybePrevMessage && Window.isMessageEdited(maybePrevMessage)));
+    var endOfGroup = shouldGroupByUser &&
+        (((_e = message.user) === null || _e === void 0 ? void 0 : _e.id) !== ((_f = maybeNextMessage === null || maybeNextMessage === void 0 ? void 0 : maybeNextMessage.user) === null || _f === void 0 ? void 0 : _f.id) || Window.isMessageEdited(message));
     var isNewestMessage = lastReadMessageId === lastReceivedMessageId;
     var isLastReadMessage = message.id === lastReadMessageId;
     var showUnreadSeparator = isLastReadMessage && !isNewestMessage && (firstUnreadMessageId || unreadMessageCount > 0); // unread count can be 0 if the user marks unread only own messages
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_j = virtuosoRef.current) === null || _j === void 0 ? void 0 : _j.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
+        React__default["default"].createElement(Window.Message, { additionalMessageInputProps: additionalMessageInputProps, autoscrollToBottom: (_g = virtuosoRef.current) === null || _g === void 0 ? void 0 : _g.autoscrollToBottom, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: customMessageActions, endOfGroup: endOfGroup, firstOfGroup: firstOfGroup, groupedByUser: groupedByUser, lastReceivedId: lastReceivedMessageId, message: message, Message: MessageUIComponent, messageActions: messageActions, readBy: ownMessagesReadByOthers[message.id] || [], sortReactionDetails: sortReactionDetails, sortReactions: sortReactions }),
         showUnreadSeparator && (React__default["default"].createElement("div", { className: 'str-chat__unread-messages-separator-wrapper' },
             React__default["default"].createElement(UnreadMessagesSeparator, { unreadCount: unreadMessageCount })))));
 };
@@ -1305,7 +1310,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.11.0';
+var version = '11.12.1';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1683,6 +1688,7 @@ exports.DefaultSuggestionListHeader = Window.DefaultSuggestionListHeader;
 exports.DefaultSuggestionListItem = Window.Item;
 exports.DefaultTriggerProvider = Window.DefaultTriggerProvider;
 exports.DeliveredCheckIcon = Window.DeliveredCheckIcon;
+exports.DownloadButton = Window.DownloadButton;
 exports.DownloadIcon = Window.DownloadIcon;
 exports.EditMessageForm = Window.EditMessageForm;
 exports.EmojiIconLarge = Window.EmojiIconLarge;
@@ -1694,6 +1700,7 @@ exports.ErrorIcon = Window.ErrorIcon;
 exports.EventComponent = Window.EventComponent;
 exports.FileAttachment = Window.FileAttachment;
 exports.FileContainer = Window.FileContainer;
+exports.FileSizeIndicator = Window.FileSizeIndicator;
 exports.FileUploadIcon = Window.FileUploadIcon;
 exports.FileUploadIconFlat = Window.FileUploadIconFlat;
 exports.FixedHeightMessage = Window.FixedHeightMessage;
@@ -1750,6 +1757,7 @@ exports.NullComponent = Window.NullComponent;
 exports.PinIcon = Window.PinIcon;
 exports.PinIndicator = Window.PinIndicator;
 exports.PlayButton = Window.PlayButton;
+exports.PlaybackRateButton = Window.PlaybackRateButton;
 exports.PopperTooltip = Window.PopperTooltip;
 exports.ProgressBar = Window.ProgressBar;
 exports.QuotedMessage = Window.QuotedMessage;
@@ -1793,6 +1801,8 @@ exports.UploadButton = Window.UploadButton;
 exports.UploadIcon = Window.UploadIcon;
 exports.UploadsPreview = Window.UploadsPreview;
 exports.UserItem = Window.UserItem;
+exports.VoiceRecordingContainer = Window.VoiceRecordingContainer;
+exports.WaveProgressBar = Window.WaveProgressBar;
 exports.Window = Window.Window;
 exports.areMessagePropsEqual = Window.areMessagePropsEqual;
 exports.areMessageUIPropsEqual = Window.areMessageUIPropsEqual;
@@ -1804,6 +1814,9 @@ exports.defaultReactionOptions = Window.defaultReactionOptions;
 exports.defaultScrollToItem = Window.defaultScrollToItem;
 exports.defaultTimestampFormat = Window.defaultTimestampFormat;
 exports.defaultTranslatorFunction = Window.defaultTranslatorFunction;
+exports.displayDuration = Window.displayDuration;
+exports.divMod = Window.divMod;
+exports.downSample = Window.downSample;
 exports.emojiMarkdownPlugin = Window.emojiMarkdownPlugin;
 exports.enTranslations = Window.enTranslations;
 exports.esTranslations = Window.esTranslations;
@@ -1837,12 +1850,14 @@ exports.isGalleryAttachmentType = Window.isGalleryAttachmentType;
 exports.isLanguageSupported = Window.isLanguageSupported;
 exports.isMediaAttachment = Window.isMediaAttachment;
 exports.isMessageBounced = Window.isMessageBounced;
+exports.isMessageEdited = Window.isMessageEdited;
 exports.isNumberOrString = Window.isNumberOrString;
 exports.isOnlyEmojis = Window.isOnlyEmojis;
 exports.isScrapedContent = Window.isScrapedContent;
 exports.isSvgAttachment = Window.isSvgAttachment;
 exports.isUploadedImage = Window.isUploadedImage;
 exports.isUserMuted = Window.isUserMuted;
+exports.isVoiceRecordingAttachment = Window.isVoiceRecordingAttachment;
 exports.itTranslations = Window.itTranslations;
 exports.jaTranslations = Window.jaTranslations;
 exports.keepLineBreaksPlugin = Window.keepLineBreaksPlugin;
@@ -1875,6 +1890,7 @@ exports.renderText = Window.renderText;
 exports.ruTranslations = Window.ruTranslations;
 exports.showMessageActionsBox = Window.showMessageActionsBox;
 exports.trTranslations = Window.trTranslations;
+exports.upSample = Window.upSample;
 exports.useActionHandler = Window.useActionHandler;
 exports.useChannelActionContext = Window.useChannelActionContext;
 exports.useChannelDeletedListener = Window.useChannelDeletedListener;

package/dist/scss/Message.scss

@@ -83,7 +83,7 @@
   /* group styling */
   &--top,
   &--single {
-    padding-top: calc(var(--md-p)/2);
+    padding-top: calc(var(--md-p) / 2);
 
     .str-chat__message {
       &-attachment--img,
@@ -176,7 +176,7 @@
   }
 
   &--bottom {
-    padding-bottom: calc(var(--md-p)/2);
+    padding-bottom: calc(var(--md-p) / 2);
 
     .str-chat__message {
       &-attachment--img,
@@ -217,7 +217,7 @@
   }
 
   &--single {
-    padding-bottom: calc(var(--md-m)/2);
+    padding-bottom: calc(var(--md-m) / 2);
   }
 
   &--top,
@@ -233,14 +233,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -251,10 +253,12 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
+              var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
@@ -262,10 +266,12 @@
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+                calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -278,14 +284,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -296,7 +304,8 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -741,11 +750,6 @@
             padding: 3px 0;
           }
         }
-
-        &--options.str-chat-angular__message-simple__actions__action--options--editing {
-          position: relative;
-          display: flex;
-        }
       }
     }
 

package/dist/scss/MessageActions.scss

@@ -135,12 +135,3 @@
     }
   }
 }
-
-// Used by Angular SDK to display edit message modal
-.str-chat__message-edit-in-progress {
-  .ngxp__container {
-    transform: initial !important;
-    will-change: initial !important;
-    z-index: 2;
-  }
-}

package/dist/scss/_base.scss

@@ -31,12 +31,19 @@
         bottom: 0;
         opacity: 0;
 
-        &[aria-hidden="true"] {
+        &[aria-hidden='true'] {
           visibility: hidden;
         }
       }
     }
   }
+
+  // New features are not implemented in theme-v1, corresponding HTML code is hidden
+  .str-chat__unread-messages-notification,
+  .str-chat__unread-messages-separator-wrapper,
+  .str-chat__message-bounce-prompt {
+    display: none;
+  }
 }
 
 .clearfix {

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

@@ -341,6 +341,71 @@
     }
   }
 
+  .str-chat__message-attachment__voice-recording-widget {
+    display: grid;
+    grid-template-columns: 36px auto 55px;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--str-chat__spacing-px) * 14);
+    padding: var(--str-chat__spacing-2);
+    margin: var(--str-chat__attachment-margin);
+
+    .str-chat__message-attachment__voice-recording-widget__metadata {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--str-chat__spacing-2);
+
+      .str-chat__message-attachment__voice-recording-widget__audio-state {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--str-chat__spacing-1_5);
+        height: 100%;
+      }
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__right-section {
+      justify-self: center;
+    }
+
+    .str-chat__message-attachment__voice-recording-widget__timer {
+      min-width: calc(var(--str-chat__spacing-px) * 45);
+      width: calc(var(--str-chat__spacing-px) * 45);
+    }
+
+    .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__message_attachment__playback-rate-button {
+    @include utils.flex-row-center;
+    @include utils.button-reset;
+    padding: var(--str-chat__spacing-1_5) var(--str-chat__spacing-2_5);
+  }
+
   .str-chat__message-attachment-card {
     min-width: 0;
     max-width: var(--str-chat__attachment-max-width);
@@ -396,6 +461,12 @@
       }
     }
   }
+
+  /* Angular has different UI here, the download icon is too small to use on mobile */
+  .str-chat-angular__message-attachment-file-single {
+    cursor: pointer;
+    text-decoration: none;
+  }
 }
 
 .str-chat__quoted-message-preview {
@@ -413,6 +484,19 @@
     }
   }
 
+  .str-chat__message-attachment__voice-recording-widget {
+    display: flex;
+    justify-content: space-between;
+
+    .str-chat__wave-progress-bar__track {
+      display: none;
+    }
+
+    .str-chat__message-attachment-audio-widget--play-button {
+      display: none;
+    }
+  }
+
   .str-chat__message-attachment-file--item-download {
     display: none;
   }

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

@@ -170,6 +170,35 @@
   /* Box shadow applied to audio widget */
   --str-chat__audio-attachment-widget-box-shadow: none;
 
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-radius: calc(
+    var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
+  );
+
+  /* Text color used in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color);
+
+  /* Border radius applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-secondary-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */
+  --str-chat__voice-recording-attachment-widget-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-start: none;
+
+  /* Bottom border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-block-end: none;
+
+  /* Left (right in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of audio recording widget */
+  --str-chat__voice-recording-attachment-widget-border-inline-end: none;
+
+  /* Box shadow applied to audio recording widget */
+  --str-chat__voice-recording-attachment-widget-box-shadow: none;
+
   /* Border radius applied to the play / pause button of audio widget */
   --str-chat__audio-attachment-controls-button-border-radius: var(--str-chat__border-radius-circle);
 
@@ -315,7 +344,11 @@
   }
 
   .str-chat__message-attachment-audio-widget--progress-track {
-    background-color: var(--str-chat__disabled-color);
+    background: linear-gradient(
+      to right,
+      var(--str-chat__primary-color)  var(--str-chat__message-attachment-audio-widget-progress),
+      var(--str-chat__disabled-color) var(--str-chat__message-attachment-audio-widget-progress)
+    );
     border-radius: calc(var(--str-chat__spacing-px) * 5);
 
     .str-chat__message-attachment-audio-widget--progress-indicator {
@@ -329,6 +362,44 @@
     @include utils.circle-fab-overrides('audio-attachment-controls-button');
   }
 
+  .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;
+      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__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__message_attachment__playback-rate-button {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+    border-radius: var(--str-chat__border-radius-circle);
+    background-color: #fff; // in design marked as static, excluded from theming
+    cursor: pointer;
+  }
+
   .str-chat__message-attachment--card {
     @include utils.component-layer-overrides('card-attachment');
     font: var(--str-chat__body-text);

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

@@ -23,7 +23,7 @@
   }
 }
 
-.str-chat__message {
+.str-chat-angular__edit-message-form {
   .str-chat__message-input-angular-host {
     max-height: 100%;
     min-height: 0;
@@ -32,21 +32,19 @@
     max-width: 100%;
   }
 
-  .str-chat__message-edit-in-progress {
-    .str-chat__modal--open {
-      .str-chat__modal__inner {
-        height: 40%;
-        max-height: 80%;
-        min-width: 90%;
-        max-width: 90%;
-        width: 90%;
-        flex-basis: min-content;
+  .str-chat__modal--open {
+    .str-chat__modal__inner {
+      height: 40%;
+      max-height: 80%;
+      min-width: 90%;
+      max-width: 90%;
+      width: 90%;
+      flex-basis: min-content;
 
-        @media only screen and (min-device-width: 768px) {
-          min-width: 40%;
-          max-width: 60%;
-          width: min-content;
-        }
+      @media only screen and (min-device-width: 768px) {
+        min-width: 40%;
+        max-width: 60%;
+        width: min-content;
       }
     }
   }