stream-chat-react 9.4.0 → 10.0.0-theming-v2.2

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

@@ -8,6 +8,7 @@ import type { FileAttachmentProps } from './FileAttachment';
 import type { GalleryProps, ImageProps } from '../Gallery';
 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"];
 export declare 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>[];

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,KAAK,MAAM,OAAO,CAAC;AAgB1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAElE,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,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,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;CAC/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,+IAuDtB,CAAC"}
+{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAoBlE,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,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AASnE,eAAO,MAAM,uBAAuB,iEAO1B,CAAC;AAEX,oBAAY,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;CAC/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,+IAiBtB,CAAC"}

package/dist/components/Attachment/Attachment.js

@@ -20,46 +20,91 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React, { useMemo } from 'react';
+import { sanitizeUrl } from '@braintree/sanitize-url';
+import { isAudioAttachment, isFileAttachment, isMediaAttachment, isScrapedContent, isUploadedImage, } from './utils';
+import { AudioContainer, CardContainer, FileContainer, GalleryContainer, ImageContainer, MediaContainer, } from './AttachmentContainer';
+var CONTAINER_MAP = {
+    audio: AudioContainer,
+    card: CardContainer,
+    file: FileContainer,
+    media: MediaContainer,
 };
-import React from 'react';
-import { isAudioAttachment, isFileAttachment, isGalleryAttachmentType, isImageAttachment, isMediaAttachment, renderAudio, renderCard, renderFile, renderGallery, renderImage, renderMedia, } from './utils';
+export var ATTACHMENT_GROUPS_ORDER = [
+    'card',
+    'gallery',
+    'image',
+    'media',
+    'audio',
+    'file',
+];
 /**
  * A component used for rendering message attachments. By default, the component supports: AttachmentActions, Audio, Card, File, Gallery, Image, and Video
  */
 export var Attachment = function (props) {
-    var attachments = props.attachments, rest = __rest(props, ["attachments"]);
-    var gallery = {
-        images: attachments === null || attachments === void 0 ? void 0 : attachments.filter(function (attachment) {
-            return attachment.type === 'image' && !(attachment.og_scrape_url || attachment.title_link);
-        }),
-        type: 'gallery',
-    };
-    var newAttachments = gallery.images.length >= 2
-        ? __spreadArray(__spreadArray([], attachments.filter(function (attachment) {
-            return !(attachment.type === 'image' && !(attachment.og_scrape_url || attachment.title_link));
-        })), [
-            gallery,
-        ]) : attachments;
-    return (React.createElement(React.Fragment, null, newAttachments.map(function (attachment) {
-        if (isGalleryAttachmentType(attachment)) {
-            return renderGallery(__assign(__assign({}, rest), { attachment: attachment }));
-        }
-        if (isImageAttachment(attachment)) {
-            return renderImage(__assign(__assign({}, rest), { attachment: attachment }));
-        }
-        if (isAudioAttachment(attachment)) {
-            return renderAudio(__assign(__assign({}, rest), { attachment: attachment }));
-        }
-        if (isFileAttachment(attachment)) {
-            return renderFile(__assign(__assign({}, rest), { attachment: attachment }));
+    var attachments = props.attachments;
+    var groupedAttachments = useMemo(function () { return renderGroupedAttachments(props); }, [attachments]);
+    return (React.createElement("div", { className: 'str-chat__attachment-list' }, ATTACHMENT_GROUPS_ORDER.reduce(function (acc, groupName) { return __spreadArray(__spreadArray([], acc, true), groupedAttachments[groupName], true); }, [])));
+};
+var renderGroupedAttachments = function (_a) {
+    var attachments = _a.attachments, rest = __rest(_a, ["attachments"]);
+    var uploadedImages = [];
+    var containers = attachments.reduce(function (acc, attachment) {
+        if (isUploadedImage(attachment)) {
+            uploadedImages.push(__assign(__assign({}, attachment), { image_url: sanitizeUrl(attachment.image_url), thumb_url: sanitizeUrl(attachment.thumb_url) }));
         }
-        if (isMediaAttachment(attachment)) {
-            return renderMedia(__assign(__assign({}, rest), { attachment: attachment }));
+        else {
+            var attachmentType = getAttachmentType(attachment);
+            if (attachmentType) {
+                var Container = CONTAINER_MAP[attachmentType];
+                acc[attachmentType].push(React.createElement(Container, __assign({ key: "".concat(attachmentType, "-").concat(acc[attachmentType].length) }, rest, { attachment: attachment })));
+            }
         }
-        return renderCard(__assign(__assign({}, rest), { attachment: attachment }));
-    })));
+        return acc;
+    }, {
+        audio: [],
+        card: [],
+        file: [],
+        gallery: [],
+        image: [],
+        media: [],
+    });
+    if (uploadedImages.length > 1) {
+        containers['gallery'] = [
+            React.createElement(GalleryContainer, __assign({ key: 'gallery-container' }, rest, { attachment: {
+                    images: uploadedImages,
+                    type: 'gallery',
+                } })),
+        ];
+    }
+    else if (uploadedImages.length === 1) {
+        containers['image'] = [
+            React.createElement(ImageContainer, __assign({ key: 'image-container' }, rest, { attachment: uploadedImages[0] })),
+        ];
+    }
+    return containers;
+};
+var getAttachmentType = function (attachment) {
+    if (isScrapedContent(attachment)) {
+        return 'card';
+    }
+    else if (isMediaAttachment(attachment)) {
+        return 'media';
+    }
+    else if (isAudioAttachment(attachment)) {
+        return 'audio';
+    }
+    else if (isFileAttachment(attachment)) {
+        return 'file';
+    }
+    return null;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"AttachmentActions.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,sBAAsB,CAChC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,UAAU,CAAC,kBAAkB,CAAC,GAAG;IACnC,wBAAwB;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+HAA+H;IAC/H,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAuCF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sJAES,CAAC"}
+{"version":3,"file":"AttachmentActions.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAEjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,sBAAsB,CAChC,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E,UAAU,CAAC,kBAAkB,CAAC,GAAG;IACnC,wBAAwB;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+HAA+H;IAC/H,EAAE,EAAE,MAAM,CAAC;IACX,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,aAAa,CAAC,EAAE,uBAAuB,CAAC;CACzC,CAAC;AAmCF;;GAEG;AACH,eAAO,MAAM,iBAAiB,sJAES,CAAC"}

package/dist/components/Attachment/AttachmentActions.js

@@ -1,15 +1,11 @@
 import React from 'react';
 var UnMemoizedAttachmentActions = function (props) {
     var actionHandler = props.actionHandler, actions = props.actions, id = props.id, text = props.text;
-    var handleActionClick = function (event, name, value) {
-        if (actionHandler) {
-            actionHandler(name, value, event);
-        }
-    };
+    var handleActionClick = function (event, name, value) { return actionHandler === null || actionHandler === void 0 ? void 0 : actionHandler(name, value, event); };
     return (React.createElement("div", { className: 'str-chat__message-attachment-actions' },
         React.createElement("div", { className: 'str-chat__message-attachment-actions-form' },
             React.createElement("span", { key: 0 }, text),
-            actions.map(function (action) { return (React.createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--" + action.style, "data-testid": "" + action.name, "data-value": action.value, key: id + "-" + action.value, onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text)); }))));
+            actions.map(function (action) { return (React.createElement("button", { className: "str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--".concat(action.style), "data-testid": "".concat(action.name), "data-value": action.value, key: "".concat(id, "-").concat(action.value), onClick: function (event) { return handleActionClick(event, action.name, action.value); } }, action.text)); }))));
 };
 /**
  * A component for rendering the actions you can take on an attachment.

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

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from 'react';
+import { AttachmentContainerProps, RenderAttachmentProps, RenderGalleryProps } from './utils';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare const AttachmentWithinContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, children, componentType, }: React.PropsWithChildren<AttachmentContainerProps<StreamChatGenerics>>) => JSX.Element;
+export declare const AttachmentActionsContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ actionHandler, attachment, AttachmentActions, }: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element | null;
+export declare const GalleryContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Gallery, }: RenderGalleryProps<StreamChatGenerics>) => JSX.Element;
+export declare const ImageContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+export declare const CardContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+export declare const FileContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, File, }: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element | null;
+export declare const AudioContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ attachment, Audio, }: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+export declare const MediaContainer: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: RenderAttachmentProps<StreamChatGenerics>) => JSX.Element;
+//# sourceMappingURL=AttachmentContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/AttachmentContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AASjD,OAAO,EACL,wBAAwB,EAGxB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,eAAO,MAAM,yBAAyB,oNA4BrC,CAAC;AAEF,eAAO,MAAM,0BAA0B,wMAkBtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,qKAS5B,CAAC;AAEF,eAAO,MAAM,cAAc,qJAwB1B,CAAC;AAEF,eAAO,MAAM,aAAa,qJAwBzB,CAAC;AAEF,eAAO,MAAM,aAAa,4KAazB,CAAC;AACF,eAAO,MAAM,cAAc,sKAW1B,CAAC;AAEF,eAAO,MAAM,cAAc,qJAwC1B,CAAC"}

package/dist/components/Attachment/AttachmentContainer.js

@@ -0,0 +1,107 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import ReactPlayer from 'react-player';
+import clsx from 'clsx';
+import { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';
+import { Audio as DefaultAudio } from './Audio';
+import { Gallery as DefaultGallery, ImageComponent as DefaultImage } from '../Gallery';
+import { Card as DefaultCard } from './Card';
+import { FileAttachment as DefaultFile } from './FileAttachment';
+import { isGalleryAttachmentType, isSvgAttachment, } from './utils';
+export var AttachmentWithinContainer = function (_a) {
+    var _b;
+    var _c;
+    var attachment = _a.attachment, children = _a.children, componentType = _a.componentType;
+    var isGAT = isGalleryAttachmentType(attachment);
+    var extra = '';
+    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'
+                : ((_c = attachment === null || attachment === void 0 ? void 0 : attachment.actions) === null || _c === void 0 ? void 0 : _c.length)
+                    ? 'actions'
+                    : '';
+    }
+    var classNames = clsx('str-chat__message-attachment', (_b = {},
+        _b["str-chat__message-attachment--".concat(componentType)] = componentType,
+        _b["str-chat__message-attachment--".concat(attachment === null || attachment === void 0 ? void 0 : attachment.type)] = attachment === null || attachment === void 0 ? void 0 : attachment.type,
+        _b["str-chat__message-attachment--".concat(componentType, "--").concat(extra)] = componentType && extra,
+        _b['str-chat__message-attachment--svg-image'] = isSvgAttachment(attachment),
+        _b['str-chat__message-attachment-with-actions'] = extra === 'actions',
+        _b));
+    return React.createElement("div", { className: classNames }, children);
+};
+export var AttachmentActionsContainer = function (_a) {
+    var _b;
+    var actionHandler = _a.actionHandler, attachment = _a.attachment, _c = _a.AttachmentActions, AttachmentActions = _c === void 0 ? DefaultAttachmentActions : _c;
+    if (!((_b = attachment.actions) === null || _b === void 0 ? void 0 : _b.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 || '', text: attachment.text || '' })));
+};
+export var GalleryContainer = function (_a) {
+    var attachment = _a.attachment, _b = _a.Gallery, Gallery = _b === void 0 ? DefaultGallery : _b;
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'gallery' },
+        React.createElement(Gallery, { images: attachment.images || [], key: 'gallery' })));
+};
+export var ImageContainer = function (props) {
+    var attachment = props.attachment, _a = props.Image, Image = _a === void 0 ? DefaultImage : _a;
+    var componentType = 'image';
+    if (attachment.actions && attachment.actions.length) {
+        return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+            React.createElement("div", { className: 'str-chat__attachment' },
+                React.createElement(Image, __assign({}, attachment)),
+                React.createElement(AttachmentActionsContainer, __assign({}, props)))));
+    }
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+        React.createElement(Image, __assign({}, attachment))));
+};
+export var CardContainer = function (props) {
+    var attachment = props.attachment, _a = props.Card, Card = _a === void 0 ? DefaultCard : _a;
+    var componentType = 'card';
+    if (attachment.actions && attachment.actions.length) {
+        return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+            React.createElement("div", { className: 'str-chat__attachment', key: "key-image-".concat(attachment.id) },
+                React.createElement(Card, __assign({}, attachment)),
+                React.createElement(AttachmentActionsContainer, __assign({}, props)))));
+    }
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+        React.createElement(Card, __assign({}, attachment))));
+};
+export var FileContainer = function (_a) {
+    var attachment = _a.attachment, _b = _a.File, File = _b === void 0 ? DefaultFile : _b;
+    if (!attachment.asset_url)
+        return null;
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'file' },
+        React.createElement(File, { attachment: attachment })));
+};
+export var AudioContainer = function (_a) {
+    var attachment = _a.attachment, _b = _a.Audio, Audio = _b === void 0 ? DefaultAudio : _b;
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: 'audio' },
+        React.createElement("div", { className: 'str-chat__attachment' },
+            React.createElement(Audio, { og: attachment }))));
+};
+export var MediaContainer = function (props) {
+    var _a;
+    var attachment = props.attachment, _b = props.Media, Media = _b === void 0 ? ReactPlayer : _b;
+    var componentType = 'media';
+    if ((_a = attachment.actions) === null || _a === void 0 ? void 0 : _a.length) {
+        return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+            React.createElement("div", { className: 'str-chat__attachment str-chat__attachment-media' },
+                React.createElement("div", { className: 'str-chat__player-wrapper' },
+                    React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' })),
+                React.createElement(AttachmentActionsContainer, __assign({}, props)))));
+    }
+    return (React.createElement(AttachmentWithinContainer, { attachment: attachment, componentType: componentType },
+        React.createElement("div", { className: 'str-chat__player-wrapper' },
+            React.createElement(Media, { className: 'react-player', controls: true, height: '100%', url: attachment.asset_url, width: '100%' }))));
+};

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

@@ -1,10 +1,21 @@
+import React from 'react';
 import type { Attachment } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type AudioProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     og: Attachment<StreamChatGenerics>;
 };
+declare type PlayButtonProps = {
+    isPlaying: boolean;
+    onClick: () => void;
+};
+export declare const PlayButton: ({ isPlaying, onClick }: PlayButtonProps) => JSX.Element;
+declare type ProgressBarProps = {
+    progress: number;
+} & Pick<React.ComponentProps<'div'>, 'onClick'>;
+export declare const ProgressBar: ({ onClick, progress }: ProgressBarProps) => JSX.Element;
 /**
  * Audio attachment with play/pause button and progress bar
  */
 export declare const Audio: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: AudioProps<StreamChatGenerics>) => 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":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAInE,oBAAY,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,EAAE,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CACpC,CAAC;AA4FF;;GAEG;AACH,eAAO,MAAM,KAAK,0IAAwD,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;AAU9C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,oBAAY,UAAU,CACpB,kBAAkB,SAAS,yBAAyB,GAAG,yBAAyB,IAC9E;IACF,EAAE,EAAE,UAAU,CAAC,kBAAkB,CAAC,CAAC;CACpC,CAAC;AA+DF,aAAK,eAAe,GAAG;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,2BAA4B,eAAe,gBAQjE,CAAC;AAEF,aAAK,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,gBAsBlE,CAAC;AA2CF;;GAEG;AACH,eAAO,MAAM,KAAK,0IAAwD,CAAC"}

package/dist/components/Attachment/Audio.js

@@ -1,50 +1,77 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-var progressUpdateInterval = 500;
-var UnMemoizedAudio = function (props) {
-    var og = props.og;
-    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 updateProgress = useCallback(function () {
-        if (audioRef.current !== null) {
-            var position = audioRef.current.currentTime;
-            var duration = audioRef.current.duration;
-            var currentProgress = (100 / duration) * position;
-            setProgress(currentProgress);
-            if (position === duration) {
-                setIsPlaying(false);
-            }
-        }
-    }, [audioRef]);
-    useEffect(function () {
-        if (audioRef.current !== null) {
-            if (isPlaying) {
-                audioRef.current.play();
-                var interval_1 = setInterval(updateProgress, progressUpdateInterval);
-                return function () { return clearInterval(interval_1); };
-            }
-            audioRef.current.pause();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        return;
-    }, [isPlaying, updateProgress]);
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import { PauseIcon, PlayTriangleIcon } from './icons';
+import { FileSizeIndicator } from './FileSizeIndicator';
+import { DownloadButton } from './DownloadButton';
+import { useAudioController } from './hooks/useAudioController';
+import { useChatContext } from '../../context/ChatContext';
+var AudioV1 = function (_a) {
+    var og = _a.og;
     var asset_url = og.asset_url, description = og.description, image_url = og.image_url, text = og.text, title = og.title;
+    var _b = useAudioController(), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, togglePlay = _b.togglePlay;
     return (React.createElement("div", { className: 'str-chat__audio' },
         React.createElement("div", { className: 'str-chat__audio__wrapper' },
             React.createElement("audio", { ref: audioRef },
                 React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
             React.createElement("div", { className: 'str-chat__audio__image' },
-                React.createElement("div", { className: 'str-chat__audio__image--overlay' }, !isPlaying ? (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'play-audio', onClick: function () { return setIsPlaying(true); } },
+                React.createElement("div", { className: 'str-chat__audio__image--overlay' }, !isPlaying ? (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'play-audio', onClick: togglePlay },
                     React.createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
-                        React.createElement("path", { d: 'M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z', fillRule: 'nonzero' })))) : (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'pause-audio', onClick: function () { return setIsPlaying(false); } },
+                        React.createElement("path", { d: 'M32 58c14.36 0 26-11.64 26-26S46.36 6 32 6 6 17.64 6 32s11.64 26 26 26zm0 6C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm13.237-28.412L26.135 45.625a3.27 3.27 0 0 1-4.426-1.4 3.319 3.319 0 0 1-.372-1.47L21 23.36c-.032-1.823 1.41-3.327 3.222-3.358a3.263 3.263 0 0 1 1.473.322l19.438 9.36a3.311 3.311 0 0 1 .103 5.905z', fillRule: 'nonzero' })))) : (React.createElement("button", { className: 'str-chat__audio__image--button', "data-testid": 'pause-audio', onClick: togglePlay },
                     React.createElement("svg", { height: '40', viewBox: '0 0 64 64', width: '40', xmlns: 'http://www.w3.org/2000/svg' },
                         React.createElement("path", { d: 'M32 58.215c14.478 0 26.215-11.737 26.215-26.215S46.478 5.785 32 5.785 5.785 17.522 5.785 32 17.522 58.215 32 58.215zM32 64C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32zm-7.412-45.56h2.892a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.892a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17zm12.293 0h2.893a2.17 2.17 0 0 1 2.17 2.17v23.865a2.17 2.17 0 0 1-2.17 2.17h-2.893a2.17 2.17 0 0 1-2.17-2.17V20.61a2.17 2.17 0 0 1 2.17-2.17z', fillRule: 'nonzero' }))))),
-                image_url && React.createElement("img", { alt: "" + description, src: image_url })),
+                image_url && React.createElement("img", { alt: "".concat(description), src: image_url })),
             React.createElement("div", { className: 'str-chat__audio__content' },
                 React.createElement("span", { className: 'str-chat__audio__content--title' },
                     React.createElement("strong", null, title)),
                 React.createElement("span", { className: 'str-chat__audio__content--subtitle' }, text),
                 React.createElement("div", { className: 'str-chat__audio__content--progress' },
-                    React.createElement("div", { "data-testid": 'audio-progress', style: { width: 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;
+    var _b = useAudioController(), audioRef = _b.audioRef, isPlaying = _b.isPlaying, progress = _b.progress, seek = _b.seek, togglePlay = _b.togglePlay;
+    if (!asset_url)
+        return null;
+    var dataTestId = 'audio-widget';
+    var rootClassName = 'str-chat__message-attachment-audio-widget';
+    return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
+        React.createElement("audio", { ref: audioRef },
+            React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
+        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
+            React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay })),
+        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text' },
+            React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text-first-row' },
+                React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title),
+                React.createElement(DownloadButton, { assetUrl: asset_url })),
+            React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--text-second-row' },
+                React.createElement(FileSizeIndicator, { fileSize: file_size }),
+                React.createElement(ProgressBar, { onClick: seek, progress: progress })))));
+};
+var UnMemoizedAudio = function (props) {
+    var themeVersion = useChatContext('Audio').themeVersion;
+    return themeVersion === '1' ? React.createElement(AudioV1, __assign({}, props)) : React.createElement(AudioV2, __assign({}, props));
 };
 /**
  * Audio attachment with play/pause button and progress bar

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

@@ -1,24 +1,9 @@
-import { PropsWithChildren } from 'react';
-import type { Attachment } from 'stream-chat';
-export declare type CardProps = {
-    giphy?: Attachment['giphy'];
-    /** The url of the full sized image */
-    image_url?: string;
-    /** The scraped url, used as a fallback if the OG-data doesn't include a link */
-    og_scrape_url?: string;
-    /** Description returned by the OG scraper */
-    text?: string;
-    /** The url for thumbnail sized image */
-    thumb_url?: string;
-    /** Title returned by the OG scraper */
-    title?: string;
-    /** Link returned by the OG scraper */
-    title_link?: string;
-    /** The card type used in the className attribute */
-    type?: string;
-};
+import { AudioProps } from './Audio';
+import type { RenderAttachmentProps } from './utils';
+export declare const CardAudio: ({ og: { asset_url, author_name, og_scrape_url, text, title, title_link }, }: AudioProps) => JSX.Element;
+export declare type CardProps = RenderAttachmentProps['attachment'];
 /**
  * Simple Card Layout for displaying links
  */
-export declare const Card: (props: PropsWithChildren<CardProps>) => JSX.Element | null;
+export declare const Card: (props: CardProps) => JSX.Element;
 //# sourceMappingURL=Card.d.ts.map

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,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAMjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,oBAAY,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAuEF;;GAEG;AACH,eAAO,MAAM,IAAI,UAxEc,kBAAkB,SAAS,CAAC,uBAwEY,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Attachment/Card.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAA2B,MAAM,SAAS,CAAC;AAU9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAkMrD,eAAO,MAAM,SAAS,gFAEnB,UAAU,gBA8BZ,CAAC;AAEF,oBAAY,SAAS,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;AAQ5D;;GAEG;AACH,eAAO,MAAM,IAAI,UATc,SAAS,gBAS+B,CAAC"}

package/dist/components/Attachment/Card.js

@@ -10,12 +10,34 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 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 { useTranslationContext } from '../../context/TranslationContext';
+import { useAudioController } from './hooks/useAudioController';
+import { useChatContext } from '../../context/ChatContext';
 import { useChannelStateContext } from '../../context/ChannelStateContext';
-var UnMemoizedCard = function (props) {
-    var giphy = props.giphy, image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
+import { useTranslationContext } from '../../context/TranslationContext';
+var getHostFromURL = function (url) {
+    if (url !== undefined && url !== null) {
+        var trimmedUrl = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/')[0];
+        return trimmedUrl;
+    }
+    return null;
+};
+var UnableToRenderCard = function (_a) {
+    var _b;
+    var type = _a.type;
     var t = useTranslationContext('Card').t;
+    return (React.createElement("div", { className: clsx('str-chat__message-attachment-card', (_b = {},
+            _b["str-chat__message-attachment-card--".concat(type)] = type,
+            _b)) },
+        React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
+            React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
+};
+var CardV1 = function (props) {
+    var giphy = props.giphy, image_url = props.image_url, og_scrape_url = props.og_scrape_url, text = props.text, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
     var giphyVersionName = useChannelStateContext('Card').giphyVersion;
     var image = thumb_url || image_url;
     var dimensions = {};
@@ -25,29 +47,85 @@ var UnMemoizedCard = function (props) {
         dimensions.height = giphyVersion.height;
         dimensions.width = giphyVersion.width;
     }
-    var trimUrl = function (url) {
-        if (url !== undefined && url !== null) {
-            var trimmedUrl = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, '').split('/')[0];
-            return trimmedUrl;
-        }
-        return null;
-    };
     if (!title && !title_link && !image) {
-        return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--" + type },
-            React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
-                React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, t('this content could not be displayed')))));
+        return React.createElement(UnableToRenderCard, { type: type });
     }
     if (!title_link && !og_scrape_url) {
         return null;
     }
-    return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--" + type },
+    return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
         image && (React.createElement("div", { className: 'str-chat__message-attachment-card--header' },
             React.createElement("img", __assign({ alt: image, src: image }, dimensions)))),
         React.createElement("div", { className: 'str-chat__message-attachment-card--content' },
             React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
                 title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
                 text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text),
-                (title_link || og_scrape_url) && (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, trimUrl(title_link || og_scrape_url)))))));
+                (title_link || og_scrape_url) && (React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: title_link || og_scrape_url, rel: 'noopener noreferrer', target: '_blank' }, getHostFromURL(title_link || og_scrape_url)))))));
+};
+var SourceLink = function (_a) {
+    var author_name = _a.author_name, url = _a.url;
+    return (React.createElement("div", { className: 'str-chat__message-attachment-card--source-link', "data-testid": 'card-source-link' },
+        React.createElement(SafeAnchor, { className: 'str-chat__message-attachment-card--url', href: url, rel: 'noopener noreferrer', target: '_blank' }, author_name || getHostFromURL(url))));
+};
+var CardHeader = function (props) {
+    var asset_url = props.asset_url, dimensions = props.dimensions, image = props.image, image_url = props.image_url, thumb_url = props.thumb_url, title = props.title, type = props.type;
+    var visual = null;
+    if (asset_url && type === 'video') {
+        visual = (React.createElement(ReactPlayer, { className: 'react-player', controls: true, height: '100%', url: asset_url, width: '100%' }));
+    }
+    else if (image) {
+        visual = (React.createElement(ImageComponent, { dimensions: dimensions, fallback: title || image, image_url: image_url, thumb_url: thumb_url }));
+    }
+    return visual ? (React.createElement("div", { className: 'str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header', "data-testid": 'card-header' }, visual)) : null;
+};
+var CardContent = function (props) {
+    var author_name = props.author_name, og_scrape_url = props.og_scrape_url, text = props.text, title = props.title, title_link = props.title_link, type = props.type;
+    var url = title_link || og_scrape_url;
+    return (React.createElement("div", { className: 'str-chat__message-attachment-card--content' }, type === 'audio' ? (React.createElement(CardAudio, { og: props })) : (React.createElement("div", { className: 'str-chat__message-attachment-card--flex' },
+        url && React.createElement(SourceLink, { author_name: author_name, url: url }),
+        title && React.createElement("div", { className: 'str-chat__message-attachment-card--title' }, title),
+        text && React.createElement("div", { className: 'str-chat__message-attachment-card--text' }, text)))));
+};
+var CardV2 = function (props) {
+    var asset_url = props.asset_url, giphy = props.giphy, image_url = props.image_url, thumb_url = props.thumb_url, title = props.title, title_link = props.title_link, type = props.type;
+    var giphyVersionName = useChannelStateContext('CardHeader').giphyVersion;
+    var image = thumb_url || image_url;
+    var dimensions = {};
+    if (type === 'giphy' && typeof giphy !== 'undefined') {
+        var giphyVersion = giphy[giphyVersionName];
+        image = giphyVersion.url;
+        dimensions.height = giphyVersion.height;
+        dimensions.width = giphyVersion.width;
+    }
+    if (!title && !title_link && !asset_url && !image) {
+        return React.createElement(UnableToRenderCard, null);
+    }
+    return (React.createElement("div", { className: "str-chat__message-attachment-card str-chat__message-attachment-card--".concat(type) },
+        React.createElement(CardHeader, __assign({}, props, { dimensions: dimensions, image: image })),
+        React.createElement(CardContent, __assign({}, props))));
+};
+export var CardAudio = function (_a) {
+    var _b = _a.og, asset_url = _b.asset_url, author_name = _b.author_name, og_scrape_url = _b.og_scrape_url, text = _b.text, title = _b.title, title_link = _b.title_link;
+    var _c = useAudioController(), audioRef = _c.audioRef, isPlaying = _c.isPlaying, progress = _c.progress, seek = _c.seek, togglePlay = _c.togglePlay;
+    var url = title_link || og_scrape_url;
+    var dataTestId = 'card-audio-widget';
+    var rootClassName = 'str-chat__message-attachment-card-audio-widget';
+    return (React.createElement("div", { className: rootClassName, "data-testid": dataTestId },
+        asset_url && (React.createElement(React.Fragment, null,
+            React.createElement("audio", { ref: audioRef },
+                React.createElement("source", { "data-testid": 'audio-source', src: asset_url, type: 'audio/mp3' })),
+            React.createElement("div", { className: 'str-chat__message-attachment-card-audio-widget--first-row' },
+                React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--play-controls' },
+                    React.createElement(PlayButton, { isPlaying: isPlaying, onClick: togglePlay })),
+                React.createElement(ProgressBar, { onClick: seek, progress: progress })))),
+        React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--second-row' },
+            url && React.createElement(SourceLink, { author_name: author_name, url: url }),
+            title && React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--title' }, title),
+            text && (React.createElement("div", { className: 'str-chat__message-attachment-audio-widget--description' }, text)))));
+};
+var UnMemoizedCard = function (props) {
+    var themeVersion = useChatContext('Card').themeVersion;
+    return themeVersion === '2' ? React.createElement(CardV2, __assign({}, props)) : React.createElement(CardV1, __assign({}, props));
 };
 /**
  * Simple Card Layout for displaying links