@linktr.ee/messaging-react 1.16.0 → 1.17.0-rc-1769666674

package/package.json

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

package/src/components/ChannelView.tsx

@@ -628,8 +628,13 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onBlockParticipantClick,
     onReportParticipantClick,
     dmAgentEnabled,
+    messageMetadata,
+    onMessageSent,
   }) => {
-    // Custom send message handler that adds skip_push and silent when DM agent is active
+    // Custom send message handler that:
+    // 1. Applies messageMetadata if provided
+    // 2. Adds skip_push and silent when DM agent is active
+    // 3. Calls onMessageSent callback with full response
     // Read chatbot_paused inside callback to get current value at send time (not stale closure)
     const doSendMessageRequest = useCallback(
       async (
@@ -641,15 +646,27 @@ export const ChannelView = React.memo<ChannelViewProps>(
           (channel.data as { chatbot_paused?: boolean })?.chatbot_paused === true
         const shouldSuppressNotifications = dmAgentEnabled && !agentPaused
 
-        if (shouldSuppressNotifications) {
-          return channel.sendMessage(
-            { ...message, silent: true },
-            { ...options, skip_push: true }
-          )
+        // Build final message with metadata
+        const finalMessage = {
+          ...message,
+          ...(shouldSuppressNotifications && { silent: true }),
+          ...(messageMetadata && messageMetadata),
         }
-        return channel.sendMessage(message, options)
+
+        // Build final options
+        const finalOptions = {
+          ...options,
+          ...(shouldSuppressNotifications && { skip_push: true }),
+        }
+
+        const response = await channel.sendMessage(finalMessage, finalOptions)
+
+        // Fire callback with full response (includes message.id)
+        onMessageSent?.(response)
+
+        return response
       },
-      [channel, dmAgentEnabled]
+      [channel, dmAgentEnabled, messageMetadata, onMessageSent]
     )
 
     return (

package/src/components/MessagingShell/index.tsx

@@ -31,6 +31,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onBlockParticipantClick,
   onReportParticipantClick,
   dmAgentEnabled,
+  messageMetadata,
+  onMessageSent,
 }) => {
   const {
     service,
@@ -477,6 +479,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onBlockParticipantClick={onBlockParticipantClick}
                 onReportParticipantClick={onReportParticipantClick}
                 dmAgentEnabled={dmAgentEnabled}
+                messageMetadata={messageMetadata}
+                onMessageSent={onMessageSent}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/index.ts

@@ -32,6 +32,7 @@ export type {
   ParticipantSource,
   Participant,
 } from './types'
+export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
 export type { Faq, FaqListProps } from './components/FaqList'
 export type { FaqListItemProps } from './components/FaqList/FaqListItem'

package/src/stream-custom-data.ts

@@ -14,6 +14,18 @@
 
 import 'stream-chat'
 
+/**
+ * Message metadata for paid messaging and chatbot flows.
+ * Used to identify message types and payment status.
+ */
+export interface MessageMetadata {
+  custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+  amount_text?: string
+  payment_status?: string
+  payment_intent_id?: string
+  listing_id?: string
+}
+
 declare module 'stream-chat' {
   interface CustomMessageData {
     /**
@@ -25,15 +37,6 @@ declare module 'stream-chat' {
      * Message metadata from backend.
      * Contains type and payment information.
      */
-    metadata?: {
-      custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
-      amount_text?: string
-      payment_status?: string
-      payment_intent_id?: string
-      listing_id?: string
-    }
+    metadata?: MessageMetadata
   }
 }
-
-// Required to make this a module (enables the module augmentation above)
-export {}

package/src/styles.css

@@ -109,6 +109,10 @@
   flex-direction: column;
 }
 
+.str-chat__typing-indicator {
+  inset-inline: auto;
+}
+
 /* Custom message tag styles */
 .message-tag {
   display: inline-flex;

package/src/types.ts

@@ -2,10 +2,10 @@ import type {
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
-import type { Channel, ChannelFilters } from 'stream-chat'
+import type { Channel, ChannelFilters, SendMessageAPIResponse } from 'stream-chat'
 import { EmptyStateIndicatorProps } from 'stream-chat-react'
 
-import './stream-custom-data'
+import type { MessageMetadata } from './stream-custom-data'
 
 /**
  * Generic participant interface for different host environments
@@ -102,6 +102,27 @@ export interface ChannelViewProps {
    * The library reads chatbot_paused from channel.data internally.
    */
   dmAgentEnabled?: boolean
+
+  /**
+   * Custom metadata to attach to all outgoing messages.
+   * Used for paid messaging flows where messages need custom_type and listing_id.
+   *
+   * @example
+   * messageMetadata={{ custom_type: 'MESSAGE_PAID', listing_id: '...' }}
+   */
+  messageMetadata?: Pick<MessageMetadata, 'custom_type' | 'listing_id'>
+
+  /**
+   * Callback fired after a message is successfully sent.
+   * Receives the full API response including message.id.
+   * Useful for triggering payment flows with the message ID.
+   *
+   * @example
+   * onMessageSent={(response) => {
+   *   openPaymentModal(response.message.id)
+   * }}
+   */
+  onMessageSent?: (response: SendMessageAPIResponse) => void
 }
 
 /**
@@ -116,6 +137,8 @@ export type ChannelViewPassthroughProps = Pick<
   | 'onBlockParticipantClick'
   | 'onReportParticipantClick'
   | 'dmAgentEnabled'
+  | 'messageMetadata'
+  | 'onMessageSent'
 >
 
 /**