@linktr.ee/messaging-react 2.3.4-rc-1779841404 → 2.4.0

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -162,7 +162,7 @@ export declare const ChannelView: default_2.NamedExoticComponent<ChannelViewProp
  * Props that MessagingShell passes through to ChannelView.
  * ChannelViewProps is the source of truth for these props.
  */
-declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'sendButton'>;
+declare type ChannelViewPassthroughProps = Pick<ChannelViewProps, 'renderMessageInputActions' | 'renderConversationFooter' | 'CustomChannelEmptyState' | 'onDeleteConversationClick' | 'onBlockParticipantClick' | 'onReportParticipantClick' | 'dmAgentEnabled' | 'messageMetadata' | 'onMessageSent' | 'showStarButton' | 'chatbotVotingEnabled' | 'viewerLanguage' | 'renderChannelBanner' | 'customProfileContent' | 'customChannelActions' | 'renderMessage' | 'onMessageLinkClick' | 'sendButton'>;
 
 /**
  * ChannelView component props
@@ -279,6 +279,15 @@ export declare interface ChannelViewProps {
      * )}
      */
     renderMessage?: (messageNode: React.ReactElement, message: LocalMessage) => React.ReactNode;
+    /**
+     * Fired when a user clicks any link inside the channel view (message
+     * bubbles, attachment cards, etc.). Receives the clicked URL. Fires
+     * alongside the native navigation, not in place of it.
+     *
+     * @example
+     * onMessageLinkClick={(url) => trackChannelLinkClicked(url)}
+     */
+    onMessageLinkClick?: MessageLinkClickHandler;
     /**
      * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
      * the send control: `Channel` merges this into `ComponentContext` and an
@@ -1043,6 +1052,13 @@ export declare type MessageAttachmentVideoSentProps = VideoAttachmentSharedProps
 
 declare type MessageCustomType = 'MESSAGE_TIP' | 'MESSAGE_PAID' | 'MESSAGE_CHATBOT' | 'MESSAGE_ATTACHMENT' | AgeSafetySystemType | DmAgentSystemType;
 
+/**
+ * Callback invoked when a user clicks a link inside the channel view.
+ * Receives the clicked URL. Fires alongside the native navigation,
+ * not in place of it.
+ */
+export declare type MessageLinkClickHandler = (url: string) => void;
+
 export declare interface MessageMetadata {
     custom_type?: MessageCustomType;
     listing_id?: string;

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

package/package.json

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

package/src/components/ChannelView.test.tsx

@@ -356,4 +356,36 @@ describe('ChannelView', () => {
 
     expect(screen.getAllByText('Custom Label').length).toBeGreaterThan(0)
   })
+
+  it('fires onMessageLinkClick with the href when a link inside the view is clicked', () => {
+    const handler = vi.fn()
+    const { container } = renderWithProviders(
+      <ChannelView channel={createChannel()} onMessageLinkClick={handler} />
+    )
+
+    const anchor = document.createElement('a')
+    anchor.href = 'https://example.com/clicked'
+    anchor.addEventListener('click', (e) => e.preventDefault())
+    container
+      .querySelector('.messaging-channel-view')
+      ?.appendChild(anchor)
+    anchor.click()
+
+    expect(handler).toHaveBeenCalledOnce()
+    expect(handler).toHaveBeenCalledWith('https://example.com/clicked')
+  })
+
+  it('does not throw when a link is clicked without onMessageLinkClick set', () => {
+    const { container } = renderWithProviders(
+      <ChannelView channel={createChannel()} />
+    )
+
+    const anchor = document.createElement('a')
+    anchor.href = 'https://example.com'
+    anchor.addEventListener('click', (e) => e.preventDefault())
+    container
+      .querySelector('.messaging-channel-view')
+      ?.appendChild(anchor)
+    expect(() => anchor.click()).not.toThrow()
+  })
 })

package/src/components/ChannelView.tsx

@@ -6,7 +6,7 @@ import {
   StarIcon,
 } from '@phosphor-icons/react'
 import classNames from 'classnames'
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
 import {
   Channel,
@@ -476,6 +476,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     customProfileContent,
     customChannelActions,
     renderMessage,
+    onMessageLinkClick,
     sendButton,
     viewerLanguage,
     getParticipantDisplayName: getParticipantDisplayNameProp,
@@ -531,8 +532,23 @@ export const ChannelView = React.memo<ChannelViewProps>(
       [channel, dmAgentEnabled, messageMetadata, onMessageSent]
     )
 
+    const containerRef = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+      if (!onMessageLinkClick) return
+      const container = containerRef.current
+      if (!container) return
+      const handler = (event: MouseEvent) => {
+        const anchor = (event.target as HTMLElement | null)?.closest('a[href]')
+        const href = anchor?.getAttribute('href')
+        if (href) onMessageLinkClick(href)
+      }
+      container.addEventListener('click', handler)
+      return () => container.removeEventListener('click', handler)
+    }, [onMessageLinkClick])
+
     return (
       <div
+        ref={containerRef}
         className={classNames(
           'messaging-channel-view h-full flex flex-col',
           className

package/src/components/MessagingShell/index.tsx

@@ -41,6 +41,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customProfileContent,
   customChannelActions,
   renderMessage,
+  onMessageLinkClick,
   sendButton,
 }) => {
   const {
@@ -421,6 +422,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
                 customProfileContent={customProfileContent}
                 customChannelActions={customChannelActions}
                 renderMessage={renderMessage}
+                onMessageLinkClick={onMessageLinkClick}
                 sendButton={sendButton}
               />
             </div>

package/src/index.ts

@@ -53,6 +53,7 @@ export type {
   ChannelViewProps,
   MessagingProviderProps,
   MessagingCapabilities,
+  MessageLinkClickHandler,
   Participant,
   LockedAttachmentSource,
 } from './types'

package/src/types.ts

@@ -20,6 +20,13 @@ import type { MessageMetadata } from './stream-custom-data'
 
 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,
+ * not in place of it.
+ */
+export type MessageLinkClickHandler = (url: string) => void
+
 /**
  * Generic participant interface for different host environments
  */
@@ -232,6 +239,16 @@ export interface ChannelViewProps {
     message: LocalMessage
   ) => React.ReactNode
 
+  /**
+   * Fired when a user clicks any link inside the channel view (message
+   * bubbles, attachment cards, etc.). Receives the clicked URL. Fires
+   * alongside the native navigation, not in place of it.
+   *
+   * @example
+   * onMessageLinkClick={(url) => trackChannelLinkClicked(url)}
+   */
+  onMessageLinkClick?: MessageLinkClickHandler
+
   /**
    * Passed to Stream `Channel` as `SendButton`. Required for hosts that replace
    * the send control: `Channel` merges this into `ComponentContext` and an
@@ -267,6 +284,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'customProfileContent'
   | 'customChannelActions'
   | 'renderMessage'
+  | 'onMessageLinkClick'
   | 'sendButton'
 >