@linktr.ee/messaging-react 2.5.3 → 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-BIInWpum.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-CPa6Qru7.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.3",
+  "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/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')

package/src/components/CustomMessageInput/index.tsx

@@ -1,10 +1,9 @@
 import { ArrowUpIcon } from '@phosphor-icons/react'
 import React from 'react'
 import {
-  AttachmentPreviewList,
+  AttachmentPreviewList as DefaultAttachmentPreviewList,
   MessageInput,
   QuotedMessagePreview,
-  SimpleAttachmentSelector,
   TextareaComposer,
   useChannelStateContext,
   useComponentContext,
@@ -32,71 +31,78 @@ const DefaultSendButton: React.FC<{
 
 const CustomMessageInputInner: React.FC = () => {
   const { channel } = useChannelStateContext()
-  const isFrozen = channel?.data?.frozen === true
   const { handleSubmit } = useMessageInputContext()
-  const { SendButton: SendButtonFromContext } =
-    useComponentContext('CustomMessageInput')
-  const SendButton = SendButtonFromContext ?? DefaultSendButton
+
   const hasSendableData = useMessageComposerHasSendableData()
+  const isFrozen = channel?.data?.frozen === true
   const isSendDisabled = isFrozen || !hasSendableData
 
+  const {
+    SendButton = DefaultSendButton,
+    AttachmentPreviewList = DefaultAttachmentPreviewList,
+  } = useComponentContext('CustomMessageInput')
+
   return (
-    <>
-      <div className="left-container">
-        <SimpleAttachmentSelector />
-      </div>
-      <div className="central-container min-w-0 w-full p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
-        <QuotedMessagePreview />
-        <CustomLinkPreviewList />
-        <AttachmentPreviewList />
-        <div className="flex">
-          <div className="w-full ml-2 mr-4 self-center leading-[0]">
-            <TextareaComposer
-              aria-disabled={isFrozen || undefined}
-              className="w-full resize-none outline-none leading-6"
-              // While this might usually be considered an anti-pattern, in most
-              // cases, when a message thread is rendered, we want the input to
-              // gain focus automatically.
-              // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus={!isFrozen}
-              maxRows={4}
-              readOnly={isFrozen}
-              tabIndex={isFrozen ? -1 : undefined}
-            />
-          </div>
-          <SendButton
-            sendMessage={handleSubmit}
-            aria-label="Send"
-            className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring"
-            data-testid="send-button"
-            disabled={isSendDisabled}
-            type="button"
+    <div className="central-container flex flex-col gap-2 min-w-0 w-full p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
+      <QuotedMessagePreview />
+      <CustomLinkPreviewList />
+      <AttachmentPreviewList />
+      <div className="flex">
+        <div className="w-full ml-2 mr-4 self-center leading-[0]">
+          <TextareaComposer
+            aria-disabled={isFrozen || undefined}
+            className="w-full resize-none outline-none leading-6"
+            // While this might usually be considered an anti-pattern, in most
+            // cases, when a message thread is rendered, we want the input to
+            // gain focus automatically.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={!isFrozen}
+            maxRows={4}
+            readOnly={isFrozen}
+            tabIndex={isFrozen ? -1 : undefined}
           />
         </div>
+        <SendButton
+          sendMessage={handleSubmit}
+          aria-label="Send"
+          className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring"
+          data-testid="send-button"
+          disabled={isSendDisabled}
+          type="button"
+        />
       </div>
-    </>
+    </div>
   )
 }
 
 export interface CustomMessageInputProps {
   renderActions?: () => React.ReactNode
+  renderFooter?: () => React.ReactNode
 }
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderActions,
+  renderFooter,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
 
   return (
-    <div
-      // @ts-expect-error Only React 19 onwards has `inert` in its types.
-      inert={isFrozen ? '' : undefined}
-      aria-disabled={isFrozen || undefined}
-      className="message-input flex items-center gap-2 p-4 aria-disabled:opacity-40"
-    >
-      {renderActions?.()}
-      <MessageInput Input={CustomMessageInputInner} />
+    <div className="flex flex-col gap-4">
+      <div
+        // @ts-expect-error Only React 19 onwards has `inert` in its types.
+        inert={isFrozen ? '' : undefined}
+        aria-disabled={isFrozen || undefined}
+        className="message-input flex items-end gap-4 aria-disabled:opacity-40"
+      >
+        {renderActions && (
+          <div className="flex h-12 shrink-0 items-center justify-center">
+            {renderActions()}
+          </div>
+        )}
+        <MessageInput Input={CustomMessageInputInner} />
+      </div>
+      {renderFooter?.()}
     </div>
   )
 }

package/src/components/MessagingShell/index.tsx

@@ -18,6 +18,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   capabilities = {},
   className,
   renderMessageInputActions,
+  renderMessageInputFooter,
   renderConversationFooter,
   onChannelSelect,
   initialParticipantFilter,
@@ -43,6 +44,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderMessage,
   onMessageLinkClick,
   sendButton,
+  attachmentPreviewList,
 }) => {
   const {
     service,
@@ -404,6 +406,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onBack={handleBackToChannelList}
                 showBackButton={!directConversationMode}
                 renderMessageInputActions={renderMessageInputActions}
+                renderMessageInputFooter={renderMessageInputFooter}
                 renderConversationFooter={renderConversationFooter}
                 renderChannelBanner={renderChannelBanner}
                 onLeaveConversation={handleLeaveConversation}
@@ -424,6 +427,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 renderMessage={renderMessage}
                 onMessageLinkClick={onMessageLinkClick}
                 sendButton={sendButton}
+                attachmentPreviewList={attachmentPreviewList}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/types.ts

@@ -123,6 +123,7 @@ export 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
@@ -266,6 +267,13 @@ export interface ChannelViewProps {
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   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
 }
 
 /**
@@ -275,6 +283,7 @@ export interface ChannelViewProps {
 export type ChannelViewPassthroughProps = Pick<
   ChannelViewProps,
   | 'renderMessageInputActions'
+  | 'renderMessageInputFooter'
   | 'renderConversationFooter'
   | 'CustomChannelEmptyState'
   | 'onDeleteConversationClick'
@@ -292,6 +301,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'renderMessage'
   | 'onMessageLinkClick'
   | 'sendButton'
+  | 'attachmentPreviewList'
 >
 
 /**