@linktr.ee/messaging-react 2.5.2 → 2.6.0-rc-1780281100

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Dgh0_9UW.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;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-Be5pkdgH.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.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -162,7 +162,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'sendButton'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderMessageInputFooter' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'sendButton' | 'attachmentPreviewList'>;
 
 /**
  * ChannelView component props
@@ -172,6 +172,7 @@ export declare interface ChannelViewProps {
     onBack?: () => void;
     showBackButton?: boolean;
     renderMessageInputActions?: (channel: Channel) => React.ReactNode;
+    renderMessageInputFooter?: (channel: Channel) => React.ReactNode;
     renderConversationFooter?: (channel: Channel) => React.ReactNode;
     onLeaveConversation?: (channel: Channel) => void;
     onBlockParticipant?: (participantId?: string) => void;
@@ -298,6 +299,12 @@ export declare interface ChannelViewProps {
      * sendButton={MediaSendButton}
      */
     sendButton?: ComponentType<any>;
+    /**
+     * Custom component rendered inside the message composer bubble (above the
+     * textarea). Passed to Stream `Channel` as `AttachmentPreviewList`.
+     * Use this to render staged paid or media attachments inside the input.
+     */
+    attachmentPreviewList?: ComponentType;
 }
 
 export declare interface ComposerCardProps extends LockedAttachmentBaseProps {

package/dist/index.js

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

package/package.json

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

package/src/components/ChannelView.tsx

@@ -254,6 +254,7 @@ const ChannelViewInner: React.FC<{
   onBack?: () => void
   showBackButton: boolean
   renderMessageInputActions?: (channel: ChannelType) => React.ReactNode
+  renderMessageInputFooter?: (channel: ChannelType) => React.ReactNode
   renderConversationFooter?: (channel: ChannelType) => React.ReactNode
   onLeaveConversation?: (channel: ChannelType) => void
   onBlockParticipant?: (participantId?: string) => void
@@ -280,6 +281,7 @@ const ChannelViewInner: React.FC<{
   onBack,
   showBackButton,
   renderMessageInputActions,
+  renderMessageInputFooter,
   renderConversationFooter,
   onLeaveConversation,
   onBlockParticipant,
@@ -430,6 +432,7 @@ const ChannelViewInner: React.FC<{
           <CustomMessageInput
             key="lt-channel-message-input"
             renderActions={() => renderMessageInputActions?.(channel)}
+            renderFooter={() => renderMessageInputFooter?.(channel)}
           />
         </Window>
       </WithComponents>
@@ -464,6 +467,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onBack,
     showBackButton = false,
     renderMessageInputActions,
+    renderMessageInputFooter,
     renderConversationFooter,
     onLeaveConversation,
     onBlockParticipant,
@@ -484,6 +488,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     renderMessage,
     onMessageLinkClick,
     sendButton,
+    attachmentPreviewList,
     viewerLanguage,
     getParticipantDisplayName: getParticipantDisplayNameProp,
   }) => {
@@ -577,11 +582,13 @@ export const ChannelView = React.memo<ChannelViewProps>(
             TypingIndicator={CustomTypingIndicator}
             doSendMessageRequest={doSendMessageRequest}
             {...(sendButton ? { SendButton: sendButton } : {})}
+            {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
           >
             <ChannelViewInner
               onBack={onBack}
               showBackButton={showBackButton}
               renderMessageInputActions={renderMessageInputActions}
+              renderMessageInputFooter={renderMessageInputFooter}
               renderConversationFooter={renderConversationFooter}
               onLeaveConversation={onLeaveConversation}
               onBlockParticipant={onBlockParticipant}

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

@@ -518,70 +518,75 @@ const WithActionsTemplate: StoryFn<TemplateProps> = ({
   />
 )
 
-export const DeleteOwnMessage: StoryFn<TemplateProps> =
+export const ConversationWithPaidAttachments: StoryFn<TemplateProps> =
   WithActionsTemplate.bind({})
-DeleteOwnMessage.args = {
+ConversationWithPaidAttachments.args = {
   currentUser: storyUsers.creator,
   messages: [
     {
       id: 'msg-1',
-      text: 'Hey, how are you?',
+      text: 'Can I have your workout plan?',
       user: storyUsers.visitor,
     },
     {
       id: 'msg-2',
-      text: 'Doing great — hover me to delete!',
+      text: 'Yes, of course!',
       user: storyUsers.creator,
     },
-  ],
-}
-DeleteOwnMessage.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const ownBubble = await canvas.findByText('Doing great — hover me to delete!')
-  await userEvent.hover(ownBubble)
-  const toggle = await canvas.findByTestId('message-actions-toggle-button')
-  await userEvent.click(toggle)
-  await expect(canvas.getByText('Delete')).toBeInTheDocument()
-}
-DeleteOwnMessage.parameters = {
-  docs: {
-    description: {
-      story:
-        'Current user hovers their own message. Only "Delete" is shown — "Report" is hidden.',
+    {
+      id: 'msg-3',
+      text: 'Let me know if you have any questions!',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        payment_status: 'paid',
+        amount_text: 'AU$9.99',
+        attachment_title: "Alicia's Workout Plan",
+        attachment_mime_type: 'video/mp4',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '1:20',
+      },
     },
-  },
-}
-
-export const ReportOthersMessage: StoryFn<TemplateProps> =
-  WithActionsTemplate.bind({})
-ReportOthersMessage.args = {
-  currentUser: storyUsers.creator,
-  messages: [
     {
-      id: 'msg-1',
-      text: 'Hover me to report!',
+      id: 'msg-4',
+      text: 'Looks amazing, unlocking now!',
       user: storyUsers.visitor,
     },
     {
-      id: 'msg-2',
-      text: "That's a fine message.",
-      user: storyUsers.creator,
+      id: 'msg-5',
+      text: 'Here is another resource for you.',
+      user: storyUsers.visitor,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        attachment_title: 'Nutrition Guide',
+        attachment_mime_type: 'application/pdf',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '12 pages',
+      },
     },
   ],
 }
-ReportOthersMessage.play = async ({ canvasElement }) => {
+ConversationWithPaidAttachments.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
-  const otherBubble = await canvas.findByText('Hover me to report!')
-  await userEvent.hover(otherBubble)
+  const attachmentMsg = canvasElement.querySelector('[data-message-id="msg-3"]')
+  await userEvent.hover(attachmentMsg!)
   const toggle = await canvas.findByTestId('message-actions-toggle-button')
   await userEvent.click(toggle)
-  await expect(canvas.getByText('Report')).toBeInTheDocument()
+  const deleteButton = await canvas.findByRole('button', { name: 'Delete' })
+  await userEvent.click(deleteButton)
+  await expect(
+    canvas.getByRole('heading', { name: 'Delete attachment?' })
+  ).toBeInTheDocument()
+  await expect(
+    canvas.getByText(/Deleting it will remove access for the buyer/)
+  ).toBeInTheDocument()
 }
-ReportOthersMessage.parameters = {
+ConversationWithPaidAttachments.parameters = {
   docs: {
     description: {
       story:
-        "Current user hovers the other participant's message. Only \"Report\" is shown — \"Delete\" is hidden.",
+        'Report and Delete actions only appear on paid attachment messages — regular messages show no actions. Hovering msg-3 (a purchased attachment) shows the delete confirmation with buyer warning.',
     },
   },
 }

package/src/components/CustomMessage/CustomMessageActions.tsx

@@ -1,17 +1,22 @@
+import { FlagIcon, TrashSimpleIcon } from '@phosphor-icons/react'
 import React from 'react'
-import { useMessageContext, useTranslationContext } from 'stream-chat-react'
+import { useMessageContext } from 'stream-chat-react'
 import {
   DefaultDropdownActionButton,
   MessageActions,
-  type MessageActionSetItem,
 } from 'stream-chat-react/experimental'
 
 const DeleteAction = () => {
-  const { handleDelete } = useMessageContext('CustomMessageActions')
-  const { t } = useTranslationContext('CustomMessageActions')
+  const { handleDelete, message } = useMessageContext('CustomMessageActions')
+  if (message.metadata?.payment_status !== 'paid') return null
   return (
-    <DefaultDropdownActionButton onClick={handleDelete}>
-      {t('Delete')}
+    <DefaultDropdownActionButton
+      onClick={handleDelete}
+      aria-label="Delete"
+      title="Delete"
+      className="bg-marble rounded-full p-2 hover:bg-sand transition-all"
+    >
+      <TrashSimpleIcon size={16} weight="light" aria-hidden />
     </DefaultDropdownActionButton>
   )
 }
@@ -19,17 +24,26 @@ const DeleteAction = () => {
 const ReportAction = () => {
   const { handleFlag } = useMessageContext('CustomMessageActions')
   return (
-    <DefaultDropdownActionButton onClick={handleFlag}>
-      Report
+    <DefaultDropdownActionButton
+      onClick={handleFlag}
+      aria-label="Report"
+      title="Report"
+      className="bg-marble rounded-full p-2 hover:bg-sand transition-all"
+    >
+      <FlagIcon size={16} weight="light" aria-hidden />
     </DefaultDropdownActionButton>
   )
 }
 
-const MESSAGE_ACTION_SET: MessageActionSetItem[] = [
-  { Component: DeleteAction, placement: 'dropdown', type: 'delete' },
-  { Component: ReportAction, placement: 'dropdown', type: 'flag' },
-]
-
-export const CustomMessageActions = () => (
-  <MessageActions messageActionSet={MESSAGE_ACTION_SET} />
-)
+export const CustomMessageActions = () => {
+  const { message } = useMessageContext('CustomMessageActions')
+  if (message.metadata?.custom_type !== 'MESSAGE_ATTACHMENT') return null
+  return (
+    <MessageActions
+      messageActionSet={[
+        { Component: DeleteAction, placement: 'quick', type: 'delete' },
+        { Component: ReportAction, placement: 'quick', type: 'flag' },
+      ]}
+    />
+  )
+}

package/src/components/CustomMessage/index.tsx

@@ -194,7 +194,11 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           open={isBounceDialogOpen}
         />
       )}
-      <div className={rootClassName} key={message.id} data-message-id={message.id}>
+      <div
+        className={rootClassName}
+        key={message.id}
+        data-message-id={message.id}
+      >
         {PinIndicator && <PinIndicator />}
         {!!reminder && <ReminderNotification reminder={reminder} />}
         {message.user && (
@@ -228,33 +232,39 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
               {isMine ? (
-                <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">
+                  {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>
               ) : (
-                <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}
-                  isUnlocking={isUnlocking(message.id)}
-                  onUnlockClick={() => onUnlockClick?.(message, channel)}
-                  onFetchSource={async () =>
-                    await onFetchSource?.(message, channel)
-                  }
-                  onDownloadClick={() => onDownloadClick?.(message, channel)}
-                />
+                <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}
+                    isUnlocking={isUnlocking(message.id)}
+                    onUnlockClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
+                    }
+                    onDownloadClick={() => onDownloadClick?.(message, channel)}
+                  />
+                  {MessageActions && <MessageActions />}
+                </div>
               )}
               {message.text && (
                 <div className="str-chat__message-bubble">
@@ -300,7 +310,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               </div>
             </div>
           )}
-          {MessageActions && <MessageActions />}
         </div>
         {!isAttachment && !isTipOnly && (
           <div className="str-chat__message-footer">

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

@@ -1,7 +1,10 @@
+import { PlusIcon, XIcon } from '@phosphor-icons/react'
 import type { Meta, StoryFn } from '@storybook/react'
 import React, { useEffect } from 'react'
 import { QueryChannelAPIResponse, StreamChat } from 'stream-chat'
-import { Channel, Chat } from 'stream-chat-react'
+import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
+
+import LockedAttachment from '../LockedAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -25,20 +28,37 @@ const createMockChannel = async (
   client: StreamChat,
   opts: { frozen?: boolean } = {}
 ) => {
-  const channelData = { members: [mockUser.id, mockParticipant.id], frozen: opts.frozen ?? false }
+  const channelData = {
+    members: [mockUser.id, mockParticipant.id],
+    frozen: opts.frozen ?? false,
+  }
   const ch = client.channel('messaging', 'storybook-cmi-channel', channelData)
 
   ch.watch = async () => {
     ch.state.members = {
       [mockUser.id]: { user: mockUser, user_id: mockUser.id },
-      [mockParticipant.id]: { user: mockParticipant, user_id: mockParticipant.id },
+      [mockParticipant.id]: {
+        user: mockParticipant,
+        user_id: mockParticipant.id,
+      },
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ;(ch as any)._data = channelData
-    return { channel: channelData, members: [], messages: [], watchers: [], pinned_messages: [], duration: '0ms' } as unknown as QueryChannelAPIResponse
+    return {
+      channel: channelData,
+      members: [],
+      messages: [],
+      watchers: [],
+      pinned_messages: [],
+      duration: '0ms',
+    } as unknown as QueryChannelAPIResponse
   }
 
-  try { await ch.watch() } catch (_) { /* mock */ }
+  try {
+    await ch.watch()
+  } catch (_) {
+    /* mock */
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ;(ch as any)._data = channelData
   return ch
@@ -50,15 +70,15 @@ const createMockChannel = async (
 
 type WrapperProps = {
   frozen?: boolean
-  sendButton?: React.ComponentType<{
-    sendMessage: (...args: unknown[]) => unknown
-    disabled?: boolean
-    [key: string]: unknown
-  }>
   renderActions?: () => React.ReactNode
+  sendButton?: React.ComponentType<SendButtonProps>
+  attachmentPreviewList?: React.ComponentType
+  renderFooter?: () => React.ReactNode
 }
 
-const Wrapper: React.FC<WrapperProps> = ({ frozen, sendButton, renderActions }) => {
+const Wrapper: React.FC<WrapperProps> = (props) => {
+  const { frozen, renderActions, sendButton, attachmentPreviewList, renderFooter } = props
+
   const [client] = React.useState(() => {
     const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
     c.userID = mockUser.id
@@ -79,9 +99,10 @@ const Wrapper: React.FC<WrapperProps> = ({ frozen, sendButton, renderActions })
       <Channel
         channel={channel}
         {...(sendButton ? { SendButton: sendButton } : {})}
+        {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
       >
         <div className="bg-white" style={{ minWidth: 360 }}>
-          <CustomMessageInput renderActions={renderActions} />
+          <CustomMessageInput renderActions={renderActions} renderFooter={renderFooter} />
         </div>
       </Channel>
     </Chat>
@@ -150,23 +171,22 @@ WithCustomActionButton.parameters = {
 }
 
 /** A custom send button that turns purple to signal a media attachment is staged. */
-const PurpleMediaSendButton: React.FC<{
-  sendMessage: (...args: unknown[]) => unknown
-  disabled?: boolean
-  [key: string]: unknown
-}> = ({ sendMessage, disabled, ...rest }) => (
-  <button
-    {...rest}
-    type="button"
-    aria-label="Send"
-    disabled={disabled}
-    onClick={() => sendMessage()}
-    className="str-chat__send-button mt-auto flex items-center justify-center shrink-0 rounded-full size-8 bg-[#6D28D9] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white"
-    style={{ fontSize: 15 }}
-  >
-    🚀
-  </button>
-)
+const PurpleMediaSendButton: React.FC<SendButtonProps> = (props) => {
+  const { sendMessage, disabled, ...rest } = props
+  return (
+    <button
+      {...rest}
+      type="button"
+      aria-label="Send"
+      disabled={disabled}
+      onClick={sendMessage}
+      className="str-chat__send-button mt-auto flex items-center justify-center shrink-0 rounded-full size-8 bg-[#6D28D9] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white"
+      style={{ fontSize: 15 }}
+    >
+      🚀
+    </button>
+  )
+}
 
 export const WithCustomSendButton: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithCustomSendButton.args = { sendButton: PurpleMediaSendButton }
@@ -174,7 +194,83 @@ WithCustomSendButton.parameters = {
   docs: {
     description: {
       story:
-        'Passes a custom `SendButton` via `Channel`\'s `SendButton` prop (which is how `ChannelView`\'s `sendButton` prop surfaces it). `CustomMessageInput` reads the button from `useComponentContext` and falls back to the default when none is provided.',
+        "Passes a custom `SendButton` via `Channel`'s `SendButton` prop (which is how `ChannelView`'s `sendButton` prop surfaces it). `CustomMessageInput` reads the button from `useComponentContext` and falls back to the default when none is provided.",
+    },
+  },
+}
+
+export const WithAttachments: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+WithAttachments.args = {
+  attachmentPreviewList: () => (
+    <div className="relative size-20 shrink-0 overflow-hidden rounded-2xl border border-black/8">
+      <img
+        src="https://picsum.photos/seed/attachment/160/160"
+        alt="Staged attachment"
+        className="size-full object-cover"
+      />
+    </div>
+  ),
+  renderActions: () => (
+    <button
+      type="button"
+      aria-label="Add attachment"
+      onClick={() => console.log('add attachment')}
+      className="flex items-center justify-center size-12 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1]"
+    >
+      <PlusIcon className="size-5" weight="bold" />
+    </button>
+  ),
+}
+WithAttachments.parameters = {
+  docs: {
+    description: {
+      story:
+        "Message input with a regular image attachment staged. In production thumbnails are portaled into `.central-container` by `ComposerPendingMediaPortal`; here we use `Channel`'s `AttachmentPreviewList` override to achieve the same visual placement via the React tree.",
+    },
+  },
+}
+
+export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+WithPaidAttachment.args = {
+  attachmentPreviewList: () => (
+    <LockedAttachment.Composer
+      title="Exclusive Content"
+      mimeType="image/jpeg"
+      thumbnailUrl="https://picsum.photos/seed/paid/320/180"
+      detail="3.2 MB"
+      amountText="AU$9.99"
+      onDismiss={() => console.log('dismiss paid attachment')}
+      onEditClick={() => console.log('edit paid attachment')}
+    />
+  ),
+  renderActions: () => (
+    <button
+      type="button"
+      aria-label="Add attachment"
+      onClick={() => console.log('add attachment')}
+      className="flex items-center justify-center size-12 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1]"
+    >
+      <PlusIcon className="size-5" weight="bold" />
+    </button>
+  ),
+  renderFooter: () => (
+    <div className="flex items-center justify-between gap-2 rounded-lg bg-[#E8EEFF] px-4 py-3 text-sm text-black/70">
+      <span>Tap to add a price</span>
+      <button
+        type="button"
+        aria-label="Dismiss"
+        className="flex shrink-0 items-center justify-center text-black/40 hover:text-black/70 bg-black/10 rounded-full p-1"
+      >
+        <XIcon className="size-4" />
+      </button>
+    </div>
+  ),
+}
+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.",
     },
   },
 }

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -28,9 +28,6 @@ vi.mock('stream-chat-react', () => ({
       <Input />
     </div>
   ),
-  SimpleAttachmentSelector: () => (
-    <div data-testid="simple-attachment-selector" />
-  ),
   TextareaComposer: ({
     maxRows: _maxRows,
     ...props
@@ -84,7 +81,7 @@ describe('CustomMessageInput', () => {
 
     const { container } = renderWithProviders(<CustomMessageInput />)
 
-    const messageInput = container.firstElementChild
+    const messageInput = container.querySelector('.message-input')
     expect(messageInput).toHaveAttribute('aria-disabled', 'true')
     expect(messageInput).toHaveAttribute('inert')
     expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
@@ -105,14 +102,6 @@ describe('CustomMessageInput', () => {
     expect(sendButton).toBeDisabled()
   })
 
-  it('renders the existing attachment selector when channel is frozen', () => {
-    mockChannelData = { frozen: true }
-
-    renderWithProviders(<CustomMessageInput />)
-
-    expect(screen.getByTestId('simple-attachment-selector')).toBeInTheDocument()
-  })
-
   it('renders adjacent actions inside the disabled container when frozen', () => {
     mockChannelData = { frozen: true }
 
@@ -126,7 +115,7 @@ describe('CustomMessageInput', () => {
       />
     )
 
-    const messageInput = container.firstElementChild
+    const messageInput = container.querySelector('.message-input')
     const action = screen.getByTestId('custom-action')
 
     expect(messageInput).toHaveAttribute('aria-disabled', 'true')