@linktr.ee/messaging-react 1.15.0 → 1.15.1

package/package.json

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

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
-import { Channel, LocalMessage, StreamChat } from 'stream-chat'
+import { Channel, CustomMessageData, LocalMessage, StreamChat } from 'stream-chat'
 
 import CustomChannelPreview from './CustomChannelPreview'
 
@@ -41,6 +41,7 @@ const createMockChannel = (options: {
     og_scrape_url?: string
     thumb_url?: string
   }>
+  lastMessageMetadata?: CustomMessageData['metadata']
 }): Channel => {
   const {
     id,
@@ -51,6 +52,7 @@ const createMockChannel = (options: {
     lastMessageTime = new Date(),
     unreadCount = 0,
     lastMessageAttachments,
+    lastMessageMetadata,
   } = options
 
   return {
@@ -86,6 +88,7 @@ const createMockChannel = (options: {
                   name: participantName,
                 },
                 attachments: lastMessageAttachments,
+                metadata: lastMessageMetadata,
               },
             ] as unknown as LocalMessage[])
           : ([] as LocalMessage[]),
@@ -204,6 +207,19 @@ LongName.args = {
   }),
 }
 
+export const ChatbotMessage: StoryFn<ComponentProps> = Template.bind({})
+ChatbotMessage.args = {
+  channel: createMockChannel({
+    id: 'channel-chatbot',
+    participantName: 'Emily Watson',
+    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
+    lastMessageMetadata: { custom_type: 'MESSAGE_CHATBOT' },
+  }),
+}
+
 export const SelectedWithUnread: StoryFn<ComponentProps> = Template.bind({})
 SelectedWithUnread.args = {
   channel: createMockChannel({

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -5,6 +5,7 @@ import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { Avatar } from '../Avatar'
+import { isChatbotMessage } from '../CustomMessage/MessageTag'
 
 type CustomChannelPreviewProps = ChannelPreviewUIComponentProps & {
   selectedChannel?: Channel | null
@@ -62,6 +63,9 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
     const lastMessageTime = lastMessage?.created_at
       ? formatRelativeTime(new Date(lastMessage.created_at))
       : ''
+    const isLastMessageFromChatbot = lastMessage
+      ? isChatbotMessage(lastMessage)
+      : false
 
     // Use the unread prop passed by Stream Chat (reactive and updates automatically)
     const unreadCount = unread ?? 0
@@ -120,6 +124,7 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
             {/* Message and unread badge row */}
             <div className="flex items-center justify-between gap-2 min-w-0">
               <p className="text-xs text-stone mr-2 flex-1 line-clamp-2">
+                {isLastMessageFromChatbot && '✨ '}
                 {lastMessageText}
               </p>
               {unreadCount > 0 && (