@linktr.ee/messaging-react 3.5.0-rc-1782793261 → 3.5.0-rc-1782802201

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BcmwckcI.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.useComposerLocked=e.useComposerLocked;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-DPP8cBmP.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.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -135,9 +135,10 @@ export declare interface ChannelListProps {
     customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>;
     /**
      * Custom component rendered for each channel row in the conversation list.
-     * Defaults to the package's built-in CustomChannelPreview.
+     * Receives Stream's channel preview props plus this package's selection
+     * state and `onChannelSelect` handler.
      */
-    channelPreview?: ComponentType<ChannelPreviewUIComponentProps>;
+    channelPreview?: ComponentType<ChannelPreviewProps>;
     renderMessagePreview?: (message: LocalMessage | undefined, defaultPreview?: string) => React.ReactNode;
     /**
      * Language code used to pick translated message text from Stream Chat i18n.
@@ -146,6 +147,12 @@ export declare interface ChannelListProps {
     viewerLanguage?: string;
 }
 
+export declare type ChannelPreviewProps = ChannelPreviewUIComponentProps & {
+    isSelected: boolean;
+    selectedChannel?: Channel | null;
+    onChannelSelect: (channel: Channel) => void;
+};
+
 /**
  * Channel view component with message list and input
  */

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as g, f as r, L as l, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as C, o as v, p as A, q as k, s as F, 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, E as D } from "./index-DxzkXLSW.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as g, f as r, L as l, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as C, o as v, p as A, q as k, s as F, 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, E as D } from "./index-CghCKfXq.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.5.0-rc-1782793261",
+  "version": "3.5.0-rc-1782802201",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1782793261",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1782802201",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelList/ChannelList.stories.tsx

@@ -1,12 +1,11 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
-import type { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { MockChatProviderWithChannels } from '../../stories/mocks'
+import type { ChannelPreviewProps } from '../../types'
 
 import { ChannelList } from '.'
 
-
 type ComponentProps = React.ComponentProps<typeof ChannelList>
 
 // ChannelList renders a list of mocked channels driven by MockChatProvider —
@@ -38,8 +37,10 @@ const Template: StoryFn<ComponentProps> = (args) => {
   )
 }
 
-const HostChannelPreview: React.FC<ChannelPreviewUIComponentProps> = ({
+const HostChannelPreview: React.FC<ChannelPreviewProps> = ({
   channel,
+  isSelected,
+  onChannelSelect,
   unread,
 }) => {
   const participant = Object.values(channel?.state?.members || {}).find(
@@ -47,7 +48,11 @@ const HostChannelPreview: React.FC<ChannelPreviewUIComponentProps> = ({
   )
 
   return (
-    <div className="mx-3 mt-3 rounded-[20px] border border-[#e0dfdb] bg-white p-4 shadow-[0_4px_16px_rgba(0,0,0,0.06)]">
+    <button
+      type="button"
+      onClick={() => onChannelSelect(channel)}
+      className="mx-3 mt-3 block w-[calc(100%-1.5rem)] rounded-[20px] border border-[#e0dfdb] bg-white p-4 text-left shadow-[0_4px_16px_rgba(0,0,0,0.06)]"
+    >
       <div className="flex items-center justify-between">
         <div className="min-w-0">
           <p className="truncate text-sm font-semibold text-[#191918]">
@@ -55,6 +60,7 @@ const HostChannelPreview: React.FC<ChannelPreviewUIComponentProps> = ({
           </p>
           <p className="mt-1 line-clamp-1 text-xs text-[#717070]">
             Host-owned channel preview
+            {isSelected ? ' (selected)' : ''}
           </p>
         </div>
         {Boolean(unread) && (
@@ -63,7 +69,7 @@ const HostChannelPreview: React.FC<ChannelPreviewUIComponentProps> = ({
           </span>
         )}
       </div>
-    </div>
+    </button>
   )
 }
 
@@ -79,11 +85,9 @@ WithSelection.args = {
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
-export const Custom: StoryFn<ComponentProps> = Template.bind({})
-Custom.args = {
+export const CustomChannelPreview: StoryFn<ComponentProps> = Template.bind({})
+CustomChannelPreview.args = {
   filters: { type: 'messaging' },
   onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
   channelPreview: HostChannelPreview,
 }
-
-

package/src/components/ChannelList/ChannelListContext.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { Channel, LocalMessage } from 'stream-chat'
 
+import type { ChannelListProps } from '../../types'
+
 type ChannelListContextValue = {
   selectedChannel?: Channel | null
   onChannelSelect: (channel: Channel) => void
@@ -9,6 +11,7 @@ type ChannelListContextValue = {
     message: LocalMessage | undefined,
     defaultPreview?: string
   ) => React.ReactNode
+  channelPreview?: ChannelListProps['channelPreview']
   viewerLanguage?: string
 }
 
@@ -17,6 +20,7 @@ const ChannelListContext = React.createContext<ChannelListContextValue>({
   onChannelSelect: () => {},
   debug: false,
   renderMessagePreview: undefined,
+  channelPreview: undefined,
   viewerLanguage: undefined,
 })
 

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

@@ -1,9 +1,11 @@
-import { act } from '@testing-library/react'
+import { act, fireEvent } from '@testing-library/react'
 import { Channel, LocalMessage, StreamChat } from 'stream-chat'
 import { describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
+import type { ChannelPreviewProps } from '../../types'
 
+import { ChannelListProvider } from './ChannelListContext'
 import CustomChannelPreview from './CustomChannelPreview'
 
 const mockUser = {
@@ -272,4 +274,47 @@ describe('CustomChannelPreview', () => {
       screen.getByRole('heading', { name: /starred conversation/i })
     ).toBeInTheDocument()
   })
+
+  it('renders a custom channel preview with selection props from context', () => {
+    const channel = createMockChannel([])
+    const onChannelSelect = vi.fn()
+    const ChannelPreview = vi.fn(
+      ({
+        channel,
+        isSelected,
+        onChannelSelect,
+        selectedChannel,
+      }: ChannelPreviewProps) => (
+        <button type="button" onClick={() => onChannelSelect(channel)}>
+          {isSelected ? 'Selected' : 'Not selected'} {selectedChannel?.id}
+        </button>
+      )
+    )
+
+    renderWithProviders(
+      <ChannelListProvider
+        value={{
+          selectedChannel: channel,
+          onChannelSelect,
+          debug: false,
+          channelPreview: ChannelPreview,
+        }}
+      >
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Selected channel-1' }))
+
+    expect(ChannelPreview).toHaveBeenCalledWith(
+      expect.objectContaining({
+        channel,
+        isSelected: true,
+        selectedChannel: channel,
+        onChannelSelect,
+      }),
+      expect.anything()
+    )
+    expect(onChannelSelect).toHaveBeenCalledWith(channel)
+  })
 })

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -15,16 +15,32 @@ import { useChannelListContext } from './ChannelListContext'
  * Custom channel preview that handles selection
  */
 const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
-  ({ channel, unread }) => {
+  (props) => {
+    const { channel, unread } = props
     const {
       selectedChannel,
       onChannelSelect,
       debug,
+      channelPreview,
       renderMessagePreview,
       viewerLanguage,
     } = useChannelListContext()
 
     const isSelected = selectedChannel?.id === channel?.id
+    const isChannelStarred = useChannelStar(channel)
+
+    if (channelPreview) {
+      const ChannelPreview = channelPreview
+
+      return (
+        <ChannelPreview
+          {...props}
+          isSelected={isSelected}
+          selectedChannel={selectedChannel}
+          onChannelSelect={onChannelSelect}
+        />
+      )
+    }
 
     const handleClick = () => {
       if (channel) {
@@ -105,7 +121,6 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     const messagePreview = renderMessagePreview
       ? renderMessagePreview(lastMessage, lastMessageText)
       : `${isLastMessageFromChatbot ? '✨ ' : ''}${lastMessageText}`
-    const isChannelStarred = useChannelStar(channel)
 
     // Use the unread prop passed by Stream Chat (reactive and updates automatically)
     const unreadCount = unread ?? 0

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

@@ -7,7 +7,14 @@ import { renderWithProviders } from '../../test/utils'
 import { ChannelList } from '.'
 
 const streamChannelListMock = vi.fn()
-const { CustomChannelPreviewMock, InfiniteScrollMock } = vi.hoisted(() => ({
+const {
+  ChannelListProviderMock,
+  CustomChannelPreviewMock,
+  InfiniteScrollMock,
+} = vi.hoisted(() => ({
+  ChannelListProviderMock: vi.fn(
+    ({ children }: { children: React.ReactNode; value: unknown }) => children
+  ),
   CustomChannelPreviewMock: () => null,
   InfiniteScrollMock: () => null,
 }))
@@ -24,6 +31,10 @@ vi.mock('../../providers/MessagingProvider', () => ({
   useMessagingContext: () => ({ debug: false }),
 }))
 
+vi.mock('./ChannelListContext', () => ({
+  ChannelListProvider: ChannelListProviderMock,
+}))
+
 vi.mock('./CustomChannelPreview', () => ({
   default: CustomChannelPreviewMock,
 }))
@@ -35,6 +46,7 @@ describe('ChannelList', () => {
   }
 
   beforeEach(() => {
+    ChannelListProviderMock.mockClear()
     streamChannelListMock.mockClear()
   })
 
@@ -65,7 +77,7 @@ describe('ChannelList', () => {
     })
   })
 
-  it('passes a custom channel preview through to Stream ChannelList', () => {
+  it('keeps the built-in channel preview bridge when a custom preview is provided', () => {
     const ChannelPreview = () => null
 
     renderWithProviders(
@@ -73,9 +85,14 @@ describe('ChannelList', () => {
     )
 
     expect(streamChannelListMock).toHaveBeenCalledOnce()
+    const contextValue = ChannelListProviderMock.mock.calls[0][0].value as {
+      channelPreview?: unknown
+    }
+
     expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
-      Preview: ChannelPreview,
+      Preview: CustomChannelPreviewMock,
     })
+    expect(contextValue.channelPreview).toBe(ChannelPreview)
   })
 
   it('passes allowNewMessagesFromUnfilteredChannels through to Stream ChannelList', () => {

package/src/components/ChannelList/index.tsx

@@ -66,6 +66,7 @@ export const ChannelList = React.memo<ChannelListProps>(
         selectedChannel,
         onChannelSelect,
         debug,
+        channelPreview,
         renderMessagePreview,
         viewerLanguage,
       }),
@@ -73,6 +74,7 @@ export const ChannelList = React.memo<ChannelListProps>(
         selectedChannel,
         onChannelSelect,
         debug,
+        channelPreview,
         renderMessagePreview,
         viewerLanguage,
       ]
@@ -98,7 +100,7 @@ export const ChannelList = React.memo<ChannelListProps>(
               }
               channelRenderFilterFn={wrappedChannelRenderFilterFn}
               Paginator={InfiniteScroll}
-              Preview={channelPreview ?? CustomChannelPreview}
+              Preview={CustomChannelPreview}
               EmptyStateIndicator={customEmptyStateIndicator}
             />
           </ChannelListProvider>

package/src/index.ts

@@ -51,6 +51,7 @@ export type { ParticipantDisplayUser } from './utils/resolveParticipantDisplayNa
 export type {
   MessagingShellProps,
   ChannelListProps,
+  ChannelPreviewProps,
   ChannelViewProps,
   MessagingProviderProps,
   MessagingCapabilities,

package/src/types.ts

@@ -33,6 +33,12 @@ export type MessageLinkClickHandler = (
   message: LocalMessage | undefined
 ) => void
 
+export type ChannelPreviewProps = ChannelPreviewUIComponentProps & {
+  isSelected: boolean
+  selectedChannel?: Channel | null
+  onChannelSelect: (channel: Channel) => void
+}
+
 /**
  * Generic participant interface for different host environments
  */
@@ -94,9 +100,10 @@ export interface ChannelListProps {
   customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
   /**
    * Custom component rendered for each channel row in the conversation list.
-   * Defaults to the package's built-in CustomChannelPreview.
+   * Receives Stream's channel preview props plus this package's selection
+   * state and `onChannelSelect` handler.
    */
-  channelPreview?: ComponentType<ChannelPreviewUIComponentProps>
+  channelPreview?: ComponentType<ChannelPreviewProps>
   renderMessagePreview?: (
     message: LocalMessage | undefined,
     defaultPreview?: string