stream-chat-react 11.11.0 → 11.12.1

package/dist/components/Attachment/Attachment.d.ts

@@ -3,13 +3,14 @@ import type { ReactPlayerProps } from 'react-player';
 import type { Attachment as StreamAttachment } from 'stream-chat';
 import type { AttachmentActionsProps } from './AttachmentActions';
 import type { AudioProps } from './Audio';
+import type { VoiceRecordingProps } from './VoiceRecording';
 import type { CardProps } from './Card';
 import type { FileAttachmentProps } from './FileAttachment';
 import type { GalleryProps, ImageProps } from '../Gallery';
 import type { UnsupportedAttachmentProps } from './UnsupportedAttachment';
 import type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare const ATTACHMENT_GROUPS_ORDER: readonly ["card", "gallery", "image", "media", "audio", "file", "unsupported"];
+export declare const ATTACHMENT_GROUPS_ORDER: readonly ["card", "gallery", "image", "media", "audio", "voiceRecording", "file", "unsupported"];
 export type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/
     attachments: StreamAttachment<StreamChatGenerics>[];
@@ -27,10 +28,14 @@ export type AttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics
     Gallery?: React.ComponentType<GalleryProps<StreamChatGenerics>>;
     /** Custom UI component for displaying an image type attachment, defaults to and accepts same props as: [Image](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/Image.tsx) */
     Image?: React.ComponentType<ImageProps>;
+    /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */
+    isQuoted?: boolean;
     /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */
     Media?: React.ComponentType<ReactPlayerProps>;
     /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */
     UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;
+    /** Custom UI component for displaying an audio recording attachment, defaults to and accepts same props as: [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) */
+    VoiceRecording?: React.ComponentType<VoiceRecordingProps<StreamChatGenerics>>;
 };
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video

package/dist/components/Attachment/Attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAqBlE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAUnE,eAAO,MAAM,uBAAuB,gFAQ1B,CAAC;AAEX,MAAM,MAAM,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oJAAoJ;IACpJ,WAAW,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACpD,wJAAwJ;IACxJ,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,oOAAoO;IACpO,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpF,kNAAkN;IAClN,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D,8MAA8M;IAC9M,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACtC,wNAAwN;IACxN,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpE,8NAA8N;IAC9N,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAChE,+MAA+M;IAC/M,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,gHAAgH;IAChH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;CACzE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,qJAkBtB,CAAC"}
+{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAuBlE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC3D,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAWnE,eAAO,MAAM,uBAAuB,kGAS1B,CAAC;AAEX,MAAM,MAAM,eAAe,CACzB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,oJAAoJ;IACpJ,WAAW,EAAE,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACpD,wJAAwJ;IACxJ,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,oOAAoO;IACpO,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,sBAAsB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpF,kNAAkN;IAClN,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC5D,8MAA8M;IAC9M,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACtC,wNAAwN;IACxN,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC;IACpE,8NAA8N;IAC9N,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAChE,+MAA+M;IAC/M,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACxC,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gHAAgH;IAChH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;IACxE,yOAAyO;IACzO,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,CAAC,CAAC;CAC/E,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,qJAkBtB,CAAC"}

package/dist/components/Attachment/Attachment.js

@@ -1,13 +1,14 @@
 import { __assign, __rest, __spreadArray } from "tslib";
 import React, { useMemo } from 'react';
-import { isAudioAttachment, isFileAttachment, isMediaAttachment, isScrapedContent, isUploadedImage, } from './utils';
-import { AudioContainer, CardContainer, FileContainer, GalleryContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, } from './AttachmentContainer';
+import { isAudioAttachment, isFileAttachment, isMediaAttachment, isScrapedContent, isUploadedImage, isVoiceRecordingAttachment, } from './utils';
+import { AudioContainer, CardContainer, FileContainer, GalleryContainer, ImageContainer, MediaContainer, UnsupportedAttachmentContainer, VoiceRecordingContainer, } from './AttachmentContainer';
 var CONTAINER_MAP = {
     audio: AudioContainer,
     card: CardContainer,
     file: FileContainer,
     media: MediaContainer,
     unsupported: UnsupportedAttachmentContainer,
+    voiceRecording: VoiceRecordingContainer,
 };
 export var ATTACHMENT_GROUPS_ORDER = [
     'card',
@@ -15,6 +16,7 @@ export var ATTACHMENT_GROUPS_ORDER = [
     'image',
     'media',
     'audio',
+    'voiceRecording',
     'file',
     'unsupported',
 ];
@@ -50,6 +52,7 @@ var renderGroupedAttachments = function (_a) {
         image: [],
         // eslint-disable-next-line sort-keys
         gallery: [],
+        voiceRecording: [],
     });
     if (uploadedImages.length > 1) {
         containers['gallery'] = [
@@ -76,6 +79,9 @@ var getAttachmentType = function (attachment) {
     else if (isAudioAttachment(attachment)) {
         return 'audio';
     }
+    else if (isVoiceRecordingAttachment(attachment)) {
+        return 'voiceRecording';
+    }
     else if (isFileAttachment(attachment)) {
         return 'file';
     }

package/dist/components/Attachment/AttachmentContainer.d.ts

@@ -8,6 +8,7 @@ export declare const ImageContainer: <StreamChatGenerics extends DefaultStreamCh
 export declare const CardContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const FileContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, File, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element | null;
 export declare const AudioContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Audio, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const VoiceRecordingContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, VoiceRecording, isQuoted, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const MediaContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 export declare const UnsupportedAttachmentContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, UnsupportedAttachment, }: RenderAttachmentProps<StreamChatGenerics>) => React.JSX.Element;
 //# sourceMappingURL=AttachmentContainer.d.ts.map

package/dist/components/Attachment/AttachmentContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAYpF,OAAO,EACL,wBAAwB,EAGxB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAIjB,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,yBAAyB,0NA+BrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,8MAkBtC,CAAC;AAqBF,eAAO,MAAM,gBAAgB,2KAwC5B,CAAC;AAEF,eAAO,MAAM,cAAc,2JA0C1B,CAAC;AAEF,eAAO,MAAM,aAAa,2JAwBzB,CAAC;AAEF,eAAO,MAAM,aAAa,kLAazB,CAAC;AACF,eAAO,MAAM,cAAc,4KAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,2JAwD1B,CAAC;AAEF,eAAO,MAAM,8BAA8B,4LAS1C,CAAC"}
+{"version":3,"file":"AttachmentContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAapF,OAAO,EACL,wBAAwB,EAGxB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAIjB,OAAO,KAAK,EACV,yBAAyB,EAG1B,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,yBAAyB,0NA+BrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,8MAkBtC,CAAC;AAqBF,eAAO,MAAM,gBAAgB,2KAwC5B,CAAC;AAEF,eAAO,MAAM,cAAc,2JA0C1B,CAAC;AAEF,eAAO,MAAM,aAAa,2JAwBzB,CAAC;AAEF,eAAO,MAAM,aAAa,kLAazB,CAAC;AACF,eAAO,MAAM,cAAc,4KAW1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+LAYnC,CAAC;AAEF,eAAO,MAAM,cAAc,2JAwD1B,CAAC;AAEF,eAAO,MAAM,8BAA8B,4LAS1C,CAAC"}

package/dist/components/Attachment/AttachmentContainer.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import * as linkify from 'linkifyjs';
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
+import { VoiceRecording as DefaultVoiceRecording } from './VoiceRecording';
 import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
 import { Card as DefaultCard } from './Card';
 import { FileAttachment as DefaultFile } from './FileAttachment';
@@ -128,6 +129,12 @@ export var AudioContainer = function (_a) {
         React.createElement("div", { className: 'str-chat__attachment' },
             React.createElement(Audio, { og: attachment }))));
 };
+export var VoiceRecordingContainer = function (_a) {
+    var attachment = _a.attachment, _b = _a.VoiceRecording, VoiceRecording = _b === void 0 ? DefaultVoiceRecording : _b, isQuoted = _a.isQuoted;
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'voiceRecording' },
+        React.createElement("div", { className: 'str-chat__attachment' },
+            React.createElement(VoiceRecording, { attachment: attachment, isQuoted: isQuoted }))));
+};
 export var MediaContainer = function (props) {
     var _a;
     var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;

package/dist/components/Attachment/Audio.d.ts

@@ -4,18 +4,8 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 export type AudioProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     og: Attachment<StreamChatGenerics>;
 };
-type PlayButtonProps = {
-    isPlaying: boolean;
-    onClick: () => void;
-};
-export declare const PlayButton: ({ isPlaying, onClick }: PlayButtonProps) => React.JSX.Element;
-type ProgressBarProps = {
-    progress: number;
-} & Pick<React.ComponentProps<'div'>, 'onClick'>;
-export declare const ProgressBar: ({ onClick, progress }: ProgressBarProps) => React.JSX.Element;
 /**
  * Audio attachment with play/pause button and progress bar
  */
 export declare const Audio: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AudioProps<StreamChatGenerics>) => React.JSX.Element;
-export {};
 //# sourceMappingURL=Audio.d.ts.map

package/dist/components/Attachment/Audio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Audio.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Audio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAU9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,EAAE,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CACpC,CAAC;AA+DF,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,2BAA4B,eAAe,sBAQjE,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAEjD,eAAO,MAAM,WAAW,0BAA2B,gBAAgB,sBAsBlE,CAAC;AA2CF;;GAEG;AACH,eAAO,MAAM,KAAK,gJAAwD,CAAC"}
+{"version":3,"file":"Audio.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Audio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,EAAE,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CACpC,CAAC;AAwGF;;GAEG;AACH,eAAO,MAAM,KAAK,gJAAwD,CAAC"}

package/dist/components/Attachment/Audio.js

@@ -1,8 +1,6 @@
 import { __assign } from "tslib";
 import React from 'react';
-import { PauseIcon, PlayTriangleIcon } from './icons';
-import { FileSizeIndicator } from './FileSizeIndicator';
-import { DownloadButton } from './DownloadButton';
+import { DownloadButton, FileSizeIndicator, PlayButton, ProgressBar } from './components';
 import { useAudioController } from './hooks/useAudioController';
 import { useChatContext } from '../../context/ChatContext';
 var AudioV1 = function (_a) {
@@ -27,17 +25,6 @@ var AudioV1 = function (_a) {
                 React.createElement("div", { className: 'str-chat__audio__content--progress' },
                     React.createElement("div", { "data-progress": progress, "data-testid": 'audio-progress', role: 'progressbar', style: { width: "".concat(progress, "%") } }))))));
 };
-export var PlayButton = function (_a) {
-    var isPlaying = _a.isPlaying, onClick = _a.onClick;
-    return (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));
-};
-export var ProgressBar = function (_a) {
-    var onClick = _a.onClick, progress = _a.progress;
-    return (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
-            background: "linear-gradient(\n\t\t to right,\n\t\t var(--str-chat__primary-color),\n\t\t var(--str-chat__primary-color) ".concat(progress, "%,\n\t\t var(--str-chat__disabled-color) ").concat(progress, "%,\n\t\t var(--str-chat__disabled-color)\n\t  )"),
-        } },
-        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: "".concat(progress, "px") } })));
-};
 var AudioV2 = function (_a) {
     var og = _a.og;
     var asset_url = og.asset_url, file_size = og.file_size, title = og.title;

package/dist/components/Attachment/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAU9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA2MrD,eAAO,MAAM,SAAS,gFAEnB,UAAU,sBA8BZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAQ5D;;GAEG;AACH,eAAO,MAAM,IAAI,UATc,SAAS,sBAS+B,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWrC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AA2MrD,eAAO,MAAM,SAAS,gFAEnB,UAAU,sBA8BZ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAQ5D;;GAEG;AACH,eAAO,MAAM,IAAI,UATc,SAAS,sBAS+B,CAAC"}

package/dist/components/Attachment/Card.js

@@ -2,9 +2,9 @@ import { __assign } from "tslib";
 import React from 'react';
 import clsx from 'clsx';
 import ReactPlayer from 'react-player';
-import { PlayButton, ProgressBar } from './Audio';
 import { ImageComponent } from '../Gallery';
 import { SafeAnchor } from '../SafeAnchor';
+import { PlayButton, ProgressBar } from './components';
 import { useAudioController } from './hooks/useAudioController';
 import { useChatContext } from '../../context/ChatContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';

package/dist/components/Attachment/FileAttachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileAttachment.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/FileAttachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAmDF,eAAO,MAAM,cAAc,mKAES,CAAC"}
+{"version":3,"file":"FileAttachment.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/FileAttachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAO9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAmDF,eAAO,MAAM,cAAc,mKAES,CAAC"}

package/dist/components/Attachment/FileAttachment.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FileIcon } from '../ReactFileUtilities';
-import { DownloadButton } from './DownloadButton';
-import { FileSizeIndicator } from './FileSizeIndicator';
+import { DownloadButton, FileSizeIndicator } from './components';
 import { SafeAnchor } from '../SafeAnchor/SafeAnchor';
 import { useChatContext } from '../../context/ChatContext';
 var UnMemoizedFileAttachmentV1 = function (_a) {

package/dist/components/Attachment/VoiceRecording.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Attachment } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types';
+export type VoiceRecordingPlayerProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'> & {
+    /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
+    playbackRates?: number[];
+};
+export declare const VoiceRecordingPlayer: ({ attachment, playbackRates }: VoiceRecordingPlayerProps) => React.JSX.Element | null;
+export type QuotedVoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<VoiceRecordingProps<StreamChatGenerics>, 'attachment'>;
+export declare const QuotedVoiceRecording: ({ attachment }: QuotedVoiceRecordingProps) => React.JSX.Element;
+export type VoiceRecordingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    /** The attachment object from the message's attachment list. */
+    attachment: Attachment<StreamChatGenerics>;
+    /** A boolean flag to signal whether the attachment will be rendered inside the quoted reply. */
+    isQuoted?: boolean;
+};
+export declare const VoiceRecording: ({ attachment, isQuoted }: VoiceRecordingProps) => React.JSX.Element;
+//# sourceMappingURL=VoiceRecording.d.ts.map

package/dist/components/Attachment/VoiceRecording.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecording.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/VoiceRecording.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,GAAG;IAChE,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kCAAmC,yBAAyB,6BA8D5F,CAAC;AAEF,MAAM,MAAM,yBAAyB,CACnC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,CAAC,EAAE,YAAY,CAAC,CAAC;AAEhE,eAAO,MAAM,oBAAoB,mBAAoB,yBAAyB,sBA4B7E,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,gEAAgE;IAChE,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAC3C,gGAAgG;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,cAAc,6BAA8B,mBAAmB,sBAKzE,CAAC"}

package/dist/components/Attachment/VoiceRecording.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { FileSizeIndicator, PlaybackRateButton, PlayButton, WaveProgressBar } from './components';
+import { useAudioController } from './hooks/useAudioController';
+import { displayDuration } from './utils';
+import { FileIcon } from '../ReactFileUtilities';
+import { useTranslationContext } from '../../context';
+var rootClassName = 'str-chat__message-attachment__voice-recording-widget';
+export var VoiceRecordingPlayer = function (_a) {
+    var attachment = _a.attachment, playbackRates = _a.playbackRates;
+    var t = useTranslationContext('VoiceRecordingPlayer').t;
+    var asset_url = attachment.asset_url, duration = attachment.duration, mime_type = attachment.mime_type, _b = attachment.title, title = _b === void 0 ? t('Voice message') : _b, waveform_data = attachment.waveform_data;
+    var _c = useAudioController({
+        durationSeconds: duration !== null && duration !== void 0 ? duration : 0,
+        playbackRates: playbackRates,
+    }), audioRef = _c.audioRef, increasePlaybackRate = _c.increasePlaybackRate, isPlaying = _c.isPlaying, playbackRate = _c.playbackRate, progress = _c.progress, secondsElapsed = _c.secondsElapsed, seek = _c.seek, togglePlay = _c.togglePlay;
+    if (!asset_url)
+        return null;
+    return (React.createElement("div", { className: rootClassName, "data-testid": 'voice-recording-widget' },
+        React.createElement("audio", { ref: audioRef },
+            React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: mime_type })),
+        React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay }),
+        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__metadata' },
+            React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__title', "data-testid": 'voice-recording-title', title: title }, title),
+            React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__audio-state' },
+                React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, attachment.duration ? (displayDuration(secondsElapsed)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))),
+                React.createElement(WaveProgressBar, { progress: progress, seek: seek, waveformData: waveform_data || [] }))),
+        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__right-section' }, isPlaying ? (React.createElement(PlaybackRateButton, { disabled: !audioRef.current, onClick: increasePlaybackRate },
+            playbackRate.toFixed(1),
+            "x")) : (React.createElement(FileIcon, { big: true, mimeType: mime_type, size: 40, version: '2' })))));
+};
+export var QuotedVoiceRecording = function (_a) {
+    var attachment = _a.attachment;
+    var t = useTranslationContext().t;
+    var title = attachment.title || t('Voice message');
+    return (React.createElement("div", { className: rootClassName, "data-testid": 'quoted-voice-recording-widget' },
+        React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__metadata' },
+            title && (React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__title', "data-testid": 'voice-recording-title', title: title }, title)),
+            React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__audio-state' },
+                React.createElement("div", { className: 'str-chat__message-attachment__voice-recording-widget__timer' }, attachment.duration ? (displayDuration(attachment.duration)) : (React.createElement(FileSizeIndicator, { fileSize: attachment.file_size, maximumFractionDigits: 0 }))))),
+        React.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 34, version: '2' })));
+};
+export var VoiceRecording = function (_a) {
+    var attachment = _a.attachment, isQuoted = _a.isQuoted;
+    return isQuoted ? (React.createElement(QuotedVoiceRecording, { attachment: attachment })) : (React.createElement(VoiceRecordingPlayer, { attachment: attachment }));
+};

package/dist/components/Attachment/components/DownloadButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/DownloadButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,sBAS/D,CAAC"}

package/dist/components/Attachment/{DownloadButton.js → components/DownloadButton.js}

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DownloadIcon } from './icons';
-import { SafeAnchor } from '../SafeAnchor';
+import { DownloadIcon } from '../icons';
+import { SafeAnchor } from '../../SafeAnchor';
 export var DownloadButton = function (_a) {
     var assetUrl = _a.assetUrl;
     return (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-file--item-download', download: true, href: assetUrl, target: '_blank' },

package/dist/components/Attachment/components/FileSizeIndicator.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type FileSizeIndicatorProps = {
+    /** file size in byte */
+    fileSize?: number;
+    /**
+     The maximum number of fraction digits to display. If not set, the default behavior is to round to 3 significant digits.
+     @default undefined
+     */
+    maximumFractionDigits?: number;
+};
+export declare const FileSizeIndicator: ({ fileSize, maximumFractionDigits }: FileSizeIndicatorProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=FileSizeIndicator.d.ts.map

package/dist/components/Attachment/components/FileSizeIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileSizeIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/FileSizeIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,sBAAsB,GAAG;IAC5B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,wCAAyC,sBAAsB,6BAW5F,CAAC"}

package/dist/components/Attachment/{FileSizeIndicator.js → components/FileSizeIndicator.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import prettybytes from 'pretty-bytes';
 export var FileSizeIndicator = function (_a) {
-    var fileSize = _a.fileSize;
+    var fileSize = _a.fileSize, maximumFractionDigits = _a.maximumFractionDigits;
     if (!(fileSize && Number.isFinite(Number(fileSize))))
         return null;
-    return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size' }, prettybytes(fileSize)));
+    return (React.createElement("span", { className: 'str-chat__message-attachment-file--item-size', "data-testid": 'file-size-indicator' }, prettybytes(fileSize, { maximumFractionDigits: maximumFractionDigits })));
 };

package/dist/components/Attachment/components/PlayButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type PlayButtonProps = {
+    isPlaying: boolean;
+    onClick: () => void;
+};
+export declare const PlayButton: ({ isPlaying, onClick }: PlayButtonProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=PlayButton.d.ts.map

package/dist/components/Attachment/components/PlayButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlayButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/PlayButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,2BAA4B,eAAe,sBAQjE,CAAC"}

package/dist/components/Attachment/components/PlayButton.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PauseIcon, PlayTriangleIcon } from '../icons';
+export var PlayButton = function (_a) {
+    var isPlaying = _a.isPlaying, onClick = _a.onClick;
+    return (React.createElement("button", { className: 'str-chat__message-attachment-audio-widget--play-button', "data-testid": isPlaying ? 'pause-audio' : 'play-audio', onClick: onClick }, isPlaying ? React.createElement(PauseIcon, null) : React.createElement(PlayTriangleIcon, null)));
+};

package/dist/components/Attachment/components/PlaybackRateButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type PlaybackRateButtonProps = React.ComponentProps<'button'>;
+export declare const PlaybackRateButton: ({ children, onClick }: PlaybackRateButtonProps) => React.JSX.Element;
+//# sourceMappingURL=PlaybackRateButton.d.ts.map

package/dist/components/Attachment/components/PlaybackRateButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaybackRateButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/PlaybackRateButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAErE,eAAO,MAAM,kBAAkB,0BAA2B,uBAAuB,sBAQhF,CAAC"}

package/dist/components/Attachment/components/PlaybackRateButton.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var PlaybackRateButton = function (_a) {
+    var children = _a.children, onClick = _a.onClick;
+    return (React.createElement("button", { className: 'str-chat__message_attachment__playback-rate-button', "data-testid": 'playback-rate-button', onClick: onClick }, children));
+};

package/dist/components/Attachment/components/ProgressBar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ProgressBarProps = {
+    /** Progress expressed in fractional number value btw 0 and 100. */
+    progress: number;
+} & Pick<React.ComponentProps<'div'>, 'onClick'>;
+export declare const ProgressBar: ({ onClick, progress }: ProgressBarProps) => React.JSX.Element;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/components/Attachment/components/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mEAAmE;IACnE,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAEjD,eAAO,MAAM,WAAW,0BAA2B,gBAAgB,sBAkBlE,CAAC"}

package/dist/components/Attachment/components/ProgressBar.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export var ProgressBar = function (_a) {
+    var onClick = _a.onClick, progress = _a.progress;
+    return (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-track', "data-progress": progress, "data-testid": 'audio-progress', onClick: onClick, role: 'progressbar', style: {
+            '--str-chat__message-attachment-audio-widget-progress': progress + '%',
+        } },
+        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--progress-slider', style: { left: "".concat(progress, "px") } })));
+};

package/dist/components/Attachment/components/WaveProgressBar.d.ts

@@ -0,0 +1,22 @@
+import React, { MouseEventHandler } from 'react';
+type WaveProgressBarProps = {
+    /** Function that allows to change the track progress */
+    seek: MouseEventHandler<HTMLDivElement>;
+    /** The array of fractional number values between 0 and 1 representing the height of amplitudes */
+    waveformData: number[];
+    /** Allows to specify the number of bars into which the original waveformData array should be resampled */
+    amplitudesCount?: number;
+    /** Progress expressed in fractional number value btw 0 and 100. */
+    progress?: number;
+};
+export declare const WaveProgressBar: ({ amplitudesCount, progress, seek, waveformData, }: WaveProgressBarProps) => React.JSX.Element | null;
+/**
+ * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+ * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+ * @param data
+ * @param targetOutputSize
+ */
+export declare function downSample(data: number[], targetOutputSize: number): number[];
+export declare const upSample: (values: number[], targetSize: number) => number[];
+export {};
+//# sourceMappingURL=WaveProgressBar.d.ts.map

package/dist/components/Attachment/components/WaveProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaveProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/WaveProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAA6B,MAAM,OAAO,CAAC;AAI5E,KAAK,oBAAoB,GAAG;IAC1B,wDAAwD;IACxD,IAAI,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACxC,kGAAkG;IAClG,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,0GAA0G;IAC1G,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,eAAO,MAAM,eAAe,uDAKzB,oBAAoB,6BAqEtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,gBAAgB,EAAE,MAAM,GAAG,MAAM,EAAE,CAoD7E;AAoBD,eAAO,MAAM,QAAQ,WAAY,MAAM,EAAE,cAAc,MAAM,aAsB5D,CAAC"}

package/dist/components/Attachment/components/WaveProgressBar.js

@@ -0,0 +1,121 @@
+import React, { useMemo, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { divMod } from '../utils';
+export var WaveProgressBar = function (_a) {
+    var _b = _a.amplitudesCount, amplitudesCount = _b === void 0 ? 40 : _b, _c = _a.progress, progress = _c === void 0 ? 0 : _c, seek = _a.seek, waveformData = _a.waveformData;
+    var _d = useState(null), progressIndicator = _d[0], setProgressIndicator = _d[1];
+    var isDragging = useRef(false);
+    var handleMouseDown = function () {
+        if (!progressIndicator)
+            return;
+        isDragging.current = true;
+        progressIndicator.style.cursor = 'grabbing';
+    };
+    var handleMouseMove = function (event) {
+        if (!isDragging.current)
+            return;
+        seek(event);
+    };
+    var handleMouseUp = function () {
+        if (!progressIndicator)
+            return;
+        isDragging.current = false;
+        progressIndicator.style.removeProperty('cursor');
+    };
+    var resampledWaveformData = useMemo(function () {
+        return waveformData.length === amplitudesCount
+            ? waveformData
+            : waveformData.length > amplitudesCount
+                ? downSample(waveformData, amplitudesCount)
+                : upSample(waveformData, amplitudesCount);
+    }, [amplitudesCount, waveformData]);
+    if (!waveformData.length)
+        return null;
+    return (React.createElement("div", { className: 'str-chat__wave-progress-bar__track', "data-testid": 'wave-progress-bar-track', onClick: seek, onMouseDown: handleMouseDown, onMouseLeave: handleMouseUp, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, role: 'progressbar' },
+        resampledWaveformData.map(function (amplitude, i) {
+            var _a;
+            return (React.createElement("div", { className: clsx('str-chat__wave-progress-bar__amplitude-bar', (_a = {},
+                    _a['str-chat__wave-progress-bar__amplitude-bar--active'] = progress > (i / resampledWaveformData.length) * 100,
+                    _a)), "data-testid": 'amplitude-bar', key: "amplitude-".concat(i), style: {
+                    '--str-chat__wave-progress-bar__amplitude-bar-height': amplitude
+                        ? amplitude * 100 + '%'
+                        : '0%',
+                } }));
+        }),
+        React.createElement("div", { className: 'str-chat__wave-progress-bar__progress-indicator', "data-testid": 'wave-progress-bar-progress-indicator', ref: setProgressIndicator, style: { left: "".concat(progress < 0 ? 0 : progress > 100 ? 100 : progress, "%") } })));
+};
+/**
+ * The downSample function uses the Largest-Triangle-Three-Buckets (LTTB) algorithm.
+ * See the thesis Downsampling Time Series for Visual Representation by Sveinn Steinarsson for more (https://skemman.is/bitstream/1946/15343/3/SS_MSthesis.pdf)
+ * @param data
+ * @param targetOutputSize
+ */
+export function downSample(data, targetOutputSize) {
+    if (data.length <= targetOutputSize || targetOutputSize === 0) {
+        return data;
+    }
+    if (targetOutputSize === 1)
+        return [mean(data)];
+    var result = [];
+    // bucket size adjusted due to the fact that the first and the last item in the original data array is kept in target output
+    var bucketSize = (data.length - 2) / (targetOutputSize - 2);
+    var lastSelectedPointIndex = 0;
+    result.push(data[lastSelectedPointIndex]); // Always add the first point
+    var maxAreaPoint, maxArea, triangleArea;
+    for (var bucketIndex = 1; bucketIndex < targetOutputSize - 1; bucketIndex++) {
+        var previousBucketRefPoint = data[lastSelectedPointIndex];
+        var nextBucketMean = getNextBucketMean(data, bucketIndex, bucketSize);
+        var currentBucketStartIndex = Math.floor((bucketIndex - 1) * bucketSize) + 1;
+        var nextBucketStartIndex = Math.floor(bucketIndex * bucketSize) + 1;
+        var countUnitsBetweenAtoC = 1 + nextBucketStartIndex - currentBucketStartIndex;
+        maxArea = triangleArea = -1;
+        for (var currentPointIndex = currentBucketStartIndex; currentPointIndex < nextBucketStartIndex; currentPointIndex++) {
+            var countUnitsBetweenAtoB = Math.abs(currentPointIndex - currentBucketStartIndex) + 1;
+            var countUnitsBetweenBtoC = countUnitsBetweenAtoC - countUnitsBetweenAtoB;
+            var currentPointValue = data[currentPointIndex];
+            triangleArea = triangleAreaHeron(triangleBase(Math.abs(previousBucketRefPoint - currentPointValue), countUnitsBetweenAtoB), triangleBase(Math.abs(currentPointValue - nextBucketMean), countUnitsBetweenBtoC), triangleBase(Math.abs(previousBucketRefPoint - nextBucketMean), countUnitsBetweenAtoC));
+            if (triangleArea > maxArea) {
+                maxArea = triangleArea;
+                maxAreaPoint = data[currentPointIndex];
+                lastSelectedPointIndex = currentPointIndex;
+            }
+        }
+        if (typeof maxAreaPoint !== 'undefined')
+            result.push(maxAreaPoint);
+    }
+    result.push(data[data.length - 1]); // Always add the last point
+    return result;
+}
+var triangleAreaHeron = function (a, b, c) {
+    var s = (a + b + c) / 2;
+    return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+};
+var triangleBase = function (a, b) { return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)); };
+var mean = function (values) { return values.reduce(function (acc, value) { return acc + value; }, 0) / values.length; };
+var getNextBucketMean = function (data, currentBucketIndex, bucketSize) {
+    var nextBucketStartIndex = Math.floor(currentBucketIndex * bucketSize) + 1;
+    var nextNextBucketStartIndex = Math.floor((currentBucketIndex + 1) * bucketSize) + 1;
+    nextNextBucketStartIndex =
+        nextNextBucketStartIndex < data.length ? nextNextBucketStartIndex : data.length;
+    return mean(data.slice(nextBucketStartIndex, nextNextBucketStartIndex));
+};
+export var upSample = function (values, targetSize) {
+    if (!values.length) {
+        console.warn('Cannot extend empty array of amplitudes.');
+        return values;
+    }
+    if (values.length > targetSize) {
+        console.warn('Requested to extend the waveformData that is longer than the target list size');
+        return values;
+    }
+    if (targetSize === values.length)
+        return values;
+    // eslint-disable-next-line prefer-const
+    var _a = divMod(targetSize, values.length), bucketSize = _a[0], remainder = _a[1];
+    var result = [];
+    for (var i = 0; i < values.length; i++) {
+        var extra = remainder && remainder-- ? 1 : 0;
+        result.push.apply(result, Array(bucketSize + extra).fill(values[i]));
+    }
+    return result;
+};

package/dist/components/Attachment/components/index.d.ts

@@ -0,0 +1,7 @@
+export * from './DownloadButton';
+export * from './FileSizeIndicator';
+export * from './ProgressBar';
+export * from './PlaybackRateButton';
+export * from './PlayButton';
+export * from './WaveProgressBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Attachment/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC"}

package/dist/components/Attachment/components/index.js

@@ -0,0 +1,6 @@
+export * from './DownloadButton';
+export * from './FileSizeIndicator';
+export * from './ProgressBar';
+export * from './PlaybackRateButton';
+export * from './PlayButton';
+export * from './WaveProgressBar';

package/dist/components/Attachment/hooks/useAudioController.d.ts

@@ -1,9 +1,19 @@
-export declare const PROGRESS_UPDATE_INTERVAL = 100;
-export declare const useAudioController: () => {
+export declare const elementIsPlaying: (audioElement: HTMLAudioElement | null) => boolean | null;
+type AudioControllerParams = {
+    /** Audio duration in seconds. */
+    durationSeconds?: number;
+    /** An array of fractional numeric values of playback speed to override the defaults (1.0, 1.5, 2.0) */
+    playbackRates?: number[];
+};
+export declare const useAudioController: ({ durationSeconds, playbackRates, }?: AudioControllerParams) => {
     audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+    increasePlaybackRate: () => void;
     isPlaying: boolean;
+    playbackRate: number;
     progress: number;
+    secondsElapsed: number;
     seek: import("react").MouseEventHandler<HTMLDivElement>;
     togglePlay: () => void;
 };
+export {};
 //# sourceMappingURL=useAudioController.d.ts.map

package/dist/components/Attachment/hooks/useAudioController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioController.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/hooks/useAudioController.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,eAAO,MAAM,kBAAkB;;;;;;CAuD9B,CAAC"}
+{"version":3,"file":"useAudioController.d.ts","sourceRoot":"","sources":["../../../../src/components/Attachment/hooks/useAudioController.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,iBAAkB,gBAAgB,GAAG,IAAI,mBACR,CAAC;AAI/D,KAAK,qBAAqB,GAAG;IAC3B,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uGAAuG;IACvG,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,yCAG5B,qBAAqB;;;;;;;;;CAmFvB,CAAC"}