@linktr.ee/messaging-react 1.21.2-rc-1771385662 → 1.21.2

package/package.json

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

package/src/components/ActionButton/index.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 
-interface ActionButtonProps
+export interface ActionButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "danger";
 }

package/src/components/ChannelView.tsx

@@ -244,6 +244,7 @@ const ChannelInfoDialog: React.FC<{
   onDeleteConversationClick?: () => void
   onBlockParticipantClick?: () => void
   onReportParticipantClick?: () => void
+  customChannelActions?: React.ReactNode
 }> = ({
   dialogRef,
   onClose,
@@ -256,6 +257,7 @@ const ChannelInfoDialog: React.FC<{
   onDeleteConversationClick,
   onBlockParticipantClick,
   onReportParticipantClick,
+  customChannelActions,
 }) => {
   const { service, debug } = useMessagingContext()
   const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
@@ -505,6 +507,7 @@ const ChannelInfoDialog: React.FC<{
                 <span>Report</span>
               </ActionButton>
             </li>
+            {customChannelActions}
           </ul>
         </div>
       </div>
@@ -529,6 +532,7 @@ const ChannelViewInner: React.FC<{
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
+  customChannelActions?: React.ReactNode
 }> = ({
   onBack,
   showBackButton,
@@ -542,6 +546,7 @@ const ChannelViewInner: React.FC<{
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
+  customChannelActions,
 }) => {
   const { channel } = useChannelStateContext()
   const infoDialogRef = useRef<HTMLDialogElement>(null)
@@ -636,6 +641,7 @@ const ChannelViewInner: React.FC<{
         onDeleteConversationClick={onDeleteConversationClick}
         onBlockParticipantClick={onBlockParticipantClick}
         onReportParticipantClick={onReportParticipantClick}
+        customChannelActions={customChannelActions}
       />
     </>
   )
@@ -664,6 +670,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
+    customChannelActions,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -738,6 +745,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
             showStarButton={showStarButton}
             chatbotVotingEnabled={chatbotVotingEnabled}
             renderChannelBanner={renderChannelBanner}
+            customChannelActions={customChannelActions}
           />
         </Channel>
       </div>

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -154,21 +154,6 @@ WithTipTag.args = {
   ],
 }
 
-/** Tip message without amount_text (backend may not set it). Tag shows "Delivered with tip". */
-export const WithTipTagNoAmount: StoryFn<TemplateProps> = Template.bind({})
-WithTipTagNoAmount.args = {
-  messages: [
-    { id: 'msg-1', text: 'Love your content!', user: participant },
-    {
-      id: 'msg-2',
-      text: "Here's a tip for you!",
-      user: participant,
-      metadata: { custom_type: 'MESSAGE_TIP' },
-    },
-    { id: 'msg-3', text: 'Thank you! 🙏', user: mockUser },
-  ],
-}
-
 export const TipOnly: StoryFn<TemplateProps> = Template.bind({})
 TipOnly.args = {
   messages: [
@@ -183,21 +168,6 @@ TipOnly.args = {
   ],
 }
 
-/** Tip-only bubble without amount_text. Tag shows "Tip". */
-export const TipOnlyNoAmount: StoryFn<TemplateProps> = Template.bind({})
-TipOnlyNoAmount.args = {
-  messages: [
-    { id: 'msg-1', text: 'Hello!', user: participant },
-    {
-      id: 'msg-2',
-      text: '',
-      user: participant,
-      metadata: { custom_type: 'MESSAGE_TIP' },
-    },
-    { id: 'msg-3', text: 'Thank you for the tip!', user: mockUser },
-  ],
-}
-
 export const MixedTags: StoryFn<TemplateProps> = Template.bind({})
 MixedTags.args = {
   messages: [
@@ -226,12 +196,6 @@ MixedTags.args = {
       user: participant,
       metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
     },
-    {
-      id: 'msg-6b',
-      text: 'Another paid message (no amount_text).',
-      user: participant,
-      metadata: { custom_type: 'MESSAGE_PAID' },
-    },
     { id: 'msg-7', text: 'Got it, thanks!', user: mockUser },
     {
       id: 'msg-8',

package/src/components/CustomMessage/MessageTag.stories.tsx

@@ -48,14 +48,6 @@ Tip.args = {
   }),
 }
 
-/** Tip with only custom_type (no amount_text). Matches backend when we don't set amount_text. */
-export const TipWithoutAmount: StoryFn<ComponentProps> = Template.bind({})
-TipWithoutAmount.args = {
-  message: createMockMessage({
-    metadata: { custom_type: 'MESSAGE_TIP' },
-  }),
-}
-
 export const TipStandalone: StoryFn<ComponentProps> = Template.bind({})
 TipStandalone.args = {
   message: createMockMessage({
@@ -65,16 +57,6 @@ TipStandalone.args = {
   standalone: true,
 }
 
-/** Tip-only bubble with no amount_text (fallback label "Tip"). */
-export const TipStandaloneWithoutAmount: StoryFn<ComponentProps> = Template.bind({})
-TipStandaloneWithoutAmount.args = {
-  message: createMockMessage({
-    text: '',
-    metadata: { custom_type: 'MESSAGE_TIP' },
-  }),
-  standalone: true,
-}
-
 export const Paid: StoryFn<ComponentProps> = Template.bind({})
 Paid.args = {
   message: createMockMessage({
@@ -82,14 +64,6 @@ Paid.args = {
   }),
 }
 
-/** Paid with only custom_type (no amount_text). Fallback label "Delivered with tip". */
-export const PaidWithoutAmount: StoryFn<ComponentProps> = Template.bind({})
-PaidWithoutAmount.args = {
-  message: createMockMessage({
-    metadata: { custom_type: 'MESSAGE_PAID' },
-  }),
-}
-
 export const Chatbot: StoryFn<ComponentProps> = Template.bind({})
 Chatbot.args = {
   message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
@@ -104,7 +78,7 @@ export const AllVariants: StoryFn = () => {
   return (
     <div className="p-12 flex flex-col gap-4">
       <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Tip (with amount):</span>
+        <span className="text-sm w-32">Tip:</span>
         <MessageTag
           message={createMockMessage({
             metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$10.50' },
@@ -112,15 +86,7 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Tip (no amount_text):</span>
-        <MessageTag
-          message={createMockMessage({
-            metadata: { custom_type: 'MESSAGE_TIP' },
-          })}
-        />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Paid (with amount):</span>
+        <span className="text-sm w-32">Paid:</span>
         <MessageTag
           message={createMockMessage({
             metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
@@ -128,15 +94,7 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Paid (no amount_text):</span>
-        <MessageTag
-          message={createMockMessage({
-            metadata: { custom_type: 'MESSAGE_PAID' },
-          })}
-        />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Tip standalone (with amount):</span>
+        <span className="text-sm w-32">Tip (standalone):</span>
         <MessageTag
           message={createMockMessage({
             text: '',
@@ -146,23 +104,13 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Tip standalone (no amount_text):</span>
-        <MessageTag
-          message={createMockMessage({
-            text: '',
-            metadata: { custom_type: 'MESSAGE_TIP' },
-          })}
-          standalone
-        />
-      </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-40">Chatbot:</span>
+        <span className="text-sm w-32">Chatbot:</span>
         <MessageTag
           message={createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } })}
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-40">No tag:</span>
+        <span className="text-sm w-32">No tag:</span>
         <MessageTag message={createMockMessage()} />
         <span className="text-xs text-stone">(renders nothing)</span>
       </div>

package/src/components/CustomMessage/MessageTag.tsx

@@ -54,17 +54,15 @@ export const MessageTag = ({
 
   if (isTipOrPaid) {
     const amountText = message.metadata?.amount_text
+    if (!amountText) return null
+
     const className = standalone
       ? 'message-tip-standalone'
       : 'message-tag message-tag--tip'
 
-    const label = amountText
-      ? standalone
-        ? `${amountText} tip`
-        : `Delivered with ${amountText} tip`
-      : standalone
-        ? 'Tip'
-        : 'Delivered with tip'
+    const label = standalone
+      ? `${amountText} tip`
+      : `Delivered with ${amountText} tip`
 
     return (
       <div className={className}>

package/src/components/MessagingShell/index.tsx

@@ -37,6 +37,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   chatbotVotingEnabled = false,
   renderMessagePreview,
   renderChannelBanner,
+  customChannelActions,
 }) => {
   const {
     service,
@@ -495,6 +496,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 onMessageSent={onMessageSent}
                 showStarButton={showStarButton}
                 chatbotVotingEnabled={chatbotVotingEnabled}
+                customChannelActions={customChannelActions}
               />
             </div>
           ) : initialParticipantFilter ? (

package/src/index.ts

@@ -5,6 +5,7 @@ import './styles.css'
 export { MessagingShell } from './components/MessagingShell'
 export { ChannelList } from './components/ChannelList'
 export { ChannelView } from './components/ChannelView'
+export { default as ActionButton } from './components/ActionButton'
 export { ParticipantPicker } from './components/ParticipantPicker'
 export { Avatar } from './components/Avatar'
 export { FaqList } from './components/FaqList'
@@ -36,6 +37,7 @@ export type {
 } from './types'
 export type { MessageMetadata } from './stream-custom-data'
 export type { AvatarProps } from './components/Avatar'
+export type { ActionButtonProps } from './components/ActionButton'
 export type { Faq, FaqListProps } from './components/FaqList'
 export type { FaqListItemProps } from './components/FaqList/FaqListItem'
 export type { VoteSelection } from './hooks/useMessageVote'

package/src/types.ts

@@ -154,6 +154,14 @@ export interface ChannelViewProps {
    * Useful for showing summaries, alerts, or contextual information.
    */
   renderChannelBanner?: () => React.ReactNode
+
+  /**
+   * Custom actions rendered at the bottom of the channel info dialog
+   * (below Delete Conversation, Block/Unblock, Report).
+   * Pass one or more <li> elements so they match the list styling.
+   * Use the exported ActionButton for consistent styling.
+   */
+  customChannelActions?: React.ReactNode
 }
 
 /**
@@ -173,6 +181,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'showStarButton'
   | 'chatbotVotingEnabled'
   | 'renderChannelBanner'
+  | 'customChannelActions'
 >
 
 /**