@linktr.ee/messaging-react 2.5.1 → 2.5.3

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BQv7yPeG.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BIInWpum.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-CxKVYxq6.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-CPa6Qru7.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelList/CustomChannelPreview.stories.tsx

@@ -84,7 +84,7 @@ const createMockChannel = (options: {
         },
       },
       messages:
-        lastMessageText || lastMessageAttachments
+        lastMessageText || lastMessageAttachments || lastMessageMetadata
           ? ([
               {
                 id: `msg-${id}-1`,
@@ -241,6 +241,48 @@ ChatbotMessage.args = {
   }),
 }
 
+export const TipMessage: StoryFn<ComponentProps> = Template.bind({})
+TipMessage.args = {
+  channel: createMockChannel({
+    id: 'channel-tip',
+    participantName: 'Alice Johnson',
+    participantId: 'participant-tip',
+    participantImage: 'https://i.pravatar.cc/150?img=2',
+    lastMessageText: 'Take my money!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 3),
+    lastMessageMetadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
+  }),
+}
+
+export const PaidMessage: StoryFn<ComponentProps> = Template.bind({})
+PaidMessage.args = {
+  channel: createMockChannel({
+    id: 'channel-paid',
+    participantName: 'Bob Smith',
+    participantId: 'participant-paid',
+    participantImage: 'https://i.pravatar.cc/150?img=3',
+    lastMessageText: 'I paid for this message!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 10),
+    lastMessageMetadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
+  }),
+}
+
+export const PaidAttachment: StoryFn<ComponentProps> = Template.bind({})
+PaidAttachment.args = {
+  channel: createMockChannel({
+    id: 'channel-paid-attachment',
+    participantName: 'Carol Williams',
+    participantId: 'participant-paid-attachment',
+    participantImage: 'https://i.pravatar.cc/150?img=4',
+    lastMessageText: 'Check out this exclusive photo!',
+    lastMessageTime: new Date(Date.now() - 1000 * 60 * 20),
+    lastMessageMetadata: {
+      custom_type: 'MESSAGE_ATTACHMENT',
+      attachment_title: 'exclusive-photo.jpg',
+    },
+  }),
+}
+
 const renderMessagePreviewWithMarkers = (
   message: LocalMessage | undefined,
   defaultPreview?: string

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -64,11 +64,16 @@ const CustomChannelPreview = React.memo<ChannelPreviewUIComponentProps>(
         message: lastMessage,
         viewerLanguage,
       })
-      if (displayText) return displayText
 
       const isTip = lastMessage?.metadata?.custom_type === 'MESSAGE_TIP'
-      if (isTip) return '💵 Sent a tip'
-
+      if (isTip) return displayText ? `💵 ${displayText}` : '💵 Sent a tip'
+      const isPaid = lastMessage?.metadata?.custom_type === 'MESSAGE_PAID'
+      if (isPaid) return displayText ? `💰 ${displayText}` : '💰 Sent a message'
+      const isPaidAttachment = lastMessage?.metadata?.custom_type === 'MESSAGE_ATTACHMENT'
+      if (isPaidAttachment) return displayText ? `📎 ${displayText}` : '📎 Sent an attachment'
+      
+      if (displayText) return displayText
+      
       const attachment = lastMessage?.attachments?.[0]
       if (attachment) {
         // Link previews - show the actual URL

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

@@ -518,70 +518,75 @@ const WithActionsTemplate: StoryFn<TemplateProps> = ({
   />
 )
 
-export const DeleteOwnMessage: StoryFn<TemplateProps> =
+export const ConversationWithPaidAttachments: StoryFn<TemplateProps> =
   WithActionsTemplate.bind({})
-DeleteOwnMessage.args = {
+ConversationWithPaidAttachments.args = {
   currentUser: storyUsers.creator,
   messages: [
     {
       id: 'msg-1',
-      text: 'Hey, how are you?',
+      text: 'Can I have your workout plan?',
       user: storyUsers.visitor,
     },
     {
       id: 'msg-2',
-      text: 'Doing great — hover me to delete!',
+      text: 'Yes, of course!',
       user: storyUsers.creator,
     },
-  ],
-}
-DeleteOwnMessage.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const ownBubble = await canvas.findByText('Doing great — hover me to delete!')
-  await userEvent.hover(ownBubble)
-  const toggle = await canvas.findByTestId('message-actions-toggle-button')
-  await userEvent.click(toggle)
-  await expect(canvas.getByText('Delete')).toBeInTheDocument()
-}
-DeleteOwnMessage.parameters = {
-  docs: {
-    description: {
-      story:
-        'Current user hovers their own message. Only "Delete" is shown — "Report" is hidden.',
+    {
+      id: 'msg-3',
+      text: 'Let me know if you have any questions!',
+      user: storyUsers.creator,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        payment_status: 'paid',
+        amount_text: 'AU$9.99',
+        attachment_title: "Alicia's Workout Plan",
+        attachment_mime_type: 'video/mp4',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '1:20',
+      },
     },
-  },
-}
-
-export const ReportOthersMessage: StoryFn<TemplateProps> =
-  WithActionsTemplate.bind({})
-ReportOthersMessage.args = {
-  currentUser: storyUsers.creator,
-  messages: [
     {
-      id: 'msg-1',
-      text: 'Hover me to report!',
+      id: 'msg-4',
+      text: 'Looks amazing, unlocking now!',
       user: storyUsers.visitor,
     },
     {
-      id: 'msg-2',
-      text: "That's a fine message.",
-      user: storyUsers.creator,
+      id: 'msg-5',
+      text: 'Here is another resource for you.',
+      user: storyUsers.visitor,
+      metadata: {
+        custom_type: 'MESSAGE_ATTACHMENT',
+        amount_text: 'AU$4.99',
+        attachment_title: 'Nutrition Guide',
+        attachment_mime_type: 'application/pdf',
+        attachment_thumbnail: '/video-thumbnail-blurred.jpg',
+        attachment_detail: '12 pages',
+      },
     },
   ],
 }
-ReportOthersMessage.play = async ({ canvasElement }) => {
+ConversationWithPaidAttachments.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement)
-  const otherBubble = await canvas.findByText('Hover me to report!')
-  await userEvent.hover(otherBubble)
+  const attachmentMsg = canvasElement.querySelector('[data-message-id="msg-3"]')
+  await userEvent.hover(attachmentMsg!)
   const toggle = await canvas.findByTestId('message-actions-toggle-button')
   await userEvent.click(toggle)
-  await expect(canvas.getByText('Report')).toBeInTheDocument()
+  const deleteButton = await canvas.findByRole('button', { name: 'Delete' })
+  await userEvent.click(deleteButton)
+  await expect(
+    canvas.getByRole('heading', { name: 'Delete attachment?' })
+  ).toBeInTheDocument()
+  await expect(
+    canvas.getByText(/Deleting it will remove access for the buyer/)
+  ).toBeInTheDocument()
 }
-ReportOthersMessage.parameters = {
+ConversationWithPaidAttachments.parameters = {
   docs: {
     description: {
       story:
-        "Current user hovers the other participant's message. Only \"Report\" is shown — \"Delete\" is hidden.",
+        'Report and Delete actions only appear on paid attachment messages — regular messages show no actions. Hovering msg-3 (a purchased attachment) shows the delete confirmation with buyer warning.',
     },
   },
 }

package/src/components/CustomMessage/CustomMessageActions.tsx

@@ -1,17 +1,22 @@
+import { FlagIcon, TrashSimpleIcon } from '@phosphor-icons/react'
 import React from 'react'
-import { useMessageContext, useTranslationContext } from 'stream-chat-react'
+import { useMessageContext } from 'stream-chat-react'
 import {
   DefaultDropdownActionButton,
   MessageActions,
-  type MessageActionSetItem,
 } from 'stream-chat-react/experimental'
 
 const DeleteAction = () => {
-  const { handleDelete } = useMessageContext('CustomMessageActions')
-  const { t } = useTranslationContext('CustomMessageActions')
+  const { handleDelete, message } = useMessageContext('CustomMessageActions')
+  if (message.metadata?.payment_status !== 'paid') return null
   return (
-    <DefaultDropdownActionButton onClick={handleDelete}>
-      {t('Delete')}
+    <DefaultDropdownActionButton
+      onClick={handleDelete}
+      aria-label="Delete"
+      title="Delete"
+      className="bg-marble rounded-full p-2 hover:bg-sand transition-all"
+    >
+      <TrashSimpleIcon size={16} weight="light" aria-hidden />
     </DefaultDropdownActionButton>
   )
 }
@@ -19,17 +24,26 @@ const DeleteAction = () => {
 const ReportAction = () => {
   const { handleFlag } = useMessageContext('CustomMessageActions')
   return (
-    <DefaultDropdownActionButton onClick={handleFlag}>
-      Report
+    <DefaultDropdownActionButton
+      onClick={handleFlag}
+      aria-label="Report"
+      title="Report"
+      className="bg-marble rounded-full p-2 hover:bg-sand transition-all"
+    >
+      <FlagIcon size={16} weight="light" aria-hidden />
     </DefaultDropdownActionButton>
   )
 }
 
-const MESSAGE_ACTION_SET: MessageActionSetItem[] = [
-  { Component: DeleteAction, placement: 'dropdown', type: 'delete' },
-  { Component: ReportAction, placement: 'dropdown', type: 'flag' },
-]
-
-export const CustomMessageActions = () => (
-  <MessageActions messageActionSet={MESSAGE_ACTION_SET} />
-)
+export const CustomMessageActions = () => {
+  const { message } = useMessageContext('CustomMessageActions')
+  if (message.metadata?.custom_type !== 'MESSAGE_ATTACHMENT') return null
+  return (
+    <MessageActions
+      messageActionSet={[
+        { Component: DeleteAction, placement: 'quick', type: 'delete' },
+        { Component: ReportAction, placement: 'quick', type: 'flag' },
+      ]}
+    />
+  )
+}

package/src/components/CustomMessage/index.tsx

@@ -194,7 +194,11 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           open={isBounceDialogOpen}
         />
       )}
-      <div className={rootClassName} key={message.id} data-message-id={message.id}>
+      <div
+        className={rootClassName}
+        key={message.id}
+        data-message-id={message.id}
+      >
         {PinIndicator && <PinIndicator />}
         {!!reminder && <ReminderNotification reminder={reminder} />}
         {message.user && (
@@ -228,33 +232,39 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
               {isMine ? (
-                <LockedAttachment.Sent
-                  title={message.metadata?.attachment_title}
-                  mimeType={message.metadata?.attachment_mime_type}
-                  thumbnailUrl={message.metadata?.attachment_thumbnail}
-                  amountText={message.metadata?.amount_text}
-                  detail={message.metadata?.attachment_detail}
-                  paymentStatus={message.metadata?.payment_status}
-                  onPreviewClick={() => onUnlockClick?.(message, channel)}
-                  onFetchSource={async () =>
-                    await onFetchSource?.(message, channel)
-                  }
-                />
+                <div className="flex items-center gap-2">
+                  {MessageActions && <MessageActions />}
+                  <LockedAttachment.Sent
+                    title={message.metadata?.attachment_title}
+                    mimeType={message.metadata?.attachment_mime_type}
+                    thumbnailUrl={message.metadata?.attachment_thumbnail}
+                    amountText={message.metadata?.amount_text}
+                    detail={message.metadata?.attachment_detail}
+                    paymentStatus={message.metadata?.payment_status}
+                    onPreviewClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
+                    }
+                  />
+                </div>
               ) : (
-                <LockedAttachment.Received
-                  title={message.metadata?.attachment_title}
-                  mimeType={message.metadata?.attachment_mime_type}
-                  thumbnailUrl={message.metadata?.attachment_thumbnail}
-                  amountText={message.metadata?.amount_text}
-                  detail={message.metadata?.attachment_detail}
-                  paymentStatus={message.metadata?.payment_status}
-                  isUnlocking={isUnlocking(message.id)}
-                  onUnlockClick={() => onUnlockClick?.(message, channel)}
-                  onFetchSource={async () =>
-                    await onFetchSource?.(message, channel)
-                  }
-                  onDownloadClick={() => onDownloadClick?.(message, channel)}
-                />
+                <div className="flex items-center gap-2">
+                  <LockedAttachment.Received
+                    title={message.metadata?.attachment_title}
+                    mimeType={message.metadata?.attachment_mime_type}
+                    thumbnailUrl={message.metadata?.attachment_thumbnail}
+                    amountText={message.metadata?.amount_text}
+                    detail={message.metadata?.attachment_detail}
+                    paymentStatus={message.metadata?.payment_status}
+                    isUnlocking={isUnlocking(message.id)}
+                    onUnlockClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
+                    }
+                    onDownloadClick={() => onDownloadClick?.(message, channel)}
+                  />
+                  {MessageActions && <MessageActions />}
+                </div>
               )}
               {message.text && (
                 <div className="str-chat__message-bubble">
@@ -300,7 +310,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               </div>
             </div>
           )}
-          {MessageActions && <MessageActions />}
         </div>
         {!isAttachment && !isTipOnly && (
           <div className="str-chat__message-footer">