@linktr.ee/messaging-react 1.24.4 → 1.25.0

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

@@ -1,3 +1,4 @@
+import { act } from '@testing-library/react'
 import { Channel, LocalMessage, StreamChat } from 'stream-chat'
 import { describe, expect, it, vi } from 'vitest'
 
@@ -10,10 +11,16 @@ const mockUser = {
   name: 'Current User',
 }
 
-const createMockChannel = (
-  messages: Partial<LocalMessage>[]
-): Channel =>
-  ({
+type MockChannel = Channel & {
+  emitMemberUpdated: (member?: { pinned_at?: string | null }) => void
+}
+
+const createMockChannel = (messages: Partial<LocalMessage>[]): MockChannel => {
+  const memberUpdatedListeners = new Set<
+    (event: { member?: { pinned_at?: string | null } }) => void
+  >()
+
+  return {
     id: 'channel-1',
     cid: 'messaging:channel-1',
     _client: { userID: mockUser.id } as unknown as StreamChat,
@@ -26,8 +33,33 @@ const createMockChannel = (
         },
       },
       messages: messages as LocalMessage[],
+      membership: {},
     },
-  }) as unknown as Channel
+    on: vi.fn(
+      (
+        eventName: string,
+        listener: (event: { member?: { pinned_at?: string | null } }) => void
+      ) => {
+        if (eventName === 'member.updated') {
+          memberUpdatedListeners.add(listener)
+        }
+      }
+    ),
+    off: vi.fn(
+      (
+        eventName: string,
+        listener: (event: { member?: { pinned_at?: string | null } }) => void
+      ) => {
+        if (eventName === 'member.updated') {
+          memberUpdatedListeners.delete(listener)
+        }
+      }
+    ),
+    emitMemberUpdated: (member?: { pinned_at?: string | null }) => {
+      memberUpdatedListeners.forEach((listener) => listener({ member }))
+    },
+  } as unknown as MockChannel
+}
 
 describe('CustomChannelPreview', () => {
   const defaultProps = {
@@ -154,4 +186,24 @@ describe('CustomChannelPreview', () => {
 
     expect(screen.getByText('No messages yet')).toBeInTheDocument()
   })
+
+  it('updates starred state when the channel membership changes', () => {
+    const channel = createMockChannel([])
+
+    renderWithProviders(
+      <CustomChannelPreview {...defaultProps} channel={channel} />
+    )
+
+    expect(
+      screen.queryByRole('heading', { name: /starred conversation/i })
+    ).not.toBeInTheDocument()
+
+    act(() => {
+      channel.emitMemberUpdated({ pinned_at: new Date().toISOString() })
+    })
+
+    expect(
+      screen.getByRole('heading', { name: /starred conversation/i })
+    ).toBeInTheDocument()
+  })
 })

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React from 'react'
 import { ChannelPreviewUIComponentProps } from 'stream-chat-react'
 
+import { useChannelStar } from '../../hooks/useChannelStar'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { Avatar } from '../Avatar'
 import { isChatbotMessage } from '../CustomMessage/MessageTag'
@@ -53,6 +54,8 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
 
     const getLastMessageText = () => {
       if (lastMessage?.text) return lastMessage.text
+      const isTip = lastMessage?.metadata?.custom_type === 'MESSAGE_TIP'
+      if (isTip) return '💵 Sent a tip'
 
       const attachment = lastMessage?.attachments?.[0]
       if (attachment) {
@@ -83,6 +86,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
     const messagePreview = renderMessagePreview
       ? renderMessagePreview(lastMessage, lastMessageText)
       : `${isLastMessageFromChatbot ? '✨ ' : ''}${lastMessageText}`
+    const isChannelStarred = useChannelStar(channel)
 
     // Use the unread prop passed by Stream Chat (reactive and updates automatically)
     const unreadCount = unread ?? 0
@@ -118,6 +122,7 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
             name={participantName}
             image={participantImage}
             size={44}
+            starred={isChannelStarred}
             className="[&_.avatar-fallback]:group-hover:bg-[#eeeeee]"
           />
 
@@ -131,6 +136,9 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
                   isSelected ? 'text-primary' : 'text-charcoal'
                 )}
               >
+                {isChannelStarred && (
+                  <span className="sr-only">Starred conversation. </span>
+                )}
                 {participantName}
               </h3>
               {lastMessageTime && (

package/src/components/ChannelView.tsx

@@ -1,19 +1,11 @@
 import {
   ArrowLeftIcon,
   DotsThreeIcon,
-  FlagIcon,
-  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,
-  Event,
-} from 'stream-chat'
+import React, { useCallback, useRef } from 'react'
+import { Channel as ChannelType } from 'stream-chat'
 import {
   Channel,
   Window,
@@ -24,12 +16,11 @@ import {
   MessageUIComponentProps,
 } from 'stream-chat-react'
 
-import { useMessagingContext } from '../providers/MessagingProvider'
+import { useChannelStar } from '../hooks/useChannelStar'
 import type { ChannelViewProps } from '../types'
 
-import ActionButton from './ActionButton'
 import { Avatar } from './Avatar'
-import { CloseButton } from './CloseButton'
+import { ChannelInfoDialog } from './ChannelInfoDialog'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageInput } from './CustomMessageInput'
@@ -37,17 +28,6 @@ import { CustomSystemMessage } from './CustomSystemMessage'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
 
-// Custom user type with email and username
-type CustomUser = {
-  email?: string
-  username?: string
-}
-
-// Blocked user from Stream Chat API
-type BlockedUser = {
-  blocked_user_id: string
-}
-
 const ICON_BTN_CLASS =
   'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
 
@@ -80,26 +60,7 @@ const CustomChannelHeader: React.FC<{
   const participantName =
     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 isStarred = useChannelStar(channel)
 
   const handleStarClick = async () => {
     try {
@@ -136,6 +97,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
+            starred={isStarred}
             size={40}
           />
           <h1 className="text-xs font-medium text-black/90">
@@ -188,6 +150,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
+            starred={isStarred}
             size={40}
           />
           <div className="min-w-0">
@@ -231,292 +194,6 @@ const CustomChannelHeader: React.FC<{
   )
 }
 
-/**
- * Channel info dialog (matching original implementation)
- */
-const ChannelInfoDialog: React.FC<{
-  dialogRef: React.RefObject<HTMLDialogElement>
-  onClose: () => void
-  participant: ChannelMemberResponse | undefined
-  channel: ChannelType
-  followerStatusLabel?: string
-  onLeaveConversation?: (channel: ChannelType) => void
-  onBlockParticipant?: (participantId?: string) => void
-  showDeleteConversation?: boolean
-  onDeleteConversationClick?: () => void
-  onBlockParticipantClick?: () => void
-  onReportParticipantClick?: () => void
-  customChannelActions?: React.ReactNode
-}> = ({
-  dialogRef,
-  onClose,
-  participant,
-  channel,
-  followerStatusLabel,
-  onLeaveConversation,
-  onBlockParticipant,
-  showDeleteConversation = true,
-  onDeleteConversationClick,
-  onBlockParticipantClick,
-  onReportParticipantClick,
-  customChannelActions,
-}) => {
-  const { service, debug } = useMessagingContext()
-  const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
-  const [isLeaving, setIsLeaving] = useState(false)
-  const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
-
-  // Check if participant is blocked when participant changes
-  const checkIsParticipantBlocked = useCallback(async () => {
-    if (!service || !participant?.user?.id) return
-
-    try {
-      const blockedUsers = await service.getBlockedUsers()
-      const isBlocked = blockedUsers.some(
-        (user: BlockedUser) => user.blocked_user_id === participant?.user?.id
-      )
-      setIsParticipantBlocked(isBlocked)
-    } catch (error) {
-      console.error(
-        '[ChannelInfoDialog] Failed to check blocked status:',
-        error
-      )
-    }
-  }, [service, participant?.user?.id])
-
-  useEffect(() => {
-    checkIsParticipantBlocked()
-  }, [checkIsParticipantBlocked])
-
-  const handleLeaveConversation = async () => {
-    if (isLeaving) return
-
-    // Fire analytics callback before action
-    onDeleteConversationClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Leave conversation', channel.cid)
-    }
-    setIsLeaving(true)
-
-    try {
-      const actingUserId = channel._client?.userID ?? null
-      await channel.hide(actingUserId, false)
-
-      if (onLeaveConversation) {
-        await onLeaveConversation(channel)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to leave conversation', error)
-    } finally {
-      setIsLeaving(false)
-    }
-  }
-
-  const handleBlockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return
-
-    // Fire analytics callback before action
-    onBlockParticipantClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Block member', participant?.user?.id)
-    }
-    setIsUpdatingBlockStatus(true)
-
-    try {
-      await service.blockUser(participant?.user?.id)
-
-      if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to block member', error)
-    } finally {
-      setIsUpdatingBlockStatus(false)
-    }
-  }
-
-  const handleUnblockUser = async () => {
-    if (isUpdatingBlockStatus || !service) return
-
-    // Fire analytics callback before action
-    onBlockParticipantClick?.()
-
-    if (debug) {
-      console.log('[ChannelInfoDialog] Unblock member', participant?.user?.id)
-    }
-    setIsUpdatingBlockStatus(true)
-
-    try {
-      await service.unBlockUser(participant?.user?.id)
-
-      if (onBlockParticipant) {
-        await onBlockParticipant(participant?.user?.id)
-      }
-
-      onClose()
-    } catch (error) {
-      console.error('[ChannelInfoDialog] Failed to unblock member', error)
-    } finally {
-      setIsUpdatingBlockStatus(false)
-    }
-  }
-
-  const handleReportUser = () => {
-    // Fire analytics callback before action
-    onReportParticipantClick?.()
-
-    onClose()
-    window.open(
-      'https://linktr.ee/s/about/trust-center/report',
-      '_blank',
-      'noopener,noreferrer'
-    )
-  }
-
-  if (!participant) return null
-
-  const participantName =
-    participant.user?.name || participant.user?.id || 'Unknown member'
-  const participantImage = participant.user?.image
-  const participantEmail = (participant.user as CustomUser)?.email
-  const participantUsername = (participant.user as CustomUser)?.username
-  const participantSecondary = participantEmail
-    ? participantEmail
-    : participantUsername
-      ? `linktr.ee/${participantUsername}`
-      : undefined
-  const participantId = participant.user?.id || 'unknown'
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <dialog
-      ref={dialogRef}
-      className="mes-dialog group"
-      onClose={onClose}
-      onClick={(e) => {
-        if (e.target === dialogRef.current) {
-          onClose()
-        }
-      }}
-    >
-      <div className="ml-auto flex h-full w-full flex-col bg-white shadow-none transition-shadow duration-200 group-open:shadow-max-elevation-light">
-        <div className="flex items-center justify-between border-b border-sand px-4 py-3">
-          <h2 className="text-base font-semibold text-charcoal">Chat info</h2>
-          <CloseButton onClick={onClose} />
-        </div>
-
-        <div className="flex-1 px-2 overflow-y-auto w-full">
-          <div
-            className="flex flex-col items-center gap-3 self-stretch px-4 py-2 mt-6 rounded-lg border border-black/[0.04]"
-            style={{ backgroundColor: '#FBFAF9' }}
-          >
-            <div className="flex items-center gap-3 w-full">
-              <Avatar
-                id={participantId}
-                name={participantName}
-                image={participantImage}
-                size={88}
-                shape="circle"
-              />
-              <div className="flex flex-col min-w-0 flex-1">
-                <p className="truncate text-base font-semibold text-charcoal">
-                  {participantName}
-                </p>
-                {participantSecondary && (
-                  <p className="truncate text-sm text-[#00000055]">
-                    {participantSecondary}
-                  </p>
-                )}
-                {followerStatusLabel && (
-                  <span
-                    className="mt-1 rounded-full text-xs font-normal w-fit"
-                    style={{
-                      padding: '4px 8px',
-                      backgroundColor:
-                        followerStatusLabel === 'Subscribed to you'
-                          ? '#DCFCE7'
-                          : '#F5F5F4',
-                      color:
-                        followerStatusLabel === 'Subscribed to you'
-                          ? '#008236'
-                          : '#78716C',
-                      lineHeight: '133.333%',
-                      letterSpacing: '0.21px',
-                    }}
-                  >
-                    {followerStatusLabel}
-                  </span>
-                )}
-              </div>
-            </div>
-          </div>
-
-          <ul className="flex flex-col gap-2 mt-2">
-            {showDeleteConversation && (
-              <li>
-                <ActionButton
-                  onClick={handleLeaveConversation}
-                  disabled={isLeaving}
-                  aria-busy={isLeaving}
-                >
-                  {isLeaving ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <SignOutIcon className="h-5 w-5" />
-                  )}
-                  <span>Delete Conversation</span>
-                </ActionButton>
-              </li>
-            )}
-            <li>
-              {isParticipantBlocked ? (
-                <ActionButton
-                  onClick={handleUnblockUser}
-                  disabled={isUpdatingBlockStatus}
-                  aria-busy={isUpdatingBlockStatus}
-                >
-                  {isUpdatingBlockStatus ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <ProhibitInsetIcon className="h-5 w-5" />
-                  )}
-                  <span>Unblock</span>
-                </ActionButton>
-              ) : (
-                <ActionButton
-                  onClick={handleBlockUser}
-                  disabled={isUpdatingBlockStatus}
-                  aria-busy={isUpdatingBlockStatus}
-                >
-                  {isUpdatingBlockStatus ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <ProhibitInsetIcon className="h-5 w-5" />
-                  )}
-                  <span>Block</span>
-                </ActionButton>
-              )}
-            </li>
-            <li>
-              <ActionButton variant="danger" onClick={handleReportUser}>
-                <FlagIcon className="h-5 w-5" />
-                <span>Report</span>
-              </ActionButton>
-            </li>
-            {customChannelActions}
-          </ul>
-        </div>
-      </div>
-    </dialog>
-  )
-}
-
 /**
  * Inner component that has access to channel context
  */
@@ -535,6 +212,7 @@ const ChannelViewInner: React.FC<{
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
+  customProfileContent?: React.ReactNode
   customChannelActions?: React.ReactNode
   renderMessage?: (
     messageNode: React.ReactElement,
@@ -554,6 +232,7 @@ const ChannelViewInner: React.FC<{
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
+  customProfileContent,
   customChannelActions,
   renderMessage,
 }) => {
@@ -664,6 +343,7 @@ const ChannelViewInner: React.FC<{
         onDeleteConversationClick={onDeleteConversationClick}
         onBlockParticipantClick={onBlockParticipantClick}
         onReportParticipantClick={onReportParticipantClick}
+        customProfileContent={customProfileContent}
         customChannelActions={customChannelActions}
       />
     </>
@@ -694,6 +374,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
+    customProfileContent,
     customChannelActions,
     renderMessage,
   }) => {
@@ -771,6 +452,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             showStarButton={showStarButton}
             chatbotVotingEnabled={chatbotVotingEnabled}
             renderChannelBanner={renderChannelBanner}
+            customProfileContent={customProfileContent}
             customChannelActions={customChannelActions}
             renderMessage={renderMessage}
           />

package/src/components/MessagingShell/index.tsx

@@ -38,6 +38,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   chatbotVotingEnabled = false,
   renderMessagePreview,
   renderChannelBanner,
+  customProfileContent,
   customChannelActions,
   renderMessage,
 }) => {
@@ -499,6 +500,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onMessageSent={onMessageSent}
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
+                customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}
               />

package/src/hooks/useChannelStar.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import { Channel, Event } from 'stream-chat'
+
+export const useChannelStar = (channel?: Channel) => {
+  const [isChannelStarred, setIsChannelStarred] = useState(
+    !!channel?.state?.membership?.pinned_at
+  )
+
+  useEffect(() => {
+    if (!channel) {
+      setIsChannelStarred(false)
+      return
+    }
+
+    setIsChannelStarred(!!channel.state.membership?.pinned_at)
+
+    const handleMemberUpdate = (event: Event) => {
+      setIsChannelStarred(
+        event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at
+      )
+    }
+
+    channel.on('member.updated', handleMemberUpdate)
+
+    return () => {
+      channel.off('member.updated', handleMemberUpdate)
+    }
+  }, [channel])
+
+  return isChannelStarred
+}

package/src/types.ts

@@ -185,6 +185,16 @@ export interface ChannelViewProps {
    */
   renderChannelBanner?: () => React.ReactNode
 
+  /**
+   * Custom content rendered below the participant name and contact details
+   * in the channel info dialog profile card.
+   * Useful for badges (e.g. follower status), metadata, or any extra info.
+   *
+   * @example
+   * customProfileContent={<SubscriptionBadge isFollower={channel.data?.isFollower} />}
+   */
+  customProfileContent?: React.ReactNode
+
   /**
    * Custom actions rendered at the bottom of the channel info dialog
    * (below Delete Conversation, Block/Unblock, Report).
@@ -227,6 +237,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'showStarButton'
   | 'chatbotVotingEnabled'
   | 'renderChannelBanner'
+  | 'customProfileContent'
   | 'customChannelActions'
   | 'renderMessage'
 >