@linktr.ee/messaging-react 1.25.1 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.25.1",
+  "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/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/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/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.