@linktr.ee/messaging-react 4.1.6-rc-1787171046 → 4.1.6-rc-1787173663

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.6-rc-1787171046",
+  "version": "4.1.6-rc-1787173663",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.5.0-rc-1787171046",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787173663",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/Avatar/Avatar.test.tsx

@@ -27,130 +27,4 @@ describe('Avatar', () => {
   it('keeps fixed emoji sizes for larger avatars', () => {
     expect(emojiFontSize(40)).toHaveStyle({ fontSize: '14px' })
   })
-
-  it.each([
-    [32, '14px'],
-    [55, '14px'],
-    [56, '18px'],
-    [119, '18px'],
-    [120, '36px'],
-  ])(
-    'uses the exact fixed font size at the %spx boundary',
-    (size, fontSize) => {
-      expect(emojiFontSize(size)).toHaveStyle({ fontSize })
-    }
-  )
-
-  it('does not show a star by default but shows one when starred', () => {
-    const defaultAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" />
-    )
-    expect(defaultAvatar.container.querySelector('svg')).not.toBeInTheDocument()
-
-    const starredAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" starred />
-    )
-    expect(starredAvatar.container.querySelector('svg')).toBeInTheDocument()
-  })
-
-  it('uses a squircle by default and a circle when explicitly requested', () => {
-    const squircleAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" />
-    )
-    const squircleElements = squircleAvatar.container.querySelectorAll(
-      '[style*="border-radius"]'
-    )
-    expect(squircleElements).toHaveLength(3)
-    squircleElements.forEach((element) =>
-      expect(element).toHaveStyle({ borderRadius: '1rem' })
-    )
-
-    const circleAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" shape="circle" />
-    )
-    const circleElements = circleAvatar.container.querySelectorAll(
-      '[style*="border-radius"]'
-    )
-    expect(circleElements).toHaveLength(3)
-    circleElements.forEach((element) =>
-      expect(element).toHaveStyle({ borderRadius: '50%' })
-    )
-  })
-
-  it('only applies the AI ring when dmAgentEnabled is true', () => {
-    const defaultAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" size={40} />
-    )
-    expect(
-      defaultAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).not.toHaveStyle({
-      borderWidth: '2px',
-      borderStyle: 'solid',
-    })
-
-    const enabledAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" size={40} dmAgentEnabled />
-    )
-    expect(
-      enabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).toHaveStyle({
-      borderWidth: '2px',
-      borderStyle: 'solid',
-      borderColor: 'var(--AI-Gradient, #7F22FE)',
-      boxShadow: 'inset 0 1px 2px 0 rgba(255, 255, 255, 0.5)',
-    })
-
-    const smallEnabledAvatar = renderWithProviders(
-      <Avatar id="user-1" name="Alice" size={20} dmAgentEnabled />
-    )
-    expect(
-      smallEnabledAvatar.container.querySelector('[data-testid="avatar-ring"]')
-    ).toHaveStyle({ borderWidth: '1px' })
-  })
-
-  it('renders an image instead of the emoji fallback when image is provided', () => {
-    const fallbackAvatar = renderWithProviders(<Avatar id="" name="Alice" />)
-    expect(
-      fallbackAvatar.container.querySelector('img')
-    ).not.toBeInTheDocument()
-    expect(fallbackAvatar.container).toHaveTextContent('🍎')
-    expect(
-      fallbackAvatar.container.querySelector('.avatar-fallback')
-    ).toHaveClass(
-      'avatar-fallback',
-      'flex',
-      'h-full',
-      'w-full',
-      'items-center',
-      'justify-center',
-      'font-semibold',
-      'select-none',
-      'transition-colors'
-    )
-
-    const imageAvatar = renderWithProviders(
-      <Avatar id="" name="Alice" image="https://example.com/avatar.png" />
-    )
-    expect(imageAvatar.container.querySelector('img')).toHaveAttribute(
-      'src',
-      'https://example.com/avatar.png'
-    )
-    expect(imageAvatar.container).not.toHaveTextContent('🍎')
-  })
-
-  it('applies the fallback background color and forwards custom classes', () => {
-    const { container } = renderWithProviders(
-      <Avatar id="" name="Alice" className="custom-avatar" />
-    )
-    const root = container.firstElementChild
-    const ring = container.querySelector('[data-testid="avatar-ring"]')
-
-    expect(root).toHaveClass('relative', 'flex-shrink-0', 'custom-avatar')
-    expect(ring).toHaveClass('h-full', 'w-full', 'bg-transparent')
-    expect(root).toHaveStyle({
-      backgroundColor: '#FFD1DD',
-      width: '40px',
-      height: '40px',
-    })
-  })
 })

package/src/components/Avatar/getAvatarEmoji.test.ts

@@ -29,43 +29,4 @@ describe('getAvatarBgColor', () => {
     expect(color).toBe(emojiBgColors[emoji])
     expect(getAvatarBgColor(id)).toBe(color)
   })
-
-  it.each([
-    ['', '🍎', '#FFD1DD'],
-    ['id-2', '🍌', '#FFF1C9'],
-    ['id-3', '🍇', '#E6D9FF'],
-    ['id-4', '🍊', '#D6F4FF'],
-    ['id-5', '🍓', '#FFE0AE'],
-    ['id-6', '🥥', '#F7E7D8'],
-    ['id-7', '🍒', '#DFF4D8'],
-    ['id-8', '🥭', '#FFD8C2'],
-    ['id-9', '🍉', '#D6EBFF'],
-    ['id-10', '🍋', '#CAEEB5'],
-    ['id-11', '🥝', '#FFE7C7'],
-    ['id-12', '🫒', '#F6E3B4'],
-    ['id-13', '🍈', '#D9F7E1'],
-  ])('returns the exact fruit pair for %j', (id, emoji, bgColor) => {
-    expect(getAvatarEmoji(id)).toBe(emoji)
-    expect(getAvatarBgColor(id)).toBe(bgColor)
-  })
-
-  it('uses the absolute hash value for ids with a negative raw hash', () => {
-    const id = 'id-100'
-
-    expect(getAvatarEmoji(id)).toBe('🥭')
-    expect(getAvatarBgColor(id)).toBe('#FFD8C2')
-  })
-
-  it('is deterministic and keeps emoji and background color paired', () => {
-    const ids = ['', 'id-2', 'id-7', 'id-13', 'id-100']
-
-    ids.forEach((id) => {
-      const emoji = getAvatarEmoji(id)
-      const color = getAvatarBgColor(id)
-
-      expect(getAvatarEmoji(id)).toBe(emoji)
-      expect(getAvatarBgColor(id)).toBe(color)
-      expect(emojiBgColors[emoji]).toBe(color)
-    })
-  })
 })

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

@@ -0,0 +1,87 @@
+import type { Channel } from 'stream-chat'
+import { describe, expect, it, vi } from 'vitest'
+
+import { fireEvent, renderWithProviders, screen } from '../../test/utils'
+
+import {
+  ChannelListProvider,
+  useChannelListContext,
+} from './ChannelListContext'
+
+const channel = { id: 'channel-1' } as Channel
+
+function ContextConsumer() {
+  const value = useChannelListContext()
+
+  return (
+    <div>
+      <span data-testid="selected-channel">
+        {value.selectedChannel?.id ?? 'undefined'}
+      </span>
+      <span data-testid="debug">{String(value.debug)}</span>
+      <span data-testid="render-message-preview">
+        {value.renderMessagePreview ? 'provided' : 'undefined'}
+      </span>
+      <span data-testid="channel-preview">
+        {value.channelPreview ? 'provided' : 'undefined'}
+      </span>
+      <span data-testid="viewer-language">
+        {value.viewerLanguage ?? 'undefined'}
+      </span>
+      <button type="button" onClick={() => value.onChannelSelect(channel)}>
+        Select channel
+      </button>
+    </div>
+  )
+}
+
+describe('ChannelListContext', () => {
+  it('provides safe documented defaults without a provider', () => {
+    renderWithProviders(<ContextConsumer />)
+
+    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
+      'undefined'
+    )
+    expect(screen.getByTestId('debug')).toHaveTextContent('false')
+    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
+      'undefined'
+    )
+    expect(screen.getByTestId('channel-preview')).toHaveTextContent('undefined')
+    expect(screen.getByTestId('viewer-language')).toHaveTextContent('undefined')
+    expect(() => fireEvent.click(screen.getByRole('button'))).not.toThrow()
+  })
+
+  it('exposes the value supplied by a provider', () => {
+    const onChannelSelect = vi.fn()
+    const ChannelPreview = () => null
+    const renderMessagePreview = () => 'preview'
+
+    renderWithProviders(
+      <ChannelListProvider
+        value={{
+          selectedChannel: channel,
+          onChannelSelect,
+          debug: true,
+          renderMessagePreview,
+          channelPreview: ChannelPreview,
+          viewerLanguage: 'es',
+        }}
+      >
+        <ContextConsumer />
+      </ChannelListProvider>
+    )
+
+    expect(screen.getByTestId('selected-channel')).toHaveTextContent(
+      'channel-1'
+    )
+    expect(screen.getByTestId('debug')).toHaveTextContent('true')
+    expect(screen.getByTestId('render-message-preview')).toHaveTextContent(
+      'provided'
+    )
+    expect(screen.getByTestId('channel-preview')).toHaveTextContent('provided')
+    expect(screen.getByTestId('viewer-language')).toHaveTextContent('es')
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(onChannelSelect).toHaveBeenCalledWith(channel)
+  })
+})

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

@@ -1,6 +1,7 @@
-import { act, fireEvent } from '@testing-library/react'
+import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
+import { act, createEvent, fireEvent } from '@testing-library/react'
 import { Channel, LocalMessage, StreamChat } from 'stream-chat'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 import type { ChannelPreviewProps } from '../../types'
@@ -13,11 +14,28 @@ const mockUser = {
   name: 'Current User',
 }
 
+const mockChatContext = vi.hoisted(() => ({
+  current: {
+    client: { userID: 'current-user' },
+  } as { client?: { userID?: string } },
+}))
+
 vi.mock('stream-chat-react', async (importOriginal) => ({
   ...(await importOriginal<typeof import('stream-chat-react')>()),
-  useChatContext: () => ({ client: { userID: 'current-user' } }),
+  useChatContext: () => mockChatContext.current,
 }))
 
+vi.mock('../../hooks/useChannelStar', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('../../hooks/useChannelStar')>()
+
+  return {
+    ...actual,
+    useChannelStar: (channel?: Channel) =>
+      channel?.state ? actual.useChannelStar(channel) : false,
+  }
+})
+
 type MockChannel = Channel & {
   emitMemberUpdated: (member?: { pinned_at?: string | null }) => void
 }
@@ -73,6 +91,396 @@ describe('CustomChannelPreview', () => {
     onChannelSelect: vi.fn(),
   }
 
+  beforeEach(() => {
+    mockChatContext.current = {
+      client: { userID: 'current-user' },
+    }
+    defaultProps.onChannelSelect.mockClear()
+  })
+
+  it('applies selected and unselected row styling from context', () => {
+    const channel = createMockChannel([])
+    const otherChannel = createMockChannel([])
+    otherChannel.id = 'channel-2'
+
+    const { rerender } = renderWithProviders(
+      <ChannelListProvider
+        value={{
+          selectedChannel: channel,
+          onChannelSelect: defaultProps.onChannelSelect,
+          debug: false,
+        }}
+      >
+        <CustomChannelPreview {...defaultProps} channel={channel} />
+      </ChannelListProvider>
+    )
+
+    let row = screen.getByRole('button')
+    expect(row).toHaveClass('bg-black/[0.04]')
+    expect(row).not.toHaveClass('hover:bg-black/[0.02]')
+
+    rerender(
+      <ChannelListProvider
+        value={{
+          selectedChannel: otherChannel,
+          onChannelSelect: defaultProps.onChannelSelect,
+          debug: false,
+        }}
+      >
+        <CustomChannelPreview {...defaultProps} channel={channel} />
+      </ChannelListProvider>
+    )
+
+    row = screen.getByRole('button')
+    expect(row).not.toHaveClass('bg-black/[0.04]')
+    expect(row).toHaveClass('hover:bg-black/[0.02]')
+
+    rerender(
+      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
+    )
+    expect(screen.getByRole('button')).toHaveClass('hover:bg-black/[0.02]')
+  })
+
+  it('selects the channel by click and activation keys only', () => {
+    const channel = createMockChannel([])
+    const onChannelSelect = vi.fn()
+    const { container } = renderWithProviders(
+      <ChannelListProvider value={{ onChannelSelect, debug: false }}>
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+    const row = container.querySelector('[role="button"]') as HTMLElement
+
+    fireEvent.click(row)
+    fireEvent.keyDown(row, { key: 'Enter' })
+    const spaceEvent = createEvent.keyDown(row, { key: ' ' })
+    fireEvent(row, spaceEvent)
+
+    expect(spaceEvent.defaultPrevented).toBe(true)
+    expect(onChannelSelect).toHaveBeenCalledTimes(3)
+    expect(onChannelSelect).toHaveBeenNthCalledWith(1, channel)
+    expect(onChannelSelect).toHaveBeenNthCalledWith(2, channel)
+    expect(onChannelSelect).toHaveBeenNthCalledWith(3, channel)
+
+    fireEvent.keyDown(row, { key: 'a' })
+    fireEvent.keyDown(row, { key: 'Enter', repeat: true })
+    expect(onChannelSelect).toHaveBeenCalledTimes(3)
+  })
+
+  it('renders with an unhydrated client and resolves the fallback member', () => {
+    mockChatContext.current = { client: undefined }
+    const channel = createMockChannel([])
+
+    expect(() =>
+      renderWithProviders(
+        <CustomChannelPreview {...defaultProps} channel={channel} />
+      )
+    ).not.toThrow()
+    expect(screen.getByText('Current User')).toBeInTheDocument()
+  })
+
+  it('resolves the other participant using the current client user id', () => {
+    const channel = createMockChannel([])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    expect(screen.getByText('Alice')).toBeInTheDocument()
+
+    mockChatContext.current = { client: { userID: 'participant-1' } }
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    expect(screen.getByText('Current User')).toBeInTheDocument()
+  })
+
+  it('renders safe fallbacks when channel state is unavailable', () => {
+    const channel = createMockChannel([])
+    Object.assign(channel, { state: undefined })
+
+    expect(() =>
+      renderWithProviders(
+        <CustomChannelPreview {...defaultProps} channel={channel} />
+      )
+    ).not.toThrow()
+    expect(screen.getByText('Unknown member')).toBeInTheDocument()
+    expect(screen.getByText('No messages yet')).toBeInTheDocument()
+  })
+
+  it('renders a participant image only when one is supplied', () => {
+    const channel = createMockChannel([])
+    channel.state.members['participant-1'].user = {
+      id: 'participant-1',
+      name: 'Alice',
+      image: 'https://example.com/alice.png',
+    }
+
+    const { container, rerender } = renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    expect(container.querySelectorAll('img')).toHaveLength(1)
+    expect(container.querySelector('img')).toHaveAttribute(
+      'src',
+      'https://example.com/alice.png'
+    )
+
+    channel.state.members['participant-1'].user = {
+      id: 'participant-1',
+      name: 'Alice',
+    }
+    rerender(
+      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
+    )
+    expect(container.querySelectorAll('img')).toHaveLength(0)
+  })
+
+  it.each([
+    [undefined, undefined],
+    [3, '3'],
+    [99, '99'],
+    [100, '99+'],
+  ])('renders the unread badge for unread=%s', (unread, expectedBadge) => {
+    const channel = createMockChannel([])
+    const { container } = renderWithProviders(
+      <CustomChannelPreview
+        {...defaultProps}
+        channel={channel}
+        unread={unread}
+      />
+    )
+
+    if (expectedBadge) {
+      expect(screen.getByText(expectedBadge)).toBeInTheDocument()
+    } else {
+      expect(container.textContent).not.toContain('99+')
+      expect(container.textContent).not.toMatch(/(?:^|\D)3(?:\D|$)/)
+    }
+  })
+
+  it('renders a timestamp only when the last message has created_at', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Recent message',
+        type: 'regular',
+        created_at: new Date(),
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+    ])
+
+    const { container, rerender } = renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    const timestamp = () =>
+      container.querySelector('h3')?.parentElement?.querySelector('span')
+
+    expect(timestamp()).toHaveTextContent('Just now')
+    expect(screen.getByText('Just now')).toBeInTheDocument()
+
+    Object.assign(channel.state.messages[0], { created_at: undefined })
+    rerender(
+      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
+    )
+    expect(timestamp()).toBeNull()
+    expect(screen.queryByText('Just now')).not.toBeInTheDocument()
+  })
+
+  it.each([
+    [
+      'tip with text',
+      {
+        metadata: { custom_type: MESSAGE_CUSTOM_TYPE.TIP },
+        text: 'A generous tip',
+      },
+      'A generous tip',
+    ],
+    [
+      'tip without text',
+      { metadata: { custom_type: MESSAGE_CUSTOM_TYPE.TIP } },
+      'Sent a tip',
+    ],
+    [
+      'paid with text',
+      {
+        metadata: { custom_type: MESSAGE_CUSTOM_TYPE.PAID },
+        text: 'Paid message',
+      },
+      'Paid message',
+    ],
+    [
+      'paid without text',
+      { metadata: { custom_type: MESSAGE_CUSTOM_TYPE.PAID } },
+      'Sent a message',
+    ],
+    [
+      'link attachment',
+      { attachments: [{ og_scrape_url: 'https://example.com' }] },
+      'https://example.com',
+    ],
+    [
+      'image attachment',
+      { attachments: [{ type: 'image' }] },
+      '📷 Sent an image',
+    ],
+    [
+      'video attachment',
+      { attachments: [{ type: 'video' }] },
+      '🎥 Sent a video',
+    ],
+    ['audio attachment', { attachments: [{ type: 'audio' }] }, '🎵 Sent audio'],
+    ['file attachment', { attachments: [{ type: 'file' }] }, '📎 Sent a file'],
+    [
+      'unknown attachment',
+      { attachments: [{ type: 'unknown' }] },
+      '📎 Sent an attachment',
+    ],
+  ])('renders the %s preview text', (_name, message, expectedText) => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        type: 'regular',
+        ...message,
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    expect(screen.getByText(expectedText)).toBeInTheDocument()
+  })
+
+  it('prefixes chatbot previews but not normal message previews', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Automated response',
+        type: 'regular',
+        metadata: { custom_type: MESSAGE_CUSTOM_TYPE.CHATBOT },
+      },
+    ])
+    const { rerender } = renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    expect(screen.getByText('✨ Automated response')).toBeInTheDocument()
+
+    channel.state.messages[0].metadata = {}
+    channel.state.messages[0].text = 'Human response'
+    rerender(
+      <CustomChannelPreview {...defaultProps} channel={channel} unread={1} />
+    )
+    expect(screen.getByText('Human response')).toBeInTheDocument()
+    expect(screen.queryByText('✨ Human response')).not.toBeInTheDocument()
+  })
+
+  it('uses renderMessagePreview from context with the resolved default text', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Default preview',
+        type: 'regular',
+      },
+    ])
+    const renderMessagePreview = vi.fn(
+      (_message: LocalMessage | undefined, _defaultPreview?: string) =>
+        'Custom preview'
+    )
+
+    renderWithProviders(
+      <ChannelListProvider
+        value={{ onChannelSelect: vi.fn(), debug: false, renderMessagePreview }}
+      >
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+
+    expect(screen.getByText('Custom preview')).toBeInTheDocument()
+    expect(renderMessagePreview).toHaveBeenCalledWith(
+      channel.state.messages[0],
+      'Default preview'
+    )
+  })
+
+  it('renders the default preview when renderMessagePreview is not supplied', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Default preview',
+        type: 'regular',
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+    expect(screen.getByText('Default preview')).toBeInTheDocument()
+  })
+
+  it('uses the viewer language translation when available', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Raw text',
+        type: 'regular',
+        i18n: { es_text: 'Texto traducido', language: 'es' },
+      },
+    ])
+    const { rerender } = renderWithProviders(
+      <ChannelListProvider
+        value={{
+          onChannelSelect: vi.fn(),
+          debug: false,
+          viewerLanguage: 'es-MX',
+        }}
+      >
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+    expect(screen.getByText('Texto traducido')).toBeInTheDocument()
+
+    rerender(
+      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: false }}>
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+    expect(screen.getByText('Raw text')).toBeInTheDocument()
+  })
+
+  it('logs the preview payload only when debug is enabled', () => {
+    const channel = createMockChannel([])
+    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
+
+    renderWithProviders(
+      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: true }}>
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+    expect(consoleLog).toHaveBeenCalledWith(
+      '📺 [ChannelList] 📋 CHANNEL PREVIEW RENDER',
+      expect.objectContaining({
+        channelId: channel.id,
+        isSelected: false,
+        participantName: 'Alice',
+        unreadCount: 0,
+        hasTimestamp: false,
+      })
+    )
+
+    consoleLog.mockClear()
+    const { rerender } = renderWithProviders(
+      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: false }}>
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+    expect(consoleLog).not.toHaveBeenCalled()
+    rerender(
+      <ChannelListProvider value={{ onChannelSelect: vi.fn(), debug: false }}>
+        <CustomChannelPreview channel={channel} />
+      </ChannelListProvider>
+    )
+    expect(consoleLog).not.toHaveBeenCalled()
+  })
+
   it('uses username when participant name is UUID-like', () => {
     const channel = createMockChannel([])
     channel.state.members['participant-1'] = {

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

@@ -11,16 +11,25 @@ const {
   ChannelListProviderMock,
   CustomChannelPreviewMock,
   InfiniteScrollMock,
+  restorePendingMessagesMock,
+  streamMountMock,
+  messagingContextMock,
 } = vi.hoisted(() => ({
   ChannelListProviderMock: vi.fn(
     ({ children }: { children: React.ReactNode; value: unknown }) => children
   ),
   CustomChannelPreviewMock: () => null,
   InfiniteScrollMock: () => null,
+  restorePendingMessagesMock: vi.fn(),
+  streamMountMock: vi.fn(),
+  messagingContextMock: { current: { debug: false } },
 }))
 
 vi.mock('stream-chat-react', () => ({
   ChannelList: (props: unknown) => {
+    React.useEffect(() => {
+      streamMountMock()
+    }, [])
     streamChannelListMock(props)
     return <div data-testid="stream-channel-list" />
   },
@@ -28,7 +37,11 @@ vi.mock('stream-chat-react', () => ({
 }))
 
 vi.mock('../../providers/MessagingProvider', () => ({
-  useMessagingContext: () => ({ debug: false }),
+  useMessagingContext: () => messagingContextMock.current,
+}))
+
+vi.mock('../../hooks/useRestorePendingMessages', () => ({
+  restorePendingMessages: restorePendingMessagesMock,
 }))
 
 vi.mock('./ChannelListContext', () => ({
@@ -48,6 +61,9 @@ describe('ChannelList', () => {
   beforeEach(() => {
     ChannelListProviderMock.mockClear()
     streamChannelListMock.mockClear()
+    restorePendingMessagesMock.mockClear()
+    streamMountMock.mockClear()
+    messagingContextMock.current = { debug: false }
   })
 
   it('defaults unseen-channel promotion to false', () => {
@@ -200,4 +216,119 @@ describe('ChannelList', () => {
     streamProps.channelRenderFilterFn!(mockChannels)
     expect(filterFn).toHaveBeenCalledWith(mockChannels)
   })
+
+  it('restores pending messages for every channel and preserves channels without a filter', () => {
+    const channels = [
+      { cid: 'ch-1', state: { pending_messages: [] } },
+      { cid: 'ch-2', state: { pending_messages: [{ id: 'pending-2' }] } },
+    ] as unknown as Channel[]
+
+    renderWithProviders(<ChannelList {...defaultProps} />)
+    const streamProps = streamChannelListMock.mock.calls[0][0] as {
+      channelRenderFilterFn: (channels: Channel[]) => Channel[]
+    }
+
+    expect(streamProps.channelRenderFilterFn(channels)).toBe(channels)
+    expect(restorePendingMessagesMock).toHaveBeenCalledTimes(2)
+    expect(restorePendingMessagesMock).toHaveBeenNthCalledWith(1, channels[0])
+    expect(restorePendingMessagesMock).toHaveBeenNthCalledWith(2, channels[1])
+  })
+
+  it('remounts Stream ChannelList when filters change but not when they stay the same', () => {
+    const { rerender } = renderWithProviders(<ChannelList {...defaultProps} />)
+
+    expect(streamMountMock).toHaveBeenCalledOnce()
+
+    rerender(<ChannelList {...defaultProps} />)
+    expect(streamMountMock).toHaveBeenCalledOnce()
+
+    rerender(
+      <ChannelList
+        {...defaultProps}
+        filters={{ type: 'messaging', members: { $in: ['another-user'] } }}
+      />
+    )
+    expect(streamMountMock).toHaveBeenCalledTimes(2)
+  })
+
+  it('forwards the default and explicit sort values and the channel limit', () => {
+    renderWithProviders(<ChannelList {...defaultProps} />)
+    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
+      sort: { last_message_at: -1 },
+      options: { limit: 30 },
+    })
+
+    const explicitSort = { updated_at: 1 as const }
+    renderWithProviders(<ChannelList {...defaultProps} sort={explicitSort} />)
+    expect(streamChannelListMock.mock.calls[1][0]).toMatchObject({
+      sort: explicitSort,
+      options: { limit: 30 },
+    })
+  })
+
+  it('provides channel list context values from props and messaging context', () => {
+    const selectedChannel = { id: 'selected-channel' } as Channel
+    const onChannelSelect = vi.fn()
+    const renderMessagePreview = vi.fn()
+    messagingContextMock.current = { debug: true }
+
+    renderWithProviders(
+      <ChannelList
+        {...defaultProps}
+        selectedChannel={selectedChannel}
+        onChannelSelect={onChannelSelect}
+        renderMessagePreview={renderMessagePreview}
+        viewerLanguage="fr"
+      />
+    )
+
+    const contextValue = ChannelListProviderMock.mock.calls[0][0].value
+    expect(contextValue).toMatchObject({
+      selectedChannel,
+      onChannelSelect,
+      debug: true,
+      renderMessagePreview,
+      viewerLanguage: 'fr',
+    })
+  })
+
+  it('logs the channel list render when messaging debug is enabled', () => {
+    const consoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
+    messagingContextMock.current = { debug: true }
+
+    renderWithProviders(<ChannelList {...defaultProps} />)
+
+    expect(consoleLog).toHaveBeenCalledWith(
+      '📺 [ChannelList] 🔄 RENDER START',
+      expect.objectContaining({
+        renderCount: 1,
+        selectedChannelId: undefined,
+        filters: defaultProps.filters,
+      })
+    )
+  })
+
+  it('passes wrapper classes and the custom empty state indicator through', () => {
+    const EmptyStateIndicator = () => <div>Empty state</div>
+    const { container } = renderWithProviders(
+      <ChannelList
+        {...defaultProps}
+        className="custom-channel-list"
+        customEmptyStateIndicator={EmptyStateIndicator}
+      />
+    )
+
+    expect(container.firstElementChild).toHaveClass(
+      'messaging-channel-list',
+      'h-full',
+      'flex',
+      'flex-col',
+      'min-w-0',
+      'overflow-hidden',
+      'custom-channel-list'
+    )
+    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
+      EmptyStateIndicator,
+    })
+  })
 })