@linktr.ee/messaging-react 3.3.4 → 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-DTZNltUC.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-BcHUpyyw.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.4",
+  "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

@@ -0,0 +1,226 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import AttachmentCard, { AttachmentThumbnail } from '.'
+
+type ComponentProps = React.ComponentProps<typeof AttachmentCard>
+
+const meta: Meta<ComponentProps> = {
+  title: 'AttachmentCard',
+  component: AttachmentCard,
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: { control: { type: 'inline-radio' }, options: ['light', 'dark'] },
+  },
+}
+export default meta
+
+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',
+  title: 'sunset.jpg',
+  mimeType: 'image/jpeg',
+  detail: '2.4 MB',
+  thumbnail: (
+    <AttachmentThumbnail
+      mimeType="image/jpeg"
+      sourceUrl={IMAGE_URL}
+      title="sunset"
+      variant="light"
+    />
+  ),
+}
+LightImage.parameters = skipInChromatic
+
+export const DarkImage: StoryFn<ComponentProps> = Template.bind({})
+DarkImage.args = {
+  variant: 'dark',
+  title: 'sunset.jpg',
+  mimeType: 'image/jpeg',
+  detail: '2.4 MB',
+  thumbnail: (
+    <AttachmentThumbnail
+      mimeType="image/jpeg"
+      sourceUrl={IMAGE_URL}
+      title="sunset"
+      variant="dark"
+    />
+  ),
+}
+DarkImage.parameters = skipInChromatic
+
+export const PdfPlaceholder: StoryFn<ComponentProps> = Template.bind({})
+PdfPlaceholder.args = {
+  variant: 'light',
+  title: 'invoice.pdf',
+  mimeType: 'application/pdf',
+  detail: '120 KB',
+  thumbnail: <AttachmentThumbnail mimeType="application/pdf" variant="light" />,
+}
+PdfPlaceholder.parameters = skipInChromatic
+
+export const AudioPosterOnly: StoryFn<ComponentProps> = Template.bind({})
+AudioPosterOnly.args = {
+  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"
+    />
+  ),
+}
+AudioPosterOnly.parameters = skipInChromatic
+
+export const UntitledDark: StoryFn<ComponentProps> = Template.bind({})
+UntitledDark.args = {
+  variant: 'dark',
+  mimeType: 'image/png',
+  detail: '1.1 MB',
+  thumbnail: <AttachmentThumbnail mimeType="image/png" variant="dark" />,
+}
+UntitledDark.parameters = skipInChromatic
+
+export const WithTopBadges: StoryFn<ComponentProps> = Template.bind({})
+WithTopBadges.args = {
+  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>
+  ),
+}
+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/ChannelActionsMenu/ChannelActionsMenu.test.tsx

@@ -19,15 +19,19 @@ const { getBlockedUsersMock, blockUserMock, unBlockUserMock } = vi.hoisted(
   })
 )
 
+// Stable service + context references — production MessagingProvider keeps
+// the service in useState and memoizes the context value, so the hook's
+// service-keyed lookup invalidation only fires on real swaps. Returning a
+// new object literal each call would re-trigger the lookup every render and
+// loop forever.
+const mockService = {
+  getBlockedUsers: getBlockedUsersMock,
+  blockUser: blockUserMock,
+  unBlockUser: unBlockUserMock,
+}
+const mockContext = { service: mockService, debug: false }
 vi.mock('../../providers/MessagingProvider', () => ({
-  useMessagingContext: () => ({
-    service: {
-      getBlockedUsers: getBlockedUsersMock,
-      blockUser: blockUserMock,
-      unBlockUser: unBlockUserMock,
-    },
-    debug: false,
-  }),
+  useMessagingContext: () => mockContext,
 }))
 
 vi.mock('../ActionButton', () => ({
@@ -229,6 +233,27 @@ describe('ChannelActionsMenu', () => {
     })
   })
 
+  it('recovers from a blocked-status lookup failure', async () => {
+    // Suppress the expected console.error for the rejected lookup so the
+    // test output stays clean.
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {})
+    getBlockedUsersMock.mockRejectedValueOnce(new Error('network down'))
+
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+    await openMenu()
+
+    // The lookup rejected, but the action recovers — Block becomes actionable
+    // rather than staying stuck in the disabled spinner state.
+    await waitFor(() => {
+      const block = screen.getByText('Block').closest('button')
+      expect(block).not.toBeDisabled()
+    })
+
+    consoleErrorSpy.mockRestore()
+  })
+
   it('calls onReportParticipantClick and opens the report page', async () => {
     const onReportParticipantClick = vi.fn()
     const windowOpenSpy = vi

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) => (