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

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

@@ -0,0 +1,189 @@
+import React from 'react'
+
+import Bubble from '../_shared/Bubble'
+import DismissButton from '../_shared/DismissButton'
+import {
+  bubbleVariantForState,
+  type AudioItem,
+  type ComposerExtras,
+  type MediaPreloadMode,
+  type MessageAttachmentBaseProps,
+  type MessageAttachmentState,
+} from '../types'
+
+export interface AudioAttachmentSharedProps extends MessageAttachmentBaseProps {
+  /** Audio source URL (`mp3`, `aac`, `wav`, …). */
+  src?: string
+  /** MIME type hint — typed onto the inline `<source>` element. */
+  mimeType?: string
+  /**
+   * Filename — used as the download default name (consumed by the
+   * native player's kebab menu). The HTML `<audio>` element doesn't
+   * expose a built-in title slot, so we don't render the filename
+   * inside the bubble itself.
+   */
+  filename?: string
+  /**
+   * Stacked audio. Takes precedence over `src` when set. Each item
+   * renders its own native `<audio controls>` player, vertically
+   * stacked inside the same bubble with an 8px gap between players.
+   * Sent + Received only — the composer surface accepts a single
+   * attachment at a time.
+   */
+  items?: AudioItem[]
+  /**
+   * `<audio preload>` hint applied to every player on the bubble.
+   * When omitted, the default depends on the rendered shape:
+   *
+   *   - Single audio (no `items`, or `items.length === 1`) →
+   *     `'metadata'` so the native player surfaces duration
+   *     immediately.
+   *   - Stacked audio (`items.length > 1`) → `'none'` so a thread
+   *     of voice memos doesn't fan out N parallel metadata requests
+   *     on first paint.
+   *
+   * Per-track overrides live on `AudioItem.preload`.
+   */
+  preload?: MediaPreloadMode
+}
+
+const resolveItems = ({
+  src,
+  mimeType,
+  filename,
+  items,
+}: {
+  src?: string
+  mimeType?: string
+  filename?: string
+  items?: AudioItem[]
+}): AudioItem[] => {
+  if (items && items.length > 0) return items
+  if (src) return [{ src, mimeType, filename }]
+  return []
+}
+
+const NativeAudioPlayer: React.FC<{
+  item: AudioItem
+  preload: MediaPreloadMode
+  trailingAction?: React.ReactNode
+}> = ({ item, preload, trailingAction }) => (
+  <div className="flex items-center gap-2">
+    {/* No `<track>` is rendered — we don't author caption sidecars
+        for chat attachments, and an empty `<track kind="captions" />`
+        emits a runtime warning. Re-add a real track (with `src`,
+        `srcLang`, and `default`) once caption support actually ships.
+        The `jsx-a11y/media-has-caption` rule is suppressed for the
+        same reason. */}
+    {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+    <audio
+      src={item.src}
+      controls
+      preload={item.preload ?? preload}
+      className="block min-w-0 flex-1"
+    >
+      {item.mimeType ? <source src={item.src} type={item.mimeType} /> : null}
+    </audio>
+    {trailingAction ?? null}
+  </div>
+)
+
+interface InternalAudioRowProps extends AudioAttachmentSharedProps {
+  state: MessageAttachmentState
+  onDismiss?: () => void
+}
+
+const AudioAttachmentRow: React.FC<InternalAudioRowProps> = ({
+  state,
+  src,
+  mimeType,
+  filename,
+  items,
+  text,
+  groupPosition,
+  preload,
+  onDismiss,
+}) => {
+  const variant = bubbleVariantForState(state)
+  const showDismiss = state === 'composer' && !!onDismiss
+  const resolvedItems = resolveItems({ src, mimeType, filename, items })
+
+  if (resolvedItems.length === 0) {
+    return null
+  }
+
+  // Default rule: surface duration immediately for a single player,
+  // but avoid fanning out N metadata requests when the bubble is a
+  // thread of voice memos. An explicit `preload` prop overrides;
+  // per-track overrides live on `AudioItem.preload`.
+  const resolvedPreload: MediaPreloadMode =
+    preload ?? (resolvedItems.length > 1 ? 'none' : 'metadata')
+
+  return (
+    <Bubble
+      variant={variant}
+      text={text}
+      groupPosition={groupPosition}
+      data-testid="audio-attachment"
+    >
+      {/* Native `<audio controls>` already exposes a download in its
+          kebab menu, so we don't render a separate Download button.
+          The element also has no built-in title slot — the dismiss
+          button (Composer only) sits inline next to the player.
+          Stacked players get an 8px vertical gap so each track reads
+          as a discrete attachment. */}
+      <div className="flex flex-col gap-2">
+        {resolvedItems.map((item, index) => (
+          <NativeAudioPlayer
+            key={`${item.src}-${index}`}
+            item={item}
+            preload={resolvedPreload}
+            trailingAction={
+              // Composer only supports a single attachment, so the
+              // dismiss control sits on the only player.
+              showDismiss && index === 0 ? (
+                <DismissButton onClick={onDismiss!} variant="inline" />
+              ) : undefined
+            }
+          />
+        ))}
+      </div>
+    </Bubble>
+  )
+}
+
+/**
+ * Composer-only props. Single audio (`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 AudioComposerProps extends ComposerExtras {
+  src?: string
+  mimeType?: string
+  filename?: string
+  /** See `AudioAttachmentSharedProps.preload`. */
+  preload?: MediaPreloadMode
+}
+export type AudioSentProps = AudioAttachmentSharedProps
+export type AudioReceivedProps = AudioAttachmentSharedProps
+
+const AudioComposer: React.FC<AudioComposerProps> = (props) => (
+  <AudioAttachmentRow {...props} state="composer" />
+)
+const AudioSent: React.FC<AudioSentProps> = (props) => (
+  <AudioAttachmentRow {...props} state="sent" />
+)
+const AudioReceived: React.FC<AudioReceivedProps> = (props) => (
+  <AudioAttachmentRow {...props} state="received" />
+)
+
+const AudioAttachment = {
+  Composer: AudioComposer,
+  Sent: AudioSent,
+  Received: AudioReceived,
+}
+
+export default AudioAttachment

package/src/components/MessageAttachment/File/FileAttachment.stories.tsx

@@ -0,0 +1,352 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import {
+  StoryGrid,
+  StoryHeading,
+  StoryPage,
+  StoryRow,
+} from '../stories/StoryTable'
+import type { FileItem } from '../types'
+
+import FileAttachment from '.'
+
+const FILE_SRC = 'https://www.w3.org/WAI/WCAG21/wcag21.pdf'
+
+const STACK_FILES: FileItem[] = [
+  {
+    src: FILE_SRC,
+    filename: 'workout-plan.zip',
+    mimeType: 'application/zip',
+    fileSize: 2_457_600,
+  },
+  {
+    src: FILE_SRC,
+    filename: 'Q4-revenue.xlsx',
+    mimeType:
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    fileSize: 146_432,
+  },
+  {
+    src: FILE_SRC,
+    filename: 'brand-guidelines-2026.zip',
+    mimeType: 'application/zip',
+    fileSize: 11_500_000,
+  },
+  {
+    src: FILE_SRC,
+    filename: 'meeting-notes.docx',
+    mimeType:
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    fileSize: 28_672,
+  },
+]
+
+const meta: Meta = {
+  title: 'MessageAttachment/File',
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+const handleDismiss = () => {
+  // eslint-disable-next-line no-console
+  console.log('Dismissed file attachment')
+}
+
+/**
+ * Compact file row inside a chat bubble — typed icon + filename +
+ * `EXT · SIZE` — with a download icon in the trailing slot. Clicking
+ * any state (Composer / Sent / Received) downloads the asset.
+ */
+export const Single: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="File attachment"
+      description="Click any bubble to download. Trailing icon hints at the download action."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="Generic"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <FileAttachment.Sent
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+          />
+        }
+        received={
+          <FileAttachment.Received
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+          />
+        }
+      />
+      <StoryRow
+        label="Spreadsheet"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="Q4-revenue.xlsx"
+            mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            fileSize={146_432}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <FileAttachment.Sent
+            src={FILE_SRC}
+            filename="Q4-revenue.xlsx"
+            mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            fileSize={146_432}
+          />
+        }
+        received={
+          <FileAttachment.Received
+            src={FILE_SRC}
+            filename="Q4-revenue.xlsx"
+            mimeType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            fileSize={146_432}
+          />
+        }
+      />
+      <StoryRow
+        label="Long filename"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="brand-guidelines-2026-final-revision-with-color-tokens.zip"
+            mimeType="application/zip"
+            fileSize={11_500_000}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <FileAttachment.Sent
+            src={FILE_SRC}
+            filename="brand-guidelines-2026-final-revision-with-color-tokens.zip"
+            mimeType="application/zip"
+            fileSize={11_500_000}
+          />
+        }
+        received={
+          <FileAttachment.Received
+            src={FILE_SRC}
+            filename="brand-guidelines-2026-final-revision-with-color-tokens.zip"
+            mimeType="application/zip"
+            fileSize={11_500_000}
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+export const SingleWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="File with caption"
+      description="Caption sits inside the same bubble below the file row."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="Caption"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={
+          <FileAttachment.Sent
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            text="Here is the file"
+          />
+        }
+        received={
+          <FileAttachment.Received
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            text="Here is the file"
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/**
+ * Stacked file attachments — multiple files inside one bubble. Each
+ * row has its own download trigger, and rows are separated by an 8px
+ * gap to match stacked PDF / Audio.
+ *
+ * Sent + Received only — the composer surface accepts a single
+ * attachment at a time.
+ */
+export const Stacked: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked files"
+      description="Each row downloads independently. Composer column is intentionally blank — the composer accepts a single attachment at a time."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="2 files"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<FileAttachment.Sent items={STACK_FILES.slice(0, 2)} />}
+        received={<FileAttachment.Received items={STACK_FILES.slice(0, 2)} />}
+      />
+      <StoryRow
+        label="3 files"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<FileAttachment.Sent items={STACK_FILES.slice(0, 3)} />}
+        received={<FileAttachment.Received items={STACK_FILES.slice(0, 3)} />}
+      />
+      <StoryRow
+        label="4 files"
+        composer={
+          <FileAttachment.Composer
+            src={FILE_SRC}
+            filename="workout-plan.zip"
+            mimeType="application/zip"
+            fileSize={2_457_600}
+            onDismiss={handleDismiss}
+          />
+        }
+        sent={<FileAttachment.Sent items={STACK_FILES} />}
+        received={<FileAttachment.Received items={STACK_FILES} />}
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/**
+ * Bubble grouping — mirrors the corner-flattening stream-chat-react
+ * applies to text bubbles in a same-author run. The four positions
+ * (`single` / `first` / `middle` / `end`) flatten the corners that
+ * face the previous / next bubble in the cluster, so a `MessageAttachment`
+ * sitting inside a thread visually merges with the surrounding text
+ * bubbles instead of floating as its own ungrouped pill.
+ *
+ * Stack the four positions vertically with `gap-[2px]` to see them
+ * snap into a single visual run — the same gap stream uses between
+ * grouped messages.
+ */
+export const Grouping: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Bubble grouping"
+      description="Pass `groupPosition='single' | 'first' | 'middle' | 'end'` (or use `bubbleGroupPositionFromStream({ firstOfGroup, endOfGroup, groupedByUser })`) to make the attachment join a same-author message run. Sender bubbles flatten the corners on their right edge; receiver bubbles mirror onto the left."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="single"
+        sent={<FileAttachment.Sent {...STACK_FILES[0]} groupPosition="single" />}
+        received={
+          <FileAttachment.Received {...STACK_FILES[0]} groupPosition="single" />
+        }
+      />
+      <StoryRow
+        label="run of 3"
+        sent={
+          <div className="flex flex-col gap-[2px]">
+            <FileAttachment.Sent {...STACK_FILES[0]} groupPosition="first" />
+            <FileAttachment.Sent {...STACK_FILES[1]} groupPosition="middle" />
+            <FileAttachment.Sent {...STACK_FILES[2]} groupPosition="end" />
+          </div>
+        }
+        received={
+          <div className="flex flex-col gap-[2px]">
+            <FileAttachment.Received
+              {...STACK_FILES[0]}
+              groupPosition="first"
+            />
+            <FileAttachment.Received
+              {...STACK_FILES[1]}
+              groupPosition="middle"
+            />
+            <FileAttachment.Received {...STACK_FILES[2]} groupPosition="end" />
+          </div>
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)
+
+/** Stacked files with an accompanying caption.
+ *  Sent + Received only — see `Stacked` for the rationale. */
+export const StackedWithText: StoryFn = () => (
+  <StoryPage>
+    <StoryHeading
+      title="Stacked files with caption"
+      description="Caption sits inside the same bubble, below the file stack. Composer column is intentionally blank — the composer accepts a single attachment at a time."
+    />
+    <StoryGrid>
+      <StoryRow
+        label="3 files + caption"
+        sent={
+          <FileAttachment.Sent
+            items={STACK_FILES.slice(0, 3)}
+            text="Here are the deliverables — let me know if anything's missing."
+          />
+        }
+        received={
+          <FileAttachment.Received
+            items={STACK_FILES.slice(0, 3)}
+            text="Here are the deliverables — let me know if anything's missing."
+          />
+        }
+      />
+      <StoryRow
+        label="4 files + caption"
+        sent={
+          <FileAttachment.Sent
+            items={STACK_FILES}
+            text="Final pass for review."
+          />
+        }
+        received={
+          <FileAttachment.Received
+            items={STACK_FILES}
+            text="Final pass for review."
+          />
+        }
+      />
+    </StoryGrid>
+  </StoryPage>
+)