@linktr.ee/messaging-react 2.6.2-rc-1780478292 → 3.0.0

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Degc6G3J.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DqNobxVj.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { Attachment } from 'stream-chat';
 import { Channel } from 'stream-chat';
 import { ChannelFilters } from 'stream-chat';
-import { ChannelListProps as ChannelListProps_2 } from 'stream-chat-react';
-import { ChannelMemberResponse } from 'stream-chat';
 import { ChannelSort } from 'stream-chat';
 import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
@@ -113,18 +111,6 @@ export declare interface ChannelListProps {
      * ChannelList consumers.
      */
     allowNewMessagesFromUnfilteredChannels?: boolean;
-    /**
-     * Advanced override for handling `notification.message_new` events.
-     * Use for filtered/product-defined views that need to verify whether a
-     * channel belongs in the current list before inserting it.
-     */
-    onMessageNew?: ChannelListProps_2['onMessageNew'];
-    /**
-     * Advanced override for handling `notification.added_to_channel` events.
-     * Use for filtered/product-defined views that need to verify whether a
-     * channel belongs in the current list before inserting it.
-     */
-    onAddedToChannel?: ChannelListProps_2['onAddedToChannel'];
     /**
      * Client-side filter applied before rendering the channel list.
      * Websocket events can add channels to the list that bypass server-side
@@ -162,7 +148,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderMessageInputFooter' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'sendButton' | 'attachmentPreviewList'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'onMessageSent' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customChannelActions' | 'renderMessage' | 'onMessageLinkClick'>;
 
 /**
  * ChannelView component props
@@ -241,11 +227,6 @@ export declare interface ChannelViewProps {
      * Falls back to message.text when no matching translation exists.
      */
     viewerLanguage?: string;
-    /**
-     * Resolves the display label for the other channel participant.
-     * Defaults to name, then username, then "Unknown member" (never user.id).
-     */
-    getParticipantDisplayName?: (participant: ChannelMemberResponse | undefined) => string;
     /**
      * Custom render function for a banner/card component that renders
      * between the channel header and message list.
@@ -1147,65 +1128,50 @@ export declare interface MessagingProviderProps {
 }
 
 /**
- * Main messaging interface component that combines channel list and channel view
+ * Direct-conversation surface for one specific participant.
+ *
+ * Renders a single ChannelView for the channel between the connected user and
+ * `initialParticipantFilter`. If no channel exists yet and
+ * `initialParticipantData` is supplied, the configured StreamChatService
+ * channel creator is invoked to create one.
  */
 export declare const MessagingShell: default_2.FC<MessagingShellProps>;
 
 /**
- * Main MessagingShell component props
+ * Main MessagingShell component props.
+ *
+ * MessagingShell renders a single direct conversation between the connected
+ * user and `initialParticipantFilter`. It does not show a channel list — for
+ * inbox-style surfaces, compose `<ChannelList>` and `<ChannelView>` directly.
  */
 export declare interface MessagingShellProps extends ChannelViewPassthroughProps {
     capabilities?: MessagingCapabilities;
-    className?: string;
     onChannelSelect?: (channel: Channel) => void;
     /**
-     * Auto-select a conversation with this participant on mount.
-     * Useful for deep-linking to a specific conversation (e.g., /messages/[accountUuid])
-     *
-     * If a channel with this participant exists, it will be auto-selected.
-     * If no channel exists, you can provide initialParticipantData to automatically
-     * create the channel using the existing ChannelCreator.
+     * Fired when the user leaves the conversation or blocks the participant.
+     * The consumer is responsible for what happens next — typically
+     * unmounting MessagingShell, navigating away, or re-rendering with new
+     * participant data. When omitted, the shell renders a "Conversation
+     * ended" state rather than an indefinite spinner.
      */
-    initialParticipantFilter?: string;
+    onExitConversation?: () => void;
     /**
-     * Participant data for auto-creating a channel when initialParticipantFilter
-     * is provided but no channel exists. If this is provided, MessagingShell will
-     * automatically call service.startChannelWithParticipant() to create the channel.
+     * UUID of the other participant for the direct conversation to render.
      *
-     * This reuses the existing ChannelCreator from StreamChatServiceConfig.
-     */
-    initialParticipantData?: Participant;
-    /**
-     * Controls whether the channel list is shown. When false, the channel list
-     * is immediately hidden. Useful for direct conversation mode where you want
-     * to show only the channel view without the list.
-     */
-    showChannelList?: boolean;
-    /**
-     * Filters for channel list. Passed through to StreamChat ChannelList.
+     * If a channel with this participant already exists, it is auto-selected.
+     * If no channel exists, supply `initialParticipantData` to auto-create one
+     * via the configured StreamChatService channel creator.
      */
-    filters?: ChannelFilters;
+    initialParticipantFilter: string;
     /**
-     * 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.
+     * Participant data for auto-creating a channel when no channel exists yet
+     * for `initialParticipantFilter`. When omitted, the shell renders an error
+     * state ("No conversation found with this account") if the channel is
+     * missing.
      *
-     * @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.
-     */
-    channelListCustomEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
-    /**
-     * Custom render function for message preview text in channel list.
-     * Receives the message and a default preview string.
+     * This reuses the existing ChannelCreator from StreamChatServiceConfig.
      */
-    renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
+    initialParticipantData?: Participant;
 }
 
 export declare function normalizeLanguageCode(language?: string): string | undefined;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-LiNmL1ax.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BUT2yBvJ.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

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

@@ -56,28 +56,6 @@ describe('ChannelList', () => {
     })
   })
 
-  it('passes new-channel event handlers through to Stream ChannelList', () => {
-    const onMessageNew = vi.fn()
-    const onAddedToChannel = vi.fn()
-
-    renderWithProviders(
-      React.createElement(ChannelList, {
-        ...defaultProps,
-        onMessageNew,
-        onAddedToChannel,
-      })
-    )
-
-    expect(streamChannelListMock).toHaveBeenCalledOnce()
-    const streamProps = streamChannelListMock.mock.calls[0][0] as {
-      onMessageNew?: unknown
-      onAddedToChannel?: unknown
-    }
-
-    expect(streamProps.onMessageNew).toBe(onMessageNew)
-    expect(streamProps.onAddedToChannel).toBe(onAddedToChannel)
-  })
-
   it('wraps channelRenderFilterFn to restore pending messages and delegates to consumer filter', () => {
     const filterFn = vi.fn((channels: Channel[]) => channels)
 

package/src/components/ChannelList/index.tsx

@@ -21,8 +21,6 @@ export const ChannelList = React.memo<ChannelListProps>(
     selectedChannel,
     filters,
     allowNewMessagesFromUnfilteredChannels = false,
-    onMessageNew,
-    onAddedToChannel,
     channelRenderFilterFn,
     sort = DEFAULT_SORT,
     className,
@@ -94,8 +92,6 @@ export const ChannelList = React.memo<ChannelListProps>(
               allowNewMessagesFromUnfilteredChannels={
                 allowNewMessagesFromUnfilteredChannels
               }
-              onMessageNew={onMessageNew}
-              onAddedToChannel={onAddedToChannel}
               channelRenderFilterFn={wrappedChannelRenderFilterFn}
               Preview={CustomChannelPreview}
               EmptyStateIndicator={customEmptyStateIndicator}

package/src/components/ChannelView.test.tsx

@@ -372,17 +372,6 @@ describe('ChannelView', () => {
     expect(screen.getAllByText('Unknown member').length).toBeGreaterThan(0)
   })
 
-  it('uses getParticipantDisplayName override when provided', () => {
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel()}
-        getParticipantDisplayName={() => 'Custom Label'}
-      />
-    )
-
-    expect(screen.getAllByText('Custom Label').length).toBeGreaterThan(0)
-  })
-
   it('fires onMessageLinkClick with the href and undefined message when the link is not inside a message wrapper', () => {
     const handler = vi.fn()
     const { container } = renderWithProviders(

package/src/components/ChannelView.tsx

@@ -7,7 +7,7 @@ import {
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useRef } from 'react'
-import { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
+import { Channel as ChannelType } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -49,9 +49,6 @@ const CustomChannelHeader: React.FC<{
   canShowInfo: boolean
   showStarButton?: boolean
   dmAgentEnabled?: boolean
-  getParticipantDisplayName: (
-    participant: ChannelMemberResponse | undefined
-  ) => string
 }> = ({
   onBack,
   showBackButton,
@@ -59,7 +56,6 @@ const CustomChannelHeader: React.FC<{
   canShowInfo,
   showStarButton = false,
   dmAgentEnabled = false,
-  getParticipantDisplayName,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -73,7 +69,7 @@ const CustomChannelHeader: React.FC<{
     )
   }, [channel._client?.userID, channel.state?.members])
 
-  const participantName = getParticipantDisplayName(participant)
+  const participantName = resolveParticipantDisplayName(participant?.user)
   const participantImage = participant?.user?.image
   const isStarred = useChannelStar(channel)
 
@@ -274,9 +270,6 @@ const ChannelViewInner: React.FC<{
   ) => React.ReactNode
   dmAgentEnabled?: boolean
   viewerLanguage?: string
-  getParticipantDisplayName: (
-    participant: ChannelMemberResponse | undefined
-  ) => string
 }> = ({
   onBack,
   showBackButton,
@@ -297,7 +290,6 @@ const ChannelViewInner: React.FC<{
   renderMessage,
   dmAgentEnabled = false,
   viewerLanguage,
-  getParticipantDisplayName,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -400,7 +392,6 @@ const ChannelViewInner: React.FC<{
               canShowInfo={Boolean(participant)}
               showStarButton={showStarButton}
               dmAgentEnabled={showDmAgentHeader}
-              getParticipantDisplayName={getParticipantDisplayName}
             />
           </div>
 
@@ -442,7 +433,7 @@ const ChannelViewInner: React.FC<{
         dialogRef={infoDialogRef}
         onClose={handleCloseInfo}
         participant={participant}
-        participantDisplayName={getParticipantDisplayName(participant)}
+        participantDisplayName={resolveParticipantDisplayName(participant?.user)}
         channel={channel}
         followerStatusLabel={followerStatusLabel}
         onLeaveConversation={onLeaveConversation}
@@ -490,15 +481,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     sendButton,
     attachmentPreviewList,
     viewerLanguage,
-    getParticipantDisplayName: getParticipantDisplayNameProp,
   }) => {
-    const getParticipantDisplayName = useCallback(
-      (participant: ChannelMemberResponse | undefined) =>
-        getParticipantDisplayNameProp?.(participant) ??
-        resolveParticipantDisplayName(participant?.user),
-      [getParticipantDisplayNameProp]
-    )
-
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
     // 2. Adds skip_push and silent when DM agent is active
@@ -605,7 +588,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
               customChannelActions={customChannelActions}
               renderMessage={renderMessage}
               viewerLanguage={viewerLanguage}
-              getParticipantDisplayName={getParticipantDisplayName}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

package/src/components/MessagingShell/MessagingShell.test.tsx

@@ -0,0 +1,171 @@
+import React, { act } from 'react'
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import { renderWithProviders, screen, waitFor } from '../../test/utils'
+
+import { MessagingShell } from './index'
+
+const queryChannelsMock = vi.fn()
+const startChannelWithParticipantMock = vi.fn()
+
+const baseClient = {
+  userID: 'me-1',
+  queryChannels: queryChannelsMock,
+}
+
+const baseService = {
+  startChannelWithParticipant: startChannelWithParticipantMock,
+}
+
+let useMessagingReturn: Record<string, unknown> = {
+  client: baseClient,
+  isConnected: true,
+  isLoading: false,
+  error: null,
+  refreshConnection: vi.fn(),
+  service: baseService,
+  debug: false,
+}
+
+vi.mock('../../hooks/useMessaging', () => ({
+  useMessaging: () => useMessagingReturn,
+}))
+
+let capturedChannelViewProps: Record<string, unknown> = {}
+vi.mock('../ChannelView', () => ({
+  ChannelView: (props: Record<string, unknown>) => {
+    capturedChannelViewProps = props
+    return <div data-testid="channel-view" />
+  },
+}))
+
+vi.mock('./LoadingState', () => ({
+  LoadingState: () => <div data-testid="loading-state" />,
+}))
+
+vi.mock('./ErrorState', () => ({
+  ErrorState: ({ message }: { message: string }) => (
+    <div data-testid="error-state">{message}</div>
+  ),
+}))
+
+const makeChannel = (id: string): Channel =>
+  ({ id, cid: `messaging:${id}` }) as unknown as Channel
+
+describe('MessagingShell', () => {
+  beforeEach(() => {
+    queryChannelsMock.mockReset()
+    startChannelWithParticipantMock.mockReset()
+    capturedChannelViewProps = {}
+    useMessagingReturn = {
+      client: baseClient,
+      isConnected: true,
+      isLoading: false,
+      error: null,
+      refreshConnection: vi.fn(),
+      service: baseService,
+      debug: false,
+    }
+  })
+
+  it('does not refire queryChannels when initialParticipantData and onChannelSelect get fresh references on re-render', async () => {
+    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+        onChannelSelect={(channel) => void channel}
+      />
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId('channel-view')).toBeInTheDocument()
+    })
+
+    expect(queryChannelsMock).toHaveBeenCalledTimes(1)
+
+    // Re-render with new inline references for the same logical values — this
+    // is the README-documented usage pattern that previously re-fired the
+    // effect on every render.
+    rerender(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+        onChannelSelect={(channel) => void channel}
+      />
+    )
+    rerender(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+        onChannelSelect={(channel) => void channel}
+      />
+    )
+
+    expect(queryChannelsMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('refires queryChannels when initialParticipantFilter actually changes', async () => {
+    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell initialParticipantFilter="other-1" />
+    )
+
+    await waitFor(() => {
+      expect(queryChannelsMock).toHaveBeenCalledTimes(1)
+    })
+
+    rerender(<MessagingShell initialParticipantFilter="other-2" />)
+
+    await waitFor(() => {
+      expect(queryChannelsMock).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('calls onExitConversation and renders "Conversation ended" when the user leaves the conversation', async () => {
+    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
+    const onExit = vi.fn()
+
+    renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        onExitConversation={onExit}
+      />
+    )
+
+    await waitFor(() => {
+      expect(screen.getByTestId('channel-view')).toBeInTheDocument()
+    })
+
+    const onLeave = capturedChannelViewProps.onLeaveConversation as () => void
+    act(() => onLeave())
+
+    expect(onExit).toHaveBeenCalledTimes(1)
+    expect(screen.getByTestId('error-state')).toHaveTextContent(
+      'Conversation ended'
+    )
+    expect(screen.queryByTestId('loading-state')).not.toBeInTheDocument()
+  })
+
+  it('renders the "Conversation ended" state even when no onExitConversation callback is provided (no permanent spinner)', async () => {
+    queryChannelsMock.mockResolvedValue([makeChannel('existing-1')])
+
+    renderWithProviders(<MessagingShell initialParticipantFilter="other-1" />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('channel-view')).toBeInTheDocument()
+    })
+
+    const onBlock = capturedChannelViewProps.onBlockParticipant as (
+      participantId?: string
+    ) => void
+    act(() => onBlock('other-1'))
+
+    expect(screen.getByTestId('error-state')).toHaveTextContent(
+      'Conversation ended'
+    )
+  })
+})