@linktr.ee/messaging-react 4.5.1 → 4.6.0-rc-1788328793

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.5.1",
+  "version": "4.6.0-rc-1788328793",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.6.0",
-    "@linktr.ee/messaging-taxonomy": "^0.12.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788328793",
+    "@linktr.ee/messaging-taxonomy": "0.12.0-rc-1788328793",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelHeader.tsx

@@ -33,6 +33,7 @@ interface ChannelHeaderProps {
   onBack?: () => void
   showBackButton: boolean
   showStarButton?: boolean
+  showStarBadge?: boolean
   onLeaveConversation?: (channel: ChannelType) => void
   onBlockParticipant?: (participantId?: string) => void
   showDeleteConversation?: boolean
@@ -52,6 +53,7 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({
   onBack,
   showBackButton,
   showStarButton = false,
+  showStarBadge = showStarButton,
   onLeaveConversation,
   onBlockParticipant,
   showDeleteConversation = true,
@@ -85,9 +87,9 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({
     isCustomerPaidTag(channel.data?.customer_tag) &&
     participant?.is_follower === true
 
-  const showStarBadge = showStarButton && isStarred
+  const shouldShowStarBadge = showStarBadge && isStarred
   const hasNameAdornment =
-    isPaidCustomer || showStarBadge || Boolean(onParticipantNameClick)
+    isPaidCustomer || shouldShowStarBadge || Boolean(onParticipantNameClick)
 
   const handleStarClick = async () => {
     try {
@@ -134,7 +136,7 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({
                   <CurrencyDollarIcon className="size-2.5" weight="bold" />
                 </span>
               )}
-              {showStarBadge && (
+              {shouldShowStarBadge && (
                 <span className="messaging-header-star-badge flex overflow-hidden">
                   <span
                     aria-label="Starred conversation"

package/src/components/ChannelView.test.tsx

@@ -519,6 +519,42 @@ describe('ChannelView', () => {
     ).not.toBeInTheDocument()
   })
 
+  it('shows the starred badge without the star button when showStarBadge is set explicitly', () => {
+    mockIsStarred = true
+
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel()}
+        showStarButton={false}
+        showStarBadge={true}
+      />
+    )
+
+    expect(screen.getByLabelText('Starred conversation')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Unstar conversation' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('hides the starred badge when showStarBadge is false even with the star button shown', () => {
+    mockIsStarred = true
+
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel()}
+        showStarButton={true}
+        showStarBadge={false}
+      />
+    )
+
+    expect(
+      screen.queryByLabelText('Starred conversation')
+    ).not.toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: 'Unstar conversation' })
+    ).toBeInTheDocument()
+  })
+
   it('keeps channel banner and input action renderers working', () => {
     const channel = createChannel()
     const renderMessageInputActions = vi.fn((currentChannel: Channel) => (

package/src/components/ChannelView.tsx

@@ -50,6 +50,7 @@ const ChannelViewInner: React.FC<{
   composerDisabled?: boolean
   composerDisabledReason?: string
   showStarButton?: boolean
+  showStarBadge?: boolean
   renderChannelBanner?: () => React.ReactNode
   customChannelActions?: React.ReactNode
   renderChannelActions?: React.ReactNode
@@ -80,6 +81,7 @@ const ChannelViewInner: React.FC<{
   composerDisabled = false,
   composerDisabledReason,
   showStarButton = false,
+  showStarBadge,
   renderChannelBanner,
   customChannelActions,
   renderChannelActions,
@@ -123,6 +125,7 @@ const ChannelViewInner: React.FC<{
       showBackButton={showBackButton}
       showChannelInfo={showChannelInfo}
       showStarButton={showStarButton}
+      showStarBadge={showStarBadge}
       onLeaveConversation={onLeaveConversation}
       onBlockParticipant={onBlockParticipant}
       showDeleteConversation={showDeleteConversation}
@@ -303,6 +306,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     messageMetadata,
     onMessageSent,
     showStarButton = false,
+    showStarBadge,
     renderChannelBanner,
     customChannelActions,
     renderChannelActions,
@@ -430,6 +434,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               composerDisabled={composerDisabled}
               composerDisabledReason={composerDisabledReason}
               showStarButton={showStarButton}
+              showStarBadge={showStarBadge}
               renderChannelBanner={renderChannelBanner}
               customChannelActions={customChannelActions}
               renderChannelActions={renderChannelActions}

package/src/types.ts

@@ -280,6 +280,14 @@ export interface ChannelViewProps {
    */
   showStarButton?: boolean
 
+  /**
+   * Show the starred badge next to the participant name in the channel header
+   * when the channel is starred. Defaults to `showStarButton`, so hosts that
+   * replace the star button with their own control (e.g. a context menu via
+   * `renderChannelActions`) can keep the badge by passing this explicitly.
+   */
+  showStarBadge?: boolean
+
   /**
    * @deprecated No longer rendered. The redesigned header shows built-in paid
    * and starred badges instead. Kept temporarily so existing call sites type-check.