stream-chat-react 14.11.1 → 14.12.0

package/dist/es/components/Attachment/Attachment.mjs

@@ -0,0 +1,74 @@
+import { SUPPORTED_VIDEO_FORMATS } from "./utils.mjs";
+import { defaultAttachmentActionsDefaultFocus } from "./AttachmentActions.mjs";
+import { CardContainer, FileContainer, GeolocationContainer, GiphyContainer, MediaContainer, UnsupportedAttachmentContainer } from "./AttachmentContainer.mjs";
+import { createElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isAudioAttachment, isFileAttachment, isImageAttachment, isScrapedContent, isSharedLocationResponse, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
+//#region src/components/Attachment/Attachment.tsx
+var ATTACHMENT_GROUPS_ORDER = [
+	"media",
+	"giphy",
+	"card",
+	"geolocation",
+	"file",
+	"unsupported"
+];
+/**
+* A component used for rendering message attachments.
+*/
+var Attachment = (props) => {
+	const { attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus, attachments, ...rest } = props;
+	const groupedAttachments = useMemo(() => renderGroupedAttachments({
+		attachmentActionsDefaultFocus,
+		attachments,
+		...rest
+	}), [attachments, attachmentActionsDefaultFocus]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__attachment-list",
+		children: ATTACHMENT_GROUPS_ORDER.reduce((acc, groupName) => [...acc, ...groupedAttachments[groupName]], [])
+	});
+};
+var renderGroupedAttachments = ({ attachments, ...rest }) => {
+	const mediaAttachments = [];
+	const containers = attachments.reduce((typeMap, attachment) => {
+		if (isSharedLocationResponse(attachment)) typeMap.geolocation.push(/* @__PURE__ */ createElement(GeolocationContainer, {
+			...rest,
+			key: `geolocation-${typeMap.geolocation.length}`,
+			location: attachment
+		}));
+		else if (attachment.type === "giphy") typeMap.card.push(/* @__PURE__ */ jsx(GiphyContainer, {
+			...rest,
+			attachment
+		}, `giphy-${typeMap.giphy.length}`));
+		else if (isScrapedContent(attachment)) typeMap.card.push(/* @__PURE__ */ jsx(CardContainer, {
+			...rest,
+			attachment
+		}, `card-${typeMap.card.length}`));
+		else if (isImageAttachment(attachment) || isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) mediaAttachments.push(attachment);
+		else if (isAudioAttachment(attachment) || isVoiceRecordingAttachment(attachment) || isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) typeMap.file.push(/* @__PURE__ */ jsx(FileContainer, {
+			...rest,
+			attachment
+		}, `file-${typeMap.file.length}`));
+		else typeMap.unsupported.push(/* @__PURE__ */ jsx(UnsupportedAttachmentContainer, {
+			...rest,
+			attachment
+		}, `unsupported-${typeMap.unsupported.length}`));
+		return typeMap;
+	}, {
+		card: [],
+		file: [],
+		geolocation: [],
+		giphy: [],
+		media: [],
+		unsupported: []
+	});
+	if (mediaAttachments.length) containers.media.push(/* @__PURE__ */ jsx(MediaContainer, {
+		...rest,
+		attachments: mediaAttachments
+	}, "media-container"));
+	return containers;
+};
+//#endregion
+export { ATTACHMENT_GROUPS_ORDER, Attachment };
+
+//# sourceMappingURL=Attachment.mjs.map

package/dist/es/components/Attachment/Attachment.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Attachment.mjs","names":[],"sources":["../../../../src/components/Attachment/Attachment.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport type { SharedLocationResponse, Attachment as StreamAttachment } from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isImageAttachment,\n  isScrapedContent,\n  isSharedLocationResponse,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport {\n  CardContainer,\n  FileContainer,\n  GeolocationContainer,\n  GiphyContainer,\n  MediaContainer,\n  UnsupportedAttachmentContainer,\n} from './AttachmentContainer';\nimport type { GroupedRenderedAttachment } from './utils';\nimport { SUPPORTED_VIDEO_FORMATS } from './utils';\nimport type {\n  AttachmentActionsDefaultFocusByType,\n  AttachmentActionsProps,\n} from './AttachmentActions';\nimport { defaultAttachmentActionsDefaultFocus } from './AttachmentActions';\nimport type { AudioProps } from './Audio';\nimport type { VoiceRecordingProps } from './VoiceRecording';\nimport type { CardProps } from './LinkPreview/Card';\nimport type { FileAttachmentProps } from './FileAttachment';\nimport type { GalleryItem } from '../Gallery';\nimport type { UnsupportedAttachmentProps } from './UnsupportedAttachment';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport type { GeolocationProps } from './Geolocation';\nimport type { GiphyAttachmentProps } from './Giphy';\nimport type { VideoPlayerProps } from '../VideoPlayer';\nimport type { ModalGalleryProps } from './ModalGallery';\nimport type { ImageProps } from './Image';\n\nexport const ATTACHMENT_GROUPS_ORDER = [\n  'media',\n  'giphy',\n  'card',\n  'geolocation',\n  'file',\n  'unsupported',\n] as const;\n\nexport type AttachmentProps = {\n  /** The message attachments to render, see [attachment structure](https://getstream.io/chat/docs/javascript/message_format/?language=javascript) **/\n  attachments: (StreamAttachment | SharedLocationResponse)[];\n  /**\tThe handler function to call when an action is performed on an attachment, examples include canceling a \\/giphy command or shuffling the results. */\n  actionHandler?: ActionHandlerReturnType;\n  /**\n   * Which attachment action button receives focus on initial render, keyed by attachment type.\n   * Values must match an action's `value` (e.g. `'send'`, `'cancel'`, `'shuffle'` for giphy attachment).\n   * Default: `{ giphy: 'send' }`.\n   * To disable auto-focus (e.g. when rendering the Giphy preview above the composer so focus\n   * stays in the message input), pass an empty object: `attachmentActionsDefaultFocus={{}}`.\n   */\n  attachmentActionsDefaultFocus?: AttachmentActionsDefaultFocusByType;\n  /** Custom UI component for displaying attachment actions, defaults to and accepts same props as: [AttachmentActions](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/AttachmentActions.tsx) */\n  AttachmentActions?: React.ComponentType<AttachmentActionsProps>;\n  /** Custom UI component for displaying an audio type attachment, defaults to and accepts same props as: [Audio](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Audio.tsx) */\n  Audio?: React.ComponentType<AudioProps>;\n  /** Custom UI component for displaying a card type attachment, defaults to and accepts same props as: [Card](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Card.tsx) */\n  Card?: React.ComponentType<CardProps>;\n  /** Custom UI component for displaying a file type attachment, defaults to and accepts same props as: [File](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/FileAttachment.tsx) */\n  File?: React.ComponentType<FileAttachmentProps>;\n  /** Custom UI component for displaying a gallery of image type attachments, defaults to and accepts same props as: [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */\n  ModalGallery?: React.ComponentType<ModalGalleryProps>;\n  Geolocation?: React.ComponentType<GeolocationProps>;\n  /** Custom UI component for displaying a Giphy image, defaults to and accepts same props as: [Giphy](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/Giphy.tsx) */\n  Giphy?: React.ComponentType<GiphyAttachmentProps>;\n  /** 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) */\n  Image?: React.ComponentType<ImageProps>;\n  /** Optional flag to signal that an attachment is a displayed as a part of a quoted message */\n  isQuoted?: boolean;\n  /** Custom UI component for displaying a media type attachment, defaults to `ReactPlayer` from 'react-player' */\n  Media?: React.ComponentType<VideoPlayerProps>;\n  /** Custom UI component for displaying unsupported attachment types, defaults to NullComponent */\n  UnsupportedAttachment?: React.ComponentType<UnsupportedAttachmentProps>;\n  /** 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) */\n  VoiceRecording?: React.ComponentType<VoiceRecordingProps>;\n};\n\n/**\n * A component used for rendering message attachments.\n */\nexport const Attachment = (props: AttachmentProps) => {\n  const {\n    attachmentActionsDefaultFocus = defaultAttachmentActionsDefaultFocus,\n    attachments,\n    ...rest\n  } = props;\n\n  const groupedAttachments = useMemo(\n    () =>\n      renderGroupedAttachments({\n        attachmentActionsDefaultFocus,\n        attachments,\n        ...rest,\n      }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [attachments, attachmentActionsDefaultFocus],\n  );\n\n  return (\n    <div className='str-chat__attachment-list'>\n      {ATTACHMENT_GROUPS_ORDER.reduce(\n        (acc, groupName) => [...acc, ...groupedAttachments[groupName]],\n        [] as React.ReactNode[],\n      )}\n    </div>\n  );\n};\n\nconst renderGroupedAttachments = ({\n  attachments,\n  ...rest\n}: AttachmentProps): GroupedRenderedAttachment => {\n  const mediaAttachments: GalleryItem[] = [];\n  const containers = attachments.reduce<GroupedRenderedAttachment>(\n    (typeMap, attachment) => {\n      if (isSharedLocationResponse(attachment)) {\n        typeMap.geolocation.push(\n          <GeolocationContainer\n            {...rest}\n            key={`geolocation-${typeMap.geolocation.length}`}\n            location={attachment}\n          />,\n        );\n      } else if (attachment.type === 'giphy') {\n        typeMap.card.push(\n          <GiphyContainer\n            key={`giphy-${typeMap.giphy.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else if (isScrapedContent(attachment)) {\n        typeMap.card.push(\n          <CardContainer\n            key={`card-${typeMap.card.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else if (\n        isImageAttachment(attachment) ||\n        isVideoAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n      ) {\n        mediaAttachments.push(attachment as GalleryItem);\n      } else if (\n        isAudioAttachment(attachment) ||\n        isVoiceRecordingAttachment(attachment) ||\n        isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n      ) {\n        typeMap.file.push(\n          <FileContainer\n            key={`file-${typeMap.file.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      } else {\n        typeMap.unsupported.push(\n          <UnsupportedAttachmentContainer\n            key={`unsupported-${typeMap.unsupported.length}`}\n            {...rest}\n            attachment={attachment}\n          />,\n        );\n      }\n\n      return typeMap;\n    },\n    {\n      card: [],\n      file: [],\n      geolocation: [],\n      giphy: [],\n      media: [],\n      unsupported: [],\n    },\n  );\n\n  if (mediaAttachments.length) {\n    containers.media.push(\n      <MediaContainer key='media-container' {...rest} attachments={mediaAttachments} />,\n    );\n  }\n\n  return containers;\n};\n"],"mappings":";;;;;;;AAwCA,IAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;AACF;;;;AA2CA,IAAa,cAAc,UAA2B;CACpD,MAAM,EACJ,gCAAgC,sCAChC,aACA,GAAG,SACD;CAEJ,MAAM,qBAAqB,cAEvB,yBAAyB;EACvB;EACA;EACA,GAAG;CACL,CAAC,GAEH,CAAC,aAAa,6BAA6B,CAC7C;CAEA,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,wBAAwB,QACtB,KAAK,cAAc,CAAC,GAAG,KAAK,GAAG,mBAAmB,UAAU,GAC7D,CAAC,CACH;CACG,CAAA;AAET;AAEA,IAAM,4BAA4B,EAChC,aACA,GAAG,WAC6C;CAChD,MAAM,mBAAkC,CAAC;CACzC,MAAM,aAAa,YAAY,QAC5B,SAAS,eAAe;EACvB,IAAI,yBAAyB,UAAU,GACrC,QAAQ,YAAY,KAClB,8BAAC,sBAAD;GACE,GAAI;GACJ,KAAK,eAAe,QAAQ,YAAY;GACxC,UAAU;EACX,CAAA,CACH;OACK,IAAI,WAAW,SAAS,SAC7B,QAAQ,KAAK,KACX,oBAAC,gBAAD;GAEE,GAAI;GACQ;EACb,GAHM,SAAS,QAAQ,MAAM,QAG7B,CACH;OACK,IAAI,iBAAiB,UAAU,GACpC,QAAQ,KAAK,KACX,oBAAC,eAAD;GAEE,GAAI;GACQ;EACb,GAHM,QAAQ,QAAQ,KAAK,QAG3B,CACH;OACK,IACL,kBAAkB,UAAU,KAC5B,kBAAkB,YAAY,uBAAuB,GAErD,iBAAiB,KAAK,UAAyB;OAC1C,IACL,kBAAkB,UAAU,KAC5B,2BAA2B,UAAU,KACrC,iBAAiB,YAAY,uBAAuB,GAEpD,QAAQ,KAAK,KACX,oBAAC,eAAD;GAEE,GAAI;GACQ;EACb,GAHM,QAAQ,QAAQ,KAAK,QAG3B,CACH;OAEA,QAAQ,YAAY,KAClB,oBAAC,gCAAD;GAEE,GAAI;GACQ;EACb,GAHM,eAAe,QAAQ,YAAY,QAGzC,CACH;EAGF,OAAO;CACT,GACA;EACE,MAAM,CAAC;EACP,MAAM,CAAC;EACP,aAAa,CAAC;EACd,OAAO,CAAC;EACR,OAAO,CAAC;EACR,aAAa,CAAC;CAChB,CACF;CAEA,IAAI,iBAAiB,QACnB,WAAW,MAAM,KACf,oBAAC,gBAAD;EAAsC,GAAI;EAAM,aAAa;CAAmB,GAA5D,iBAA4D,CAClF;CAGF,OAAO;AACT"}

package/dist/es/components/Attachment/AttachmentActions.mjs

@@ -0,0 +1,109 @@
+import { useTranslationContext } from "../../context/TranslationContext.mjs";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.mjs";
+import { useStableId } from "../UtilityComponents/useStableId.mjs";
+import { Button } from "../Button/Button.mjs";
+import { useInteractionAnnouncements } from "../Accessibility/hooks/useInteractionAnnouncements.mjs";
+import { getGiphyDescriptiveTitle } from "./giphyAccessibility.mjs";
+import { useFocusReturn } from "../Accessibility/hooks/useFocusReturn.mjs";
+import React, { useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+//#region src/components/Attachment/AttachmentActions.tsx
+var defaultAttachmentActionsDefaultFocus = { giphy: "send" };
+var UnMemoizedAttachmentActions = (props) => {
+	const { actionHandler, actions, defaultFocusedActionValue, giphy, id, image_url: imageUrl, text, thumb_url: thumbUrl, title, type } = props;
+	const { t } = useTranslationContext("UnMemoizedAttachmentActions");
+	const { announceInteraction } = useInteractionAnnouncements();
+	const { reserve: reserveFocusReturn, restore: restoreFocusReturn } = useFocusReturn();
+	const buttonRefs = useRef([]);
+	const isGiphy = type === "giphy";
+	const giphyDescriptionId = useStableId();
+	const descriptiveTitle = isGiphy ? getGiphyDescriptiveTitle(title) : void 0;
+	const giphyImageIdentity = isGiphy ? giphy?.original?.url ?? thumbUrl ?? imageUrl ?? null : null;
+	const previousGiphyImageRef = useRef(null);
+	const giphyImageInitializedRef = useRef(false);
+	const handleActionClick = (event, name, value) => {
+		actionHandler?.(name, value, event);
+		if (isGiphy && (value === "send" || value === "cancel")) {
+			restoreFocusReturn();
+			const interaction = value === "send" ? "giphy.sent" : "giphy.canceled";
+			requestAnimationFrame(() => announceInteraction(interaction));
+		}
+	};
+	const knownActionText = useMemo(() => ({
+		Cancel: t("Cancel"),
+		Send: t("Send"),
+		Shuffle: t("Shuffle")
+	}), [t]);
+	const focusIndex = useMemo(() => {
+		if (!defaultFocusedActionValue) return null;
+		const index = actions.findIndex((action) => action.value === defaultFocusedActionValue);
+		return index >= 0 ? index : null;
+	}, [actions, defaultFocusedActionValue]);
+	useEffect(() => {
+		if (focusIndex === null) return;
+		const button = buttonRefs.current[focusIndex];
+		if (button && document.activeElement !== button) {
+			reserveFocusReturn();
+			button.focus();
+		}
+	}, [focusIndex, reserveFocusReturn]);
+	useEffect(() => {
+		if (!isGiphy) return;
+		if (!giphyImageInitializedRef.current) {
+			giphyImageInitializedRef.current = true;
+			previousGiphyImageRef.current = giphyImageIdentity;
+			return;
+		}
+		if (giphyImageIdentity === previousGiphyImageRef.current) return;
+		previousGiphyImageRef.current = giphyImageIdentity;
+		announceInteraction("giphy.shuffled", { title: descriptiveTitle });
+	}, [
+		announceInteraction,
+		descriptiveTitle,
+		giphyImageIdentity,
+		isGiphy
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "str-chat__message-attachment-actions",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__message-attachment-actions-form",
+			...isGiphy ? {
+				"aria-label": t("aria/Giphy actions"),
+				role: "group"
+			} : {},
+			children: [
+				/* @__PURE__ */ jsx("span", { children: text }),
+				actions.map((action, index) => {
+					const label = action.text ? knownActionText[action.text] ?? t(action.text) : null;
+					return /* @__PURE__ */ jsx(Button, {
+						appearance: "ghost",
+						"aria-describedby": isGiphy && action.value === defaultFocusedActionValue ? giphyDescriptionId : void 0,
+						"aria-label": isGiphy ? label ?? void 0 : void 0,
+						className: clsx(`str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`),
+						"data-testid": `${action.name}`,
+						"data-value": action.value,
+						onClick: (event) => handleActionClick(event, action.name, action.value),
+						ref: (element) => {
+							buttonRefs.current[index] = element;
+						},
+						variant: "secondary",
+						children: label
+					}, `${id}-${action.value}`);
+				}),
+				isGiphy && /* @__PURE__ */ jsx(VisuallyHidden, {
+					id: giphyDescriptionId,
+					children: t("aria/Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.")
+				})
+			]
+		})
+	});
+};
+/**
+* A component for rendering the actions you can take on an attachment.
+*/
+var AttachmentActions = React.memo(UnMemoizedAttachmentActions);
+//#endregion
+export { AttachmentActions, defaultAttachmentActionsDefaultFocus };
+
+//# sourceMappingURL=AttachmentActions.mjs.map

package/dist/es/components/Attachment/AttachmentActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentActions.mjs","names":[],"sources":["../../../../src/components/Attachment/AttachmentActions.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef } from 'react';\nimport type { Action, Attachment } from 'stream-chat';\n\nimport { useTranslationContext } from '../../context';\n\nimport { useFocusReturn, useInteractionAnnouncements } from '../Accessibility';\nimport { getGiphyDescriptiveTitle } from './giphyAccessibility';\nimport type { ActionHandlerReturnType } from '../Message/hooks/useActionHandler';\nimport { Button } from '../Button';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport { useStableId } from '../UtilityComponents/useStableId';\nimport clsx from 'clsx';\n\nexport type AttachmentActionsProps = Attachment & {\n  /** A list of actions */\n  actions: Action[];\n  /** Unique id for action button key. Key is generated by concatenating this id with action value - {`${id}-${action.value}`} */\n  id: string;\n  /** The text for the form input */\n  text: string;\n  /** Click event handler */\n  actionHandler?: ActionHandlerReturnType;\n  /** Which action should be focused on initial render (match by action.value) */\n  defaultFocusedActionValue?: string;\n};\n\nexport type AttachmentActionsDefaultFocusByType = Partial<\n  Record<NonNullable<Attachment['type']>, string>\n>;\n\nexport const defaultAttachmentActionsDefaultFocus: AttachmentActionsDefaultFocusByType = {\n  giphy: 'send',\n};\n\nconst UnMemoizedAttachmentActions = (props: AttachmentActionsProps) => {\n  const {\n    actionHandler,\n    actions,\n    defaultFocusedActionValue,\n    giphy,\n    id,\n    image_url: imageUrl,\n    text,\n    thumb_url: thumbUrl,\n    title,\n    type,\n  } = props;\n  const { t } = useTranslationContext('UnMemoizedAttachmentActions');\n  const { announceInteraction } = useInteractionAnnouncements();\n  const { reserve: reserveFocusReturn, restore: restoreFocusReturn } = useFocusReturn();\n  const buttonRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const isGiphy = type === 'giphy';\n  // The giphy preview auto-focuses its primary action, so its purpose + available actions are\n  // FOCUS-COUPLED: describe them on the focused control (aria-describedby) so the text rides\n  // the focus event. A live-region announcement here would be preempted by that same focus\n  // change and never heard. See `.cursor/skills/accessibility/SKILL.md` §3 (focus-coupled vs\n  // decoupled) and specs/a11y-react-web/decisions.md.\n  const giphyDescriptionId = useStableId();\n\n  // A human, non-URL title for this giphy (usually absent — see RW6), reused for both the\n  // preview description and the shuffle announcement.\n  const descriptiveTitle = isGiphy ? getGiphyDescriptiveTitle(title) : undefined;\n  // Identity used to detect the GIF changing on Shuffle. A giphy attachment carries the unique\n  // GIF URL in `giphy.original.url` / `thumb_url` (there is usually no `image_url`); both change\n  // on every shuffle, so the canonical GIF URL is the identity.\n  const giphyImageIdentity = isGiphy\n    ? (giphy?.original?.url ?? thumbUrl ?? imageUrl ?? null)\n    : null;\n  const previousGiphyImageRef = useRef<string | null>(null);\n  const giphyImageInitializedRef = useRef(false);\n\n  const handleActionClick = (\n    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,\n    name?: string,\n    value?: string,\n  ) => {\n    actionHandler?.(name, value, event);\n\n    // For giphy actions, return focus to wherever it was before the preview stole it (the\n    // composer — but this code never names it; see useFocusReturn) and announce the outcome.\n    //\n    // Order matters: restore focus FIRST, then announce on the next frame. The screen reader\n    // speaks the focus change (\"Message input\") immediately and synchronously; a polite\n    // live-region message fired in the same tick races with it (and can be dropped). Deferring\n    // the announce to rAF makes the sequence deterministic — \"Message input\" then \"Giphy sent\" —\n    // and guarantees the confirmation is heard. The gap between the two utterances is governed\n    // by the screen reader's speech queue and is not controllable here. The rAF is intentionally\n    // NOT cancelled on unmount: the preview unmounts when the giphy is sent, but the announcer\n    // lives at the Chat root, so the confirmation must still fire.\n    if (isGiphy && (value === 'send' || value === 'cancel')) {\n      restoreFocusReturn();\n      const interaction = value === 'send' ? 'giphy.sent' : 'giphy.canceled';\n      requestAnimationFrame(() => announceInteraction(interaction));\n    }\n  };\n\n  const knownActionText = useMemo<Record<string, string>>(\n    () => ({\n      Cancel: t('Cancel'),\n      Send: t('Send'),\n      Shuffle: t('Shuffle'),\n    }),\n    [t],\n  );\n\n  const focusIndex = useMemo(() => {\n    if (!defaultFocusedActionValue) return null;\n    const index = actions.findIndex(\n      (action) => action.value === defaultFocusedActionValue,\n    );\n    return index >= 0 ? index : null;\n  }, [actions, defaultFocusedActionValue]);\n\n  useEffect(() => {\n    if (focusIndex === null) return;\n    const button = buttonRefs.current[focusIndex];\n    if (button && document.activeElement !== button) {\n      // Capture where focus is (e.g. the composer) BEFORE stealing it, so a terminal\n      // action can return focus there via restoreFocusReturn() — without this component\n      // knowing what that element is.\n      reserveFocusReturn();\n      button.focus();\n    }\n  }, [focusIndex, reserveFocusReturn]);\n\n  // Shuffle swaps the GIF in place without moving focus (it stays on the Shuffle button), so\n  // this is a DECOUPLED change → announce it via the live region (no focus/rAF dance). Skip the\n  // initial mount: the preview's appearance is conveyed by the focused control's description\n  // (RW4a), not a live announcement.\n  useEffect(() => {\n    if (!isGiphy) return;\n    if (!giphyImageInitializedRef.current) {\n      giphyImageInitializedRef.current = true;\n      previousGiphyImageRef.current = giphyImageIdentity;\n      return;\n    }\n    if (giphyImageIdentity === previousGiphyImageRef.current) return;\n    previousGiphyImageRef.current = giphyImageIdentity;\n    // Giphy payloads rarely have a human title, so this usually announces just \"Giphy image\n    // changed\"; the title is included only when one genuinely exists.\n    announceInteraction('giphy.shuffled', { title: descriptiveTitle });\n  }, [announceInteraction, descriptiveTitle, giphyImageIdentity, isGiphy]);\n\n  const groupProps = isGiphy\n    ? { 'aria-label': t('aria/Giphy actions'), role: 'group' as const }\n    : {};\n\n  return (\n    <div className='str-chat__message-attachment-actions'>\n      <div className='str-chat__message-attachment-actions-form' {...groupProps}>\n        <span>{text}</span>\n        {actions.map((action, index) => {\n          const label = action.text\n            ? (knownActionText[action.text] ?? t(action.text))\n            : null;\n\n          return (\n            <Button\n              appearance='ghost'\n              // aria-describedby: the auto-focused primary action carries the preview\n              // description so it is spoken as part of the focus announcement (focus-coupled,\n              // not a live region).\n              aria-describedby={\n                isGiphy && action.value === defaultFocusedActionValue\n                  ? giphyDescriptionId\n                  : undefined\n              }\n              // aria-label: for giphy actions, give each button a self-contained accessible\n              // name so it is not announced with surrounding list/group context (e.g.\n              // \"list 3 items\") swallowing the actual action label. Non-giphy untouched.\n              aria-label={isGiphy ? (label ?? undefined) : undefined}\n              className={clsx(\n                `str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--${action.style}`,\n              )}\n              data-testid={`${action.name}`}\n              data-value={action.value}\n              key={`${id}-${action.value}`}\n              onClick={(event) => handleActionClick(event, action.name, action.value)}\n              ref={(element) => {\n                buttonRefs.current[index] = element;\n              }}\n              variant='secondary'\n            >\n              {label}\n            </Button>\n          );\n        })}\n        {isGiphy && (\n          <VisuallyHidden id={giphyDescriptionId}>\n            {t(\n              'aria/Giphy preview, only visible to you. Use the Send, Shuffle, or Cancel actions.',\n            )}\n          </VisuallyHidden>\n        )}\n      </div>\n    </div>\n  );\n};\n\n/**\n * A component for rendering the actions you can take on an attachment.\n */\nexport const AttachmentActions = React.memo(\n  UnMemoizedAttachmentActions,\n) as typeof UnMemoizedAttachmentActions;\n"],"mappings":"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"}

package/dist/es/components/Attachment/AttachmentContainer.mjs

@@ -0,0 +1,265 @@
+import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { getAttachmentPreviewUrl, hasPendingUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
+import { SUPPORTED_VIDEO_FORMATS, getCssDimensionsVariables, isGalleryAttachmentType, isSvgAttachment } from "./utils.mjs";
+import { Audio } from "./Audio.mjs";
+import { AttachmentActions } from "./AttachmentActions.mjs";
+import { VoiceRecording } from "./VoiceRecording.mjs";
+import { toGalleryItemDescriptors } from "../Gallery/GalleryContext.mjs";
+import { ModalGallery } from "./ModalGallery.mjs";
+import { ImageComponent } from "./Image.mjs";
+import { Card } from "./LinkPreview/Card.mjs";
+import { FileAttachment } from "./FileAttachment.mjs";
+import { Giphy } from "./Giphy.mjs";
+import { Geolocation } from "./Geolocation.mjs";
+import { UnsupportedAttachment } from "./UnsupportedAttachment.mjs";
+import { VisibilityDisclaimer } from "./VisibilityDisclaimer.mjs";
+import { VideoAttachment } from "./VideoAttachment.mjs";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { isAudioAttachment, isFileAttachment, isSharedLocationResponse, isVideoAttachment, isVoiceRecordingAttachment } from "stream-chat";
+//#region src/components/Attachment/AttachmentContainer.tsx
+var AttachmentWithinContainer = ({ attachment, children, componentType }) => {
+	const isGAT = isGalleryAttachmentType(attachment);
+	let extra = "";
+	if (!isGAT && !isSharedLocationResponse(attachment)) extra = componentType === "card" && !attachment?.image_url && !attachment?.thumb_url ? "no-image" : attachment?.actions?.length ? "actions" : "";
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("str-chat__message-attachment str-chat__message-attachment-dynamic-size", {
+			[`str-chat__message-attachment--${componentType}`]: componentType,
+			[`str-chat__message-attachment--${attachment?.type}`]: attachment?.type,
+			[`str-chat__message-attachment--${componentType}--${extra}`]: componentType && extra,
+			"str-chat__message-attachment--svg-image": isSvgAttachment(attachment),
+			"str-chat__message-attachment-with-actions": extra === "actions"
+		}),
+		children
+	});
+};
+var AttachmentActionsContainer = ({ actionHandler, attachment, AttachmentActions: AttachmentActions$1 = AttachmentActions, attachmentActionsDefaultFocus }) => {
+	if (!attachment.actions?.length) return null;
+	const defaultFocusedActionValue = attachment.type && attachmentActionsDefaultFocus?.[attachment.type];
+	return /* @__PURE__ */ jsx(AttachmentActions$1, {
+		...attachment,
+		actionHandler,
+		actions: attachment.actions,
+		defaultFocusedActionValue,
+		id: attachment.localMetadata?.id || "",
+		text: attachment.text || ""
+	});
+};
+var MediaContainer = (props) => {
+	const { attachments: mediaAttachments } = props;
+	if (!mediaAttachments.length) return null;
+	if (mediaAttachments.length > 1) return /* @__PURE__ */ jsx(GalleryContainer, {
+		...props,
+		attachment: {
+			items: mediaAttachments,
+			type: "gallery"
+		}
+	});
+	const mediaAttachment = mediaAttachments[0];
+	const { attachments: _attachments, ...rest } = props;
+	if (isVideoAttachment(mediaAttachment, SUPPORTED_VIDEO_FORMATS)) return /* @__PURE__ */ jsx(VideoContainer, {
+		attachment: mediaAttachment,
+		...rest
+	});
+	return /* @__PURE__ */ jsx(ImageContainer, {
+		attachment: mediaAttachment,
+		...rest
+	});
+};
+var CardContainer = (props) => {
+	const { attachment, Card: Card$1 = Card } = props;
+	const componentType = "card";
+	if (attachment.actions && attachment.actions.length) return /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__attachment",
+			children: [/* @__PURE__ */ jsx(Card$1, { ...attachment }), /* @__PURE__ */ jsx(AttachmentActionsContainer, { ...props })]
+		})
+	});
+	return /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: /* @__PURE__ */ jsx(Card$1, { ...attachment })
+	});
+};
+var GiphyContainer = (props) => {
+	const { attachment, Giphy: Giphy$1 = Giphy } = props;
+	const componentType = "giphy";
+	if (attachment.actions && attachment.actions.length) return /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__attachment",
+			children: [
+				/* @__PURE__ */ jsx(VisibilityDisclaimer, {}),
+				/* @__PURE__ */ jsx(Giphy$1, { attachment }),
+				/* @__PURE__ */ jsx(AttachmentActionsContainer, { ...props })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: /* @__PURE__ */ jsx(Giphy$1, { attachment })
+	});
+};
+/**
+* Whether there is anything to render the attachment from: a CDN url, or the local file while
+* its upload is in flight — or after it failed, since a failed message can be retried and the
+* user has to see what they are retrying.
+*
+* Deliberately non-reactive (payload only): `UploadManager` drops its record a microtask before
+* the resolved URL is written back, and gating on the live record would blink the attachment out
+* of the DOM in between.
+*/
+var hasRenderableSource = (attachment) => hasPendingUploadState(attachment) || !!getAttachmentPreviewUrl(attachment, attachment.asset_url);
+var FileContainer = (props) => {
+	const { attachment } = props;
+	if (isVoiceRecordingAttachment(attachment)) return hasRenderableSource(attachment) ? /* @__PURE__ */ jsx(VoiceRecordingContainer, { ...props }) : null;
+	if (isAudioAttachment(attachment)) return hasRenderableSource(attachment) ? /* @__PURE__ */ jsx(AudioContainer, { ...props }) : null;
+	if (!hasRenderableSource(attachment) || !isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)) return null;
+	return /* @__PURE__ */ jsx(OtherFilesContainer, { ...props });
+};
+var GalleryContainer = ({ attachment, ModalGallery: ModalGallery$1 = ModalGallery }) => {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator } = useComponentContext();
+	return /* @__PURE__ */ jsxs(AttachmentWithinContainer, {
+		attachment,
+		componentType: "gallery",
+		children: [/* @__PURE__ */ jsx(ModalGallery$1, { items: useMemo(() => attachment.items.reduce((acc, attachment) => {
+			const item = toGalleryItemDescriptors({
+				...attachment,
+				image_url: getAttachmentPreviewUrl(attachment, attachment.image_url)
+			});
+			if (item) acc.push(item);
+			return acc;
+		}, []), [attachment.items]) }, "gallery"), /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, {
+			attachments: attachment.items,
+			variant: "overlay"
+		})]
+	});
+};
+var ImageContainer = (props) => {
+	const { attachment, Image = ImageComponent } = props;
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$2 = AttachmentUploadProgressIndicator } = useComponentContext();
+	const componentType = "image";
+	const imageElement = useRef(null);
+	const { imageAttachmentSizeHandler } = useChannelStateContext();
+	const [attachmentConfiguration, setAttachmentConfiguration] = useState(void 0);
+	useLayoutEffect(() => {
+		if (imageElement.current && imageAttachmentSizeHandler) setAttachmentConfiguration(imageAttachmentSizeHandler(attachment, imageElement.current));
+	}, [
+		imageElement,
+		imageAttachmentSizeHandler,
+		attachment
+	]);
+	const imgUrlFromAttachment = getAttachmentPreviewUrl(attachment, attachment.image_url, attachment.thumb_url) || "";
+	const imageConfig = {
+		...toGalleryItemDescriptors({
+			...attachment,
+			image_url: attachmentConfiguration?.url || imgUrlFromAttachment
+		}),
+		ref: imageElement,
+		style: getCssDimensionsVariables(imgUrlFromAttachment)
+	};
+	if (attachment.actions && attachment.actions.length) return /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__attachment",
+			children: [
+				/* @__PURE__ */ jsx(Image, { ...imageConfig }),
+				/* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$2, {
+					attachment,
+					variant: "overlay"
+				}),
+				/* @__PURE__ */ jsx(AttachmentActionsContainer, { ...props })
+			]
+		})
+	});
+	return /* @__PURE__ */ jsxs(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: [/* @__PURE__ */ jsx(Image, { ...imageConfig }), /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$2, {
+			attachment,
+			variant: "overlay"
+		})]
+	});
+};
+var OtherFilesContainer = ({ attachment, File = FileAttachment }) => {
+	if (!hasRenderableSource(attachment)) return null;
+	return /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType: "file",
+		children: /* @__PURE__ */ jsx(File, { attachment })
+	});
+};
+var AudioContainer = ({ attachment, Audio: Audio$1 = Audio }) => /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+	attachment,
+	componentType: "audio",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "str-chat__attachment",
+		children: /* @__PURE__ */ jsx(Audio$1, { attachment })
+	})
+});
+var VoiceRecordingContainer = ({ attachment, isQuoted, VoiceRecording: VoiceRecording$1 = VoiceRecording }) => /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+	attachment,
+	componentType: "voiceRecording",
+	children: /* @__PURE__ */ jsx("div", {
+		className: "str-chat__attachment",
+		children: /* @__PURE__ */ jsx(VoiceRecording$1, {
+			attachment,
+			isQuoted
+		})
+	})
+});
+var VideoContainer = (props) => {
+	const { attachment, Media } = props;
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$3 = AttachmentUploadProgressIndicator } = useComponentContext();
+	const componentType = "media";
+	return attachment.actions?.length ? /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "str-chat__attachment",
+			children: [
+				/* @__PURE__ */ jsx(VideoAttachment, {
+					attachment,
+					VideoPlayer: Media
+				}),
+				/* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$3, {
+					attachment,
+					variant: "overlay"
+				}),
+				/* @__PURE__ */ jsx(AttachmentActionsContainer, { ...props })
+			]
+		})
+	}) : /* @__PURE__ */ jsxs(AttachmentWithinContainer, {
+		attachment,
+		componentType,
+		children: [/* @__PURE__ */ jsx(VideoAttachment, {
+			attachment,
+			VideoPlayer: Media
+		}), /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$3, {
+			attachment,
+			variant: "overlay"
+		})]
+	});
+};
+var GeolocationContainer = ({ Geolocation: Geolocation$1 = Geolocation, location }) => /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+	attachment: location,
+	componentType: "geolocation",
+	children: /* @__PURE__ */ jsx(Geolocation$1, { location })
+});
+var UnsupportedAttachmentContainer = ({ attachment, UnsupportedAttachment: UnsupportedAttachment$1 = UnsupportedAttachment }) => /* @__PURE__ */ jsx(AttachmentWithinContainer, {
+	attachment,
+	componentType: "unsupported",
+	children: /* @__PURE__ */ jsx(UnsupportedAttachment$1, { attachment })
+});
+//#endregion
+export { AttachmentActionsContainer, AttachmentWithinContainer, AudioContainer, CardContainer, FileContainer, GalleryContainer, GeolocationContainer, GiphyContainer, ImageContainer, MediaContainer, OtherFilesContainer, UnsupportedAttachmentContainer, VideoContainer, VoiceRecordingContainer };
+
+//# sourceMappingURL=AttachmentContainer.mjs.map

package/dist/es/components/Attachment/AttachmentContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentContainer.mjs","names":[],"sources":["../../../../src/components/Attachment/AttachmentContainer.tsx"],"sourcesContent":["import React, {\n  type PropsWithChildren,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport clsx from 'clsx';\nimport type {\n  Attachment,\n  LocalAttachment,\n  SharedLocationResponse,\n  VideoAttachment as VideoAttachmentType,\n} from 'stream-chat';\nimport {\n  isAudioAttachment,\n  isFileAttachment,\n  isSharedLocationResponse,\n  isVideoAttachment,\n  isVoiceRecordingAttachment,\n} from 'stream-chat';\n\nimport { Audio as DefaultAudioAttachment } from './Audio';\nimport { AttachmentActions as DefaultAttachmentActions } from './AttachmentActions';\nimport { VoiceRecording as DefaultVoiceRecording } from './VoiceRecording';\nimport { type GalleryItem, toGalleryItemDescriptors } from '../Gallery';\nimport { ImageComponent as DefaultImage } from './Image';\nimport { Card as DefaultCard } from './LinkPreview/Card';\nimport { FileAttachment as DefaultFile } from './FileAttachment';\nimport { Giphy as DefaultGiphy } from './Giphy';\nimport { Geolocation as DefaultGeolocation } from './Geolocation';\nimport { ModalGallery as DefaultModalGallery } from './ModalGallery';\nimport { UnsupportedAttachment as DefaultUnsupportedAttachment } from './UnsupportedAttachment';\nimport {\n  type AttachmentComponentType,\n  type GalleryAttachment,\n  type GeolocationContainerProps,\n  getCssDimensionsVariables,\n  isGalleryAttachmentType,\n  isSvgAttachment,\n  type RenderAttachmentProps,\n  type RenderGalleryProps,\n  type RenderMediaProps,\n  SUPPORTED_VIDEO_FORMATS,\n} from './utils';\nimport { useChannelStateContext } from '../../context/ChannelStateContext';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport type { ImageAttachmentConfiguration } from '../../types/types';\nimport { VisibilityDisclaimer } from './VisibilityDisclaimer';\nimport { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './components';\nimport {\n  getAttachmentPreviewUrl,\n  hasPendingUploadState,\n} from './hooks/useAttachmentUploadState';\nimport { VideoAttachment } from './VideoAttachment';\nimport type { AttachmentProps } from './Attachment';\n\nexport type AttachmentContainerProps = {\n  attachment: Attachment | GalleryAttachment | SharedLocationResponse;\n  componentType: AttachmentComponentType;\n};\nexport const AttachmentWithinContainer = ({\n  attachment,\n  children,\n  componentType,\n}: PropsWithChildren<AttachmentContainerProps>) => {\n  const isGAT = isGalleryAttachmentType(attachment);\n  let extra = '';\n\n  if (!isGAT && !isSharedLocationResponse(attachment)) {\n    extra =\n      componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url\n        ? 'no-image'\n        : attachment?.actions?.length\n          ? 'actions'\n          : '';\n  }\n\n  const classNames = clsx(\n    'str-chat__message-attachment str-chat__message-attachment-dynamic-size',\n    {\n      [`str-chat__message-attachment--${componentType}`]: componentType,\n      [`str-chat__message-attachment--${(attachment as Attachment)?.type}`]: (\n        attachment as Attachment\n      )?.type,\n      [`str-chat__message-attachment--${componentType}--${extra}`]:\n        componentType && extra,\n      'str-chat__message-attachment--svg-image': isSvgAttachment(attachment),\n      'str-chat__message-attachment-with-actions': extra === 'actions',\n    },\n  );\n\n  return <div className={classNames}>{children}</div>;\n};\n\nexport const AttachmentActionsContainer = ({\n  actionHandler,\n  attachment,\n  AttachmentActions = DefaultAttachmentActions,\n  attachmentActionsDefaultFocus,\n}: RenderAttachmentProps) => {\n  if (!attachment.actions?.length) return null;\n\n  const defaultFocusedActionValue =\n    attachment.type && attachmentActionsDefaultFocus?.[attachment.type];\n\n  return (\n    <AttachmentActions\n      {...attachment}\n      actionHandler={actionHandler}\n      actions={attachment.actions}\n      defaultFocusedActionValue={defaultFocusedActionValue}\n      id={(attachment as LocalAttachment).localMetadata?.id || ''}\n      text={attachment.text || ''}\n    />\n  );\n};\n\nexport const MediaContainer = (props: RenderMediaProps) => {\n  const { attachments: mediaAttachments } = props;\n  if (!mediaAttachments.length) return null;\n\n  if (mediaAttachments.length > 1) {\n    return (\n      <GalleryContainer\n        {...props}\n        attachment={{ items: mediaAttachments, type: 'gallery' }}\n      />\n    );\n  }\n\n  const mediaAttachment = mediaAttachments[0];\n  const { attachments: _attachments, ...rest } = props; // eslint-disable-line @typescript-eslint/no-unused-vars\n\n  if (isVideoAttachment(mediaAttachment, SUPPORTED_VIDEO_FORMATS)) {\n    return <VideoContainer attachment={mediaAttachment} {...rest} />;\n  }\n\n  return <ImageContainer attachment={mediaAttachment} {...rest} />;\n};\n\nexport const CardContainer = (props: RenderAttachmentProps) => {\n  const { attachment, Card = DefaultCard } = props;\n  const componentType = 'card';\n\n  if (attachment.actions && attachment.actions.length) {\n    return (\n      <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n        <div className='str-chat__attachment'>\n          <Card {...attachment} />\n          <AttachmentActionsContainer {...props} />\n        </div>\n      </AttachmentWithinContainer>\n    );\n  }\n\n  return (\n    <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n      <Card {...attachment} />\n    </AttachmentWithinContainer>\n  );\n};\n\nexport const GiphyContainer = (props: RenderAttachmentProps) => {\n  const { attachment, Giphy = DefaultGiphy } = props;\n  const componentType = 'giphy';\n\n  if (attachment.actions && attachment.actions.length) {\n    return (\n      <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n        <div className='str-chat__attachment'>\n          <VisibilityDisclaimer />\n          <Giphy attachment={attachment} />\n          <AttachmentActionsContainer {...props} />\n        </div>\n      </AttachmentWithinContainer>\n    );\n  }\n\n  return (\n    <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n      <Giphy attachment={attachment} />\n    </AttachmentWithinContainer>\n  );\n};\n\n/**\n * Whether there is anything to render the attachment from: a CDN url, or the local file while\n * its upload is in flight — or after it failed, since a failed message can be retried and the\n * user has to see what they are retrying.\n *\n * Deliberately non-reactive (payload only): `UploadManager` drops its record a microtask before\n * the resolved URL is written back, and gating on the live record would blink the attachment out\n * of the DOM in between.\n */\nconst hasRenderableSource = (attachment: Attachment | LocalAttachment) =>\n  hasPendingUploadState(attachment) ||\n  !!getAttachmentPreviewUrl(attachment, attachment.asset_url);\n\nexport const FileContainer = (props: RenderAttachmentProps) => {\n  const { attachment } = props;\n\n  // Audio and voice recordings render nothing without a source — `useAudioPlayer` needs one —\n  // but their containers would still occupy layout, so they are filtered here too.\n  if (isVoiceRecordingAttachment(attachment)) {\n    return hasRenderableSource(attachment) ? (\n      <VoiceRecordingContainer {...props} />\n    ) : null;\n  }\n\n  if (isAudioAttachment(attachment)) {\n    return hasRenderableSource(attachment) ? <AudioContainer {...props} /> : null;\n  }\n\n  if (\n    !hasRenderableSource(attachment) ||\n    !isFileAttachment(attachment, SUPPORTED_VIDEO_FORMATS)\n  ) {\n    return null;\n  }\n\n  return <OtherFilesContainer {...props} />;\n};\n\nexport const GalleryContainer = ({\n  attachment,\n  ModalGallery = DefaultModalGallery,\n}: RenderGalleryProps) => {\n  const { AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator } =\n    useComponentContext();\n  const items = useMemo<GalleryItem[]>(\n    () =>\n      attachment.items.reduce<GalleryItem[]>((acc, attachment) => {\n        // Falls back to the local blob preview while the upload is still in flight.\n        const item = toGalleryItemDescriptors({\n          ...attachment,\n          image_url: getAttachmentPreviewUrl(attachment, attachment.image_url),\n        });\n        if (item) acc.push(item);\n        return acc;\n      }, []),\n    [attachment.items],\n  );\n  return (\n    <AttachmentWithinContainer attachment={attachment} componentType='gallery'>\n      <ModalGallery items={items} key='gallery' />\n      {/* One combined bar for the gallery — per-item overlays are not possible here,\n          because ModalGallery receives positioned descriptors, not the attachments. */}\n      <AttachmentUploadProgressIndicator\n        attachments={attachment.items}\n        variant='overlay'\n      />\n    </AttachmentWithinContainer>\n  );\n};\n\nexport const ImageContainer = (props: RenderAttachmentProps) => {\n  const { attachment, Image = DefaultImage } = props;\n  const { AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator } =\n    useComponentContext();\n  const componentType = 'image';\n  const imageElement = useRef<HTMLImageElement>(null);\n  const { imageAttachmentSizeHandler } = useChannelStateContext();\n  const [attachmentConfiguration, setAttachmentConfiguration] = useState<\n    ImageAttachmentConfiguration | undefined\n  >(undefined);\n\n  useLayoutEffect(() => {\n    if (imageElement.current && imageAttachmentSizeHandler) {\n      const config = imageAttachmentSizeHandler(attachment, imageElement.current);\n      setAttachmentConfiguration(config);\n    }\n  }, [imageElement, imageAttachmentSizeHandler, attachment]);\n\n  // Falls back to the local blob preview while the upload is still in flight.\n  const imgUrlFromAttachment =\n    getAttachmentPreviewUrl(attachment, attachment.image_url, attachment.thumb_url) || '';\n\n  const imageConfig: GalleryItem = {\n    ...toGalleryItemDescriptors({\n      ...attachment,\n      image_url: attachmentConfiguration?.url || imgUrlFromAttachment,\n    }),\n    ref: imageElement,\n    style: getCssDimensionsVariables(imgUrlFromAttachment),\n  };\n\n  if (attachment.actions && attachment.actions.length) {\n    return (\n      <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n        <div className='str-chat__attachment'>\n          <Image {...imageConfig} />\n          <AttachmentUploadProgressIndicator attachment={attachment} variant='overlay' />\n          <AttachmentActionsContainer {...props} />\n        </div>\n      </AttachmentWithinContainer>\n    );\n  }\n\n  return (\n    <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n      <Image {...imageConfig} />\n      <AttachmentUploadProgressIndicator attachment={attachment} variant='overlay' />\n    </AttachmentWithinContainer>\n  );\n};\n\nexport const OtherFilesContainer = ({\n  attachment,\n  File = DefaultFile,\n}: RenderAttachmentProps) => {\n  // Same check as FileContainer, repeated because this is exported and used directly too.\n  if (!hasRenderableSource(attachment)) return null;\n\n  return (\n    <AttachmentWithinContainer attachment={attachment} componentType='file'>\n      <File attachment={attachment} />\n    </AttachmentWithinContainer>\n  );\n};\n\nexport const AudioContainer = ({\n  attachment,\n  Audio = DefaultAudioAttachment,\n}: RenderAttachmentProps) => (\n  <AttachmentWithinContainer attachment={attachment} componentType='audio'>\n    <div className='str-chat__attachment'>\n      <Audio attachment={attachment} />\n    </div>\n  </AttachmentWithinContainer>\n);\n\nexport const VoiceRecordingContainer = ({\n  attachment,\n  isQuoted,\n  VoiceRecording = DefaultVoiceRecording,\n}: RenderAttachmentProps) => (\n  <AttachmentWithinContainer attachment={attachment} componentType='voiceRecording'>\n    <div className='str-chat__attachment'>\n      <VoiceRecording attachment={attachment} isQuoted={isQuoted} />\n    </div>\n  </AttachmentWithinContainer>\n);\n\nexport const VideoContainer = (\n  props: Omit<AttachmentProps, 'attachments'> & { attachment: VideoAttachmentType },\n) => {\n  const { attachment, Media } = props;\n  const { AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator } =\n    useComponentContext();\n  const componentType = 'media';\n\n  return attachment.actions?.length ? (\n    <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n      <div className='str-chat__attachment'>\n        <VideoAttachment attachment={attachment} VideoPlayer={Media} />\n        <AttachmentUploadProgressIndicator attachment={attachment} variant='overlay' />\n        <AttachmentActionsContainer {...props} />\n      </div>\n    </AttachmentWithinContainer>\n  ) : (\n    <AttachmentWithinContainer attachment={attachment} componentType={componentType}>\n      <VideoAttachment attachment={attachment} VideoPlayer={Media} />\n      <AttachmentUploadProgressIndicator attachment={attachment} variant='overlay' />\n    </AttachmentWithinContainer>\n  );\n};\n\nexport const GeolocationContainer = ({\n  Geolocation = DefaultGeolocation,\n  location,\n}: GeolocationContainerProps) => (\n  <AttachmentWithinContainer attachment={location} componentType='geolocation'>\n    <Geolocation location={location} />\n  </AttachmentWithinContainer>\n);\n\nexport const UnsupportedAttachmentContainer = ({\n  attachment,\n  UnsupportedAttachment = DefaultUnsupportedAttachment,\n}: RenderAttachmentProps) => (\n  <AttachmentWithinContainer attachment={attachment} componentType='unsupported'>\n    <UnsupportedAttachment attachment={attachment} />\n  </AttachmentWithinContainer>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6DA,IAAa,6BAA6B,EACxC,YACA,UACA,oBACiD;CACjD,MAAM,QAAQ,wBAAwB,UAAU;CAChD,IAAI,QAAQ;CAEZ,IAAI,CAAC,SAAS,CAAC,yBAAyB,UAAU,GAChD,QACE,kBAAkB,UAAU,CAAC,YAAY,aAAa,CAAC,YAAY,YAC/D,aACA,YAAY,SAAS,SACnB,YACA;CAiBV,OAAO,oBAAC,OAAD;EAAK,WAdO,KACjB,0EACA;IACG,iCAAiC,kBAAkB;IACnD,iCAAkC,YAA2B,SAC5D,YACC;IACF,iCAAiC,cAAc,IAAI,UAClD,iBAAiB;GACnB,2CAA2C,gBAAgB,UAAU;GACrE,6CAA6C,UAAU;EACzD,CAGqB;EAAa;CAAc,CAAA;AACpD;AAEA,IAAa,8BAA8B,EACzC,eACA,YACA,mBAAA,sBAAoB,mBACpB,oCAC2B;CAC3B,IAAI,CAAC,WAAW,SAAS,QAAQ,OAAO;CAExC,MAAM,4BACJ,WAAW,QAAQ,gCAAgC,WAAW;CAEhE,OACE,oBAAC,qBAAD;EACE,GAAI;EACW;EACf,SAAS,WAAW;EACO;EAC3B,IAAK,WAA+B,eAAe,MAAM;EACzD,MAAM,WAAW,QAAQ;CAC1B,CAAA;AAEL;AAEA,IAAa,kBAAkB,UAA4B;CACzD,MAAM,EAAE,aAAa,qBAAqB;CAC1C,IAAI,CAAC,iBAAiB,QAAQ,OAAO;CAErC,IAAI,iBAAiB,SAAS,GAC5B,OACE,oBAAC,kBAAD;EACE,GAAI;EACJ,YAAY;GAAE,OAAO;GAAkB,MAAM;EAAU;CACxD,CAAA;CAIL,MAAM,kBAAkB,iBAAiB;CACzC,MAAM,EAAE,aAAa,cAAc,GAAG,SAAS;CAE/C,IAAI,kBAAkB,iBAAiB,uBAAuB,GAC5D,OAAO,oBAAC,gBAAD;EAAgB,YAAY;EAAiB,GAAI;CAAO,CAAA;CAGjE,OAAO,oBAAC,gBAAD;EAAgB,YAAY;EAAiB,GAAI;CAAO,CAAA;AACjE;AAEA,IAAa,iBAAiB,UAAiC;CAC7D,MAAM,EAAE,YAAY,MAAA,SAAO,SAAgB;CAC3C,MAAM,gBAAgB;CAEtB,IAAI,WAAW,WAAW,WAAW,QAAQ,QAC3C,OACE,oBAAC,2BAAD;EAAuC;EAA2B;YAChE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD,EAAM,GAAI,WAAa,CAAA,GACvB,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA,CACrC;;CACoB,CAAA;CAI/B,OACE,oBAAC,2BAAD;EAAuC;EAA2B;YAChE,oBAAC,QAAD,EAAM,GAAI,WAAa,CAAA;CACE,CAAA;AAE/B;AAEA,IAAa,kBAAkB,UAAiC;CAC9D,MAAM,EAAE,YAAY,OAAA,UAAQ,UAAiB;CAC7C,MAAM,gBAAgB;CAEtB,IAAI,WAAW,WAAW,WAAW,QAAQ,QAC3C,OACE,oBAAC,2BAAD;EAAuC;EAA2B;YAChE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,sBAAD,CAAuB,CAAA;IACvB,oBAAC,SAAD,EAAmB,WAAa,CAAA;IAChC,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA;GACrC;;CACoB,CAAA;CAI/B,OACE,oBAAC,2BAAD;EAAuC;EAA2B;YAChE,oBAAC,SAAD,EAAmB,WAAa,CAAA;CACP,CAAA;AAE/B;;;;;;;;;;AAWA,IAAM,uBAAuB,eAC3B,sBAAsB,UAAU,KAChC,CAAC,CAAC,wBAAwB,YAAY,WAAW,SAAS;AAE5D,IAAa,iBAAiB,UAAiC;CAC7D,MAAM,EAAE,eAAe;CAIvB,IAAI,2BAA2B,UAAU,GACvC,OAAO,oBAAoB,UAAU,IACnC,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA,IACnC;CAGN,IAAI,kBAAkB,UAAU,GAC9B,OAAO,oBAAoB,UAAU,IAAI,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA,IAAI;CAG3E,IACE,CAAC,oBAAoB,UAAU,KAC/B,CAAC,iBAAiB,YAAY,uBAAuB,GAErD,OAAO;CAGT,OAAO,oBAAC,qBAAD,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,IAAa,oBAAoB,EAC/B,YACA,cAAA,iBAAe,mBACS;CACxB,MAAM,EAAE,mCAAA,sCAAoC,sCAC1C,oBAAoB;CActB,OACE,qBAAC,2BAAD;EAAuC;EAAY,eAAc;YAAjE,CACE,oBAAC,gBAAD,EAAqB,OAfX,cAEV,WAAW,MAAM,QAAuB,KAAK,eAAe;GAE1D,MAAM,OAAO,yBAAyB;IACpC,GAAG;IACH,WAAW,wBAAwB,YAAY,WAAW,SAAS;GACrE,CAAC;GACD,IAAI,MAAM,IAAI,KAAK,IAAI;GACvB,OAAO;EACT,GAAG,CAAC,CAAC,GACP,CAAC,WAAW,KAAK,CAIM,EAAsB,GAAX,SAAW,GAG3C,oBAAC,qCAAD;GACE,aAAa,WAAW;GACxB,SAAQ;EACT,CAAA,CACwB;;AAE/B;AAEA,IAAa,kBAAkB,UAAiC;CAC9D,MAAM,EAAE,YAAY,QAAQ,mBAAiB;CAC7C,MAAM,EAAE,mCAAA,sCAAoC,sCAC1C,oBAAoB;CACtB,MAAM,gBAAgB;CACtB,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,EAAE,+BAA+B,uBAAuB;CAC9D,MAAM,CAAC,yBAAyB,8BAA8B,SAE5D,KAAA,CAAS;CAEX,sBAAsB;EACpB,IAAI,aAAa,WAAW,4BAE1B,2BADe,2BAA2B,YAAY,aAAa,OACxC,CAAM;CAErC,GAAG;EAAC;EAAc;EAA4B;CAAU,CAAC;CAGzD,MAAM,uBACJ,wBAAwB,YAAY,WAAW,WAAW,WAAW,SAAS,KAAK;CAErF,MAAM,cAA2B;EAC/B,GAAG,yBAAyB;GAC1B,GAAG;GACH,WAAW,yBAAyB,OAAO;EAC7C,CAAC;EACD,KAAK;EACL,OAAO,0BAA0B,oBAAoB;CACvD;CAEA,IAAI,WAAW,WAAW,WAAW,QAAQ,QAC3C,OACE,oBAAC,2BAAD;EAAuC;EAA2B;YAChE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,OAAD,EAAO,GAAI,YAAc,CAAA;IACzB,oBAAC,qCAAD;KAA+C;KAAY,SAAQ;IAAW,CAAA;IAC9E,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA;GACrC;;CACoB,CAAA;CAI/B,OACE,qBAAC,2BAAD;EAAuC;EAA2B;YAAlE,CACE,oBAAC,OAAD,EAAO,GAAI,YAAc,CAAA,GACzB,oBAAC,qCAAD;GAA+C;GAAY,SAAQ;EAAW,CAAA,CACrD;;AAE/B;AAEA,IAAa,uBAAuB,EAClC,YACA,OAAO,qBACoB;CAE3B,IAAI,CAAC,oBAAoB,UAAU,GAAG,OAAO;CAE7C,OACE,oBAAC,2BAAD;EAAuC;EAAY,eAAc;YAC/D,oBAAC,MAAD,EAAkB,WAAa,CAAA;CACN,CAAA;AAE/B;AAEA,IAAa,kBAAkB,EAC7B,YACA,OAAA,UAAQ,YAER,oBAAC,2BAAD;CAAuC;CAAY,eAAc;WAC/D,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,SAAD,EAAmB,WAAa,CAAA;CAC7B,CAAA;AACoB,CAAA;AAG7B,IAAa,2BAA2B,EACtC,YACA,UACA,gBAAA,mBAAiB,qBAEjB,oBAAC,2BAAD;CAAuC;CAAY,eAAc;WAC/D,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,kBAAD;GAA4B;GAAsB;EAAW,CAAA;CAC1D,CAAA;AACoB,CAAA;AAG7B,IAAa,kBACX,UACG;CACH,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,EAAE,mCAAA,sCAAoC,sCAC1C,oBAAoB;CACtB,MAAM,gBAAgB;CAEtB,OAAO,WAAW,SAAS,SACzB,oBAAC,2BAAD;EAAuC;EAA2B;YAChE,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,iBAAD;KAA6B;KAAY,aAAa;IAAQ,CAAA;IAC9D,oBAAC,qCAAD;KAA+C;KAAY,SAAQ;IAAW,CAAA;IAC9E,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA;GACrC;;CACoB,CAAA,IAE3B,qBAAC,2BAAD;EAAuC;EAA2B;YAAlE,CACE,oBAAC,iBAAD;GAA6B;GAAY,aAAa;EAAQ,CAAA,GAC9D,oBAAC,qCAAD;GAA+C;GAAY,SAAQ;EAAW,CAAA,CACrD;;AAE/B;AAEA,IAAa,wBAAwB,EACnC,aAAA,gBAAc,aACd,eAEA,oBAAC,2BAAD;CAA2B,YAAY;CAAU,eAAc;WAC7D,oBAAC,eAAD,EAAuB,SAAW,CAAA;AACT,CAAA;AAG7B,IAAa,kCAAkC,EAC7C,YACA,uBAAA,0BAAwB,4BAExB,oBAAC,2BAAD;CAAuC;CAAY,eAAc;WAC/D,oBAAC,yBAAD,EAAmC,WAAa,CAAA;AACvB,CAAA"}

package/dist/es/components/Attachment/Audio.mjs

@@ -0,0 +1,104 @@
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { useStateStore } from "../../store/hooks/useStateStore.mjs";
+import { useMessageContext } from "../../context/MessageContext.mjs";
+import { PlayButton } from "../Button/PlayButton.mjs";
+import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { getAttachmentPreviewUrl, useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
+import { DownloadButton } from "./components/DownloadButton.mjs";
+import { useAudioPlayer } from "../AudioPlayback/WithAudioPlayback.mjs";
+import { FileIcon } from "../FileIcon/FileIcon.mjs";
+import { DurationDisplay } from "../AudioPlayback/components/DurationDisplay.mjs";
+import { ProgressBar } from "../AudioPlayback/components/ProgressBar.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Attachment/Audio.tsx
+var AudioAttachmentUI = ({ attachment, audioPlayer }) => {
+	const { AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator } = useComponentContext();
+	const { isUploading } = useAttachmentUploadState(attachment);
+	const dataTestId = "audio-widget";
+	const rootClassName = "str-chat__message-attachment-audio-widget";
+	const { durationSeconds, isPlaying, progress, secondsElapsed } = useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClassName,
+		"data-testid": dataTestId,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "str-chat__message-attachment-audio-widget--play-controls",
+				children: /* @__PURE__ */ jsx(PlayButton, {
+					isPlaying: !!isPlaying,
+					onClick: audioPlayer.togglePlay
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "str-chat__message-attachment-audio-widget--data",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "str-chat__message-attachment-audio-widget--text-first-row",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "str-chat__message-attachment-audio-widget--title",
+						children: audioPlayer.title
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "str-chat__message-attachment-audio-widget--text-second-row",
+					children: [isUploading ? /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, { attachment }) : durationSeconds ? /* @__PURE__ */ jsx(DurationDisplay, {
+						duration: durationSeconds,
+						isPlaying: !!isPlaying,
+						secondsElapsed
+					}) : /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: audioPlayer.fileSize }), /* @__PURE__ */ jsx(ProgressBar, {
+						durationSeconds,
+						progress: progress ?? 0,
+						secondsElapsed,
+						seek: audioPlayer.seek
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx(FileIcon, {
+				className: "str-chat__file-icon",
+				mimeType: audioPlayer.mimeType
+			}),
+			/* @__PURE__ */ jsx(DownloadButton, {
+				assetUrl: audioPlayer.src,
+				suggestedFileName: audioPlayer.title
+			})
+		]
+	});
+};
+var audioPlayerStateSelector = (state) => ({
+	durationSeconds: state.durationSeconds,
+	isPlaying: state.isPlaying,
+	progress: state.progressPercent,
+	secondsElapsed: state.secondsElapsed
+});
+/**
+* Audio attachment with play/pause button and progress bar
+*/
+var Audio = (props) => {
+	const { attachment: { asset_url, duration, file_size, mime_type, title, waveform_data } } = props;
+	/**
+	* Introducing message context. This could be breaking change, therefore the fallback to {} is provided.
+	* If this component is used outside the message context, then there will be no audio player namespacing
+	* => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.
+	*
+	* Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen
+	* with the default SDK components, but can be done with custom API calls.In this case all the Audio
+	* widgets will share the state.
+	*/
+	const { message, threadList } = useMessageContext() ?? {};
+	const audioPlayer = useAudioPlayer({
+		durationSeconds: duration,
+		fileSize: file_size,
+		mimeType: mime_type,
+		requester: message?.id && `${threadList ? message.parent_id ?? message.id : ""}${message.id}`,
+		src: getAttachmentPreviewUrl(props.attachment, asset_url),
+		title,
+		waveformData: waveform_data
+	});
+	return audioPlayer ? /* @__PURE__ */ jsx(AudioAttachmentUI, {
+		attachment: props.attachment,
+		audioPlayer
+	}) : null;
+};
+//#endregion
+export { Audio };
+
+//# sourceMappingURL=Audio.mjs.map