@linktr.ee/messaging-react 4.4.1-rc-1787614546 → 4.4.1-rc-1787616600

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.1-rc-1787614546",
+  "version": "4.4.1-rc-1787616600",
   "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-1787614546",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787614546",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1787616600",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1787616600",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -26,14 +26,12 @@ 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">
-      <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
+      className={`str-chat__li str-chat__li--single ${
+        align === 'end' ? 'flex justify-end' : 'flex justify-start'
+      }`}
+    >
+      {children}
     </div>
   </div>
 )

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

@@ -74,14 +74,14 @@ describe('MessageBubble', () => {
     expect(bubble.getAttribute('data-dd-privacy')).toBe('mask')
   })
 
-  it('forwards width/className onto the bubble box (width is caller-controlled)', () => {
+  it('forwards width/className onto the outermost message wrapper', () => {
     renderWithProviders(
       <MessageBubble.Sent text="wide" className="w-fit max-w-[520px]" />
     )
-    const bubble = screen
+    const message = 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]')
+      .closest('.str-chat__message') as HTMLElement
+    expect(message.classList.contains('w-fit')).toBe(true)
+    expect(message.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). With no width class the bubble is a
-   * block element and fills its container.
+   * container for card-like list rows). Applied to the outermost Stream
+   * message wrapper. With no width class the bubble fills its container.
    */
   className?: string
 }
@@ -65,29 +65,41 @@ const BubbleShell: React.FC<BubbleShellProps> = ({
   className,
 }) => (
   <div
-    data-dd-privacy="mask"
     className={classNames(
-      'str-chat__message-bubble',
-      'relative',
-      'text-[0.875rem] leading-[1.3125rem] tracking-[0.14px]',
+      'str-chat__message',
+      variant === 'sent' ? 'str-chat__message--me' : 'str-chat__message--other',
       className
     )}
-    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 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>
-      )}
-      <p className="m-0 whitespace-pre-wrap break-words hyphens-manual">
-        {text}
-      </p>
-      {tail && <BubbleTail variant={variant} />}
+      </div>
     </div>
   </div>
 )

package/src/components/MessageBubble/types.ts

@@ -20,10 +20,10 @@ export interface MessageBubbleBaseProps {
    */
   tail?: boolean
   /**
-   * 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-[…]`.
+   * 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-[…]`.
    */
   className?: string
 }