@linktr.ee/messaging-react 3.10.0 → 3.11.0

package/src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import { act, renderHook } from '../../../../../test/utils'
+
+import { usePreviewToggle } from './usePreviewToggle'
+
+const source = { sourceUrl: 'https://example.test/asset.mp4' }
+
+describe('usePreviewToggle', () => {
+  it('gallery: reveals without invoking the async source fetcher', async () => {
+    const onFetchSource = vi.fn().mockResolvedValue(source)
+    const onPreviewClick = vi.fn()
+    const { result } = renderHook(() =>
+      usePreviewToggle({ isGallery: true, onFetchSource, onPreviewClick })
+    )
+
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+
+    expect(result.current.isPreviewVisible).toBe(true)
+    expect(onPreviewClick).toHaveBeenCalledTimes(1)
+    expect(onFetchSource).not.toHaveBeenCalled()
+  })
+
+  it('first reveal fetches the source, then caches it on subsequent toggles', async () => {
+    const onFetchSource = vi.fn().mockResolvedValue(source)
+    const { result } = renderHook(() =>
+      usePreviewToggle({ isGallery: false, onFetchSource })
+    )
+
+    // First reveal → fetches.
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+    expect(result.current.isPreviewVisible).toBe(true)
+    expect(result.current.source).toEqual(source)
+    expect(onFetchSource).toHaveBeenCalledTimes(1)
+
+    // Toggle off.
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+    expect(result.current.isPreviewVisible).toBe(false)
+
+    // Toggle back on → reuses the cache, no second fetch.
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+    expect(result.current.isPreviewVisible).toBe(true)
+    expect(onFetchSource).toHaveBeenCalledTimes(1)
+  })
+
+  it('stays locked when the fetcher resolves without a source', async () => {
+    const onFetchSource = vi.fn().mockResolvedValue(undefined)
+    const { result } = renderHook(() =>
+      usePreviewToggle({ isGallery: false, onFetchSource })
+    )
+
+    await act(async () => {
+      await result.current.handleToggle()
+    })
+
+    expect(result.current.isPreviewVisible).toBe(false)
+    expect(result.current.source).toBeUndefined()
+  })
+})

package/src/components/CustomMessage/LockedAttachment/components/_shared/usePreviewToggle.ts

@@ -0,0 +1,89 @@
+import { useCallback, useRef, useState } from 'react'
+
+import type { LockedAttachmentSource } from '../../types'
+
+export interface UsePreviewToggleOptions {
+  /** Gallery items carry their own per-item sources on the `gallery` prop already, so toggling skips the async fetch entirely. */
+  isGallery: boolean
+  /**
+   * Lazily loads the underlying source; the resolved value is cached in
+   * `source` and reused on subsequent toggles.
+   */
+  onFetchSource?: () => Promise<LockedAttachmentSource | void>
+  /** Fired on every toggle tap, before any visibility/fetch logic runs. */
+  onPreviewClick?: () => void
+}
+
+export interface UsePreviewToggleResult {
+  source: LockedAttachmentSource | undefined
+  isPreviewVisible: boolean
+  isLoadingPreview: boolean
+  handleToggle: () => Promise<void>
+  /**
+   * `handleToggle` when the card can actually be previewed (gallery, or a
+   * fetch/click handler is wired), else `undefined` — pass straight to
+   * `PreviewToggle.onToggle` so a non-previewable card renders no
+   * toggle affordance.
+   */
+  togglePreview: (() => Promise<void>) | undefined
+}
+
+/**
+ * Shared preview-toggle state for Composer/Media isMine: flips a locked thumbnail to
+ * its unlocked preview, lazily fetching and caching the source on first
+ * reveal. Media !isMine doesn't use this — it fetches on scroll-into-view/paid
+ * instead of on a toggle tap.
+ */
+export function usePreviewToggle({
+  isGallery,
+  onFetchSource,
+  onPreviewClick,
+}: UsePreviewToggleOptions): UsePreviewToggleResult {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+  const [isPreviewVisible, setIsPreviewVisible] = useState(false)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
+  const fetchingRef = useRef(false)
+
+  const handleToggle = useCallback(async () => {
+    onPreviewClick?.()
+    if (isPreviewVisible) {
+      setIsPreviewVisible(false)
+      return
+    }
+    if (isGallery) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (source) {
+      setIsPreviewVisible(true)
+      return
+    }
+    if (!onFetchSource) return
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    setIsLoadingPreview(true)
+    try {
+      const result = await onFetchSource()
+      if (result) {
+        setSource(result)
+        setIsPreviewVisible(true)
+      }
+    } finally {
+      fetchingRef.current = false
+      setIsLoadingPreview(false)
+    }
+  }, [isPreviewVisible, isGallery, source, onPreviewClick, onFetchSource])
+
+  const togglePreview =
+    isGallery || onFetchSource != null || onPreviewClick != null
+      ? handleToggle
+      : undefined
+
+  return {
+    source,
+    isPreviewVisible,
+    isLoadingPreview,
+    handleToggle,
+    togglePreview,
+  }
+}

package/src/components/CustomMessage/LockedAttachment/components/_shared/useReceivedSource.ts

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import type {
+  FetchSourceHandler,
+  LockedAttachmentSource,
+  PaymentStatus,
+} from '../../types'
+
+export interface UseReceivedSourceOptions {
+  paymentStatus?: PaymentStatus
+  onFetchSource?: FetchSourceHandler
+  /** Called on Unlock click while the card is still unpaid (opens checkout). */
+  onUnlockClick?: () => void
+}
+
+export interface UseReceivedSourceResult {
+  source: LockedAttachmentSource | undefined
+  /** Attach to the card root so the paid-source auto-fetch can observe it. */
+  cardRef: React.RefObject<HTMLDivElement>
+  /** Fetches the source when already paid, else defers to `onUnlockClick`. */
+  handleUnlockClick: () => void
+}
+
+/**
+ * Media !isMine's source-reveal logic: unlike Composer/Media isMine's
+ * tap-to-toggle (`usePreviewToggle`), the recipient's card reveals its source
+ * by fetching once — on click when already paid, or automatically the first
+ * time a paid card scrolls fully into view. The fetch is guarded so it runs
+ * at most once in flight.
+ */
+export function useReceivedSource({
+  paymentStatus,
+  onFetchSource,
+  onUnlockClick,
+}: UseReceivedSourceOptions): UseReceivedSourceResult {
+  const [source, setSource] = useState<LockedAttachmentSource | undefined>()
+
+  const cardRef = useRef<HTMLDivElement>(null)
+  const fetchingRef = useRef(false)
+
+  const onFetchSourceRef = useRef(onFetchSource)
+  onFetchSourceRef.current = onFetchSource
+
+  const fetchSource = useCallback(async (): Promise<void> => {
+    if (fetchingRef.current) return
+    fetchingRef.current = true
+    try {
+      const result = await onFetchSourceRef.current?.()
+      if (result) setSource(result)
+    } finally {
+      fetchingRef.current = false
+    }
+  }, [])
+
+  const handleUnlockClick = useCallback(() => {
+    if (paymentStatus === 'paid') {
+      void fetchSource()
+    } else {
+      onUnlockClick?.()
+    }
+  }, [paymentStatus, fetchSource, onUnlockClick])
+
+  // Auto-fetch the source once the paid card scrolls into view.
+  useEffect(() => {
+    if (!cardRef.current) return
+    if (paymentStatus !== 'paid' || source !== undefined) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          void fetchSource()
+          observer.disconnect()
+        }
+      },
+      { threshold: 1.0 }
+    )
+
+    observer.observe(cardRef.current)
+    return () => observer.disconnect()
+  }, [paymentStatus, source, fetchSource])
+
+  return { source, cardRef, handleUnlockClick }
+}

package/src/components/CustomMessage/LockedAttachment/index.tsx

@@ -0,0 +1,105 @@
+import React, { Suspense } from 'react'
+
+import type {
+  MediaCardDraftProps,
+  MediaCardOtherProps,
+  MediaCardOwnProps,
+  MediaCardPreviewProps,
+} from './components/Media/types'
+import type {
+  TextCardOtherProps,
+  TextCardOwnProps,
+} from './components/Text/types'
+
+const TextCardLazy = React.lazy(() => import('./components/Text/Card'))
+const MediaCardLazy = React.lazy(() => import('./components/Media/Card'))
+
+const LockedAttachmentFallback = () => (
+  <div
+    className="w-[280px] min-h-[200px] animate-pulse rounded-md bg-black/[0.06] shadow-[0_0_0_1px_rgba(0,0,0,0.04),0_1px_2px_rgba(0,0,0,0.04),0_8px_32px_rgba(0,0,0,0.1)]"
+    aria-hidden
+  />
+)
+
+export type DraftProps = MediaCardDraftProps & {
+  /** Drafting is always the sender — doesn't apply here. */
+  isMine?: never
+  /**
+   * "text" renders as a chat bubble showing the real draft `text` instead of
+   * a media thumbnail card. Media-only fields below are ignored in text mode.
+   * Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
+  /** The message's own text, shown as-is (not redacted yet). Only used when `contentType` is `"text"`. */
+  renderedText?: React.ReactNode
+}
+
+export type PreviewProps = MediaCardPreviewProps & {
+  /** Drafting is always the sender — doesn't apply here. */
+  isMine?: never
+  /**
+   * "text" renders as a chat bubble instead of a media thumbnail card.
+   * Media-only fields below are ignored in text mode. Defaults to `"media"`.
+   */
+  contentType?: 'text' | 'media'
+}
+
+export type SentTextOwnProps = TextCardOwnProps & {
+  contentType: 'text'
+  /** Sender's view has no unlock flow — doesn't apply here. */
+  onUnlockClick?: never
+  isUnlocking?: never
+}
+
+export type SentTextOtherProps = TextCardOtherProps & {
+  contentType: 'text'
+}
+
+export type SentMediaOwnProps = MediaCardOwnProps & {
+  contentType?: 'media'
+  /** Sender's view has no unlock/download flow — doesn't apply here. */
+  onUnlockClick?: never
+  isUnlocking?: never
+  onDownloadClick?: never
+}
+
+export type SentMediaOtherProps = MediaCardOtherProps & {
+  contentType?: 'media'
+}
+
+/**
+ * The card for a paid attachment — a still-drafting `isDraft` card, a static
+ * receiver-facing `isPreview` mockup, or a sent text/media card discriminated
+ * by `isMine` + `contentType`. Internally lazy-loads only the one underlying
+ * implementation the resolved branch needs.
+ */
+export type LockedAttachmentProps =
+  | DraftProps
+  | PreviewProps
+  | SentTextOwnProps
+  | SentTextOtherProps
+  | SentMediaOwnProps
+  | SentMediaOtherProps
+
+const LockedAttachment: React.FC<LockedAttachmentProps> = (props) => {
+  return (
+    <Suspense fallback={<LockedAttachmentFallback />}>
+      {props.contentType === 'text' ? (
+        <TextCardLazy {...props} />
+      ) : (
+        <MediaCardLazy {...props} />
+      )}
+    </Suspense>
+  )
+}
+
+export default LockedAttachment
+export { default as PurchaseStatusBadge } from './components/_shared/PurchaseStatusBadge'
+export type { PurchaseStatusBadgeProps } from './components/_shared/PurchaseStatusBadge'
+export type {
+  PaymentStatus,
+  FetchSourceHandler,
+  LockedAttachmentSource,
+  LockedAttachmentGalleryItem,
+  LockedAttachmentContextValue,
+} from './types'

package/src/components/CustomMessage/LockedAttachment/types.ts

@@ -0,0 +1,44 @@
+import type { Channel, LocalMessage } from 'stream-chat'
+
+import type { PaymentStatus } from '../../../stream-custom-data'
+
+export interface LockedAttachmentGalleryItem {
+  /** Drives the per-item play/lock affordance. */
+  mimeType: string
+  /** Poster image, locked or unlocked. */
+  thumbnailUrl?: string
+  /** Media source, shown only when unlocked. */
+  sourceUrl?: string
+}
+
+export interface LockedAttachmentSource {
+  /** Proxied URL for in-app playback. */
+  sourceUrl: string
+  /** Opened when the visitor clicks Download. */
+  redeemUrl?: string
+  /** Overrides the metadata thumbnail when present. */
+  thumbnailUrl?: string
+}
+
+export type { PaymentStatus }
+
+/** Fetches the underlying source; `void` return means none available. */
+export type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>
+
+export interface LockedAttachmentContextValue {
+  /** Whether the given message is mid-checkout. */
+  isUnlocking: (id: string) => boolean
+  /** Opens the checkout flow for a message. */
+  onUnlockClick?: (message: LocalMessage, channel: Channel) => void
+  /** Handles a Download click for a message. */
+  onDownloadClick?: (message: LocalMessage, channel: Channel) => void
+  /** Reveals the locked media's source. Unused for text — payment writes `message.text` directly. */
+  onFetchSource?: (
+    message: LocalMessage,
+    channel: Channel
+  ) => Promise<LockedAttachmentSource | void>
+}
+
+export const defaultLockedAttachmentContextValue: LockedAttachmentContextValue = {
+  isUnlocking: () => false,
+}

package/src/components/CustomMessage/MessageTag.tsx

@@ -47,6 +47,14 @@ export const isAttachmentMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
 }
 
+export const isTextAttachmentMessage = (message: LocalMessage): boolean => {
+  return isAttachmentMessage(message) && message.metadata?.attachment_content_type === 'text'
+}
+
+export const isMediaAttachmentMessage = (message: LocalMessage): boolean => {
+  return isAttachmentMessage(message) && message.metadata?.attachment_content_type !== 'text'
+}
+
 /** Check if a message has a tip/paid tag (both render the same) */
 export const isTipOrPaidMessage = (message: LocalMessage): boolean => {
   return isTipMessage(message) || isPaidMessage(message)

package/src/components/CustomMessage/context.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from '../LockedAttachment/types'
+import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from './LockedAttachment/types'
 
 export interface CustomMessageRegistry {
   LockedAttachment: LockedAttachmentContextValue

package/src/components/CustomMessage/index.tsx

@@ -32,17 +32,17 @@ import {
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
-import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
-import {
-  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
-} from '../MessageAttachment'
+import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
+import LockedAttachment from './LockedAttachment'
 import {
   MessageTag,
   isAttachmentMessage,
   isChatbotMessage,
+  isMediaAttachmentMessage,
+  isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
@@ -145,13 +145,12 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       (total, segment) => total + segment.attachments.length,
       0
     ) === (finalAttachments?.length ?? 0)
-  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
-    {
+  const streamAttachmentGroupPosition =
+    messageAttachmentGroupPositionFromStream({
       endOfGroup,
       firstOfGroup,
       groupedByUser,
-    }
-  )
+    })
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -226,6 +225,26 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     !isAIGenerated &&
     !isChatbot
 
+  const sharedLockedTextProps = {
+    contentType: 'text' as const,
+    amountText: message.metadata?.amount_text,
+    paymentStatus: message.metadata?.payment_status,
+    renderedText: message.text && (
+      <MessageText message={displayMessage} renderText={renderText} />
+    ),
+  }
+  const sharedLockedMediaProps = {
+    contentType: 'media' as const,
+    title: message.metadata?.attachment_title,
+    mimeType: message.metadata?.attachment_mime_type,
+    thumbnailUrl: message.metadata?.attachment_thumbnail,
+    amountText: message.metadata?.amount_text,
+    detail: message.metadata?.attachment_detail,
+    paymentStatus: message.metadata?.payment_status,
+    onFetchSource: onFetchSource
+      ? () => onFetchSource(message, channel)
+      : undefined,
+  }
   return (
     <>
       {editing && (
@@ -276,43 +295,61 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isAttachment ? (
+          {isTipOnly ? (
+            <MessageTag message={message} standalone />
+          ) : isTextAttachmentMessage(message) ? (
             <div className="str-chat__message-bubble-wrapper">
-              {isMine ? (
-                <div className="flex items-center gap-2">
-                  {MessageActions && <MessageActions />}
-                  <LockedAttachment.Sent
-                    title={message.metadata?.attachment_title}
-                    mimeType={message.metadata?.attachment_mime_type}
-                    thumbnailUrl={message.metadata?.attachment_thumbnail}
-                    amountText={message.metadata?.amount_text}
-                    detail={message.metadata?.attachment_detail}
-                    paymentStatus={message.metadata?.payment_status}
-                    onPreviewClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={async () =>
-                      await onFetchSource?.(message, channel)
-                    }
+              <div className="flex items-center gap-2">
+                {isMine && MessageActions && <MessageActions />}
+                {isMine ? (
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
+                    isMine={true}
                   />
-                </div>
-              ) : (
-                <div className="flex items-center gap-2">
-                  <LockedAttachment.Received
-                    title={message.metadata?.attachment_title}
-                    mimeType={message.metadata?.attachment_mime_type}
-                    thumbnailUrl={message.metadata?.attachment_thumbnail}
-                    amountText={message.metadata?.amount_text}
-                    detail={message.metadata?.attachment_detail}
-                    paymentStatus={message.metadata?.payment_status}
+                ) : (
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
+                    isMine={false}
                     isUnlocking={isUnlocking(message.id)}
                     onUnlockClick={() => onUnlockClick?.(message, channel)}
-                    onFetchSource={async () =>
-                      await onFetchSource?.(message, channel)
+                  />
+                )}
+                {!isMine && MessageActions && <MessageActions />}
+              </div>
+            </div>
+          ) : isMediaAttachmentMessage(message) ? (
+            <div className="str-chat__message-bubble-wrapper">
+              <div className="flex items-center gap-2">
+                {isMine && MessageActions && <MessageActions />}
+                {isMine ? (
+                  <LockedAttachment
+                    {...sharedLockedMediaProps}
+                    isMine={true}
+                    onPreviewClick={() =>
+                      onUnlockClick
+                        ? onUnlockClick(message, channel)
+                        : undefined
                     }
-                    onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
-                  {MessageActions && <MessageActions />}
-                </div>
-              )}
+                ) : (
+                  <LockedAttachment
+                    {...sharedLockedMediaProps}
+                    isMine={false}
+                    isUnlocking={isUnlocking(message.id)}
+                    onUnlockClick={() =>
+                      onUnlockClick
+                        ? onUnlockClick(message, channel)
+                        : undefined
+                    }
+                    onDownloadClick={() =>
+                      onDownloadClick
+                        ? onDownloadClick(message, channel)
+                        : undefined
+                    }
+                  />
+                )}
+                {!isMine && MessageActions && <MessageActions />}
+              </div>
               {message.text && (
                 <div className="str-chat__message-bubble">
                   <MessageText
@@ -322,9 +359,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 </div>
               )}
             </div>
-          ) : isTipOnly ? (
-            /* Tip-only messages render as a standalone bubble */
-            <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage
               groupPosition={streamAttachmentGroupPosition}

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -5,7 +5,7 @@ import { QueryChannelAPIResponse, StreamChat } from 'stream-chat'
 import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
 
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
-import LockedAttachment from '../LockedAttachment'
+import LockedAttachment from '../CustomMessage/LockedAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -229,7 +229,9 @@ WithAttachments.parameters = {
 export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (
-    <LockedAttachment.Composer
+    <LockedAttachment
+      isPreview
+      contentType="media"
       title="Exclusive Content"
       mimeType="image/jpeg"
       thumbnailUrl="https://picsum.photos/seed/paid/320/180"
@@ -266,7 +268,7 @@ WithPaidAttachment.parameters = {
   docs: {
     description: {
       story:
-        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment.Composer` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
+        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment isPreview` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
     },
   },
 }

package/src/index.ts

@@ -6,7 +6,7 @@ export { MessagingShell } from './components/MessagingShell'
 export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
 export { default as ActionButton } from './components/ActionButton'
-export { default as LockedAttachment } from './components/LockedAttachment'
+export { default as LockedAttachment } from './components/CustomMessage/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
@@ -76,15 +76,10 @@ export type {
 } from './components/MessageBubble'
 export type { ActionButtonProps } from './components/ActionButton'
 export type {
-  ComposerCardProps,
-  SentCardProps,
-  ReceivedCardProps,
+  LockedAttachmentProps,
   LockedAttachmentGalleryItem,
   LockedAttachmentContextValue,
-  // Deprecated aliases preserved for backwards compatibility:
-  CreatorCardProps,
-  VisitorCardProps,
-} from './components/LockedAttachment'
+} from './components/CustomMessage/LockedAttachment'
 export type {
   ComposerCardProps as LinkAttachmentComposerCardProps,
   SentCardProps as LinkAttachmentSentCardProps,

package/src/stream-custom-data.ts

@@ -41,6 +41,7 @@ export interface MessageMetadata {
   amount_text?: string
   payment_status?: PaymentStatus
   attachment_title?: string
+  attachment_content_type?: 'text' | 'media'
   attachment_mime_type?: string
   attachment_thumbnail?: string
   attachment_detail?: string

package/src/styles.css

@@ -831,3 +831,15 @@
   color: #016e1a;
   background-color: #dbf0e0;
 }
+
+/** Remove padding from the text inside the locked attachment text shell,
+    and inherit TextShell's explicit colour — stream-chat-react's own
+    `MessageText` sets its own (black) colour that only gets overridden by
+    `.str-chat`'s CSS vars, which the Composer preview doesn't have. */
+.message-locked-attachment-text .str-chat__message-text {
+  padding: 0rem !important;
+}
+
+.message-locked-attachment-text .str-chat__message-text-inner {
+  color: inherit;
+}

package/src/types.ts

@@ -20,7 +20,7 @@ import type {
 
 import type { MessageMetadata } from './stream-custom-data'
 
-export type { LockedAttachmentSource } from './components/LockedAttachment'
+export type { LockedAttachmentSource } from './components/CustomMessage/LockedAttachment'
 
 /**
  * Callback invoked when a user clicks a link inside the channel view.