@linktr.ee/messaging-react 4.3.1-rc-1787564868 → 4.3.1-rc-1787565296

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BpUohOUq.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.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;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.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BtVpvpDD.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.MessageAttachment=e.MessageAttachment;exports.MessageBubble=e.MessageBubble;exports.MessagingLoggerProvider=e.MessagingLoggerProvider;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;exports.TipMessage=e.TipMessage;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.isTipMessage=e.isTipMessage;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;exports.useMessagingLogger=e.useMessagingLogger;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.3.1-rc-1787564868",
+  "version": "4.3.1-rc-1787565296",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.5.0-rc-1787564868",
+    "@linktr.ee/messaging-core": "2.5.0-rc-1787565296",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

package/src/components/MessageBubble/MessageBubble.stories.tsx

@@ -29,7 +29,13 @@ const Row = ({
     <div
       className={`flex ${align === 'end' ? 'justify-end' : 'justify-start'}`}
     >
-      {children}
+      <div
+        className={`str-chat__message ${
+          align === 'end' ? 'str-chat__message--me' : 'str-chat__message--other'
+        }`}
+      >
+        <div className="str-chat__message-inner">{children}</div>
+      </div>
     </div>
   </div>
 )

package/src/components/MessageBubble/MessageBubble.test.tsx

@@ -22,12 +22,15 @@ describe('MessageBubble', () => {
     const { rerender } = renderWithProviders(
       <MessageBubble.Sent text="tailed" />
     )
-    // The bubble box wraps the text; its last child is the tail <span>.
-    const bubble = screen.getByText('tailed').parentElement as HTMLElement
+    const bubble = screen
+      .getByText('tailed')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubble.querySelector('span[aria-hidden="true"]')).not.toBeNull()
 
     rerender(<MessageBubble.Sent text="tailed" tail={false} />)
-    const bubbleNoTail = screen.getByText('tailed').parentElement as HTMLElement
+    const bubbleNoTail = screen
+      .getByText('tailed')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubbleNoTail.querySelector('span[aria-hidden="true"]')).toBeNull()
   })
 
@@ -47,13 +50,17 @@ describe('MessageBubble', () => {
 
   it('applies the sent and received surface treatments from theme vars', () => {
     const { rerender } = renderWithProviders(<MessageBubble.Sent text="mine" />)
-    const sent = screen.getByText('mine').parentElement as HTMLElement
+    const sent = screen
+      .getByText('mine')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(sent.style.backgroundColor).toBe(
       'var(--str-chat__own-message-bubble-background-color, #1e2330)'
     )
 
     rerender(<MessageBubble.Received text="theirs" />)
-    const received = screen.getByText('theirs').parentElement as HTMLElement
+    const received = screen
+      .getByText('theirs')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(received.style.backgroundColor).toBe(
       'var(--str-chat__message-bubble-background-color, #f1f0ee)'
     )
@@ -61,7 +68,9 @@ describe('MessageBubble', () => {
 
   it('masks message content from session replay by default', () => {
     renderWithProviders(<MessageBubble.Received header="Brie" text="secret" />)
-    const bubble = screen.getByText('secret').parentElement as HTMLElement
+    const bubble = screen
+      .getByText('secret')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubble.getAttribute('data-dd-privacy')).toBe('mask')
   })
 
@@ -69,7 +78,9 @@ describe('MessageBubble', () => {
     renderWithProviders(
       <MessageBubble.Sent text="wide" className="w-fit max-w-[520px]" />
     )
-    const bubble = screen.getByText('wide').parentElement as HTMLElement
+    const bubble = screen
+      .getByText('wide')
+      .closest('.str-chat__message-bubble') as HTMLElement
     expect(bubble.classList.contains('w-fit')).toBe(true)
     expect(bubble.className).toContain('max-w-[520px]')
   })

package/src/components/MessageBubble/components/_shared/BubbleShell.tsx

@@ -67,7 +67,8 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
   <div
     data-dd-privacy="mask"
     className={classNames(
-      'relative px-4 py-3',
+      'str-chat__message-bubble',
+      'relative',
       'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
       className
     )}
@@ -77,13 +78,17 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
       isolation: 'isolate',
     }}
   >
-    {header != null && (
-      <div className="mb-1 font-medium" data-testid="message-bubble-header">
-        {header}
-      </div>
-    )}
-    <p className="m-0 whitespace-pre-wrap break-words hyphens-manual">{text}</p>
-    {tail && <BubbleTail variant={variant} />}
+    <div className="str-chat__message-text">
+      {header != null && (
+        <div className="mb-1 font-medium" data-testid="message-bubble-header">
+          {header}
+        </div>
+      )}
+      <p className="m-0 whitespace-pre-wrap break-words hyphens-manual">
+        {text}
+      </p>
+      {tail && <BubbleTail variant={variant} />}
+    </div>
   </div>
 )
 

package/src/components/RichCard/RichCard.stories.tsx

@@ -95,6 +95,13 @@ const COLLECTION: RichCardBaseProps = {
   imagePresentation: 'fan',
   actions: [secondaryLink('View collection', 'tr.ee/briesummer')],
 }
+const NEWLINE_SUBTITLE: RichCardBaseProps = {
+  ...OFFICIAL_WELCOME,
+  title: 'Start every conversation with a personal welcome message!',
+  subtitle:
+    '👋 Say hello as people arrive\n✨ Spark conversations\n💬 Add automated FAQs',
+  subtitleLines: 6,
+}
 
 const bothSides = (props: RichCardBaseProps) => (
   <>
@@ -113,7 +120,8 @@ const bothSides = (props: RichCardBaseProps) => (
  * The three real surfaces that converge on `linktree_rich_card`, each shown
  * Received (light) and Sent (dark). They differ only by knobs: the official
  * welcome card is `hero + primary`; a single-link broadcast is `hero +
- * secondary`; a collection is `fan + secondary`.
+ * secondary`; a collection is `fan + secondary`. A fourth row shows a
+ * newline-separated subtitle (the onboarding result-card shape).
  */
 export const Instances: StoryFn = () => (
   <Table>
@@ -131,6 +139,10 @@ export const Instances: StoryFn = () => (
         <RowLabel>Collection — fan · secondary</RowLabel>
         {bothSides(COLLECTION)}
       </tr>
+      <tr>
+        <RowLabel>Subtitle with newlines</RowLabel>
+        {bothSides(NEWLINE_SUBTITLE)}
+      </tr>
     </tbody>
   </Table>
 )