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

package/src/components/MessageAttachment/Pdf/PdfAttachment.stories.tsx

@@ -0,0 +1,292 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import {
+  StoryGrid,
+  StoryHeading,
+  StoryPage,
+  StoryRow,
+} from '../stories/StoryTable'
+import type { PdfItem } from '../types'
+
+import PdfAttachment from '.'
+
+const PDF_SRC = 'https://www.w3.org/WAI/WCAG21/wcag21.pdf'
+
+const STACK_PDFS: PdfItem[] = [
+  { src: PDF_SRC, filename: 'ESOP-summary.pdf', fileSize: 388_658 },
+  { src: PDF_SRC, filename: 'Vesting-schedule.pdf', fileSize: 142_336 },
+  { src: PDF_SRC, filename: 'Cap-table-snapshot.pdf', fileSize: 96_021 },
+  { src: PDF_SRC, filename: 'Board-resolution.pdf', fileSize: 24_580 },
+]
+
+const meta: Meta = {
+  title: 'MessageAttachment/PDF',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const handleDismiss = () => {
+  // eslint-disable-next-line no-console
+  console.log('Dismissed PDF attachment')
+}
+
+/**
+ * Compact PDF row inside a chat bubble — icon + filename + `EXT · SIZE`.
+ * Composer / Sent / Received are all interactive: clicking opens the
+ * built-in `PdfViewer` (full-viewport iframe + filename + download).
+ */
+export const Single: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="PDF attachment"
+      description="Click any bubble to open the full-viewport PDF viewer with built-in download."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="Default"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <PdfAttachment.Sent
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+          />
+        }
+        received={
+          <PdfAttachment.Received
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+          />
+        }
+      />
+      <StoryRow
+        label="Long filename"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary-and-vesting-schedule-2026-Q4-FINAL.pdf"
+            fileSize={1_240_000}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <PdfAttachment.Sent
+            src={PDF_SRC}
+            filename="ESOP-summary-and-vesting-schedule-2026-Q4-FINAL.pdf"
+            fileSize={1_240_000}
+          />
+        }
+        received={
+          <PdfAttachment.Received
+            src={PDF_SRC}
+            filename="ESOP-summary-and-vesting-schedule-2026-Q4-FINAL.pdf"
+            fileSize={1_240_000}
+          />
+        }
+      />
+      <StoryRow
+        label="No file size"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="contract.pdf"
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<PdfAttachment.Sent src={PDF_SRC} filename="contract.pdf" />}
+        received={<PdfAttachment.Received src={PDF_SRC} filename="contract.pdf" />}
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+export const SingleWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="PDF with caption"
+      description="Caption sits inside the same bubble, below the file row — matches the mobile chat 'Here is the file' screenshot."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="Caption"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <PdfAttachment.Sent
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            text="Here is the file"
+          />
+        }
+        received={
+          <PdfAttachment.Received
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            text="Here is the file"
+          />
+        }
+      />
+      <StoryRow
+        label="Long caption"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <PdfAttachment.Sent
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            text="Sharing the latest ESOP summary — let me know if you need any sections clarified before we sign."
+          />
+        }
+        received={
+          <PdfAttachment.Received
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            text="Sharing the latest ESOP summary — let me know if you need any sections clarified before we sign."
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/**
+ * Stacked PDF attachments — multiple PDFs in one bubble. Each row is
+ * its own tappable target that opens the `PdfViewer` for that file.
+ *
+ * Sent + Received only — the composer surface accepts a single
+ * attachment at a time (the user picks files one at a time inside the
+ * file picker, so the composer preview lives outside this scenario).
+ */
+export const Stacked: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked PDFs"
+      description="Each row is its own tappable target; clicking opens that PDF in the viewer. Composer column is intentionally blank — the composer accepts a single attachment at a time."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="2 PDFs"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<PdfAttachment.Sent items={STACK_PDFS.slice(0, 2)} />}
+        received={<PdfAttachment.Received items={STACK_PDFS.slice(0, 2)} />}
+      />
+      <StoryRow
+        label="3 PDFs"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<PdfAttachment.Sent items={STACK_PDFS.slice(0, 3)} />}
+        received={<PdfAttachment.Received items={STACK_PDFS.slice(0, 3)} />}
+      />
+      <StoryRow
+        label="4 PDFs"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<PdfAttachment.Sent items={STACK_PDFS} />}
+        received={<PdfAttachment.Received items={STACK_PDFS} />}
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Stacked PDFs with an accompanying caption.
+ *  Sent + Received only — see `Stacked` for the rationale. */
+export const StackedWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked PDFs with caption"
+      description="Caption sits inside the same bubble, below the file list. Composer column is intentionally blank — the composer accepts a single attachment at a time."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="3 PDFs + caption"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <PdfAttachment.Sent
+            items={STACK_PDFS.slice(0, 3)}
+            text="Here are the docs from the call — review when you can"
+          />
+        }
+        received={
+          <PdfAttachment.Received
+            items={STACK_PDFS.slice(0, 3)}
+            text="Here are the docs from the call — review when you can"
+          />
+        }
+      />
+      <StoryRow
+        label="4 PDFs + caption"
+        composer={
+          <PdfAttachment.Composer
+            src={PDF_SRC}
+            filename="ESOP-summary.pdf"
+            fileSize={388_658}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <PdfAttachment.Sent
+            items={STACK_PDFS}
+            text="Full ESOP package + the cap table snapshot for tonight's meeting."
+          />
+        }
+        received={
+          <PdfAttachment.Received
+            items={STACK_PDFS}
+            text="Full ESOP package + the cap table snapshot for tonight's meeting."
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)

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

@@ -0,0 +1,228 @@
+import React from 'react'
+
+import Bubble from '../_shared/Bubble'
+import CompactDocumentRow from '../_shared/CompactDocumentRow'
+import DismissButton from '../_shared/DismissButton'
+import DownloadAction from '../_shared/DownloadAction'
+import { filenameFromUrl } from '../_shared/fileMeta'
+import PdfViewer from '../_shared/PdfViewer'
+import { useViewer } from '../_shared/useViewer'
+import {
+  bubbleVariantForState,
+  type BubbleVariant,
+  type ComposerExtras,
+  type MessageAttachmentBaseProps,
+  type MessageAttachmentState,
+  type PdfItem,
+} from '../types'
+
+export 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?: string
+  /** File size in bytes — formatted into the `EXT · SIZE` meta line. */
+  fileSize?: number
+  /**
+   * Override displayed title (defaults to `filename`). Useful when a
+   * sender re-titles a generated PDF before sending.
+   */
+  title?: string
+  /**
+   * Stacked PDFs. Takes precedence over `src` when set. Each item
+   * renders as its own row inside the bubble; clicking a row opens
+   * that PDF in the viewer. Sent + Received only — the composer
+   * surface accepts a single attachment at a time.
+   */
+  items?: PdfItem[]
+  /**
+   * Forwarded to the viewer trigger. When omitted the click still
+   * opens the built-in `PdfViewer`. Supply this to fire analytics, or
+   * return `false` to intercept the open (e.g. swap to a route-based
+   * viewer / confirmation modal). Any other return value (including
+   * `void`/`undefined`) lets the built-in viewer open. For stacked
+   * attachments the `index` argument identifies the row.
+   */
+  onClick?: (index: number) => boolean | void
+}
+
+const resolveItems = ({
+  src,
+  filename,
+  fileSize,
+  title,
+  items,
+}: {
+  src?: string
+  filename?: string
+  fileSize?: number
+  title?: string
+  items?: PdfItem[]
+}): PdfItem[] => {
+  if (items && items.length > 0) return items
+  if (src) return [{ src, filename, fileSize, title }]
+  return []
+}
+
+interface PdfRowButtonProps {
+  variant: BubbleVariant
+  item: PdfItem
+  index: number
+  onActivate: (index: number) => void
+  trailingAction?: React.ReactNode
+}
+
+/**
+ * Single tappable PDF row — used both for the lone PDF case and for
+ * each child of a stacked attachment. The icon + filename area opens
+ * the viewer; the trailing slot hosts a separate, sibling button
+ * (download or dismiss) so each affordance owns its own click target.
+ */
+const PdfRowButton: React.FC<PdfRowButtonProps> = ({
+  variant,
+  item,
+  index,
+  onActivate,
+  trailingAction,
+}) => {
+  const resolvedFilename = item.filename ?? filenameFromUrl(item.src)
+  return (
+    <CompactDocumentRow
+      variant={variant}
+      filename={resolvedFilename}
+      title={item.title}
+      mimeType="application/pdf"
+      fileSize={item.fileSize}
+      onActivate={() => onActivate(index)}
+      activateLabel={`Open ${resolvedFilename}`}
+      trailingAction={trailingAction}
+    />
+  )
+}
+
+interface InternalPdfRowProps extends PdfAttachmentSharedProps {
+  state: MessageAttachmentState
+  onDismiss?: () => void
+}
+
+const PdfAttachmentRow: React.FC<InternalPdfRowProps> = ({
+  state,
+  src,
+  filename,
+  fileSize,
+  title,
+  items,
+  text,
+  groupPosition,
+  onClick,
+  onDismiss,
+}) => {
+  const variant = bubbleVariantForState(state)
+  const resolvedItems = resolveItems({ src, filename, fileSize, title, items })
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
+  const showDismiss = state === 'composer' && !!onDismiss
+
+  if (resolvedItems.length === 0) {
+    return null
+  }
+
+  // Clamp the viewer index defensively: if `items` shrinks between
+  // the open click and the next render (server push, optimistic
+  // update, etc.) `viewerIndex` may point past the new array.
+  // Dereferencing `undefined` would crash the whole bubble, so fall
+  // back to the last available row instead.
+  const safeIndex = Math.min(viewerIndex, resolvedItems.length - 1)
+  const activeItem = resolvedItems[safeIndex]
+  const activeFilename =
+    activeItem.filename ?? filenameFromUrl(activeItem.src)
+
+  return (
+    <Bubble
+      variant={variant}
+      text={text}
+      groupPosition={groupPosition}
+      data-testid="pdf-attachment"
+    >
+      {/* Stacked rows get a small vertical gap so each PDF reads as
+          a discrete attachment rather than one merged blob. Single
+          row falls through to a no-op `gap-0`. */}
+      <div className="flex flex-col gap-2">
+        {resolvedItems.map((item, index) => {
+          const itemFilename = item.filename ?? filenameFromUrl(item.src)
+          // Composer only supports a single attachment so the dismiss
+          // control sits on the only row. Sent / Received rows expose
+          // a download icon button so the user can grab the PDF
+          // without opening the viewer first (the viewer also has a
+          // download in its toolbar — this is the quick-grab shortcut).
+          const trailingAction =
+            showDismiss && index === 0 ? (
+              <DismissButton onClick={onDismiss!} variant="inline" />
+            ) : state === 'composer' ? undefined : (
+              <DownloadAction
+                url={item.src}
+                filename={itemFilename}
+                variant="inline"
+                label={`Download ${itemFilename}`}
+                tone={variant}
+              />
+            )
+          return (
+            <PdfRowButton
+              key={`${item.src}-${index}`}
+              variant={variant}
+              item={item}
+              index={index}
+              onActivate={handleActivate}
+              trailingAction={trailingAction}
+            />
+          )
+        })}
+      </div>
+
+      <PdfViewer
+        open={viewerOpen}
+        src={activeItem.src}
+        filename={activeFilename}
+        onClose={closeViewer}
+      />
+    </Bubble>
+  )
+}
+
+/**
+ * Composer-only props. Single PDF (`src`) only — the composer surface
+ * accepts a single attachment at a time, so `items` is not supported.
+ * Captions (`text`) and `groupPosition` are also dropped: the composer
+ * renders a standalone draft, not part of a same-author run, and
+ * captions live in the message-input textarea, not inside the draft
+ * attachment preview.
+ */
+export interface PdfComposerProps extends ComposerExtras {
+  src?: string
+  filename?: string
+  fileSize?: number
+  title?: string
+  onClick?: (index: number) => boolean | void
+}
+export type PdfSentProps = PdfAttachmentSharedProps
+export type PdfReceivedProps = PdfAttachmentSharedProps
+
+const PdfComposer: React.FC<PdfComposerProps> = (props) => (
+  <PdfAttachmentRow {...props} state="composer" />
+)
+const PdfSent: React.FC<PdfSentProps> = (props) => (
+  <PdfAttachmentRow {...props} state="sent" />
+)
+const PdfReceived: React.FC<PdfReceivedProps> = (props) => (
+  <PdfAttachmentRow {...props} state="received" />
+)
+
+const PdfAttachment = {
+  Composer: PdfComposer,
+  Sent: PdfSent,
+  Received: PdfReceived,
+}
+
+export default PdfAttachment