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

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'
 >
 
 /**