@linktr.ee/messaging-react 1.15.2 → 1.16.0

package/package.json

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

package/src/components/ChannelView.tsx

@@ -9,7 +9,11 @@ import {
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState, useCallback, useRef, useEffect } from 'react'
-import { Channel as ChannelType, ChannelMemberResponse, Event } from 'stream-chat'
+import {
+  Channel as ChannelType,
+  ChannelMemberResponse,
+  Event,
+} from 'stream-chat'
 import {
   Channel,
   Window,
@@ -66,11 +70,17 @@ const CustomChannelHeader: React.FC<{
     participant?.user?.name || participant?.user?.id || 'Unknown member'
   const participantImage = participant?.user?.image
 
-  const [isStarred, setIsStarred] = useState(!!channel.state.membership?.pinned_at)
+  const [isStarred, setIsStarred] = useState(
+    !!channel.state.membership?.pinned_at
+  )
 
   useEffect(() => {
     const handleMemberUpdate = (event: Event) => {
-      setIsStarred(event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at)
+      setIsStarred(
+        event?.member
+          ? !!event.member.pinned_at
+          : !!channel.state.membership?.pinned_at
+      )
     }
 
     channel.on('member.updated', handleMemberUpdate)
@@ -88,7 +98,10 @@ const CustomChannelHeader: React.FC<{
         await channel.pin()
       }
     } catch (error) {
-      console.error('[CustomChannelHeader] Failed to update pinned status:', error)
+      console.error(
+        '[CustomChannelHeader] Failed to update pinned status:',
+        error
+      )
     }
   }
 
@@ -614,7 +627,31 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onDeleteConversationClick,
     onBlockParticipantClick,
     onReportParticipantClick,
+    dmAgentEnabled,
   }) => {
+    // Custom send message handler that adds skip_push and silent when DM agent is active
+    // Read chatbot_paused inside callback to get current value at send time (not stale closure)
+    const doSendMessageRequest = useCallback(
+      async (
+        _channel: ChannelType,
+        message: Parameters<ChannelType['sendMessage']>[0],
+        options?: Parameters<ChannelType['sendMessage']>[1]
+      ) => {
+        const agentPaused =
+          (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 }
+          )
+        }
+        return channel.sendMessage(message, options)
+      },
+      [channel, dmAgentEnabled]
+    )
+
     return (
       <div
         className={classNames(
@@ -628,6 +665,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
           EmptyStateIndicator={CustomChannelEmptyState}
           LoadingIndicator={LoadingState}
           DateSeparator={CustomDateSeparator}
+          doSendMessageRequest={doSendMessageRequest}
         >
           <ChannelViewInner
             onBack={onBack}

package/src/components/MessagingShell/index.tsx

@@ -30,6 +30,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onDeleteConversationClick,
   onBlockParticipantClick,
   onReportParticipantClick,
+  dmAgentEnabled,
 }) => {
   const {
     service,
@@ -475,6 +476,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onDeleteConversationClick={onDeleteConversationClick}
                 onBlockParticipantClick={onBlockParticipantClick}
                 onReportParticipantClick={onReportParticipantClick}
+                dmAgentEnabled={dmAgentEnabled}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/types.ts

@@ -51,13 +51,79 @@ export interface MessagingCapabilities {
   showDeleteConversation?: boolean
 }
 
+/**
+ * ChannelList component props
+ */
+export interface ChannelListProps {
+  onChannelSelect: (channel: Channel) => void
+  selectedChannel?: Channel
+  showStartConversation?: boolean
+  onStartConversation?: () => void
+  participantLabel?: string
+  className?: string
+  filters: ChannelFilters
+  customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
+}
+
+/**
+ * ChannelView component props
+ */
+export interface ChannelViewProps {
+  channel: Channel
+  onBack?: () => void
+  showBackButton?: boolean
+  renderMessageInputActions?: (channel: Channel) => React.ReactNode
+  onLeaveConversation?: (channel: Channel) => void
+  onBlockParticipant?: (participantId?: string) => void
+  className?: string
+  CustomChannelEmptyState?: React.ComponentType
+  /**
+   * Show the "Delete Conversation" button in channel info dialog.
+   * Defaults to true for backward compatibility.
+   */
+  showDeleteConversation?: boolean
+  /**
+   * Analytics callback fired when "Delete Conversation" is clicked.
+   */
+  onDeleteConversationClick?: () => void
+  /**
+   * Analytics callback fired when "Block" or "Unblock" is clicked.
+   */
+  onBlockParticipantClick?: () => void
+  /**
+   * Analytics callback fired when "Report" is clicked.
+   */
+  onReportParticipantClick?: () => void
+
+  /**
+   * When true and DM agent is active on the channel (not paused),
+   * messages will be sent with skip_push and silent flags to suppress
+   * notifications to the creator until the agent responds.
+   * The library reads chatbot_paused from channel.data internally.
+   */
+  dmAgentEnabled?: boolean
+}
+
+/**
+ * Props that MessagingShell passes through to ChannelView.
+ * ChannelViewProps is the source of truth for these props.
+ */
+export type ChannelViewPassthroughProps = Pick<
+  ChannelViewProps,
+  | 'renderMessageInputActions'
+  | 'CustomChannelEmptyState'
+  | 'onDeleteConversationClick'
+  | 'onBlockParticipantClick'
+  | 'onReportParticipantClick'
+  | 'dmAgentEnabled'
+>
+
 /**
  * Main MessagingShell component props
  */
-export interface MessagingShellProps {
+export interface MessagingShellProps extends ChannelViewPassthroughProps {
   capabilities?: MessagingCapabilities
   className?: string
-  renderMessageInputActions?: (channel: Channel) => React.ReactNode
   onChannelSelect?: (channel: Channel) => void
   onParticipantSelect?: (participant: Participant) => void
 
@@ -80,12 +146,6 @@ export interface MessagingShellProps {
    */
   initialParticipantData?: Participant
 
-  /**
-   * Custom empty state component to render when a channel has no messages.
-   * Useful for showing FAQs or other contextual information in empty channels.
-   */
-  CustomChannelEmptyState?: React.ComponentType
-
   /**
    * Controls whether the channel list is shown. When false, the channel list
    * is immediately hidden. Useful for direct conversation mode where you want
@@ -103,69 +163,6 @@ export interface MessagingShellProps {
    * Useful for showing a custom empty state indicator when the channel list is empty.
    */
   channelListCustomEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
-
-  /**
-   * Analytics callback fired when "Delete Conversation" is clicked.
-   * Called before the action is performed.
-   */
-  onDeleteConversationClick?: () => void
-
-  /**
-   * Analytics callback fired when "Block" or "Unblock" is clicked.
-   * Called before the action is performed.
-   */
-  onBlockParticipantClick?: () => void
-
-  /**
-   * Analytics callback fired when "Report" is clicked.
-   * Called before the action is performed.
-   */
-  onReportParticipantClick?: () => void
-}
-
-/**
- * ChannelList component props
- */
-export interface ChannelListProps {
-  onChannelSelect: (channel: Channel) => void
-  selectedChannel?: Channel
-  showStartConversation?: boolean
-  onStartConversation?: () => void
-  participantLabel?: string
-  className?: string
-  filters: ChannelFilters
-  customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
-}
-
-/**
- * ChannelView component props
- */
-export interface ChannelViewProps {
-  channel: Channel
-  onBack?: () => void
-  showBackButton?: boolean
-  renderMessageInputActions?: (channel: Channel) => React.ReactNode
-  onLeaveConversation?: (channel: Channel) => void
-  onBlockParticipant?: (participantId?: string) => void
-  className?: string
-  CustomChannelEmptyState?: React.ComponentType
-  /**
-   * Show the "Delete Conversation" button in channel info dialog.
-   * Defaults to true for backward compatibility.
-   */
-  showDeleteConversation?: boolean
-  /**
-   * Analytics callback fired when "Delete Conversation" is clicked.
-   */
-  onDeleteConversationClick?: () => void
-  /**
-   * Analytics callback fired when "Block" or "Unblock" is clicked.
-   */
-  onBlockParticipantClick?: () => void
-  /**
-   * Analytics callback fired when "Report" is clicked.
-   */
-  onReportParticipantClick?: () => void
 }
 
 /**