stream-chat-react 14.12.0 → 15.0.0-rc.1

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

@@ -1 +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":"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"}
+{"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  SharedLocationResponseData,\n  VideoAttachment as VideoAttachmentType,\n} from 'stream-chat';\nimport {\n  getAttachmentPreviewUrl,\n  isAudioAttachment,\n  isFileAttachment,\n  isPendingUpload,\n  isSharedLocationResponseData,\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 { VisibilityDisclaimer } from './VisibilityDisclaimer';\nimport { VideoAttachment } from './VideoAttachment';\nimport type { AttachmentProps } from './Attachment';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator } from './components';\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  isPendingUpload(attachment) ||\n  !!getAttachmentPreviewUrl(attachment, attachment.asset_url);\n\nimport {\n  type ImageAttachmentConfiguration,\n  useAttachmentContext,\n} from '../../context/AttachmentContext';\n\nexport type AttachmentContainerProps = {\n  attachment: Attachment | GalleryAttachment | SharedLocationResponseData;\n  componentType: AttachmentComponentType;\n};\nexport const AttachmentWithinContainer = ({\n  attachment,\n  children,\n  componentType,\n}: PropsWithChildren<AttachmentContainerProps>) => {\n  let extra = '';\n  let isSvg = false;\n\n  if (!isSharedLocationResponseData(attachment)) {\n    const isGAT = isGalleryAttachmentType(attachment);\n    if (!isGAT) {\n      extra =\n        componentType === 'card' && !attachment?.image_url && !attachment?.thumb_url\n          ? 'no-image'\n          : attachment?.actions?.length\n            ? 'actions'\n            : '';\n      isSvg = isSvgAttachment(attachment);\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': isSvg,\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\nexport const FileContainer = (props: RenderAttachmentProps) => {\n  const { attachment } = props;\n\n  if (isVoiceRecordingAttachment(attachment)) {\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    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 } = useAttachmentContext();\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":"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"}

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

@@ -1,16 +1,18 @@
-import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { useStateStore } from "../../store/hooks/useStateStore.mjs";
-import { useMessageContext } from "../../context/MessageContext.mjs";
+import { useComponentContext } from "../../context/ComponentContext.mjs";
+import { MessageContext } from "../../context/MessageContext.mjs";
+import { useThreadContext } from "../Threads/ThreadContext.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 { useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
+import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.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 { useContext } from "react";
+import { getAttachmentPreviewUrl } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Attachment/Audio.tsx
 var AudioAttachmentUI = ({ attachment, audioPlayer }) => {
@@ -73,7 +75,9 @@ var audioPlayerStateSelector = (state) => ({
 * 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;
+	const { attachment } = props;
+	const { asset_url, title } = attachment;
+	const { duration, file_size, mime_type, waveform_data } = attachment.custom ?? {};
 	/**
 	* 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
@@ -83,18 +87,19 @@ var Audio = (props) => {
 	* 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 { message } = useContext(MessageContext) ?? {};
+	const threadInstance = useThreadContext();
 	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),
+		requester: message?.id && `${threadInstance ? message.parent_id ?? message.id : ""}${message.id}`,
+		src: getAttachmentPreviewUrl(attachment, asset_url),
 		title,
 		waveformData: waveform_data
 	});
 	return audioPlayer ? /* @__PURE__ */ jsx(AudioAttachmentUI, {
-		attachment: props.attachment,
+		attachment,
 		audioPlayer
 	}) : null;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Audio.mjs","names":[],"sources":["../../../../src/components/Attachment/Audio.tsx"],"sourcesContent":["import React from 'react';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport {\n  getAttachmentPreviewUrl,\n  useAttachmentUploadState,\n} from './hooks/useAttachmentUploadState';\nimport type { AudioPlayerState } from '../AudioPlayback/AudioPlayer';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { useComponentContext, useMessageContext } from '../../context';\nimport type { AudioPlayer } from '../AudioPlayback/AudioPlayer';\nimport { PlayButton } from '../Button/PlayButton';\nimport { FileIcon } from '../FileIcon';\nimport { DurationDisplay, ProgressBar } from '../AudioPlayback';\n\ntype AudioAttachmentUIProps = {\n  audioPlayer: AudioPlayer;\n  attachment?: Attachment;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst AudioAttachmentUI = ({ attachment, audioPlayer }: AudioAttachmentUIProps) => {\n  const {\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const { isUploading } = useAttachmentUploadState(attachment);\n  const dataTestId = 'audio-widget';\n  const rootClassName = 'str-chat__message-attachment-audio-widget';\n\n  const { durationSeconds, isPlaying, progress, secondsElapsed } =\n    useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n  return (\n    <div className={rootClassName} data-testid={dataTestId}>\n      <div className='str-chat__message-attachment-audio-widget--play-controls'>\n        <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />\n      </div>\n      <div className='str-chat__message-attachment-audio-widget--data'>\n        <div className='str-chat__message-attachment-audio-widget--text-first-row'>\n          <div className='str-chat__message-attachment-audio-widget--title'>\n            {audioPlayer.title}\n          </div>\n        </div>\n        <div className='str-chat__message-attachment-audio-widget--text-second-row'>\n          {/*\n            While uploading, the upload progress takes this slot — ahead of both the duration and\n            the file size. It has to outrank the duration: an audio attachment can carry one\n            (`attachment.duration`, or the player reading it off the local blob), and showing it\n            instead would leave an upload in flight with no indication at all.\n          */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : durationSeconds ? (\n            <DurationDisplay\n              duration={durationSeconds}\n              isPlaying={!!isPlaying}\n              secondsElapsed={secondsElapsed}\n            />\n          ) : (\n            <FileSizeIndicator fileSize={audioPlayer.fileSize} />\n          )}\n          <ProgressBar\n            durationSeconds={durationSeconds}\n            progress={progress ?? 0}\n            secondsElapsed={secondsElapsed}\n            seek={audioPlayer.seek}\n          />\n        </div>\n      </div>\n      <FileIcon className='str-chat__file-icon' mimeType={audioPlayer.mimeType} />\n      <DownloadButton assetUrl={audioPlayer.src} suggestedFileName={audioPlayer.title} />\n    </div>\n  );\n};\n\nexport type AudioProps = {\n  attachment: Attachment;\n};\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n  durationSeconds: state.durationSeconds,\n  isPlaying: state.isPlaying,\n  progress: state.progressPercent,\n  secondsElapsed: state.secondsElapsed,\n});\n\n/**\n * Audio attachment with play/pause button and progress bar\n */\nexport const Audio = (props: AudioProps) => {\n  const {\n    attachment: { asset_url, duration, file_size, mime_type, title, waveform_data },\n  } = props;\n\n  /**\n   * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n   * If this component is used outside the message context, then there will be no audio player namespacing\n   * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n   *\n   * Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n   * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n   * widgets will share the state.\n   */\n  const { message, threadList } = useMessageContext() ?? {};\n\n  const audioPlayer = useAudioPlayer({\n    durationSeconds: duration,\n    fileSize: file_size,\n    mimeType: mime_type,\n    requester:\n      message?.id &&\n      `${threadList ? (message.parent_id ?? message.id) : ''}${message.id}`,\n    // Falls back to the local blob preview while the upload is still in flight.\n    src: getAttachmentPreviewUrl(props.attachment, asset_url),\n    title,\n    waveformData: waveform_data,\n  });\n\n  return audioPlayer ? (\n    <AudioAttachmentUI attachment={props.attachment} audioPlayer={audioPlayer} />\n  ) : null;\n};\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAM,qBAAqB,EAAE,YAAY,kBAA0C;CACjF,MAAM,EACJ,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,MAAM,aAAa;CACnB,MAAM,gBAAgB;CAEtB,MAAM,EAAE,iBAAiB,WAAW,UAAU,mBAC5C,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAElE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAa;YAA5C;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD;KAAY,WAAW,CAAC,CAAC;KAAW,SAAS,YAAY;IAAa,CAAA;GACnE,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACZ,YAAY;KACV,CAAA;IACF,CAAA,GACL,qBAAC,OAAD;KAAK,WAAU;eAAf,CAOG,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAC1D,kBACF,oBAAC,iBAAD;MACE,UAAU;MACV,WAAW,CAAC,CAAC;MACG;KACjB,CAAA,IAED,oBAAC,qBAAD,EAAmB,UAAU,YAAY,SAAW,CAAA,GAEtD,oBAAC,aAAD;MACmB;MACjB,UAAU,YAAY;MACN;MAChB,MAAM,YAAY;KACnB,CAAA,CACE;MACF;;GACL,oBAAC,UAAD;IAAU,WAAU;IAAsB,UAAU,YAAY;GAAW,CAAA;GAC3E,oBAAC,gBAAD;IAAgB,UAAU,YAAY;IAAK,mBAAmB,YAAY;GAAQ,CAAA;EAC/E;;AAET;AAMA,IAAM,4BAA4B,WAA6B;CAC7D,iBAAiB,MAAM;CACvB,WAAW,MAAM;CACjB,UAAU,MAAM;CAChB,gBAAgB,MAAM;AACxB;;;;AAKA,IAAa,SAAS,UAAsB;CAC1C,MAAM,EACJ,YAAY,EAAE,WAAW,UAAU,WAAW,WAAW,OAAO,oBAC9D;;;;;;;;;;CAWJ,MAAM,EAAE,SAAS,eAAe,kBAAkB,KAAK,CAAC;CAExD,MAAM,cAAc,eAAe;EACjC,iBAAiB;EACjB,UAAU;EACV,UAAU;EACV,WACE,SAAS,MACT,GAAG,aAAc,QAAQ,aAAa,QAAQ,KAAM,KAAK,QAAQ;EAEnE,KAAK,wBAAwB,MAAM,YAAY,SAAS;EACxD;EACA,cAAc;CAChB,CAAC;CAED,OAAO,cACL,oBAAC,mBAAD;EAAmB,YAAY,MAAM;EAAyB;CAAc,CAAA,IAC1E;AACN"}
+{"version":3,"file":"Audio.mjs","names":[],"sources":["../../../../src/components/Attachment/Audio.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport type { Attachment, VoiceRecordingAttachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport type { AudioPlayerState } from '../AudioPlayback/AudioPlayer';\nimport { useAudioPlayer } from '../AudioPlayback/WithAudioPlayback';\nimport { useStateStore } from '../../store';\nimport { MessageContext, useComponentContext } from '../../context';\nimport type { AudioPlayer } from '../AudioPlayback/AudioPlayer';\nimport { PlayButton } from '../Button/PlayButton';\nimport { FileIcon } from '../FileIcon';\nimport { DurationDisplay, ProgressBar } from '../AudioPlayback';\nimport { useThreadContext } from '../Threads';\nimport { getAttachmentPreviewUrl } from 'stream-chat';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\n\ntype AudioAttachmentUIProps = {\n  attachment?: Attachment;\n  audioPlayer: AudioPlayer;\n};\n\n// todo: finish creating a BaseAudioPlayer derived from VoiceRecordingPlayerUI and AudioAttachmentUI\nconst AudioAttachmentUI = ({ attachment, audioPlayer }: AudioAttachmentUIProps) => {\n  const {\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const { isUploading } = useAttachmentUploadState(attachment);\n  const dataTestId = 'audio-widget';\n  const rootClassName = 'str-chat__message-attachment-audio-widget';\n\n  const { durationSeconds, isPlaying, progress, secondsElapsed } =\n    useStateStore(audioPlayer?.state, audioPlayerStateSelector) ?? {};\n\n  return (\n    <div className={rootClassName} data-testid={dataTestId}>\n      <div className='str-chat__message-attachment-audio-widget--play-controls'>\n        <PlayButton isPlaying={!!isPlaying} onClick={audioPlayer.togglePlay} />\n      </div>\n      <div className='str-chat__message-attachment-audio-widget--data'>\n        <div className='str-chat__message-attachment-audio-widget--text-first-row'>\n          <div className='str-chat__message-attachment-audio-widget--title'>\n            {audioPlayer.title}\n          </div>\n        </div>\n        <div className='str-chat__message-attachment-audio-widget--text-second-row'>\n          {/*\n            While uploading, the upload progress takes this slot — ahead of both the duration and\n            the file size. It has to outrank the duration: an audio attachment can carry one\n            (`attachment.duration`, or the player reading it off the local blob), and showing it\n            would leave an uploading attachment with no upload indication at all.\n          */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : durationSeconds ? (\n            <DurationDisplay\n              duration={durationSeconds}\n              isPlaying={!!isPlaying}\n              secondsElapsed={secondsElapsed}\n            />\n          ) : (\n            <FileSizeIndicator fileSize={audioPlayer.fileSize} />\n          )}\n          <ProgressBar\n            durationSeconds={durationSeconds}\n            progress={progress ?? 0}\n            secondsElapsed={secondsElapsed}\n            seek={audioPlayer.seek}\n          />\n        </div>\n      </div>\n      <FileIcon className='str-chat__file-icon' mimeType={audioPlayer.mimeType} />\n      <DownloadButton assetUrl={audioPlayer.src} suggestedFileName={audioPlayer.title} />\n    </div>\n  );\n};\n\nexport type AudioProps = {\n  attachment: Attachment;\n};\n\nconst audioPlayerStateSelector = (state: AudioPlayerState) => ({\n  durationSeconds: state.durationSeconds,\n  isPlaying: state.isPlaying,\n  progress: state.progressPercent,\n  secondsElapsed: state.secondsElapsed,\n});\n\n/**\n * Audio attachment with play/pause button and progress bar\n */\nexport const Audio = (props: AudioProps) => {\n  const { attachment } = props;\n  const { asset_url, title } = attachment;\n  const { duration, file_size, mime_type, waveform_data } =\n    (attachment as VoiceRecordingAttachment).custom ?? {};\n\n  /**\n   * Introducing message context. This could be breaking change, therefore the fallback to {} is provided.\n   * If this component is used outside the message context, then there will be no audio player namespacing\n   * => scrolling away from the message in virtualized ML would create a new AudioPlayer instance.\n   *\n   * Edge case: the requester (message) has multiple attachments with the same assetURL - does not happen\n   * with the default SDK components, but can be done with custom API calls.In this case all the Audio\n   * widgets will share the state.\n   */\n  // also rendered from composer previews, where there is no message\n  const { message } = useContext(MessageContext) ?? {};\n  const threadInstance = useThreadContext();\n\n  const audioPlayer = useAudioPlayer({\n    durationSeconds: duration,\n    fileSize: file_size,\n    mimeType: mime_type,\n    requester:\n      message?.id &&\n      `${threadInstance ? (message.parent_id ?? message.id) : ''}${message.id}`,\n    // Falls back to the local blob preview while the upload is still in flight.\n    src: getAttachmentPreviewUrl(attachment, asset_url),\n    title,\n    waveformData: waveform_data,\n  });\n\n  return audioPlayer ? (\n    <AudioAttachmentUI attachment={attachment} audioPlayer={audioPlayer} />\n  ) : null;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA0BA,IAAM,qBAAqB,EAAE,YAAY,kBAA0C;CACjF,MAAM,EACJ,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,MAAM,aAAa;CACnB,MAAM,gBAAgB;CAEtB,MAAM,EAAE,iBAAiB,WAAW,UAAU,mBAC5C,cAAc,aAAa,OAAO,wBAAwB,KAAK,CAAC;CAElE,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,eAAa;YAA5C;GACE,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,YAAD;KAAY,WAAW,CAAC,CAAC;KAAW,SAAS,YAAY;IAAa,CAAA;GACnE,CAAA;GACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MAAK,WAAU;gBACZ,YAAY;KACV,CAAA;IACF,CAAA,GACL,qBAAC,OAAD;KAAK,WAAU;eAAf,CAOG,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAC1D,kBACF,oBAAC,iBAAD;MACE,UAAU;MACV,WAAW,CAAC,CAAC;MACG;KACjB,CAAA,IAED,oBAAC,qBAAD,EAAmB,UAAU,YAAY,SAAW,CAAA,GAEtD,oBAAC,aAAD;MACmB;MACjB,UAAU,YAAY;MACN;MAChB,MAAM,YAAY;KACnB,CAAA,CACE;MACF;;GACL,oBAAC,UAAD;IAAU,WAAU;IAAsB,UAAU,YAAY;GAAW,CAAA;GAC3E,oBAAC,gBAAD;IAAgB,UAAU,YAAY;IAAK,mBAAmB,YAAY;GAAQ,CAAA;EAC/E;;AAET;AAMA,IAAM,4BAA4B,WAA6B;CAC7D,iBAAiB,MAAM;CACvB,WAAW,MAAM;CACjB,UAAU,MAAM;CAChB,gBAAgB,MAAM;AACxB;;;;AAKA,IAAa,SAAS,UAAsB;CAC1C,MAAM,EAAE,eAAe;CACvB,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,EAAE,UAAU,WAAW,WAAW,kBACrC,WAAwC,UAAU,CAAC;;;;;;;;;;CAYtD,MAAM,EAAE,YAAY,WAAW,cAAc,KAAK,CAAC;CACnD,MAAM,iBAAiB,iBAAiB;CAExC,MAAM,cAAc,eAAe;EACjC,iBAAiB;EACjB,UAAU;EACV,UAAU;EACV,WACE,SAAS,MACT,GAAG,iBAAkB,QAAQ,aAAa,QAAQ,KAAM,KAAK,QAAQ;EAEvE,KAAK,wBAAwB,YAAY,SAAS;EAClD;EACA,cAAc;CAChB,CAAC;CAED,OAAO,cACL,oBAAC,mBAAD;EAA+B;EAAyB;CAAc,CAAA,IACpE;AACN"}

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

@@ -1,24 +1,23 @@
 import { useComponentContext } from "../../context/ComponentContext.mjs";
 import { FileSizeIndicator } from "./components/FileSizeIndicator.mjs";
+import { DownloadButton } from "./components/DownloadButton.mjs";
 import { useAttachmentUploadState } from "./hooks/useAttachmentUploadState.mjs";
 import { AttachmentUploadProgressIndicator } from "./components/AttachmentUploadProgressIndicator.mjs";
-import { DownloadButton } from "./components/DownloadButton.mjs";
 import { FileIcon } from "../FileIcon/FileIcon.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Attachment/FileAttachment.tsx
 var FileAttachment = ({ attachment }) => {
 	const { AttachmentFileIcon, AttachmentUploadProgressIndicator: AttachmentUploadProgressIndicator$1 = AttachmentUploadProgressIndicator, FileSizeIndicator: FileSizeIndicator$1 = FileSizeIndicator } = useComponentContext();
-	const FileIconComponent = AttachmentFileIcon ?? FileIcon;
 	const { isUploading } = useAttachmentUploadState(attachment);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-attachment-file--item",
 		"data-testid": "attachment-file",
 		children: [
-			/* @__PURE__ */ jsx(FileIconComponent, {
+			/* @__PURE__ */ jsx(AttachmentFileIcon ?? FileIcon, {
 				className: "str-chat__file-icon",
 				fileName: attachment.title,
-				mimeType: attachment.mime_type
+				mimeType: attachment.custom?.mime_type
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "str-chat__message-attachment-file--item__info",
@@ -31,7 +30,7 @@ var FileAttachment = ({ attachment }) => {
 					})
 				}), /* @__PURE__ */ jsx("div", {
 					className: "str-chat__message-attachment-file--item__data",
-					children: isUploading ? /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, { attachment }) : /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: attachment.file_size })
+					children: isUploading ? /* @__PURE__ */ jsx(AttachmentUploadProgressIndicator$1, { attachment }) : /* @__PURE__ */ jsx(FileSizeIndicator$1, { fileSize: attachment.custom?.file_size })
 				})]
 			}),
 			/* @__PURE__ */ jsx(DownloadButton, {

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

@@ -1 +1 @@
-{"version":3,"file":"FileAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/FileAttachment.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { FileIcon } from '../FileIcon';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\n\nexport type FileAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const FileAttachment = ({ attachment }: FileAttachmentProps) => {\n  const {\n    AttachmentFileIcon,\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const FileIconComponent = AttachmentFileIcon ?? FileIcon;\n  const { isUploading } = useAttachmentUploadState(attachment);\n  return (\n    <div\n      className='str-chat__message-attachment-file--item'\n      data-testid='attachment-file'\n    >\n      <FileIconComponent\n        className='str-chat__file-icon'\n        fileName={attachment.title}\n        mimeType={attachment.mime_type}\n      />\n      <div className='str-chat__message-attachment-file--item__info'>\n        <div className='str-chat__message-attachment-file--item__first-row'>\n          <div\n            className='str-chat__message-attachment-file--item__name'\n            data-testid='file-title'\n          >\n            {attachment.title}\n          </div>\n        </div>\n        <div className='str-chat__message-attachment-file--item__data'>\n          {/* While uploading, the upload progress takes the place of the file size. */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : (\n            <FileSizeIndicator fileSize={attachment.file_size} />\n          )}\n        </div>\n      </div>\n      {/* DownloadButton renders nothing without an asset_url, which a pending upload lacks. */}\n      <DownloadButton\n        assetUrl={attachment.asset_url}\n        suggestedFileName={attachment.title}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,IAAa,kBAAkB,EAAE,iBAAsC;CACrE,MAAM,EACJ,oBACA,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,oBAAoB,sBAAsB;CAChD,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAC3D,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBAAC,mBAAD;IACE,WAAU;IACV,UAAU,WAAW;IACrB,UAAU,WAAW;GACtB,CAAA;GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,WAAU;MACV,eAAY;gBAEX,WAAW;KACT,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eAEZ,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAE5D,oBAAC,qBAAD,EAAmB,UAAU,WAAW,UAAY,CAAA;IAEnD,CAAA,CACF;;GAEL,oBAAC,gBAAD;IACE,UAAU,WAAW;IACrB,mBAAmB,WAAW;GAC/B,CAAA;EACE;;AAET"}
+{"version":3,"file":"FileAttachment.mjs","names":[],"sources":["../../../../src/components/Attachment/FileAttachment.tsx"],"sourcesContent":["import React from 'react';\nimport { useComponentContext } from '../../context/ComponentContext';\nimport { FileIcon } from '../FileIcon';\nimport type { Attachment } from 'stream-chat';\n\nimport {\n  AttachmentUploadProgressIndicator as DefaultAttachmentUploadProgressIndicator,\n  FileSizeIndicator as DefaultFileSizeIndicator,\n  DownloadButton,\n} from './components';\nimport { useAttachmentUploadState } from './hooks/useAttachmentUploadState';\n\nexport type FileAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const FileAttachment = ({ attachment }: FileAttachmentProps) => {\n  const {\n    AttachmentFileIcon,\n    AttachmentUploadProgressIndicator = DefaultAttachmentUploadProgressIndicator,\n    FileSizeIndicator = DefaultFileSizeIndicator,\n  } = useComponentContext();\n  const { isUploading } = useAttachmentUploadState(attachment);\n  const FileIconComponent = AttachmentFileIcon ?? FileIcon;\n  return (\n    <div\n      className='str-chat__message-attachment-file--item'\n      data-testid='attachment-file'\n    >\n      <FileIconComponent\n        className='str-chat__file-icon'\n        fileName={attachment.title}\n        mimeType={attachment.custom?.mime_type}\n      />\n      <div className='str-chat__message-attachment-file--item__info'>\n        <div className='str-chat__message-attachment-file--item__first-row'>\n          <div\n            className='str-chat__message-attachment-file--item__name'\n            data-testid='file-title'\n          >\n            {attachment.title}\n          </div>\n        </div>\n        <div className='str-chat__message-attachment-file--item__data'>\n          {/* While uploading, the upload progress takes the place of the file size. */}\n          {isUploading ? (\n            <AttachmentUploadProgressIndicator attachment={attachment} />\n          ) : (\n            <FileSizeIndicator fileSize={attachment.custom?.file_size} />\n          )}\n        </div>\n      </div>\n      <DownloadButton\n        assetUrl={attachment.asset_url}\n        suggestedFileName={attachment.title}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAgBA,IAAa,kBAAkB,EAAE,iBAAsC;CACrE,MAAM,EACJ,oBACA,mCAAA,sCAAoC,mCACpC,mBAAA,sBAAoB,sBAClB,oBAAoB;CACxB,MAAM,EAAE,gBAAgB,yBAAyB,UAAU;CAE3D,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd;GAIE,oBANsB,sBAAsB,UAM5C;IACE,WAAU;IACV,UAAU,WAAW;IACrB,UAAU,WAAW,QAAQ;GAC9B,CAAA;GACD,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,WAAU;MACV,eAAY;gBAEX,WAAW;KACT,CAAA;IACF,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eAEZ,cACC,oBAAC,qCAAD,EAA+C,WAAa,CAAA,IAE5D,oBAAC,qBAAD,EAAmB,UAAU,WAAW,QAAQ,UAAY,CAAA;IAE3D,CAAA,CACF;;GACL,oBAAC,gBAAD;IACE,UAAU,WAAW;IACrB,mBAAmB,WAAW;GAC/B,CAAA;EACE;;AAET"}

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

@@ -1,23 +1,35 @@
 import { useChatContext } from "../../context/ChatContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { Button } from "../Button/Button.mjs";
 import { ExternalLinkIcon } from "./icons.mjs";
+import { useChannel } from "../../context/useChannel.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useEffect, useRef, useState } from "react";
+import { convertTimestampToDate, nowNs, nsToMs } from "stream-chat";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Attachment/Geolocation.tsx
+/** `setTimeout` silently clamps a longer delay to 1 ms, so longer waits are armed in steps. */
+var MAX_TIMEOUT_MS = 2 ** 31 - 1;
+/** Whether a live location's expiry is a usable instant to schedule against. */
+var isSchedulableExpiry = (endAt) => endAt != null && Number.isFinite(endAt);
 var Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder, GeolocationMap, location }) => {
-	const { channel, client } = useChatContext();
+	const { client } = useChatContext();
+	const channel = useChannel();
 	const { t } = useTranslationContext();
-	const [stoppedSharing, setStoppedSharing] = useState(!!location.end_at && new Date(location.end_at).getTime() < (/* @__PURE__ */ new Date()).getTime());
+	const [stoppedSharing, setStoppedSharing] = useState(isSchedulableExpiry(location.end_at) && location.end_at < nowNs());
 	const timeoutRef = useRef(void 0);
 	const isMyLocation = location.user_id === client.userID;
-	const isLiveLocation = !!location.end_at;
+	const isLiveLocation = location.end_at != null;
+	const endAt = location.end_at;
 	useEffect(() => {
-		if (!location.end_at) return;
-		clearTimeout(timeoutRef.current);
-		timeoutRef.current = setTimeout(() => setStoppedSharing(true), new Date(location.end_at).getTime() - Date.now());
-	}, [location.end_at]);
+		if (!isSchedulableExpiry(endAt)) return;
+		const arm = () => {
+			const remaining = Math.max(0, nsToMs(endAt - nowNs()));
+			timeoutRef.current = remaining > MAX_TIMEOUT_MS ? setTimeout(arm, MAX_TIMEOUT_MS) : setTimeout(() => setStoppedSharing(true), remaining);
+		};
+		arm();
+		return () => clearTimeout(timeoutRef.current);
+	}, [endAt]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-attachment-geolocation",
 		"data-testid": "attachment-geolocation",
@@ -29,40 +41,40 @@ var Geolocation = ({ GeolocationAttachmentMapPlaceholder = DefaultGeolocationAtt
 			}) : /* @__PURE__ */ jsx(GeolocationAttachmentMapPlaceholder, { location })
 		}), /* @__PURE__ */ jsx("div", {
 			className: "str-chat__message-attachment-geolocation__status",
-			children: isLiveLocation ? stoppedSharing ? t("Location sharing ended") : isMyLocation ? /* @__PURE__ */ jsxs("div", {
+			children: isLiveLocation ? stoppedSharing ? t("attachment.geolocation.locationSharingEnded.text", "Location sharing ended") : isMyLocation ? /* @__PURE__ */ jsxs("div", {
 				className: "str-chat__message-attachment-geolocation__status--active",
 				children: [/* @__PURE__ */ jsx(Button, {
 					appearance: "outline",
 					className: "str-chat__message-attachment-geolocation__stop-sharing-button",
-					onClick: () => channel?.stopLiveLocationSharing(location),
+					onClick: () => channel?.stopLiveLocationSharing({ message_id: location.message_id }),
 					size: "sm",
 					variant: "secondary",
-					children: t("Stop sharing")
+					children: t("attachment.geolocation.stopSharing.text", "Stop sharing")
 				}), /* @__PURE__ */ jsx("div", {
 					className: "str-chat__message-attachment-geolocation__status--active-until",
-					children: t("Live until {{ timestamp }}", { timestamp: t("timestamp/LiveLocation", { timestamp: location.end_at }) })
+					children: t("attachment.geolocation.liveUntil.text", "Live until {{ timestamp }}", { timestamp: t("timestamp.LiveLocation", { timestamp: convertTimestampToDate(location.end_at) }) })
 				})]
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "str-chat__message-attachment-geolocation__status--active",
 				children: [/* @__PURE__ */ jsx("div", {
 					className: "str-chat__message-attachment-geolocation__status--active-status",
-					children: t("Live location")
+					children: t("common.liveLocation.text", "Live location")
 				}), /* @__PURE__ */ jsx("div", {
 					className: "str-chat__message-attachment-geolocation__status--active-until",
-					children: t("Live until {{ timestamp }}", { timestamp: t("timestamp/LiveLocation", { timestamp: location.end_at }) })
+					children: t("attachment.geolocation.liveUntil.text", "Live until {{ timestamp }}", { timestamp: t("timestamp.LiveLocation", { timestamp: convertTimestampToDate(location.end_at) }) })
 				})]
-			}) : t("Current location")
+			}) : t("common.currentLocation.text", "Current location")
 		})]
 	});
 };
 var DefaultGeolocationAttachmentMapPlaceholder = ({ location }) => {
-	const { t } = useTranslationContext();
 	const { IconLocation } = useComponentContextIcons();
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-attachment-geolocation__placeholder",
 		"data-testid": "geolocation-attachment-map-placeholder",
 		children: [/* @__PURE__ */ jsx(IconLocation, {}), /* @__PURE__ */ jsx("a", {
-			"aria-label": t("Open location in a map"),
+			"aria-label": t("attachment.geolocation.openLocationMap.ariaLabel", "Open location in a map"),
 			className: "str-chat__message-attachment-geolocation__placeholder-link",
 			href: `https://maps.google.com?q=${[location.latitude, location.longitude].join()}`,
 			rel: "noreferrer",

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

@@ -1 +1 @@
-{"version":3,"file":"Geolocation.mjs","names":[],"sources":["../../../../src/components/Attachment/Geolocation.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect } from 'react';\nimport { useRef, useState } from 'react';\nimport React from 'react';\nimport type { Coords, SharedLocationResponse } from 'stream-chat';\nimport {\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { ExternalLinkIcon } from './icons';\nimport { Button } from '../Button';\n\nexport type GeolocationMapProps = Coords;\n\nexport type GeolocationProps = {\n  location: SharedLocationResponse;\n  GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;\n  GeolocationMap?: ComponentType<GeolocationMapProps>;\n};\n\nexport const Geolocation = ({\n  GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder,\n  GeolocationMap,\n  location,\n}: GeolocationProps) => {\n  const { channel, client } = useChatContext();\n  const { t } = useTranslationContext();\n\n  const [stoppedSharing, setStoppedSharing] = useState(\n    !!location.end_at && new Date(location.end_at).getTime() < new Date().getTime(),\n  );\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const isMyLocation = location.user_id === client.userID;\n  const isLiveLocation = !!location.end_at;\n\n  useEffect(() => {\n    if (!location.end_at) return;\n    clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(\n      () => setStoppedSharing(true),\n      new Date(location.end_at).getTime() - Date.now(),\n    );\n  }, [location.end_at]);\n\n  return (\n    <div\n      className='str-chat__message-attachment-geolocation'\n      data-testid='attachment-geolocation'\n    >\n      <div className='str-chat__message-attachment-geolocation__location-preview'>\n        {GeolocationMap ? (\n          <GeolocationMap latitude={location.latitude} longitude={location.longitude} />\n        ) : (\n          <GeolocationAttachmentMapPlaceholder location={location} />\n        )}\n      </div>\n      <div className='str-chat__message-attachment-geolocation__status'>\n        {isLiveLocation ? (\n          stoppedSharing ? (\n            t('Location sharing ended')\n          ) : isMyLocation ? (\n            <div className='str-chat__message-attachment-geolocation__status--active'>\n              <Button\n                appearance='outline'\n                className='str-chat__message-attachment-geolocation__stop-sharing-button'\n                onClick={() => channel?.stopLiveLocationSharing(location)}\n                size='sm'\n                variant='secondary'\n              >\n                {t('Stop sharing')}\n              </Button>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t('Live until {{ timestamp }}', {\n                  timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),\n                })}\n              </div>\n            </div>\n          ) : (\n            <div className='str-chat__message-attachment-geolocation__status--active'>\n              <div className='str-chat__message-attachment-geolocation__status--active-status'>\n                {t('Live location')}\n              </div>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t('Live until {{ timestamp }}', {\n                  timestamp: t('timestamp/LiveLocation', { timestamp: location.end_at }),\n                })}\n              </div>\n            </div>\n          )\n        ) : (\n          t('Current location')\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type GeolocationAttachmentMapPlaceholderProps = {\n  location: SharedLocationResponse;\n};\n\nconst DefaultGeolocationAttachmentMapPlaceholder = ({\n  location,\n}: GeolocationAttachmentMapPlaceholderProps) => {\n  const { t } = useTranslationContext();\n  const { IconLocation } = useComponentContextIcons();\n\n  return (\n    <div\n      className='str-chat__message-attachment-geolocation__placeholder'\n      data-testid='geolocation-attachment-map-placeholder'\n    >\n      <IconLocation />\n      <a\n        aria-label={t('Open location in a map')}\n        className='str-chat__message-attachment-geolocation__placeholder-link'\n        href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}\n        rel='noreferrer'\n        target='_blank'\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAqBA,IAAa,eAAe,EAC1B,sCAAsC,4CACtC,gBACA,eACsB;CACtB,MAAM,EAAE,SAAS,WAAW,eAAe;CAC3C,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,CAAC,CAAC,SAAS,UAAU,IAAI,KAAK,SAAS,MAAM,CAAC,CAAC,QAAQ,qBAAI,IAAI,KAAK,EAAA,CAAE,QAAQ,CAChF;CACA,MAAM,aAAa,OAAkD,KAAA,CAAS;CAE9E,MAAM,eAAe,SAAS,YAAY,OAAO;CACjD,MAAM,iBAAiB,CAAC,CAAC,SAAS;CAElC,gBAAgB;EACd,IAAI,CAAC,SAAS,QAAQ;EACtB,aAAa,WAAW,OAAO;EAC/B,WAAW,UAAU,iBACb,kBAAkB,IAAI,GAC5B,IAAI,KAAK,SAAS,MAAM,CAAC,CAAC,QAAQ,IAAI,KAAK,IAAI,CACjD;CACF,GAAG,CAAC,SAAS,MAAM,CAAC;CAEpB,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAU;aACZ,iBACC,oBAAC,gBAAD;IAAgB,UAAU,SAAS;IAAU,WAAW,SAAS;GAAY,CAAA,IAE7E,oBAAC,qCAAD,EAA+C,SAAW,CAAA;EAEzD,CAAA,GACL,oBAAC,OAAD;GAAK,WAAU;aACZ,iBACC,iBACE,EAAE,wBAAwB,IACxB,eACF,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,eAAe,SAAS,wBAAwB,QAAQ;KACxD,MAAK;KACL,SAAQ;eAEP,EAAE,cAAc;IACX,CAAA,GACR,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,8BAA8B,EAC/B,WAAW,EAAE,0BAA0B,EAAE,WAAW,SAAS,OAAO,CAAC,EACvE,CAAC;IACE,CAAA,CACF;QAEL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,eAAe;IACf,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,8BAA8B,EAC/B,WAAW,EAAE,0BAA0B,EAAE,WAAW,SAAS,OAAO,CAAC,EACvE,CAAC;IACE,CAAA,CACF;QAGP,EAAE,kBAAkB;EAEnB,CAAA,CACF;;AAET;AAMA,IAAM,8CAA8C,EAClD,eAC8C;CAC9C,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,EAAE,iBAAiB,yBAAyB;CAElD,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,KAAD;GACE,cAAY,EAAE,wBAAwB;GACtC,WAAU;GACV,MAAM,6BAA6B,CAAC,SAAS,UAAU,SAAS,SAAS,CAAC,CAAC,KAAK;GAChF,KAAI;GACJ,QAAO;aAEP,oBAAC,kBAAD,CAAmB,CAAA;EAClB,CAAA,CACA;;AAET"}
+{"version":3,"file":"Geolocation.mjs","names":[],"sources":["../../../../src/components/Attachment/Geolocation.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport { useEffect } from 'react';\nimport { useRef, useState } from 'react';\nimport React from 'react';\nimport type { Coords, SharedLocationResponseData } from 'stream-chat';\nimport {\n  useChannel,\n  useChatContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { ExternalLinkIcon } from './icons';\nimport { Button } from '../Button';\nimport { convertTimestampToDate, nowNs, nsToMs } from 'stream-chat';\n\nexport type GeolocationMapProps = Coords;\n\n/** `setTimeout` silently clamps a longer delay to 1 ms, so longer waits are armed in steps. */\nconst MAX_TIMEOUT_MS = 2 ** 31 - 1;\n\n/** Whether a live location's expiry is a usable instant to schedule against. */\nconst isSchedulableExpiry = (endAt?: number): endAt is number =>\n  endAt != null && Number.isFinite(endAt);\n\nexport type GeolocationProps = {\n  location: SharedLocationResponseData;\n  GeolocationAttachmentMapPlaceholder?: ComponentType<GeolocationAttachmentMapPlaceholderProps>;\n  GeolocationMap?: ComponentType<GeolocationMapProps>;\n};\n\nexport const Geolocation = ({\n  GeolocationAttachmentMapPlaceholder = DefaultGeolocationAttachmentMapPlaceholder,\n  GeolocationMap,\n  location,\n}: GeolocationProps) => {\n  const { client } = useChatContext();\n  const channel = useChannel();\n  const { t } = useTranslationContext();\n\n  const [stoppedSharing, setStoppedSharing] = useState(\n    isSchedulableExpiry(location.end_at) && location.end_at < nowNs(),\n  );\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n  const isMyLocation = location.user_id === client.userID;\n  const isLiveLocation = location.end_at != null;\n  const endAt = location.end_at;\n\n  useEffect(() => {\n    if (!isSchedulableExpiry(endAt)) return;\n\n    const arm = () => {\n      // Both operands are wire timestamps, so the difference is in nanoseconds. Passing it raw\n      // made `setTimeout` fire immediately and end sharing on mount.\n      const remaining = Math.max(0, nsToMs(endAt - nowNs()));\n      timeoutRef.current =\n        remaining > MAX_TIMEOUT_MS\n          ? // Wait the maximum, then re-arm. One call would be clamped to 1 ms, showing\n            // \"sharing ended\" on mount for any share longer than ~24.9 days.\n            setTimeout(arm, MAX_TIMEOUT_MS)\n          : setTimeout(() => setStoppedSharing(true), remaining);\n    };\n\n    arm();\n    return () => clearTimeout(timeoutRef.current);\n  }, [endAt]);\n\n  return (\n    <div\n      className='str-chat__message-attachment-geolocation'\n      data-testid='attachment-geolocation'\n    >\n      <div className='str-chat__message-attachment-geolocation__location-preview'>\n        {GeolocationMap ? (\n          <GeolocationMap latitude={location.latitude} longitude={location.longitude} />\n        ) : (\n          <GeolocationAttachmentMapPlaceholder location={location} />\n        )}\n      </div>\n      <div className='str-chat__message-attachment-geolocation__status'>\n        {isLiveLocation ? (\n          stoppedSharing ? (\n            t(\n              'attachment.geolocation.locationSharingEnded.text',\n              'Location sharing ended',\n            )\n          ) : isMyLocation ? (\n            <div className='str-chat__message-attachment-geolocation__status--active'>\n              <Button\n                appearance='outline'\n                className='str-chat__message-attachment-geolocation__stop-sharing-button'\n                onClick={() =>\n                  // The request shape, not the whole response: `stopLiveLocationSharing` stamps\n                  // `end_at` itself, and the response's timestamps are wire numbers a request\n                  // field cannot take.\n                  channel?.stopLiveLocationSharing({ message_id: location.message_id })\n                }\n                size='sm'\n                variant='secondary'\n              >\n                {t('attachment.geolocation.stopSharing.text', 'Stop sharing')}\n              </Button>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t(\n                  'attachment.geolocation.liveUntil.text',\n                  'Live until {{ timestamp }}',\n                  {\n                    timestamp: t('timestamp.LiveLocation', {\n                      timestamp: convertTimestampToDate(location.end_at),\n                    }),\n                  },\n                )}\n              </div>\n            </div>\n          ) : (\n            <div className='str-chat__message-attachment-geolocation__status--active'>\n              <div className='str-chat__message-attachment-geolocation__status--active-status'>\n                {t('common.liveLocation.text', 'Live location')}\n              </div>\n              <div className='str-chat__message-attachment-geolocation__status--active-until'>\n                {t(\n                  'attachment.geolocation.liveUntil.text',\n                  'Live until {{ timestamp }}',\n                  {\n                    timestamp: t('timestamp.LiveLocation', {\n                      timestamp: convertTimestampToDate(location.end_at),\n                    }),\n                  },\n                )}\n              </div>\n            </div>\n          )\n        ) : (\n          t('common.currentLocation.text', 'Current location')\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type GeolocationAttachmentMapPlaceholderProps = {\n  location: SharedLocationResponseData;\n};\n\nconst DefaultGeolocationAttachmentMapPlaceholder = ({\n  location,\n}: GeolocationAttachmentMapPlaceholderProps) => {\n  const { IconLocation } = useComponentContextIcons();\n  const { t } = useTranslationContext();\n\n  return (\n    <div\n      className='str-chat__message-attachment-geolocation__placeholder'\n      data-testid='geolocation-attachment-map-placeholder'\n    >\n      <IconLocation />\n      <a\n        aria-label={t(\n          'attachment.geolocation.openLocationMap.ariaLabel',\n          'Open location in a map',\n        )}\n        className='str-chat__message-attachment-geolocation__placeholder-link'\n        href={`https://maps.google.com?q=${[location.latitude, location.longitude].join()}`}\n        rel='noreferrer'\n        target='_blank'\n      >\n        <ExternalLinkIcon />\n      </a>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,iBAAiB,KAAK,KAAK;;AAGjC,IAAM,uBAAuB,UAC3B,SAAS,QAAQ,OAAO,SAAS,KAAK;AAQxC,IAAa,eAAe,EAC1B,sCAAsC,4CACtC,gBACA,eACsB;CACtB,MAAM,EAAE,WAAW,eAAe;CAClC,MAAM,UAAU,WAAW;CAC3B,MAAM,EAAE,MAAM,sBAAsB;CAEpC,MAAM,CAAC,gBAAgB,qBAAqB,SAC1C,oBAAoB,SAAS,MAAM,KAAK,SAAS,SAAS,MAAM,CAClE;CACA,MAAM,aAAa,OAAkD,KAAA,CAAS;CAE9E,MAAM,eAAe,SAAS,YAAY,OAAO;CACjD,MAAM,iBAAiB,SAAS,UAAU;CAC1C,MAAM,QAAQ,SAAS;CAEvB,gBAAgB;EACd,IAAI,CAAC,oBAAoB,KAAK,GAAG;EAEjC,MAAM,YAAY;GAGhB,MAAM,YAAY,KAAK,IAAI,GAAG,OAAO,QAAQ,MAAM,CAAC,CAAC;GACrD,WAAW,UACT,YAAY,iBAGR,WAAW,KAAK,cAAc,IAC9B,iBAAiB,kBAAkB,IAAI,GAAG,SAAS;EAC3D;EAEA,IAAI;EACJ,aAAa,aAAa,WAAW,OAAO;CAC9C,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,OAAD;GAAK,WAAU;aACZ,iBACC,oBAAC,gBAAD;IAAgB,UAAU,SAAS;IAAU,WAAW,SAAS;GAAY,CAAA,IAE7E,oBAAC,qCAAD,EAA+C,SAAW,CAAA;EAEzD,CAAA,GACL,oBAAC,OAAD;GAAK,WAAU;aACZ,iBACC,iBACE,EACE,oDACA,wBACF,IACE,eACF,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,YAAW;KACX,WAAU;KACV,eAIE,SAAS,wBAAwB,EAAE,YAAY,SAAS,WAAW,CAAC;KAEtE,MAAK;KACL,SAAQ;eAEP,EAAE,2CAA2C,cAAc;IACtD,CAAA,GACR,oBAAC,OAAD;KAAK,WAAU;eACZ,EACC,yCACA,8BACA,EACE,WAAW,EAAE,0BAA0B,EACrC,WAAW,uBAAuB,SAAS,MAAM,EACnD,CAAC,EACH,CACF;IACG,CAAA,CACF;QAEL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ,EAAE,4BAA4B,eAAe;IAC3C,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;eACZ,EACC,yCACA,8BACA,EACE,WAAW,EAAE,0BAA0B,EACrC,WAAW,uBAAuB,SAAS,MAAM,EACnD,CAAC,EACH,CACF;IACG,CAAA,CACF;QAGP,EAAE,+BAA+B,kBAAkB;EAElD,CAAA,CACF;;AAET;AAMA,IAAM,8CAA8C,EAClD,eAC8C;CAC9C,MAAM,EAAE,iBAAiB,yBAAyB;CAClD,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,qBAAC,OAAD;EACE,WAAU;EACV,eAAY;YAFd,CAIE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,KAAD;GACE,cAAY,EACV,oDACA,wBACF;GACA,WAAU;GACV,MAAM,6BAA6B,CAAC,SAAS,UAAU,SAAS,SAAS,CAAC,CAAC,KAAK;GAChF,KAAI;GACJ,QAAO;aAEP,oBAAC,kBAAD,CAAmB,CAAA;EAClB,CAAA,CACA;;AAET"}

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

@@ -1,16 +1,16 @@
-import { useChannelStateContext } from "../../context/ChannelStateContext.mjs";
+import { useAttachmentContext } from "../../context/AttachmentContext.mjs";
 import { useComponentContext } from "../../context/ComponentContext.mjs";
-import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useTranslationContext } from "../../context/TranslationContext.mjs";
 import { getGiphyDescriptiveTitle } from "./giphyAccessibility.mjs";
 import { BaseImage } from "../BaseImage/BaseImage.mjs";
 import { toGalleryItemDescriptors } from "../Gallery/GalleryContext.mjs";
+import { useComponentContextIcons } from "../../context/useComponentContextIcons.mjs";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Attachment/Giphy.tsx
 var Giphy = ({ attachment }) => {
-	const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = useChannelStateContext();
+	const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } = useAttachmentContext();
 	const { BaseImage: BaseImage$1 = BaseImage } = useComponentContext();
 	const { t } = useTranslationContext();
 	const usesDefaultBaseImage = BaseImage$1 === BaseImage;
@@ -22,7 +22,7 @@ var Giphy = ({ attachment }) => {
 	const title = imageDescriptors && imageDescriptors.title;
 	const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;
 	const descriptiveTitle = getGiphyDescriptiveTitle(title);
-	const accessibleName = descriptiveTitle ? t("aria/Animated GIF: {{ title }}", { title: descriptiveTitle }) : t("aria/Animated GIF");
+	const accessibleName = descriptiveTitle ? t("attachment.giphy.animatedGif.withTitle.ariaLabel", "Animated GIF: {{ title }}", { title: descriptiveTitle }) : t("attachment.giphy.animatedGif.ariaLabel", "Animated GIF");
 	const imageStyleVariables = useMemo(() => {
 		const originalHeight = Number(dimensions?.height);
 		const originalWidth = Number(dimensions?.width);

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

@@ -1 +1 @@
-{"version":3,"file":"Giphy.mjs","names":[],"sources":["../../../../src/components/Attachment/Giphy.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport { BaseImage as DefaultBaseImage } from '../BaseImage';\nimport { toGalleryItemDescriptors } from '../Gallery';\nimport { getGiphyDescriptiveTitle } from './giphyAccessibility';\nimport clsx from 'clsx';\nimport {\n  useChannelStateContext,\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ImageAttachmentConfiguration } from '../../types/types';\n\nexport type GiphyAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const Giphy = ({ attachment }: GiphyAttachmentProps) => {\n  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } =\n    useChannelStateContext();\n  const { BaseImage = DefaultBaseImage } = useComponentContext();\n  const { t } = useTranslationContext();\n  const usesDefaultBaseImage = BaseImage === DefaultBaseImage;\n  const imageElement = useRef<HTMLImageElement>(null);\n  const [attachmentConfiguration, setAttachmentConfiguration] = useState<\n    ImageAttachmentConfiguration | undefined\n  >(undefined);\n\n  const imageDescriptors = useMemo(\n    () => toGalleryItemDescriptors(attachment, { giphyVersionName }),\n    [attachment, giphyVersionName],\n  );\n  const dimensions = imageDescriptors && imageDescriptors.dimensions;\n  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;\n  const title = imageDescriptors && imageDescriptors.title;\n  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;\n  // For giphy attachments `imageDescriptors.alt`/`title` may both resolve to a raw\n  // media URL (Giphy payloads rarely carry a human title), which is useless to\n  // screen-reader users. Prefer a real, non-URL title; otherwise fall back to a\n  // localized generic label instead of exposing the URL as the accessible name.\n  const descriptiveTitle = getGiphyDescriptiveTitle(title);\n  const accessibleName = descriptiveTitle\n    ? t('aria/Animated GIF: {{ title }}', { title: descriptiveTitle })\n    : t('aria/Animated GIF');\n  const imageStyleVariables = useMemo(() => {\n    const originalHeight = Number(dimensions?.height);\n    const originalWidth = Number(dimensions?.width);\n\n    return {\n      '--original-height': String(originalHeight > 1 ? originalHeight : 1000000),\n      '--original-width': String(originalWidth > 1 ? originalWidth : 1000000),\n    } as CSSProperties;\n  }, [dimensions?.height, dimensions?.width]);\n\n  useLayoutEffect(() => {\n    if (!imageElement.current || !imageAttachmentSizeHandler) return;\n\n    const config = imageAttachmentSizeHandler(attachment, imageElement.current);\n    setAttachmentConfiguration(config);\n  }, [attachment, imageAttachmentSizeHandler]);\n\n  if (!imageUrl) return null;\n\n  return (\n    <div className={clsx(`str-chat__message-attachment-giphy`)}>\n      <BaseImage\n        alt={accessibleName}\n        height={dimensions?.height}\n        ref={imageElement}\n        src={resolvedImageUrl}\n        style={imageStyleVariables}\n        width={dimensions?.width}\n        {...(usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {})}\n      />\n      <GiphyBadge />\n    </div>\n  );\n};\n\nconst GiphyBadge = () => {\n  const { IconGiphy } = useComponentContextIcons();\n  return (\n    <div className='str-chat__giphy-badge'>\n      <IconGiphy />\n      Giphy\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,IAAa,SAAS,EAAE,iBAAuC;CAC7D,MAAM,EAAE,cAAc,kBAAkB,+BACtC,uBAAuB;CACzB,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,uBAAuB,gBAAc;CAC3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,CAAC,yBAAyB,8BAA8B,SAE5D,KAAA,CAAS;CAEX,MAAM,mBAAmB,cACjB,yBAAyB,YAAY,EAAE,iBAAiB,CAAC,GAC/D,CAAC,YAAY,gBAAgB,CAC/B;CACA,MAAM,aAAa,oBAAoB,iBAAiB;CACxD,MAAM,WAAW,oBAAoB,iBAAiB;CACtD,MAAM,QAAQ,oBAAoB,iBAAiB;CACnD,MAAM,mBAAmB,yBAAyB,OAAO;CAKzD,MAAM,mBAAmB,yBAAyB,KAAK;CACvD,MAAM,iBAAiB,mBACnB,EAAE,kCAAkC,EAAE,OAAO,iBAAiB,CAAC,IAC/D,EAAE,mBAAmB;CACzB,MAAM,sBAAsB,cAAc;EACxC,MAAM,iBAAiB,OAAO,YAAY,MAAM;EAChD,MAAM,gBAAgB,OAAO,YAAY,KAAK;EAE9C,OAAO;GACL,qBAAqB,OAAO,iBAAiB,IAAI,iBAAiB,GAAO;GACzE,oBAAoB,OAAO,gBAAgB,IAAI,gBAAgB,GAAO;EACxE;CACF,GAAG,CAAC,YAAY,QAAQ,YAAY,KAAK,CAAC;CAE1C,sBAAsB;EACpB,IAAI,CAAC,aAAa,WAAW,CAAC,4BAA4B;EAG1D,2BADe,2BAA2B,YAAY,aAAa,OACxC,CAAM;CACnC,GAAG,CAAC,YAAY,0BAA0B,CAAC;CAE3C,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,oCAAoC;YAAzD,CACE,oBAAC,aAAD;GACE,KAAK;GACL,QAAQ,YAAY;GACpB,KAAK;GACL,KAAK;GACL,OAAO;GACP,OAAO,YAAY;GACnB,GAAK,uBAAuB,EAAE,2BAA2B,MAAM,IAAI,CAAC;EACrE,CAAA,GACD,oBAAC,YAAD,CAAa,CAAA,CACV;;AAET;AAEA,IAAM,mBAAmB;CACvB,MAAM,EAAE,cAAc,yBAAyB;CAC/C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,WAAD,CAAY,CAAA,GAAC,OAEV;;AAET"}
+{"version":3,"file":"Giphy.mjs","names":[],"sources":["../../../../src/components/Attachment/Giphy.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport { BaseImage as DefaultBaseImage } from '../BaseImage';\nimport { toGalleryItemDescriptors } from '../Gallery';\nimport { getGiphyDescriptiveTitle } from './giphyAccessibility';\nimport clsx from 'clsx';\nimport {\n  useComponentContext,\n  useComponentContextIcons,\n  useTranslationContext,\n} from '../../context';\nimport { type CSSProperties, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport {\n  type ImageAttachmentConfiguration,\n  useAttachmentContext,\n} from '../../context/AttachmentContext';\n\nexport type GiphyAttachmentProps = {\n  attachment: Attachment;\n};\n\nexport const Giphy = ({ attachment }: GiphyAttachmentProps) => {\n  const { giphyVersion: giphyVersionName, imageAttachmentSizeHandler } =\n    useAttachmentContext();\n  const { BaseImage = DefaultBaseImage } = useComponentContext();\n  const { t } = useTranslationContext();\n  const usesDefaultBaseImage = BaseImage === DefaultBaseImage;\n  const imageElement = useRef<HTMLImageElement>(null);\n  const [attachmentConfiguration, setAttachmentConfiguration] = useState<\n    ImageAttachmentConfiguration | undefined\n  >(undefined);\n\n  const imageDescriptors = useMemo(\n    () => toGalleryItemDescriptors(attachment, { giphyVersionName }),\n    [attachment, giphyVersionName],\n  );\n  const dimensions = imageDescriptors && imageDescriptors.dimensions;\n  const imageUrl = imageDescriptors && imageDescriptors.imageUrl;\n  const title = imageDescriptors && imageDescriptors.title;\n  const resolvedImageUrl = attachmentConfiguration?.url || imageUrl;\n  // For giphy attachments `imageDescriptors.alt`/`title` may both resolve to a raw\n  // media URL (Giphy payloads rarely carry a human title), which is useless to\n  // screen-reader users. Prefer a real, non-URL title; otherwise fall back to a\n  // localized generic label instead of exposing the URL as the accessible name.\n  const descriptiveTitle = getGiphyDescriptiveTitle(title);\n  const accessibleName = descriptiveTitle\n    ? t('attachment.giphy.animatedGif.withTitle.ariaLabel', 'Animated GIF: {{ title }}', {\n        title: descriptiveTitle,\n      })\n    : t('attachment.giphy.animatedGif.ariaLabel', 'Animated GIF');\n  const imageStyleVariables = useMemo(() => {\n    const originalHeight = Number(dimensions?.height);\n    const originalWidth = Number(dimensions?.width);\n\n    return {\n      '--original-height': String(originalHeight > 1 ? originalHeight : 1000000),\n      '--original-width': String(originalWidth > 1 ? originalWidth : 1000000),\n    } as CSSProperties;\n  }, [dimensions?.height, dimensions?.width]);\n\n  useLayoutEffect(() => {\n    if (!imageElement.current || !imageAttachmentSizeHandler) return;\n\n    const config = imageAttachmentSizeHandler(attachment, imageElement.current);\n    setAttachmentConfiguration(config);\n  }, [attachment, imageAttachmentSizeHandler]);\n\n  if (!imageUrl) return null;\n\n  return (\n    <div className={clsx(`str-chat__message-attachment-giphy`)}>\n      <BaseImage\n        alt={accessibleName}\n        height={dimensions?.height}\n        ref={imageElement}\n        src={resolvedImageUrl}\n        style={imageStyleVariables}\n        width={dimensions?.width}\n        {...(usesDefaultBaseImage ? { showDownloadButtonOnError: false } : {})}\n      />\n      <GiphyBadge />\n    </div>\n  );\n};\n\nconst GiphyBadge = () => {\n  const { IconGiphy } = useComponentContextIcons();\n\n  return (\n    <div className='str-chat__giphy-badge'>\n      <IconGiphy />\n      Giphy\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,IAAa,SAAS,EAAE,iBAAuC;CAC7D,MAAM,EAAE,cAAc,kBAAkB,+BACtC,qBAAqB;CACvB,MAAM,EAAE,WAAA,cAAY,cAAqB,oBAAoB;CAC7D,MAAM,EAAE,MAAM,sBAAsB;CACpC,MAAM,uBAAuB,gBAAc;CAC3C,MAAM,eAAe,OAAyB,IAAI;CAClD,MAAM,CAAC,yBAAyB,8BAA8B,SAE5D,KAAA,CAAS;CAEX,MAAM,mBAAmB,cACjB,yBAAyB,YAAY,EAAE,iBAAiB,CAAC,GAC/D,CAAC,YAAY,gBAAgB,CAC/B;CACA,MAAM,aAAa,oBAAoB,iBAAiB;CACxD,MAAM,WAAW,oBAAoB,iBAAiB;CACtD,MAAM,QAAQ,oBAAoB,iBAAiB;CACnD,MAAM,mBAAmB,yBAAyB,OAAO;CAKzD,MAAM,mBAAmB,yBAAyB,KAAK;CACvD,MAAM,iBAAiB,mBACnB,EAAE,oDAAoD,6BAA6B,EACjF,OAAO,iBACT,CAAC,IACD,EAAE,0CAA0C,cAAc;CAC9D,MAAM,sBAAsB,cAAc;EACxC,MAAM,iBAAiB,OAAO,YAAY,MAAM;EAChD,MAAM,gBAAgB,OAAO,YAAY,KAAK;EAE9C,OAAO;GACL,qBAAqB,OAAO,iBAAiB,IAAI,iBAAiB,GAAO;GACzE,oBAAoB,OAAO,gBAAgB,IAAI,gBAAgB,GAAO;EACxE;CACF,GAAG,CAAC,YAAY,QAAQ,YAAY,KAAK,CAAC;CAE1C,sBAAsB;EACpB,IAAI,CAAC,aAAa,WAAW,CAAC,4BAA4B;EAG1D,2BADe,2BAA2B,YAAY,aAAa,OACxC,CAAM;CACnC,GAAG,CAAC,YAAY,0BAA0B,CAAC;CAE3C,IAAI,CAAC,UAAU,OAAO;CAEtB,OACE,qBAAC,OAAD;EAAK,WAAW,KAAK,oCAAoC;YAAzD,CACE,oBAAC,aAAD;GACE,KAAK;GACL,QAAQ,YAAY;GACpB,KAAK;GACL,KAAK;GACL,OAAO;GACP,OAAO,YAAY;GACnB,GAAK,uBAAuB,EAAE,2BAA2B,MAAM,IAAI,CAAC;EACrE,CAAA,GACD,oBAAC,YAAD,CAAa,CAAA,CACV;;AAET;AAEA,IAAM,mBAAmB;CACvB,MAAM,EAAE,cAAc,yBAAyB;CAE/C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,WAAD,CAAY,CAAA,GAAC,OAEV;;AAET"}

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

@@ -1,8 +1,8 @@
-import { useChannelStateContext } from "../../../context/ChannelStateContext.mjs";
-import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
+import { useAttachmentContext } from "../../../context/AttachmentContext.mjs";
 import { BaseImage } from "../../BaseImage/BaseImage.mjs";
 import { SafeAnchor } from "../../SafeAnchor/SafeAnchor.mjs";
 import { UnableToRenderCard } from "./UnableToRenderCard.mjs";
+import { useComponentContextIcons } from "../../../context/useComponentContextIcons.mjs";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
@@ -35,9 +35,9 @@ var CardHeader = (props) => {
 	}) : null;
 };
 var CardContent = (props) => {
+	const { IconLink } = useComponentContextIcons();
 	const { og_scrape_url, text, title, title_link } = props;
 	const url = title_link || og_scrape_url;
-	const { IconLink } = useComponentContextIcons();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "str-chat__message-attachment-card--content",
 		children: [
@@ -62,7 +62,7 @@ var CardContent = (props) => {
 };
 var UnMemoizedCard = (props) => {
 	const { giphy, image_url, og_scrape_url, thumb_url, title, title_link, type } = props;
-	const { giphyVersion: giphyVersionName } = useChannelStateContext("");
+	const { giphyVersion: giphyVersionName } = useAttachmentContext();
 	const cardUrl = title_link || og_scrape_url;
 	let image = thumb_url || image_url;
 	const dimensions = {};

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

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../../src/components/Attachment/LinkPreview/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseImage } from '../../BaseImage';\nimport { SafeAnchor } from '../../SafeAnchor';\nimport { useChannelStateContext } from '../../../context/ChannelStateContext';\nimport { useComponentContextIcons } from '../../../context';\n\nimport type { Attachment } from 'stream-chat';\nimport type { RenderAttachmentProps } from '../utils';\nimport type { Dimensions } from '../../../types/types';\nimport { UnableToRenderCard } from './UnableToRenderCard';\nimport clsx from 'clsx';\n\ntype CardRootProps = {\n  cardUrl: string | undefined;\n  children: React.ReactNode;\n  type?: CardProps['type'];\n};\n\nconst CardRoot = ({ cardUrl, children, type }: CardRootProps) => {\n  const className = clsx(\n    `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`,\n  );\n\n  return cardUrl ? (\n    <SafeAnchor\n      className={className}\n      href={cardUrl}\n      rel='noopener noreferrer'\n      target='_blank'\n    >\n      {children}\n    </SafeAnchor>\n  ) : (\n    <div className={className}>{children}</div>\n  );\n};\n\ntype CardHeaderProps = Pick<CardProps, 'title' | 'type' | 'image_url' | 'thumb_url'> & {\n  dimensions: Dimensions;\n  image?: string;\n};\n\nconst CardHeader = (props: CardHeaderProps) => {\n  const { dimensions, image, image_url, thumb_url, title } = props;\n\n  return image ? (\n    <div\n      className='str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header'\n      data-testid={'card-header'}\n    >\n      <BaseImage\n        alt={title || image}\n        data-testid='image-test'\n        src={image_url ?? thumb_url}\n        title={title || image}\n        {...dimensions}\n      />\n    </div>\n  ) : null;\n};\n\ntype CardContentProps = RenderAttachmentProps['attachment'];\n\nconst CardContent = (props: CardContentProps) => {\n  const { og_scrape_url, text, title, title_link } = props;\n  const url = title_link || og_scrape_url;\n  const { IconLink } = useComponentContextIcons();\n\n  return (\n    <div className='str-chat__message-attachment-card--content'>\n      {title && <div className='str-chat__message-attachment-card--title'>{title}</div>}\n      {text && <div className='str-chat__message-attachment-card--text'>{text}</div>}\n      {url && (\n        <div\n          className='str-chat__message-attachment-card--source-link'\n          data-testid='card-source-link'\n        >\n          <IconLink />\n          <div className='str-chat__message-attachment-card--url'>{url}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type CardProps = RenderAttachmentProps['attachment'] & {\n  compact?: boolean;\n};\n\nconst UnMemoizedCard = (props: CardProps) => {\n  const { giphy, image_url, og_scrape_url, thumb_url, title, title_link, type } = props;\n  const { giphyVersion: giphyVersionName } = useChannelStateContext('');\n  const cardUrl = title_link || og_scrape_url;\n\n  let image = thumb_url || image_url;\n  const dimensions: { height?: string; width?: string } = {};\n\n  if (type === 'giphy' && typeof giphy !== 'undefined') {\n    const giphyVersion =\n      giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];\n    image = giphyVersion.url;\n    dimensions.height = giphyVersion.height;\n    dimensions.width = giphyVersion.width;\n  }\n\n  if (!title && !cardUrl && !image) {\n    return <UnableToRenderCard />;\n  }\n\n  return (\n    <CardRoot cardUrl={cardUrl} type={type}>\n      <CardHeader {...props} dimensions={dimensions} image={image} />\n      <CardContent {...props} />\n    </CardRoot>\n  );\n};\n\n/**\n * Simple Card Layout for displaying links\n */\nexport const Card = React.memo(UnMemoizedCard) as typeof UnMemoizedCard;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,YAAY,EAAE,SAAS,UAAU,WAA0B;CAC/D,MAAM,YAAY,KAChB,wEAAwE,MAC1E;CAEA,OAAO,UACL,oBAAC,YAAD;EACa;EACX,MAAM;EACN,KAAI;EACJ,QAAO;EAEN;CACS,CAAA,IAEZ,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AAE9C;AAOA,IAAM,cAAc,UAA2B;CAC7C,MAAM,EAAE,YAAY,OAAO,WAAW,WAAW,UAAU;CAE3D,OAAO,QACL,oBAAC,OAAD;EACE,WAAU;EACV,eAAa;YAEb,oBAAC,WAAD;GACE,KAAK,SAAS;GACd,eAAY;GACZ,KAAK,aAAa;GAClB,OAAO,SAAS;GAChB,GAAI;EACL,CAAA;CACE,CAAA,IACH;AACN;AAIA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,eAAe,MAAM,OAAO,eAAe;CACnD,MAAM,MAAM,cAAc;CAC1B,MAAM,EAAE,aAAa,yBAAyB;CAE9C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SAAS,oBAAC,OAAD;IAAK,WAAU;cAA4C;GAAW,CAAA;GAC/E,QAAQ,oBAAC,OAAD;IAAK,WAAU;cAA2C;GAAU,CAAA;GAC5E,OACC,qBAAC,OAAD;IACE,WAAU;IACV,eAAY;cAFd,CAIE,oBAAC,UAAD,CAAW,CAAA,GACX,oBAAC,OAAD;KAAK,WAAU;eAA0C;IAAS,CAAA,CAC/D;;EAEJ;;AAET;AAMA,IAAM,kBAAkB,UAAqB;CAC3C,MAAM,EAAE,OAAO,WAAW,eAAe,WAAW,OAAO,YAAY,SAAS;CAChF,MAAM,EAAE,cAAc,qBAAqB,uBAAuB,EAAE;CACpE,MAAM,UAAU,cAAc;CAE9B,IAAI,QAAQ,aAAa;CACzB,MAAM,aAAkD,CAAC;CAEzD,IAAI,SAAS,WAAW,OAAO,UAAU,aAAa;EACpD,MAAM,eACJ,MAAM;EACR,QAAQ,aAAa;EACrB,WAAW,SAAS,aAAa;EACjC,WAAW,QAAQ,aAAa;CAClC;CAEA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OACzB,OAAO,oBAAC,oBAAD,CAAqB,CAAA;CAG9B,OACE,qBAAC,UAAD;EAAmB;EAAe;YAAlC,CACE,oBAAC,YAAD;GAAY,GAAI;GAAmB;GAAmB;EAAQ,CAAA,GAC9D,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA,CACjB;;AAEd;;;;AAKA,IAAa,OAAO,MAAM,KAAK,cAAc"}
+{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../../src/components/Attachment/LinkPreview/Card.tsx"],"sourcesContent":["import React from 'react';\nimport { BaseImage } from '../../BaseImage';\nimport { SafeAnchor } from '../../SafeAnchor';\nimport { useAttachmentContext } from '../../../context/AttachmentContext';\n\nimport type { Attachment } from 'stream-chat';\nimport type { RenderAttachmentProps } from '../utils';\nimport type { Dimensions } from '../../../types/types';\nimport { UnableToRenderCard } from './UnableToRenderCard';\nimport clsx from 'clsx';\nimport { useComponentContextIcons } from '../../../context';\n\ntype CardRootProps = {\n  cardUrl: string | undefined;\n  children: React.ReactNode;\n  type?: CardProps['type'];\n};\n\nconst CardRoot = ({ cardUrl, children, type }: CardRootProps) => {\n  const className = clsx(\n    `str-chat__message-attachment-card str-chat__message-attachment-card--${type}`,\n  );\n\n  return cardUrl ? (\n    <SafeAnchor\n      className={className}\n      href={cardUrl}\n      rel='noopener noreferrer'\n      target='_blank'\n    >\n      {children}\n    </SafeAnchor>\n  ) : (\n    <div className={className}>{children}</div>\n  );\n};\n\ntype CardHeaderProps = Pick<CardProps, 'title' | 'type' | 'image_url' | 'thumb_url'> & {\n  dimensions: Dimensions;\n  image?: string;\n};\n\nconst CardHeader = (props: CardHeaderProps) => {\n  const { dimensions, image, image_url, thumb_url, title } = props;\n\n  return image ? (\n    <div\n      className='str-chat__message-attachment-card--header str-chat__message-attachment-card-react--header'\n      data-testid={'card-header'}\n    >\n      <BaseImage\n        alt={title || image}\n        data-testid='image-test'\n        src={image_url ?? thumb_url}\n        title={title || image}\n        {...dimensions}\n      />\n    </div>\n  ) : null;\n};\n\ntype CardContentProps = RenderAttachmentProps['attachment'];\n\nconst CardContent = (props: CardContentProps) => {\n  const { IconLink } = useComponentContextIcons();\n  const { og_scrape_url, text, title, title_link } = props;\n  const url = title_link || og_scrape_url;\n\n  return (\n    <div className='str-chat__message-attachment-card--content'>\n      {title && <div className='str-chat__message-attachment-card--title'>{title}</div>}\n      {text && <div className='str-chat__message-attachment-card--text'>{text}</div>}\n      {url && (\n        <div\n          className='str-chat__message-attachment-card--source-link'\n          data-testid='card-source-link'\n        >\n          <IconLink />\n          <div className='str-chat__message-attachment-card--url'>{url}</div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport type CardProps = RenderAttachmentProps['attachment'] & {\n  compact?: boolean;\n};\n\nconst UnMemoizedCard = (props: CardProps) => {\n  const { giphy, image_url, og_scrape_url, thumb_url, title, title_link, type } = props;\n  const { giphyVersion: giphyVersionName } = useAttachmentContext();\n  const cardUrl = title_link || og_scrape_url;\n\n  let image = thumb_url || image_url;\n  const dimensions: { height?: string; width?: string } = {};\n\n  if (type === 'giphy' && typeof giphy !== 'undefined') {\n    const giphyVersion =\n      giphy[giphyVersionName as keyof NonNullable<Attachment['giphy']>];\n    image = giphyVersion.url;\n    dimensions.height = giphyVersion.height;\n    dimensions.width = giphyVersion.width;\n  }\n\n  if (!title && !cardUrl && !image) {\n    return <UnableToRenderCard />;\n  }\n\n  return (\n    <CardRoot cardUrl={cardUrl} type={type}>\n      <CardHeader {...props} dimensions={dimensions} image={image} />\n      <CardContent {...props} />\n    </CardRoot>\n  );\n};\n\n/**\n * Simple Card Layout for displaying links\n */\nexport const Card = React.memo(UnMemoizedCard) as typeof UnMemoizedCard;\n"],"mappings":";;;;;;;;;AAkBA,IAAM,YAAY,EAAE,SAAS,UAAU,WAA0B;CAC/D,MAAM,YAAY,KAChB,wEAAwE,MAC1E;CAEA,OAAO,UACL,oBAAC,YAAD;EACa;EACX,MAAM;EACN,KAAI;EACJ,QAAO;EAEN;CACS,CAAA,IAEZ,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AAE9C;AAOA,IAAM,cAAc,UAA2B;CAC7C,MAAM,EAAE,YAAY,OAAO,WAAW,WAAW,UAAU;CAE3D,OAAO,QACL,oBAAC,OAAD;EACE,WAAU;EACV,eAAa;YAEb,oBAAC,WAAD;GACE,KAAK,SAAS;GACd,eAAY;GACZ,KAAK,aAAa;GAClB,OAAO,SAAS;GAChB,GAAI;EACL,CAAA;CACE,CAAA,IACH;AACN;AAIA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,aAAa,yBAAyB;CAC9C,MAAM,EAAE,eAAe,MAAM,OAAO,eAAe;CACnD,MAAM,MAAM,cAAc;CAE1B,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,SAAS,oBAAC,OAAD;IAAK,WAAU;cAA4C;GAAW,CAAA;GAC/E,QAAQ,oBAAC,OAAD;IAAK,WAAU;cAA2C;GAAU,CAAA;GAC5E,OACC,qBAAC,OAAD;IACE,WAAU;IACV,eAAY;cAFd,CAIE,oBAAC,UAAD,CAAW,CAAA,GACX,oBAAC,OAAD;KAAK,WAAU;eAA0C;IAAS,CAAA,CAC/D;;EAEJ;;AAET;AAMA,IAAM,kBAAkB,UAAqB;CAC3C,MAAM,EAAE,OAAO,WAAW,eAAe,WAAW,OAAO,YAAY,SAAS;CAChF,MAAM,EAAE,cAAc,qBAAqB,qBAAqB;CAChE,MAAM,UAAU,cAAc;CAE9B,IAAI,QAAQ,aAAa;CACzB,MAAM,aAAkD,CAAC;CAEzD,IAAI,SAAS,WAAW,OAAO,UAAU,aAAa;EACpD,MAAM,eACJ,MAAM;EACR,QAAQ,aAAa;EACrB,WAAW,SAAS,aAAa;EACjC,WAAW,QAAQ,aAAa;CAClC;CAEA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OACzB,OAAO,oBAAC,oBAAD,CAAqB,CAAA;CAG9B,OACE,qBAAC,UAAD;EAAmB;EAAe;YAAlC,CACE,oBAAC,YAAD;GAAY,GAAI;GAAmB;GAAmB;EAAQ,CAAA,GAC9D,oBAAC,aAAD,EAAa,GAAI,MAAQ,CAAA,CACjB;;AAEd;;;;AAKA,IAAa,OAAO,MAAM,KAAK,cAAc"}

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

@@ -4,14 +4,14 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 //#region src/components/Attachment/LinkPreview/UnableToRenderCard.tsx
 var UnableToRenderCard = ({ type }) => {
-	const { t } = useTranslationContext("Card");
+	const { t } = useTranslationContext();
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("str-chat__message-attachment-card", { [`str-chat__message-attachment-card--${type}`]: type }),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "str-chat__message-attachment-card--content",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "str-chat__message-attachment-card--text",
-				children: t("this content could not be displayed")
+				children: t("attachment.unableRenderCard.text", "this content could not be displayed")
 			})
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"UnableToRenderCard.mjs","names":[],"sources":["../../../../../src/components/Attachment/LinkPreview/UnableToRenderCard.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport { useTranslationContext } from '../../../context';\nimport clsx from 'clsx';\nimport React from 'react';\n\nexport const UnableToRenderCard = ({ type }: { type?: Attachment['type'] }) => {\n  const { t } = useTranslationContext('Card');\n\n  return (\n    <div\n      className={clsx('str-chat__message-attachment-card', {\n        [`str-chat__message-attachment-card--${type}`]: type,\n      })}\n    >\n      <div className='str-chat__message-attachment-card--content'>\n        <div className='str-chat__message-attachment-card--text'>\n          {t('this content could not be displayed')}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,EAAE,WAA0C;CAC7E,MAAM,EAAE,MAAM,sBAAsB,MAAM;CAE1C,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,qCAAqC,GAClD,sCAAsC,SAAS,KAClD,CAAC;YAED,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACZ,EAAE,qCAAqC;GACrC,CAAA;EACF,CAAA;CACF,CAAA;AAET"}
+{"version":3,"file":"UnableToRenderCard.mjs","names":[],"sources":["../../../../../src/components/Attachment/LinkPreview/UnableToRenderCard.tsx"],"sourcesContent":["import type { Attachment } from 'stream-chat';\nimport { useTranslationContext } from '../../../context';\nimport clsx from 'clsx';\nimport React from 'react';\n\nexport const UnableToRenderCard = ({ type }: { type?: Attachment['type'] }) => {\n  const { t } = useTranslationContext();\n\n  return (\n    <div\n      className={clsx('str-chat__message-attachment-card', {\n        [`str-chat__message-attachment-card--${type}`]: type,\n      })}\n    >\n      <div className='str-chat__message-attachment-card--content'>\n        <div className='str-chat__message-attachment-card--text'>\n          {t('attachment.unableRenderCard.text', 'this content could not be displayed')}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,EAAE,WAA0C;CAC7E,MAAM,EAAE,MAAM,sBAAsB;CAEpC,OACE,oBAAC,OAAD;EACE,WAAW,KAAK,qCAAqC,GAClD,sCAAsC,SAAS,KAClD,CAAC;YAED,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IAAK,WAAU;cACZ,EAAE,oCAAoC,qCAAqC;GACzE,CAAA;EACF,CAAA;CACF,CAAA;AAET"}