@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-IQJG4IDX.js

@@ -0,0 +1,208 @@
+"use client";
+
+// src/audio-visualizer.tsx
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { useLocale } from "@elabs-ai/components-ui";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AUDIO_VISUALIZER_STATE_KEYS = {
+  active: "ai.audioVisualizer.active",
+  idle: "ai.audioVisualizer.idle",
+  silent: "ai.audioVisualizer.silent"
+};
+var CANVAS_WIDTH = 320;
+var CANVAS_HEIGHT = 64;
+var DEFAULT_BAR_COUNT = 32;
+var DEFAULT_SENSITIVITY = 1;
+var DEFAULT_SILENCE_THRESHOLD = 0.04;
+var SMOOTHING_FACTOR = 0.35;
+var CONVERGENCE_EPSILON = 2e-3;
+var HYSTERESIS_RATIO = 0.25;
+var clamp01 = (value) => Math.min(1, Math.max(0, value));
+function normalizeBarCount(value) {
+  if (!Number.isFinite(value)) return DEFAULT_BAR_COUNT;
+  return Math.max(2, Math.round(value));
+}
+function hasConverged(display, target) {
+  for (let i = 0; i < target.length; i += 1) {
+    if (Math.abs((display[i] ?? 0) - (target[i] ?? 0)) > CONVERGENCE_EPSILON) return false;
+  }
+  return true;
+}
+function computeLevelBucket(average, loading, silenceThreshold, previous) {
+  if (loading) return "idle";
+  const margin = silenceThreshold * HYSTERESIS_RATIO;
+  if (average >= silenceThreshold + margin) return "active";
+  if (average < silenceThreshold - margin) return "silent";
+  if (previous === "idle") return average >= silenceThreshold ? "active" : "silent";
+  return previous;
+}
+function resampleLevels(levels, count, sensitivity) {
+  if (levels.length === 0) {
+    return new Array(count).fill(0);
+  }
+  const out = new Array(count);
+  for (let i = 0; i < count; i += 1) {
+    const sourceIndex = Math.min(levels.length - 1, Math.floor(i / count * levels.length));
+    out[i] = clamp01((levels[sourceIndex] ?? 0) * sensitivity);
+  }
+  return out;
+}
+function drawBars(ctx, levels, color) {
+  const { width, height } = ctx.canvas;
+  ctx.clearRect(0, 0, width, height);
+  const n = levels.length;
+  if (n === 0) return;
+  const gap = 2;
+  const barWidth = Math.max(1, (width - gap * (n - 1)) / n);
+  ctx.fillStyle = color;
+  for (let i = 0; i < n; i += 1) {
+    const level = levels[i] ?? 0;
+    const barHeight = Math.max(2, level * height);
+    const x = i * (barWidth + gap);
+    ctx.fillRect(x, height - barHeight, barWidth, barHeight);
+  }
+}
+function drawWave(ctx, levels, color) {
+  const { width, height } = ctx.canvas;
+  ctx.clearRect(0, 0, width, height);
+  const n = levels.length;
+  if (n < 2) return;
+  const midY = height / 2;
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  for (let i = 0; i < n; i += 1) {
+    const x = i / (n - 1) * width;
+    const y = midY - clamp01(levels[i] ?? 0) * midY;
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  }
+  for (let i = n - 1; i >= 0; i -= 1) {
+    const x = i / (n - 1) * width;
+    const y = midY + clamp01(levels[i] ?? 0) * midY;
+    ctx.lineTo(x, y);
+  }
+  ctx.closePath();
+  ctx.fill();
+}
+function resolveFillColor(canvas) {
+  const styles = getComputedStyle(canvas);
+  const token = styles.getPropertyValue("--color-primary").trim() || styles.getPropertyValue("--primary").trim();
+  return token || styles.color || "currentColor";
+}
+var AudioVisualizer = forwardRef(
+  function AudioVisualizer2({
+    className,
+    levels = [],
+    loading = false,
+    variant = "bars",
+    sensitivity = DEFAULT_SENSITIVITY,
+    barCount = DEFAULT_BAR_COUNT,
+    silenceThreshold = DEFAULT_SILENCE_THRESHOLD,
+    statusLabel,
+    ...props
+  }, ref) {
+    const { t } = useLocale();
+    const prefersReducedMotion = useReducedMotion();
+    const canvasRef = useRef(null);
+    const displayLevelsRef = useRef([]);
+    const rafRef = useRef(null);
+    const bucketRef = useRef("idle");
+    const [levelState, setLevelState] = useState("idle");
+    const [themeRevision, setThemeRevision] = useState(0);
+    const sampleCount = normalizeBarCount(barCount);
+    const targetLevels = useMemo(
+      () => resampleLevels(loading ? [] : levels, sampleCount, sensitivity),
+      [levels, loading, sampleCount, sensitivity]
+    );
+    useEffect(() => {
+      const canvas = canvasRef.current;
+      if (!canvas) return void 0;
+      const ctx = canvas.getContext("2d");
+      const average = targetLevels.reduce((sum, value) => sum + value, 0) / (targetLevels.length || 1);
+      const bucket = computeLevelBucket(average, loading, silenceThreshold, bucketRef.current);
+      if (bucket !== bucketRef.current) {
+        bucketRef.current = bucket;
+        setLevelState(bucket);
+      }
+      const paint = (paintLevels) => {
+        if (!ctx) return;
+        const color = resolveFillColor(canvas);
+        if (variant === "wave") drawWave(ctx, paintLevels, color);
+        else drawBars(ctx, paintLevels, color);
+      };
+      if (prefersReducedMotion || loading) {
+        displayLevelsRef.current = targetLevels;
+        paint(targetLevels);
+        return void 0;
+      }
+      if (displayLevelsRef.current.length !== targetLevels.length) {
+        displayLevelsRef.current = targetLevels.slice();
+      }
+      paint(displayLevelsRef.current);
+      const tick = () => {
+        const display = displayLevelsRef.current;
+        const next = display.map(
+          (value, i) => value + ((targetLevels[i] ?? 0) - value) * SMOOTHING_FACTOR
+        );
+        displayLevelsRef.current = next;
+        paint(next);
+        if (hasConverged(next, targetLevels)) return;
+        rafRef.current = requestAnimationFrame(tick);
+      };
+      rafRef.current = requestAnimationFrame(tick);
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      };
+    }, [targetLevels, variant, loading, prefersReducedMotion, silenceThreshold, themeRevision]);
+    useEffect(() => {
+      if (typeof document === "undefined") return void 0;
+      const observer = new MutationObserver(() => setThemeRevision((r) => r + 1));
+      observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["data-theme"]
+      });
+      return () => observer.disconnect();
+    }, []);
+    const label = statusLabel === null ? null : statusLabel ?? t(AUDIO_VISUALIZER_STATE_KEYS[levelState]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col gap-1", className),
+        "data-slot": "audio-visualizer",
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              "aria-hidden": "true",
+              className: "h-16 w-full rounded-md bg-muted",
+              "data-slot": "audio-visualizer-canvas",
+              height: CANVAS_HEIGHT,
+              ref: canvasRef,
+              width: CANVAS_WIDTH
+            }
+          ),
+          label !== null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "sr-only",
+              "data-slot": "audio-visualizer-status",
+              role: "status",
+              "aria-live": "polite",
+              children: label
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AudioVisualizer
+};
+//# sourceMappingURL=chunk-IQJG4IDX.js.map

package/dist/chunk-IQJG4IDX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/audio-visualizer.tsx"],"sourcesContent":["\"use client\";\n\nimport { useReducedMotion } from \"@elabs-ai/components-tokens\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\n\n/**\n * brand-ui is a presentation layer (D5, docs/DECISIONS.md §D5): this component\n * never calls `getUserMedia`, never owns an `AudioContext`, and starts nothing\n * on mount. It draws whatever `levels` a parent — who already has a\n * `MediaStream`/`AnalyserNode` — passes it, frame by frame. The analyser\n * plumbing, when a consumer genuinely wants it, is the separate, opt-in\n * `useAudioLevel` export in `./use-audio-level` — never something this\n * component reaches for itself. See issue #21.\n */\n\nexport type AudioVisualizerVariant = \"bars\" | \"wave\";\nexport type AudioVisualizerLevelState = \"idle\" | \"silent\" | \"active\";\n\n/**\n * Localized status announced when the discretized level state changes, one\n * key per `AudioVisualizerLevelState`. Typed as a `Record` (not a bare\n * template string) so a state value added later without a matching key here\n * fails to typecheck — same convention as `Persona`'s `PERSONA_STATE_KEYS`.\n */\nconst AUDIO_VISUALIZER_STATE_KEYS: Record<AudioVisualizerLevelState, string> = {\n  active: \"ai.audioVisualizer.active\",\n  idle: \"ai.audioVisualizer.idle\",\n  silent: \"ai.audioVisualizer.silent\",\n};\n\n// Fixed internal render resolution — the canvas is stretched to its CSS box\n// (see the className below), so this is a rendering-quality knob, not a\n// layout one. Picking a fixed size up front means the draw loop never has to\n// measure the DOM (no `getBoundingClientRect`/`offsetHeight` in the hot path).\nconst CANVAS_WIDTH = 320;\nconst CANVAS_HEIGHT = 64;\nconst DEFAULT_BAR_COUNT = 32;\nconst DEFAULT_SENSITIVITY = 1;\nconst DEFAULT_SILENCE_THRESHOLD = 0.04;\n/**\n * Fraction of the remaining distance to the target level closed per animation\n * frame — a fixed-cost lerp, never a growing history buffer, so the per-frame\n * cost stays O(barCount) no matter how long the session has run.\n */\nconst SMOOTHING_FACTOR = 0.35;\n/** Once every displayed level is within this of its target, the smoothing has\n * visually converged — stop scheduling more animation frames rather than\n * looping forever on a static input. */\nconst CONVERGENCE_EPSILON = 0.002;\n/**\n * Hysteresis margin (as a fraction of `silenceThreshold`) around the active/\n * silent boundary. A live signal hovering right at the threshold can cross it\n * on consecutive samples; without a dead zone, every such graze would flip\n * the announced `role=\"status\"` text, flooding assistive tech with\n * alternating \"active\"/\"no input\" announcements. A clear crossing (past the\n * margin on either side) still flips immediately — only a graze inside the\n * dead zone holds the previous state.\n */\nconst HYSTERESIS_RATIO = 0.25;\n\nconst clamp01 = (value: number) => Math.min(1, Math.max(0, value));\n\n/** A finite, rounded, >=2 bar count safe to use as an array length — an\n * unsanitized `barCount` (NaN, Infinity, a fractional value from a\n * misconfigured/computed prop) would otherwise throw `RangeError: Invalid\n * array length` the moment it reaches `new Array(count)`. */\nfunction normalizeBarCount(value: number): number {\n  if (!Number.isFinite(value)) return DEFAULT_BAR_COUNT;\n  return Math.max(2, Math.round(value));\n}\n\n/** True once every displayed level is within `CONVERGENCE_EPSILON` of its\n * target — i.e. the smoothing animation has nothing left to visibly close. */\nfunction hasConverged(display: number[], target: number[]): boolean {\n  for (let i = 0; i < target.length; i += 1) {\n    if (Math.abs((display[i] ?? 0) - (target[i] ?? 0)) > CONVERGENCE_EPSILON) return false;\n  }\n  return true;\n}\n\n/**\n * The discretized level bucket, with hysteresis around `silenceThreshold` —\n * see `HYSTERESIS_RATIO`. `previous` is only consulted inside the dead zone;\n * a clear reading on either side is decisive regardless of history.\n */\nfunction computeLevelBucket(\n  average: number,\n  loading: boolean,\n  silenceThreshold: number,\n  previous: AudioVisualizerLevelState,\n): AudioVisualizerLevelState {\n  if (loading) return \"idle\";\n  const margin = silenceThreshold * HYSTERESIS_RATIO;\n  if (average >= silenceThreshold + margin) return \"active\";\n  if (average < silenceThreshold - margin) return \"silent\";\n  // Inside the dead zone: hold the previous bucket. `previous` starts as\n  // \"idle\" (mount, or just-exited `loading`), which isn't itself a valid\n  // active/silent reading to hold onto — fall back to the plain threshold\n  // check for that one transition only.\n  if (previous === \"idle\") return average >= silenceThreshold ? \"active\" : \"silent\";\n  return previous;\n}\n\n/** Nearest-neighbor resample of an arbitrary-length sample array to `count`\n * entries, applying `sensitivity` and clamping to [0, 1]. Never allocates\n * more than `count` numbers, independent of `levels.length`. */\nfunction resampleLevels(levels: number[], count: number, sensitivity: number): number[] {\n  if (levels.length === 0) {\n    return new Array(count).fill(0);\n  }\n  const out = new Array<number>(count);\n  for (let i = 0; i < count; i += 1) {\n    const sourceIndex = Math.min(levels.length - 1, Math.floor((i / count) * levels.length));\n    out[i] = clamp01((levels[sourceIndex] ?? 0) * sensitivity);\n  }\n  return out;\n}\n\nfunction drawBars(ctx: CanvasRenderingContext2D, levels: number[], color: string) {\n  const { width, height } = ctx.canvas;\n  ctx.clearRect(0, 0, width, height);\n  const n = levels.length;\n  if (n === 0) return;\n  const gap = 2;\n  const barWidth = Math.max(1, (width - gap * (n - 1)) / n);\n  ctx.fillStyle = color;\n  for (let i = 0; i < n; i += 1) {\n    const level = levels[i] ?? 0;\n    const barHeight = Math.max(2, level * height);\n    const x = i * (barWidth + gap);\n    ctx.fillRect(x, height - barHeight, barWidth, barHeight);\n  }\n}\n\n/** Draws the CURRENT sample snapshot as a filled envelope (no history/scroll —\n * see the reduced-motion note on `AudioVisualizer` for why this shape never\n * accumulates state over time). */\nfunction drawWave(ctx: CanvasRenderingContext2D, levels: number[], color: string) {\n  const { width, height } = ctx.canvas;\n  ctx.clearRect(0, 0, width, height);\n  const n = levels.length;\n  if (n < 2) return;\n  const midY = height / 2;\n  ctx.fillStyle = color;\n  ctx.beginPath();\n  for (let i = 0; i < n; i += 1) {\n    const x = (i / (n - 1)) * width;\n    const y = midY - clamp01(levels[i] ?? 0) * midY;\n    if (i === 0) ctx.moveTo(x, y);\n    else ctx.lineTo(x, y);\n  }\n  for (let i = n - 1; i >= 0; i -= 1) {\n    const x = (i / (n - 1)) * width;\n    const y = midY + clamp01(levels[i] ?? 0) * midY;\n    ctx.lineTo(x, y);\n  }\n  ctx.closePath();\n  ctx.fill();\n}\n\n/** Resolves the bar/wave fill colour from tokens at draw time. `getComputedStyle`\n * resolves a CSS custom property's VALUE — unlike `getBoundingClientRect`/\n * `offsetHeight`, it never forces layout, so this is not a \"layout read\". */\nfunction resolveFillColor(canvas: HTMLCanvasElement): string {\n  const styles = getComputedStyle(canvas);\n  const token =\n    styles.getPropertyValue(\"--color-primary\").trim() ||\n    styles.getPropertyValue(\"--primary\").trim();\n  return token || styles.color || \"currentColor\";\n}\n\nexport interface AudioVisualizerProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n  /**\n   * Normalized 0–1 amplitude samples for the CURRENT frame — one per bar (or\n   * per sample point for `variant=\"wave\"`). Update this from your own\n   * analyser polling loop (or the opt-in `useAudioLevel` hook) on every frame\n   * you want reflected; the component never touches the microphone itself.\n   * Any length works — samples are resampled to `barCount`.\n   */\n  levels?: number[];\n  /** No stream connected yet — renders the idle baseline instead of `levels`. */\n  loading?: boolean;\n  /** `\"bars\"` (default) — a bar chart. `\"wave\"` — a filled envelope through the\n   * current samples. Both encode level as HEIGHT, never as hue alone. */\n  variant?: AudioVisualizerVariant;\n  /** Multiplies each level before clamping to [0, 1] — turn up for a quiet input. */\n  sensitivity?: number;\n  /** Number of bars/points drawn. */\n  barCount?: number;\n  /** Average level, 0–1, at/above which the status text reads \"active\". */\n  silenceThreshold?: number;\n  /**\n   * Visually-hidden text announced when the discretized level state changes.\n   * Defaults to a localized label (\"No input detected\" / \"Microphone\n   * active\" / …). Pass `null` when the consuming surface already renders its\n   * own live region, so assistive tech is not told twice.\n   */\n  statusLabel?: ReactNode | null;\n}\n\n/**\n * Live mic-level / waveform meter. Canvas-drawn (one element, no per-bar DOM,\n * so a `levels` prop updating every frame never costs React a 32-element\n * reconciliation) and driven entirely by the `levels` prop — see the module\n * doc comment for the presentation-layer boundary this enforces.\n *\n * The canvas is decorative (`aria-hidden`); the level itself is announced\n * through a throttled `role=\"status\"` text alternative — see `statusLabel`.\n *\n * Reduced motion: under `prefers-reduced-motion` (or while `loading`) the\n * component skips its internal smoothing animation entirely and paints the\n * raw `levels` directly on every prop change — a static bar chart of the\n * current levels, never a freeze mid-interpolation.\n */\nexport const AudioVisualizer = forwardRef<HTMLDivElement, AudioVisualizerProps>(\n  function AudioVisualizer(\n    {\n      className,\n      levels = [],\n      loading = false,\n      variant = \"bars\",\n      sensitivity = DEFAULT_SENSITIVITY,\n      barCount = DEFAULT_BAR_COUNT,\n      silenceThreshold = DEFAULT_SILENCE_THRESHOLD,\n      statusLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const { t } = useLocale();\n    const prefersReducedMotion = useReducedMotion();\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const displayLevelsRef = useRef<number[]>([]);\n    const rafRef = useRef<number | null>(null);\n    const bucketRef = useRef<AudioVisualizerLevelState>(\"idle\");\n    const [levelState, setLevelState] = useState<AudioVisualizerLevelState>(\"idle\");\n    // Bumped whenever `data-theme` actually changes on the document — see the\n    // MutationObserver effect below. `resolveFillColor` cannot read a token\n    // value that isn't there yet: a theme-setting provider (e.g.\n    // `ThemeProvider`) applies `data-theme` in its OWN mount effect, and React\n    // fires a CHILD's effects before its parent's, so this component's paint\n    // effect otherwise runs first and reads whatever the un-themed `:root`\n    // fallback resolves to. Re-running the paint once the attribute lands\n    // (rather than only on the next animation frame, which the `loading`/\n    // reduced-motion path never schedules) is what fixes both the first paint\n    // AND a theme change after mount.\n    const [themeRevision, setThemeRevision] = useState(0);\n\n    const sampleCount = normalizeBarCount(barCount);\n\n    const targetLevels = useMemo(\n      () => resampleLevels(loading ? [] : levels, sampleCount, sensitivity),\n      [levels, loading, sampleCount, sensitivity],\n    );\n\n    useEffect(() => {\n      const canvas = canvasRef.current;\n      if (!canvas) return undefined;\n      const ctx = canvas.getContext(\"2d\");\n\n      // The announced status always reflects the CURRENT target level,\n      // synchronously and independent of the smoothing animation below — a\n      // screen-reader user is never a lerp-frame behind the real signal, even\n      // though the visual bars/wave may still be easing toward it.\n      const average =\n        targetLevels.reduce((sum, value) => sum + value, 0) / (targetLevels.length || 1);\n      const bucket = computeLevelBucket(average, loading, silenceThreshold, bucketRef.current);\n      if (bucket !== bucketRef.current) {\n        bucketRef.current = bucket;\n        setLevelState(bucket);\n      }\n\n      const paint = (paintLevels: number[]) => {\n        if (!ctx) return;\n        const color = resolveFillColor(canvas);\n        if (variant === \"wave\") drawWave(ctx, paintLevels, color);\n        else drawBars(ctx, paintLevels, color);\n      };\n\n      if (prefersReducedMotion || loading) {\n        displayLevelsRef.current = targetLevels;\n        paint(targetLevels);\n        return undefined;\n      }\n\n      // Seed (or reset, on a `barCount` change) the smoothing buffer and paint\n      // this frame SYNCHRONOUSLY — the canvas and status text reflect the\n      // current `levels` immediately on mount/update, rather than waiting for\n      // the first `requestAnimationFrame` callback. The rAF loop below only\n      // has to run to carry the smoothing motion forward from here.\n      if (displayLevelsRef.current.length !== targetLevels.length) {\n        displayLevelsRef.current = targetLevels.slice();\n      }\n      paint(displayLevelsRef.current);\n\n      const tick = () => {\n        const display = displayLevelsRef.current;\n        const next = display.map(\n          (value, i) => value + ((targetLevels[i] ?? 0) - value) * SMOOTHING_FACTOR,\n        );\n        displayLevelsRef.current = next;\n        paint(next);\n        // Stop rescheduling once the smoothing has visually converged — the\n        // `targetLevels` dependency above restarts the loop the moment a real\n        // prop change gives it somewhere new to go.\n        if (hasConverged(next, targetLevels)) return;\n        rafRef.current = requestAnimationFrame(tick);\n      };\n\n      rafRef.current = requestAnimationFrame(tick);\n      return () => {\n        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      };\n      // `themeRevision` is the trigger; `resolveFillColor` re-reads the token\n      // live, so the value itself never needs to be a dependency.\n    }, [targetLevels, variant, loading, prefersReducedMotion, silenceThreshold, themeRevision]);\n\n    // Track `data-theme` (whatever sets it — `ThemeProvider`'s own mount\n    // effect, a later `setTheme` call, or Storybook's theme decorator) and\n    // re-run the paint effect above once it actually changes. Same fix as\n    // `InteractiveTerminal`'s identical `data-theme` race.\n    useEffect(() => {\n      if (typeof document === \"undefined\") return undefined;\n      const observer = new MutationObserver(() => setThemeRevision((r) => r + 1));\n      observer.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: [\"data-theme\"],\n      });\n      return () => observer.disconnect();\n    }, []);\n\n    const label =\n      statusLabel === null ? null : (statusLabel ?? t(AUDIO_VISUALIZER_STATE_KEYS[levelState]));\n\n    return (\n      <div\n        className={cn(\"flex flex-col gap-1\", className)}\n        data-slot=\"audio-visualizer\"\n        ref={ref}\n        {...props}\n      >\n        <canvas\n          aria-hidden=\"true\"\n          className=\"h-16 w-full rounded-md bg-muted\"\n          data-slot=\"audio-visualizer-canvas\"\n          height={CANVAS_HEIGHT}\n          ref={canvasRef}\n          width={CANVAS_WIDTH}\n        />\n        {label !== null && (\n          <span\n            className=\"sr-only\"\n            data-slot=\"audio-visualizer-status\"\n            role=\"status\"\n            aria-live=\"polite\"\n          >\n            {label}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":"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","names":["AudioVisualizer"]}

package/dist/chunk-IX2PXG4Y.js

@@ -0,0 +1,144 @@
+"use client";
+
+// src/conversation.tsx
+import { Button, downloadBlob, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ArrowDownIcon, DownloadIcon } from "lucide-react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Conversation = ({ className, isStreaming = false, ...props }) => /* @__PURE__ */ jsx(
+  StickToBottom,
+  {
+    className: cn("relative flex-1 overflow-y-hidden", className),
+    initial: "smooth",
+    resize: "smooth",
+    role: "log",
+    "aria-live": isStreaming ? "off" : "polite",
+    "aria-busy": isStreaming || void 0,
+    ...props
+  }
+);
+var ConversationContent = ({
+  className,
+  scrollClassName,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  StickToBottom.Content,
+  {
+    scrollClassName: cn("flex flex-col", scrollClassName),
+    className: cn(
+      "mx-auto flex w-full max-w-(--chat-column) flex-1 shrink-0 flex-col gap-8 p-4 pb-[calc(var(--chat-composer-inset,0px)+--spacing(4))]",
+      className
+    ),
+    ...props
+  }
+);
+var ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  actions,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className
+    ),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-medium text-body", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-body", children: description })
+      ] }),
+      actions ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-2", children: actions }) : null
+    ] })
+  }
+);
+var ConversationScrollButton = ({
+  className,
+  ...props
+}) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+  const { t } = useLocale();
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+  return !isAtBottom && /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        // Was `dark:bg-background dark:hover:bg-muted` — a hardcoded-dark
+        // branch invisible to any other registered theme (styling-and-tokens.md).
+        // `bg-background` already matches the `outline` variant's own default;
+        // the quieter `hover:bg-muted` (in place of `outline`'s default
+        // `hover:bg-accent`) now applies in every theme, not only the two
+        // shipped ones.
+        // `--chat-composer-inset`: lift the button clear of a floating
+        // `ChatShell variant="bare"` composer (0 anywhere else).
+        "absolute bottom-[calc(var(--chat-composer-inset,0px)+--spacing(4))] left-[50%] z-30 translate-x-[-50%] rounded-full bg-background hover:bg-muted",
+        className
+      ),
+      "aria-label": t("ai.turnStatus.scrollToBottom"),
+      onClick: handleScrollToBottom,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+    }
+  );
+};
+var getMessageText = (message) => message.parts.filter((part) => part.type === "text").map((part) => part.text).join("");
+var defaultFormatMessage = (message) => {
+  const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);
+  return `**${roleLabel}:** ${getMessageText(message)}`;
+};
+var messagesToMarkdown = (messages, formatMessage = defaultFormatMessage) => messages.map((msg, i) => formatMessage(msg, i)).join("\n\n");
+var ConversationDownload = ({
+  messages,
+  filename = "conversation.md",
+  formatMessage = defaultFormatMessage,
+  className,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale();
+  const handleDownload = useCallback(() => {
+    const markdown = messagesToMarkdown(messages, formatMessage);
+    downloadBlob(new Blob([markdown], { type: "text/markdown" }), filename);
+  }, [messages, filename, formatMessage]);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn(
+        // See `ConversationScrollButton` — was a hardcoded-dark-only branch;
+        // `bg-background hover:bg-muted` now applies in every theme.
+        "absolute top-4 end-4 rounded-full bg-background hover:bg-muted",
+        className
+      ),
+      "aria-label": t("ai.conversation.download"),
+      onClick: handleDownload,
+      size: "icon",
+      type: "button",
+      variant: "outline",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(DownloadIcon, { className: "size-4" })
+    }
+  );
+};
+
+export {
+  Conversation,
+  ConversationContent,
+  ConversationEmptyState,
+  ConversationScrollButton,
+  messagesToMarkdown,
+  ConversationDownload
+};
+//# sourceMappingURL=chunk-IX2PXG4Y.js.map

package/dist/chunk-IX2PXG4Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/conversation.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button, downloadBlob, useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { UIMessage } from \"ai\";\nimport { ArrowDownIcon, DownloadIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { useCallback } from \"react\";\nimport { StickToBottom, useStickToBottomContext } from \"use-stick-to-bottom\";\n\nexport type ConversationProps = ComponentProps<typeof StickToBottom> & {\n  /**\n   * The assistant response is still arriving (loading-states.md\n   * `isStreaming`). `role=\"log\"` otherwise announces every incoming token to\n   * assistive tech as it streams in — deafening. While `true`, `aria-live`\n   * is suppressed (`\"off\"`) and `aria-busy` is set; once streaming ends,\n   * `aria-live` returns to `\"polite\"` so the settled content is what\n   * actually gets announced.\n   * @default false\n   */\n  isStreaming?: boolean;\n};\n\nexport const Conversation = ({ className, isStreaming = false, ...props }: ConversationProps) => (\n  <StickToBottom\n    className={cn(\"relative flex-1 overflow-y-hidden\", className)}\n    initial=\"smooth\"\n    resize=\"smooth\"\n    role=\"log\"\n    aria-live={isStreaming ? \"off\" : \"polite\"}\n    aria-busy={isStreaming || undefined}\n    {...props}\n  />\n);\n\nexport type ConversationContentProps = ComponentProps<typeof StickToBottom.Content>;\n\nexport const ConversationContent = ({\n  className,\n  scrollClassName,\n  ...props\n}: ConversationContentProps) => (\n  <StickToBottom.Content\n    // `use-stick-to-bottom` renders a scroll viewport (`scrollClassName`)\n    // wrapping a content div (`className`, via `...props`). The viewport must\n    // be a flex column so its height is a DEFINITE main size the content div\n    // can consume via `flex-1` — a bare `height:100%` on the content div\n    // can't resolve against a block-level parent whose own height is\n    // `min-height`-only (the #72 empty-state-pinned-to-the-top bug).\n    scrollClassName={cn(\"flex flex-col\", scrollClassName)}\n    // Inside a `ChatShell variant=\"bare\"` the composer floats over the\n    // transcript: the shell publishes `--chat-composer-inset` (its measured\n    // height) so the last turn scrolls clear of it, and `--chat-column` so\n    // turns share the composer's reading column. Outside such a shell both\n    // variables are unset: the inset falls back to 0 and `max-width` to none.\n    // `shrink-0`, never `min-h-0`: the content div must grow with its turns.\n    // Clamped to the viewport height, the turns overflow it and its bottom\n    // padding stays behind at the viewport's edge, so the last turn ends up\n    // under the floating composer instead of above it.\n    className={cn(\n      \"mx-auto flex w-full max-w-(--chat-column) flex-1 shrink-0 flex-col gap-8 p-4 pb-[calc(var(--chat-composer-inset,0px)+--spacing(4))]\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport type ConversationEmptyStateProps = ComponentProps<\"div\"> & {\n  title?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  /** Primary / secondary action(s) below the description (e.g. suggested prompts). */\n  actions?: React.ReactNode;\n};\n\nexport const ConversationEmptyState = ({\n  className,\n  title = \"No messages yet\",\n  description = \"Start a conversation to see messages here\",\n  icon,\n  actions,\n  children,\n  ...props\n}: ConversationEmptyStateProps) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\",\n      className,\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon && <div className=\"text-muted-foreground\">{icon}</div>}\n        <div className=\"space-y-1\">\n          <h3 className=\"font-medium text-body\">{title}</h3>\n          {description && <p className=\"text-muted-foreground text-body\">{description}</p>}\n        </div>\n        {actions ? <div className=\"mt-1 flex items-center gap-2\">{actions}</div> : null}\n      </>\n    )}\n  </div>\n);\n\nexport type ConversationScrollButtonProps = ComponentProps<typeof Button>;\n\nexport const ConversationScrollButton = ({\n  className,\n  ...props\n}: ConversationScrollButtonProps) => {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n  const { t } = useLocale();\n\n  const handleScrollToBottom = useCallback(() => {\n    scrollToBottom();\n  }, [scrollToBottom]);\n\n  return (\n    !isAtBottom && (\n      <Button\n        className={cn(\n          // Was `dark:bg-background dark:hover:bg-muted` — a hardcoded-dark\n          // branch invisible to any other registered theme (styling-and-tokens.md).\n          // `bg-background` already matches the `outline` variant's own default;\n          // the quieter `hover:bg-muted` (in place of `outline`'s default\n          // `hover:bg-accent`) now applies in every theme, not only the two\n          // shipped ones.\n          // `--chat-composer-inset`: lift the button clear of a floating\n          // `ChatShell variant=\"bare\"` composer (0 anywhere else).\n          \"absolute bottom-[calc(var(--chat-composer-inset,0px)+--spacing(4))] left-[50%] z-30 translate-x-[-50%] rounded-full bg-background hover:bg-muted\",\n          className,\n        )}\n        aria-label={t(\"ai.turnStatus.scrollToBottom\")}\n        onClick={handleScrollToBottom}\n        size=\"icon\"\n        type=\"button\"\n        variant=\"outline\"\n        {...props}\n      >\n        <ArrowDownIcon className=\"size-4\" />\n      </Button>\n    )\n  );\n};\n\nconst getMessageText = (message: UIMessage): string =>\n  message.parts\n    .filter((part) => part.type === \"text\")\n    .map((part) => part.text)\n    .join(\"\");\n\nexport type ConversationDownloadProps = Omit<ComponentProps<typeof Button>, \"onClick\"> & {\n  messages: UIMessage[];\n  filename?: string;\n  formatMessage?: (message: UIMessage, index: number) => string;\n};\n\nconst defaultFormatMessage = (message: UIMessage): string => {\n  const roleLabel = message.role.charAt(0).toUpperCase() + message.role.slice(1);\n  return `**${roleLabel}:** ${getMessageText(message)}`;\n};\n\nexport const messagesToMarkdown = (\n  messages: UIMessage[],\n  formatMessage: (message: UIMessage, index: number) => string = defaultFormatMessage,\n): string => messages.map((msg, i) => formatMessage(msg, i)).join(\"\\n\\n\");\n\nexport const ConversationDownload = ({\n  messages,\n  filename = \"conversation.md\",\n  formatMessage = defaultFormatMessage,\n  className,\n  children,\n  ...props\n}: ConversationDownloadProps) => {\n  const { t } = useLocale();\n  const handleDownload = useCallback(() => {\n    const markdown = messagesToMarkdown(messages, formatMessage);\n    downloadBlob(new Blob([markdown], { type: \"text/markdown\" }), filename);\n  }, [messages, filename, formatMessage]);\n\n  return (\n    <Button\n      className={cn(\n        // See `ConversationScrollButton` — was a hardcoded-dark-only branch;\n        // `bg-background hover:bg-muted` now applies in every theme.\n        \"absolute top-4 end-4 rounded-full bg-background hover:bg-muted\",\n        className,\n      )}\n      aria-label={t(\"ai.conversation.download\")}\n      onClick={handleDownload}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"outline\"\n      {...props}\n    >\n      {children ?? <DownloadIcon className=\"size-4\" />}\n    </Button>\n  );\n};\n"],"mappings":"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","names":[]}