@linktr.ee/messaging-react 3.3.4 → 3.3.6-rc-1780987607

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

@@ -7,6 +7,14 @@ import {
   StreamChat,
 } from 'stream-chat'
 
+import {
+  daysAgo,
+  hoursAgo,
+  minutesAgo,
+  now,
+  secondsAgo,
+} from '../../stories/decorators/storyTime'
+
 import CustomChannelPreview from './CustomChannelPreview'
 
 type ComponentProps = React.ComponentProps<typeof CustomChannelPreview>
@@ -54,7 +62,7 @@ const createMockChannel = (options: {
     participantId,
     participantImage,
     lastMessageText = 'Hey! How are you doing?',
-    lastMessageTime = new Date(),
+    lastMessageTime = now(),
     unreadCount = 0,
     lastMessageAttachments,
     lastMessageMetadata,
@@ -134,7 +142,7 @@ Default.args = {
     participantId: 'participant-1',
     participantImage: 'https://i.pravatar.cc/150?img=2',
     lastMessageText: 'Hey! How are you doing?',
-    lastMessageTime: new Date(),
+    lastMessageTime: now(),
   }),
 }
 
@@ -146,7 +154,7 @@ Selected.args = {
     participantId: 'participant-2',
     participantImage: 'https://i.pravatar.cc/150?img=3',
     lastMessageText: 'That sounds great!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+    lastMessageTime: minutesAgo(5),
   }),
   selectedChannel: createMockChannel({
     id: 'channel-2',
@@ -164,7 +172,7 @@ WithUnreadMessages.args = {
     participantId: 'participant-3',
     participantImage: 'https://i.pravatar.cc/150?img=4',
     lastMessageText: 'Did you see my last message?',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
+    lastMessageTime: minutesAgo(15),
     unreadCount: 3,
   }),
 }
@@ -177,7 +185,7 @@ ManyUnreadMessages.args = {
     participantId: 'participant-4',
     participantImage: 'https://i.pravatar.cc/150?img=5',
     lastMessageText: 'Please check this out!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
+    lastMessageTime: hoursAgo(1),
     unreadCount: 127,
   }),
 }
@@ -189,7 +197,7 @@ NoAvatar.args = {
     participantName: 'Emma Davis',
     participantId: 'participant-5',
     lastMessageText: 'Thanks for your help!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
+    lastMessageTime: minutesAgo(30),
   }),
 }
 
@@ -213,7 +221,7 @@ LongMessage.args = {
     participantImage: 'https://i.pravatar.cc/150?img=7',
     lastMessageText:
       'This is a very long message that should be truncated because it contains way too much text to display in the preview. We want to make sure the component handles this gracefully.',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+    lastMessageTime: hoursAgo(2),
   }),
 }
 
@@ -224,7 +232,7 @@ LongName.args = {
     participantName: 'Alexander Christopher Wellington-Montgomery III',
     participantId: 'participant-8',
     lastMessageText: 'Nice to meet you!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 45), // 45 minutes ago
+    lastMessageTime: minutesAgo(45),
   }),
 }
 
@@ -236,7 +244,7 @@ ChatbotMessage.args = {
     participantId: 'participant-chatbot',
     participantImage: 'https://i.pravatar.cc/150?img=9',
     lastMessageText: 'Thanks for reaching out! How can I help you today?',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 2), // 2 minutes ago
+    lastMessageTime: minutesAgo(2),
     lastMessageMetadata: { custom_type: 'MESSAGE_CHATBOT' },
   }),
 }
@@ -249,7 +257,7 @@ TipMessage.args = {
     participantId: 'participant-tip',
     participantImage: 'https://i.pravatar.cc/150?img=2',
     lastMessageText: 'Take my money!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 3),
+    lastMessageTime: minutesAgo(3),
     lastMessageMetadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
   }),
 }
@@ -262,7 +270,7 @@ PaidMessage.args = {
     participantId: 'participant-paid',
     participantImage: 'https://i.pravatar.cc/150?img=3',
     lastMessageText: 'I paid for this message!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10),
+    lastMessageTime: minutesAgo(10),
     lastMessageMetadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
   }),
 }
@@ -275,7 +283,7 @@ PaidAttachment.args = {
     participantId: 'participant-paid-attachment',
     participantImage: 'https://i.pravatar.cc/150?img=4',
     lastMessageText: 'Check out this exclusive photo!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20),
+    lastMessageTime: minutesAgo(20),
     lastMessageMetadata: {
       custom_type: 'MESSAGE_ATTACHMENT',
       attachment_title: 'exclusive-photo.jpg',
@@ -322,7 +330,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantImage: 'https://i.pravatar.cc/150?img=36',
       lastMessageText:
         'Critical issue needs immediate attention! Please review the server logs for more details and escalate to the on-call engineer. This system outage is affecting multiple users, and we need to resolve it as soon as possible. Impacted services include messaging, notifications, and real-time updates. All hands are required to investigate and remediate the situation. If you have any questions or need additional resources, contact the incident commander immediately!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60), // 1 minute ago
+      lastMessageTime: minutesAgo(1),
       lastMessageMetadata: { custom_type: 'MESSAGE_URGENT' },
       unreadCount: 3,
     }),
@@ -332,7 +340,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantId: 'participant-priority',
       participantImage: 'https://i.pravatar.cc/150?img=37',
       lastMessageText: 'High priority message',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+      lastMessageTime: minutesAgo(5),
       lastMessageMetadata: { is_priority: true },
       unreadCount: 1,
     }),
@@ -342,7 +350,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantId: 'participant-vip',
       participantImage: 'https://i.pravatar.cc/150?img=38',
       lastMessageText: 'Thanks for the support!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+      lastMessageTime: minutesAgo(10),
       lastMessageMetadata: { is_vip: true },
     }),
     createMockChannel({
@@ -351,7 +359,7 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantId: 'participant-normal',
       participantImage: 'https://i.pravatar.cc/150?img=39',
       lastMessageText: 'Hey, how are you?',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
+      lastMessageTime: minutesAgo(30),
     }),
   ]
 
@@ -379,7 +387,7 @@ SelectedWithUnread.args = {
     participantId: 'participant-9',
     participantImage: 'https://i.pravatar.cc/150?img=8',
     lastMessageText: 'Important update!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+    lastMessageTime: minutesAgo(10),
     unreadCount: 5,
   }),
   selectedChannel: createMockChannel({
@@ -401,7 +409,7 @@ export const MultipleChannels: StoryFn = () => {
       participantId: 'participant-1',
       participantImage: 'https://i.pravatar.cc/150?img=2',
       lastMessageText: 'Hey! How are you doing?',
-      lastMessageTime: new Date(),
+      lastMessageTime: now(),
       unreadCount: 2,
     }),
     createMockChannel({
@@ -410,7 +418,7 @@ export const MultipleChannels: StoryFn = () => {
       participantId: 'participant-2',
       participantImage: 'https://i.pravatar.cc/150?img=3',
       lastMessageText: 'That sounds great!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+      lastMessageTime: minutesAgo(5),
     }),
     createMockChannel({
       id: 'channel-3',
@@ -418,7 +426,7 @@ export const MultipleChannels: StoryFn = () => {
       participantId: 'participant-3',
       participantImage: 'https://i.pravatar.cc/150?img=4',
       lastMessageText: 'See you tomorrow',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
+      lastMessageTime: hoursAgo(1),
       unreadCount: 15,
     }),
     createMockChannel({
@@ -426,7 +434,7 @@ export const MultipleChannels: StoryFn = () => {
       participantName: 'David Brown',
       participantId: 'participant-4',
       lastMessageText: 'Thanks!',
-      lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
+      lastMessageTime: hoursAgo(2),
     }),
   ]
 
@@ -457,7 +465,7 @@ WithUrl.args = {
     participantId: 'participant-url',
     participantImage: 'https://i.pravatar.cc/150?img=10',
     lastMessageText: 'https://example.com/page',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 8), // 8 minutes ago
+    lastMessageTime: minutesAgo(8),
   }),
 }
 
@@ -470,11 +478,18 @@ WithVeryLongUrl.args = {
     participantImage: 'https://i.pravatar.cc/150?img=11',
     lastMessageText:
       'https://example.com/very/long/path/with/many/segments/and/query/parameters?param1=value1&param2=value2&param3=value3&param4=value4&param5=very-long-value-that-makes-the-url-extremely-long',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20), // 20 minutes ago
+    lastMessageTime: minutesAgo(20),
   }),
 }
 
 // Time-based stories
+//
+// Each story below covers exactly one row of the `formatRelativeTime`
+// output matrix. The `TimeVariations` story further down already snapshots
+// all of them together in a labeled table — kept here for Storybook
+// browsing but skipped in Chromatic to avoid 9 redundant snapshots.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
 export const JustNow: StoryFn<ComponentProps> = Template.bind({})
 JustNow.args = {
   channel: createMockChannel({
@@ -483,9 +498,10 @@ JustNow.args = {
     participantId: 'participant-just-now',
     participantImage: 'https://i.pravatar.cc/150?img=12',
     lastMessageText: 'I just sent this!',
-    lastMessageTime: new Date(Date.now() - 1000 * 30), // 30 seconds ago
+    lastMessageTime: secondsAgo(30),
   }),
 }
+JustNow.parameters = skipInChromatic
 
 export const FiveMinutesAgo: StoryFn<ComponentProps> = Template.bind({})
 FiveMinutesAgo.args = {
@@ -495,9 +511,10 @@ FiveMinutesAgo.args = {
     participantId: 'participant-5m',
     participantImage: 'https://i.pravatar.cc/150?img=13',
     lastMessageText: 'Be right back',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
+    lastMessageTime: minutesAgo(5),
   }),
 }
+FiveMinutesAgo.parameters = skipInChromatic
 
 export const ThreeHoursAgo: StoryFn<ComponentProps> = Template.bind({})
 ThreeHoursAgo.args = {
@@ -507,9 +524,10 @@ ThreeHoursAgo.args = {
     participantId: 'participant-3h',
     participantImage: 'https://i.pravatar.cc/150?img=14',
     lastMessageText: 'Got it, thanks!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 3), // 3 hours ago
+    lastMessageTime: hoursAgo(3),
   }),
 }
+ThreeHoursAgo.parameters = skipInChromatic
 
 export const Yesterday: StoryFn<ComponentProps> = Template.bind({})
 Yesterday.args = {
@@ -519,9 +537,10 @@ Yesterday.args = {
     participantId: 'participant-yesterday',
     participantImage: 'https://i.pravatar.cc/150?img=15',
     lastMessageText: 'See you tomorrow',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 30), // 30 hours ago
+    lastMessageTime: hoursAgo(30),
   }),
 }
+Yesterday.parameters = skipInChromatic
 
 export const ThreeDaysAgo: StoryFn<ComponentProps> = Template.bind({})
 ThreeDaysAgo.args = {
@@ -531,9 +550,10 @@ ThreeDaysAgo.args = {
     participantId: 'participant-3d',
     participantImage: 'https://i.pravatar.cc/150?img=16',
     lastMessageText: 'Have a great weekend!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
+    lastMessageTime: daysAgo(3),
   }),
 }
+ThreeDaysAgo.parameters = skipInChromatic
 
 export const LastWeek: StoryFn<ComponentProps> = Template.bind({})
 LastWeek.args = {
@@ -543,9 +563,10 @@ LastWeek.args = {
     participantId: 'participant-1w',
     participantImage: 'https://i.pravatar.cc/150?img=17',
     lastMessageText: 'Talk to you next week',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7), // 1 week ago
+    lastMessageTime: daysAgo(7),
   }),
 }
+LastWeek.parameters = skipInChromatic
 
 export const TwoWeeksAgo: StoryFn<ComponentProps> = Template.bind({})
 TwoWeeksAgo.args = {
@@ -555,9 +576,10 @@ TwoWeeksAgo.args = {
     participantId: 'participant-2w',
     participantImage: 'https://i.pravatar.cc/150?img=18',
     lastMessageText: 'Sounds good',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14), // 2 weeks ago
+    lastMessageTime: daysAgo(14),
   }),
 }
+TwoWeeksAgo.parameters = skipInChromatic
 
 export const OneMonthAgo: StoryFn<ComponentProps> = Template.bind({})
 OneMonthAgo.args = {
@@ -567,9 +589,10 @@ OneMonthAgo.args = {
     participantId: 'participant-1m',
     participantImage: 'https://i.pravatar.cc/150?img=19',
     lastMessageText: 'Happy New Year!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30), // 1 month ago
+    lastMessageTime: daysAgo(30),
   }),
 }
+OneMonthAgo.parameters = skipInChromatic
 
 export const SixMonthsAgo: StoryFn<ComponentProps> = Template.bind({})
 SixMonthsAgo.args = {
@@ -579,9 +602,10 @@ SixMonthsAgo.args = {
     participantId: 'participant-6m',
     participantImage: 'https://i.pravatar.cc/150?img=20',
     lastMessageText: 'Long time no talk!',
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180), // 6 months ago
+    lastMessageTime: daysAgo(180),
   }),
 }
+SixMonthsAgo.parameters = skipInChromatic
 
 export const TimeVariations: StoryFn = () => {
   const [selectedChannelId, _setSelectedChannelId] = React.useState<
@@ -592,61 +616,61 @@ export const TimeVariations: StoryFn = () => {
     {
       id: 'time-just-now',
       name: 'Just Now',
-      time: new Date(Date.now() - 1000 * 30), // 30 seconds
+      time: secondsAgo(30),
       message: 'Just sent',
     },
     {
       id: 'time-5m',
       name: '5 Minutes',
-      time: new Date(Date.now() - 1000 * 60 * 5),
+      time: minutesAgo(5),
       message: '5 minutes ago',
     },
     {
       id: 'time-30m',
       name: '30 Minutes',
-      time: new Date(Date.now() - 1000 * 60 * 30),
+      time: minutesAgo(30),
       message: '30 minutes ago',
     },
     {
       id: 'time-3h',
       name: '3 Hours',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 3),
+      time: hoursAgo(3),
       message: '3 hours ago',
     },
     {
       id: 'time-yesterday',
       name: 'Yesterday',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 30),
+      time: hoursAgo(30),
       message: 'Yesterday',
     },
     {
       id: 'time-3d',
       name: '3 Days',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3),
+      time: daysAgo(3),
       message: '3 days ago',
     },
     {
       id: 'time-1w',
       name: '1 Week',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7),
+      time: daysAgo(7),
       message: '1 week ago',
     },
     {
       id: 'time-2w',
       name: '2 Weeks',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14),
+      time: daysAgo(14),
       message: '2 weeks ago',
     },
     {
       id: 'time-1m',
       name: '1 Month',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30),
+      time: daysAgo(30),
       message: '1 month ago',
     },
     {
       id: 'time-6m',
       name: '6 Months',
-      time: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180),
+      time: daysAgo(180),
       message: '6 months ago',
     },
   ]
@@ -690,7 +714,7 @@ WithAttachmentAssetUrl.args = {
     participantId: 'participant-attachment-asset',
     participantImage: 'https://i.pravatar.cc/150?img=30',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10), // 10 minutes ago
+    lastMessageTime: minutesAgo(10),
     lastMessageAttachments: [
       {
         asset_url: 'https://example.com/document.pdf',
@@ -707,7 +731,7 @@ WithAttachmentImageUrl.args = {
     participantId: 'participant-attachment-image',
     participantImage: 'https://i.pravatar.cc/150?img=31',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
+    lastMessageTime: minutesAgo(15),
     lastMessageAttachments: [
       {
         image_url: 'https://example.com/image.jpg',
@@ -715,6 +739,10 @@ WithAttachmentImageUrl.args = {
     ],
   }),
 }
+// Same fallback render as WithAttachmentAssetUrl ("📎 Sent an attachment") —
+// kept as a separate story to document the field, skipped in Chromatic to
+// avoid a redundant snapshot.
+WithAttachmentImageUrl.parameters = skipInChromatic
 
 export const WithAttachmentOgScrapeUrl: StoryFn<ComponentProps> = Template.bind(
   {}
@@ -726,7 +754,7 @@ WithAttachmentOgScrapeUrl.args = {
     participantId: 'participant-attachment-og',
     participantImage: 'https://i.pravatar.cc/150?img=32',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 7), // 7 minutes ago
+    lastMessageTime: minutesAgo(7),
     lastMessageAttachments: [
       {
         og_scrape_url: 'https://example.com/article',
@@ -743,7 +771,7 @@ WithAttachmentThumbUrl.args = {
     participantId: 'participant-attachment-thumb',
     participantImage: 'https://i.pravatar.cc/150?img=33',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 12), // 12 minutes ago
+    lastMessageTime: minutesAgo(12),
     lastMessageAttachments: [
       {
         thumb_url: 'https://example.com/thumb.jpg',
@@ -751,6 +779,7 @@ WithAttachmentThumbUrl.args = {
     ],
   }),
 }
+WithAttachmentThumbUrl.parameters = skipInChromatic
 
 export const WithLongAttachmentUrl: StoryFn<ComponentProps> = Template.bind({})
 WithLongAttachmentUrl.args = {
@@ -760,7 +789,7 @@ WithLongAttachmentUrl.args = {
     participantId: 'participant-attachment-long',
     participantImage: 'https://i.pravatar.cc/150?img=34',
     lastMessageText: '', // No text, only attachment
-    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20), // 20 minutes ago
+    lastMessageTime: minutesAgo(20),
     lastMessageAttachments: [
       {
         asset_url:
@@ -769,3 +798,4 @@ WithLongAttachmentUrl.args = {
     ],
   }),
 }
+WithLongAttachmentUrl.parameters = skipInChromatic

package/src/components/ChannelView.stories.tsx

@@ -9,6 +9,7 @@ import {
 } from 'stream-chat'
 import { Chat } from 'stream-chat-react'
 
+import { hoursAgo, minutesAgo, now } from '../stories/decorators/storyTime'
 import { mockParticipants } from '../stories/mocks'
 
 import { ChannelView } from './ChannelView'
@@ -50,8 +51,8 @@ const createMockChannel = async (
           id: 'msg-1',
           text: 'Hey! How are you doing?',
           type: 'regular' as const,
-          created_at: new Date(Date.now() - 1000 * 60 * 60),
-          updated_at: new Date(Date.now() - 1000 * 60 * 60),
+          created_at: hoursAgo(1),
+          updated_at: hoursAgo(1),
           user: participant,
           html: '<p>Hey! How are you doing?</p>',
           attachments: [],
@@ -68,8 +69,8 @@ const createMockChannel = async (
           id: 'msg-2',
           text: "I'm doing great, thanks! How about you?",
           type: 'regular' as const,
-          created_at: new Date(Date.now() - 1000 * 60 * 50),
-          updated_at: new Date(Date.now() - 1000 * 60 * 50),
+          created_at: minutesAgo(50),
+          updated_at: minutesAgo(50),
           user: mockUser,
           html: "<p>I'm doing great, thanks! How about you?</p>",
           attachments: [],
@@ -86,8 +87,8 @@ const createMockChannel = async (
           id: 'msg-3',
           text: 'Pretty good! Just working on some exciting stuff.',
           type: 'regular' as const,
-          created_at: new Date(Date.now() - 1000 * 60 * 30),
-          updated_at: new Date(Date.now() - 1000 * 60 * 30),
+          created_at: minutesAgo(30),
+          updated_at: minutesAgo(30),
           user: participant,
           html: '<p>Pretty good! Just working on some exciting stuff.</p>',
           attachments: [],
@@ -429,7 +430,7 @@ const WithStarButtonTemplate: StoryFn<ComponentProps> = (args) => {
         const member: ChannelMemberResponse = {
           user: mockUser,
           user_id: mockUser.id,
-          pinned_at: isStarred ? new Date().toISOString() : null,
+          pinned_at: isStarred ? now().toISOString() : null,
         }
 
         client.dispatchEvent({

package/src/components/ChannelView.test.tsx

@@ -22,7 +22,18 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: () => <div data-testid="message-list" />,
+  MessageList: ({
+    renderMessages,
+  }: {
+    renderMessages?: (options: Record<string, unknown>) => React.ReactNode[]
+  }) => (
+    <ul data-testid="message-list">
+      {renderMessages?.({ messages: [] }) ?? null}
+    </ul>
+  ),
+  defaultRenderMessages: () => [
+    <li key="message-list-item" data-testid="message-list-item" />,
+  ],
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),

package/src/components/ChannelView.tsx

@@ -10,6 +10,7 @@ import {
   useChannelStateContext,
   WithComponents,
   MessageUIComponentProps,
+  defaultRenderMessages,
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -399,25 +400,41 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
-          </div>
+            <MessageList
+              hideDeletedMessages
+              hideNewMessageSeparator={false}
+              renderMessages={(options) => {
+                const elements = defaultRenderMessages(options)
 
-          {renderConversationFooter ? (
-            <React.Fragment key="lt-channel-conversation-footer">
-              {renderConversationFooter(channel)}
-            </React.Fragment>
-          ) : null}
+                if (renderConversationFooter) {
+                  elements.push(
+                    <li key="lt-channel-conversation-footer">
+                      {renderConversationFooter(channel)}
+                    </li>
+                  )
+                }
 
-          {/* Message Input */}
-          <CustomMessageInput
-            key="lt-channel-message-input"
-            {...(renderMessageInputActions && {
-              renderActions: () => renderMessageInputActions?.(channel),
-            })}
-            renderFooter={() => renderMessageInputFooter?.(channel)}
-            disabled={composerDisabled}
-            disabledReason={composerDisabledReason}
-          />
+                elements.push(
+                  // Message Input
+                  <li
+                    key="lt-channel-message-input"
+                    className="flex sticky bottom-0 p-4 pt-1 inset-x-0 mx-[calc(-1*var(--str-chat\_\_spacing-2))] md:mx-[calc(-1*min(var(--str-chat\_\_spacing-10),4%))]"
+                  >
+                    <div className="absolute bottom-0 inset-x-0 w-full h-4/5 backdrop-blur-[16px] [mask-image:linear-gradient(to_top,black_0%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_top,black_0%,transparent_100%)]" />
+                    <CustomMessageInput
+                      className="isolate w-full"
+                      renderActions={() => renderMessageInputActions?.(channel)}
+                      renderFooter={() => renderMessageInputFooter?.(channel)}
+                      disabled={composerDisabled}
+                      disabledReason={composerDisabledReason}
+                    />
+                  </li>
+                )
+
+                return elements
+              }}
+            />
+          </div>
         </Window>
       </WithComponents>
     </>

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { CloseButton } from '.'
+
+type ComponentProps = React.ComponentProps<typeof CloseButton>
+
+const meta: Meta<ComponentProps> = {
+  title: 'CloseButton',
+  component: CloseButton,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="p-12">
+    <CloseButton {...args} />
+  </div>
+)
+
+export const Default: StoryFn<ComponentProps> = Template.bind({})
+Default.args = {}
+
+export const OnDarkSurface: StoryFn<ComponentProps> = () => (
+  <div className="bg-[#121110] p-12">
+    <CloseButton onClick={() => undefined} />
+  </div>
+)

package/src/components/CustomDateSeparator/CustomDateSeparator.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { daysAgo, hoursAgo, now } from '../../stories/decorators/storyTime'
+
+import { CustomDateSeparator } from '.'
+
+type ComponentProps = React.ComponentProps<typeof CustomDateSeparator>
+
+const meta: Meta<ComponentProps> = {
+  title: 'CustomDateSeparator',
+  component: CustomDateSeparator,
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="w-[640px] bg-background-primary p-6">
+    <CustomDateSeparator {...args} />
+  </div>
+)
+
+export const Today: StoryFn<ComponentProps> = Template.bind({})
+Today.args = { date: hoursAgo(2) }
+
+export const Yesterday: StoryFn<ComponentProps> = Template.bind({})
+Yesterday.args = { date: hoursAgo(30) }
+
+export const LastWeek: StoryFn<ComponentProps> = Template.bind({})
+LastWeek.args = { date: daysAgo(6) }
+
+export const Unread: StoryFn<ComponentProps> = Template.bind({})
+Unread.args = { date: now(), unread: true }