@linktr.ee/messaging-react 2.4.0 → 2.4.2

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BX305h7q.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-DYLdOjSj.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.d.ts

@@ -610,6 +610,18 @@ export declare interface LinkAttachmentReceivedCardProps extends LinkAttachmentB
 }
 
 export declare interface LinkAttachmentSentCardProps extends LinkAttachmentBaseProps {
+    /**
+     * Fired when the sender activates their own posted card. Mirrors the
+     * `Received` variant so analytics fires symmetrically on both sides
+     * of the conversation. Behavior depends on configuration:
+     *   - **Link app with a URL**: the card chrome is an `<a target="_blank">`
+     *     opening `url`; `onClick` fires alongside the navigation.
+     *   - **Link app with a CTA**: the CTA owns navigation; `onClick` is
+     *     ignored (the CTA's own `onClick` is the analytics hook).
+     *   - **Video / audio link previews**: the shell stays non-interactive
+     *     so the native media controls remain operable; `onClick` is ignored.
+     */
+    onClick?: () => void;
 }
 
 export declare const LockedAttachment: {
@@ -1054,10 +1066,13 @@ declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATB
 
 /**
  * Callback invoked when a user clicks a link inside the channel view.
- * Receives the clicked URL. Fires alongside the native navigation,
+ * Receives the clicked URL and, when resolvable, the message the link
+ * was rendered in (so consumers can filter on sender or metadata).
+ * `message` is `undefined` when the click happens on a link outside a
+ * resolvable message wrapper. Fires alongside the native navigation,
  * not in place of it.
  */
-export declare type MessageLinkClickHandler = (url: string) => void;
+export declare type MessageLinkClickHandler = (url: string, message: LocalMessage | undefined) => void;
 
 export declare interface MessageMetadata {
     custom_type?: MessageCustomType;

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-DVh2uNBI.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-C541s_4h.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

package/src/components/ChannelView.test.tsx

@@ -357,7 +357,7 @@ describe('ChannelView', () => {
     expect(screen.getAllByText('Custom Label').length).toBeGreaterThan(0)
   })
 
-  it('fires onMessageLinkClick with the href when a link inside the view is clicked', () => {
+  it('fires onMessageLinkClick with the href and undefined message when the link is not inside a message wrapper', () => {
     const handler = vi.fn()
     const { container } = renderWithProviders(
       <ChannelView channel={createChannel()} onMessageLinkClick={handler} />
@@ -372,7 +372,63 @@ describe('ChannelView', () => {
     anchor.click()
 
     expect(handler).toHaveBeenCalledOnce()
-    expect(handler).toHaveBeenCalledWith('https://example.com/clicked')
+    expect(handler).toHaveBeenCalledWith(
+      'https://example.com/clicked',
+      undefined
+    )
+  })
+
+  it('resolves the surrounding message from channel state and passes it to onMessageLinkClick', () => {
+    const handler = vi.fn()
+    const message = {
+      id: 'message-42',
+      text: 'check this out https://example.com/clicked',
+      metadata: { custom_type: 'MESSAGE_CHATBOT' },
+    } as unknown as ReturnType<
+      Channel['state']['formatMessage']
+    >
+    const channel = createChannel()
+    ;(
+      channel.state as unknown as { messages: typeof message[] }
+    ).messages = [message]
+
+    const { container } = renderWithProviders(
+      <ChannelView channel={channel} onMessageLinkClick={handler} />
+    )
+
+    const wrapper = document.createElement('div')
+    wrapper.setAttribute('data-message-id', 'message-42')
+    const anchor = document.createElement('a')
+    anchor.href = 'https://example.com/clicked'
+    anchor.addEventListener('click', (e) => e.preventDefault())
+    wrapper.appendChild(anchor)
+    container.querySelector('.messaging-channel-view')?.appendChild(wrapper)
+    anchor.click()
+
+    expect(handler).toHaveBeenCalledOnce()
+    expect(handler).toHaveBeenCalledWith('https://example.com/clicked', message)
+  })
+
+  it('passes undefined when the wrapper data-message-id does not match any message in state', () => {
+    const handler = vi.fn()
+    const { container } = renderWithProviders(
+      <ChannelView channel={createChannel()} onMessageLinkClick={handler} />
+    )
+
+    const wrapper = document.createElement('div')
+    wrapper.setAttribute('data-message-id', 'unknown-id')
+    const anchor = document.createElement('a')
+    anchor.href = 'https://example.com/clicked'
+    anchor.addEventListener('click', (e) => e.preventDefault())
+    wrapper.appendChild(anchor)
+    container.querySelector('.messaging-channel-view')?.appendChild(wrapper)
+    anchor.click()
+
+    expect(handler).toHaveBeenCalledOnce()
+    expect(handler).toHaveBeenCalledWith(
+      'https://example.com/clicked',
+      undefined
+    )
   })
 
   it('does not throw when a link is clicked without onMessageLinkClick set', () => {

package/src/components/ChannelView.tsx

@@ -538,13 +538,20 @@ export const ChannelView = React.memo<ChannelViewProps>(
       const container = containerRef.current
       if (!container) return
       const handler = (event: MouseEvent) => {
-        const anchor = (event.target as HTMLElement | null)?.closest('a[href]')
+        const target = event.target as HTMLElement | null
+        const anchor = target?.closest('a[href]')
         const href = anchor?.getAttribute('href')
-        if (href) onMessageLinkClick(href)
+        if (!href) return
+        const messageWrapper = anchor?.closest<HTMLElement>('[data-message-id]')
+        const messageId = messageWrapper?.getAttribute('data-message-id')
+        const message = messageId
+          ? channel.state.messages.find((m) => m.id === messageId)
+          : undefined
+        onMessageLinkClick(href, message)
       }
       container.addEventListener('click', handler)
       return () => container.removeEventListener('click', handler)
-    }, [onMessageLinkClick])
+    }, [onMessageLinkClick, channel])
 
     return (
       <div

package/src/components/CustomMessage/index.tsx

@@ -194,7 +194,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           open={isBounceDialogOpen}
         />
       )}
-      <div className={rootClassName} key={message.id}>
+      <div className={rootClassName} key={message.id} data-message-id={message.id}>
         {PinIndicator && <PinIndicator />}
         {!!reminder && <ReminderNotification reminder={reminder} />}
         {message.user && (

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

@@ -54,16 +54,50 @@ describe('LinkAttachment.Received (link previews)', () => {
 })
 
 describe('LinkAttachment.Sent', () => {
-  it('renders the dark variant non-interactively', async () => {
+  it('renders the dark variant as an external link when url is set', async () => {
+    const handleClick = vi.fn()
     renderWithProviders(
       <LinkAttachment.Sent
         title="My Playlist"
         description="A handpicked workout mix"
         url="tr.ee/briemix"
+        onClick={handleClick}
+      />
+    )
+    const link = await screen.findByRole('link', { name: /My Playlist/i })
+    expect(link.tagName).toBe('A')
+    expect(link.getAttribute('href')).toBe('https://tr.ee/briemix')
+    expect(link.getAttribute('target')).toBe('_blank')
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer')
+    fireEvent.click(link)
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('stays non-interactive when no url is set', async () => {
+    renderWithProviders(
+      <LinkAttachment.Sent
+        title="My Playlist"
+        description="A handpicked workout mix"
       />
     )
     expect(await screen.findByText('My Playlist')).toBeInTheDocument()
     expect(screen.queryByRole('button')).toBeNull()
     expect(screen.queryByRole('link')).toBeNull()
   })
+
+  it('lets the CTA own navigation when one is set (shell stays non-interactive)', async () => {
+    renderWithProviders(
+      <LinkAttachment.Sent
+        title="FAQ"
+        description="Get answers"
+        url="tr.ee/briemix"
+        cta={{ label: 'View FAQs', href: 'tr.ee/faq' }}
+      />
+    )
+    expect(await screen.findByText('FAQ')).toBeInTheDocument()
+    const links = screen.getAllByRole('link')
+    expect(links).toHaveLength(1)
+    expect(links[0].getAttribute('href')).toBe('https://tr.ee/faq')
+    expect(links[0]).toHaveTextContent('View FAQs')
+  })
 })

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

@@ -6,14 +6,32 @@ import CardShell from '../_shared/CardShell'
 import CardThumbnail, {
   AUDIO_BG_CLASS,
   isPlayableAudio,
+  isPlayableMedia,
 } from '../_shared/CardThumbnail'
+import { normalizeExternalHref } from '../_shared/normalizeExternalHref'
 
-export interface SentCardProps extends LinkAttachmentBaseProps {}
+export interface SentCardProps extends LinkAttachmentBaseProps {
+  /**
+   * Fired when the sender activates their own posted card. Mirrors the
+   * `Received` variant so analytics fires symmetrically on both sides
+   * of the conversation. Behavior depends on configuration:
+   *   - **Link app with a URL**: the card chrome is an `<a target="_blank">`
+   *     opening `url`; `onClick` fires alongside the navigation.
+   *   - **Link app with a CTA**: the CTA owns navigation; `onClick` is
+   *     ignored (the CTA's own `onClick` is the analytics hook).
+   *   - **Video / audio link previews**: the shell stays non-interactive
+   *     so the native media controls remain operable; `onClick` is ignored.
+   */
+  onClick?: () => void
+}
 
 /**
  * The card the sender sees in chat after a link attachment has been posted.
  * Matches the Sent column of the messaging design system in Figma — same
  * dark chrome as the Composer card minus the dismiss / edit affordances.
+ *
+ * The sender's own copy is clickable when a `url` is set so they can open
+ * the link they just sent — symmetric with `LinkAttachment.Received`.
  */
 const SentCard: React.FC<SentCardProps> = ({
   title,
@@ -26,32 +44,55 @@ const SentCard: React.FC<SentCardProps> = ({
   layout = 'featured',
   appIcon,
   cta,
-}) => (
-  <CardShell
-    variant="dark"
-    bgClassName={
-      isPlayableAudio(mimeType, sourceUrl) ? AUDIO_BG_CLASS : undefined
-    }
-  >
-    {layout === 'featured' && (
-      <CardThumbnail
+  onClick,
+}) => {
+  // Video / audio link previews wrap the native media element — render a
+  // plain non-interactive shell and let the media controls own clicks so
+  // taps on play/pause/scrubber don't fire the outer card action. Same
+  // rationale as `ReceivedCard`.
+  const isPlayingMedia = isPlayableMedia(mimeType, sourceUrl)
+  // Normalize the URL so a bare hostname like `tr.ee/briemix` is treated
+  // as an external link instead of resolving against the current host.
+  // Returns `undefined` for empty / whitespace-only values, so those fall
+  // through to a non-navigational shell instead of producing an empty
+  // `href` on the anchor.
+  const normalizedUrl = normalizeExternalHref(url)
+  const shellHref =
+    cta == null && normalizedUrl != null && !isPlayingMedia
+      ? normalizedUrl
+      : undefined
+  const shellOnClick =
+    cta == null && !isPlayingMedia && shellHref != null ? onClick : undefined
+
+  return (
+    <CardShell
+      variant="dark"
+      href={shellHref}
+      onClick={shellOnClick}
+      bgClassName={
+        isPlayableAudio(mimeType, sourceUrl) ? AUDIO_BG_CLASS : undefined
+      }
+    >
+      {layout === 'featured' && (
+        <CardThumbnail
+          variant="dark"
+          thumbnailUrl={thumbnailUrl}
+          sourceUrl={sourceUrl}
+          title={title}
+          mimeType={mimeType}
+        />
+      )}
+      <CardBody
         variant="dark"
-        thumbnailUrl={thumbnailUrl}
-        sourceUrl={sourceUrl}
         title={title}
-        mimeType={mimeType}
+        placeholderTitle={placeholderTitle}
+        description={description}
+        url={url}
+        appIcon={appIcon}
+        cta={cta}
       />
-    )}
-    <CardBody
-      variant="dark"
-      title={title}
-      placeholderTitle={placeholderTitle}
-      description={description}
-      url={url}
-      appIcon={appIcon}
-      cta={cta}
-    />
-  </CardShell>
-)
+    </CardShell>
+  )
+}
 
 export default SentCard

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

@@ -7,9 +7,10 @@ export interface CardShellProps {
   variant: LinkAttachmentVariant
   children: React.ReactNode
   /**
-   * When provided, the entire card chrome is rendered as an anchor (used by
-   * the Received card to open the link target on click). Falls back to a
-   * `<div>` when omitted so Composer / Sent cards stay non-navigational.
+   * When provided, the entire card chrome is rendered as an anchor (used
+   * by Sent / Received cards to open the link target on click). Falls
+   * back to a `<div>` when omitted so Composer cards stay
+   * non-navigational while drafting.
    */
   href?: string
   /**

package/src/types.ts

@@ -22,10 +22,16 @@ export type { LockedAttachmentSource } from './components/LockedAttachment'
 
 /**
  * Callback invoked when a user clicks a link inside the channel view.
- * Receives the clicked URL. Fires alongside the native navigation,
+ * Receives the clicked URL and, when resolvable, the message the link
+ * was rendered in (so consumers can filter on sender or metadata).
+ * `message` is `undefined` when the click happens on a link outside a
+ * resolvable message wrapper. Fires alongside the native navigation,
  * not in place of it.
  */
-export type MessageLinkClickHandler = (url: string) => void
+export type MessageLinkClickHandler = (
+  url: string,
+  message: LocalMessage | undefined
+) => void
 
 /**
  * Generic participant interface for different host environments