@linktr.ee/messaging-react 4.2.0-rc-1787325521 → 4.2.0-rc-1787599724

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

@@ -19,7 +19,7 @@ export default meta
 
 interface MockMessageOptions {
   metadata?: {
-    custom_type?: 'MESSAGE_CHATBOT' | 'MESSAGE_PAID'
+    custom_type?: 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT'
     amount_text?: string
   }
   text?: string
@@ -48,6 +48,32 @@ const Template: StoryFn<ComponentProps> = (args) => {
 // the variant matrix as the single snapshot source of truth.
 const skipInChromatic = { chromatic: { disableSnapshot: true } }
 
+export const Tip: StoryFn<ComponentProps> = Template.bind({})
+Tip.args = {
+  message: createMockMessage({
+    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.50' },
+  }),
+}
+Tip.parameters = skipInChromatic
+
+export const TipStandalone: StoryFn<ComponentProps> = Template.bind({})
+TipStandalone.args = {
+  message: createMockMessage({
+    text: '',
+    metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+  }),
+  standalone: true,
+}
+TipStandalone.parameters = skipInChromatic
+
+export const Paid: StoryFn<ComponentProps> = Template.bind({})
+Paid.args = {
+  message: createMockMessage({
+    metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
+  }),
+}
+Paid.parameters = skipInChromatic
+
 export const ChatbotReceiverText: StoryFn<ComponentProps> = Template.bind({})
 ChatbotReceiverText.args = {
   message: createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } }),
@@ -79,14 +105,6 @@ ChatbotSenderAttachment.args = {
 }
 ChatbotSenderAttachment.parameters = skipInChromatic
 
-export const Paid: StoryFn<ComponentProps> = Template.bind({})
-Paid.args = {
-  message: createMockMessage({
-    metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
-  }),
-}
-Paid.parameters = skipInChromatic
-
 export const NoTag: StoryFn<ComponentProps> = Template.bind({})
 NoTag.args = {
   message: createMockMessage(),
@@ -96,6 +114,32 @@ NoTag.parameters = skipInChromatic
 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-32">Tip:</span>
+        <MessageTag
+          message={createMockMessage({
+            metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$10.50' },
+          })}
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Paid:</span>
+        <MessageTag
+          message={createMockMessage({
+            metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
+          })}
+        />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm w-32">Tip (standalone):</span>
+        <MessageTag
+          message={createMockMessage({
+            text: '',
+            metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$50.00' },
+          })}
+          standalone
+        />
+      </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">Chatbot (receiver):</span>
         <MessageTag
@@ -127,14 +171,6 @@ export const AllVariants: StoryFn = () => {
           />
         </div>
       </div>
-      <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Paid:</span>
-        <MessageTag
-          message={createMockMessage({
-            metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
-          })}
-        />
-      </div>
       <div className="flex items-center gap-4">
         <span className="text-sm w-32">No tag:</span>
         <MessageTag message={createMockMessage()} />

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

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

package/src/components/CustomMessage/MessageTag.tsx

@@ -4,6 +4,8 @@ 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 */
@@ -26,6 +28,11 @@ 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
@@ -55,31 +62,55 @@ 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 isPaidMessage(message) && !!message.metadata?.amount_text
+  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()
 }
 
 export const MessageTag = ({
   message,
+  standalone = false,
   isMyMessage = false,
   hasAttachment = false,
 }: MessageTagProps) => {
-  const isPaid = isPaidMessage(message)
+  const isTipOrPaid = isTipOrPaidMessage(message)
   const isChatbot = isChatbotMessage(message)
 
-  if (!isPaid && !isChatbot) {
+  if (!isTipOrPaid && !isChatbot) {
     return null
   }
 
-  if (isPaid) {
+  if (isTipOrPaid) {
     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="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 className={className}>
+        <GiftIcon size={standalone ? 14 : 12} />
+        <span>{label}</span>
       </div>
     )
   }
@@ -104,6 +135,7 @@ export const MessageTag = ({
     </span>
   )
 
+  // Chatbot indicator variant
   return (
     <div
       className={`${chatbotBase} ${chatbotVariant}`}

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

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

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

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

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

@@ -257,4 +257,37 @@ 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

@@ -155,7 +155,9 @@ export function buildOrderedAttachmentSegments(
   return segments
 }
 
-function countMediaSegmentBubbles(segments: AttachmentSegment[]): number {
+function countMediaSegmentBubbles(
+  segments: AttachmentSegment[]
+): number {
   return segments.filter((segment) => segment.type === 'media').length
 }
 
@@ -219,6 +221,12 @@ 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 {
@@ -243,9 +251,7 @@ function buildMediaClusterRenderProps(
 ): Record<string, unknown> {
   if (attachments.length > 1) {
     return {
-      items: attachments.map((attachment) =>
-        mediaItemForKind(kind, attachment)
-      ),
+      items: attachments.map((attachment) => mediaItemForKind(kind, attachment)),
     }
   }
 
@@ -318,7 +324,8 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
     : groupPosition
   // The trailing caption bubble carries the tail on single / last-in-run
   // messages, matching the in-channel text bubbles.
-  const captionShowsTail = groupPosition === 'single' || groupPosition === 'end'
+  const captionShowsTail =
+    groupPosition === 'single' || groupPosition === 'end'
 
   const pushLinkRow = (
     attachment: Attachment,

package/src/components/CustomMessage/index.tsx

@@ -43,6 +43,7 @@ import {
   isChatbotMessage,
   isMediaAttachmentMessage,
   isTextAttachmentMessage,
+  isTipOnlyMessage,
 } from './MessageTag'
 import { MessageTail } from './MessageTail'
 import { OutboundContext } from './OutboundContext'
@@ -50,7 +51,6 @@ 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 isTip = isTipMessage(message)
+  const isTipOnly = isTipOnlyMessage(message)
   const isChatbot = isChatbotMessage(message)
   const isAttachment = isAttachmentMessage(message)
   const hasRenderableAttachments = !!(
@@ -258,18 +258,6 @@ 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 && (
@@ -319,11 +307,8 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTip ? (
-            <div className="str-chat__message-bubble-wrapper message-tip-wrapper">
-              <TipMessage message={message} />
-              {message.text?.trim() && accompanyingTextBubble}
-            </div>
+          {isTipOnly ? (
+            <MessageTag message={message} standalone />
           ) : isTextAttachmentMessage(message) ? (
             <div className="str-chat__message-bubble-wrapper">
               <div className="flex items-center gap-2">
@@ -342,7 +327,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               </div>
             </div>
           ) : isMediaAttachmentMessage(message) ? (
-            <div className="str-chat__message-bubble-wrapper message-locked-attachment-wrapper">
+            <div className="str-chat__message-bubble-wrapper">
               <div className="flex items-center gap-2">
                 {isMine && MessageActions && <MessageActions />}
                 {isMine ? (
@@ -374,7 +359,19 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 {!isMine && MessageActions && <MessageActions />}
               </div>
-              {message.text && accompanyingTextBubble}
+              {message.text && (
+                <div
+                  className={classNames('str-chat__message-bubble', {
+                    'relative isolate': showTail,
+                  })}
+                >
+                  <MessageText
+                    message={displayMessage}
+                    renderText={renderText}
+                  />
+                  {showTail && <MessageTail side={isMine ? 'me' : 'other'} />}
+                </div>
+              )}
             </div>
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage
@@ -428,7 +425,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             </div>
           )}
         </div>
-        {!isAttachment && !isTip && (
+        {!isAttachment && !isTipOnly && (
           <div className="str-chat__message-footer">
             {(!isChatbot || useAttachmentFooterChatbotTag) && (
               <MessageTag

package/src/components/CustomMessageInput/index.tsx

@@ -496,7 +496,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
 
       <div className="relative z-10 flex min-h-0 flex-col">
         {renderHeader?.()}
-        <div className="flex min-h-0 flex-col gap-4 p-3 pb-5 md:p-5">
+        <div className="flex min-h-0 flex-col gap-4 p-4">
           <div
             // @ts-expect-error Only React 19 onwards has `inert` in its types.
             inert={isFrozen ? '' : undefined}

package/src/components/CustomSystemMessage/index.tsx

@@ -19,9 +19,8 @@ const DM_AGENT_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<DmAgentSystemType, string> =
  * explicitly added. Keep in sync with the mobile client (cerberus
  * `CustomMessageSystem`); there is no shared package between the two surfaces.
  */
-const SHOW_SYSTEM_MESSAGE_TIMESTAMP_TYPES: readonly AgeSafetySystemType[] = [
-  'SYSTEM_AGE_SAFETY_BLOCKED',
-]
+const SHOW_SYSTEM_MESSAGE_TIMESTAMP_TYPES: readonly AgeSafetySystemType[] =
+  ['SYSTEM_AGE_SAFETY_BLOCKED']
 
 const AGE_SAFETY_SYSTEM_MESSAGE_FALLBACK_TEXT: Record<
   AgeSafetySystemType,