@linktr.ee/messaging-react 1.24.2 → 1.24.3-rc-1773289717

package/package.json

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

package/src/components/ChannelView.stories.tsx

@@ -254,6 +254,33 @@ WithMessageActions.parameters = {
   },
 }
 
+export const WithConversationFooter: StoryFn<TemplateProps> = Template.bind({})
+WithConversationFooter.args = {
+  showBackButton: false,
+  renderConversationFooter: (channel) => (
+    <div className="mx-4 mb-2 rounded-xl border border-black/10 bg-[#F9F7F4] px-4 py-3">
+      <p className="text-sm text-charcoal">
+        You will get notified when a new reply arrives in this conversation.
+      </p>
+      <button
+        type="button"
+        className="mt-2 rounded-full bg-charcoal px-3 py-1.5 text-xs font-medium text-white"
+        onClick={() => console.log('Footer CTA clicked', channel.id)}
+      >
+        Open Notification Settings
+      </button>
+    </div>
+  ),
+}
+WithConversationFooter.parameters = {
+  docs: {
+    description: {
+      story:
+        'Channel view with a custom footer rendered between the message list and message input via renderConversationFooter(channel).',
+    },
+  },
+}
+
 export const WithMessageDecoration: StoryFn<TemplateProps> = Template.bind({})
 WithMessageDecoration.args = {
   showBackButton: false,

package/src/components/ChannelView.test.tsx

@@ -0,0 +1,147 @@
+import React from 'react'
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+import { renderWithProviders, screen } from '../test/utils'
+
+import { ChannelView } from './ChannelView'
+
+let activeChannel: unknown
+
+vi.mock('stream-chat-react', () => ({
+  Channel: ({
+    channel,
+    children,
+  }: {
+    channel: unknown
+    children: React.ReactNode
+  }) => {
+    activeChannel = channel
+    return <div data-testid="channel">{children}</div>
+  },
+  Window: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="window">{children}</div>
+  ),
+  MessageList: () => <div data-testid="message-list" />,
+  WithComponents: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+  useMessageContext: () => ({ message: { id: 'message-1', text: 'hello' } }),
+  useChannelStateContext: () => ({ channel: activeChannel }),
+}))
+
+vi.mock('../providers/MessagingProvider', () => ({
+  useMessagingContext: () => ({ service: null, debug: false }),
+}))
+
+vi.mock('./CustomMessageInput', () => ({
+  CustomMessageInput: ({
+    renderActions,
+  }: {
+    renderActions?: () => React.ReactNode
+  }) => <div data-testid="message-input">{renderActions?.()}</div>,
+}))
+
+vi.mock('./CustomMessage', () => ({
+  CustomMessage: () => <div data-testid="custom-message" />,
+}))
+
+vi.mock('./CustomSystemMessage', () => ({
+  CustomSystemMessage: () => <div data-testid="custom-system-message" />,
+}))
+
+vi.mock('./CustomDateSeparator', () => ({
+  CustomDateSeparator: () => <div data-testid="custom-date-separator" />,
+}))
+
+vi.mock('./Avatar', () => ({
+  Avatar: () => <div data-testid="avatar" />,
+}))
+
+const createChannel = () =>
+  ({
+    id: 'channel-1',
+    cid: 'messaging:channel-1',
+    data: {},
+    _client: { userID: 'visitor-1' },
+    state: {
+      members: {
+        visitor: { user: { id: 'visitor-1', name: 'Visitor' }, role: 'owner' },
+        linker: { user: { id: 'linker-1', name: 'Linker' }, role: 'member' },
+      },
+      membership: {},
+      messages: [],
+    },
+    on: vi.fn(),
+    off: vi.fn(),
+    sendMessage: vi.fn(),
+    hide: vi.fn(),
+    pin: vi.fn(),
+    unpin: vi.fn(),
+  }) as unknown as Channel
+
+describe('ChannelView', () => {
+  beforeEach(() => {
+    activeChannel = undefined
+  })
+
+  it('renders conversation footer between message list and message input', () => {
+    const channel = createChannel()
+    const renderConversationFooter = vi.fn((currentChannel: Channel) => (
+      <div data-testid="conversation-footer">
+        footer-{currentChannel.id}
+      </div>
+    ))
+
+    renderWithProviders(
+      <ChannelView
+        channel={channel}
+        renderConversationFooter={renderConversationFooter}
+      />
+    )
+
+    const messageList = screen.getByTestId('message-list')
+    const conversationFooter = screen.getByTestId('conversation-footer')
+    const messageInput = screen.getByTestId('message-input')
+
+    expect(renderConversationFooter).toHaveBeenCalledWith(channel)
+    expect(conversationFooter).toHaveTextContent('footer-channel-1')
+    expect(
+      messageList.compareDocumentPosition(conversationFooter) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy()
+    expect(
+      conversationFooter.compareDocumentPosition(messageInput) &
+        Node.DOCUMENT_POSITION_FOLLOWING
+    ).toBeTruthy()
+  })
+
+  it('does not render conversation footer when no renderer is provided', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
+
+    expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
+  })
+
+  it('keeps channel banner and input action renderers working', () => {
+    const channel = createChannel()
+    const renderMessageInputActions = vi.fn((currentChannel: Channel) => (
+      <button data-testid="message-input-action">{currentChannel.id}</button>
+    ))
+
+    renderWithProviders(
+      <ChannelView
+        channel={channel}
+        renderChannelBanner={() => (
+          <div data-testid="channel-banner">channel-banner</div>
+        )}
+        renderMessageInputActions={renderMessageInputActions}
+      />
+    )
+
+    expect(screen.getByTestId('channel-banner')).toBeInTheDocument()
+    expect(screen.getByTestId('message-input-action')).toHaveTextContent(
+      'channel-1'
+    )
+    expect(renderMessageInputActions).toHaveBeenCalledWith(channel)
+  })
+})

package/src/components/ChannelView.tsx

@@ -524,6 +524,7 @@ const ChannelViewInner: React.FC<{
   onBack?: () => void
   showBackButton: boolean
   renderMessageInputActions?: (channel: ChannelType) => React.ReactNode
+  renderConversationFooter?: (channel: ChannelType) => React.ReactNode
   onLeaveConversation?: (channel: ChannelType) => void
   onBlockParticipant?: (participantId?: string) => void
   CustomChannelEmptyState?: React.ComponentType
@@ -543,6 +544,7 @@ const ChannelViewInner: React.FC<{
   onBack,
   showBackButton,
   renderMessageInputActions,
+  renderConversationFooter,
   onLeaveConversation,
   onBlockParticipant,
   showDeleteConversation = true,
@@ -640,6 +642,8 @@ const ChannelViewInner: React.FC<{
             />
           </div>
 
+          {renderConversationFooter?.(channel)}
+
           {/* Message Input */}
           <CustomMessageInput
             renderActions={() => renderMessageInputActions?.(channel)}
@@ -675,6 +679,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onBack,
     showBackButton = false,
     renderMessageInputActions,
+    renderConversationFooter,
     onLeaveConversation,
     onBlockParticipant,
     className,
@@ -755,6 +760,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onBack={onBack}
             showBackButton={showBackButton}
             renderMessageInputActions={renderMessageInputActions}
+            renderConversationFooter={renderConversationFooter}
             onLeaveConversation={onLeaveConversation}
             onBlockParticipant={onBlockParticipant}
             CustomChannelEmptyState={CustomChannelEmptyState}

package/src/components/MessagingShell/index.tsx

@@ -19,6 +19,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   capabilities = {},
   className,
   renderMessageInputActions,
+  renderConversationFooter,
   onChannelSelect,
   onParticipantSelect,
   initialParticipantFilter,
@@ -484,6 +485,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onBack={handleBackToChannelList}
                 showBackButton={!directConversationMode}
                 renderMessageInputActions={renderMessageInputActions}
+                renderConversationFooter={renderConversationFooter}
                 renderChannelBanner={renderChannelBanner}
                 onLeaveConversation={handleLeaveConversation}
                 onBlockParticipant={handleBlockParticipant}

package/src/types.ts

@@ -88,6 +88,7 @@ export interface ChannelViewProps {
   onBack?: () => void
   showBackButton?: boolean
   renderMessageInputActions?: (channel: Channel) => React.ReactNode
+  renderConversationFooter?: (channel: Channel) => React.ReactNode
   onLeaveConversation?: (channel: Channel) => void
   onBlockParticipant?: (participantId?: string) => void
   className?: string
@@ -192,6 +193,7 @@ export interface ChannelViewProps {
 export type ChannelViewPassthroughProps = Pick<
   ChannelViewProps,
   | 'renderMessageInputActions'
+  | 'renderConversationFooter'
   | 'CustomChannelEmptyState'
   | 'onDeleteConversationClick'
   | 'onBlockParticipantClick'