@linktr.ee/messaging-react 3.18.0-rc-1785370958 → 3.18.0

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BiPvv2eN.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.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.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.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BQ4mQDo2.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.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.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.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -697,6 +697,11 @@ export declare interface LinkAttachmentBaseProps {
      * text bars and ignores `accentColor` (there is no image yet). `'failed'`
      * renders the fallback chin with whatever text is available. Defaults to
      * `'ready'`.
+     *
+     * `'loading'` outranks the hero shape that `mimeType` + `sourceUrl` would
+     * otherwise select: a card mid-scrape does not yet know what the asset is, so
+     * it renders the skeleton rather than a live `<audio>` / `<video>` player
+     * beside the skeleton's own text bars.
      */
     status?: LinkAttachmentStatus;
 }

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.18.0-rc-1785370958",
+  "version": "3.18.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1785370958",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -261,6 +261,41 @@ describe('LinkAttachment accent chin (MES-1349)', () => {
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
   })
 
+  it('lets a loading status outrank the audio hero on all three cards', () => {
+    // `status` and `mimeType`/`sourceUrl` are independent public props, and a
+    // caller can set both. Before this, `CardThumbnail`'s audio fast path ran
+    // ahead of the loading branch, so Sent/Received mounted a live `<audio>`
+    // player beside `CardBody`'s skeleton bars and Composer's own audio path
+    // dropped the skeleton and its `aria-busy` region altogether.
+    const LOADING_AUDIO = {
+      mimeType: 'audio/mpeg',
+      sourceUrl: 'https://cdn.example.com/clip.mp3',
+      status: 'loading' as const,
+    }
+
+    for (const card of [
+      <LinkAttachment.Sent key="s" {...LOADING_AUDIO} />,
+      <LinkAttachment.Received key="r" {...LOADING_AUDIO} />,
+      <LinkAttachment.Composer
+        key="c"
+        {...LOADING_AUDIO}
+        onDismiss={() => {}}
+      />,
+    ]) {
+      const { container, unmount } = renderWithProviders(card)
+
+      expect(container.querySelector('audio')).toBeNull()
+      const busy = screen.getByLabelText('Loading link preview')
+      expect(busy).toHaveAttribute('aria-busy', 'true')
+      // The skeleton keeps its 250px box: the audio shell is intrinsic-height,
+      // and a `flex-1` hero inside it would collapse to zero.
+      expect(busy.className).toContain('h-[250px]')
+      expect(container.querySelectorAll('.animate-pulse')).toHaveLength(3)
+
+      unmount()
+    }
+  })
+
   it('paints the bubble tail in the accent for the last card in a run only', async () => {
     const { unmount } = renderWithProviders(
       <LinkAttachment.Sent

package/src/components/LinkAttachment/components/Composer/Card.tsx

@@ -104,8 +104,11 @@ const ComposerCard: React.FC<ComposerCardProps> = ({
 
   // Audio cards collapse to just the native player — render the dismiss
   // button as an inline sibling so it always has its own space and never
-  // overlaps the audio control's volume/menu buttons.
-  if (isAudio) {
+  // overlaps the audio control's volume/menu buttons. Skipped while loading:
+  // this path has no `CardBody` and no `busy`, so taking it during a scrape
+  // would drop the skeleton and its `aria-busy` region entirely, and we do not
+  // yet know the asset is audio anyway.
+  if (isAudio && !chin.isLoading) {
     return (
       <CardShell variant="dark" bgClassName={AUDIO_BG_CLASS}>
         <div className="flex items-center gap-2 pr-3">

package/src/components/LinkAttachment/components/Received/Card.tsx

@@ -73,9 +73,13 @@ const ReceivedCard: React.FC<ReceivedCardProps> = ({
       ? normalizedUrl
       : undefined
   const shellOnClick = cta == null && !isPlayingMedia ? onClick : undefined
-  const audioBg = isPlayableAudio(mimeType, sourceUrl)
-    ? AUDIO_BG_CLASS
-    : undefined
+  // A loading card is not yet an audio card: the scrape that would tell us has
+  // not returned, so it keeps the ordinary 250px skeleton rather than the
+  // intrinsic-height audio shell (whose `flex-1` hero would collapse to 0).
+  const audioBg =
+    status !== 'loading' && isPlayableAudio(mimeType, sourceUrl)
+      ? AUDIO_BG_CLASS
+      : undefined
 
   // When a CTA is set the shell isn't interactive — the CTA owns the
   // click target. Forward the card-level `onClick` to the CTA so

package/src/components/LinkAttachment/components/Sent/Card.tsx

@@ -76,7 +76,10 @@ const SentCard: React.FC<SentCardProps> = ({
   const shellOnClick =
     cta == null && !isPlayingMedia && shellHref != null ? onClick : undefined
 
-  const isAudio = isPlayableAudio(mimeType, sourceUrl)
+  // A loading card is not yet an audio card: the scrape that would tell us has
+  // not returned, so it keeps the ordinary 250px skeleton rather than the
+  // intrinsic-height audio shell (whose `flex-1` hero would collapse to 0).
+  const isAudio = status !== 'loading' && isPlayableAudio(mimeType, sourceUrl)
   const chin = useChinPalette({
     variant: 'dark',
     accentColor,

package/src/components/LinkAttachment/components/_shared/CardThumbnail.tsx

@@ -95,7 +95,11 @@ const CardThumbnail: React.FC<CardThumbnailProps> = ({
   const isPlayableVideo = !!sourceUrl && sourceType === 'video'
   const optimizedThumbnailUrl = optimizeMessagingAttachmentUrl(thumbnailUrl)
 
-  if (isPlayableAudio(mimeType, sourceUrl)) {
+  // `!isLoading` first, deliberately: while the scrape is in flight we do not
+  // yet know what the asset is, so honouring a `mimeType` the caller happens to
+  // have set already would mount a live player next to `CardBody`'s skeleton
+  // bars. The loading branch below owns every hero shape (MES-1349).
+  if (!isLoading && isPlayableAudio(mimeType, sourceUrl)) {
     // Audio collapses the hero entirely — the native player sits inside
     // the card chrome with a bit of padding so the card background
     // (typically `bg-[#F2F3F4]`) is visible around it.

package/src/components/LinkAttachment/types.ts

@@ -95,6 +95,11 @@ export interface LinkAttachmentBaseProps {
    * text bars and ignores `accentColor` (there is no image yet). `'failed'`
    * renders the fallback chin with whatever text is available. Defaults to
    * `'ready'`.
+   *
+   * `'loading'` outranks the hero shape that `mimeType` + `sourceUrl` would
+   * otherwise select: a card mid-scrape does not yet know what the asset is, so
+   * it renders the skeleton rather than a live `<audio>` / `<video>` player
+   * beside the skeleton's own text bars.
    */
   status?: LinkAttachmentStatus
 }