@linktr.ee/messaging-react 1.22.1 → 1.22.2

package/package.json

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

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

@@ -0,0 +1,157 @@
+import { Channel, LocalMessage, StreamChat } from 'stream-chat'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import CustomChannelPreview from './CustomChannelPreview'
+
+const mockUser = {
+  id: 'current-user',
+  name: 'Current User',
+}
+
+const createMockChannel = (
+  messages: Partial<LocalMessage>[]
+): Channel =>
+  ({
+    id: 'channel-1',
+    cid: 'messaging:channel-1',
+    _client: { userID: mockUser.id } as unknown as StreamChat,
+    state: {
+      members: {
+        [mockUser.id]: { user: mockUser, user_id: mockUser.id },
+        'participant-1': {
+          user: { id: 'participant-1', name: 'Alice' },
+          user_id: 'participant-1',
+        },
+      },
+      messages: messages as LocalMessage[],
+    },
+  }) as unknown as Channel
+
+describe('CustomChannelPreview', () => {
+  const defaultProps = {
+    onChannelSelect: vi.fn(),
+  }
+
+  it('shows the latest non-system message when the last message is a system message', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Hello there!',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+      {
+        id: 'msg-2',
+        text: 'DM Agent has left the conversation',
+        type: 'system',
+        created_at: new Date('2026-01-01T00:01:00.000Z'),
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('Hello there!')).toBeInTheDocument()
+    expect(
+      screen.queryByText('DM Agent has left the conversation')
+    ).not.toBeInTheDocument()
+  })
+
+  it('skips multiple consecutive system messages to find the latest non-system message', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'Nice to meet you!',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+      {
+        id: 'msg-2',
+        text: 'DM Agent has left the conversation',
+        type: 'system',
+        created_at: new Date('2026-01-01T00:01:00.000Z'),
+      },
+      {
+        id: 'msg-3',
+        text: 'DM Agent has rejoined the conversation',
+        type: 'system',
+        created_at: new Date('2026-01-01T00:02:00.000Z'),
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('Nice to meet you!')).toBeInTheDocument()
+    expect(
+      screen.queryByText('DM Agent has left the conversation')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByText('DM Agent has rejoined the conversation')
+    ).not.toBeInTheDocument()
+  })
+
+  it('shows fallback text when all messages are system messages', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'DM Agent has left the conversation',
+        type: 'system',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+      },
+      {
+        id: 'msg-2',
+        text: 'DM Agent has rejoined the conversation',
+        type: 'system',
+        created_at: new Date('2026-01-01T00:01:00.000Z'),
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('No messages yet')).toBeInTheDocument()
+  })
+
+  it('shows the latest message when it is not a system message', () => {
+    const channel = createMockChannel([
+      {
+        id: 'msg-1',
+        text: 'First message',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:00:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+      {
+        id: 'msg-2',
+        text: 'Latest message',
+        type: 'regular',
+        created_at: new Date('2026-01-01T00:01:00.000Z'),
+        user: { id: 'participant-1', name: 'Alice' },
+      },
+    ])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('Latest message')).toBeInTheDocument()
+  })
+
+  it('shows fallback text when there are no messages', () => {
+    const channel = createMockChannel([])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(screen.getByText('No messages yet')).toBeInTheDocument()
+  })
+})

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -54,9 +54,15 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
     const participantName = participant?.user?.name || 'Conversation'
     const participantImage = participant?.user?.image
 
-    // Get last message and format timestamp
-    const lastMessage =
-      channel?.state?.messages?.[channel.state.messages.length - 1]
+    // Get last non-system message for preview
+    const lastMessage = (() => {
+      const messages = channel?.state?.messages
+      if (!messages?.length) return undefined
+      for (let i = messages.length - 1; i >= 0; i--) {
+        if (messages[i].type !== 'system') return messages[i]
+      }
+      return undefined
+    })()
 
     const getLastMessageText = () => {
       if (lastMessage?.text) return lastMessage.text

package/src/styles.css

@@ -239,7 +239,7 @@
   justify-content: center;
   gap: 10px;
   margin-inline: auto;
-  margin-bottom: 4px;
+  margin-bottom: 8px;
   width: fit-content;
   max-width: min(100%, 480px);
   padding: 12px;