stream-chat-react 11.13.1 → 11.15.0

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Window = require('./Window-44a85f63.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,8 +37,6 @@ require('dayjs/locale/pt');
 require('dayjs/locale/ru');
 require('dayjs/locale/tr');
 require('dayjs/locale/en');
-require('react-player');
-require('pretty-bytes');
 require('prop-types');
 require('@babel/runtime/helpers/extends');
 require('@babel/runtime/helpers/defineProperty');
@@ -1345,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.13.1';
+var version = '11.15.0';
 
 var useChat = function (_a) {
     var _b, _c;
@@ -1687,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;
@@ -1710,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;
@@ -1760,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;
@@ -1786,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;
@@ -1801,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;
@@ -1818,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;
@@ -1884,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;
@@ -1923,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

@@ -6,6 +6,12 @@
 
   /* The height of GIFs */
   --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+
+  /* The width of the amplitude bar of the voice recording wave data */
+  --str-chat__voice-recording-amplitude-bar-width: 2px;
+
+  /* The gap between amplitudes of the wave data of a voice recording */
+  --str-chat__voice-recording-amplitude-bar-gap-width: var(--str-chat__spacing-px);
 }
 
 .str-chat__attachment-list {
@@ -346,7 +352,7 @@
     grid-template-columns: 36px auto 55px;
     align-items: center;
     justify-content: center;
-    gap: calc(var(--str-chat__spacing-px) * 14);
+    gap: calc(var(--str-chat__spacing-px) * 9);
     padding: var(--str-chat__spacing-2);
     margin: var(--str-chat__attachment-margin);
 
@@ -357,6 +363,33 @@
       flex-direction: column;
       gap: var(--str-chat__spacing-2);
 
+      a {
+        cursor: pointer;
+        text-decoration: none;
+      }
+
+      .str-chat__message-attachment-voice-recording-widget--first-row {
+        @include utils.ellipsis-text-parent;
+
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--str-chat__spacing-1);
+      }
+
+      .str-chat__message-attachment__voice-recording-widget__title {
+        @include utils.ellipsis-text;
+        min-width: 0;
+      }
+
+      .str-chat__message-attachment-download-icon {
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 24);
+          height: calc(var(--str-chat__spacing-px) * 16);
+        }
+      }
+
       .str-chat__message-attachment__voice-recording-widget__audio-state {
         display: flex;
         align-items: center;
@@ -364,6 +397,13 @@
         gap: var(--str-chat__spacing-1_5);
         height: 100%;
       }
+
+      .str-chat__message-attachment__voice-recording-widget__error-message {
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        gap: var(--str-chat__spacing-1);
+      }
     }
 
     .str-chat__message-attachment__voice-recording-widget__right-section {
@@ -375,26 +415,33 @@
       width: calc(var(--str-chat__spacing-px) * 45);
     }
 
+    stream-voice-recording-wavebar {
+      flex: 1;
+    }
+
     .str-chat__wave-progress-bar__track {
       $min_amplitude_height: 2px;
       position: relative;
       flex: 1;
-      width: 120px;
+      width: 100%;
       height: calc(var(--str-chat__spacing-px) * 25);
       display: flex;
       align-items: center;
-      gap: var(--str-chat__spacing-px);
+      justify-content: space-between;
+      gap: var(--str-chat__voice-recording-amplitude-bar-gap-width);
 
       .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
+        width: var(--str-chat__voice-recording-amplitude-bar-width);
+        min-width: var(--str-chat__voice-recording-amplitude-bar-width);
+        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);
+        height: calc(100% + #{$min_amplitude_height} + 2px);
         width: calc(var(--str-chat__spacing-px) * 6);
       }
     }
@@ -463,7 +510,8 @@
   }
 
   /* Angular has different UI here, the download icon is too small to use on mobile */
-  .str-chat-angular__message-attachment-file-single {
+  .str-chat-angular__message-attachment-file-single
+    .str-chat__message-attachment-file--item-first-row {
     cursor: pointer;
     text-decoration: none;
   }

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

@@ -179,10 +179,14 @@
   --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);
+  --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);
+  --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;
@@ -346,7 +350,7 @@
   .str-chat__message-attachment-audio-widget--progress-track {
     background: linear-gradient(
       to right,
-      var(--str-chat__primary-color)  var(--str-chat__message-attachment-audio-widget-progress),
+      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);
@@ -365,6 +369,10 @@
   .str-chat__message-attachment__voice-recording-widget {
     @include utils.component-layer-overrides('voice-recording-attachment-widget');
 
+    a {
+      color: var(--str-chat__voice-recording-attachment-widget-color);
+    }
+
     .str-chat__message-attachment__voice-recording-widget__title {
       @include utils.ellipsis-text;
       font: var(--str-chat__subtitle-medium-text);
@@ -391,6 +399,11 @@
       border: 1px solid var(--str-chat__secondary-overlay-color);
       cursor: grab;
     }
+
+    .str-chat__message-attachment__voice-recording-widget__error-message {
+      font: var(--str-chat__body-text);
+      color: var(--str-chat__text-low-emphasis-color);
+    }
   }
 
   .str-chat__message_attachment__playback-rate-button {
@@ -468,4 +481,9 @@
     border-end-start-radius: 0;
     border-end-end-radius: 0;
   }
-}
+}
+
+.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/ImageCarousel/ImageCarousel-layout.scss

@@ -1,11 +1,13 @@
 .str-chat__image-carousel {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
   min-height: 0;
   min-width: 0;
   max-width: 100%;
   max-height: 100%;
+  height: 100%;
 
   .str-chat__image-carousel-stepper {
     padding: var(--str-chat__spacing-2_5);
@@ -15,11 +17,13 @@
   }
 
   .str-chat__image-carousel-image {
-    object-fit: cover;
+    object-fit: contain;
     min-height: 0;
     max-height: 100%;
     min-width: 0;
     max-width: 100%;
+    height: 100%;
+    width: 100%;
   }
 }
 
@@ -29,6 +33,11 @@
       .str-chat__modal__inner {
         height: 80%;
         width: 80%;
+
+        @media only screen and (max-device-width: 768px) {
+          height: 100%;
+          width: 100%;
+        }
       }
     }
   }

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

@@ -6,8 +6,22 @@
   --str-chat__image-carousel-stepper-color: var(--str-chat__text-color);
 }
 
+@media only screen and (max-device-width: 768px) {
+  .str-chat__message {
+    .str-chat__attachment-list {
+      .str-chat__modal--open {
+        .str-chat__modal__inner {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+}
+
 .str-chat__image-carousel {
   .str-chat__image-carousel-stepper {
+    cursor: pointer;
+
     svg path {
       fill: var(--str-chat__image-carousel-stepper-color);
     }

package/dist/scss/v2/_global-theme-variables.scss

@@ -19,43 +19,43 @@
     Cantarell, Helvetica Neue, sans-serif;
 
   /* The font used for caption texts */
-  --str-chat__caption-text: 0.75rem/1rem var(--str-chat__font-family);
+  --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family);
 
   /* The font used for caption texts with emphasize */
-  --str-chat__caption-medium-text: 500 0.75rem/1rem var(--str-chat__font-family);
+  --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
 
   /* The font used for caption texts with emphasize */
-  --str-chat__caption-strong-text: 700 0.75rem/1rem var(--str-chat__font-family);
+  --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
 
   /* The font used for body texts */
-  --str-chat__body-text: 0.875rem/1rem var(--str-chat__font-family);
+  --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
 
   /* The font used for body texts with emphasize */
-  --str-chat__body-medium-text: 500 0.875rem/1rem var(--str-chat__font-family);
+  --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
 
   /* The font used for body texts */
-  --str-chat__body2-text: 0.9375rem/1rem var(--str-chat__font-family);
+  --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
 
   /* The font used for body texts with emphasize */
-  --str-chat__body2-medium-text: 500 0.9375rem/1rem var(--str-chat__font-family);
+  --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
 
   /* The font used for subtitle texts */
-  --str-chat__subtitle-text: 1rem/1.25rem var(--str-chat__font-family);
+  --str-chat__subtitle-text: 1rem/1.1.25 var(--str-chat__font-family);
 
   /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle-medium-text: 500 1rem/1.25rem var(--str-chat__font-family);
+  --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
 
   /* The font used for subtitle texts */
-  --str-chat__subtitle2-text: 1.25rem/1.5rem var(--str-chat__font-family);
+  --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
 
   /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-chat__font-family);
+  --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
 
   /* The font used for headline texts */
-  --str-chat__headline-text: 1.5rem/1.5rem var(--str-chat__font-family);
+  --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
 
   /* The font used for headline texts */
-  --str-chat__headline2-text: 1.8rem/1.8rem var(--str-chat__font-family);
+  --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family);
 }
 
 .str-chat,

package/dist/utils/mergeDeep.d.ts

@@ -0,0 +1,4 @@
+import { UR } from 'stream-chat';
+export declare const mergeDeep: <TObject extends UR, TSource extends UR>(target: TObject, source: TSource) => TObject & TSource;
+export declare const mergeDeepUndefined: <TObject extends UR, TSource extends UR>(target: TObject, source: TSource) => TObject & TSource;
+//# sourceMappingURL=mergeDeep.d.ts.map

package/dist/utils/mergeDeep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeDeep.d.ts","sourceRoot":"","sources":["../../src/utils/mergeDeep.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,eAAO,MAAM,SAAS,iGAG8C,CAAC;AAIrE,eAAO,MAAM,kBAAkB,iGAGwC,CAAC"}

package/dist/utils/mergeDeep.js

@@ -0,0 +1,5 @@
+import mergeWith from 'lodash.mergewith';
+var overrideEverything = function (_, source) { return source; };
+export var mergeDeep = function (target, source) { return mergeWith(target, source, overrideEverything); };
+var overrideUndefinedOnly = function (object, source) { return object !== null && object !== void 0 ? object : source; };
+export var mergeDeepUndefined = function (target, source) { return mergeWith(target, source, overrideUndefinedOnly); };

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "11.13.1";
+export declare const version = "11.15.0";
 //# sourceMappingURL=version.d.ts.map

package/dist/version.js

@@ -1 +1 @@
-export var version = '11.13.1';
+export var version = '11.15.0';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "11.13.1",
+  "version": "11.15.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -61,21 +61,23 @@
   "dependencies": {
     "@babel/runtime": "^7.23.6",
     "@braintree/sanitize-url": "^6.0.4",
+    "@breezystack/lamejs": "^1.2.7",
     "@popperjs/core": "^2.11.5",
     "@react-aria/focus": "^3",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
     "emoji-regex": "^9.2.0",
+    "fix-webm-duration": "^1.0.5",
     "hast-util-find-and-replace": "^5.0.1",
     "i18next": "^21.6.14",
     "isomorphic-ws": "^4.0.1",
     "linkifyjs": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.1",
+    "lodash.mergewith": "^4.6.2",
     "lodash.throttle": "^4.1.1",
     "lodash.uniqby": "^4.7.0",
     "nanoid": "^3.3.4",
-    "pretty-bytes": "^5.4.1",
     "prop-types": "^15.7.2",
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
@@ -157,6 +159,7 @@
     "@types/linkifyjs": "^2.1.3",
     "@types/lodash.debounce": "^4.0.7",
     "@types/lodash.defaultsdeep": "^4.6.9",
+    "@types/lodash.mergewith": "^4.6.9",
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.uniqby": "^4.7.7",
     "@types/moment": "^2.13.0",
@@ -223,7 +226,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.21.0",
+    "stream-chat": "^8.25.1",
     "style-loader": "^2.0.0",
     "ts-jest": "^28.0.8",
     "typescript": "^4.7.4",

package/dist/components/MessageInput/hooks/useFileState.d.ts

@@ -1,7 +0,0 @@
-import type { FileUpload } from '../types';
-export declare const useFileState: <T extends Pick<FileUpload, "state">>(file: T) => {
-    failed: boolean;
-    finished: boolean;
-    uploading: boolean;
-};
-//# sourceMappingURL=useFileState.d.ts.map

package/dist/components/MessageInput/hooks/useFileState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useFileState.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/hooks/useFileState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,YAAY;;;;CAQtB,CAAC"}

package/dist/components/MessageInput/hooks/useFileState.js

@@ -1,8 +0,0 @@
-import { useMemo } from 'react';
-export var useFileState = function (file) {
-    return useMemo(function () { return ({
-        failed: file.state === 'failed',
-        finished: file.state === 'finished',
-        uploading: file.state === 'uploading',
-    }); }, [file.state]);
-};