@linktr.ee/messaging-react 3.9.0-rc-1783472582 → 3.9.0-rc-1783575293

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-IkikzyWM.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.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-DuPa2mUh.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.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,38 +404,6 @@ export declare interface ChannelViewProps {
     onParticipantNameClick?: () => void;
 }
 
-export declare interface ComposerCardProps extends LockedAttachmentBaseProps {
-    /**
-     * The message's own text, shown as-is (not redacted yet — the message
-     * hasn't been sent). Only used when `contentType` is `"text"`.
-     */
-    text?: string;
-    /** Placeholder shown in the amount slot before one is configured. */
-    placeholderAmountText?: string;
-    /**
-     * Renders a persistent dismiss X on the thumbnail (media) or next to the
-     * text (text mode); called to remove the draft attachment. Unrelated to
-     * `TextCardProps.onDismiss`, which only appears for `isMine` after a
-     * failed payment.
-     */
-    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.
-     * Ignored when `contentType` is `"text"`.
-     */
-    onFetchSource?: FetchSourceHandler;
-    /**
-     * 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. */
@@ -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,11 +460,7 @@ export declare interface FaqListProps {
     avatarName?: string;
 }
 
-/**
- * Lazily fetches the underlying source (URL/thumbnail) for a locked
- * attachment. Returns `void` to signal "no source available" — the card
- * stays locked. Shared by `ComposerCardProps`/`MediaCardProps.onFetchSource`.
- */
+/** Fetches the underlying source; `void` return means none available. */
 declare type FetchSourceHandler = () => Promise<LockedAttachmentSource | void>;
 
 declare interface FileAttachmentSharedProps extends MessageAttachmentBaseProps {
@@ -735,117 +712,110 @@ export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseP
     onClick?: () => void;
 }
 
-export declare const LockedAttachment: {
-    Composer: (props: ComposerCardProps) => JSX_2.Element;
-    Text: (props: LockedAttachmentTextCardProps) => JSX_2.Element;
-    Media: (props: LockedAttachmentMediaCardProps) => JSX_2.Element;
-};
-
-declare interface LockedAttachmentBaseProps {
-    title?: string;
-    /** Dimmed fallback shown in the title slot when `title` is unset (no attachment metadata yet — still drafting). */
-    placeholderTitle?: string;
-    mimeType?: string;
-    thumbnailUrl?: string;
-    detail?: string;
-    amountText?: string;
-    /**
-     * 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` / `.Media` can share the same carousel
-     * chrome.
-     */
-    gallery?: LockedAttachmentGalleryItem[];
-    /**
-     * "text" renders the card as a locked/plain chat bubble showing the
-     * message's own text (skeleton-blurred until purchased) instead of a media
-     * thumbnail card — for a paid text-only message. Media-only props
-     * (`mimeType`, `thumbnailUrl`, `title`, `detail`, `gallery`) are ignored in
-     * this mode. Defaults to `"media"`.
-     */
-    contentType?: 'text' | 'media';
-}
+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;
-    /**
-     * Reveal the locked media's underlying source (URL/thumbnail). Not used
-     * for a paid text message — the backend writes the real text directly onto
-     * the message on purchase and `message.text` alone drives that reveal.
-     */
+    /** 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;
 }
 
-export declare type LockedAttachmentMediaCardProps = (MediaCardSharedProps & {
-    isMine: true;
-    /** Dimmed fallback shown in the title slot when `title` is unset. */
-    placeholderTitle?: string;
-    /** Fired the first time the sender taps the thumbnail to preview their own attachment. */
-    onPreviewClick?: () => void;
-}) | (MediaCardSharedProps & {
-    isMine: false;
-    /**
-     * When true, shows a loading spinner on the Unlock button. Driven by
-     * the LockedAttachmentContext (e.g. checkout in progress).
-     */
-    isUnlocking?: boolean;
-    /**
-     * 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 when the recipient clicks Download on an unlocked card.
-     * Omit to hide the Download button.
-     */
-    onDownloadClick?: () => void;
-});
+/**
+ * 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;
 }
 
-export declare type LockedAttachmentTextCardProps = (TextCardSharedProps & {
-    isMine: true;
-}) | (TextCardSharedProps & {
-    isMine: false;
-    /**
-     * 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;
-    /**
-     * When true, shows a loading spinner on the Unlock button. Driven by
-     * the LockedAttachmentContext (e.g. checkout in progress).
-     */
-    isUnlocking?: boolean;
-});
-
-declare interface MediaCardSharedProps {
+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;
-    paymentStatus?: PaymentStatus;
+    /** 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;
 }
 
@@ -1468,6 +1438,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';
+};
+
 /**
  * Resolves the member to display as the conversation's "other party".
  *
@@ -1490,16 +1470,56 @@ export declare function resolveMediaFromMessage(message: LocalMessage): MediaMes
  */
 export declare function resolveParticipantDisplayName(user?: ParticipantDisplayUser | null): string;
 
-declare interface TextCardSharedProps {
+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;
-    /**
-     * The message's real, revealed content — shown instead of the skeleton
-     * loader once `paymentStatus` is `'paid'`. Ignored otherwise. Lets the
-     * caller supply its own text renderer (e.g. Stream's `MessageText`)
-     * without `LockedAttachment` depending on it.
-     */
-    children?: default_2.ReactNode;
 }
 
 /**

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 c, i as u, 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 P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-B8gqCioX.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 c, i as u, 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 P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-BiBvPADG.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.9.0-rc-1783472582",
+  "version": "3.9.0-rc-1783575293",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1783472582",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783575293",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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