@linktr.ee/messaging-react 2.3.0-rc-1779427772 → 2.3.0

package/dist/index.cjs

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

@@ -428,7 +428,7 @@ declare interface ImageAttachmentSharedProps extends MessageAttachmentBaseProps
     /** Single image — convenience for the most common case. */
     src?: string;
     alt?: string;
-    /** Filename surfaced in the viewer toolbar + download default name. */
+    /** Filename used as the viewer dialog's accessible name. */
     filename?: string;
     /**
      * Stacked images. Takes precedence over `src` when set. Renders a
@@ -703,13 +703,15 @@ declare type MediaPreloadMode = 'none' | 'metadata' | 'auto';
  *
  *   - Image / Video render a 1 / 2 / 3 / 4-tile grid (5+ collapse
  *     into a `+N` overflow tile). Activating any tile opens the
- *     built-in `ImageViewer` / `VideoViewer` at that index, with
- *     arrow-key navigation between siblings.
+ *     built-in `ImageViewer` / `VideoViewer` at that index; when
+ *     `items.length > 1` the lightbox becomes a carousel (prev / next
+ *     chrome, ArrowLeft / ArrowRight, current / total counter) so the
+ *     user can browse siblings without closing the modal.
  *   - Pdf / Audio / File render their compact rows / players in a
  *     vertical stack with an 8px gap between rows. Each row keeps
- *     its own activation target — Pdf opens the viewer at that
- *     index, Audio gets its own native player, and File downloads
- *     the asset for that row.
+ *     its own activation target — Pdf opens the carousel-aware
+ *     `PdfViewer` at that index, Audio gets its own native player,
+ *     and File downloads the asset for that row.
  *
  * The Composer surface accepts only a single attachment at a time,
  * so its props omit `items` / `text`.
@@ -720,10 +722,17 @@ declare type MediaPreloadMode = 'none' | 'metadata' | 'auto';
  * message. Sent / Received wrap the media in the shared bubble chrome.
  *
  * Image / Video / Pdf are interactive in every state (Composer, Sent,
- * Received) — clicks open the corresponding native viewer with built-in
- * download. File rows download the asset directly. Audio renders a
- * native `<audio controls>` player which exposes its own download in
- * the kebab menu, so we don't render a separate Download affordance.
+ * Received) — clicks open the corresponding native lightbox `<dialog>`,
+ * which centers the media at reasonable max dimensions (Escape and
+ * backdrop click also dismiss). The Image viewer adds an explicit
+ * download button to the chrome; the Video viewer relies on the
+ * native `<video controls>` download menu, and the Pdf viewer
+ * inherits the browser's built-in PDF download. Sibling-row Download
+ * buttons on Pdf / File and the native `<audio>` controls expose
+ * downloads outside the viewer too. The lightbox chrome is styled
+ * with plain CSS (`.mes-media-viewer*`) so the package's shipped
+ * stylesheet is enough to render the viewer correctly without a
+ * Tailwind dependency in the consumer.
  *
  * # Lazy-loading defaults
  *
@@ -976,7 +985,7 @@ export declare interface MessageAttachmentPdfComposerProps extends ComposerExtra
 /** A single PDF inside a Pdf attachment (single or stacked). */
 export declare interface MessageAttachmentPdfItem {
     src: string;
-    /** Filename — drives the title + the meta line + the viewer toolbar. */
+    /** Filename — drives the row title + the meta line + the viewer dialog's accessible name. */
     filename?: string;
     /** File size in bytes — formatted into the `EXT · SIZE` meta line. */
     fileSize?: number;
@@ -1190,7 +1199,7 @@ declare type PaymentStatus = 'pending' | 'paid' | 'failed' | 'refunded';
 declare interface PdfAttachmentSharedProps extends MessageAttachmentBaseProps {
     /** Single PDF — convenience for the most common case. */
     src?: string;
-    /** Filename — drives the title + the meta line + the viewer toolbar. */
+    /** Filename — drives the row title + the meta line + the viewer dialog's accessible name. */
     filename?: string;
     /** File size in bytes — formatted into the `EXT · SIZE` meta line. */
     fileSize?: number;
@@ -1295,7 +1304,7 @@ declare interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps
     poster?: string;
     /** MIME type hint — typed onto the inline `<source>` element. */
     mimeType?: string;
-    /** Filename surfaced in the viewer toolbar + download default name. */
+    /** Filename used as the viewer dialog's accessible name. */
     filename?: string;
     /**
      * Stacked videos. Takes precedence over `src` when set. Renders a

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

package/package.json

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

package/src/components/ChannelView.tsx

@@ -26,7 +26,6 @@ import { Avatar } from './Avatar'
 import { ChannelInfoDialog } from './ChannelInfoDialog'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
-import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
 import { CustomMessageInput } from './CustomMessageInput'
 import { CustomSystemMessage } from './CustomSystemMessage'
 import CustomTypingIndicator from './CustomTypingIndicator'
@@ -36,7 +35,6 @@ import { LoadingState } from './MessagingShell/LoadingState'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
-
 const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
 
 /**
@@ -376,12 +374,7 @@ const ChannelViewInner: React.FC<{
 
   return (
     <>
-      <WithComponents
-        overrides={{
-          Message: MessageOverride,
-          MessageActions: CustomMessageActions,
-        }}
-      >
+      <WithComponents overrides={{ Message: MessageOverride }}>
         <Window>
           {/* Custom Channel Header */}
           <div key="lt-channel-header" className="p-4">
@@ -411,6 +404,7 @@ const ChannelViewInner: React.FC<{
             <MessageList
               hideDeletedMessages
               hideNewMessageSeparator={false}
+              messageActions={undefined}
             />
           </div>
 

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -1,7 +1,6 @@
 import '../../stream-custom-data'
 
 import type { Meta, StoryFn } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
 import React, { useEffect } from 'react'
 import {
   Channel as ChannelType,
@@ -14,7 +13,6 @@ import {
   MessageList,
   MessageUIComponentProps,
   Window,
-  WithComponents,
 } from 'stream-chat-react'
 
 import {
@@ -24,8 +22,6 @@ import {
 } from '../../stories/decorators/storyUser'
 import CustomTypingIndicator from '../CustomTypingIndicator'
 
-import { CustomMessageActions } from './CustomMessageActions'
-
 import { CustomMessage } from './index'
 
 const meta: Meta = {
@@ -62,8 +58,6 @@ const createMockChannel = async (
 
   const channelData = {
     members: [storyUsers.creator.id, storyUsers.visitor.id],
-    // Required for useUserRole: canDelete needs delete-own-message, canFlag needs flag-message
-    own_capabilities: ['delete-own-message', 'flag-message'],
   }
 
   const channel = client.channel(
@@ -358,8 +352,6 @@ LockedAttachment.args = {
   ],
 }
 
-
-
 export const ChatbotVariants: StoryFn<TemplateProps> = Template.bind({})
 ChatbotVariants.args = {
   messages: [
@@ -453,135 +445,3 @@ WithTypingIndicatorComparison.parameters = {
     },
   },
 }
-
-// ─── Message Actions ──────────────────────────────────────────────────────────
-
-/**
- * Same as TemplateInner but wraps with WithComponents so CustomMessageActions
- * is wired in — matching what ChannelView does in production.
- */
-const WithActionsTemplateInner: React.FC<{
-  currentUser: StoryUser
-  messages: TemplateProps['messages']
-}> = ({ currentUser, messages }) => {
-  const [client] = React.useState(() => {
-    const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
-    c.userID = currentUser.id
-    c.user = currentUser
-    return c
-  })
-
-  const [channel, setChannel] = React.useState<ChannelType | null>(null)
-
-  useEffect(() => {
-    createMockChannel(client, messages).then(setChannel)
-  }, [client, messages])
-
-  const MessageComponent = React.useMemo(() => {
-    return function CustomMessageComponent(props: MessageUIComponentProps) {
-      return <CustomMessage {...props} />
-    }
-  }, [])
-
-  if (!channel) {
-    return <div className="p-4">Loading...</div>
-  }
-
-  return (
-    <Chat client={client}>
-      <div className="h-screen w-full bg-white">
-        <Channel channel={channel} TypingIndicator={CustomTypingIndicator}>
-          <WithComponents
-            overrides={{
-              Message: MessageComponent,
-              MessageActions: CustomMessageActions,
-            }}
-          >
-            <Window>
-              <MessageList />
-            </Window>
-          </WithComponents>
-        </Channel>
-      </div>
-    </Chat>
-  )
-}
-
-const WithActionsTemplate: StoryFn<TemplateProps> = ({
-  currentUser = storyUsers.creator,
-  messages,
-}) => (
-  <WithActionsTemplateInner
-    key={currentUser.id}
-    currentUser={currentUser}
-    messages={messages}
-  />
-)
-
-export const DeleteOwnMessage: StoryFn<TemplateProps> =
-  WithActionsTemplate.bind({})
-DeleteOwnMessage.args = {
-  currentUser: storyUsers.creator,
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Hey, how are you?',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      text: 'Doing great — hover me to delete!',
-      user: storyUsers.creator,
-    },
-  ],
-}
-DeleteOwnMessage.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const ownBubble = await canvas.findByText('Doing great — hover me to delete!')
-  await userEvent.hover(ownBubble)
-  const toggle = await canvas.findByTestId('message-actions-toggle-button')
-  await userEvent.click(toggle)
-  await expect(canvas.getByText('Delete')).toBeInTheDocument()
-}
-DeleteOwnMessage.parameters = {
-  docs: {
-    description: {
-      story:
-        'Current user hovers their own message. Only "Delete" is shown — "Report" is hidden.',
-    },
-  },
-}
-
-export const ReportOthersMessage: StoryFn<TemplateProps> =
-  WithActionsTemplate.bind({})
-ReportOthersMessage.args = {
-  currentUser: storyUsers.creator,
-  messages: [
-    {
-      id: 'msg-1',
-      text: 'Hover me to report!',
-      user: storyUsers.visitor,
-    },
-    {
-      id: 'msg-2',
-      text: "That's a fine message.",
-      user: storyUsers.creator,
-    },
-  ],
-}
-ReportOthersMessage.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement)
-  const otherBubble = await canvas.findByText('Hover me to report!')
-  await userEvent.hover(otherBubble)
-  const toggle = await canvas.findByTestId('message-actions-toggle-button')
-  await userEvent.click(toggle)
-  await expect(canvas.getByText('Report')).toBeInTheDocument()
-}
-ReportOthersMessage.parameters = {
-  docs: {
-    description: {
-      story:
-        "Current user hovers the other participant's message. Only \"Report\" is shown — \"Delete\" is hidden.",
-    },
-  },
-}

package/src/components/CustomMessage/index.tsx

@@ -85,7 +85,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   const {
     Attachment = DefaultAttachment,
     EditMessageModal = DefaultEditMessageModal,
-    MessageActions,
     MessageBlocked = DefaultMessageBlocked,
     MessageBouncePrompt = DefaultMessageBouncePrompt,
     MessageDeleted = DefaultMessageDeleted,
@@ -298,28 +297,24 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 <MessageErrorIcon />
               </div>
+              {/* Tip/paid tags stay outside; chatbot attachment indicator stays outside too */}
+              {(!isChatbot || useAttachmentFooterChatbotTag) && (
+                <MessageTag
+                  message={message}
+                  hasAttachment={hasRenderableAttachments}
+                  isMyMessage={isMine}
+                />
+              )}
+              {chatbotVotingEnabled && isChatbot && (
+                <MessageVoteButtons
+                  selected={voteState}
+                  onVoteUp={voteUp}
+                  onVoteDown={voteDown}
+                />
+              )}
             </div>
           )}
-          {MessageActions && <MessageActions />}
         </div>
-        {!isAttachment && !isTipOnly && (
-          <div className="str-chat__message-footer">
-            {(!isChatbot || useAttachmentFooterChatbotTag) && (
-              <MessageTag
-                message={message}
-                hasAttachment={hasRenderableAttachments}
-                isMyMessage={isMine}
-              />
-            )}
-            {chatbotVotingEnabled && isChatbot && (
-              <MessageVoteButtons
-                selected={voteState}
-                onVoteUp={voteUp}
-                onVoteDown={voteDown}
-              />
-            )}
-          </div>
-        )}
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}

package/src/components/MessageAttachment/Image/ImageAttachment.stories.tsx

@@ -35,14 +35,15 @@ const handleDismiss = () => {
 /**
  * Single image — renders inside a chat bubble with rounded corners.
  * Composer / Sent / Received are all interactive: clicking opens the
- * built-in `ImageViewer` lightbox with mouse-wheel zoom, drag-to-pan,
- * double-click toggle, and a download action in the toolbar.
+ * built-in `ImageViewer` lightbox (full-viewport `<dialog>`, image
+ * centered at reasonable max dimensions, close + download buttons in
+ * the chrome — Escape or backdrop click also dismiss).
  */
 export const Single: StoryFn = () => (
   <StoryPage>
     <StoryHeading
       title="Single image"
-      description="Click any bubble to open the lightbox viewer (mouse-wheel zoom, drag-to-pan, double-click toggle, download)."
+      description="Click any bubble to open the lightbox viewer. The dialog centers the image at reasonable max dimensions; close with the × button, Escape, or a backdrop click. The chrome carries a download button for grabbing the image without leaving the lightbox."
     />
     <StoryGrid>
       <StoryRow
@@ -143,7 +144,9 @@ export const SingleWithText: StoryFn = () => (
  * Stacked image attachments — multiple images in one bubble laid out
  * in a 1 / 2 / 3 / 4-tile grid. Five or more collapse into a `+N`
  * overflow tile on the bottom-right. Click any tile to open the
- * lightbox at that index, then arrow-navigate between siblings.
+ * lightbox on that specific image; the viewer becomes a carousel
+ * (prev/next chrome, ArrowLeft / ArrowRight, and a `current / total`
+ * counter) so the user can browse siblings without closing.
  *
  * Sent + Received only — the composer surface accepts a single image
  * at a time, so the Composer column is intentionally blank.
@@ -152,7 +155,7 @@ export const Stacked: StoryFn = () => (
   <StoryPage>
     <StoryHeading
       title="Stacked images"
-      description="Click any tile to open the lightbox at that index. Use arrow keys to navigate between siblings. Composer column is intentionally blank — the composer accepts a single image at a time."
+      description="Click any tile to open the lightbox at that index. Use the prev / next chrome or ArrowLeft / ArrowRight to navigate between siblings inside the viewer. Composer column is intentionally blank — the composer accepts a single image at a time."
     />
     <StoryGrid>
       <StoryRow

package/src/components/MessageAttachment/Image/index.tsx

@@ -21,7 +21,7 @@ export interface ImageAttachmentSharedProps extends MessageAttachmentBaseProps {
   /** Single image — convenience for the most common case. */
   src?: string
   alt?: string
-  /** Filename surfaced in the viewer toolbar + download default name. */
+  /** Filename used as the viewer dialog's accessible name. */
   filename?: string
   /**
    * Stacked images. Takes precedence over `src` when set. Renders a
@@ -98,6 +98,12 @@ interface InternalImageRowProps extends ImageAttachmentSharedProps {
   onDismiss?: () => void
 }
 
+/**
+ * Project the bubble's `ImageItem`s onto the carousel-aware viewer's
+ * `ImageViewerItem` shape. When a shared outer `filename` is supplied
+ * for a stacked bubble, suffix `(N)` per sibling so each carousel page
+ * still gets a distinct accessible name + download default.
+ */
 const buildViewerItems = (
   resolvedItems: ImageItem[],
   filename?: string