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

package/package.json

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

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

@@ -262,7 +262,8 @@ export const WithCustomMessagePreview: StoryFn = () => {
       participantName: 'Alice Urgent',
       participantId: 'participant-urgent',
       participantImage: 'https://i.pravatar.cc/150?img=36',
-      lastMessageText: 'Critical issue needs immediate attention!',
+      lastMessageText:
+        'Critical issue needs immediate attention! Please review the server logs for more details and escalate to the on-call engineer. This system outage is affecting multiple users, and we need to resolve it as soon as possible. Impacted services include messaging, notifications, and real-time updates. All hands are required to investigate and remediate the situation. If you have any questions or need additional resources, contact the incident commander immediately!',
       lastMessageTime: new Date(Date.now() - 1000 * 60), // 1 minute ago
       lastMessageMetadata: { custom_type: 'MESSAGE_URGENT' },
       unreadCount: 3,

package/src/components/ChannelList/CustomChannelPreview.tsx

@@ -36,6 +36,15 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
         onChannelSelect(channel)
       }
     }
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      const isActivationKey = event.key === 'Enter' || event.key === ' '
+      const isRepeatedKeydown = event.repeat
+
+      if (!isActivationKey || isRepeatedKeydown) return
+
+      event.preventDefault()
+      handleClick()
+    }
 
     // Get participant info
     const members = Object.values(channel?.state?.members || {})
@@ -96,9 +105,11 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
     }
 
     return (
-      <button
-        type="button"
+      <div
+        role="button"
+        tabIndex={0}
         onClick={handleClick}
+        onKeyDown={handleKeyDown}
         className={classNames(
           'group w-full px-4 py-3 transition-colors text-left max-w-full overflow-hidden focus-ring',
           {
@@ -149,7 +160,7 @@ const CustomChannelPreview = React.memo<CustomChannelPreviewProps>(
             </div>
           </div>
         </div>
-      </button>
+      </div>
     )
   }
 )

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

@@ -154,6 +154,21 @@ 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: [
@@ -168,6 +183,21 @@ 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: [
@@ -196,6 +226,12 @@ 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,6 +48,14 @@ 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({
@@ -57,6 +65,16 @@ 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({
@@ -64,6 +82,14 @@ 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' } }),
@@ -78,7 +104,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-32">Tip:</span>
+        <span className="text-sm w-40">Tip (with amount):</span>
         <MessageTag
           message={createMockMessage({
             metadata: { custom_type: 'MESSAGE_TIP', amount_text: '$10.50' },
@@ -86,7 +112,15 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Paid:</span>
+        <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>
         <MessageTag
           message={createMockMessage({
             metadata: { custom_type: 'MESSAGE_PAID', amount_text: '$25.00' },
@@ -94,7 +128,15 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Tip (standalone):</span>
+        <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>
         <MessageTag
           message={createMockMessage({
             text: '',
@@ -104,13 +146,23 @@ export const AllVariants: StoryFn = () => {
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-32">Chatbot:</span>
+        <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>
         <MessageTag
           message={createMockMessage({ metadata: { custom_type: 'MESSAGE_CHATBOT' } })}
         />
       </div>
       <div className="flex items-center gap-4">
-        <span className="text-sm w-32">No tag:</span>
+        <span className="text-sm w-40">No tag:</span>
         <MessageTag message={createMockMessage()} />
         <span className="text-xs text-stone">(renders nothing)</span>
       </div>

package/src/components/CustomMessage/MessageTag.tsx

@@ -54,15 +54,17 @@ 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 = standalone
-      ? `${amountText} tip`
-      : `Delivered with ${amountText} tip`
+    const label = amountText
+      ? standalone
+        ? `${amountText} tip`
+        : `Delivered with ${amountText} tip`
+      : standalone
+        ? 'Tip'
+        : 'Delivered with tip'
 
     return (
       <div className={className}>