stream-chat-react 9.3.0 → 10.0.0-theming-v2.1

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

@@ -0,0 +1,6 @@
+declare type DownloadButtonProps = {
+    assetUrl?: string;
+};
+export declare const DownloadButton: ({ assetUrl }: DownloadButtonProps) => JSX.Element;
+export {};
+//# sourceMappingURL=DownloadButton.d.ts.map

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

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

package/dist/components/Attachment/DownloadButton.js

@@ -0,0 +1,8 @@
+import React from 'react';
+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' },
+        React.createElement(DownloadIcon, { className: 'str-chat__message-attachment-download-icon' })));
+};

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

@@ -3,5 +3,5 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type FileAttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     attachment: Attachment<StreamChatGenerics>;
 };
-export declare const FileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: FileAttachmentProps<StreamChatGenerics>) => JSX.Element;
+export declare const FileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, }: FileAttachmentProps<StreamChatGenerics>) => JSX.Element;
 //# sourceMappingURL=FileAttachment.d.ts.map

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":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAwBF,eAAO,MAAM,cAAc,mJAES,CAAC"}
+{"version":3,"file":"FileAttachment.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/FileAttachment.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAQ9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,mBAAmB,CAC7B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAmDF,eAAO,MAAM,cAAc,6JAES,CAAC"}

package/dist/components/Attachment/FileAttachment.js

@@ -1,13 +1,30 @@
 import React from 'react';
-import prettybytes from 'pretty-bytes';
 import { FileIcon } from 'react-file-utils';
-import { SafeAnchor } from '../SafeAnchor';
-var UnMemoizedFileAttachment = function (props) {
-    var attachment = props.attachment;
+import { DownloadButton } from './DownloadButton';
+import { FileSizeIndicator } from './FileSizeIndicator';
+import { SafeAnchor } from '../SafeAnchor/SafeAnchor';
+import { useChatContext } from '../../context/ChatContext';
+var UnMemoizedFileAttachmentV1 = function (_a) {
+    var attachment = _a.attachment;
     return (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
-        React.createElement(FileIcon, { big: true, filename: attachment.title, mimeType: attachment.mime_type, size: 30 }),
+        React.createElement(FileIcon, { big: true, mimeType: attachment.mime_type, size: 30 }),
         React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
             React.createElement(SafeAnchor, { download: true, href: attachment.asset_url, target: '_blank' }, attachment.title),
-            attachment.file_size && Number.isFinite(Number(attachment.file_size)) && (React.createElement("span", null, prettybytes(attachment.file_size))))));
+            React.createElement(FileSizeIndicator, { fileSize: attachment.file_size }))));
+};
+var UnMemoizedFileAttachmentV2 = function (_a) {
+    var attachment = _a.attachment;
+    return (React.createElement("div", { className: 'str-chat__message-attachment-file--item', "data-testid": 'attachment-file' },
+        React.createElement(FileIcon, { className: 'str-chat__file-icon', mimeType: attachment.mime_type, version: '2' }),
+        React.createElement("div", { className: 'str-chat__message-attachment-file--item-text' },
+            React.createElement("div", { className: 'str-chat__message-attachment-file--item-first-row' },
+                React.createElement("div", { className: 'str-chat__message-attachment-file--item-name', "data-testid": 'file-title' }, attachment.title),
+                React.createElement(DownloadButton, { assetUrl: attachment.asset_url })),
+            React.createElement(FileSizeIndicator, { fileSize: attachment.file_size }))));
+};
+var UnMemoizedFileAttachment = function (_a) {
+    var attachment = _a.attachment;
+    var themeVersion = useChatContext('FileAttachment').themeVersion;
+    return themeVersion === '2' ? (React.createElement(UnMemoizedFileAttachmentV2, { attachment: attachment })) : (React.createElement(UnMemoizedFileAttachmentV1, { attachment: attachment }));
 };
 export var FileAttachment = React.memo(UnMemoizedFileAttachment);

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

@@ -0,0 +1,6 @@
+declare type FileSizeIndicatorProps = {
+    fileSize?: number;
+};
+export declare const FileSizeIndicator: ({ fileSize }: FileSizeIndicatorProps) => JSX.Element | null;
+export {};
+//# sourceMappingURL=FileSizeIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileSizeIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/FileSizeIndicator.tsx"],"names":[],"mappings":"AAGA,aAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,iBAAkB,sBAAsB,uBAMrE,CAAC"}

package/dist/components/Attachment/FileSizeIndicator.js

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

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

@@ -0,0 +1,9 @@
+export declare const PROGRESS_UPDATE_INTERVAL = 100;
+export declare const useAudioController: () => {
+    audioRef: import("react").MutableRefObject<HTMLAudioElement | null>;
+    isPlaying: boolean;
+    progress: number;
+    seek: import("react").MouseEventHandler<HTMLDivElement>;
+    togglePlay: () => void;
+};
+//# sourceMappingURL=useAudioController.d.ts.map

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

@@ -0,0 +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;;;;;;CAsD9B,CAAC"}

package/dist/components/Attachment/hooks/useAudioController.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+export var PROGRESS_UPDATE_INTERVAL = 100;
+export var useAudioController = function () {
+    var _a = useState(false), isPlaying = _a[0], setIsPlaying = _a[1];
+    var _b = useState(0), progress = _b[0], setProgress = _b[1];
+    var audioRef = useRef(null);
+    var togglePlay = useCallback(function () {
+        setIsPlaying(function (playing) { return !playing; });
+    }, []);
+    var seek = useCallback(function (_a) {
+        var clientX = _a.clientX, currentTarget = _a.currentTarget;
+        if (!audioRef.current)
+            return;
+        var _b = currentTarget.getBoundingClientRect(), width = _b.width, x = _b.x;
+        var ratio = (clientX - x) / width;
+        if (!isPlaying)
+            setProgress(ratio * 100);
+        audioRef.current.currentTime = ratio * audioRef.current.duration;
+    }, [isPlaying]);
+    useEffect(function () {
+        if (!audioRef.current || !isPlaying)
+            return;
+        var interval = window.setInterval(function () {
+            if (!audioRef.current)
+                return;
+            var _a = audioRef.current, currentTime = _a.currentTime, duration = _a.duration;
+            setProgress((currentTime / duration) * 100);
+            if (currentTime === duration)
+                setIsPlaying(false);
+        }, PROGRESS_UPDATE_INTERVAL);
+        audioRef.current.play();
+        return function () {
+            var _a;
+            (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+            window.clearInterval(interval);
+        };
+    }, [isPlaying]);
+    return {
+        audioRef: audioRef,
+        isPlaying: isPlaying,
+        progress: progress,
+        seek: seek,
+        togglePlay: togglePlay,
+    };
+};

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

@@ -0,0 +1,5 @@
+import type { IconProps } from '../../types/types';
+export declare const DownloadIcon: ({ className }: IconProps) => JSX.Element;
+export declare const PlayTriangleIcon: () => JSX.Element;
+export declare const PauseIcon: () => JSX.Element;
+//# sourceMappingURL=icons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/icons.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,eAAO,MAAM,YAAY,kBAAmB,SAAS,gBAepD,CAAC;AAEF,eAAO,MAAM,gBAAgB,mBAI5B,CAAC;AAEF,eAAO,MAAM,SAAS,mBAIrB,CAAC"}

package/dist/components/Attachment/icons.js

@@ -0,0 +1,10 @@
+import React from 'react';
+export var DownloadIcon = function (_a) {
+    var className = _a.className;
+    return (React.createElement("svg", { className: className, "data-testid": 'download', fill: 'none', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' },
+        React.createElement("path", { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z', fill: 'black' })));
+};
+export var PlayTriangleIcon = function () { return (React.createElement("svg", { fill: 'none', viewBox: '0 0 12 14', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M0.5 0V14L11.5 7L0.5 0Z', fill: '#080707' }))); };
+export var PauseIcon = function () { return (React.createElement("svg", { fill: 'none', viewBox: '0 0 12 14', xmlns: 'http://www.w3.org/2000/svg' },
+    React.createElement("path", { d: 'M0 14H4V0H0V14ZM8 0V14H12V0H8Z', fill: '#080707' }))); };

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

@@ -1,5 +1,6 @@
 export * from './Attachment';
 export * from './AttachmentActions';
+export * from './AttachmentContainer';
 export * from './Audio';
 export * from './Card';
 export * from './FileAttachment';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}

package/dist/components/Attachment/index.js

@@ -1,5 +1,6 @@
 export * from './Attachment';
 export * from './AttachmentActions';
+export * from './AttachmentContainer';
 export * from './Audio';
 export * from './Card';
 export * from './FileAttachment';

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

@@ -1,15 +1,18 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
+import type { ATTACHMENT_GROUPS_ORDER } from './Attachment';
 import type { Attachment } from 'stream-chat';
 import type { AttachmentProps } from './Attachment';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare const SUPPORTED_VIDEO_FORMATS: string[];
+export declare type AttachmentComponentType = typeof ATTACHMENT_GROUPS_ORDER[number];
+export declare type GroupedRenderedAttachment = Record<AttachmentComponentType, ReactNode[]>;
 export declare type GalleryAttachment<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     images: Attachment<StreamChatGenerics>[];
-    type: string;
+    type: 'gallery';
 };
 export declare type AttachmentContainerProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     attachment: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>;
-    componentType: string;
+    componentType: AttachmentComponentType;
 };
 export declare type RenderAttachmentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<AttachmentProps<StreamChatGenerics>, 'attachments'> & {
     attachment: Attachment<StreamChatGenerics>;
@@ -17,17 +20,50 @@ export declare type RenderAttachmentProps<StreamChatGenerics extends DefaultStre
 export declare type RenderGalleryProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Omit<AttachmentProps<StreamChatGenerics>, 'attachments'> & {
     attachment: GalleryAttachment<StreamChatGenerics>;
 };
+export declare const isScrapedContent: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => string | undefined;
+export declare const isUploadedImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
 export declare const isGalleryAttachmentType: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(output: Attachment<StreamChatGenerics> | GalleryAttachment<StreamChatGenerics>) => output is GalleryAttachment<StreamChatGenerics>;
 export declare const isAudioAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
 export declare const isFileAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean | "" | undefined;
-export declare const isImageAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
 export declare const isMediaAttachment: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(attachment: Attachment<StreamChatGenerics>) => boolean;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AttachmentWithinContainer`
+ */
 export declare const renderAttachmentWithinContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: React.PropsWithChildren<AttachmentContainerProps<StreamChatGenerics>>) => JSX.Element;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AttachmentActionsContainer`
+ */
 export declare const renderAttachmentActions: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element | null;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/GalleryContainer`
+ */
 export declare const renderGallery: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderGalleryProps<StreamChatGenerics>) => JSX.Element;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/ImageContainer`
+ */
 export declare const renderImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/CardContainer`
+ */
 export declare const renderCard: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/FileContainer`
+ */
 export declare const renderFile: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element | null;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AudioContainer`
+ */
 export declare const renderAudio: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/MediaContainer`
+ */
 export declare const renderMedia: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAUjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,uBAAuB,UAA8D,CAAC;AAEnG,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACzC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACnF,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,GAAG;IAC7D,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAEF,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,GAAG;IAC7D,UAAU,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,uBAAuB,uNAK8B,CAAC;AAEnE,eAAO,MAAM,iBAAiB,2IAIE,CAAC;AAEjC,eAAO,MAAM,gBAAgB,4JAQG,CAAC;AAEjC,eAAO,MAAM,iBAAiB,2IAIyD,CAAC;AAExF,eAAO,MAAM,iBAAiB,2IAMD,CAAC;AAE9B,eAAO,MAAM,+BAA+B,iLA8B3C,CAAC;AAEF,eAAO,MAAM,uBAAuB,4JAmBnC,CAAC;AAEF,eAAO,MAAM,aAAa,kJAYzB,CAAC;AAEF,eAAO,MAAM,WAAW,qJAyBvB,CAAC;AAEF,eAAO,MAAM,UAAU,qJAyBtB,CAAC;AAEF,eAAO,MAAM,UAAU,4JActB,CAAC;AAEF,eAAO,MAAM,WAAW,qJAgBvB,CAAC;AAEF,eAAO,MAAM,WAAW,qJA8CvB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAO5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,uBAAuB,UAA8D,CAAC;AAEnG,oBAAY,uBAAuB,GAAG,OAAO,uBAAuB,CAAC,MAAM,CAAC,CAAC;AAE7E,oBAAY,yBAAyB,GAAG,MAAM,CAAC,uBAAuB,EAAE,SAAS,EAAE,CAAC,CAAC;AAErF,oBAAY,iBAAiB,CAC3B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,MAAM,EAAE,UAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;IACzC,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,oBAAY,wBAAwB,CAClC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IACnF,aAAa,EAAE,uBAAuB,CAAC;CACxC,CAAC;AAEF,oBAAY,qBAAqB,CAC/B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,GAAG;IAC7D,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CAC5C,CAAC;AAEF,oBAAY,kBAAkB,CAC5B,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,EAAE,aAAa,CAAC,GAAG;IAC7D,UAAU,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,gBAAgB,sJAIyB,CAAC;AAEvD,eAAO,MAAM,eAAe,2IAIqC,CAAC;AAElE,eAAO,MAAM,uBAAuB,uNAI8C,CAAC;AAEnF,eAAO,MAAM,iBAAiB,2IAIE,CAAC;AAEjC,eAAO,MAAM,gBAAgB,4JAQG,CAAC;AAEjC,eAAO,MAAM,iBAAiB,2IAMD,CAAC;AAE9B;;;GAGG;AACH,eAAO,MAAM,+BAA+B,iLA0B3C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,4JAmBnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,kJAYzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,qJAyBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,qJAyBtB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,4JActB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,qJAgBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,qJA8CvB,CAAC"}

package/dist/components/Attachment/utils.js

@@ -11,16 +11,16 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import ReactPlayer from 'react-player';
-import { nanoid } from 'nanoid';
+import clsx from 'clsx';
 import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
 import { Audio as DefaultAudio } from './Audio';
 import { Card as DefaultCard } from './Card';
 import { FileAttachment as DefaultFile } from './FileAttachment';
 import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
 export var SUPPORTED_VIDEO_FORMATS = ['video/mp4', 'video/ogg', 'video/webm', 'video/quicktime'];
-export var isGalleryAttachmentType = function (output) {
-    return output.images != null;
-};
+export var isScrapedContent = function (attachment) { return attachment.og_scrape_url || attachment.title_link; };
+export var isUploadedImage = function (attachment) { return attachment.type === 'image' && !isScrapedContent(attachment); };
+export var isGalleryAttachmentType = function (output) { return Array.isArray(output.images); };
 export var isAudioAttachment = function (attachment) { return attachment.type === 'audio'; };
 export var isFileAttachment = function (attachment) {
     return attachment.type === 'file' ||
@@ -28,31 +28,51 @@ export var isFileAttachment = function (attachment) {
             SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) === -1 &&
             attachment.type !== 'video');
 };
-export var isImageAttachment = function (attachment) { return attachment.type === 'image' && !attachment.title_link && !attachment.og_scrape_url; };
 export var isMediaAttachment = function (attachment) {
     return (attachment.mime_type && SUPPORTED_VIDEO_FORMATS.indexOf(attachment.mime_type) !== -1) ||
         attachment.type === 'video';
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AttachmentWithinContainer`
+ */
 export var renderAttachmentWithinContainer = function (props) {
+    var _a;
+    var _b;
     var attachment = props.attachment, children = props.children, componentType = props.componentType;
+    var isGAT = isGalleryAttachmentType(attachment);
     var extra = '';
-    if (!isGalleryAttachmentType(attachment)) {
+    if (!isGAT) {
         extra =
             componentType === 'card' && !(attachment === null || attachment === void 0 ? void 0 : attachment.image_url) && !(attachment === null || attachment === void 0 ? void 0 : attachment.thumb_url)
                 ? 'no-image'
-                : attachment && attachment.actions && attachment.actions.length
+                : ((_b = attachment === null || attachment === void 0 ? void 0 : attachment.actions) === null || _b === void 0 ? void 0 : _b.length)
                     ? 'actions'
                     : '';
     }
-    return (React.createElement("div", { className: "str-chat__message-attachment str-chat__message-attachment--" + componentType + " str-chat__message-attachment--" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || '') + " str-chat__message-attachment--" + componentType + "--" + extra, key: (isGalleryAttachmentType(attachment) ? '' : (attachment === null || attachment === void 0 ? void 0 : attachment.id) || nanoid()) + "-" + ((attachment === null || attachment === void 0 ? void 0 : attachment.type) || 'none') + " " }, children));
+    var classNames = clsx('str-chat__message-attachment', (_a = {},
+        _a["str-chat__message-attachment--".concat(componentType)] = componentType,
+        _a["str-chat__message-attachment--".concat(attachment === null || attachment === void 0 ? void 0 : attachment.type)] = attachment === null || attachment === void 0 ? void 0 : attachment.type,
+        _a["str-chat__message-attachment--".concat(componentType, "--").concat(extra)] = componentType && extra,
+        _a['str-chat__message-attachment-with-actions'] = extra === 'actions',
+        _a));
+    return React.createElement("div", { className: classNames }, children);
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AttachmentActionsContainer`
+ */
 export var renderAttachmentActions = function (props) {
     var _a;
     var actionHandler = props.actionHandler, attachment = props.attachment, _b = props.AttachmentActions, AttachmentActions = _b === void 0 ? DefaultAttachmentActions : _b;
     if (!((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length))
         return null;
-    return (React.createElement(AttachmentActions, __assign({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', key: "key-actions-" + attachment.id, text: attachment.text || '' })));
+    return (React.createElement(AttachmentActions, __assign({}, attachment, { actionHandler: function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(event, name, value); }, actions: attachment.actions, id: attachment.id || '', key: "key-actions-".concat(attachment.id), text: attachment.text || '' })));
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/GalleryContainer`
+ */
 export var renderGallery = function (props) {
     var attachment = props.attachment, _a = props.Gallery, Gallery = _a === void 0 ? DefaultGallery : _a;
     return renderAttachmentWithinContainer({
@@ -61,12 +81,16 @@ export var renderGallery = function (props) {
         componentType: 'gallery',
     });
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/ImageContainer`
+ */
 export var renderImage = function (props) {
     var attachment = props.attachment, _a = props.Image, Image = _a === void 0 ? DefaultImage : _a;
     if (attachment.actions && attachment.actions.length) {
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-image-" + attachment.id },
+            children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
                 React.createElement(Image, __assign({}, attachment)),
                 renderAttachmentActions(props))),
             componentType: 'image',
@@ -74,53 +98,69 @@ export var renderImage = function (props) {
     }
     return renderAttachmentWithinContainer({
         attachment: attachment,
-        children: React.createElement(Image, __assign({}, attachment, { key: "key-image-" + attachment.id })),
+        children: React.createElement(Image, __assign({}, attachment, { key: "key-image-".concat(attachment.id) })),
         componentType: 'image',
     });
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/CardContainer`
+ */
 export var renderCard = function (props) {
     var attachment = props.attachment, _a = props.Card, Card = _a === void 0 ? DefaultCard : _a;
     if (attachment.actions && attachment.actions.length) {
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-image-" + attachment.id },
-                React.createElement(Card, __assign({}, attachment, { key: "key-card-" + attachment.id })),
+            children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
+                React.createElement(Card, __assign({}, attachment, { key: "key-card-".concat(attachment.id) })),
                 renderAttachmentActions(props))),
             componentType: 'card',
         });
     }
     return renderAttachmentWithinContainer({
         attachment: attachment,
-        children: React.createElement(Card, __assign({}, attachment, { key: "key-card-" + attachment.id })),
+        children: React.createElement(Card, __assign({}, attachment, { key: "key-card-".concat(attachment.id) })),
         componentType: 'card',
     });
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/FileContainer`
+ */
 export var renderFile = function (props) {
     var attachment = props.attachment, _a = props.File, File = _a === void 0 ? DefaultFile : _a;
     if (!attachment.asset_url)
         return null;
     return renderAttachmentWithinContainer({
         attachment: attachment,
-        children: React.createElement(File, { attachment: attachment, key: "key-file-" + attachment.id }),
+        children: React.createElement(File, { attachment: attachment, key: "key-file-".concat(attachment.id) }),
         componentType: 'file',
     });
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/AudioContainer`
+ */
 export var renderAudio = function (props) {
     var attachment = props.attachment, _a = props.Audio, Audio = _a === void 0 ? DefaultAudio : _a;
     return renderAttachmentWithinContainer({
         attachment: attachment,
-        children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-video-" + attachment.id },
+        children: (React.createElement("div", { className: 'str-chat__attachment', key: "key-video-".concat(attachment.id) },
             React.createElement(Audio, { og: attachment }))),
         componentType: 'audio',
     });
 };
+/**
+ * @deprecated will be removed in the next major release,
+ * replaced with the proper component equivalent `AttachmentContainer/MediaContainer`
+ */
 export var renderMedia = function (props) {
     var _a;
     var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;
     if ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) {
         return renderAttachmentWithinContainer({
             attachment: attachment,
-            children: (React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media', key: "key-video-" + attachment.id },
+            children: (React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media', key: "key-video-".concat(attachment.id) },
                 React.createElement("div", { className: 'str-chat__player-wrapper' },
                     React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' })),
                 renderAttachmentActions(props))),
@@ -129,7 +169,7 @@ export var renderMedia = function (props) {
     }
     return renderAttachmentWithinContainer({
         attachment: attachment,
-        children: (React.createElement("div", { className: 'str-chat__player-wrapper', key: "key-video-" + attachment.id },
+        children: (React.createElement("div", { className: 'str-chat__player-wrapper', key: "key-video-".concat(attachment.id) },
             React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' }))),
         componentType: 'media',
     });

package/dist/components/AutoCompleteTextarea/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/Item.jsx"],"names":[],"mappings":"AAEA,6EA4BG"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/Item.jsx"],"names":[],"mappings":"AAKA,6EAgDG"}

package/dist/components/AutoCompleteTextarea/Item.js

@@ -1,9 +1,16 @@
-import React from 'react';
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { useChatContext } from '../../context/ChatContext';
 export var Item = React.forwardRef(function Item(props, innerRef) {
     var className = props.className, Component = props.component, item = props.item, onClickHandler = props.onClickHandler, onSelectHandler = props.onSelectHandler, selected = props.selected, style = props.style;
-    var selectItem = function () { return onSelectHandler(item); };
-    return (React.createElement("li", { className: "rta__item " + (className || ''), style: style },
-        React.createElement("button", { className: "rta__entity " + (selected ? 'rta__entity--selected' : ''), onClick: onClickHandler, onFocus: selectItem, onMouseEnter: selectItem, ref: innerRef },
+    var themeVersion = useChatContext('SuggestionItem').themeVersion;
+    var selectItem = useCallback(function () { return onSelectHandler(item); }, [item, onClickHandler]);
+    if (themeVersion === '2')
+        return (React.createElement("li", { className: clsx(className, { 'str-chat__suggestion-item--selected': selected }), style: style },
+            React.createElement("a", { href: '', onClick: onClickHandler, onFocus: selectItem, onMouseEnter: selectItem, ref: innerRef },
+                React.createElement(Component, { entity: item, selected: selected }))));
+    return (React.createElement("li", { className: clsx('rta__item', className), style: style },
+        React.createElement("button", { className: clsx('rta__entity', { 'rta__entity--selected': selected }), onClick: onClickHandler, onFocus: selectItem, onMouseEnter: selectItem, ref: innerRef },
             React.createElement("div", { tabIndex: -1 },
                 React.createElement(Component, { entity: item, selected: selected })))));
 });

package/dist/components/AutoCompleteTextarea/List.d.ts

@@ -1,2 +1,18 @@
-export function List(props: any): JSX.Element;
+export function List({ className, component, currentTrigger, dropdownScroll, getSelectedItem, getTextToReplace, Header: PropHeader, itemClassName, itemStyle, onSelect, selectionEnd, style, SuggestionItem: PropSuggestionItem, value: propValue, values, }: {
+    className: any;
+    component: any;
+    currentTrigger: any;
+    dropdownScroll: any;
+    getSelectedItem: any;
+    getTextToReplace: any;
+    Header: any;
+    itemClassName: any;
+    itemStyle: any;
+    onSelect: any;
+    selectionEnd: any;
+    style: any;
+    SuggestionItem: any;
+    value: any;
+    values: any;
+}): JSX.Element;
 //# sourceMappingURL=List.d.ts.map

package/dist/components/AutoCompleteTextarea/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/List.jsx"],"names":[],"mappings":"AAQO,8CA0IN"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/AutoCompleteTextarea/List.jsx"],"names":[],"mappings":"AAUO;;;;;;;;;;;;;;;;gBAqJN"}

package/dist/components/AutoCompleteTextarea/List.js

@@ -9,17 +9,20 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
 import { useComponentContext } from '../../context/ComponentContext';
+import { useChatContext } from '../../context/ChatContext';
 import { escapeRegExp } from '../../utils';
 import { Item } from './Item';
 import { DefaultSuggestionListHeader } from './Header';
-export var List = function (props) {
-    var className = props.className, component = props.component, currentTrigger = props.currentTrigger, dropdownScroll = props.dropdownScroll, getSelectedItem = props.getSelectedItem, getTextToReplace = props.getTextToReplace, PropHeader = props.Header, itemClassName = props.itemClassName, itemStyle = props.itemStyle, onSelect = props.onSelect, selectionEnd = props.selectionEnd, style = props.style, PropSuggestionItem = props.SuggestionItem, propValue = props.value, values = props.values;
-    var _a = useComponentContext(), AutocompleteSuggestionHeader = _a.AutocompleteSuggestionHeader, AutocompleteSuggestionItem = _a.AutocompleteSuggestionItem;
+export var List = function (_a) {
+    var className = _a.className, component = _a.component, currentTrigger = _a.currentTrigger, dropdownScroll = _a.dropdownScroll, getSelectedItem = _a.getSelectedItem, getTextToReplace = _a.getTextToReplace, PropHeader = _a.Header, itemClassName = _a.itemClassName, itemStyle = _a.itemStyle, onSelect = _a.onSelect, selectionEnd = _a.selectionEnd, style = _a.style, PropSuggestionItem = _a.SuggestionItem, propValue = _a.value, values = _a.values;
+    var _b = useComponentContext('SuggestionList'), AutocompleteSuggestionHeader = _b.AutocompleteSuggestionHeader, AutocompleteSuggestionItem = _b.AutocompleteSuggestionItem;
+    var themeVersion = useChatContext('SuggestionList').themeVersion;
     var SuggestionItem = PropSuggestionItem || AutocompleteSuggestionItem || Item;
     var SuggestionHeader = PropHeader || AutocompleteSuggestionHeader || DefaultSuggestionListHeader;
-    var _b = useState(undefined), selectedItem = _b[0], setSelectedItem = _b[1];
+    var _c = useState(undefined), selectedItem = _c[0], setSelectedItem = _c[1];
     var itemsRef = [];
     var isSelected = function (item) {
         return selectedItem === values.findIndex(function (value) { return getId(value) === getId(item); });
@@ -42,17 +45,15 @@ export var List = function (props) {
             getSelectedItem(value);
     };
     var handleClick = function (e) {
-        var _a;
-        if (e)
-            (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+        e === null || e === void 0 ? void 0 : e.preventDefault();
         modifyText(values[selectedItem]);
     };
-    var selectItem = function (item) {
+    var selectItem = useCallback(function (item) {
         var index = values.findIndex(function (value) {
             return value.id ? value.id === item.id : value.name === item.name;
         });
         setSelectedItem(index);
-    };
+    }, [values]);
     var handleKeyDown = useCallback(function (event) {
         if (event.key === 'ArrowUp') {
             setSelectedItem(function (prevSelected) {
@@ -85,19 +86,20 @@ export var List = function (props) {
         if (values === null || values === void 0 ? void 0 : values.length)
             selectItem(values[0]);
     }, [values]); // eslint-disable-line
-    var restructureItem = function (item) {
+    var restructureItem = useCallback(function (item) {
         var matched = item.name || item.id;
         var textBeforeCursor = propValue.slice(0, selectionEnd);
         var triggerIndex = textBeforeCursor.lastIndexOf(currentTrigger);
         var editedPropValue = escapeRegExp(textBeforeCursor.slice(triggerIndex + 1));
-        var parts = matched.split(new RegExp("(" + editedPropValue + ")", 'gi'));
+        var parts = matched.split(new RegExp("(".concat(editedPropValue, ")"), 'gi'));
         var itemNameParts = { match: editedPropValue, parts: parts };
         return __assign(__assign({}, item), { itemNameParts: itemNameParts });
-    };
-    return (React.createElement("ul", { className: "rta__list " + (className || ''), style: style },
-        React.createElement("li", { className: 'rta__list-header' },
-            React.createElement(SuggestionHeader, { currentTrigger: currentTrigger, value: propValue })),
-        values.map(function (item, i) { return (React.createElement(SuggestionItem, { className: itemClassName, component: component, item: restructureItem(item), key: getId(item), onClickHandler: handleClick, onSelectHandler: selectItem, ref: function (ref) {
+    }, [propValue, selectionEnd, currentTrigger]);
+    var restructuredValues = useMemo(function () { return values.map(restructureItem); }, [values, restructureItem]);
+    return (React.createElement("ul", { className: clsx('rta__list', className), style: style },
+        themeVersion === '1' && (React.createElement("li", { className: 'rta__list-header' },
+            React.createElement(SuggestionHeader, { currentTrigger: currentTrigger, value: propValue }))),
+        restructuredValues.map(function (item, i) { return (React.createElement(SuggestionItem, { className: itemClassName, component: component, item: item, key: getId(item), onClickHandler: handleClick, onSelectHandler: selectItem, ref: function (ref) {
                 itemsRef[i] = ref;
             }, selected: isSelected(item), style: itemStyle, value: propValue })); })));
 };