@linktr.ee/messaging-react 3.4.2-rc-1782453401 → 3.4.2-rc-1782454787

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DkqM2z_j.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BSQPos2Q.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-CbWEp3Zs.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-DyG_ZuPp.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.4.2-rc-1782453401",
+  "version": "3.4.2-rc-1782454787",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1782453401",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1782454787",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -289,7 +289,7 @@ describe('CustomChannelPreview', () => {
     )
 
     expect(
-      screen.queryByRole('heading', { name: /starred conversation/i })
+      screen.queryByRole('img', { name: 'Starred conversation' })
     ).not.toBeInTheDocument()
 
     act(() => {
@@ -300,7 +300,7 @@ describe('CustomChannelPreview', () => {
     })
 
     expect(
-      screen.getByRole('heading', { name: /starred conversation/i })
+      screen.getByRole('img', { name: 'Starred conversation' })
     ).toBeInTheDocument()
   })
 
@@ -319,7 +319,7 @@ describe('CustomChannelPreview', () => {
     })
 
     expect(
-      screen.queryByRole('heading', { name: /starred conversation/i })
+      screen.queryByRole('img', { name: 'Starred conversation' })
     ).not.toBeInTheDocument()
   })
 })

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -2,7 +2,6 @@ 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 { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { resolveParticipantDisplayName } from '../../utils/resolveParticipantDisplayName'
@@ -104,7 +103,6 @@ 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
@@ -149,8 +147,8 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
               <h3 className="flex min-w-0 items-center gap-1 text-sm font-medium text-[#191918]">
                 <span className="min-w-0 truncate">{participantName}</span>
                 <ParticipantBadges
+                  channel={channel}
                   participant={participant}
-                  isStarred={isChannelStarred}
                 />
               </h3>
               {lastMessageTime && (

package/src/components/ChannelView.test.tsx

@@ -84,13 +84,9 @@ vi.mock('./Avatar', () => ({
   },
 }))
 
-let mockIsStarred = false
-vi.mock('../hooks/useChannelStar', () => ({
-  useChannelStar: () => mockIsStarred,
-}))
-
 const createChannel = ({
   currentUserId = 'visitor-1',
+  currentUserPinnedAt,
   currentUserRole = 'owner',
   otherUser = {
     id: 'linker-1' as const,
@@ -101,6 +97,7 @@ const createChannel = ({
   otherMemberCustomer = false,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
+  currentUserPinnedAt?: string
   currentUserRole?: 'owner' | 'member'
   otherMemberCustomer?: boolean
   otherUser?: {
@@ -138,10 +135,12 @@ const createChannel = ({
           customer: otherMemberCustomer,
         },
       },
-      membership: {},
+      membership: {
+        pinned_at: currentUserPinnedAt,
+      },
       messages: [],
     },
-    on: vi.fn(),
+    on: vi.fn(() => ({ unsubscribe: vi.fn() })),
     off: vi.fn(),
     sendMessage: vi.fn(),
     hide: vi.fn(),
@@ -156,7 +155,6 @@ describe('ChannelView', () => {
     avatarRenderCalls.length = 0
     channelActionsMenuProps.length = 0
     messageInputProps.length = 0
-    mockIsStarred = false
   })
 
   const lastActionsMenuProps = () =>
@@ -291,8 +289,9 @@ describe('ChannelView', () => {
   })
 
   it('does not pass starred to avatar when channel is starred', () => {
-    mockIsStarred = true
-    const channel = createChannel()
+    const channel = createChannel({
+      currentUserPinnedAt: '2026-01-01T00:00:00.000Z',
+    })
 
     renderWithProviders(
       <ChannelView channel={channel} showStarButton={true} />
@@ -326,9 +325,13 @@ describe('ChannelView', () => {
   })
 
   it('renders built-in starred badges from channel star state', () => {
-    mockIsStarred = true
-
-    renderWithProviders(<ChannelView channel={createChannel()} />)
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          currentUserPinnedAt: '2026-01-01T00:00:00.000Z',
+        })}
+      />
+    )
 
     expect(
       screen.getAllByRole('img', { name: 'Starred conversation' }).length

package/src/components/ChannelView.tsx

@@ -149,8 +149,8 @@ const CustomChannelHeader: React.FC<{
             >
               <span className="min-w-0 truncate">{participantName}</span>
               <ParticipantBadges
+                channel={channel}
                 participant={participant}
-                isStarred={isStarred}
               />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
@@ -161,8 +161,8 @@ const CustomChannelHeader: React.FC<{
             <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
               <span className="min-w-0 truncate">{participantName}</span>
               <ParticipantBadges
+                channel={channel}
                 participant={participant}
-                isStarred={isStarred}
               />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
@@ -249,8 +249,8 @@ const CustomChannelHeader: React.FC<{
               >
                 <span className="min-w-0 truncate">{participantName}</span>
                 <ParticipantBadges
+                  channel={channel}
                   participant={participant}
-                  isStarred={isStarred}
                 />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
@@ -261,8 +261,8 @@ const CustomChannelHeader: React.FC<{
               <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
                 <span className="min-w-0 truncate">{participantName}</span>
                 <ParticipantBadges
+                  channel={channel}
                   participant={participant}
-                  isStarred={isStarred}
                 />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>

package/src/components/ParticipantBadges.tsx

@@ -1,12 +1,15 @@
 import { CurrencyDollarIcon, StarIcon } from '@phosphor-icons/react'
 import React from 'react'
-import type { ChannelMemberResponse } from 'stream-chat'
+import type { Channel, ChannelMemberResponse } from 'stream-chat'
+
+import { useChannelStar } from '../hooks/useChannelStar'
 
 export const ParticipantBadges: React.FC<{
+  channel?: Channel
   participant?: ChannelMemberResponse
-  isStarred?: boolean
-}> = ({ participant, isStarred = false }) => {
+}> = ({ channel, participant }) => {
   const isCustomer = participant?.customer === true
+  const isStarred = useChannelStar(channel)
 
   if (!isCustomer && !isStarred) return null