@linktr.ee/messaging-react 4.1.1-rc-1786774403 → 4.1.1-rc-1786776179

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.1.1-rc-1786774403",
+  "version": "4.1.1-rc-1786776179",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.4.0-rc-1786774403",
+    "@linktr.ee/messaging-core": "2.4.0-rc-1786776179",
     "@linktr.ee/messaging-taxonomy": "^0.10.0",
     "@phosphor-icons/react": "^2.1.10"
   },

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

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

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

@@ -8,7 +8,7 @@ type ComponentProps = React.ComponentProps<typeof AttachmentCard>
 const meta: Meta<ComponentProps> = {
   title: 'AttachmentCard',
   component: AttachmentCard,
-  parameters: { layout: 'centered', chromatic: { disableSnapshot: true } },
+  parameters: { layout: 'centered' },
   argTypes: {
     variant: { control: { type: 'inline-radio' }, options: ['light', 'dark'] },
   },

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', chromatic: { disableSnapshot: true } },
+  parameters: { layout: 'centered' },
   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', chromatic: { disableSnapshot: true } },
+  parameters: { layout: 'fullscreen' },
 }
 export default meta
 

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 } }

package/src/components/FaqList/FaqList.stories.tsx

@@ -22,6 +22,15 @@ const Template: StoryFn<ComponentProps> = (args) => {
   )
 }
 
+// Per-variant stories stay in Storybook for browsing/design review but are
+// individually covered by cells in AllStates — skip in Chromatic.
+const skipInChromatic = { chromatic: { disableSnapshot: true } }
+
+// Deterministic local avatar for the grid so a pravatar network flake can't
+// diff the whole AllStates 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 = {
   faqs: [
@@ -52,6 +61,7 @@ Default.args = {
   avatarName: 'Brie Parson',
   avatarImage: 'https://i.pravatar.cc/150?img=47',
 }
+Default.parameters = skipInChromatic
 
 export const WithoutHeader: StoryFn<ComponentProps> = Template.bind({})
 WithoutHeader.args = {
@@ -73,6 +83,7 @@ WithoutHeader.args = {
   ],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+WithoutHeader.parameters = skipInChromatic
 
 export const WithDisabledFaq: StoryFn<ComponentProps> = Template.bind({})
 WithDisabledFaq.args = {
@@ -101,6 +112,7 @@ WithDisabledFaq.args = {
   ],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+WithDisabledFaq.parameters = skipInChromatic
 
 export const WithLoading: StoryFn<ComponentProps> = Template.bind({})
 WithLoading.args = {
@@ -131,12 +143,14 @@ WithLoading.args = {
   loadingFaqId: '2',
   headerText: 'Tap to send a suggested question:',
 }
+WithLoading.parameters = skipInChromatic
 
 export const Empty: StoryFn<ComponentProps> = Template.bind({})
 Empty.args = {
   faqs: [],
   onFaqClick: (id) => console.log('FAQ clicked:', id),
 }
+Empty.parameters = skipInChromatic
 
 export const WithAvatarOnly: StoryFn<ComponentProps> = Template.bind({})
 WithAvatarOnly.args = {
@@ -160,6 +174,7 @@ WithAvatarOnly.args = {
   headerText: 'Frequently Asked Questions',
   avatarName: 'Account Owner',
 }
+WithAvatarOnly.parameters = skipInChromatic
 
 export const WithAvatarAndImage: StoryFn<ComponentProps> = Template.bind({})
 WithAvatarAndImage.args = {
@@ -184,3 +199,192 @@ WithAvatarAndImage.args = {
   avatarName: 'Sarah Johnson',
   avatarImage: 'https://i.pravatar.cc/150?img=28',
 }
+WithAvatarAndImage.parameters = skipInChromatic
+
+export const AllStates: StoryFn = () => {
+  const states: { label: string; props: ComponentProps }[] = [
+    {
+      label: 'Default (header + avatar + image)',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+          {
+            id: '3',
+            question: 'Brand collabs',
+            answer: 'Returns are accepted...',
+            enabled: true,
+            order: 3,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        headerText: 'Tap to send a suggested question by Brie Parson:',
+        avatarName: 'Brie Parson',
+        avatarImage: LOCAL_AVATAR,
+      },
+    },
+    {
+      label: 'Without header',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+      },
+    },
+    {
+      label: 'With avatar only',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        headerText: 'Frequently Asked Questions',
+        avatarName: 'Account Owner',
+      },
+    },
+    {
+      label: 'With avatar and image',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'How do I contact support?',
+            answer: 'You can reach us...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'What are your hours?',
+            answer: 'We are available...',
+            enabled: true,
+            order: 2,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        headerText: 'Questions for Sarah',
+        avatarName: 'Sarah Johnson',
+        avatarImage: LOCAL_AVATAR,
+      },
+    },
+    {
+      label: 'With disabled FAQ',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Enabled question',
+            answer: 'Answer...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Disabled question',
+            answer: 'Answer...',
+            enabled: false,
+            order: 2,
+          },
+          {
+            id: '3',
+            question: 'Another enabled',
+            answer: 'Answer...',
+            enabled: true,
+            order: 3,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+      },
+    },
+    {
+      label: 'With loading',
+      props: {
+        faqs: [
+          {
+            id: '1',
+            question: 'Book club slots',
+            answer: 'We ship worldwide...',
+            enabled: true,
+            order: 1,
+          },
+          {
+            id: '2',
+            question: 'Refunds',
+            answer: 'You can track...',
+            enabled: true,
+            order: 2,
+          },
+          {
+            id: '3',
+            question: 'Brand collabs',
+            answer: 'Returns are accepted...',
+            enabled: true,
+            order: 3,
+          },
+        ],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+        loadingFaqId: '2',
+        headerText: 'Tap to send a suggested question:',
+      },
+    },
+    {
+      label: 'Empty (renders nothing)',
+      props: {
+        faqs: [],
+        onFaqClick: (id) => console.log('FAQ clicked:', id),
+      },
+    },
+  ]
+
+  return (
+    <div className="flex flex-col gap-6 bg-white p-6">
+      {states.map(({ label, props }) => (
+        <div key={label} className="flex flex-col gap-1">
+          <span className="text-xs text-stone">{label}</span>
+          <div className="w-96">
+            <FaqList {...props} />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/FaqList/FaqListItem.stories.tsx

@@ -9,7 +9,6 @@ const meta: Meta<ComponentProps> = {
   component: FaqListItem,
   parameters: {
     layout: 'centered',
-    chromatic: { disableSnapshot: true },
   },
 }
 export default meta

package/src/components/IconButton/IconButton.stories.tsx

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

package/src/components/Loading/Loading.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<ComponentProps> = {
   component: Loading,
   parameters: {
     layout: 'centered',
-    chromatic: { disableSnapshot: true },
   },
 }
 export default meta

package/src/components/MessagingShell/ErrorState.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<ComponentProps> = {
   component: ErrorState,
   parameters: {
     layout: 'fullscreen',
-    chromatic: { disableSnapshot: true },
   },
 }
 

package/src/components/MessagingShell/LoadingState.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<ComponentProps> = {
   component: LoadingState,
   parameters: {
     layout: 'fullscreen',
-    chromatic: { disableSnapshot: true },
   },
 }
 

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -10,7 +10,6 @@ const meta: Meta<ComponentProps> = {
   component: SearchInput,
   parameters: {
     layout: 'centered',
-    chromatic: { disableSnapshot: true },
   },
 }
 export default meta

package/src/testing/createMockMessagingClient.stories.tsx

@@ -14,7 +14,7 @@ import { createMockMessagingClient } from './createMockMessagingClient'
  */
 const meta: Meta = {
   title: 'testing/createMockMessagingClient',
-  parameters: { layout: 'fullscreen', chromatic: { disableSnapshot: true } },
+  parameters: { layout: 'fullscreen' },
 }
 export default meta