@linktr.ee/messaging-react 4.4.5 → 4.4.6-rc-1788234121

package/package.json

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

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

@@ -109,6 +109,20 @@ export const LinkClassic = Render([
   linkAttachment({ image_url: undefined, thumb_url: undefined }),
 ])
 
+/** Two link shares stacked in one message. */
+export const MultipleLinks = Render([
+  linkAttachment({
+    og_scrape_url: 'https://linktr.ee/marketplace',
+    title: 'Linktree Marketplace',
+    image_url: HERO,
+  }),
+  linkAttachment({
+    og_scrape_url: 'https://linktr.ee/creator',
+    title: 'Creator profile',
+    image_url: PHOTO('multiple-links'),
+  }),
+])
+
 /**
  * Link share with an emoji-only caption alongside the URL. The emoji is
  * real content, so the caption is preserved as a separate bubble beneath

package/src/components/CustomMessage/StreamAttachmentMessage.test.tsx

@@ -95,6 +95,33 @@ describe('linkCaptionDuplicatesAttachmentUrl', () => {
 })
 
 describe('StreamAttachmentMessage', () => {
+  it('spaces multiple link cards inside the attachment rows wrapper', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={message([
+          {
+            type: 'link',
+            og_scrape_url: 'https://linktr.ee/first',
+            title: 'First Link',
+            image_url: 'https://cdn.example.com/first.jpg',
+          },
+          {
+            type: 'link',
+            og_scrape_url: 'https://linktr.ee/second',
+            title: 'Second Link',
+            image_url: 'https://cdn.example.com/second.jpg',
+          },
+        ])}
+      />
+    )
+
+    const rows = screen.getByTestId('message-attachment-rows')
+    expect(rows).toHaveClass('flex', 'flex-col', 'gap-[4px]')
+    expect(within(rows).getAllByTestId('link-card')).toHaveLength(2)
+  })
+
   it('renders a sent link card and suppresses a URL-only caption', () => {
     renderWithProviders(
       <StreamAttachmentMessage

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -424,7 +424,15 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
           padding: 0,
         }}
       >
-        {rows}
+        <div
+          data-testid="message-attachment-rows"
+          className={classNames(
+            'flex flex-col gap-[4px]',
+            isMyMessage ? 'items-end' : 'items-start'
+          )}
+        >
+          {rows}
+        </div>
         {!caption && <MessageErrorIcon />}
       </div>
       {caption ? (