@linktr.ee/messaging-react 4.4.1-rc-1787616779 → 4.4.1-rc-1787626707

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.1-rc-1787616779",
+  "version": "4.4.1-rc-1787626707",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.6.0-rc-1787616779",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787616779",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1787626707",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787626707",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -10,7 +10,7 @@ const meta: Meta = {
 export default meta
 
 const Canvas = ({ children }: { children: React.ReactNode }) => (
-  <div className="str-chat min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
+  <div className="min-h-screen w-full space-y-6 bg-[#F9F7F4] p-12">
     {children}
   </div>
 )
@@ -27,9 +27,7 @@ const Row = ({
   <div>
     <p className="mb-2 text-xs font-medium text-black/40">{label}</p>
     <div
-      className={`str-chat__li str-chat__li--single ${
-        align === 'end' ? 'flex justify-end' : 'flex justify-start'
-      }`}
+      className={`flex ${align === 'end' ? 'justify-end' : 'justify-start'}`}
     >
       {children}
     </div>
@@ -45,25 +43,29 @@ const MULTILINE = 'Line one\nLine two\nLine three'
 export const Gallery: StoryFn = () => (
   <Canvas>
     <Row label="Received — short" align="start">
-      <MessageBubble.Received text={SHORT} />
+      <MessageBubble.Received text={SHORT} className="w-fit" />
     </Row>
     <Row label="Received — with header (sender name)" align="start">
-      <MessageBubble.Received header="Brie" text={LONG} />
+      <MessageBubble.Received
+        header="Brie"
+        text={LONG}
+        className="w-fit max-w-[520px]"
+      />
     </Row>
     <Row label="Received — no tail" align="start">
-      <MessageBubble.Received text={SHORT} tail={false} />
+      <MessageBubble.Received text={SHORT} tail={false} className="w-fit" />
     </Row>
     <Row label="Sent — short" align="end">
-      <MessageBubble.Sent text={SHORT} />
+      <MessageBubble.Sent text={SHORT} className="w-fit" />
     </Row>
     <Row label="Sent — long" align="end">
-      <MessageBubble.Sent text={LONG} />
+      <MessageBubble.Sent text={LONG} className="w-fit max-w-[520px]" />
     </Row>
     <Row label="Sent — multiline" align="end">
-      <MessageBubble.Sent text={MULTILINE} />
+      <MessageBubble.Sent text={MULTILINE} className="w-fit" />
     </Row>
     <Row label="Sent — no tail" align="end">
-      <MessageBubble.Sent text={SHORT} tail={false} />
+      <MessageBubble.Sent text={SHORT} tail={false} className="w-fit" />
     </Row>
   </Canvas>
 )
@@ -76,7 +78,10 @@ export const Gallery: StoryFn = () => (
 export const PreviewToRecipient: StoryFn = () => (
   <Canvas>
     <Row label="How your reply will look to the visitor" align="start">
-      <MessageBubble.Received text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶" />
+      <MessageBubble.Received
+        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
+        className="w-fit max-w-[520px]"
+      />
     </Row>
   </Canvas>
 )
@@ -88,7 +93,10 @@ export const PreviewToRecipient: StoryFn = () => (
 export const PreviewInChannel: StoryFn = () => (
   <Canvas>
     <Row label="How your reply looks to you in the channel" align="end">
-      <MessageBubble.Sent text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶" />
+      <MessageBubble.Sent
+        text="Thanks so much for the support — I just dropped a new track, hope you love it! 🎶"
+        className="w-fit max-w-[520px]"
+      />
     </Row>
   </Canvas>
 )

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

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

@@ -15,8 +15,8 @@ export interface BubbleShellProps {
   /**
    * Width is caller-controlled — pass a width class in `className`
    * (`w-fit` to hug the text for chat/preview bubbles, `w-full` to fill the
-   * container for card-like list rows). Applied to the outermost Stream
-   * message wrapper. With no width class the bubble fills its container.
+   * container for card-like list rows). With no width class the bubble is a
+   * block element and fills its container.
    */
   className?: string
 }
@@ -65,42 +65,25 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
   className,
 }) => (
   <div
+    data-dd-privacy="mask"
     className={classNames(
-      'str-chat__message',
-      variant === 'sent' ? 'str-chat__message--me' : 'str-chat__message--other',
+      'relative px-4 py-3',
+      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
       className
     )}
+    style={{
+      ...SURFACE_STYLE_BY_VARIANT[variant],
+      borderRadius: 'var(--str-chat__message-bubble-border-radius, 1.5rem)',
+      isolation: 'isolate',
+    }}
   >
-    <div className="str-chat__message-inner">
-      <div
-        data-dd-privacy="mask"
-        className={classNames(
-          'str-chat__message-bubble',
-          'relative',
-          'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]'
-        )}
-        style={{
-          ...SURFACE_STYLE_BY_VARIANT[variant],
-          borderRadius: 'var(--str-chat__message-bubble-border-radius, 1.5rem)',
-          isolation: 'isolate',
-        }}
-      >
-        <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>
+    {header != null && (
+      <div className="mb-1 font-medium" data-testid="message-bubble-header">
+        {header}
       </div>
-    </div>
+    )}
+    <p className="m-0 whitespace-pre-wrap break-words hyphens-manual">{text}</p>
+    {tail && <BubbleTail variant={variant} />}
   </div>
 )
 

package/src/components/MessageBubble/types.ts

@@ -20,10 +20,10 @@ export interface MessageBubbleBaseProps {
    */
   tail?: boolean
   /**
-   * Extra classes on the outermost Stream message wrapper. Width is
-   * caller-controlled: pass `w-fit` to hug the text (chat/preview) or
-   * `w-full` to fill the container (card-like list rows). With no width
-   * class the bubble fills its container. Also where you'd set `max-w-[…]`.
+   * Extra classes on the outer bubble. Width is caller-controlled: pass
+   * `w-fit` to hug the text (chat/preview) or `w-full` to fill the container
+   * (card-like list rows). With no width class the bubble fills its
+   * container. Also where you'd set `max-w-[…]`.
    */
   className?: string
 }