stream-chat-react 11.16.1 → 11.18.0

package/dist/i18n/tr.json

@@ -84,6 +84,7 @@
     "Unmute": "Sesini aç",
     "Unpin": "Sabitlemeyi kaldır",
     "Unread messages": "Okunmamış mesajlar",
+    "Unsupported attachment": "Desteklenmeyen ek",
     "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",

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-9d319da4.js');
+var Window = require('./Window-5802024e.js');
 var React = require('react');
 var streamChat = require('stream-chat');
 var throttle = require('lodash.throttle');
@@ -117,7 +117,7 @@ var GiphyPreviewMessage = function (props) {
 };
 
 var useEnrichedMessages = function (args) {
-    var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser;
+    var channel = args.channel, disableDateSeparator = args.disableDateSeparator, groupStyles = args.groupStyles, headerPosition = args.headerPosition, hideDeletedMessages = args.hideDeletedMessages, hideNewMessageSeparator = args.hideNewMessageSeparator, messages = args.messages, noGroupByUser = args.noGroupByUser, reviewProcessedMessage = args.reviewProcessedMessage;
     var client = Window.useChatContext('useEnrichedMessages').client;
     var HeaderComponent = Window.useComponentContext('useEnrichedMessages').HeaderComponent;
     var lastRead = React.useMemo(function () { var _a; return (_a = channel.lastRead) === null || _a === void 0 ? void 0 : _a.call(channel); }, [channel]);
@@ -130,6 +130,7 @@ var useEnrichedMessages = function (args) {
             hideNewMessageSeparator: hideNewMessageSeparator,
             lastRead: lastRead,
             messages: messages,
+            reviewProcessedMessage: reviewProcessedMessage,
             userId: client.userID || '',
         });
     if (HeaderComponent) {
@@ -652,7 +653,7 @@ var MessageListWithContext = function (props) {
     var _a;
     var channel = props.channel, channelUnreadUiState = props.channelUnreadUiState, _b = props.disableDateSeparator, disableDateSeparator = _b === void 0 ? false : _b, groupStyles = props.groupStyles, _c = props.hideDeletedMessages, hideDeletedMessages = _c === void 0 ? false : _c, _d = props.hideNewMessageSeparator, hideNewMessageSeparator = _d === void 0 ? false : _d, _e = props.internalInfiniteScrollProps, _f = _e === void 0 ? {} : _e, _g = _f.threshold, loadMoreScrollThreshold = _g === void 0 ? Window.DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD : _g, restInternalInfiniteScrollProps = Window.__rest(_f, ["threshold"]), _h = props.messageActions, messageActions = _h === void 0 ? Object.keys(Window.MESSAGE_ACTIONS) : _h, _j = props.messages, messages = _j === void 0 ? [] : _j, notifications = props.notifications, _k = props.noGroupByUser, noGroupByUser = _k === void 0 ? false : _k, _l = props.pinPermissions, pinPermissions = _l === void 0 ? Window.defaultPinPermissions : _l, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
     _m = props.returnAllReadData, // @deprecated in favor of `channelCapabilities` - TODO: remove in next major release
-    returnAllReadData = _m === void 0 ? false : _m, _o = props.threadList, threadList = _o === void 0 ? false : _o, _p = props.unsafeHTML, unsafeHTML = _p === void 0 ? false : _p, headerPosition = props.headerPosition, read = props.read, _q = props.renderMessages, renderMessages = _q === void 0 ? defaultRenderMessages : _q, _r = props.messageLimit, messageLimit = _r === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _r, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _s = props.hasMoreNewer, hasMoreNewer = _s === void 0 ? false : _s, showUnreadNotificationAlways = props.showUnreadNotificationAlways, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _t = props.jumpToLatestMessage, jumpToLatestMessage = _t === void 0 ? function () { return Promise.resolve(); } : _t;
+    returnAllReadData = _m === void 0 ? false : _m, _o = props.threadList, threadList = _o === void 0 ? false : _o, _p = props.unsafeHTML, unsafeHTML = _p === void 0 ? false : _p, headerPosition = props.headerPosition, read = props.read, _q = props.renderMessages, renderMessages = _q === void 0 ? defaultRenderMessages : _q, reviewProcessedMessage = props.reviewProcessedMessage, _r = props.messageLimit, messageLimit = _r === void 0 ? Window.DEFAULT_NEXT_CHANNEL_PAGE_SIZE : _r, loadMoreCallback = props.loadMore, loadMoreNewerCallback = props.loadMoreNewer, _s = props.hasMoreNewer, hasMoreNewer = _s === void 0 ? false : _s, showUnreadNotificationAlways = props.showUnreadNotificationAlways, suppressAutoscroll = props.suppressAutoscroll, highlightedMessageId = props.highlightedMessageId, _t = props.jumpToLatestMessage, jumpToLatestMessage = _t === void 0 ? function () { return Promise.resolve(); } : _t;
     var _u = React__default["default"].useState(null), listElement = _u[0], setListElement = _u[1];
     var _v = React__default["default"].useState(null), ulElement = _v[0], setUlElement = _v[1];
     var customClasses = Window.useChatContext('MessageList').customClasses;
@@ -685,6 +686,7 @@ var MessageListWithContext = function (props) {
         hideNewMessageSeparator: hideNewMessageSeparator,
         messages: messages,
         noGroupByUser: noGroupByUser,
+        reviewProcessedMessage: reviewProcessedMessage,
     }), messageGroupStyles = _4.messageGroupStyles, enrichedMessages = _4.messages;
     var elements = useMessageListElements({
         channelUnreadUiState: channelUnreadUiState,
@@ -1149,7 +1151,7 @@ var VirtualizedMessageListWithContext = function (props) {
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
     _h = props.overscan, 
     // TODO: refactor to scrollSeekPlaceHolderConfiguration and components.ScrollSeekPlaceholder, like the Virtuoso Component
-    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
+    overscan = _h === void 0 ? 0 : _h, read = props.read, _j = props.returnAllReadData, returnAllReadData = _j === void 0 ? false : _j, reviewProcessedMessage = props.reviewProcessedMessage, scrollSeekPlaceHolder = props.scrollSeekPlaceHolder, _k = props.scrollToLatestMessageOnFocus, scrollToLatestMessageOnFocus = _k === void 0 ? false : _k, _l = props.separateGiphyPreview, separateGiphyPreview = _l === void 0 ? false : _l, _m = props.shouldGroupByUser, shouldGroupByUser = _m === void 0 ? false : _m, showUnreadNotificationAlways = props.showUnreadNotificationAlways, sortReactionDetails = props.sortReactionDetails, sortReactions = props.sortReactions, _o = props.stickToBottomScrollBehavior, stickToBottomScrollBehavior = _o === void 0 ? 'smooth' : _o, suppressAutoscroll = props.suppressAutoscroll, threadList = props.threadList;
     var virtuosoComponentsFromProps = additionalVirtuosoProps.components, overridingVirtuosoProps = Window.__rest(additionalVirtuosoProps, ["components"]);
     // Stops errors generated from react-virtuoso to bubble up
     // to Sentry or other tracking tools.
@@ -1181,6 +1183,7 @@ var VirtualizedMessageListWithContext = function (props) {
             hideNewMessageSeparator: hideNewMessageSeparator,
             lastRead: lastRead,
             messages: messages,
+            reviewProcessedMessage: reviewProcessedMessage,
             setGiphyPreviewMessage: setGiphyPreviewMessage,
             userId: client.userID || '',
         });
@@ -1344,7 +1347,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.16.1';
+var version = '11.18.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1901,6 +1904,11 @@ exports.isFileAttachment = Window.isFileAttachment;
 exports.isGalleryAttachmentType = Window.isGalleryAttachmentType;
 exports.isLanguageSupported = Window.isLanguageSupported;
 exports.isLocalAttachment = Window.isLocalAttachment;
+exports.isLocalAudioAttachment = Window.isLocalAudioAttachment;
+exports.isLocalFileAttachment = Window.isLocalFileAttachment;
+exports.isLocalImageAttachment = Window.isLocalImageAttachment;
+exports.isLocalMediaAttachment = Window.isLocalMediaAttachment;
+exports.isLocalVoiceRecordingAttachment = Window.isLocalVoiceRecordingAttachment;
 exports.isMediaAttachment = Window.isMediaAttachment;
 exports.isMessageBounced = Window.isMessageBounced;
 exports.isMessageEdited = Window.isMessageEdited;

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

@@ -253,6 +253,32 @@
     }
   }
 
+  .str-chat__message-attachment-unsupported {
+    @include utils.flex-row-center;
+    padding: var(--str-chat__spacing-2);
+    column-gap: var(--str-chat__spacing-4);
+    margin: var(--str-chat__attachment-margin);
+
+    .str-chat__file-icon {
+      width: calc(var(--str-chat__spacing-px)* 30);
+    }
+
+    .str-chat__message-attachment-unsupported__metadata {
+      min-width: 0;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+
+    }
+
+    .str-chat__message-attachment-unsupported__title {
+      @include utils.ellipsis-text;
+      max-width: 100%;
+    }
+  }
+
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     @include utils.flex-row-center;
@@ -504,9 +530,18 @@
     cursor: pointer;
     text-decoration: none;
   }
+
+  .str-chat__message-attachment-download-icon {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
+  }
+
+  .str-chat__attachment-type-icon {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
+  }
 }
 
 .str-chat__message-attachment-audio-widget--play-button {
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
   @include utils.flex-row-center();
   height: calc(var(--str-chat__spacing-px) * 36);
   width: calc(var(--str-chat__spacing-px) * 36);
@@ -572,7 +607,9 @@
   .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
+    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 {

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

@@ -320,10 +320,18 @@
     background-size: 24px 24px;
   }
 
+  .str-chat__message-attachment-unsupported,
   .str-chat__message-attachment-file--item {
     @include utils.component-layer-overrides('file-attachment');
   }
 
+  .str-chat__message-attachment-unsupported {
+    .str-chat__message-attachment-unsupported__title {
+      font: var(--str-chat__subtitle-medium-text);
+      word-break: keep-all;
+    }
+  }
+
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     .str-chat__message-attachment-file--item-name,

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

@@ -1,6 +1,7 @@
 @use '../utils';
 
 .str-chat__attachment-preview-list {
+  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 18);
   $preview-height: calc(var(--str-chat__spacing-px) * 72);
 
   @include utils.flex-row-center;
@@ -46,6 +47,7 @@
     }
   }
 
+  .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     display: flex;
@@ -59,7 +61,7 @@
     column-gap: var(--str-chat__spacing-2);
 
     .str-chat__attachment-preview-metadata,
-    .str-chat__attachment-preview-file-end{
+    .str-chat__attachment-preview-file-end {
       @include utils.ellipsis-text-parent;
       flex: 1;
       display: flex;
@@ -67,6 +69,7 @@
       align-items: flex-start;
       justify-content: center;
 
+      .str-chat__attachment-preview-title,
       .str-chat__attachment-preview-file-name {
         @include utils.ellipsis-text;
         max-width: 100%;
@@ -74,6 +77,8 @@
     }
 
     .str-chat__attachment-preview-file-icon {
+      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
+      --str-chat-icon-width: auto;
       @include utils.flex-row-center;
 
       svg {
@@ -86,6 +91,7 @@
   .str-chat__attachment-preview-file {
     .str-chat__attachment-preview-file-end {
       .str-chat__attachment-preview-file-download {
+        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
         line-height: calc(var(--str-chat__spacing-px) * 13);
 
         svg {
@@ -103,6 +109,7 @@
   }
 
   .str-chat__attachment-preview-delete {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
     position: absolute;
     top: calc(var(--str-chat__spacing-px) * 2);
     inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
@@ -116,6 +123,7 @@
   }
 
   .str-chat__attachment-preview-error {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
     @include overlay;
     @include utils.unset-button(unset);
     inset-inline-start: 0;

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

@@ -107,15 +107,20 @@
     }
   }
 
+  .str-chat__attachment-preview-unsupported,
   .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     @include utils.component-layer-overrides('attachment-preview-file');
 
+    .str-chat__attachment-preview-title,
     .str-chat__attachment-preview-file-name {
       font: var(--str-chat__subtitle-medium-text);
     }
 
     .str-chat__attachment-preview-file-download {
+      --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
+      text-decoration: none;
+
       svg path {
         fill: var(--str-chat__attachment-preview-download-icon-color);
       }
@@ -138,6 +143,13 @@
   }
 
   .str-chat__attachment-preview-delete {
+    --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
+
+    .str-chat__icon {
+      background-color: var(--str-chat__attachment-preview-close-icon-background);
+      border-radius: 999px;
+    }
+
     svg {
       background-color: var(--str-chat__attachment-preview-close-icon-background);
       border-radius: 999px;
@@ -149,6 +161,7 @@
   }
 
   .str-chat__attachment-preview-error {
+    --str-chat-icon-color: var(--str-chat__attachment-preview-retry-icon-color);
     background-color: var(--str-chat__attachment-preview-overlay-color);
 
     svg path {

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

@@ -1,3 +1,28 @@
+.str-chat {
+  /* The size of the avatar, only available in Angular v5+ */
+  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
+
+  .stream-chat__avatar--autocomplete-item {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
+  }
+
+  .stream-chat__avatar--channel-header {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
+  }
+
+  .stream-chat__avatar--channel-preview {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
+  }
+
+  .stream-chat__avatar--quoted-message-sender {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
+  }
+
+  .stream-chat__avatar--reaction {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
+  }
+}
+
 .str-chat__avatar {
   position: relative;
 
@@ -21,3 +46,24 @@
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
 }
+
+.str-chat-angular__avatar {
+  height: var(--str-chat__avatar-size);
+  line-height: var(--str-chat__avatar-size);
+  width: var(--str-chat__avatar-size);
+
+  &.stream-chat__avatar--one-letter {
+    font-size: calc(var(--str-chat__avatar-size) * 0.5);
+  }
+
+  &.stream-chat__avatar--multiple-letters {
+    font-size: calc(var(--str-chat__avatar-size) * 0.3);
+  }
+
+  .str-chat__avatar-image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;;
+  }
+  
+}

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

@@ -25,6 +25,7 @@
 }
 
 .str-chat__empty-channel {
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
   @include utils.empty-layout;
   position: relative;
 

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

@@ -40,6 +40,7 @@
 }
 
 .str-chat__empty-channel {
+  --str-chat-icon-color: var(--str-chat__channel-empty-color);
   @include utils.component-layer-overrides('channel');
   @include utils.empty-theme('channel');
 

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

@@ -14,6 +14,7 @@
       height: 100%;
 
       .str-chat__channel-list-empty {
+        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
         @include utils.empty-layout;
       }
 
@@ -40,7 +41,6 @@
   }
 }
 
-
 .str-chat__channel-list-react {
   overflow: hidden;
 
@@ -52,4 +52,4 @@
       overflow-y: auto;
     }
   }
-}
+}

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

@@ -68,8 +68,8 @@
   /* The text/icon color of the load more button in disabled state */
   --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
 
-  /* The icon color for the empty list state */
-  --str-chat__channel-list-empty-indicator-color: var(--str-chat__disabled-color);
+  /* The text/icon color for the empty list state */
+  --str-chat__channel-list-empty-indicator-color: var(--str-chat__text-low-emphasis-color);
 }
 
 .str-chat__channel-list {
@@ -82,6 +82,8 @@
   }
 
   .str-chat__channel-list-empty {
+    --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color);
     @include utils.empty-theme('channel-list');
+    color: var(--str-chat__channel-list-empty-indicator-color);
   }
 }

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

@@ -60,6 +60,8 @@
       }
 
       .str-chat__channel-preview-messenger--status {
+        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
+
         svg {
           width: calc(var(--str-chat__spacing-px) * 15);
           height: calc(var(--str-chat__spacing-px) * 15);

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

@@ -98,6 +98,7 @@
   }
 
   .str-chat__channel-preview-messenger--status {
+    --str-chat-icon-color: var(--str-chat__channel-preview-message-status-color);
     color: var(--str-chat__channel-preview-message-status-color);
 
     svg {

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

@@ -0,0 +1,87 @@
+/* Only available in Angular v5+ */
+.str-chat {
+  /* The height of the icon, only available in Angular v5+ */
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
+  /* The width of the icon, only available in Angular v5+ */
+  --str-chat-icon-width: auto;
+}
+
+.str-chat__icon {
+  display: flex;
+  font-family: 'stream-chat-icons';
+  font-style: normal;
+  font-weight: normal;
+  font-size: var(--str-chat-icon-height);
+  line-height: var(--str-chat-icon-height);
+  height: var(--str-chat-icon-height);
+  width: var(--str-chat-icon-width);
+
+  &::before {
+    line-height: var(--str-chat-icon-height);
+  }
+}
+
+// File type icons
+.str-chat__icon--unspecified-filetype {
+  content: url('data:image/svg+xml;base64,PHN2ZwogIGRhdGEtdGVzdGlkPSJ1bnNwZWNpZmllZC1maWxldHlwZSIKICB3aWR0aD0iMzQiCiAgaGVpZ2h0PSI0MCIKICB2aWV3Qm94PSIwIDAgMzQgNDAiCiAgZmlsbD0ibm9uZSIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCj4KICA8cGF0aAogICAgZD0iTTAgM0MwIDEuMzQzMTUgMS4zNDMxNSAwIDMgMEgyM0wzNCAxMVYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjNaIgogICAgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIKICAvPgogIDxwYXRoIGQ9Ik0zNCAxMUwyNiAxMUMyNC4zNDMxIDExIDIzIDkuNjU2ODUgMjMgOFYwTDM0IDExWiIgZmlsbD0iI0RCREJEQiIgLz4KICA8cGF0aAogICAgZmlsbC1ydWxlPSJldmVub2RkIgogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTggMTNIMjNWMTVIOFYxM1oiCiAgICBmaWxsPSIjQ0ZDRkNGIgogIC8+CiAgPHBhdGgKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICAgIGNsaXAtcnVsZT0iZXZlbm9kZCIKICAgIGQ9Ik04IDE3SDE4VjE5SDhWMTdaIgogICAgZmlsbD0iI0NGQ0ZDRiIKICAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOCAyMUgyM1YyM0g4VjIxWiIKICAgIGZpbGw9IiNDRkNGQ0YiCiAgLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICBpZD0icGFpbnQwX2xpbmVhciIKICAgICAgeDE9IjAiCiAgICAgIHkxPSIwIgogICAgICB4Mj0iMCIKICAgICAgeTI9IjQwIgogICAgICBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgID4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0RCREJEQiIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4=');
+}
+
+.str-chat__icon--audio-file {
+  content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==');
+}
+
+// Copy icon mapping here
+.str-chat__icon--action::before {
+  content: '\e800';
+} /* '' */
+.str-chat__icon--arrow-down::before {
+  content: '\e801';
+} /* '' */
+.str-chat__icon--arrow-left::before {
+  content: '\e802';
+} /* '' */
+.str-chat__icon--arrow-right::before {
+  content: '\e803';
+} /* '' */
+.str-chat__icon--close::before {
+  content: '\e804';
+} /* '' */
+.str-chat__icon--arrow-up::before {
+  content: '\e805';
+} /* '' */
+.str-chat__icon--chat-bubble::before {
+  content: '\e806';
+} /* '' */
+.str-chat__icon--pause::before {
+  content: '\e807';
+} /* '' */
+.str-chat__icon--download::before {
+  content: '\e808';
+} /* '' */
+.str-chat__icon--delivered::before {
+  content: '\e809';
+} /* '' */
+.str-chat__icon--play::before {
+  content: '\e80a';
+} /* '' */
+.str-chat__icon--reaction::before {
+  content: '\e80b';
+} /* '' */
+.str-chat__icon--error::before {
+  content: '\e80c';
+} /* '' */
+.str-chat__icon--read::before {
+  content: '\e80d';
+} /* '' */
+.str-chat__icon--retry::before {
+  content: '\e80e';
+} /* '' */
+.str-chat__icon--reply-in-thread::before {
+  content: '\e80f';
+} /* '' */
+.str-chat__icon--send::before {
+  content: '\e810';
+} /* '' */
+.str-chat__icon--attach::before {
+  content: '\e811';
+} /* '' */

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

@@ -0,0 +1,13 @@
+/* Only available in Angular v5+ */
+.str-chat {
+  /* The color of the icon, only available in Angular v5+ */
+  --str-chat-icon-color: var(--str-chat__text-color);
+}
+
+.str-chat__icon {
+  color: var(--str-chat-icon-color);
+}
+
+.str-chat__icon--error {
+  --str-chat-icon-color: var(--str-chat__danger-color);
+}

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

@@ -10,6 +10,7 @@
   height: 100%;
 
   .str-chat__image-carousel-stepper {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 30);
     padding: var(--str-chat__spacing-2_5);
     border: none;
     cursor: pointer;

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

@@ -20,6 +20,7 @@
 
 .str-chat__image-carousel {
   .str-chat__image-carousel-stepper {
+    --str-chat-icon-color: var(--str-chat__image-carousel-stepper-color);
     cursor: pointer;
 
     svg path {

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

@@ -1,10 +1,19 @@
-// todo: this is a copy of src/styles/LoadingIndicator.scss - find a shared folder for it
+.str-chat {
+  /* The size of the loading indicator, only available in Angular v5+ */
+  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 15);
+}
+
 .str-chat__loading-indicator {
   display: flex;
   align-items: center;
   justify-content: center;
   animation: rotate 1s linear infinite;
 
+  svg {
+    width: var(--str-chat__loading-indicator-size);
+    height: var(--str-chat__loading-indicator-size);
+  }
+
   @-webkit-keyframes rotate {
     from {
       -webkit-transform: rotate(0deg);

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

@@ -1,11 +1,13 @@
+.str-chat {
+  /* The color of the loading indicator */
+  --str-chat__loading-indicator-color: var(--str-chat__primary-color);
+}
+
 .str-chat__loading-indicator {
   svg {
     linearGradient {
       stop:last-child {
-        stop-color: var(
-          --str-chat__loading-indicator-color,
-          var(--str-chat__primary-color, #006cff)
-        );
+        stop-color: var(--str-chat__loading-indicator-color);
       }
     }
   }

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

@@ -29,6 +29,10 @@
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
   }
+
+  .str-chat__message-options {
+    --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7);
+  }
 }
 
 .str-chat__message.str-chat__message--has-attachment {
@@ -218,6 +222,7 @@
   }
 
   .str-chat__message-status {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
     @include utils.flex-row-center;
     column-gap: var(--str-chat__spacing-0_5);
     position: relative;
@@ -453,6 +458,7 @@
 }
 
 .str-chat__unread-messages-notification {
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
   position: absolute;
   top: 0.75rem;
   z-index: 2;

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

@@ -220,12 +220,15 @@
   }
 
   .str-chat__message-options {
+    --str-chat-icon-color: var(--str-chat__message-options-color);
+
     .str-chat__message-actions-box-button,
     .str-chat__message-reply-in-thread-button,
     .str-chat__message-reactions-button {
       // remove default button styles (React SDK uses button compared to div in Angular SDK)
       @include utils.button-reset;
       border-radius: var(--str-chat__message-options-border-radius);
+      color: var(--str-chat__message-options-color);
 
       .str-chat__message-action-icon path {
         fill: var(--str-chat__message-options-color);
@@ -272,6 +275,7 @@
   }
 
   .str-chat__message-status {
+    --str-chat-icon-color: var(--str-chat__message-status-color);
     color: var(--str-chat__message-status-color);
     font: var(--str-chat__body-text);
 
@@ -297,6 +301,7 @@
   }
 
   .str-chat__message-error-icon {
+    --str-chat-icon-color: var(--str-chat__message-error-message-color);
     /* stylelint-disable-next-line selector-max-id */
     svg #background {
       fill: var(--str-chat__message-error-message-color);
@@ -393,6 +398,7 @@
 }
 
 .str-chat__unread-messages-notification {
+  --str-chat-icon-color: var(--str-chat__on-primary-color);
   background-color: var(--str-chat__text-low-emphasis-color);
   border-radius: 1.125rem;