@linktr.ee/messaging-react 3.37.1 → 3.38.0-rc-1786343622

package/src/components/MessageAttachment/_shared/CarouselNav.tsx

@@ -1,6 +1,8 @@
 import { CaretLeftIcon, CaretRightIcon } from '@phosphor-icons/react'
 import React from 'react'
 
+import { VIEWER_NAV_CLASS } from './viewerChromeClasses'
+
 export interface CarouselNavProps {
   onPrev: () => void
   onNext: () => void
@@ -13,10 +15,7 @@ export interface CarouselNavProps {
 /**
  * Prev / next chrome shared by every carousel-aware viewer. Rendered
  * inside the dialog body so the buttons sit absolutely positioned
- * against the viewer (`.mes-media-viewer__nav--{prev,next}`).
- *
- * Styling lives as plain CSS in `styles.css` so the buttons render
- * correctly regardless of whether the consumer has Tailwind wired up.
+ * against the viewer, mid-height on each edge.
  */
 const CarouselNav: React.FC<CarouselNavProps> = ({
   onPrev,
@@ -29,7 +28,7 @@ const CarouselNav: React.FC<CarouselNavProps> = ({
       type="button"
       onClick={onPrev}
       aria-label={prevLabel}
-      className="mes-media-viewer__nav mes-media-viewer__nav--prev"
+      className={`${VIEWER_NAV_CLASS} left-4`}
     >
       <CaretLeftIcon size={20} weight="bold" aria-hidden />
     </button>
@@ -37,7 +36,7 @@ const CarouselNav: React.FC<CarouselNavProps> = ({
       type="button"
       onClick={onNext}
       aria-label={nextLabel}
-      className="mes-media-viewer__nav mes-media-viewer__nav--next"
+      className={`${VIEWER_NAV_CLASS} right-4`}
     >
       <CaretRightIcon size={20} weight="bold" aria-hidden />
     </button>

package/src/components/MessageAttachment/_shared/DownloadAction.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames'
 import React, { useCallback, useState } from 'react'
 
 import { triggerDownload } from './triggerDownload'
+import { VIEWER_ACTION_CLASS } from './viewerChromeClasses'
 
 export type DownloadActionVariant =
   /** Solid pill button used inside compact / file rows. */
@@ -20,9 +21,7 @@ export type DownloadActionVariant =
   /**
    * Round icon button sized to match the close action in the
    * `ViewerShell` chrome — used by `ImageViewer` for in-viewer
-   * downloads. Styled with plain CSS (`.mes-media-viewer__action`) so
-   * it renders correctly without a Tailwind dependency in the
-   * consumer's app.
+   * downloads. Shares `VIEWER_ACTION_CLASS` with the close button.
    */
   | 'viewer'
 
@@ -123,17 +122,15 @@ const DownloadAction: React.FC<DownloadActionProps> = ({
   }
 
   if (variant === 'viewer') {
-    // Styled entirely through `.mes-media-viewer__action` (plain CSS
-    // in `styles.css`) so the button renders correctly when consumed
-    // outside this repo without a Tailwind setup. Sits next to the
-    // close action inside `ViewerShell`'s top-right chrome.
+    // Sits next to the close action inside `ViewerShell`'s top-right chrome
+    // and shares its circular-button styling via `VIEWER_ACTION_CLASS`.
     return (
       <button
         type="button"
         onClick={handleClick}
         disabled={busy}
         aria-label={label}
-        className="mes-media-viewer__action"
+        className={VIEWER_ACTION_CLASS}
       >
         {busy ? (
           <CircleNotchIcon size={20} weight="bold" aria-hidden />

package/src/components/MessageAttachment/_shared/ImageViewer.tsx

@@ -88,19 +88,15 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
           src={item.src}
           alt={item.alt ?? filename}
           draggable={false}
-          // The user has explicitly opened the viewer, so we want the
-          // active image to appear immediately rather than fall to the
-          // browser's lazy-load heuristics. Which is exactly why the
-          // element is gated on `open`: `ViewerShell` keeps its
-          // `<dialog>` mounted across open/close so the platform
-          // transition can play, and an eager `<img>` inside a closed
-          // dialog made every image bubble in a thread download its
-          // full-resolution original — note the viewer intentionally
-          // uses the raw `item.src`, not the CDN-optimised URL the
-          // bubble tile renders.
-          loading="eager"
+          // Gated on `open` (see the `{open ? … : null}` above): `ViewerShell`
+          // keeps its `<dialog>` mounted across open/close so the platform
+          // transition can play, but a mounted-closed dialog would still hold
+          // this `<img>` in the DOM. The viewer uses the raw `item.src` — the
+          // full-resolution original, not the CDN-optimised URL the bubble tile
+          // renders — so rendering it unconditionally made every image in a
+          // thread prefetch its full-res original. Only mount it while open.
           decoding="async"
-          className="mes-media-viewer__image"
+          className="block h-auto max-h-[calc(100dvh-128px)] w-auto max-w-[min(96vw,1400px)] select-none object-contain"
         />
       ) : null}
 

package/src/components/MessageAttachment/_shared/PdfViewer.tsx

@@ -76,7 +76,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({
         key={`${index}:${item.src}`}
         src={iframeSrc}
         title={filename}
-        className="mes-media-viewer__iframe"
+        className="block h-[calc(100dvh-128px)] w-[min(96vw,1400px)] border-0 bg-white"
         // Sandbox the iframe to stop the embedded document from
         // reaching parent context. We intentionally omit
         // `allow-same-origin`: even when the PDF host happens to share

package/src/components/MessageAttachment/_shared/VideoViewer.tsx

@@ -92,7 +92,7 @@ const VideoViewer: React.FC<VideoViewerProps> = ({
         muted
         playsInline
         preload={item.preload ?? 'metadata'}
-        className="mes-media-viewer__video"
+        className="block h-auto max-h-[calc(100dvh-128px)] w-auto max-w-[min(96vw,1400px)] bg-black"
       >
         {item.mimeType ? <source src={item.src} type={item.mimeType} /> : null}
       </video>

package/src/components/MessageAttachment/_shared/ViewerShell.tsx

@@ -1,6 +1,8 @@
 import { XIcon } from '@phosphor-icons/react'
 import React, { useEffect, useRef } from 'react'
 
+import { VIEWER_ACTION_CLASS } from './viewerChromeClasses'
+
 export interface ViewerShellProps {
   open: boolean
   onClose: () => void
@@ -20,8 +22,7 @@ export interface ViewerShellProps {
   counter?: React.ReactNode
   /**
    * Extra buttons rendered alongside the close button in the top-right
-   * chrome (e.g. a download action). They share `.mes-media-viewer__action`
-   * styling so the row reads as one consistent button group.
+   * chrome (e.g. a download action), laid out as one consistent button group.
    */
   actions?: React.ReactNode
   children: React.ReactNode
@@ -40,10 +41,10 @@ export interface ViewerShellProps {
  *     fallback for environments where `showModal` is unavailable
  *     (jsdom under tests).
  *
- * The structural styling lives as plain CSS under `.mes-media-viewer*`
- * in `styles.css` so a consumer who imports
- * `@linktr.ee/messaging-react/styles.css` gets a working lightbox even
- * if their Tailwind pipeline isn't scanning our `dist`.
+ * The `<dialog>` root, backdrop, and open/close transitions live in
+ * `styles.css` under `.mes-media-viewer` (they use `::backdrop` /
+ * `@starting-style`, which Tailwind can't express). The chrome inside is
+ * plain Tailwind on the JSX, like the rest of the package.
  */
 const ViewerShell: React.FC<ViewerShellProps> = ({
   open,
@@ -154,24 +155,28 @@ const ViewerShell: React.FC<ViewerShellProps> = ({
       onClose={handleDialogClose}
       onClick={handleDialogClick}
     >
-      <div className="mes-media-viewer__chrome">
+      <div className="pointer-events-none absolute inset-x-3 top-3 z-[1] flex items-center justify-between gap-3">
         {counter ? (
-          <span className="mes-media-viewer__counter">{counter}</span>
+          <span className="pointer-events-auto inline-flex items-center rounded-full bg-white/[0.12] px-3 py-1.5 text-[13px] font-medium leading-none tabular-nums text-white">
+            {counter}
+          </span>
         ) : null}
-        <div className="mes-media-viewer__actions">
+        <div className="pointer-events-auto ml-auto inline-flex items-center gap-2">
           {actions}
           <button
             ref={closeButtonRef}
             type="button"
             onClick={onClose}
             aria-label="Close viewer"
-            className="mes-media-viewer__action"
+            className={VIEWER_ACTION_CLASS}
           >
             <XIcon size={20} weight="bold" aria-hidden />
           </button>
         </div>
       </div>
-      <div className="mes-media-viewer__body">{children}</div>
+      <div className="box-border flex h-full w-full items-center justify-center px-6 py-16">
+        {children}
+      </div>
     </dialog>
   )
 }

package/src/components/MessageAttachment/_shared/viewerChromeClasses.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared Tailwind class strings for the media-viewer chrome buttons, reused by
+ * `ViewerShell` (close), `DownloadAction`, and `CarouselNav` so every
+ * viewer-chrome button stays visually consistent without duplicating the
+ * utility list. The lightbox `<dialog>` root itself still lives in
+ * `styles.css` (`.mes-media-viewer`) because `::backdrop` / `@starting-style`
+ * can't be expressed in Tailwind.
+ */
+
+/** Circular 40px icon button — close action, download action, etc. */
+export const VIEWER_ACTION_CLASS =
+  'inline-flex size-10 items-center justify-center rounded-full border-0 bg-white/[0.12] p-0 text-white transition-colors duration-150 ease-[ease] hover:bg-white/[0.22] focus-visible:bg-white/[0.22] focus-visible:outline-none disabled:cursor-default disabled:opacity-40'
+
+/** Circular 48px carousel prev/next button, mid-height against the dialog. */
+export const VIEWER_NAV_CLASS =
+  'absolute top-1/2 z-[1] inline-flex size-12 -translate-y-1/2 items-center justify-center rounded-full border-0 bg-white/[0.12] p-0 text-white transition-colors duration-150 ease-[ease] hover:bg-white/[0.22] focus-visible:bg-white/[0.22] focus-visible:outline-none'

package/src/components/MessagingShell/index.tsx

@@ -32,7 +32,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   onReportParticipantClick,
   dmAgentEnabled,
   onMessageSent,
-  chatbotVotingEnabled = false,
   viewerLanguage,
   renderChannelBanner,
   customChannelActions,
@@ -260,7 +259,6 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           onReportParticipantClick={onReportParticipantClick}
           dmAgentEnabled={dmAgentEnabled}
           onMessageSent={onMessageSent}
-          chatbotVotingEnabled={chatbotVotingEnabled}
           viewerLanguage={viewerLanguage}
           customChannelActions={customChannelActions}
           renderChannelActions={renderChannelActions}

package/src/index.ts

@@ -15,7 +15,6 @@ export { default as MessageBubble } from './components/MessageBubble'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
-export { MessageVoteButtons } from './components/CustomMessage/MessageVoteButtons'
 export {
   MediaMessage,
   isLinkAttachment,
@@ -34,7 +33,6 @@ export { CustomMessageProvider } from './components/CustomMessage/context'
 // Hooks
 export { useComposerLocked } from './components/CustomMessageInput'
 export { useMessaging } from './hooks/useMessaging'
-export { useMessageVote } from './hooks/useMessageVote'
 export { useCustomMessage } from './components/CustomMessage/context'
 
 // Utils
@@ -136,4 +134,3 @@ export type { CustomMessageRegistry } from './components/CustomMessage/context'
 export type { AttachmentSourceType } from './components/AttachmentCard/utils/mimeType'
 export type { Faq, FaqListProps } from './components/FaqList'
 export type { FaqListItemProps } from './components/FaqList/FaqListItem'
-export type { VoteSelection } from './hooks/useMessageVote'