@linktr.ee/messaging-react 1.14.1 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.14.1",
+  "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 && (

package/src/components/ChannelView.tsx

@@ -5,10 +5,11 @@ import {
   ProhibitInsetIcon,
   SignOutIcon,
   SpinnerGapIcon,
+  StarIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useState, useCallback, useRef, useEffect } from 'react'
-import { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
+import { Channel as ChannelType, ChannelMemberResponse, Event } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -65,20 +66,49 @@ const CustomChannelHeader: React.FC<{
     participant?.user?.name || participant?.user?.id || 'Unknown member'
   const participantImage = participant?.user?.image
 
+  const [isStarred, setIsStarred] = useState(!!channel.state.membership?.pinned_at)
+
+  useEffect(() => {
+    const handleMemberUpdate = (event: Event) => {
+      setIsStarred(event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at)
+    }
+
+    channel.on('member.updated', handleMemberUpdate)
+
+    return () => {
+      channel.off('member.updated', handleMemberUpdate)
+    }
+  }, [channel])
+
+  const handleStarClick = async () => {
+    try {
+      if (isStarred) {
+        await channel.unpin()
+      } else {
+        await channel.pin()
+      }
+    } catch (error) {
+      console.error('[CustomChannelHeader] Failed to update pinned status:', error)
+    }
+  }
+
   return (
     <div className="@container">
       <div className="flex justify-between items-center @lg:hidden">
-        <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="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" />
+        </div>
         <div className="flex flex-col gap-1 items-center">
           <Avatar
             id={participant?.user?.id || channel.id || 'unknown'}
@@ -90,16 +120,27 @@ const CustomChannelHeader: React.FC<{
             {participantName}
           </h1>
         </div>
-        <button
-          className={classNames(
-            'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
-          )}
-          onClick={onShowInfo}
-          type="button"
-          aria-label="Show info"
-        >
-          <DotsThreeIcon className="size-5 text-black/90" />
-        </button>
+        <div className="flex items-center gap-2">
+          <button
+            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            onClick={handleStarClick}
+            type="button"
+            aria-label={isStarred ? 'Unstar conversation' : 'Star conversation'}
+          >
+            <StarIcon
+              className="size-5 text-black/90"
+              weight={isStarred ? 'fill' : 'regular'}
+            />
+          </button>
+          <button
+            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            onClick={onShowInfo}
+            type="button"
+            aria-label="Show info"
+          >
+            <DotsThreeIcon className="size-5 text-black/90" />
+          </button>
+        </div>
       </div>
       <div className="hidden @lg:flex items-center justify-between gap-3 min-h-12">
         <div className="flex items-center gap-4 min-w-0">
@@ -126,16 +167,29 @@ const CustomChannelHeader: React.FC<{
             </h1>
           </div>
         </div>
-        {canShowInfo && onShowInfo && (
+        <div className="flex items-center gap-2">
           <button
-            className={classNames(
-              'size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center'
-            )}
-            onClick={onShowInfo}
+            className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+            onClick={handleStarClick}
+            type="button"
+            aria-label={isStarred ? 'Unstar conversation' : 'Star conversation'}
           >
-            <DotsThreeIcon className="size-5 text-black/90" />
+            <StarIcon
+              className="size-5 text-black/90"
+              weight={isStarred ? 'fill' : 'regular'}
+            />
           </button>
-        )}
+          {canShowInfo && onShowInfo && (
+            <button
+              className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
+              onClick={onShowInfo}
+              type="button"
+              aria-label="Show info"
+            >
+              <DotsThreeIcon className="size-5 text-black/90" />
+            </button>
+          )}
+        </div>
       </div>
     </div>
   )