@linktr.ee/messaging-react 1.25.1 → 1.26.1

package/package.json

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

@@ -54,8 +54,21 @@ vi.mock('./CustomDateSeparator', () => ({
   CustomDateSeparator: () => <div data-testid="custom-date-separator" />,
 }))
 
+vi.mock('./ChannelInfoDialog', () => ({
+  ChannelInfoDialog: () => <div data-testid="channel-info-dialog" />,
+}))
+
+const avatarRenderCalls: Array<Record<string, unknown>> = []
 vi.mock('./Avatar', () => ({
-  Avatar: () => <div data-testid="avatar" />,
+  Avatar: (props: Record<string, unknown>) => {
+    avatarRenderCalls.push({ ...props })
+    return <div data-testid="avatar" />
+  },
+}))
+
+let mockIsStarred = false
+vi.mock('../hooks/useChannelStar', () => ({
+  useChannelStar: () => mockIsStarred,
 }))
 
 const createChannel = () =>
@@ -83,6 +96,8 @@ const createChannel = () =>
 describe('ChannelView', () => {
   beforeEach(() => {
     activeChannel = undefined
+    avatarRenderCalls.length = 0
+    mockIsStarred = false
   })
 
   it('renders conversation footer between message list and message input', () => {
@@ -122,6 +137,40 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
+  it('does not pass starred to avatar when showStarButton is false', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
+    renderWithProviders(
+      <ChannelView channel={channel} showStarButton={false} />
+    )
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+  })
+
+  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
+    renderWithProviders(
+      <ChannelView channel={channel} showStarButton={true} />
+    )
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
+  })
+
+  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
+    mockIsStarred = true
+    const channel = createChannel()
+
+    renderWithProviders(<ChannelView channel={channel} />)
+
+    expect(avatarRenderCalls.length).toBeGreaterThan(0)
+    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+  })
+
   it('keeps channel banner and input action renderers working', () => {
     const channel = createChannel()
     const renderMessageInputActions = vi.fn((currentChannel: Channel) => (

package/src/components/ChannelView.tsx

@@ -97,7 +97,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={isStarred}
+            starred={showStarButton && isStarred}
             size={40}
           />
           <h1 className="text-xs font-medium text-black/90">
@@ -150,7 +150,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={isStarred}
+            starred={showStarButton && isStarred}
             size={40}
           />
           <div className="min-w-0">

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.