@linktr.ee/messaging-react 4.1.1 → 4.1.2

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CAD8AXBg.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.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-yg1xEb2Y.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.MessageBubble=e.MessageBubble;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.RichCard=e.RichCard;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.optimizeMessagingAttachmentUrl=e.optimizeMessagingAttachmentUrl;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;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 r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-t0Okjl1p.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as r, f as l, L as g, h as c, M, i as h, j as L, k as u, l as d, R as p, m as C, n as v, p as A, q as k, s as F, t as b, u as P, v as f, w as x, o as y, x as z, y as S, z as q, B, D, E, G as R } from "./index-C1cbPKI7.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -10,6 +10,7 @@ const meta: Meta<ComponentProps> = {
   component: ActionButton,
   parameters: {
     layout: 'centered',
+    chromatic: { disableSnapshot: true },
   },
   argTypes: {
     onClick: { action: 'clicked' },

package/src/components/AttachmentCard/MediaPlayer.tsx

@@ -104,6 +104,14 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
     seekTo(fraction)
   }
 
+  const handleScrubberKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
+      if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
+    },
+    [seekTo, played]
+  )
+
   // --- Effects ---
 
   // Sync controlled playing prop to internal state
@@ -331,10 +339,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
             onMouseDown={handleTrackPointerDown}
             onTouchStart={handleTrackPointerDown}
             onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => {
-              if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
-              if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
-            }}
+            onKeyDown={handleScrubberKeyDown}
           >
             <div className="w-full overflow-hidden rounded-full bg-white/30 h-1">
               <div
@@ -378,10 +383,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
             onClick={(e) => e.stopPropagation()}
             onMouseEnter={() => setScrubberHovered(true)}
             onMouseLeave={() => setScrubberHovered(false)}
-            onKeyDown={(e) => {
-              if (e.key === 'ArrowRight') seekTo(Math.min(1, played + 0.05))
-              if (e.key === 'ArrowLeft') seekTo(Math.max(0, played - 0.05))
-            }}
+            onKeyDown={handleScrubberKeyDown}
           >
             <div
               className={`w-full overflow-hidden rounded-full bg-white/30 transition-all duration-200 ${scrubberHovered || seeking ? 'h-1.5' : 'h-1'}`}

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

@@ -22,17 +22,24 @@ const Template: StoryFn<ComponentProps> = (args) => {
   )
 }
 
+// Loose single stories (Default/WithoutImage/Starred) are each a cell of the
+// States grid; the per-size stories (SmallSize…ExtraLargeSize) are cells 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 } }
+
+// Deterministic local avatar for the States grid so a pravatar network flake
+// can't diff the snapshot. Individual stories keep their remote images (they're
+// skipped in Chromatic anyway).
+const LOCAL_AVATAR = '/image-thumbnail.jpg'
+
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {
   id: 'user-1',
   name: 'Alice Johnson',
   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 } }
+Default.parameters = skipInChromatic
 
 export const AIActive: StoryFn<ComponentProps> = Template.bind({})
 AIActive.args = {
@@ -48,6 +55,7 @@ WithoutImage.args = {
   id: 'user-2',
   name: 'Bob Smith',
 }
+WithoutImage.parameters = skipInChromatic
 
 export const Starred: StoryFn<ComponentProps> = Template.bind({})
 Starred.args = {
@@ -55,6 +63,37 @@ Starred.args = {
   name: 'Kaiya Korsgaard',
   starred: true,
 }
+Starred.parameters = skipInChromatic
+
+export const States: StoryFn = () => {
+  const cells: { label: string; props: ComponentProps }[] = [
+    {
+      label: 'Default (image)',
+      props: { id: 'user-1', name: 'Alice Johnson', image: LOCAL_AVATAR },
+    },
+    {
+      label: 'Without image',
+      props: { id: 'user-2', name: 'Bob Smith' },
+    },
+    {
+      label: 'Starred',
+      props: { id: 'user-9', name: 'Kaiya Korsgaard', starred: true },
+    },
+  ]
+
+  return (
+    <div className="p-12">
+      <div className="flex gap-8 items-center">
+        {cells.map(({ label, props }) => (
+          <div key={label} className="flex flex-col items-center gap-2">
+            <Avatar {...props} />
+            <span className="text-xs text-stone">{label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
 
 export const SmallSize: StoryFn<ComponentProps> = Template.bind({})
 SmallSize.args = {

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

@@ -134,6 +134,17 @@ const Template: StoryFn<ComponentProps> = (args) => {
   )
 }
 
+// Per-variant single-row stories stay in Storybook for browsing/design review
+// but are individually covered by rows in the PreviewStates / MessageTypeStates
+// / UrlAndAttachmentStates grids — skip in Chromatic so those grids are the
+// single snapshot source of truth.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
+// Deterministic local avatar for the grids so a pravatar network flake can't
+// diff a whole grid snapshot. Individual stories keep their remote images
+// (they're skipped in Chromatic anyway).
+const LOCAL_AVATAR = '/image-thumbnail.jpg'
+
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {
   channel: createMockChannel({
@@ -145,6 +156,7 @@ Default.args = {
     lastMessageTime: now(),
   }),
 }
+Default.parameters = skipInChromatic
 
 export const Selected: StoryFn<ComponentProps> = Template.bind({})
 Selected.args = {
@@ -163,6 +175,7 @@ Selected.args = {
     participantImage: 'https://i.pravatar.cc/150?img=3',
   }),
 }
+Selected.parameters = skipInChromatic
 
 export const WithUnreadMessages: StoryFn<ComponentProps> = Template.bind({})
 WithUnreadMessages.args = {
@@ -176,6 +189,7 @@ WithUnreadMessages.args = {
     unreadCount: 3,
   }),
 }
+WithUnreadMessages.parameters = skipInChromatic
 
 export const ManyUnreadMessages: StoryFn<ComponentProps> = Template.bind({})
 ManyUnreadMessages.args = {
@@ -189,6 +203,7 @@ ManyUnreadMessages.args = {
     unreadCount: 127,
   }),
 }
+ManyUnreadMessages.parameters = skipInChromatic
 
 export const NoAvatar: StoryFn<ComponentProps> = Template.bind({})
 NoAvatar.args = {
@@ -200,6 +215,7 @@ NoAvatar.args = {
     lastMessageTime: minutesAgo(30),
   }),
 }
+NoAvatar.parameters = skipInChromatic
 
 export const NoMessages: StoryFn<ComponentProps> = Template.bind({})
 NoMessages.args = {
@@ -211,6 +227,7 @@ NoMessages.args = {
     lastMessageText: '',
   }),
 }
+NoMessages.parameters = skipInChromatic
 
 export const LongMessage: StoryFn<ComponentProps> = Template.bind({})
 LongMessage.args = {
@@ -224,6 +241,7 @@ LongMessage.args = {
     lastMessageTime: hoursAgo(2),
   }),
 }
+LongMessage.parameters = skipInChromatic
 
 export const LongName: StoryFn<ComponentProps> = Template.bind({})
 LongName.args = {
@@ -235,6 +253,7 @@ LongName.args = {
     lastMessageTime: minutesAgo(45),
   }),
 }
+LongName.parameters = skipInChromatic
 
 export const ChatbotMessage: StoryFn<ComponentProps> = Template.bind({})
 ChatbotMessage.args = {
@@ -248,6 +267,7 @@ ChatbotMessage.args = {
     lastMessageMetadata: { custom_type: 'MESSAGE_CHATBOT' },
   }),
 }
+ChatbotMessage.parameters = skipInChromatic
 
 export const TipMessage: StoryFn<ComponentProps> = Template.bind({})
 TipMessage.args = {
@@ -261,6 +281,7 @@ TipMessage.args = {
     lastMessageMetadata: { custom_type: 'MESSAGE_TIP', amount_text: '$5.00' },
   }),
 }
+TipMessage.parameters = skipInChromatic
 
 export const PaidMessage: StoryFn<ComponentProps> = Template.bind({})
 PaidMessage.args = {
@@ -274,6 +295,7 @@ PaidMessage.args = {
     lastMessageMetadata: { custom_type: 'MESSAGE_PAID', amount_text: '$10.00' },
   }),
 }
+PaidMessage.parameters = skipInChromatic
 
 export const PaidAttachment: StoryFn<ComponentProps> = Template.bind({})
 PaidAttachment.args = {
@@ -290,6 +312,7 @@ PaidAttachment.args = {
     },
   }),
 }
+PaidAttachment.parameters = skipInChromatic
 
 const renderMessagePreviewWithMarkers = (
   message: LocalMessage | undefined,
@@ -396,6 +419,7 @@ SelectedWithUnread.args = {
     participantId: 'participant-9',
   }),
 }
+SelectedWithUnread.parameters = skipInChromatic
 
 export const MultipleChannels: StoryFn = () => {
   const [selectedChannelId, _setSelectedChannelId] = React.useState<
@@ -468,6 +492,7 @@ WithUrl.args = {
     lastMessageTime: minutesAgo(8),
   }),
 }
+WithUrl.parameters = skipInChromatic
 
 export const WithVeryLongUrl: StoryFn<ComponentProps> = Template.bind({})
 WithVeryLongUrl.args = {
@@ -481,6 +506,7 @@ WithVeryLongUrl.args = {
     lastMessageTime: minutesAgo(20),
   }),
 }
+WithVeryLongUrl.parameters = skipInChromatic
 
 // Time-based stories
 //
@@ -488,7 +514,6 @@ WithVeryLongUrl.args = {
 // 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 = {
@@ -722,6 +747,7 @@ WithAttachmentAssetUrl.args = {
     ],
   }),
 }
+WithAttachmentAssetUrl.parameters = skipInChromatic
 
 export const WithAttachmentImageUrl: StoryFn<ComponentProps> = Template.bind({})
 WithAttachmentImageUrl.args = {
@@ -762,6 +788,7 @@ WithAttachmentOgScrapeUrl.args = {
     ],
   }),
 }
+WithAttachmentOgScrapeUrl.parameters = skipInChromatic
 
 export const WithAttachmentThumbUrl: StoryFn<ComponentProps> = Template.bind({})
 WithAttachmentThumbUrl.args = {
@@ -799,3 +826,307 @@ WithLongAttachmentUrl.args = {
   }),
 }
 WithLongAttachmentUrl.parameters = skipInChromatic
+
+interface GridRow {
+  label: string
+  channel: Channel
+  selectedChannel?: Channel
+}
+
+const StatesGrid: StoryFn<{ rows: GridRow[] }> = ({ rows }) => (
+  <div className="flex flex-col gap-4 p-6">
+    {rows.map(({ label, channel, selectedChannel }) => (
+      <div key={label} className="flex flex-col gap-1">
+        <span className="text-xs text-stone">{label}</span>
+        <div className="w-[360px] bg-chalk border border-sand rounded-lg overflow-hidden">
+          <CustomChannelPreview
+            channel={channel}
+            selectedChannel={selectedChannel}
+            onChannelSelect={(channel) => {
+              console.log('Channel selected:', channel.id)
+            }}
+          />
+        </div>
+      </div>
+    ))}
+  </div>
+)
+
+export const PreviewStates: StoryFn = () => {
+  const selected = createMockChannel({
+    id: 'channel-2',
+    participantName: 'Bob Smith',
+    participantId: 'participant-2',
+    participantImage: LOCAL_AVATAR,
+    lastMessageText: 'That sounds great!',
+    lastMessageTime: minutesAgo(5),
+  })
+  const selectedUnread = createMockChannel({
+    id: 'channel-9',
+    participantName: 'Helen Park',
+    participantId: 'participant-9',
+    participantImage: LOCAL_AVATAR,
+    lastMessageText: 'Important update!',
+    lastMessageTime: minutesAgo(10),
+    unreadCount: 5,
+  })
+
+  const rows: GridRow[] = [
+    {
+      label: 'Default',
+      channel: createMockChannel({
+        id: 'channel-1',
+        participantName: 'Alice Johnson',
+        participantId: 'participant-1',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'Hey! How are you doing?',
+        lastMessageTime: now(),
+      }),
+    },
+    {
+      label: 'Selected',
+      channel: selected,
+      selectedChannel: selected,
+    },
+    {
+      label: 'With unread messages',
+      channel: createMockChannel({
+        id: 'channel-3',
+        participantName: 'Carol Williams',
+        participantId: 'participant-3',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'Did you see my last message?',
+        lastMessageTime: minutesAgo(15),
+        unreadCount: 3,
+      }),
+    },
+    {
+      label: 'Many unread messages',
+      channel: createMockChannel({
+        id: 'channel-4',
+        participantName: 'David Brown',
+        participantId: 'participant-4',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'Please check this out!',
+        lastMessageTime: hoursAgo(1),
+        unreadCount: 127,
+      }),
+    },
+    {
+      label: 'Selected with unread',
+      channel: selectedUnread,
+      selectedChannel: selectedUnread,
+    },
+    {
+      label: 'No avatar',
+      channel: createMockChannel({
+        id: 'channel-5',
+        participantName: 'Emma Davis',
+        participantId: 'participant-5',
+        lastMessageText: 'Thanks for your help!',
+        lastMessageTime: minutesAgo(30),
+      }),
+    },
+    {
+      label: 'No messages',
+      channel: createMockChannel({
+        id: 'channel-6',
+        participantName: 'Frank Miller',
+        participantId: 'participant-6',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: '',
+      }),
+    },
+    {
+      label: 'Long message',
+      channel: createMockChannel({
+        id: 'channel-7',
+        participantName: 'Grace Lee',
+        participantId: 'participant-7',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText:
+          'This is a very long message that should be truncated because it contains way too much text to display in the preview. We want to make sure the component handles this gracefully.',
+        lastMessageTime: hoursAgo(2),
+      }),
+    },
+    {
+      label: 'Long name',
+      channel: createMockChannel({
+        id: 'channel-8',
+        participantName: 'Alexander Christopher Wellington-Montgomery III',
+        participantId: 'participant-8',
+        lastMessageText: 'Nice to meet you!',
+        lastMessageTime: minutesAgo(45),
+      }),
+    },
+  ]
+
+  return <StatesGrid rows={rows} />
+}
+
+export const MessageTypeStates: StoryFn = () => {
+  const rows: GridRow[] = [
+    {
+      label: 'Chatbot message',
+      channel: createMockChannel({
+        id: 'channel-chatbot',
+        participantName: 'Emily Watson',
+        participantId: 'participant-chatbot',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'Thanks for reaching out! How can I help you today?',
+        lastMessageTime: minutesAgo(2),
+        lastMessageMetadata: { custom_type: 'MESSAGE_CHATBOT' },
+      }),
+    },
+    {
+      label: 'Tip message',
+      channel: createMockChannel({
+        id: 'channel-tip',
+        participantName: 'Alice Johnson',
+        participantId: 'participant-tip',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'Take my money!',
+        lastMessageTime: minutesAgo(3),
+        lastMessageMetadata: {
+          custom_type: 'MESSAGE_TIP',
+          amount_text: '$5.00',
+        },
+      }),
+    },
+    {
+      label: 'Paid message',
+      channel: createMockChannel({
+        id: 'channel-paid',
+        participantName: 'Bob Smith',
+        participantId: 'participant-paid',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'I paid for this message!',
+        lastMessageTime: minutesAgo(10),
+        lastMessageMetadata: {
+          custom_type: 'MESSAGE_PAID',
+          amount_text: '$10.00',
+        },
+      }),
+    },
+    {
+      label: 'Paid attachment',
+      channel: createMockChannel({
+        id: 'channel-paid-attachment',
+        participantName: 'Carol Williams',
+        participantId: 'participant-paid-attachment',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'Check out this exclusive photo!',
+        lastMessageTime: minutesAgo(20),
+        lastMessageMetadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_title: 'exclusive-photo.jpg',
+        },
+      }),
+    },
+  ]
+
+  return <StatesGrid rows={rows} />
+}
+
+export const UrlAndAttachmentStates: StoryFn = () => {
+  const rows: GridRow[] = [
+    {
+      label: 'With URL',
+      channel: createMockChannel({
+        id: 'channel-url',
+        participantName: 'Ivan Rodriguez',
+        participantId: 'participant-url',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: 'https://example.com/page',
+        lastMessageTime: minutesAgo(8),
+      }),
+    },
+    {
+      label: 'With very long URL',
+      channel: createMockChannel({
+        id: 'channel-long-url',
+        participantName: 'Julia Martinez',
+        participantId: 'participant-long-url',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText:
+          'https://example.com/very/long/path/with/many/segments/and/query/parameters?param1=value1&param2=value2&param3=value3&param4=value4&param5=very-long-value-that-makes-the-url-extremely-long',
+        lastMessageTime: minutesAgo(20),
+      }),
+    },
+    {
+      label: 'Attachment (asset_url)',
+      channel: createMockChannel({
+        id: 'channel-attachment-asset',
+        participantName: 'Tom Wilson',
+        participantId: 'participant-attachment-asset',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: '',
+        lastMessageTime: minutesAgo(10),
+        lastMessageAttachments: [
+          { asset_url: 'https://example.com/document.pdf' },
+        ],
+      }),
+    },
+    {
+      label: 'Attachment (image_url)',
+      channel: createMockChannel({
+        id: 'channel-attachment-image',
+        participantName: 'Uma Patel',
+        participantId: 'participant-attachment-image',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: '',
+        lastMessageTime: minutesAgo(15),
+        lastMessageAttachments: [
+          { image_url: 'https://example.com/image.jpg' },
+        ],
+      }),
+    },
+    {
+      label: 'Attachment (og_scrape_url)',
+      channel: createMockChannel({
+        id: 'channel-attachment-og',
+        participantName: 'Victor Zhang',
+        participantId: 'participant-attachment-og',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: '',
+        lastMessageTime: minutesAgo(7),
+        lastMessageAttachments: [
+          { og_scrape_url: 'https://example.com/article' },
+        ],
+      }),
+    },
+    {
+      label: 'Attachment (thumb_url)',
+      channel: createMockChannel({
+        id: 'channel-attachment-thumb',
+        participantName: 'Wendy Kim',
+        participantId: 'participant-attachment-thumb',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: '',
+        lastMessageTime: minutesAgo(12),
+        lastMessageAttachments: [
+          { thumb_url: 'https://example.com/thumb.jpg' },
+        ],
+      }),
+    },
+    {
+      label: 'Long attachment URL',
+      channel: createMockChannel({
+        id: 'channel-attachment-long',
+        participantName: 'Xavier Cruz',
+        participantId: 'participant-attachment-long',
+        participantImage: LOCAL_AVATAR,
+        lastMessageText: '',
+        lastMessageTime: minutesAgo(20),
+        lastMessageAttachments: [
+          {
+            asset_url:
+              'https://example.com/very/long/path/to/file/with/many/segments/document-with-very-long-name-that-should-be-truncated.pdf',
+          },
+        ],
+      }),
+    },
+  ]
+
+  return <StatesGrid rows={rows} />
+}

package/src/components/CloseButton/CloseButton.stories.tsx

@@ -8,7 +8,7 @@ type ComponentProps = React.ComponentProps<typeof CloseButton>
 const meta: Meta<ComponentProps> = {
   title: 'CloseButton',
   component: CloseButton,
-  parameters: { layout: 'centered' },
+  parameters: { layout: 'centered', chromatic: { disableSnapshot: true } },
   argTypes: {
     onClick: { action: 'clicked' },
   },

package/src/components/CustomDateSeparator/CustomDateSeparator.stories.tsx

@@ -10,7 +10,7 @@ type ComponentProps = React.ComponentProps<typeof CustomDateSeparator>
 const meta: Meta<ComponentProps> = {
   title: 'CustomDateSeparator',
   component: CustomDateSeparator,
-  parameters: { layout: 'fullscreen' },
+  parameters: { layout: 'fullscreen', chromatic: { disableSnapshot: true } },
 }
 export default meta
 

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

@@ -648,6 +648,11 @@ WithTypingIndicatorComparison.parameters = {
         'Renders a standard incoming message and the custom typing indicator in the same list for visual comparison.',
     },
   },
+  // The typing indicator is animation-dominant, so a snapshot mostly captures
+  // whichever frame the animation happened to be on — it flags a visual change
+  // on nearly every build. Matches CustomTypingIndicator.stories.tsx; the story
+  // stays browsable in Storybook for design review.
+  chromatic: { disableSnapshot: true },
 }
 
 // ─── Message Actions ──────────────────────────────────────────────────────────

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

@@ -179,9 +179,7 @@ export const AllVariants: StoryFn = () => {
     </div>
   )
 }
-// AllVariants is a design-review kitchen sink — every per-variant story
-// (Tip, Paid, TipStandalone, ChatbotReceiverText, ChatbotSenderText,
-// ChatbotSenderAttachment, NoTag) already covers its own row independently.
-// Skip in Chromatic to avoid a "any one row changes → whole snapshot diffs"
-// problem that masks which variant actually drifted.
-AllVariants.parameters = { chromatic: { disableSnapshot: true } }
+// AllVariants is the single Chromatic snapshot for message tags: the per-variant
+// stories above are skipped (kept for local browsing + controls) and this grid is
+// the visual-regression guard — one snapshot covering every tag layout at once.
+AllVariants.parameters = { chromatic: { disableSnapshot: false } }