@linktr.ee/messaging-react 3.10.0 → 3.11.0

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BPhZyaxT.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Bx_zjNMR.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -404,44 +404,12 @@ export declare interface ChannelViewProps {
     onParticipantNameClick?: () => void;
 }
 
-export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
-    /** Placeholder shown in the title slot before the composer types one. */
-    placeholderTitle?: string;
-    /** Placeholder shown in the amount slot before one is configured. */
-    placeholderAmountText?: string;
-    /**
-     * When provided, renders a dismiss X in the thumbnail corner. Called when
-     * the composer clicks it to remove the attachment.
-     */
-    onDismiss?: () => void;
-    /** Fired the first time the composer taps the thumbnail to preview. */
-    onPreviewClick?: () => void;
-    /**
-     * Lazily loads the underlying source so the composer can preview the
-     * attachment they're about to send. Called the first time the thumbnail is
-     * tapped; the returned source is cached and reused on subsequent toggles.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
-    /**
-     * When provided, renders a pencil button in the body bottom-right that the
-     * composer can use to edit the attachment metadata (e.g. open the price /
-     * gallery editor). Matches the Composer "Button" instance in Figma.
-     */
-    onEditClick?: () => void;
-}
-
 /** Shared props for the `Composer` state of every attachment type. */
 declare interface ComposerExtras {
     /** Renders a dismiss `×` button overlaid on the attachment. */
     onDismiss?: () => void;
 }
 
-/**
- * @deprecated Renamed to `SentCardProps`. Drafting usages (with `onDismiss`)
- * should migrate to `ComposerCardProps`.
- */
-export declare type CreatorCardProps = SentCardProps;
-
 export declare const CustomMessageProvider: Provider<Partial<CustomMessageRegistry>>;
 
 export declare interface CustomMessageRegistry {
@@ -450,6 +418,19 @@ export declare interface CustomMessageRegistry {
 
 declare type DmAgentSystemType = 'SYSTEM_DM_AGENT_PAUSED' | 'SYSTEM_DM_AGENT_RESUMED';
 
+declare 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?: default_2.ReactNode;
+};
+
 export declare interface Faq {
     id: string;
     question: string;
@@ -479,6 +460,9 @@ export declare interface FaqListProps {
     avatarName?: string;
 }
 
+/** Fetches the underlying source; `void` return means none available. */
+declare type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>;
+
 declare interface FileAttachmentSharedProps extends MessageAttachmentBaseProps {
     /** Source URL of the file (used as the download target). */
     src?: string;
@@ -728,56 +712,113 @@ export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseP
     onClick?: () => void;
 }
 
-export declare const LockedAttachment: {
-    Composer: (props: ComposerCardProps) => JSX_2.Element;
-    Sent: (props: SentCardProps) => JSX_2.Element;
-    Received: (props: ReceivedCardProps) => JSX_2.Element;
-    Creator: (props: SentCardProps) => JSX_2.Element;
-    Visitor: (props: ReceivedCardProps) => JSX_2.Element;
-};
-
-declare interface LockedAttachmentBaseProps {
-    title?: string;
-    mimeType?: string;
-    thumbnailUrl?: string;
-    detail?: string;
-    amountText?: string;
-    paymentStatus?: PaymentStatus;
-    /**
-     * When provided with 2+ items, the card renders as a mixed-media carousel
-     * (e.g. a couple of photos + a video) instead of a single thumbnail. Each
-     * item brings its own thumbnail and optional source so that
-     * `LockedAttachment.Composer` / `.Sent` / `.Received` can all share the
-     * same carousel chrome.
-     */
-    gallery?: LockedAttachmentGalleryItem[];
-}
+export declare const LockedAttachment: default_2.FC<LockedAttachmentProps>;
 
 export declare 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 declare interface LockedAttachmentGalleryItem {
-    /** MIME type of this carousel item — drives the per-item play / lock affordance. */
+    /** Drives the per-item play/lock affordance. */
     mimeType: string;
-    /** Poster image used for both the locked (blurred) and unlocked preview state. */
+    /** Poster image, locked or unlocked. */
     thumbnailUrl?: string;
-    /** Underlying source (image or video URL) — shown only when unlocked. */
+    /** Media source, shown only when unlocked. */
     sourceUrl?: string;
 }
 
+/**
+ * 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 declare type LockedAttachmentProps = DraftProps | PreviewProps | SentTextOwnProps | SentTextOtherProps | SentMediaOwnProps | SentMediaOtherProps;
+
 export declare interface LockedAttachmentSource {
-    /** Proxied URL used by the media player for in-app playback. */
+    /** Proxied URL for in-app playback. */
     sourceUrl: string;
-    /** URL opened when the visitor clicks Download — may be a file or a web destination. */
+    /** Opened when the visitor clicks Download. */
     redeemUrl?: string;
-    /** Thumbnail URL from the fetched asset — overrides the metadata thumbnail when present. */
+    /** Overrides the metadata thumbnail when present. */
     thumbnailUrl?: string;
 }
 
+declare interface MediaCardBaseProps {
+    /** Attachment title. */
+    title?: string;
+    /** Fallback shown when `title` is unset. */
+    placeholderTitle?: string;
+    /** Drives icon/thumbnail rendering. */
+    mimeType?: string;
+    /** Poster image, locked or unlocked. */
+    thumbnailUrl?: string;
+    /** Secondary description text. */
+    detail?: string;
+    /** Amount label. */
+    amountText?: string;
+    /** 2+ items renders as a carousel instead of a single thumbnail. */
+    gallery?: LockedAttachmentGalleryItem[];
+}
+
+declare interface MediaCardDraftProps extends MediaCardBaseProps {
+    /** True while composing — shows the real (unredacted) thumbnail. */
+    isDraft: true;
+    isPreview?: false;
+    /** Fallback amount before a price is set. */
+    placeholderAmountText?: string;
+    /** Lazily fetches the source on first tap; cached and reused after. */
+    onFetchSource?: FetchSourceHandler;
+    /** Fired on first tap to preview. */
+    onPreviewClick?: () => void;
+    /** Removes the draft attachment. */
+    onDismiss?: () => void;
+    /** Renders a pencil button to edit the attachment metadata. */
+    onEditClick?: () => void;
+}
+
+declare type MediaCardOtherProps = MediaCardSentBaseProps & {
+    /** Recipient's view. */
+    isMine: false;
+    /** Opens checkout on click. Omit to hide the button. */
+    onUnlockClick?: () => void;
+    /** Omit to hide the Download button. */
+    onDownloadClick?: () => void;
+    /** Spinner on Unlock while checkout runs. */
+    isUnlocking?: boolean;
+};
+
+declare type MediaCardOwnProps = MediaCardSentBaseProps & {
+    /** Sender's own view. */
+    isMine: true;
+    /** Fired on first tap to preview own attachment. */
+    onPreviewClick?: () => void;
+};
+
+declare interface MediaCardPreviewProps extends MediaCardBaseProps {
+    /** True to render exactly as the recipient will see it before purchase — always locked/blurred. */
+    isDraft?: false;
+    isPreview: true;
+    /** Fallback amount before a price is set. */
+    placeholderAmountText?: string;
+}
+
+declare interface MediaCardSentBaseProps extends MediaCardBaseProps {
+    /** False once sent. */
+    isDraft?: false;
+    isPreview?: false;
+    /** Drives the lock/skeleton/badge state. */
+    paymentStatus?: PaymentStatus;
+    onFetchSource?: FetchSourceHandler;
+}
+
 export declare const MediaMessage: default_2.FC<MediaMessageProps> & {
     Creator: default_2.FC<{
         message: LocalMessage;
@@ -1233,6 +1274,7 @@ export declare 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;
@@ -1445,6 +1487,16 @@ declare interface PdfAttachmentSharedProps extends MessageAttachmentBaseProps {
     onClick?: (index: number) => boolean | void;
 }
 
+declare 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 declare interface ReceivedBubbleProps extends MessageBubbleBaseProps {
     /**
      * Optional header rendered above the text inside the bubble — used by the
@@ -1453,31 +1505,6 @@ export declare interface ReceivedBubbleProps extends MessageBubbleBaseProps {
     header?: default_2.ReactNode;
 }
 
-export declare interface ReceivedCardProps extends LockedAttachmentBaseProps {
-    /**
-     * Called when the recipient clicks Unlock on an unpaid attachment.
-     * Use this to open a checkout flow. Omit to hide the Unlock button.
-     */
-    onUnlockClick?: () => void;
-    /**
-     * Called to fetch the attachment source — fired automatically when
-     * `paymentStatus` transitions to `'paid'`, or immediately on click when
-     * `paymentStatus` is already `'paid'`. Return a `LockedAttachmentSource`
-     * to unlock the card.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
-    /**
-     * Called when the recipient clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-    /**
-     * When true, shows a loading spinner on the Unlock button.
-     * Driven by the LockedAttachmentContext (e.g. checkout in progress).
-     */
-    isUnlocking?: boolean;
-}
-
 /**
  * Resolves the member to display as the conversation's "other party".
  *
@@ -1503,17 +1530,56 @@ export declare function resolveParticipantDisplayName(user?: ParticipantDisplayU
 export declare interface SentBubbleProps extends MessageBubbleBaseProps {
 }
 
-export declare interface SentCardProps extends LockedAttachmentBaseProps {
-    /** Placeholder shown in the title slot when no title is set. */
-    placeholderTitle?: string;
-    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
-    onPreviewClick?: () => void;
-    /**
-     * Lazily loads the underlying source so the sender can preview the attachment.
-     * Called the first time the thumbnail is tapped; the returned source is cached
-     * and reused on subsequent toggles.
-     */
-    onFetchSource?: () => Promise<LockedAttachmentSource | void>;
+declare type SentMediaOtherProps = MediaCardOtherProps & {
+    contentType?: 'media';
+};
+
+declare type SentMediaOwnProps = MediaCardOwnProps & {
+    contentType?: 'media';
+    /** Sender's view has no unlock/download flow — doesn't apply here. */
+    onUnlockClick?: never;
+    isUnlocking?: never;
+    onDownloadClick?: never;
+};
+
+declare type SentTextOtherProps = TextCardOtherProps & {
+    contentType: 'text';
+};
+
+declare type SentTextOwnProps = TextCardOwnProps & {
+    contentType: 'text';
+    /** Sender's view has no unlock flow — doesn't apply here. */
+    onUnlockClick?: never;
+    isUnlocking?: never;
+};
+
+declare interface TextCardBaseProps {
+    /** Amount label. */
+    amountText?: string;
+}
+
+declare type TextCardOtherProps = TextCardSentBaseProps & {
+    /** Recipient's view. */
+    isMine: false;
+    /** Spinner on Unlock while checkout runs. */
+    isUnlocking?: boolean;
+    /** Opens checkout on click. Omit to hide the button. */
+    onUnlockClick?: () => void;
+};
+
+declare type TextCardOwnProps = TextCardSentBaseProps & {
+    /** Sender's own view. */
+    isMine: true;
+};
+
+declare interface TextCardSentBaseProps extends TextCardBaseProps {
+    /** False once sent. */
+    isDraft?: false;
+    isPreview?: false;
+    /** Revealed content once paid. */
+    renderedText?: default_2.ReactNode;
+    /** Drives the lock/skeleton/badge state. */
+    paymentStatus?: PaymentStatus;
 }
 
 /**
@@ -1584,9 +1650,6 @@ declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps
     onClick?: (index: number) => boolean | void;
 }
 
-/** @deprecated Renamed to `ReceivedCardProps`. */
-export declare type VisitorCardProps = ReceivedCardProps;
-
 export declare type VoteSelection = 'up' | 'down' | null;
 
 export { }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as u, i as c, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-BxzzWK4K.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as u, i as c, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as b, u as P, v as f, w as x, x as y, y as B, z as S, B as q, D as z, E as D, G as E, H as V } from "./index-DFZrAiLB.js";
 export {
   e as ActionButton,
   t as Avatar,

package/dist/testing.d.ts

@@ -47,6 +47,7 @@ export declare 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -260,6 +260,101 @@ describe('CustomChannelPreview', () => {
     expect(screen.getByText('No messages yet')).toBeInTheDocument()
   })
 
+  it('shows a locked indicator for a text-only attachment message, even when paid', () => {
+    // The channel-list preview always shows the locked wording for an
+    // attachment-type message and never echoes `message.text` — the
+    // revealed content is only ever shown inside the full conversation.
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'REDACTED',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'text',
+          payment_status: 'paid',
+        },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('🔒 Sent a locked message')).toBeInTheDocument()
+    expect(screen.queryByText(/REDACTED/)).not.toBeInTheDocument()
+  })
+
+  it('shows a locked indicator for an unpaid text-only attachment message', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'REDACTED',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'text',
+          payment_status: 'pending',
+        },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('🔒 Sent a locked message')).toBeInTheDocument()
+    expect(screen.queryByText(/REDACTED/)).not.toBeInTheDocument()
+  })
+
+  it('shows a locked indicator for a media attachment message, even when paid', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'media',
+          payment_status: 'paid',
+        },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('🔒 Sent a locked attachment')).toBeInTheDocument()
+  })
+
+  it('shows a locked indicator for an unpaid media attachment message', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'media',
+          payment_status: 'pending',
+        },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('🔒 Sent a locked attachment')).toBeInTheDocument()
+  })
+
   it('updates starred state when the channel membership changes', () => {
     const channel = createMockChannel([])
 

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -1,6 +1,9 @@
 import classNames from 'classnames'
 import React from 'react'
-import { ChannelPreviewUIComponentProps, useChatContext } from 'stream-chat-react'
+import {
+  ChannelPreviewUIComponentProps,
+  useChatContext,
+} from 'stream-chat-react'
 
 import { useChannelStar } from '../../hooks/useChannelStar'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
@@ -85,14 +88,23 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
         viewerLanguage,
       })
 
-      const isTip = lastMessage?.metadata?.custom_type === 'MESSAGE_TIP'
-      if (isTip) return displayText ? `💵 ${displayText}` : '💵 Sent a tip'
-      const isPaid = lastMessage?.metadata?.custom_type === 'MESSAGE_PAID'
-      if (isPaid) return displayText ? `💰 ${displayText}` : '💰 Sent a message'
-      const isPaidAttachment =
-        lastMessage?.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
-      if (isPaidAttachment)
-        return displayText ? `📎 ${displayText}` : '📎 Sent an attachment'
+      const { custom_type, attachment_content_type } =
+        lastMessage?.metadata || {}
+
+      if (custom_type === 'MESSAGE_TIP') {
+        return displayText ? displayText : 'Sent a tip'
+      }
+      if (custom_type === 'MESSAGE_PAID') {
+        return displayText ? displayText : 'Sent a message'
+      }
+      if (custom_type === 'MESSAGE_ATTACHMENT') {
+        if (attachment_content_type === 'text') {
+          return '🔒 Sent a locked message'
+        }
+        if (attachment_content_type === 'media') {
+          return '🔒 Sent a locked attachment'
+        }
+      }
 
       if (displayText) return displayText
 

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -126,6 +126,7 @@ interface TemplateProps {
       attachment_mime_type?: string
       attachment_thumbnail?: string
       attachment_detail?: string
+      attachment_content_type?: 'text' | 'media'
     }
   }>
 }
@@ -416,7 +417,59 @@ LockedAttachment.args = {
   ],
 }
 
-
+export const LockedTextAttachment: StoryFn<TemplateProps> = Template.bind({})
+LockedTextAttachment.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Can you send me the details privately?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      // Empty text: the real content is redacted server-side until purchase,
+      // so the bubble renders the blurred placeholder instead.
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-3',
+      text: '',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+    {
+      id: 'msg-4',
+      // Buyer reveal: backend writes the real text back onto the message.
+      text: "Here's the address — see you Thursday at 7!",
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        payment_status: 'paid',
+        attachment_content_type: 'text',
+      },
+    },
+  ],
+}
+LockedTextAttachment.parameters = {
+  docs: {
+    description: {
+      story:
+        'A paid text-only message renders as a regular bubble with blurred placeholder copy (msg-2: pending, msg-3: purchased-but-not-yet-revealed) until the real text is revealed (msg-4).',
+    },
+  },
+}
 
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {