@linktr.ee/messaging-react 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "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,11 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
-import { Channel, CustomMessageData, LocalMessage, StreamChat } from 'stream-chat'
+import {
+  Channel,
+  CustomMessageData,
+  LocalMessage,
+  StreamChat,
+} from 'stream-chat'
 
 import CustomChannelPreview from './CustomChannelPreview'
 
@@ -220,6 +225,93 @@ ChatbotMessage.args = {
   }),
 }
 
+const renderMessagePreviewWithMarkers = (
+  message: LocalMessage | undefined,
+  defaultPreview?: string
+): React.ReactNode => {
+  if (!message) return defaultPreview
+
+  const metadata = (
+    message as LocalMessage & { metadata?: Record<string, unknown> }
+  ).metadata
+
+  if (metadata?.custom_type === 'MESSAGE_URGENT') {
+    return (
+      <>
+        <span className="text-red-600 font-bold">🔥 URGENT:</span>{' '}
+        {defaultPreview}
+      </>
+    )
+  }
+
+  if (metadata?.is_priority) {
+    return `⚡ ${defaultPreview}`
+  }
+
+  if (metadata?.is_vip) {
+    return `👑 ${defaultPreview}`
+  }
+
+  return defaultPreview
+}
+
+export const WithCustomMessagePreview: StoryFn = () => {
+  const channels = [
+    createMockChannel({
+      id: 'channel-urgent',
+      participantName: 'Alice Urgent',
+      participantId: 'participant-urgent',
+      participantImage: 'https://i.pravatar.cc/150?img=36',
+      lastMessageText: 'Critical issue needs immediate attention!',
+      lastMessageTime: new Date(Date.now() - 1000 * 60), // 1 minute ago
+      lastMessageMetadata: { custom_type: 'MESSAGE_URGENT' },
+      unreadCount: 3,
+    }),
+    createMockChannel({
+      id: 'channel-priority',
+      participantName: 'Bob Priority',
+      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
+      lastMessageMetadata: { is_priority: true },
+      unreadCount: 1,
+    }),
+    createMockChannel({
+      id: 'channel-vip',
+      participantName: 'Carol VIP',
+      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
+      lastMessageMetadata: { is_vip: true },
+    }),
+    createMockChannel({
+      id: 'channel-normal',
+      participantName: 'David Normal',
+      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
+    }),
+  ]
+
+  return (
+    <div className="w-[360px] bg-chalk border border-sand overflow-hidden">
+      {channels.map((channel) => (
+        <CustomChannelPreview
+          key={channel.id}
+          channel={channel}
+          onChannelSelect={(channel) => {
+            console.log('Channel selected:', channel.id)
+          }}
+          renderMessagePreview={renderMessagePreviewWithMarkers}
+        />
+      ))}
+    </div>
+  )
+}
+
 export const SelectedWithUnread: StoryFn<ComponentProps> = Template.bind({})
 SelectedWithUnread.args = {
   channel: createMockChannel({

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
-import { Channel } from 'stream-chat'
+import { Channel, LocalMessage } from 'stream-chat'
 import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
@@ -11,13 +11,24 @@ type CustomChannelPreviewProps = ChannelPreviewUIComponentProps & {
   selectedChannel?: Channel | null
   onChannelSelect: (channel: Channel) => void
   debug?: boolean
+  renderMessagePreview?: (
+    message: LocalMessage | undefined,
+    defaultPreview?: string
+  ) => React.ReactNode
 }
 
 /**
  * Custom channel preview that handles selection
  */
 const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
-  ({ channel, selectedChannel, onChannelSelect, debug = false, unread }) => {
+  ({
+    channel,
+    selectedChannel,
+    onChannelSelect,
+    debug = false,
+    unread,
+    renderMessagePreview,
+  }) => {
     const isSelected = selectedChannel?.id === channel?.id
 
     const handleClick = () => {
@@ -67,6 +78,10 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
       ? isChatbotMessage(lastMessage)
       : false
 
+    const messagePreview = renderMessagePreview
+      ? renderMessagePreview(lastMessage, lastMessageText)
+      : `${isLastMessageFromChatbot ? '✨ ' : ''}${lastMessageText}`
+
     // Use the unread prop passed by Stream Chat (reactive and updates automatically)
     const unreadCount = unread ?? 0
 
@@ -124,8 +139,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}
+                {messagePreview}
               </p>
               {unreadCount > 0 && (
                 <span className="bg-[#7f22fe] text-white text-xs px-2 py-0.5 rounded-full min-w-[20px] text-center flex-shrink-0">

package/src/components/ChannelList/index.tsx

@@ -18,6 +18,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     filters,
     className,
     customEmptyStateIndicator,
+    renderMessagePreview,
   }) => {
     // Track renders
     const renderCountRef = React.useRef(0)
@@ -42,10 +43,11 @@ export const ChannelList = React.memo<ChannelListProps>(
           selectedChannel={selectedChannel}
           onChannelSelect={onChannelSelect}
           debug={debug}
+          renderMessagePreview={renderMessagePreview}
         />
       )
       return Preview
-    }, [selectedChannel, onChannelSelect, debug])
+    }, [selectedChannel, onChannelSelect, debug, renderMessagePreview])
 
     return (
       <div

package/src/components/ChannelView.tsx

@@ -114,20 +114,20 @@ const CustomChannelHeader: React.FC<{
 
   return (
     <div className="@container">
-      <div className="flex justify-between items-center @lg:hidden">
+      <div className="grid grid-cols-[1fr_auto_1fr] w-full items-center @lg:hidden">
         <div className="flex items-center gap-2">
-          <button
-            className={classNames(
-              'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center',
-              !showBackButton && 'invisible'
-            )}
-            onClick={onBack || (() => {})}
-            type="button"
-            aria-label="Back to conversations"
-          >
-            <ArrowLeftIcon className="size-5 text-black/90" />
-          </button>
-          <div className="size-10" />
+          {showBackButton && (
+            <button
+              className={classNames(
+                'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
+              )}
+              onClick={onBack || (() => {})}
+              type="button"
+              aria-label="Back to conversations"
+            >
+              <ArrowLeftIcon className="size-5 text-black/90" />
+            </button>
+          )}
         </div>
         <div className="flex flex-col gap-1 items-center">
           <Avatar
@@ -140,7 +140,7 @@ const CustomChannelHeader: React.FC<{
             {participantName}
           </h1>
         </div>
-        <div className="flex items-center gap-2">
+        <div className="flex justify-end items-center gap-2">
           {showStarButton && (
             <button
               className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"

package/src/components/MessagingShell/index.tsx

@@ -34,6 +34,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   messageMetadata,
   onMessageSent,
   showStarButton = false,
+  renderMessagePreview,
 }) => {
   const {
     service,
@@ -449,6 +450,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             selectedChannel={selectedChannel || undefined}
             filters={channelFilters}
             customEmptyStateIndicator={channelListCustomEmptyStateIndicator}
+            renderMessagePreview={renderMessagePreview}
           />
         </div>
 

package/src/types.ts

@@ -5,6 +5,7 @@ import type {
 import type {
   Channel,
   ChannelFilters,
+  LocalMessage,
   SendMessageAPIResponse,
 } from 'stream-chat'
 import { EmptyStateIndicatorProps } from 'stream-chat-react'
@@ -67,6 +68,10 @@ export interface ChannelListProps {
   className?: string
   filters: ChannelFilters
   customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
+  renderMessagePreview?: (
+    message: LocalMessage | undefined,
+    defaultPreview?: string
+  ) => React.ReactNode
 }
 
 /**
@@ -198,6 +203,15 @@ export interface MessagingShellProps extends ChannelViewPassthroughProps {
    * Useful for showing a custom empty state indicator when the channel list is empty.
    */
   channelListCustomEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
+
+  /**
+   * Custom render function for message preview text in channel list.
+   * Receives the message and a default preview string.
+   */
+  renderMessagePreview?: (
+    message: LocalMessage | undefined,
+    defaultPreview?: string
+  ) => React.ReactNode
 }
 
 /**