@elabs-ai/components-ai 4.0.0

package/src/asset-preview.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+/**
+ * AssetPreview — type-keyed preview of one produced asset (#193, research 04
+ * §5 ASSET-4). Reuses the `Artifact` chrome for the header/actions; the body
+ * switches on `ContextAsset.type`:
+ *
+ *   markdown → `MarkdownView` (the branded renderer — a document, never
+ *              Shiki source; the ASSET-2 fix)
+ *   code/sql → `CodeBlock` (Shiki)
+ *   csv      → a small token-styled table + row-count summary
+ *   image    → an image preview
+ *
+ * A Preview / Raw toggle serves users who want the source (Raw = `CodeBlock`,
+ * soft-wrapped for narrow embeds). Selection state lives in the
+ * `ContextPanelProvider` — the tree and this preview are the two levels of the
+ * drill-in.
+ *
+ * Formats beyond that switch — a PDF, a spreadsheet, a video — arrive through
+ * `renderPreview` (prop, or injected once on `ContextPanelProvider`), because
+ * `@elabs-ai/components-viewer` is a layer PEER of this package and
+ * neither may import the other (ADR 0024 §6). A renderer that returns `null`
+ * declines, and everything below runs exactly as before.
+ */
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { HTMLAttributes, ReactNode } from "react";
+import { useMemo, useState } from "react";
+import type { BundledLanguage } from "shiki";
+import {
+  Artifact,
+  ArtifactActions,
+  ArtifactContent,
+  ArtifactHeader,
+  ArtifactTitle,
+} from "./artifact";
+import { CodeBlock } from "./code-block";
+import type { AssetPreviewRenderer, ContextAsset } from "./context-panel";
+import { useAssetPreviewRenderer } from "./context-panel";
+import { MarkdownView } from "./markdown-view";
+
+export type AssetPreviewMode = "preview" | "raw";
+
+const DEFAULT_CODE_LANGUAGE: BundledLanguage = "typescript";
+
+/** Raw-mode (and code-preview) Shiki language for an asset. */
+function assetLanguage(asset: ContextAsset): BundledLanguage {
+  switch (asset.type) {
+    case "markdown":
+      return "markdown";
+    case "sql":
+      return "sql";
+    case "csv":
+      return "csv";
+    case "code":
+      return (asset.language as BundledLanguage) ?? DEFAULT_CODE_LANGUAGE;
+    default:
+      return DEFAULT_CODE_LANGUAGE;
+  }
+}
+
+interface ParsedCsv {
+  header: string[];
+  rows: string[][];
+}
+
+/** Minimal preview-grade CSV split (no quoted-comma handling — it's a glance, not a grid). */
+function parseCsv(content: string): ParsedCsv {
+  const lines = content
+    .trim()
+    .split(/\r?\n/)
+    .filter((line) => line.length > 0);
+  const [head = "", ...rest] = lines;
+  const split = (line: string) => line.split(",").map((cell) => cell.trim());
+  return { header: split(head), rows: rest.map(split) };
+}
+
+const CsvPreview = ({ content }: { content: string }) => {
+  const { header, rows } = useMemo(() => parseCsv(content), [content]);
+  return (
+    <div className="flex flex-col gap-2">
+      <Table className="text-body tabular-nums">
+        <TableHeader>
+          <TableRow>
+            {header.map((cell) => (
+              <TableHead key={cell}>{cell}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((row, rowIndex) => (
+            // Rows have no stable identity in raw CSV — index is the key.
+            // oxlint-disable-next-line eslint-plugin-react(no-array-index-key)
+            <TableRow key={`row-${rowIndex}`}>
+              {row.map((cell, cellIndex) => (
+                // oxlint-disable-next-line eslint-plugin-react(no-array-index-key)
+                <TableCell key={`cell-${rowIndex}-${cellIndex}`}>{cell}</TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <p className="text-meta text-muted-foreground">
+        {rows.length} {rows.length === 1 ? "row" : "rows"}
+      </p>
+    </div>
+  );
+};
+
+export interface AssetPreviewProps extends HTMLAttributes<HTMLDivElement> {
+  asset: ContextAsset;
+  /** Initial mode. Default `"preview"`. */
+  defaultMode?: AssetPreviewMode;
+  /**
+   * Draw this asset's preview body yourself; return `null` to decline and get
+   * the built-in rendering. Wins over a renderer injected on
+   * `ContextPanelProvider`, so one rail-wide default can still be overridden
+   * for a single preview.
+   */
+  renderPreview?: AssetPreviewRenderer;
+}
+
+export const AssetPreview = ({
+  asset,
+  defaultMode = "preview",
+  renderPreview,
+  className,
+  ...props
+}: AssetPreviewProps) => {
+  const [mode, setMode] = useState<AssetPreviewMode>(defaultMode);
+  const injectedRenderer = useAssetPreviewRenderer();
+  const content = asset.content ?? "";
+  // Raw source only exists for text assets with content.
+  const hasRaw = asset.type !== "image" && content.length > 0;
+  const showRaw = mode === "raw" && hasRaw;
+
+  // Raw is "show me the source", so an injection never intercepts it.
+  const render = renderPreview ?? injectedRenderer;
+  const injected = !showRaw && render ? render(asset) : null;
+
+  let body: ReactNode;
+  if (injected !== null) {
+    body = injected;
+  } else if (asset.type !== "image" && content.length === 0) {
+    body = <p className="text-body text-muted-foreground">No preview available…</p>;
+  } else if (showRaw) {
+    body = <CodeBlock code={content} language={assetLanguage(asset)} wrap />;
+  } else {
+    switch (asset.type) {
+      case "markdown": {
+        // Constrained heading rung inside the narrow rail (research 09 §G.2).
+        body = <MarkdownView baseHeadingLevel={2}>{content}</MarkdownView>;
+        break;
+      }
+      case "code":
+      case "sql": {
+        body = <CodeBlock code={content} language={assetLanguage(asset)} showLineNumbers wrap />;
+        break;
+      }
+      case "csv": {
+        body = <CsvPreview content={content} />;
+        break;
+      }
+      case "image": {
+        body = (
+          <img
+            src={content || asset.path}
+            alt={asset.name}
+            loading="lazy"
+            className="max-w-full rounded-md"
+          />
+        );
+        break;
+      }
+    }
+  }
+
+  return (
+    <Artifact data-slot="asset-preview" className={className} {...props}>
+      <ArtifactHeader>
+        <ArtifactTitle className="min-w-0 truncate">{asset.name}</ArtifactTitle>
+        {hasRaw ? (
+          <ArtifactActions>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-pressed={!showRaw}
+              className={cn(!showRaw && "bg-accent text-accent-foreground")}
+              onClick={() => setMode("preview")}
+            >
+              Preview
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-pressed={showRaw}
+              className={cn(showRaw && "bg-accent text-accent-foreground")}
+              onClick={() => setMode("raw")}
+            >
+              Raw
+            </Button>
+          </ArtifactActions>
+        ) : null}
+      </ArtifactHeader>
+      <ArtifactContent>{body}</ArtifactContent>
+    </Artifact>
+  );
+};

package/src/attachments.tsx

@@ -0,0 +1,393 @@
+"use client";
+
+import { Button } from "@elabs-ai/components-ui";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { FileUIPart, SourceDocumentUIPart } from "ai";
+import {
+  FileTextIcon,
+  GlobeIcon,
+  ImageIcon,
+  Music2Icon,
+  PaperclipIcon,
+  VideoIcon,
+  XIcon,
+} from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AttachmentData =
+  | (FileUIPart & { id: string })
+  | (SourceDocumentUIPart & { id: string });
+
+export type AttachmentMediaCategory =
+  | "image"
+  | "video"
+  | "audio"
+  | "document"
+  | "source"
+  | "unknown";
+
+export type AttachmentVariant = "grid" | "inline" | "list";
+
+const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof ImageIcon> = {
+  audio: Music2Icon,
+  document: FileTextIcon,
+  image: ImageIcon,
+  source: GlobeIcon,
+  unknown: PaperclipIcon,
+  video: VideoIcon,
+};
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+export const getMediaCategory = (data: AttachmentData): AttachmentMediaCategory => {
+  if (data.type === "source-document") {
+    return "source";
+  }
+
+  const mediaType = data.mediaType ?? "";
+
+  if (mediaType.startsWith("image/")) {
+    return "image";
+  }
+  if (mediaType.startsWith("video/")) {
+    return "video";
+  }
+  if (mediaType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
+    return "document";
+  }
+
+  return "unknown";
+};
+
+export const getAttachmentLabel = (data: AttachmentData): string => {
+  if (data.type === "source-document") {
+    return data.title || data.filename || "Source";
+  }
+
+  const category = getMediaCategory(data);
+  return data.filename || (category === "image" ? "Image" : "Attachment");
+};
+
+const renderAttachmentImage = (url: string, filename: string | undefined, isGrid: boolean) =>
+  isGrid ? (
+    <img
+      alt={filename || "Image"}
+      className="size-full object-cover"
+      height={96}
+      src={url}
+      width={96}
+    />
+  ) : (
+    <img
+      alt={filename || "Image"}
+      className="size-full rounded object-cover"
+      height={20}
+      src={url}
+      width={20}
+    />
+  );
+
+// ============================================================================
+// Contexts
+// ============================================================================
+
+interface AttachmentsContextValue {
+  variant: AttachmentVariant;
+}
+
+const AttachmentsContext = createContext<AttachmentsContextValue | null>(null);
+
+interface AttachmentContextValue {
+  data: AttachmentData;
+  mediaCategory: AttachmentMediaCategory;
+  onRemove?: () => void;
+  variant: AttachmentVariant;
+}
+
+const AttachmentContext = createContext<AttachmentContextValue | null>(null);
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export const useAttachmentsContext = () =>
+  useContext(AttachmentsContext) ?? { variant: "grid" as const };
+
+export const useAttachmentContext = () => {
+  const ctx = useContext(AttachmentContext);
+  if (!ctx) {
+    throw new Error("Attachment components must be used within <Attachment>");
+  }
+  return ctx;
+};
+
+// ============================================================================
+// Attachments - Container
+// ============================================================================
+
+export type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
+  variant?: AttachmentVariant;
+};
+
+export const Attachments = ({
+  variant = "grid",
+  className,
+  children,
+  ...props
+}: AttachmentsProps) => {
+  const contextValue = useMemo(() => ({ variant }), [variant]);
+
+  return (
+    <AttachmentsContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex items-start",
+          variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+          variant === "grid" && "ms-auto w-fit",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AttachmentsContext.Provider>
+  );
+};
+
+// ============================================================================
+// Attachment - Item
+// ============================================================================
+
+export type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
+  data: AttachmentData;
+  onRemove?: () => void;
+};
+
+export const Attachment = ({ data, onRemove, className, children, ...props }: AttachmentProps) => {
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = getMediaCategory(data);
+
+  const contextValue = useMemo<AttachmentContextValue>(
+    () => ({ data, mediaCategory, onRemove, variant }),
+    [data, mediaCategory, onRemove, variant],
+  );
+
+  return (
+    <AttachmentContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "group relative",
+          variant === "grid" && "size-24 overflow-hidden rounded-lg",
+          variant === "inline" && [
+            "flex h-8 cursor-pointer select-none items-center gap-1.5",
+            "rounded-md border border-border px-1.5",
+            "font-medium text-sm transition-colors duration-fast ease-standard motion-reduce:transition-none",
+            "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          ],
+          variant === "list" && [
+            "flex w-full items-center gap-3 rounded-lg border p-3",
+            "hover:bg-accent/50",
+          ],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AttachmentContext.Provider>
+  );
+};
+
+// ============================================================================
+// AttachmentPreview - Media preview
+// ============================================================================
+
+export type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  fallbackIcon?: ReactNode;
+};
+
+export const AttachmentPreview = ({
+  fallbackIcon,
+  className,
+  ...props
+}: AttachmentPreviewProps) => {
+  const { data, mediaCategory, variant } = useAttachmentContext();
+
+  const iconSize = variant === "inline" ? "size-3" : "size-4";
+
+  const renderIcon = (Icon: typeof ImageIcon) => (
+    <Icon className={cn(iconSize, "text-muted-foreground")} />
+  );
+
+  const renderContent = () => {
+    if (mediaCategory === "image" && data.type === "file" && data.url) {
+      return renderAttachmentImage(data.url, data.filename, variant === "grid");
+    }
+
+    if (mediaCategory === "video" && data.type === "file" && data.url) {
+      return <video className="size-full object-cover" muted src={data.url} />;
+    }
+
+    const Icon = mediaCategoryIcons[mediaCategory];
+    return fallbackIcon ?? renderIcon(Icon);
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center justify-center overflow-hidden",
+        variant === "grid" && "size-full bg-muted",
+        variant === "inline" && "size-5 rounded bg-background",
+        variant === "list" && "size-12 rounded bg-muted",
+        className,
+      )}
+      {...props}
+    >
+      {renderContent()}
+    </div>
+  );
+};
+
+// ============================================================================
+// AttachmentInfo - Name and type display
+// ============================================================================
+
+export type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
+  showMediaType?: boolean;
+};
+
+export const AttachmentInfo = ({
+  showMediaType = false,
+  className,
+  ...props
+}: AttachmentInfoProps) => {
+  const { data, variant } = useAttachmentContext();
+  const label = getAttachmentLabel(data);
+
+  if (variant === "grid") {
+    return null;
+  }
+
+  return (
+    <div className={cn("min-w-0 flex-1", className)} {...props}>
+      <span className="block truncate">{label}</span>
+      {showMediaType && data.mediaType && (
+        <span className="block truncate text-muted-foreground text-xs">{data.mediaType}</span>
+      )}
+    </div>
+  );
+};
+
+// ============================================================================
+// AttachmentRemove - Remove button
+// ============================================================================
+
+export type AttachmentRemoveProps = ComponentProps<typeof Button> & {
+  label?: string;
+};
+
+export const AttachmentRemove = ({
+  label = "Remove",
+  className,
+  children,
+  ...props
+}: AttachmentRemoveProps) => {
+  const { onRemove, variant } = useAttachmentContext();
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onRemove?.();
+    },
+    [onRemove],
+  );
+
+  if (!onRemove) {
+    return null;
+  }
+
+  return (
+    <Button
+      aria-label={label}
+      className={cn(
+        variant === "grid" && [
+          "absolute top-2 end-2 size-6 rounded-full p-0",
+          "bg-background/80 backdrop-blur-sm",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "hover:bg-background",
+          "[&>svg]:size-3",
+        ],
+        variant === "inline" && [
+          "size-5 rounded p-0",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "[&>svg]:size-2.5",
+        ],
+        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        className,
+      )}
+      onClick={handleClick}
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <XIcon />}
+      <span className="sr-only">{label}</span>
+    </Button>
+  );
+};
+
+// ============================================================================
+// AttachmentHoverCard - Hover preview
+// ============================================================================
+
+export type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
+
+export const AttachmentHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}: AttachmentHoverCardProps) => (
+  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
+);
+
+export type AttachmentHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
+
+export const AttachmentHoverCardTrigger = (props: AttachmentHoverCardTriggerProps) => (
+  <HoverCardTrigger {...props} />
+);
+
+export type AttachmentHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
+
+export const AttachmentHoverCardContent = ({
+  align = "start",
+  className,
+  ...props
+}: AttachmentHoverCardContentProps) => (
+  <HoverCardContent align={align} className={cn("w-auto p-2", className)} {...props} />
+);
+
+// ============================================================================
+// AttachmentEmpty - Empty state
+// ============================================================================
+
+export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
+
+export const AttachmentEmpty = ({ className, children, ...props }: AttachmentEmptyProps) => (
+  <div
+    className={cn("flex items-center justify-center p-4 text-muted-foreground text-sm", className)}
+    {...props}
+  >
+    {children ?? "No attachments"}
+  </div>
+);

package/src/audio-player.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+
+import {
+  AudioPlayer,
+  AudioPlayerControlBar,
+  AudioPlayerDurationDisplay,
+  AudioPlayerElement,
+  AudioPlayerMuteButton,
+  AudioPlayerPlayButton,
+  AudioPlayerSeekBackwardButton,
+  AudioPlayerSeekForwardButton,
+  AudioPlayerTimeDisplay,
+  AudioPlayerTimeRange,
+  AudioPlayerVolumeRange,
+} from "./audio-player";
+
+const meta = {
+  title: "AI/AudioPlayer",
+  component: AudioPlayer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A token-themed **media-chrome** audio player for spoken agent replies. Every " +
+          "control is a media-chrome custom element re-skinned through the `--media-*` " +
+          "custom properties, so it tracks the active theme. The engine is loaded through " +
+          "a dynamic `import()` (ADR 0019) — it is not in any consumer's entry chunk — so " +
+          "the player renders a layout-shaped `Skeleton` for the first frame.",
+      },
+    },
+  },
+} satisfies Meta<typeof AudioPlayer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A ~1.5 s silent 8-bit mono WAV, synthesized at module scope so the story needs
+ * no network origin (see `docs/CSP-AND-NETWORK.md`) and no binary fixture.
+ */
+function silentWavSrc(seconds = 1.5, sampleRate = 8000): string {
+  const samples = Math.floor(seconds * sampleRate);
+  const bytes = new Uint8Array(44 + samples).fill(128); // 128 == silence, 8-bit unsigned
+  const view = new DataView(bytes.buffer);
+  const ascii = (offset: number, text: string) => {
+    for (let i = 0; i < text.length; i += 1) view.setUint8(offset + i, text.charCodeAt(i));
+  };
+  ascii(0, "RIFF");
+  view.setUint32(4, 36 + samples, true);
+  ascii(8, "WAVEfmt ");
+  view.setUint32(16, 16, true); // PCM header size
+  view.setUint16(20, 1, true); // format: PCM
+  view.setUint16(22, 1, true); // channels: mono
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate, true); // byte rate
+  view.setUint16(32, 1, true); // block align
+  view.setUint16(34, 8, true); // bits per sample
+  ascii(36, "data");
+  view.setUint32(40, samples, true);
+
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return `data:audio/wav;base64,${btoa(binary)}`;
+}
+
+const SILENT_WAV = silentWavSrc();
+
+export const Default: Story = {
+  render: () => (
+    <AudioPlayer className="block w-full max-w-lg rounded-md border">
+      <AudioPlayerElement src={SILENT_WAV} />
+      <AudioPlayerControlBar>
+        <AudioPlayerSeekBackwardButton />
+        <AudioPlayerPlayButton />
+        <AudioPlayerSeekForwardButton />
+        <AudioPlayerTimeDisplay />
+        <AudioPlayerTimeRange />
+        <AudioPlayerDurationDisplay />
+        <AudioPlayerMuteButton />
+        <AudioPlayerVolumeRange />
+      </AudioPlayerControlBar>
+    </AudioPlayer>
+  ),
+  play: async ({ canvasElement }) => {
+    // media-chrome arrives in a lazy chunk (#313): the controls are absent for
+    // the first frame, so this also locks in that the chunk actually resolves.
+    await waitFor(
+      () => {
+        expect(canvasElement.querySelector("media-controller")).not.toBeNull();
+        expect(canvasElement.querySelector("media-play-button")).not.toBeNull();
+        expect(canvasElement.querySelector("media-time-range")).not.toBeNull();
+      },
+      { timeout: 10000 },
+    );
+  },
+};