@linktr.ee/messaging-react 2.1.0 → 2.2.0-rc-1778753733

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

@@ -0,0 +1,173 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import type { BubbleGroupPosition, BubbleVariant } from '../types'
+
+export interface BubbleProps {
+  variant: BubbleVariant
+  /** Optional message text rendered below the attachment slot. */
+  text?: React.ReactNode
+  /**
+   * Renders a hairline border around the bubble. Defaults to `true` —
+   * matches the design system's "small border around link / message
+   * attachments" treatment from the mobile spec.
+   */
+  bordered?: boolean
+  /**
+   * Position of this bubble inside a same-author message run. Drives
+   * the corner-flattening that visually merges consecutive bubbles
+   * (matches the grouping stream-chat-react applies to text bubbles).
+   * Defaults to `'single'` so standalone usage keeps every corner
+   * fully rounded.
+   */
+  groupPosition?: BubbleGroupPosition
+  className?: string
+  children: React.ReactNode
+  'data-testid'?: string
+}
+
+// Colors and metrics tracked from `stream-chat-react`'s default
+// `.str-chat__message-bubble` token set so attachments visually drop
+// into a normal `CustomMessage` thread without any seams:
+//   - light  → `--str-chat__secondary-surface-color` = grey200 (#e9eaed)
+//   - dark   → `.str-chat__message--me` override in `styles.css` (#121110)
+//   - text padding → `--str-chat__spacing-2 --str-chat__spacing-4` = 8px 16px
+//   - border-radius → `--str-chat__border-radius-md` = 18px
+//
+// TODO: migrate to Tailwind theme tokens once they exist for the
+// `linktree.dark` / `linktree.surface.secondary` palette — these hex
+// literals are repeated across LinkAttachment / LockedAttachment /
+// MediaMessage / CustomMessageInput / DownloadAction etc., so a
+// rebrand would need to touch every site. A central token would
+// collapse the migration to one definition.
+const BUBBLE_BG_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'bg-[#121110]',
+  light: 'bg-[#e9eaed]',
+}
+
+const BUBBLE_TEXT_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'text-white',
+  light: 'text-[#080707]',
+}
+
+const BUBBLE_BORDER_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'border-white/[0.08]',
+  light: 'border-black/[0.08]',
+}
+
+/**
+ * Per-corner rounding tables that mirror stream-chat-react's default
+ * bubble grouping. Sender bubbles cluster against the right edge so
+ * the right corners get flattened in a run; receiver bubbles cluster
+ * against the left edge so the left corners get flattened.
+ *
+ * Rounded corners use `--str-chat__border-radius-md` (18px) and
+ * flattened corners use `--str-chat__border-radius-sm` (4px) — same
+ * tokens stream's stylesheet uses for `.str-chat__message-bubble`
+ * inside a `--first` / `--group` / `--end` wrapper.
+ */
+type BubbleSide = 'sender' | 'receiver'
+
+const sideForVariant = (variant: BubbleVariant): BubbleSide =>
+  variant === 'dark' ? 'sender' : 'receiver'
+
+const CORNER_CLASSES_BY_SIDE_AND_POSITION: Record<
+  BubbleSide,
+  Record<BubbleGroupPosition, string>
+> = {
+  sender: {
+    single:
+      'rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[18px]',
+    first:
+      'rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[4px]',
+    middle:
+      'rounded-tl-[18px] rounded-tr-[4px] rounded-bl-[18px] rounded-br-[4px]',
+    end: 'rounded-tl-[18px] rounded-tr-[4px] rounded-bl-[18px] rounded-br-[18px]',
+  },
+  receiver: {
+    single:
+      'rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[18px]',
+    first:
+      'rounded-tl-[18px] rounded-tr-[18px] rounded-bl-[4px] rounded-br-[18px]',
+    middle:
+      'rounded-tl-[4px] rounded-tr-[18px] rounded-bl-[4px] rounded-br-[18px]',
+    end: 'rounded-tl-[4px] rounded-tr-[18px] rounded-bl-[18px] rounded-br-[18px]',
+  },
+}
+
+/**
+ * Chat-bubble container shared by every `MessageAttachment.*` card.
+ *
+ * Holds the attachment slot (image / video / row) and an optional
+ * `text` caption rendered below it — mirrors the mobile chat layout
+ * where a sender can attach a caption alongside an attachment ('Here
+ * is the file', 'Here is the image').
+ *
+ * Two visual variants:
+ *   - `dark` — sender-side (Composer / Sent), white text on `#121110`.
+ *   - `light` — recipient-side (Received), dark text on `#e9eaed`.
+ *
+ * Background colors, padding, border-radius, and inherited font come
+ * from the stream-chat-react `.str-chat__message-bubble` token set so
+ * attachments line up with the `CustomMessage` text bubbles in a real
+ * conversation. Padding is uniform across every variant — text rows,
+ * audio rows, document rows, and media bubbles all get the same
+ * 8px / 16px inset, with media inside getting its own rounded corners.
+ */
+const Bubble: React.FC<BubbleProps> = ({
+  variant,
+  text,
+  bordered = true,
+  groupPosition = 'single',
+  className,
+  children,
+  'data-testid': dataTestId,
+}) => {
+  const hasText = text != null && text !== ''
+  const cornerClasses =
+    CORNER_CLASSES_BY_SIDE_AND_POSITION[sideForVariant(variant)][groupPosition]
+
+  return (
+    <div
+      data-testid={dataTestId}
+      data-group-position={groupPosition}
+      className={classNames(
+        // 280px-wide bubble — matches the mobile chat attachment width
+        // and keeps the document / image / audio bubbles visually
+        // consistent inside the conversation timeline. The 8px / 16px
+        // inset matches `--str-chat__spacing-2 --str-chat__spacing-4`
+        // so attachments share the same hit / negative-space rhythm
+        // as the surrounding `CustomMessage` text bubbles.
+        'relative w-[280px] overflow-hidden px-2 py-2',
+        cornerClasses,
+        BUBBLE_BG_BY_VARIANT[variant],
+        BUBBLE_TEXT_BY_VARIANT[variant],
+        bordered && 'border',
+        bordered && BUBBLE_BORDER_BY_VARIANT[variant],
+        className
+      )}
+    >
+      {children}
+
+      {hasText ? (
+        <p
+          className={classNames(
+            // No `text-*` / `font-*` overrides here — caption inherits
+            // the same font family + size as `.str-chat__message-text`
+            // so it matches the surrounding `CustomMessage` bubbles.
+            'whitespace-pre-wrap break-words leading-snug',
+            // Top gutter only — bubble's `py-2` already supplies the
+            // bottom inset, and the children above already render
+            // flush against their own bottom edge.
+            'pt-2',
+            'px-2'
+          )}
+        >
+          {text}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export default Bubble

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

@@ -0,0 +1,152 @@
+import classNames from 'classnames'
+import React from 'react'
+
+import { renderTypeIcon } from '../../AttachmentCard'
+import type { BubbleVariant } from '../types'
+
+import { buildCompactMetaLabel } from './fileMeta'
+
+export interface CompactDocumentRowProps {
+  variant: BubbleVariant
+  /** Filename — drives the title (when no `title` set) and the `EXT` label. */
+  filename?: string
+  /** Override displayed title. Defaults to `filename`. */
+  title?: string
+  mimeType?: string
+  fileSize?: number
+  /**
+   * When set, the icon + filename area becomes a `<button>` that fires
+   * this handler. Lets the row's primary activation (e.g. opening the
+   * PDF viewer) live separately from the trailing slot's own button
+   * (e.g. a download icon) without nesting `<button>` inside `<button>`.
+   * When omitted, the row renders as a plain presentational `<div>`
+   * and the caller is responsible for any outer activation wrapper.
+   */
+  onActivate?: () => void
+  /**
+   * Required when `onActivate` is set. Visible to assistive tech as
+   * the inner button's label (e.g. `'Open ESOP-summary.pdf'`).
+   */
+  activateLabel?: string
+  /**
+   * Optional trailing slot — sits outside the activation button so it
+   * can host its own interactive controls (e.g. a download `<button>`,
+   * the Composer's `DismissButton`) without nesting one button inside
+   * another.
+   */
+  trailingAction?: React.ReactNode
+}
+
+// Meta line + icon tile are tinted relative to the bubble background,
+// so they stay variant-aware. The title inherits the bubble's text
+// color (set on the parent `Bubble`).
+//
+// `text-black/55` on the `#e9eaed` light bubble lands right at the
+// WCAG AA 4.5:1 small-text threshold (≈4.5:1) — bump to `/65` so
+// the meta line has a comfortable margin on the light bubble. The
+// dark variant (`text-white/55` on `#121110`) already passes AA at
+// ~6:1, so we leave it alone.
+const META_CLASS_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'text-white/55',
+  light: 'text-black/65',
+}
+
+const ICON_BG_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'bg-white/10',
+  light: 'bg-black/5',
+}
+
+const ICON_COLOR_BY_VARIANT: Record<BubbleVariant, string> = {
+  dark: 'text-white/85',
+  light: 'text-black/85',
+}
+
+/**
+ * Compact icon-row used by `Pdf` / `File` `MessageAttachment` variants.
+ * Mirrors the mobile chat document attachment from
+ * `EARN-8448/pr-2-chat-bubbles-and-file-icons` — a 40x40 typed icon
+ * tile on the left, filename + `EXT · SIZE` meta on the right.
+ *
+ * The row is always wrapped by `Bubble`, which contributes the bubble
+ * background, padding, border, and (when the parent wires it up) the
+ * click target.
+ */
+const CompactDocumentRow: React.FC<CompactDocumentRowProps> = ({
+  variant,
+  filename,
+  title,
+  mimeType = 'application/octet-stream',
+  fileSize,
+  onActivate,
+  activateLabel,
+  trailingAction,
+}) => {
+  const resolvedTitle = title ?? filename ?? 'File'
+  const metaLabel = buildCompactMetaLabel(mimeType, filename, fileSize)
+
+  const iconTile = (
+    <div
+      className={classNames(
+        'flex size-10 shrink-0 items-center justify-center rounded-sm',
+        ICON_BG_BY_VARIANT[variant]
+      )}
+      aria-hidden
+    >
+      {renderTypeIcon(mimeType, {
+        className: classNames('size-6', ICON_COLOR_BY_VARIANT[variant]),
+        weight: 'regular',
+      })}
+    </div>
+  )
+
+  const textBlock = (
+    <div className="flex min-w-0 flex-1 flex-col text-left">
+      <p className="truncate font-medium leading-snug">{resolvedTitle}</p>
+      {metaLabel ? (
+        <p
+          className={classNames(
+            'truncate text-xs leading-4',
+            META_CLASS_BY_VARIANT[variant]
+          )}
+        >
+          {metaLabel}
+        </p>
+      ) : null}
+    </div>
+  )
+
+  // When the row is activatable, its body (icon + text) becomes the
+  // click target — wrapping it in a `<button>` rather than wrapping
+  // the entire row preserves the trailing slot for its own buttons
+  // (download / dismiss) instead of nesting them inside one.
+  const body = onActivate ? (
+    <button
+      type="button"
+      onClick={onActivate}
+      aria-label={activateLabel}
+      className={classNames(
+        'flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left transition-colors',
+        variant === 'dark'
+          ? 'hover:bg-white/[0.04]'
+          : 'hover:bg-black/[0.04]'
+      )}
+    >
+      {iconTile}
+      {textBlock}
+    </button>
+  ) : (
+    <>
+      {iconTile}
+      {textBlock}
+    </>
+  )
+
+  return (
+    <div className="flex items-center gap-3 px-3 py-2">
+      {body}
+      {trailingAction ? <div className="shrink-0">{trailingAction}</div> : null}
+    </div>
+  )
+}
+
+export default CompactDocumentRow

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

@@ -0,0 +1,39 @@
+import { XIcon } from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React from 'react'
+
+export interface DismissButtonProps {
+  onClick: () => void
+  /**
+   * `'overlay'` — translucent button sitting on top of media (image /
+   * video corner). `'inline'` — opaque button placed in the row of a
+   * compact attachment alongside other content.
+   */
+  variant?: 'overlay' | 'inline'
+  ariaLabel?: string
+}
+
+const DismissButton: React.FC<DismissButtonProps> = ({
+  onClick,
+  variant = 'overlay',
+  ariaLabel = 'Dismiss attachment',
+}) => (
+  <button
+    type="button"
+    onClick={(e) => {
+      e.stopPropagation()
+      onClick()
+    }}
+    aria-label={ariaLabel}
+    className={classNames(
+      'flex size-6 items-center justify-center rounded-full text-white',
+      variant === 'overlay'
+        ? 'bg-[#121110]/85 backdrop-blur'
+        : 'bg-white/15 hover:bg-white/25'
+    )}
+  >
+    <XIcon className="size-3" weight="bold" />
+  </button>
+)
+
+export default DismissButton

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

@@ -0,0 +1,175 @@
+import {
+  CircleNotchIcon,
+  DownloadSimpleIcon,
+  IconProps,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useCallback, useState } from 'react'
+
+import { triggerDownload } from './triggerDownload'
+
+export type DownloadActionVariant =
+  /** Solid pill button used inside compact / file rows. */
+  | 'pill'
+  /** Round translucent overlay button used over media (image / video viewers). */
+  | 'overlay'
+  /** Flat icon button used in viewer toolbars. */
+  | 'toolbar'
+  /**
+   * Compact round icon button sized for the trailing slot of a
+   * `CompactDocumentRow` (PDF / File rows). Adopts the row's tone so
+   * it sits inline next to the filename without competing with it.
+   */
+  | 'inline'
+
+export interface DownloadActionProps {
+  url: string
+  filename?: string
+  variant?: DownloadActionVariant
+  /**
+   * Override the visible label on `pill` variants. Defaults to
+   * `'Download'`. Hidden on `overlay` / `toolbar` variants.
+   */
+  label?: string
+  /** Hide the label, keeping just the icon. Defaults to `true` for non-pill variants. */
+  iconOnly?: boolean
+  /** Tone of the surface. Used by the `pill` variant. */
+  tone?: 'dark' | 'light'
+  /**
+   * Triggered after the download starts so consumers can fire analytics
+   * or close a viewer. Errors during download don't suppress the call.
+   */
+  onTriggered?: () => void
+}
+
+const DownloadAction: React.FC<DownloadActionProps> = ({
+  url,
+  filename,
+  variant = 'pill',
+  label = 'Download',
+  iconOnly,
+  tone = 'dark',
+  onTriggered,
+}) => {
+  const [busy, setBusy] = useState(false)
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      if (busy) return
+      setBusy(true)
+      triggerDownload(url, filename)
+        .catch(() => {
+          /* swallowed — fallback path inside `triggerDownload` */
+        })
+        .finally(() => {
+          setBusy(false)
+          onTriggered?.()
+        })
+    },
+    [busy, url, filename, onTriggered]
+  )
+
+  const showIconOnly = iconOnly ?? variant !== 'pill'
+
+  const iconClass = classNames(
+    variant === 'pill' ? 'size-4' : 'size-5',
+    'shrink-0'
+  )
+  const iconProps: IconProps = { className: iconClass, weight: 'bold' }
+
+  if (variant === 'inline') {
+    // Sized to match the existing trailing slot used by `DismissButton`
+    // and the decorative download span in `FileAttachment`. Tone keys
+    // off the surrounding `Bubble` variant so a sender (dark) bubble
+    // gets a lighter icon and a receiver (light) bubble gets a darker
+    // one — same approach `CompactDocumentRow` already uses for the
+    // type icon.
+    const inlineToneClasses: Record<'dark' | 'light', string> = {
+      dark: 'text-white/70 hover:bg-white/[0.08] hover:text-white',
+      light: 'text-black/70 hover:bg-black/[0.08] hover:text-black',
+    }
+    return (
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={busy}
+        aria-label={label}
+        className={classNames(
+          'flex size-8 shrink-0 items-center justify-center rounded-full transition-colors disabled:opacity-70',
+          inlineToneClasses[tone]
+        )}
+      >
+        {busy ? (
+          <CircleNotchIcon
+            className="size-4 animate-spin"
+            weight="bold"
+            aria-hidden
+          />
+        ) : (
+          <DownloadSimpleIcon
+            className="size-5 shrink-0"
+            weight="bold"
+            aria-hidden
+          />
+        )}
+      </button>
+    )
+  }
+
+  if (variant === 'pill') {
+    return (
+      <button
+        type="button"
+        onClick={handleClick}
+        disabled={busy}
+        aria-label={showIconOnly ? label : undefined}
+        className={classNames(
+          'mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full px-4 text-sm font-medium leading-none transition-colors disabled:opacity-70',
+          tone === 'dark'
+            ? 'bg-[#121110] text-white hover:bg-[#2a2928]'
+            : 'bg-white text-[#121110] hover:bg-white/90'
+        )}
+      >
+        {busy ? (
+          <CircleNotchIcon
+            className="size-4 animate-spin"
+            weight="bold"
+            aria-hidden
+          />
+        ) : (
+          <DownloadSimpleIcon {...iconProps} aria-hidden />
+        )}
+        {showIconOnly ? null : label}
+      </button>
+    )
+  }
+
+  // overlay / toolbar — round translucent button with just the icon
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={busy}
+      aria-label={label}
+      className={classNames(
+        'flex size-10 shrink-0 items-center justify-center rounded-full text-white transition-colors disabled:opacity-70',
+        variant === 'overlay'
+          ? 'bg-black/55 backdrop-blur hover:bg-black/70'
+          : 'bg-white/10 hover:bg-white/20'
+      )}
+    >
+      {busy ? (
+        <CircleNotchIcon
+          className="size-5 animate-spin"
+          weight="bold"
+          aria-hidden
+        />
+      ) : (
+        <DownloadSimpleIcon {...iconProps} aria-hidden />
+      )}
+    </button>
+  )
+}
+
+export default DownloadAction