@linktr.ee/messaging-react 1.17.1 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelView.tsx

@@ -55,7 +55,14 @@ const CustomChannelHeader: React.FC<{
   showBackButton: boolean
   onShowInfo: () => void
   canShowInfo: boolean
-}> = ({ onBack, showBackButton, onShowInfo, canShowInfo }) => {
+  showStarButton?: boolean
+}> = ({
+  onBack,
+  showBackButton,
+  onShowInfo,
+  canShowInfo,
+  showStarButton = false,
+}) => {
   const { channel } = useChannelStateContext()
 
   // Get participant info (excluding current user)
@@ -134,17 +141,21 @@ const CustomChannelHeader: React.FC<{
           </h1>
         </div>
         <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>
+          {showStarButton && (
+            <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}
@@ -181,17 +192,21 @@ const CustomChannelHeader: React.FC<{
           </div>
         </div>
         <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>
+          {showStarButton && (
+            <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>
+          )}
           {canShowInfo && onShowInfo && (
             <button
               className="size-10 rounded-full bg-[#F1F0EE] flex items-center justify-center"
@@ -505,6 +520,7 @@ const ChannelViewInner: React.FC<{
   onDeleteConversationClick?: () => void
   onBlockParticipantClick?: () => void
   onReportParticipantClick?: () => void
+  showStarButton?: boolean
 }> = ({
   onBack,
   showBackButton,
@@ -515,6 +531,7 @@ const ChannelViewInner: React.FC<{
   onDeleteConversationClick,
   onBlockParticipantClick,
   onReportParticipantClick,
+  showStarButton = false,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -573,6 +590,7 @@ const ChannelViewInner: React.FC<{
               showBackButton={showBackButton}
               onShowInfo={handleShowInfo}
               canShowInfo={Boolean(participant)}
+              showStarButton={showStarButton}
             />
           </div>
 
@@ -630,6 +648,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     dmAgentEnabled,
     messageMetadata,
     onMessageSent,
+    showStarButton = false,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -701,6 +720,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             onDeleteConversationClick={onDeleteConversationClick}
             onBlockParticipantClick={onBlockParticipantClick}
             onReportParticipantClick={onReportParticipantClick}
+            showStarButton={showStarButton}
           />
         </Channel>
       </div>

package/src/components/MessagingShell/index.tsx

@@ -33,6 +33,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   dmAgentEnabled,
   messageMetadata,
   onMessageSent,
+  showStarButton = false,
 }) => {
   const {
     service,
@@ -457,9 +458,15 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             'messaging-conversation-view flex-1 flex-col min-w-0 min-h-0',
             {
               // In direct conversation mode (or waiting for it), always show (full width)
-              flex: directConversationMode || isChannelSelected || initialParticipantFilter,
+              flex:
+                directConversationMode ||
+                isChannelSelected ||
+                initialParticipantFilter,
               // Normal mode: hide on mobile when no channel selected
-              'hidden lg:flex': !directConversationMode && !isChannelSelected && !initialParticipantFilter,
+              'hidden lg:flex':
+                !directConversationMode &&
+                !isChannelSelected &&
+                !initialParticipantFilter,
             }
           )}
         >
@@ -481,6 +488,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 dmAgentEnabled={dmAgentEnabled}
                 messageMetadata={messageMetadata}
                 onMessageSent={onMessageSent}
+                showStarButton={showStarButton}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/types.ts

@@ -2,7 +2,11 @@ import type {
   MessagingUser,
   StreamChatServiceConfig,
 } from '@linktr.ee/messaging-core'
-import type { Channel, ChannelFilters, SendMessageAPIResponse } from 'stream-chat'
+import type {
+  Channel,
+  ChannelFilters,
+  SendMessageAPIResponse,
+} from 'stream-chat'
 import { EmptyStateIndicatorProps } from 'stream-chat-react'
 
 import type { MessageMetadata } from './stream-custom-data'
@@ -123,6 +127,13 @@ export interface ChannelViewProps {
    * }}
    */
   onMessageSent?: (response: SendMessageAPIResponse) => void
+
+  /**
+   * Show the star/pin button in channel header.
+   * Defaults to false. Only useful when users can view multiple channels
+   * and filter by starred/pinned status.
+   */
+  showStarButton?: boolean
 }
 
 /**
@@ -139,6 +150,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'dmAgentEnabled'
   | 'messageMetadata'
   | 'onMessageSent'
+  | 'showStarButton'
 >
 
 /**