@linktr.ee/messaging-react 1.25.0 → 1.26.0

package/package.json

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

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -129,6 +129,37 @@ describe('CustomChannelPreview', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('ignores age safety system messages when resolving the channel preview text', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Still available to chat',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+      {
+        id: 'msg-2',
+        type: 'system',
+        created_at: new Date('2026-01-01T00:01:00.000Z'),
+        metadata: {
+          custom_type: 'SYSTEM_AGE_SAFETY_BLOCKED',
+        },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('Still available to chat')).toBeInTheDocument()
+    expect(
+      screen.queryByText(
+        'This user isn’t able to reply because they don’t meet our age safety guidelines.'
+      )
+    ).not.toBeInTheDocument()
+  })
+
   it('shows fallback text when all messages are system messages', () => {
     const channel = createMockChannel([
       {

package/src/components/ChannelList/index.test.tsx

@@ -76,4 +76,22 @@ describe('ChannelList', () => {
     expect(streamProps.onMessageNew).toBe(onMessageNew)
     expect(streamProps.onAddedToChannel).toBe(onAddedToChannel)
   })
+
+  it('passes channelRenderFilterFn through to Stream ChannelList', () => {
+    const filterFn = vi.fn()
+
+    renderWithProviders(
+      React.createElement(ChannelList, {
+        ...defaultProps,
+        channelRenderFilterFn: filterFn,
+      })
+    )
+
+    expect(streamChannelListMock).toHaveBeenCalledOnce()
+    const streamProps = streamChannelListMock.mock.calls[0][0] as {
+      channelRenderFilterFn?: unknown
+    }
+
+    expect(streamProps.channelRenderFilterFn).toBe(filterFn)
+  })
 })

package/src/components/ChannelList/index.tsx

@@ -21,6 +21,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     allowNewMessagesFromUnfilteredChannels = false,
     onMessageNew,
     onAddedToChannel,
+    channelRenderFilterFn,
     sort = DEFAULT_SORT,
     className,
     customEmptyStateIndicator,
@@ -71,6 +72,7 @@ export const ChannelList = React.memo<ChannelListProps>(
               }
               onMessageNew={onMessageNew}
               onAddedToChannel={onAddedToChannel}
+              channelRenderFilterFn={channelRenderFilterFn}
               Preview={CustomChannelPreview}
               EmptyStateIndicator={customEmptyStateIndicator}
             />

package/src/components/CustomSystemMessage/CustomSystemMessage.stories.tsx

@@ -47,6 +47,14 @@ DmAgentResumed.args = createStoryProps({
   },
 })
 
+export const AgeSafetyBlocked: StoryFn<EventComponentProps> = Template.bind({})
+AgeSafetyBlocked.args = createStoryProps({
+  text: '   ',
+  metadata: {
+    custom_type: 'SYSTEM_AGE_SAFETY_BLOCKED',
+  },
+})
+
 export const GenericFallback: StoryFn<EventComponentProps> = Template.bind({})
 GenericFallback.args = createStoryProps({
   text: 'Message activity event',

package/src/components/CustomSystemMessage/CustomSystemMessage.test.tsx

@@ -60,6 +60,51 @@ describe('CustomSystemMessage', () => {
     expect(dmAgentSystemMessage).toHaveTextContent('DM Agent resumed')
   })
 
+  it('renders the age safety blocked subtype with fallback copy and warning treatment', () => {
+    const { container } = renderWithProviders(
+      <CustomSystemMessage
+        {...createProps({
+          text: '   ',
+          metadata: {
+            custom_type: 'SYSTEM_AGE_SAFETY_BLOCKED',
+          },
+        })}
+      />
+    )
+
+    const ageSafetySystemMessage = screen.getByTestId(
+      'age-safety-system-message'
+    )
+    expect(ageSafetySystemMessage).toHaveAttribute(
+      'data-age-safety-system-type',
+      'SYSTEM_AGE_SAFETY_BLOCKED'
+    )
+    expect(ageSafetySystemMessage).toHaveTextContent(
+      'This user isn’t able to reply because they don’t meet our age safety guidelines.'
+    )
+    const emphasisLink = screen.getByRole('link', {
+      name: 'age safety guidelines.',
+    })
+    expect(emphasisLink).toHaveClass('mes-age-safety-system-message__emphasis')
+    expect(emphasisLink).toHaveAttribute(
+      'href',
+      'https://linktr.ee/s/about/contact'
+    )
+    expect(emphasisLink).toHaveAttribute('target', '_blank')
+    expect(emphasisLink).toHaveAttribute('rel', 'noopener noreferrer')
+    expect(
+      screen.getByTestId('age-safety-system-message-icon')
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('.mes-age-safety-system-message__icon')
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector(
+        '[data-testid="age-safety-system-message-icon"] path[opacity="0.2"]'
+      )
+    ).toBeInTheDocument()
+  })
+
   it('falls back to legacy generic rendering when subtype is absent or unknown', () => {
     const { container } = renderWithProviders(
       <CustomSystemMessage
@@ -71,11 +116,12 @@ describe('CustomSystemMessage', () => {
       />
     )
 
-    expect(screen.queryByTestId('dm-agent-system-message')).not.toBeInTheDocument()
+    expect(
+      screen.queryByTestId('dm-agent-system-message')
+    ).not.toBeInTheDocument()
     expect(screen.getByText('Legacy system message')).toBeInTheDocument()
     expect(
       container.querySelector('.str-chat__message--system__line')
     ).toBeInTheDocument()
   })
-
 })

package/src/components/CustomSystemMessage/index.tsx

@@ -1,7 +1,10 @@
-import { SparkleIcon } from '@phosphor-icons/react'
+import { ProhibitIcon, SparkleIcon } from '@phosphor-icons/react'
 import { MessageTimestamp, type EventComponentProps } from 'stream-chat-react'
 
-import type { DmAgentSystemType } from '../../stream-custom-data'
+import type {
+  AgeSafetySystemType,
+  DmAgentSystemType,
+} from '../../stream-custom-data'
 
 const DM_AGENT_SYSTEM_TYPES: readonly DmAgentSystemType[] = [
   'SYSTEM_DM_AGENT_PAUSED',
@@ -14,51 +17,154 @@ const DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<DmAgentSystemType, string> =
     SYSTEM_DM_AGENT_RESUMED: 'DM Agent has rejoined the conversation',
   }
 
+const AGE_SAFETY_SYSTEM_TYPES: readonly AgeSafetySystemType[] = [
+  'SYSTEM_AGE_SAFETY_BLOCKED',
+]
+
+const AGE_SAFETY_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<
+  AgeSafetySystemType,
+  string
+> = {
+  SYSTEM_AGE_SAFETY_BLOCKED:
+    'This user isn’t able to reply because they don’t meet our age safety guidelines.',
+}
+
+const AGE_SAFETY_SYSTEM_MESSAGE_EMPHASIS = 'age safety guidelines.'
+const AGE_SAFETY_SYSTEM_MESSAGE_URL = 'https://linktr.ee/s/about/contact'
+
 const isDmAgentSystemType = (
   value: string | undefined
 ): value is DmAgentSystemType => {
   return DM_AGENT_SYSTEM_TYPES.includes(value as DmAgentSystemType)
 }
 
-const getDmAgentSystemType = (
+const isAgeSafetySystemType = (
+  value: string | undefined
+): value is AgeSafetySystemType => {
+  return AGE_SAFETY_SYSTEM_TYPES.includes(value as AgeSafetySystemType)
+}
+
+type CustomSystemMessageVariant =
+  | {
+      kind: 'dm-agent'
+      type: DmAgentSystemType
+    }
+  | {
+      kind: 'age-safety'
+      type: AgeSafetySystemType
+    }
+
+const getCustomSystemMessageVariant = (
   message: EventComponentProps['message']
-): DmAgentSystemType | undefined => {
+): CustomSystemMessageVariant | undefined => {
   const metadataCustomType = message.metadata?.custom_type
   if (isDmAgentSystemType(metadataCustomType)) {
-    return metadataCustomType
+    return {
+      kind: 'dm-agent',
+      type: metadataCustomType,
+    }
+  }
+
+  if (isAgeSafetySystemType(metadataCustomType)) {
+    return {
+      kind: 'age-safety',
+      type: metadataCustomType,
+    }
   }
 
   const fallbackType = message.dm_agent_system_type
   if (isDmAgentSystemType(fallbackType)) {
-    return fallbackType
+    return {
+      kind: 'dm-agent',
+      type: fallbackType,
+    }
   }
 
   return undefined
 }
 
+const renderAgeSafetyMessageText = (messageText: string): React.ReactNode => {
+  const emphasisIndex = messageText.indexOf(AGE_SAFETY_SYSTEM_MESSAGE_EMPHASIS)
+  if (emphasisIndex === -1) {
+    return messageText
+  }
+
+  const emphasisEndIndex =
+    emphasisIndex + AGE_SAFETY_SYSTEM_MESSAGE_EMPHASIS.length
+
+  return (
+    <>
+      {messageText.slice(0, emphasisIndex)}
+      <a
+        href={AGE_SAFETY_SYSTEM_MESSAGE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="mes-age-safety-system-message__emphasis font-medium text-inherit underline"
+      >
+        {AGE_SAFETY_SYSTEM_MESSAGE_EMPHASIS}
+      </a>
+      {messageText.slice(emphasisEndIndex)}
+    </>
+  )
+}
+
 export const CustomSystemMessage: React.FC<EventComponentProps> = (props) => {
   const isDateHidden = props.message.hide_date === true
-  const dmAgentSystemType = getDmAgentSystemType(props.message)
+  const customSystemMessageVariant = getCustomSystemMessageVariant(
+    props.message
+  )
 
-  if (dmAgentSystemType) {
+  if (customSystemMessageVariant?.kind === 'dm-agent') {
     const messageText =
       props.message.text?.trim() ||
-      DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT[dmAgentSystemType]
+      DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT[customSystemMessageVariant.type]
 
     return (
       <div className="str-chat__message--system" data-testid="message-system">
         <div
-          className="mes-dm-agent-system-message"
+          className="mes-dm-agent-system-message mx-auto mb-2 inline-flex w-fit max-w-[min(100%,480px)] items-center justify-center gap-[10px] rounded-[12px] border border-[rgba(0,0,0,0.08)] p-3 text-[rgba(0,0,0,0.55)]"
           data-testid="dm-agent-system-message"
-          data-dm-agent-system-type={dmAgentSystemType}
+          data-dm-agent-system-type={customSystemMessageVariant.type}
         >
           <SparkleIcon
             size={16}
             weight="regular"
             aria-hidden
-            className="mes-dm-agent-system-message__sparkle"
+            className="mes-dm-agent-system-message__sparkle shrink-0"
+          />
+          <p className="mes-dm-agent-system-message__text m-0 text-center text-[14px] font-normal leading-5 tracking-[0.21px]">
+            {messageText}
+          </p>
+        </div>
+        {!isDateHidden && <MessageTimestamp message={props.message} />}
+      </div>
+    )
+  }
+
+  if (customSystemMessageVariant?.kind === 'age-safety') {
+    const messageText =
+      props.message.text?.trim() ||
+      AGE_SAFETY_SYSTEM_MESSAGE_FALLBACK_TEXT[customSystemMessageVariant.type]
+
+    return (
+      <div className="str-chat__message--system" data-testid="message-system">
+        <div
+          className="mes-age-safety-system-message box-border mx-auto mb-2 flex w-full max-w-[329px] items-start justify-center gap-3 rounded-[12px] border border-[var(--border-secondary,rgba(0,0,0,0.08))] bg-[var(--bg-warning-subtle,#fef3c6)] px-2 py-4 pl-5 text-[color:var(--text-warning-on-warning,#894b00)]"
+          data-testid="age-safety-system-message"
+          data-age-safety-system-type={customSystemMessageVariant.type}
+        >
+          <ProhibitIcon
+            size={24}
+            weight="duotone"
+            aria-hidden
+            className="mes-age-safety-system-message__icon shrink-0 text-[color:var(--text-warning-on-warning,#894b00)]"
+            data-testid="age-safety-system-message-icon"
           />
-          <p className="mes-dm-agent-system-message__text">{messageText}</p>
+          <div className="mes-age-safety-system-message__content min-w-0 flex-[1_0_0]">
+            <p className="m-0 text-balance text-left text-[12px] font-normal leading-4 tracking-[0.21px] text-[color:var(--text-warning-on-warning,#894b00)]">
+              {renderAgeSafetyMessageText(messageText)}
+            </p>
+          </div>
         </div>
         {!isDateHidden && <MessageTimestamp message={props.message} />}
       </div>

package/src/components/MessagingShell/index.tsx

@@ -27,6 +27,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   CustomChannelEmptyState,
   showChannelList = true,
   filters,
+  channelRenderFilterFn,
   channelListCustomEmptyStateIndicator,
   onDeleteConversationClick,
   onBlockParticipantClick,
@@ -455,6 +456,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             onChannelSelect={handleChannelSelect}
             selectedChannel={selectedChannel || undefined}
             filters={channelFilters}
+            channelRenderFilterFn={channelRenderFilterFn}
             customEmptyStateIndicator={channelListCustomEmptyStateIndicator}
             renderMessagePreview={renderMessagePreview}
           />

package/src/stream-custom-data.ts

@@ -18,10 +18,13 @@ export type DmAgentSystemType =
   | 'SYSTEM_DM_AGENT_PAUSED'
   | 'SYSTEM_DM_AGENT_RESUMED'
 
+export type AgeSafetySystemType = 'SYSTEM_AGE_SAFETY_BLOCKED'
+
 export type MessageCustomType =
   | 'MESSAGE_TIP'
   | 'MESSAGE_PAID'
   | 'MESSAGE_CHATBOT'
+  | AgeSafetySystemType
   | DmAgentSystemType
 
 /**

package/src/styles.css

@@ -231,33 +231,3 @@
   color: #016e1a;
   background-color: #dbf0e0;
 }
-
-/* DM Agent pause/resume system message variants */
-.mes-dm-agent-system-message {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  margin-inline: auto;
-  margin-bottom: 8px;
-  width: fit-content;
-  max-width: min(100%, 480px);
-  padding: 12px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
-  color: rgba(0, 0, 0, 0.55);
-}
-
-.mes-dm-agent-system-message__sparkle {
-  flex-shrink: 0;
-}
-
-.mes-dm-agent-system-message__text {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.21px;
-  color: rgba(0, 0, 0, 0.55);
-  text-align: center;
-}

package/src/types.ts

@@ -91,6 +91,20 @@ export interface ChannelListProps {
    * channel belongs in the current list before inserting it.
    */
   onAddedToChannel?: StreamChannelListProps['onAddedToChannel']
+  /**
+   * Client-side filter applied before rendering the channel list.
+   * Websocket events can add channels to the list that bypass server-side
+   * query filters. Use this to enforce visibility rules that can't be
+   * automatically derived from the filters prop (e.g. $or conditions).
+   *
+   * @example
+   * // Hide channels where the visitor hasn't sent a message yet,
+   * // but keep legacy channels that predate the has_visitor_message field
+   * channelRenderFilterFn={(channels) =>
+   *   channels.filter(ch => ch.data?.has_visitor_message !== false)
+   * }
+   */
+  channelRenderFilterFn?: (channels: Channel[]) => Channel[]
   /**
    * Sort order for the channel list query.
    * Defaults to `{ last_message_at: -1 }` (most recent first).
@@ -282,6 +296,18 @@ export interface MessagingShellProps extends ChannelViewPassthroughProps {
    */
   filters?: ChannelFilters
 
+  /**
+   * Client-side filter applied before rendering the channel list.
+   * Websocket events can add channels to the list that bypass server-side
+   * query filters. Use this to enforce visibility rules client-side.
+   *
+   * @example
+   * channelRenderFilterFn={(channels) =>
+   *   channels.filter(ch => ch.data?.has_visitor_message !== false)
+   * }
+   */
+  channelRenderFilterFn?: (channels: Channel[]) => Channel[]
+
   /**
    * Custom empty state indicator component to render when the channel list is empty.
    * Useful for showing a custom empty state indicator when the channel list is empty.