@linktr.ee/messaging-react 1.8.4 → 1.8.5

package/package.json

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

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

@@ -13,6 +13,9 @@ const meta: Meta<ComponentProps> = {
     layout: 'centered',
   },
   decorators: [(Story) => <Story />],
+  args: {
+    onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
+  },
 }
 export default meta
 
@@ -32,6 +35,12 @@ const createMockChannel = (options: {
   lastMessageText?: string
   lastMessageTime?: Date
   unreadCount?: number
+  lastMessageAttachments?: Array<{
+    asset_url?: string
+    image_url?: string
+    og_scrape_url?: string
+    thumb_url?: string
+  }>
 }): Channel => {
   const {
     id,
@@ -41,6 +50,7 @@ const createMockChannel = (options: {
     lastMessageText = 'Hey! How are you doing?',
     lastMessageTime = new Date(),
     unreadCount = 0,
+    lastMessageAttachments,
   } = options
 
   return {
@@ -64,19 +74,21 @@ const createMockChannel = (options: {
           user_id: participantId,
         },
       },
-      messages: lastMessageText
-        ? ([
-            {
-              id: `msg-${id}-1`,
-              text: lastMessageText,
-              created_at: lastMessageTime.toISOString(),
-              user: {
-                id: participantId,
-                name: participantName,
+      messages:
+        lastMessageText || lastMessageAttachments
+          ? ([
+              {
+                id: `msg-${id}-1`,
+                text: lastMessageText,
+                created_at: lastMessageTime.toISOString(),
+                user: {
+                  id: participantId,
+                  name: participantName,
+                },
+                attachments: lastMessageAttachments,
               },
-            },
-          ] as unknown as LocalMessage[])
-        : ([] as LocalMessage[]),
+            ] as unknown as LocalMessage[])
+          : ([] as LocalMessage[]),
       unreadCount,
     },
   } as unknown as Channel
@@ -100,7 +112,6 @@ Default.args = {
     lastMessageText: 'Hey! How are you doing?',
     lastMessageTime: new Date(),
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const Selected: StoryFn<ComponentProps> = Template.bind({})
@@ -119,7 +130,6 @@ Selected.args = {
     participantId: 'participant-2',
     participantImage: 'https://i.pravatar.cc/150?img=3',
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const WithUnreadMessages: StoryFn<ComponentProps> = Template.bind({})
@@ -133,7 +143,6 @@ WithUnreadMessages.args = {
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 15), // 15 minutes ago
     unreadCount: 3,
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const ManyUnreadMessages: StoryFn<ComponentProps> = Template.bind({})
@@ -147,7 +156,6 @@ ManyUnreadMessages.args = {
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60), // 1 hour ago
     unreadCount: 127,
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const NoAvatar: StoryFn<ComponentProps> = Template.bind({})
@@ -159,7 +167,6 @@ NoAvatar.args = {
     lastMessageText: 'Thanks for your help!',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const NoMessages: StoryFn<ComponentProps> = Template.bind({})
@@ -171,7 +178,6 @@ NoMessages.args = {
     participantImage: 'https://i.pravatar.cc/150?img=6',
     lastMessageText: '',
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const LongMessage: StoryFn<ComponentProps> = Template.bind({})
@@ -185,7 +191,6 @@ LongMessage.args = {
       '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
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const LongName: StoryFn<ComponentProps> = Template.bind({})
@@ -197,7 +202,6 @@ LongName.args = {
     lastMessageText: 'Nice to meet you!',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 45), // 45 minutes ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const SelectedWithUnread: StoryFn<ComponentProps> = Template.bind({})
@@ -216,7 +220,6 @@ SelectedWithUnread.args = {
     participantName: 'Helen Park',
     participantId: 'participant-9',
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const MultipleChannels: StoryFn = () => {
@@ -289,7 +292,6 @@ WithUrl.args = {
     lastMessageText: 'https://example.com/page',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 8), // 8 minutes ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const WithVeryLongUrl: StoryFn<ComponentProps> = Template.bind({})
@@ -303,7 +305,6 @@ WithVeryLongUrl.args = {
       '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
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 // Time-based stories
@@ -317,7 +318,6 @@ JustNow.args = {
     lastMessageText: 'I just sent this!',
     lastMessageTime: new Date(Date.now() - 1000 * 30), // 30 seconds ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const FiveMinutesAgo: StoryFn<ComponentProps> = Template.bind({})
@@ -330,7 +330,6 @@ FiveMinutesAgo.args = {
     lastMessageText: 'Be right back',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 5), // 5 minutes ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const ThreeHoursAgo: StoryFn<ComponentProps> = Template.bind({})
@@ -343,7 +342,6 @@ ThreeHoursAgo.args = {
     lastMessageText: 'Got it, thanks!',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 3), // 3 hours ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const Yesterday: StoryFn<ComponentProps> = Template.bind({})
@@ -356,7 +354,6 @@ Yesterday.args = {
     lastMessageText: 'See you tomorrow',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 30), // 30 hours ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const ThreeDaysAgo: StoryFn<ComponentProps> = Template.bind({})
@@ -369,7 +366,6 @@ ThreeDaysAgo.args = {
     lastMessageText: 'Have a great weekend!',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3), // 3 days ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const LastWeek: StoryFn<ComponentProps> = Template.bind({})
@@ -382,7 +378,6 @@ LastWeek.args = {
     lastMessageText: 'Talk to you next week',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7), // 1 week ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const TwoWeeksAgo: StoryFn<ComponentProps> = Template.bind({})
@@ -395,7 +390,6 @@ TwoWeeksAgo.args = {
     lastMessageText: 'Sounds good',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 14), // 2 weeks ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const OneMonthAgo: StoryFn<ComponentProps> = Template.bind({})
@@ -408,7 +402,6 @@ OneMonthAgo.args = {
     lastMessageText: 'Happy New Year!',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 30), // 1 month ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const SixMonthsAgo: StoryFn<ComponentProps> = Template.bind({})
@@ -421,7 +414,6 @@ SixMonthsAgo.args = {
     lastMessageText: 'Long time no talk!',
     lastMessageTime: new Date(Date.now() - 1000 * 60 * 60 * 24 * 180), // 6 months ago
   }),
-  onChannelSelect: (channel) => console.log('Channel selected:', channel.id),
 }
 
 export const TimeVariations: StoryFn = () => {
@@ -521,3 +513,92 @@ export const TimeVariations: StoryFn = () => {
     </div>
   )
 }
+
+// Message text fallback stories
+export const WithAttachmentAssetUrl: StoryFn<ComponentProps> = Template.bind({})
+WithAttachmentAssetUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-attachment-asset',
+    participantName: 'Tom Wilson',
+    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
+    lastMessageAttachments: [
+      {
+        asset_url: 'https://example.com/document.pdf',
+      },
+    ],
+  }),
+}
+
+export const WithAttachmentImageUrl: StoryFn<ComponentProps> = Template.bind({})
+WithAttachmentImageUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-attachment-image',
+    participantName: 'Uma Patel',
+    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
+    lastMessageAttachments: [
+      {
+        image_url: 'https://example.com/image.jpg',
+      },
+    ],
+  }),
+}
+
+export const WithAttachmentOgScrapeUrl: StoryFn<ComponentProps> = Template.bind(
+  {}
+)
+WithAttachmentOgScrapeUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-attachment-og',
+    participantName: 'Victor Zhang',
+    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
+    lastMessageAttachments: [
+      {
+        og_scrape_url: 'https://example.com/article',
+      },
+    ],
+  }),
+}
+
+export const WithAttachmentThumbUrl: StoryFn<ComponentProps> = Template.bind({})
+WithAttachmentThumbUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-attachment-thumb',
+    participantName: 'Wendy Kim',
+    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
+    lastMessageAttachments: [
+      {
+        thumb_url: 'https://example.com/thumb.jpg',
+      },
+    ],
+  }),
+}
+
+export const WithLongAttachmentUrl: StoryFn<ComponentProps> = Template.bind({})
+WithLongAttachmentUrl.args = {
+  channel: createMockChannel({
+    id: 'channel-attachment-long',
+    participantName: 'Xavier Cruz',
+    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
+    lastMessageAttachments: [
+      {
+        asset_url:
+          'https://example.com/very/long/path/to/file/with/many/segments/document-with-very-long-name-that-should-be-truncated.pdf',
+      },
+    ],
+  }),
+}

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -35,7 +35,21 @@ const CustomChannelPreview: React.FC<
   // Get last message and format timestamp
   const lastMessage =
     channel?.state?.messages?.[channel.state.messages.length - 1]
-  const lastMessageText = lastMessage?.text || 'No messages yet'
+
+  // Fallback order: text -> attachment URL -> "No messages yet"
+  const getLastMessageText = () => {
+    if (lastMessage?.text) return lastMessage.text
+
+    const attachment = lastMessage?.attachments?.[0]
+    if (attachment?.asset_url) return attachment.asset_url
+    if (attachment?.image_url) return attachment.image_url
+    if (attachment?.og_scrape_url) return attachment.og_scrape_url
+    if (attachment?.thumb_url) return attachment.thumb_url
+
+    return 'No messages yet'
+  }
+
+  const lastMessageText = getLastMessageText()
   const lastMessageTime = lastMessage?.created_at
     ? formatRelativeTime(new Date(lastMessage.created_at))
     : ''