@linktr.ee/messaging-react 3.3.5 → 3.3.6-rc-1780987607

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CBtOPvxW.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.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;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.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-nanry0Io.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.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;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.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.3.5",
+  "version": "3.3.6-rc-1780987607",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -32,7 +32,9 @@
     "lint:fix": "npx --no-install eslint . --ext .ts,.tsx --fix",
     "verify": "yarn type-check && yarn lint && yarn test:ci && yarn build",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build --stats-json",
+    "chromatic:ci:feature": "chromatic --ci --exit-zero-on-changes --exit-once-uploaded",
+    "chromatic:ci:main": "chromatic --ci --auto-accept-changes"
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
@@ -56,6 +58,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/ui": "^1.0.4",
     "autoprefixer": "^10.4.20",
+    "chromatic": "^11.20.0",
     "classnames": "^2.3.2",
     "jsdom": "^23.0.1",
     "postcss": "^8.4.49",

package/src/components/ActionButton/ActionButton.test.tsx

@@ -10,24 +10,6 @@ describe('ActionButton', () => {
       renderWithProviders(<ActionButton>Click me</ActionButton>);
       expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
     });
-
-    it('renders with default variant', () => {
-      renderWithProviders(<ActionButton>Default</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveClass('text-charcoal');
-    });
-
-    it('renders with danger variant', () => {
-      renderWithProviders(<ActionButton variant="danger">Delete</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveClass('text-danger');
-    });
-
-    it('has full width by default', () => {
-      renderWithProviders(<ActionButton>Full Width</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveClass('w-full');
-    });
   });
 
   describe('Disabled State', () => {
@@ -52,13 +34,6 @@ describe('ActionButton', () => {
 
       expect(handleClick).not.toHaveBeenCalled();
     });
-
-    it('applies disabled styles', () => {
-      renderWithProviders(<ActionButton disabled>Disabled</ActionButton>);
-      const button = screen.getByRole('button');
-      expect(button).toHaveClass('disabled:opacity-60');
-      expect(button).toHaveClass('disabled:cursor-not-allowed');
-    });
   });
 
   describe('Click Handling', () => {

package/src/components/AttachmentCard/AttachmentCard.stories.tsx

@@ -19,6 +19,10 @@ const IMAGE_URL = '/image-thumbnail.jpg'
 
 const Template: StoryFn<ComponentProps> = (args) => <AttachmentCard {...args} />
 
+// Per-variant stories stay in Storybook for browsing/design review but are
+// individually covered by cells in AllVariants — skip in Chromatic.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
 export const LightImage: StoryFn<ComponentProps> = Template.bind({})
 LightImage.args = {
   variant: 'light',
@@ -34,6 +38,7 @@ LightImage.args = {
     />
   ),
 }
+LightImage.parameters = skipInChromatic
 
 export const DarkImage: StoryFn<ComponentProps> = Template.bind({})
 DarkImage.args = {
@@ -50,6 +55,7 @@ DarkImage.args = {
     />
   ),
 }
+DarkImage.parameters = skipInChromatic
 
 export const PdfPlaceholder: StoryFn<ComponentProps> = Template.bind({})
 PdfPlaceholder.args = {
@@ -59,6 +65,7 @@ PdfPlaceholder.args = {
   detail: '120 KB',
   thumbnail: <AttachmentThumbnail mimeType="application/pdf" variant="light" />,
 }
+PdfPlaceholder.parameters = skipInChromatic
 
 export const AudioPosterOnly: StoryFn<ComponentProps> = Template.bind({})
 AudioPosterOnly.args = {
@@ -75,6 +82,7 @@ AudioPosterOnly.args = {
     />
   ),
 }
+AudioPosterOnly.parameters = skipInChromatic
 
 export const UntitledDark: StoryFn<ComponentProps> = Template.bind({})
 UntitledDark.args = {
@@ -83,6 +91,7 @@ UntitledDark.args = {
   detail: '1.1 MB',
   thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
 }
+UntitledDark.parameters = skipInChromatic
 
 export const WithTopBadges: StoryFn<ComponentProps> = Template.bind({})
 WithTopBadges.args = {
@@ -102,3 +111,116 @@ WithTopBadges.args = {
     </span>
   ),
 }
+WithTopBadges.parameters = skipInChromatic
+
+export const AllVariants: StoryFn = () => {
+  const cards: { label: string; props: ComponentProps }[] = [
+    {
+      label: 'Light image',
+      props: {
+        variant: 'light',
+        title: 'sunset.jpg',
+        mimeType: 'image/jpeg',
+        detail: '2.4 MB',
+        thumbnail: (
+          <AttachmentThumbnail
+            mimeType="image/jpeg"
+            sourceUrl={IMAGE_URL}
+            title="sunset"
+            variant="light"
+          />
+        ),
+      },
+    },
+    {
+      label: 'Dark image',
+      props: {
+        variant: 'dark',
+        title: 'sunset.jpg',
+        mimeType: 'image/jpeg',
+        detail: '2.4 MB',
+        thumbnail: (
+          <AttachmentThumbnail
+            mimeType="image/jpeg"
+            sourceUrl={IMAGE_URL}
+            title="sunset"
+            variant="dark"
+          />
+        ),
+      },
+    },
+    {
+      label: 'PDF placeholder',
+      props: {
+        variant: 'light',
+        title: 'invoice.pdf',
+        mimeType: 'application/pdf',
+        detail: '120 KB',
+        thumbnail: (
+          <AttachmentThumbnail mimeType="application/pdf" variant="light" />
+        ),
+      },
+    },
+    {
+      label: 'Audio poster',
+      props: {
+        variant: 'dark',
+        title: 'voice-memo.m4a',
+        mimeType: 'audio/m4a',
+        detail: '0:42',
+        thumbnail: (
+          <AttachmentThumbnail
+            mimeType="audio/m4a"
+            thumbnailUrl={IMAGE_URL}
+            title="voice memo"
+            variant="dark"
+          />
+        ),
+      },
+    },
+    {
+      label: 'Untitled (dark)',
+      props: {
+        variant: 'dark',
+        mimeType: 'image/png',
+        detail: '1.1 MB',
+        thumbnail: (
+          <AttachmentThumbnail mimeType="image/png" variant="dark" />
+        ),
+      },
+    },
+    {
+      label: 'With top badges',
+      props: {
+        variant: 'light',
+        title: 'receipt.pdf',
+        mimeType: 'application/pdf',
+        detail: 'Paid',
+        thumbnail: (
+          <AttachmentThumbnail mimeType="application/pdf" variant="light" />
+        ),
+        topLeft: (
+          <span className="rounded-full bg-black/80 px-2 py-0.5 text-xs font-medium text-white">
+            Locked
+          </span>
+        ),
+        topRight: (
+          <span className="rounded-full bg-white/90 px-2 py-0.5 text-xs font-medium text-black">
+            $5.00
+          </span>
+        ),
+      },
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-2 gap-6 p-6">
+      {cards.map(({ label, props }) => (
+        <div key={label} className="flex flex-col gap-2">
+          <span className="text-xs text-stone">{label}</span>
+          <AttachmentCard {...props} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/Avatar/Avatar.stories.tsx

@@ -29,6 +29,11 @@ Default.args = {
   image: 'https://i.pravatar.cc/150?img=1',
 }
 
+// Per-size stories (SmallSize…ExtraLargeSize) are each a single cell of the
+// VariousSizes grid; AIActive is the size=40 cell of AIActiveVariousSizes.
+// Keep them in Storybook for browsing but skip in Chromatic.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
 export const AIActive: StoryFn<ComponentProps> = Template.bind({})
 AIActive.args = {
   id: 'ai-agent',
@@ -36,6 +41,7 @@ AIActive.args = {
   image: 'https://i.pravatar.cc/150?img=12',
   dmAgentEnabled: true,
 }
+AIActive.parameters = skipInChromatic
 
 export const WithoutImage: StoryFn<ComponentProps> = Template.bind({})
 WithoutImage.args = {
@@ -56,6 +62,7 @@ SmallSize.args = {
   name: 'Carol Williams',
   size: 20,
 }
+SmallSize.parameters = skipInChromatic
 
 export const MediumSize: StoryFn<ComponentProps> = Template.bind({})
 MediumSize.args = {
@@ -63,6 +70,7 @@ MediumSize.args = {
   name: 'David Brown',
   size: 32,
 }
+MediumSize.parameters = skipInChromatic
 
 export const DefaultSize: StoryFn<ComponentProps> = Template.bind({})
 DefaultSize.args = {
@@ -70,6 +78,7 @@ DefaultSize.args = {
   name: 'Emma Davis',
   size: 40,
 }
+DefaultSize.parameters = skipInChromatic
 
 export const LargeSize: StoryFn<ComponentProps> = Template.bind({})
 LargeSize.args = {
@@ -77,6 +86,7 @@ LargeSize.args = {
   name: 'Frank Miller',
   size: 56,
 }
+LargeSize.parameters = skipInChromatic
 
 export const ExtraLargeSize: StoryFn<ComponentProps> = Template.bind({})
 ExtraLargeSize.args = {
@@ -84,12 +94,17 @@ ExtraLargeSize.args = {
   name: 'Grace Lee',
   size: 80,
 }
+ExtraLargeSize.parameters = skipInChromatic
 
+// Avatars don't render the participant name in the bubble — only the initial.
+// LongName stays as a Storybook fixture for documentation but adds no visual
+// regression value beyond what Default + WithoutImage already cover.
 export const LongName: StoryFn<ComponentProps> = Template.bind({})
 LongName.args = {
   id: 'user-8',
   name: 'Alexander Christopher Wellington-Montgomery III',
 }
+LongName.parameters = { chromatic: { disableSnapshot: true } }
 
 export const DifferentColors: StoryFn = () => {
   const users = [
@@ -117,6 +132,10 @@ export const DifferentColors: StoryFn = () => {
   )
 }
 
+// Showcase grid that crosses image-present/absent with different users.
+// Each individual case is already covered by `Default` (image) and
+// `WithoutImage` (initial) — skip the showcase in Chromatic so a single
+// pravatar avatar flake doesn't diff the whole grid.
 export const MixedAvatars: StoryFn = () => {
   const users = [
     { id: 'user-1', name: 'Alice Anderson', image: 'https://i.pravatar.cc/150?img=1' },
@@ -140,6 +159,7 @@ export const MixedAvatars: StoryFn = () => {
     </div>
   )
 }
+MixedAvatars.parameters = { chromatic: { disableSnapshot: true } }
 
 export const VariousSizes: StoryFn = () => {
   const sizes = [20, 32, 40, 56, 80]

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

@@ -8,11 +8,16 @@ import { ChannelList } from '.'
 
 type ComponentProps = React.ComponentProps<typeof ChannelList>
 
+// ChannelList renders a list of mocked channels driven by MockChatProvider —
+// useful as a browsable Storybook fixture but the snapshot reflects the mock
+// fixture rather than any reusable component contract. Skip the whole story
+// file in Chromatic; per-channel-row visuals are covered by CustomChannelPreview.
 const meta: Meta<ComponentProps> = {
   title: 'ChannelList',
   component: ChannelList,
   parameters: {
     layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
   },
   decorators: [
     (Story) => (

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

@@ -483,6 +483,13 @@ WithVeryLongUrl.args = {
 }
 
 // Time-based stories
+//
+// Each story below covers exactly one row of the `formatRelativeTime`
+// output matrix. The `TimeVariations` story further down already snapshots
+// all of them together in a labeled table — kept here for Storybook
+// browsing but skipped in Chromatic to avoid 9 redundant snapshots.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
 export const JustNow: StoryFn<ComponentProps> = Template.bind({})
 JustNow.args = {
   channel: createMockChannel({
@@ -494,6 +501,7 @@ JustNow.args = {
     lastMessageTime: secondsAgo(30),
   }),
 }
+JustNow.parameters = skipInChromatic
 
 export const FiveMinutesAgo: StoryFn<ComponentProps> = Template.bind({})
 FiveMinutesAgo.args = {
@@ -506,6 +514,7 @@ FiveMinutesAgo.args = {
     lastMessageTime: minutesAgo(5),
   }),
 }
+FiveMinutesAgo.parameters = skipInChromatic
 
 export const ThreeHoursAgo: StoryFn<ComponentProps> = Template.bind({})
 ThreeHoursAgo.args = {
@@ -518,6 +527,7 @@ ThreeHoursAgo.args = {
     lastMessageTime: hoursAgo(3),
   }),
 }
+ThreeHoursAgo.parameters = skipInChromatic
 
 export const Yesterday: StoryFn<ComponentProps> = Template.bind({})
 Yesterday.args = {
@@ -530,6 +540,7 @@ Yesterday.args = {
     lastMessageTime: hoursAgo(30),
   }),
 }
+Yesterday.parameters = skipInChromatic
 
 export const ThreeDaysAgo: StoryFn<ComponentProps> = Template.bind({})
 ThreeDaysAgo.args = {
@@ -542,6 +553,7 @@ ThreeDaysAgo.args = {
     lastMessageTime: daysAgo(3),
   }),
 }
+ThreeDaysAgo.parameters = skipInChromatic
 
 export const LastWeek: StoryFn<ComponentProps> = Template.bind({})
 LastWeek.args = {
@@ -554,6 +566,7 @@ LastWeek.args = {
     lastMessageTime: daysAgo(7),
   }),
 }
+LastWeek.parameters = skipInChromatic
 
 export const TwoWeeksAgo: StoryFn<ComponentProps> = Template.bind({})
 TwoWeeksAgo.args = {
@@ -566,6 +579,7 @@ TwoWeeksAgo.args = {
     lastMessageTime: daysAgo(14),
   }),
 }
+TwoWeeksAgo.parameters = skipInChromatic
 
 export const OneMonthAgo: StoryFn<ComponentProps> = Template.bind({})
 OneMonthAgo.args = {
@@ -578,6 +592,7 @@ OneMonthAgo.args = {
     lastMessageTime: daysAgo(30),
   }),
 }
+OneMonthAgo.parameters = skipInChromatic
 
 export const SixMonthsAgo: StoryFn<ComponentProps> = Template.bind({})
 SixMonthsAgo.args = {
@@ -590,6 +605,7 @@ SixMonthsAgo.args = {
     lastMessageTime: daysAgo(180),
   }),
 }
+SixMonthsAgo.parameters = skipInChromatic
 
 export const TimeVariations: StoryFn = () => {
   const [selectedChannelId, _setSelectedChannelId] = React.useState<
@@ -723,6 +739,10 @@ WithAttachmentImageUrl.args = {
     ],
   }),
 }
+// Same fallback render as WithAttachmentAssetUrl ("📎 Sent an attachment") —
+// kept as a separate story to document the field, skipped in Chromatic to
+// avoid a redundant snapshot.
+WithAttachmentImageUrl.parameters = skipInChromatic
 
 export const WithAttachmentOgScrapeUrl: StoryFn<ComponentProps> = Template.bind(
   {}
@@ -759,6 +779,7 @@ WithAttachmentThumbUrl.args = {
     ],
   }),
 }
+WithAttachmentThumbUrl.parameters = skipInChromatic
 
 export const WithLongAttachmentUrl: StoryFn<ComponentProps> = Template.bind({})
 WithLongAttachmentUrl.args = {
@@ -777,3 +798,4 @@ WithLongAttachmentUrl.args = {
     ],
   }),
 }
+WithLongAttachmentUrl.parameters = skipInChromatic

package/src/components/ChannelView.test.tsx

@@ -22,7 +22,18 @@ vi.mock('stream-chat-react', () => ({
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
   ),
-  MessageList: () => <div data-testid="message-list" />,
+  MessageList: ({
+    renderMessages,
+  }: {
+    renderMessages?: (options: Record<string, unknown>) => React.ReactNode[]
+  }) => (
+    <ul data-testid="message-list">
+      {renderMessages?.({ messages: [] }) ?? null}
+    </ul>
+  ),
+  defaultRenderMessages: () => [
+    <li key="message-list-item" data-testid="message-list-item" />,
+  ],
   WithComponents: ({ children }: { children: React.ReactNode }) => (
     <>{children}</>
   ),

package/src/components/ChannelView.tsx

@@ -10,6 +10,7 @@ import {
   useChannelStateContext,
   WithComponents,
   MessageUIComponentProps,
+  defaultRenderMessages,
 } from 'stream-chat-react'
 
 import { useChannelStar } from '../hooks/useChannelStar'
@@ -399,25 +400,41 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
-            <MessageList hideDeletedMessages hideNewMessageSeparator={false} />
-          </div>
+            <MessageList
+              hideDeletedMessages
+              hideNewMessageSeparator={false}
+              renderMessages={(options) => {
+                const elements = defaultRenderMessages(options)
 
-          {renderConversationFooter ? (
-            <React.Fragment key="lt-channel-conversation-footer">
-              {renderConversationFooter(channel)}
-            </React.Fragment>
-          ) : null}
+                if (renderConversationFooter) {
+                  elements.push(
+                    <li key="lt-channel-conversation-footer">
+                      {renderConversationFooter(channel)}
+                    </li>
+                  )
+                }
 
-          {/* Message Input */}
-          <CustomMessageInput
-            key="lt-channel-message-input"
-            {...(renderMessageInputActions && {
-              renderActions: () => renderMessageInputActions?.(channel),
-            })}
-            renderFooter={() => renderMessageInputFooter?.(channel)}
-            disabled={composerDisabled}
-            disabledReason={composerDisabledReason}
-          />
+                elements.push(
+                  // Message Input
+                  <li
+                    key="lt-channel-message-input"
+                    className="flex sticky bottom-0 p-4 pt-1 inset-x-0 mx-[calc(-1*var(--str-chat\_\_spacing-2))] md:mx-[calc(-1*min(var(--str-chat\_\_spacing-10),4%))]"
+                  >
+                    <div className="absolute bottom-0 inset-x-0 w-full h-4/5 backdrop-blur-[16px] [mask-image:linear-gradient(to_top,black_0%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_top,black_0%,transparent_100%)]" />
+                    <CustomMessageInput
+                      className="isolate w-full"
+                      renderActions={() => renderMessageInputActions?.(channel)}
+                      renderFooter={() => renderMessageInputFooter?.(channel)}
+                      disabled={composerDisabled}
+                      disabledReason={composerDisabledReason}
+                    />
+                  </li>
+                )
+
+                return elements
+              }}
+            />
+          </div>
         </Window>
       </WithComponents>
     </>

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

@@ -1,7 +1,6 @@
 import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
 import React, { useEffect } from 'react'
 import {
   Channel as ChannelType,
@@ -568,21 +567,6 @@ ConversationWithPaidAttachments.args = {
     },
   ],
 }
-ConversationWithPaidAttachments.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const attachmentMsg = canvasElement.querySelector('[data-message-id="msg-3"]')
-  await userEvent.hover(attachmentMsg!)
-  const toggle = await canvas.findByTestId('message-actions-toggle-button')
-  await userEvent.click(toggle)
-  const deleteButton = await canvas.findByRole('button', { name: 'Delete' })
-  await userEvent.click(deleteButton)
-  await expect(
-    canvas.getByRole('heading', { name: 'Delete attachment?' })
-  ).toBeInTheDocument()
-  await expect(
-    canvas.getByText(/Deleting it will remove access for the buyer/)
-  ).toBeInTheDocument()
-}
 ConversationWithPaidAttachments.parameters = {
   docs: {
     description: {

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

@@ -223,6 +223,14 @@ interface ConversationStoryArgs {
   currentUser: StoryUser
 }
 
+// Single-attachment-type conversations (`ConversationWithImages`,
+// `ConversationWithVideos`, etc.) are useful for design review but the
+// per-attachment-type RENDERING is already covered by the dedicated
+// `MessageAttachment/{Image,Video,Audio,Pdf,File}` stories. The
+// "mixed" conversations below exercise composition that the per-type
+// stories don't, so those keep their snapshots.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
 const HERO_PHOTO = 'https://picsum.photos/seed/portrait/720/720'
 const STUDIO_PHOTOS = [
   { src: 'https://picsum.photos/seed/studio-1/720/720', alt: 'Studio shot 1' },
@@ -291,6 +299,7 @@ export const ConversationWithImages: StoryFn<ConversationStoryArgs> = ({
     />
   )
 }
+ConversationWithImages.parameters = skipInChromatic
 
 /**
  * Video attachments — receiver sends a single clip with a caption,
@@ -355,6 +364,7 @@ export const ConversationWithVideos: StoryFn<ConversationStoryArgs> = ({
     />
   )
 }
+ConversationWithVideos.parameters = skipInChromatic
 
 /**
  * Audio attachments — voice memo back-and-forth, plus a stacked
@@ -426,6 +436,7 @@ export const ConversationWithAudio: StoryFn<ConversationStoryArgs> = ({
     />
   )
 }
+ConversationWithAudio.parameters = skipInChromatic
 
 /**
  * PDF attachments — single document with a caption and a stacked
@@ -498,6 +509,7 @@ export const ConversationWithPdfs: StoryFn<ConversationStoryArgs> = ({
     />
   )
 }
+ConversationWithPdfs.parameters = skipInChromatic
 
 /**
  * Generic file attachments — non-PDF documents with a download
@@ -583,6 +595,7 @@ export const ConversationWithFiles: StoryFn<ConversationStoryArgs> = ({
     />
   )
 }
+ConversationWithFiles.parameters = skipInChromatic
 
 /**
  * Mixed conversation — a realistic chat where the same thread carries