@linktr.ee/messaging-react 4.2.0-rc-1787083791 → 4.2.0-rc-1787181113

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

@@ -7,7 +7,7 @@ import { MessageTag } from './MessageTag'
 
 interface MockMessageOptions {
   metadata?: {
-    custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
+    custom_type?: 'MESSAGE_CHATBOT' | 'MESSAGE_PAID'
     amount_text?: string
   }
   text?: string
@@ -78,35 +78,7 @@ describe('MessageTag', () => {
     expect(indicator.children[1]).toHaveTextContent('Sent with AI')
   })
 
-  it('keeps tip tag behavior unchanged', () => {
-    renderWithProviders(
-      <MessageTag
-        message={createMockMessage({
-          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
-        })}
-      />
-    )
-
-    const tipTag = screen.getByText('Delivered with $5.50 tip')
-    expect(tipTag.closest('.message-tag--tip')).not.toBeNull()
-  })
-
-  it('renders tip standalone label for textless tip messages', () => {
-    renderWithProviders(
-      <MessageTag
-        message={createMockMessage({
-          text: '',
-          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
-        })}
-        standalone
-      />
-    )
-
-    const tipTag = screen.getByText('$50.00 tip')
-    expect(tipTag.closest('.message-tip-standalone')).not.toBeNull()
-  })
-
-  it('renders paid footer tag with message copy, not tip copy', () => {
+  it('renders the "Delivered with $X message" paid tag', () => {
     renderWithProviders(
       <MessageTag
         message={createMockMessage({
@@ -116,24 +88,19 @@ describe('MessageTag', () => {
     )
 
     const paidTag = screen.getByText('Delivered with $10.00 message')
-    expect(paidTag.closest('.message-tag--tip')).not.toBeNull()
-    expect(screen.queryByText(/tip/i)).toBeNull()
+    expect(paidTag.closest('.message-tag--paid')).not.toBeNull()
   })
 
-  it('renders paid standalone label for textless paid messages', () => {
-    renderWithProviders(
+  it('returns null for a paid message with no amount_text', () => {
+    const { container } = renderWithProviders(
       <MessageTag
         message={createMockMessage({
-          text: '',
-          metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
+          metadata: { custom_type: 'MESSAGE_PAID' },
         })}
-        standalone
       />
     )
 
-    const paidTag = screen.getByText('$25.00 message')
-    expect(paidTag.closest('.message-tip-standalone')).not.toBeNull()
-    expect(screen.queryByText(/tip/i)).toBeNull()
+    expect(container.firstChild).toBeNull()
   })
 
   it('returns null for non-custom messages', () => {

package/src/components/CustomMessage/MessageTag.tsx

@@ -4,8 +4,6 @@ import { LocalMessage } from 'stream-chat'
 
 interface MessageTagProps {
   message: LocalMessage
-  /** When true, renders as a standalone bubble instead of a small tag */
-  standalone?: boolean
   /** When true, renders sender-side chatbot variants */
   isMyMessage?: boolean
   /** Whether the message includes an attachment */
@@ -28,11 +26,6 @@ const SparkleIcon = ({ size = 15 }: { size?: number }) => (
   </svg>
 )
 
-/** Check if a message is a tip based on metadata */
-export const isTipMessage = (message: LocalMessage): boolean => {
-  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.TIP
-}
-
 /** Check if a message is a paid message based on metadata */
 const isPaidMessage = (message: LocalMessage): boolean => {
   return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.PAID
@@ -62,55 +55,31 @@ export const isMediaAttachmentMessage = (message: LocalMessage): boolean => {
   )
 }
 
-/** Check if a message has a tip or paid tag (shared layout, distinct copy) */
-const isTipOrPaidMessage = (message: LocalMessage): boolean => {
-  return isTipMessage(message) || isPaidMessage(message)
-}
-
 /** Check if the footer tag on this message already reads "Delivered with …" */
 export const hasPaidDeliveryTag = (message: LocalMessage): boolean => {
-  return (
-    isTipOrPaidMessage(message) &&
-    !isTipOnlyMessage(message) &&
-    !!message.metadata?.amount_text
-  )
-}
-
-/** Check if a message is a tip/paid-only message (no text) */
-export const isTipOnlyMessage = (message: LocalMessage): boolean => {
-  return isTipOrPaidMessage(message) && !message.text?.trim()
+  return isPaidMessage(message) && !!message.metadata?.amount_text
 }
 
 export const MessageTag = ({
   message,
-  standalone = false,
   isMyMessage = false,
   hasAttachment = false,
 }: MessageTagProps) => {
-  const isTipOrPaid = isTipOrPaidMessage(message)
+  const isPaid = isPaidMessage(message)
   const isChatbot = isChatbotMessage(message)
 
-  if (!isTipOrPaid && !isChatbot) {
+  if (!isPaid && !isChatbot) {
     return null
   }
 
-  if (isTipOrPaid) {
+  if (isPaid) {
     const amountText = message.metadata?.amount_text
     if (!amountText) return null
 
-    const className = standalone
-      ? 'message-tip-standalone inline-flex items-center gap-1.5 px-3.5 py-2.5 rounded-[18px] text-[14px] font-medium text-[#016e1a] bg-[#dbf0e0]'
-      : 'message-tag--tip inline-flex items-center gap-1 text-[12px] leading-[2] font-medium text-[#016630]'
-
-    const amountLabel = isPaidMessage(message) ? 'message' : 'tip'
-    const label = standalone
-      ? `${amountText} ${amountLabel}`
-      : `Delivered with ${amountText} ${amountLabel}`
-
     return (
-      <div className={className}>
-        <GiftIcon size={standalone ? 14 : 12} />
-        <span>{label}</span>
+      <div className="message-tag--paid inline-flex items-center gap-1 text-[12px] font-medium leading-[2] text-[#016630]">
+        <GiftIcon size={12} />
+        <span>Delivered with {amountText} message</span>
       </div>
     )
   }
@@ -135,7 +104,6 @@ export const MessageTag = ({
     </span>
   )
 
-  // Chatbot indicator variant
   return (
     <div
       className={`${chatbotBase} ${chatbotVariant}`}

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

@@ -0,0 +1,42 @@
+import type { Meta } from '@storybook/react'
+
+import {
+  Template,
+  type TemplateProps,
+} from '../../stories/customMessageStoryTemplate'
+import {
+  currentUserArgType,
+  storyUsers,
+} from '../../stories/decorators/storyUser'
+
+const meta: Meta = {
+  title: 'CustomMessage/Paid Message',
+  argTypes: currentUserArgType,
+  args: { currentUser: storyUsers.creator },
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+export default meta
+
+// A paid message keeps the original small "Delivered with $X message" tag
+// (gift icon + green text) under the bubble — unlike a tip, it never gets
+// the pill treatment.
+export const Default = Template.bind({})
+Default.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: "Here's the private coaching link we discussed!",
+      user: storyUsers.creator,
+      metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10' },
+    },
+    // Trailing reply so the paid message is no longer the latest own
+    // message — keeps the "✓✓ Delivered" stamp off this example.
+    {
+      id: 'msg-2',
+      text: 'Thank you so much!',
+      user: storyUsers.visitor,
+    },
+  ],
+} satisfies TemplateProps

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -392,14 +392,14 @@ describe('SentMessageDeliveryStatus', () => {
   })
 
   it.each([
-    ['paid', 'MESSAGE_PAID'],
-    ['tip', 'MESSAGE_TIP'],
-  ])('does not render the delivery stamp on a %s message', (_label, type) => {
+    ['a paid message with text', 'thanks!'],
+    ['a textless paid message', undefined],
+  ])('does not render the delivery stamp on %s', (_label, text) => {
     mockedUseMessageContext.mockReturnValue({
       message: {
         id: 'own-2',
-        text: 'thanks!',
-        metadata: { custom_type: type, amount_text: '$10.00' },
+        text,
+        metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
       },
       isMyMessage: () => true,
       threadList: false,
@@ -413,11 +413,12 @@ describe('SentMessageDeliveryStatus', () => {
     expect(screen.queryByTestId('sending-slot')).not.toBeInTheDocument()
   })
 
-  it('keeps the delivery stamp on a textless paid message, which has no footer tag', () => {
+  it('keeps the delivery stamp on a tip, which renders a pill instead of a footer tag', () => {
     mockedUseMessageContext.mockReturnValue({
       message: {
         id: 'own-2',
-        metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+        text: 'thanks!',
+        metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
       },
       isMyMessage: () => true,
       threadList: false,

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -13,7 +13,8 @@ import {
 
 import type { OutboundClickHandler, ResolvedOutbound } from '../../types'
 
-import { hasPaidDeliveryTag, isTipMessage } from './MessageTag'
+import { hasPaidDeliveryTag } from './MessageTag'
+import { isTipMessage } from './TipMessage'
 
 /**
  * Message status stamps for sending and terminal `MessageStatus` states

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -257,37 +257,4 @@ describe('StreamAttachmentMessage', () => {
       )
     ).toHaveTextContent('from the trip')
   })
-
-  it('forwards a persisted duration and waveform to the audio card', () => {
-    // Audio is sent as `type: "file"` with an `audio/*` mime type (for
-    // mobile compatibility), and the composer persists `duration` +
-    // `waveform_data` on the outgoing attachment. Without this
-    // passthrough every sent and received card would fall back to
-    // `--:--` and a flat placeholder even though the data is there.
-    renderWithProviders(
-      <StreamAttachmentMessage
-        groupPosition="single"
-        isMyMessage
-        message={message([
-          {
-            type: 'file',
-            asset_url: 'https://cdn.example.com/take-1.mp3',
-            mime_type: 'audio/mpeg',
-            title: 'take-1.mp3',
-            duration: 12,
-            waveform_data: [0.2, 0.9, 0.5, 0.7],
-          },
-        ])}
-      />
-    )
-
-    expect(screen.getByText('00:12')).toBeInTheDocument()
-    // The flat placeholder renders every bar at 0%; a real waveform is
-    // observable as bars drawn above that floor.
-    const barHeights = screen
-      .getAllByTestId('amplitude-bar')
-      .map((bar) => bar.style.getPropertyValue('--mes-audio-wave-bar'))
-    expect(barHeights).toHaveLength(35)
-    expect(barHeights.some((height) => height !== '0%')).toBe(true)
-  })
 })

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -221,12 +221,6 @@ function mediaItemForKind(
         src: trimToUndefined(attachment.asset_url) ?? '',
         mimeType: trimToUndefined(attachment.mime_type) ?? 'audio/mpeg',
         filename: trimToUndefined((attachment as { title?: string }).title),
-        // Both are first-class `stream-chat` Attachment fields. The
-        // composer writes them at send time so the waveform card paints
-        // the real amplitudes and the correct duration with no remote
-        // decode and no CDN CORS exposure.
-        durationSeconds: attachment.duration,
-        waveformData: attachment.waveform_data,
       }
     case 'pdf':
       return {

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

@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/react'
+
+import {
+  Template,
+  type TemplateProps,
+} from '../../stories/customMessageStoryTemplate'
+import {
+  currentUserArgType,
+  storyUsers,
+} from '../../stories/decorators/storyUser'
+
+const meta: Meta = {
+  title: 'CustomMessage/Tip Message',
+  argTypes: currentUserArgType,
+  args: { currentUser: storyUsers.creator },
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+export default meta
+
+// Figma "Tip with message" (node 2353:14548): a sent tip pill stacked
+// directly above its accompanying text bubble, tail + delivery status below.
+export const TipWithMessage = Template.bind({})
+TipWithMessage.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Thanks you so much!',
+      user: storyUsers.creator,
+      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$1' },
+    },
+  ],
+} satisfies TemplateProps
+
+// Same "Tip with message" layout, but textless — only the tip pill renders,
+// no second bubble.
+export const TipWithoutMessage = Template.bind({})
+TipWithoutMessage.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: '',
+      user: storyUsers.creator,
+      metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$1' },
+    },
+  ],
+} satisfies TemplateProps

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import { LocalMessage } from 'stream-chat'
+
+import { now } from '../../../stories/decorators/storyTime'
+
+import { TipMessage } from '.'
+
+type ComponentProps = React.ComponentProps<typeof TipMessage>
+
+const meta: Meta<ComponentProps> = {
+  title: 'TipMessage',
+  component: TipMessage,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+interface MockMessageOptions {
+  metadata?: {
+    custom_type?: 'MESSAGE_TIP'
+    amount_text?: string
+  }
+  text?: string
+}
+
+const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: options?.text ?? '',
+    type: 'regular',
+    created_at: now(),
+    updated_at: now(),
+    metadata: options?.metadata,
+  }) as LocalMessage
+
+const Template: StoryFn<ComponentProps> = (args) => {
+  return (
+    <div className="p-12">
+      <TipMessage {...args} />
+    </div>
+  )
+}
+
+export const Standalone: StoryFn<ComponentProps> = Template.bind({})
+Standalone.args = {
+  message: createMockMessage({
+    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+  }),
+}

package/src/components/CustomMessage/TipMessage/TipMessage.test.tsx

@@ -0,0 +1,65 @@
+import { LocalMessage } from 'stream-chat'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../../test/utils'
+
+import { TipMessage } from '.'
+
+interface MockMessageOptions {
+  metadata?: {
+    custom_type?: 'MESSAGE_TIP'
+    amount_text?: string
+  }
+  text?: string
+}
+
+const createMockMessage = (options?: MockMessageOptions): LocalMessage =>
+  ({
+    id: 'msg-1',
+    text: options?.text ?? 'Hello world',
+    type: 'regular',
+    created_at: new Date(),
+    updated_at: new Date(),
+    metadata: options?.metadata,
+  }) as LocalMessage
+
+describe('TipMessage', () => {
+  it('renders tip pill regardless of accompanying text', () => {
+    renderWithProviders(
+      <TipMessage
+        message={createMockMessage({
+          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
+        })}
+      />
+    )
+
+    const tipTag = screen.getByText('$5.50 tip!')
+    expect(tipTag.closest('.message-tip-pill')).not.toBeNull()
+  })
+
+  it('renders tip pill label for textless tip messages', () => {
+    renderWithProviders(
+      <TipMessage
+        message={createMockMessage({
+          text: '',
+          metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+        })}
+      />
+    )
+
+    const tipTag = screen.getByText('$50.00 tip!')
+    expect(tipTag.closest('.message-tip-pill')).not.toBeNull()
+  })
+
+  it('returns null when amount_text is missing', () => {
+    const { container } = renderWithProviders(
+      <TipMessage
+        message={createMockMessage({
+          metadata: { custom_type: 'MESSAGE_TIP' },
+        })}
+      />
+    )
+
+    expect(container.firstChild).toBeNull()
+  })
+})

package/src/components/CustomMessage/TipMessage/index.tsx

@@ -0,0 +1,27 @@
+import { MESSAGE_CUSTOM_TYPE } from '@linktr.ee/messaging-taxonomy'
+import { LocalMessage } from 'stream-chat'
+
+/** Check if a message is a tip based on metadata */
+export const isTipMessage = (message: LocalMessage): boolean => {
+  return message.metadata?.custom_type === MESSAGE_CUSTOM_TYPE.TIP
+}
+
+/** Tip pill — the gift-emoji bubble a tip message attaches, with or without accompanying text */
+export const TipMessage = ({ message }: { message: LocalMessage }) => {
+  const amountText = message.metadata?.amount_text
+  if (!amountText) return null
+
+  return (
+    <div className="message-tip-pill inline-flex items-end gap-0.5 max-w-[520px] rounded-[1.5rem] bg-[#43e660] px-4 py-3 text-white">
+      <span
+        className="flex h-5 items-center text-[20px] leading-none"
+        aria-hidden="true"
+      >
+        🎁
+      </span>
+      <span className="text-[14px] font-bold leading-[1.43] tracking-[0.28px] text-[rgba(4,4,3,0.9)]">
+        {amountText} tip!
+      </span>
+    </div>
+  )
+}

package/src/components/CustomMessage/index.tsx

@@ -43,7 +43,6 @@ import {
   isChatbotMessage,
   isMediaAttachmentMessage,
   isTextAttachmentMessage,
-  isTipOnlyMessage,
 } from './MessageTag'
 import { MessageTail } from './MessageTail'
 import { OutboundContext } from './OutboundContext'
@@ -51,6 +50,7 @@ import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 import StreamAttachmentMessage, {
   buildOrderedAttachmentSegments,
 } from './StreamAttachmentMessage'
+import { TipMessage, isTipMessage } from './TipMessage'
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   viewerLanguage?: string
@@ -216,7 +216,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   )
 
   const poll = message.poll_id && client.polls.fromState(message.poll_id)
-  const isTipOnly = isTipOnlyMessage(message)
+  const isTip = isTipMessage(message)
   const isChatbot = isChatbotMessage(message)
   const isAttachment = isAttachmentMessage(message)
   const hasRenderableAttachments = !!(
@@ -258,6 +258,18 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       ? () => onFetchSource(message, channel)
       : undefined,
   }
+  // Shared by the tip and locked-media-attachment branches below: an
+  // accompanying text bubble stacked under the pill / card.
+  const accompanyingTextBubble = (
+    <div
+      className={classNames('str-chat__message-bubble', {
+        'relative isolate': showTail,
+      })}
+    >
+      <MessageText message={displayMessage} renderText={renderText} />
+      {showTail && <MessageTail side={isMine ? 'me' : 'other'} />}
+    </div>
+  )
   return (
     <>
       {editing && (
@@ -307,8 +319,11 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
-            <MessageTag message={message} standalone />
+          {isTip ? (
+            <div className="str-chat__message-bubble-wrapper message-tip-wrapper">
+              <TipMessage message={message} />
+              {message.text?.trim() && accompanyingTextBubble}
+            </div>
           ) : isTextAttachmentMessage(message) ? (
             <div className="str-chat__message-bubble-wrapper">
               <div className="flex items-center gap-2">
@@ -327,7 +342,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               </div>
             </div>
           ) : isMediaAttachmentMessage(message) ? (
-            <div className="str-chat__message-bubble-wrapper">
+            <div className="str-chat__message-bubble-wrapper message-locked-attachment-wrapper">
               <div className="flex items-center gap-2">
                 {isMine && MessageActions && <MessageActions />}
                 {isMine ? (
@@ -359,19 +374,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 {!isMine && MessageActions && <MessageActions />}
               </div>
-              {message.text && (
-                <div
-                  className={classNames('str-chat__message-bubble', {
-                    'relative isolate': showTail,
-                  })}
-                >
-                  <MessageText
-                    message={displayMessage}
-                    renderText={renderText}
-                  />
-                  {showTail && <MessageTail side={isMine ? 'me' : 'other'} />}
-                </div>
-              )}
+              {message.text && accompanyingTextBubble}
             </div>
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage
@@ -425,7 +428,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             </div>
           )}
         </div>
-        {!isAttachment && !isTipOnly && (
+        {!isAttachment && !isTip && (
           <div className="str-chat__message-footer">
             {(!isChatbot || useAttachmentFooterChatbotTag) && (
               <MessageTag