@elabs-ai/components-ai 4.0.0

package/src/chat.stories.tsx

@@ -0,0 +1,99 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Conversation, ConversationContent, ConversationScrollButton } from "./conversation";
+import { Message, MessageContent, MessageResponse } from "./message";
+import { Composer } from "./composer";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./reasoning";
+import { Source, Sources, SourcesContent, SourcesTrigger } from "./sources";
+
+interface Msg {
+  id: string;
+  role: "user" | "assistant";
+  text: string;
+  reasoning?: string;
+}
+
+const initial: Msg[] = [
+  { id: "1", role: "user", text: "What changed in last week's deploys?" },
+  {
+    id: "2",
+    role: "assistant",
+    text: "Three services shipped this week. **Billing** is currently degraded — elevated p95 latency after the last rollout.",
+    reasoning:
+      "Queried CI for the last 7 days, grouped by service, then cross-referenced the rollback log to flag regressions.",
+  },
+];
+
+function ChatExample() {
+  const [messages, setMessages] = useState<Msg[]>(initial);
+  const [status, setStatus] = useState<"ready" | "submitted">("ready");
+
+  const send = (text: string) => {
+    setMessages((m) => [...m, { id: String(m.length + 1), role: "user", text }]);
+    setStatus("submitted");
+    setTimeout(() => {
+      setMessages((m) => [
+        ...m,
+        {
+          id: String(m.length + 1),
+          role: "assistant",
+          text: "Three services shipped; billing is degraded.",
+        },
+      ]);
+      setStatus("ready");
+    }, 600);
+  };
+
+  return (
+    <div className="mx-auto flex h-[640px] max-w-2xl flex-col overflow-hidden rounded-xl border">
+      <Conversation className="flex-1">
+        <ConversationContent>
+          {messages.map((m) => (
+            <Message from={m.role} key={m.id}>
+              <MessageContent>
+                {m.reasoning ? (
+                  <Reasoning>
+                    <ReasoningTrigger />
+                    <ReasoningContent>{m.reasoning}</ReasoningContent>
+                  </Reasoning>
+                ) : null}
+                <MessageResponse>{m.text}</MessageResponse>
+                {m.role === "assistant" ? (
+                  <Sources>
+                    <SourcesTrigger count={2} />
+                    <SourcesContent>
+                      <Source href="https://example.com" title="Deploy log — wk 23" />
+                      <Source href="https://example.com" title="Billing runbook" />
+                    </SourcesContent>
+                  </Sources>
+                ) : null}
+              </MessageContent>
+            </Message>
+          ))}
+        </ConversationContent>
+        <ConversationScrollButton />
+      </Conversation>
+
+      <Composer
+        className="m-3 mt-0"
+        placeholder="Ask about deploys…"
+        status={status === "submitted" ? "Generating…" : "Awaiting your input"}
+        sendStatus={status}
+        onSubmit={(message) => {
+          const text = message.text?.trim();
+          if (text) send(text);
+        }}
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: "AI/Chat",
+  component: ChatExample,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof ChatExample>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/checkpoint.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Button } from "@elabs-ai/components-ui";
+import { Separator } from "@elabs-ai/components-ui";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import type { LucideProps } from "lucide-react";
+import { BookmarkIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+
+export const Checkpoint = ({ className, children, ...props }: CheckpointProps) => (
+  <div
+    className={cn("flex items-center gap-0.5 overflow-hidden text-muted-foreground", className)}
+    {...props}
+  >
+    {children}
+    <Separator />
+  </div>
+);
+
+export type CheckpointIconProps = LucideProps;
+
+export const CheckpointIcon = ({ className, children, ...props }: CheckpointIconProps) =>
+  children ?? <BookmarkIcon className={cn("size-4 shrink-0", className)} {...props} />;
+
+export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const CheckpointTrigger = ({
+  children,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}: CheckpointTriggerProps) =>
+  tooltip ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size={size} type="button" variant={variant} {...props}>
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent align="start" side="bottom">
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+    </Button>
+  );

package/src/code-block.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CodeBlock } from "./code-block";
+const meta = {
+  title: "AI/CodeBlock",
+  component: CodeBlock,
+  parameters: { layout: "padded" },
+  tags: ["autodocs"],
+} satisfies Meta<typeof CodeBlock>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+// A representative mix of comment/keyword/type/string/number/function scopes
+// (#315) — so the derived-from-tokens Shiki theme is visually checkable across
+// both themes (light, dark) via the toolbar's global
+// theme switcher, not just a single flat color.
+const SAMPLE_CODE = [
+  "// Adds two numbers together",
+  "export function add(a: number, b: number): number {",
+  '  const label = "sum";',
+  "  return a + b; // 42",
+  "}",
+].join("\n");
+
+export const Default: Story = {
+  render: () => (
+    <div className="max-w-lg">
+      <CodeBlock code={SAMPLE_CODE} language="tsx" />
+    </div>
+  ),
+};
+
+// Dark theme — verifies the derived-from-tokens Shiki theme in dark
+// (#315). Also proves the region-scoped fix: a `<div data-theme="dark">`
+// decorator (the same pattern as `message-table.stories.tsx`'s `DarkTheme`)
+// resolves ITS OWN theme rather than always the document root's.
+export const DarkTheme: Story = {
+  render: () => (
+    <div className="max-w-lg">
+      <CodeBlock code={SAMPLE_CODE} language="tsx" />
+    </div>
+  ),
+  decorators: [
+    (Story) => (
+      <div data-theme="dark" className="rounded-lg bg-background p-6 text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+// Markup (JSX tags) — exercises the `--code-tag` role (#315 follow-up). A
+// valid <div>/<span> tag must read as its OWN color, never the same as
+// destructive/warning text — the collision a prior revision had (`--code-tag`
+// aliased to `--calc-warning`, so a normal tag looked identical to an error).
+const MARKUP_CODE = [
+  "export function Card({ label, count }: CardProps) {",
+  "  return (",
+  '    <div className="card" data-count={count}>',
+  "      <span>{label}</span>",
+  "    </div>",
+  "  );",
+  "}",
+].join("\n");
+
+export const MarkupTags: Story = {
+  render: () => (
+    <div className="max-w-lg">
+      <CodeBlock code={MARKUP_CODE} language="tsx" />
+    </div>
+  ),
+};
+// STREAMING — code is arriving incrementally (loading-states.md `isStreaming`).
+// The partial code keeps rendering (build-up, NOT a skeleton — it isn't
+// fetch-then-show); a `Shimmer` "Generating…" cue is the in-progress affordance.
+export const Streaming: Story = {
+  name: "isStreaming",
+  render: () => (
+    <div className="max-w-lg">
+      <CodeBlock code={"export function add(a: number, b"} language="tsx" isStreaming />
+    </div>
+  ),
+};

package/src/code-block.test.tsx

@@ -0,0 +1,191 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { CSSProperties } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import { CodeBlock } from "./code-block";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+afterEach(() => {
+  document.documentElement.removeAttribute("data-theme");
+  document.documentElement.style.removeProperty("--code-background");
+});
+
+describe("CodeBlock", () => {
+  // #315 — locks the fix: the highlighter theme must be derived from brand
+  // `--code-*` tokens, never Shiki's bundled `github-light`/`github-dark`.
+  it("never hardcodes shiki's github-light/github-dark theme (#315)", () => {
+    const source = readFileSync(join(__dirname, "code-block.tsx"), "utf8");
+    expect(source).not.toMatch(/github-light|github-dark/);
+  });
+
+  it("resolves the highlighted <pre> background from the active theme's --code-background token (#315)", async () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    document.documentElement.style.setProperty("--code-background", "oklch(1 0 0)");
+
+    const { container } = render(<CodeBlock code="const a = 1;" language="tsx" />);
+
+    await waitFor(() => {
+      const pre = container.querySelector("pre");
+      expect(pre?.style.backgroundColor).toBe("rgb(255, 255, 255)");
+    });
+  });
+
+  // #315 follow-up — a CodeBlock nested inside a region-scoped
+  // `<div data-theme="…">` (a supported ThemeProvider/decorator pattern, see
+  // @.claude/rules/theming.md and 6 other @…-ai story files) must resolve
+  // THAT region's `--code-*` tokens, not always the document root's.
+  it("resolves --code-* tokens from a region-scoped data-theme ancestor, not the document root's", async () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    document.documentElement.style.setProperty("--code-background", "oklch(1 0 0)");
+
+    const { container } = render(
+      <div
+        data-theme="dark"
+        style={{ "--code-background": "oklch(0.25 0.005 75)" } as CSSProperties}
+      >
+        <CodeBlock code="const a = 1;" language="tsx" />
+      </div>,
+    );
+
+    await waitFor(() => {
+      const pre = container.querySelector("pre");
+      // rgb(35, 33, 31) is oklch(0.25 0.005 75) converted to sRGB — the
+      // SCOPED dark region's color, never the document root's white.
+      expect(pre?.style.backgroundColor).toBe("rgb(35, 33, 31)");
+    });
+  });
+
+  // #315 regression lock — `highlightCode` returns the tokenized result
+  // SYNCHRONOUSLY on a cache hit, WITHOUT invoking the subscribed callback.
+  // Once the "tsx" highlighter is warm (e.g. after the FIRST theme's
+  // highlight), a theme switch re-tokenizes fast enough to resolve as a cache
+  // hit before `CodeBlockContent`'s effect re-subscribes — a component that
+  // only reacted to the callback would get stuck showing the un-highlighted
+  // raw fallback forever after every theme change after the first.
+  it("re-highlights with the new theme's colors after data-theme changes at runtime (#315)", async () => {
+    document.documentElement.setAttribute("data-theme", "light");
+    document.documentElement.style.setProperty("--code-background", "oklch(1 0 0)");
+    document.documentElement.style.setProperty("--code-keyword", "oklch(0.38 0.16 264)");
+
+    const { container } = render(<CodeBlock code="const value = 1;" language="tsx" />);
+
+    // Initial highlight settles on the light colors.
+    await waitFor(() => {
+      const pre = container.querySelector("pre");
+      expect(pre?.style.backgroundColor).toBe("rgb(255, 255, 255)");
+    });
+    const spansBefore = container.querySelectorAll("code > span > span");
+    expect(spansBefore.length).toBeGreaterThan(1); // real per-token spans, not the 1-span raw fallback
+
+    // Switch to dark at runtime (ThemeProvider / Storybook's theme
+    // decorator both just flip `data-theme`) with a DIFFERENT resolved value.
+    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.style.setProperty("--code-background", "oklch(0.25 0.005 75)");
+    document.documentElement.style.setProperty("--code-keyword", "oklch(0.7 0.16 264)");
+
+    await waitFor(() => {
+      const pre = container.querySelector("pre");
+      // rgb(35, 33, 31) is oklch(0.25 0.005 75) converted to sRGB.
+      expect(pre?.style.backgroundColor).toBe("rgb(35, 33, 31)");
+    });
+
+    // The re-highlight actually re-tokenized (still real per-token spans, not
+    // stuck on the single-span raw fallback the bug would strand it on).
+    const spansAfter = container.querySelectorAll("code > span > span");
+    expect(spansAfter.length).toBeGreaterThan(1);
+  });
+
+  // #315 regression lock — the blocker: narrowing the attribute to a validated
+  // theme name collapses "no `data-theme` attribute yet" (the
+  // pre-`ThemeProvider`-mount render) and an EXPLICIT `data-theme="light"` into
+  // the SAME value (both fall back to `DEFAULT_THEME`). `:root`'s `--code-*`
+  // fallback values are their own
+  // distinct placeholder palette, not a copy of `light`'s — so if the
+  // highlight cache were keyed on the validated name, a code block that first
+  // tokenizes before `data-theme` is set would cache under the SAME key
+  // `ThemeProvider` later writes explicitly, and the (correct) light
+  // colors would never take effect. This locks the fix: the cache is keyed on
+  // the RAW attribute, so the mutation is a genuine re-tokenize.
+  it("re-tokenizes when data-theme transitions from unset to an explicit value resolving to the same theme name (#315)", async () => {
+    // No data-theme attribute set — the pre-mount state. Simulates :root's
+    // fallback --code-background differing from light's own. Uses a code
+    // string unique to this test — the highlight cache is module-level and
+    // keyed (in part) on the code content, so reusing another test's snippet
+    // here would collide with an ALREADY-cached "light" entry from that
+    // other test and mask this exact regression.
+    document.documentElement.style.setProperty("--code-background", "oklch(0.5 0 0)");
+
+    const { container } = render(
+      <CodeBlock code="const scopeKeyRegressionMarker = 315;" language="tsx" />,
+    );
+
+    await waitFor(() => {
+      const pre = container.querySelector("pre");
+      expect(pre?.style.backgroundColor).toBe("rgb(99, 99, 99)");
+    });
+
+    // ThemeProvider mounts and writes data-theme="light" explicitly, with
+    // a DIFFERENT --code-background than the unset-attribute render resolved.
+    document.documentElement.setAttribute("data-theme", "light");
+    document.documentElement.style.setProperty("--code-background", "oklch(0.1 0 0)");
+
+    await waitFor(() => {
+      const pre = container.querySelector("pre");
+      // Must pick up the NEW color — never stuck on the unset-attribute cache entry.
+      expect(pre?.style.backgroundColor).toBe("rgb(3, 3, 3)");
+    });
+  });
+
+  it("renders the code content", () => {
+    const { container } = render(<CodeBlock code="const a = 1;" language="tsx" />);
+    expect(container.textContent).toContain("const a = 1;");
+  });
+
+  it("soft-wraps long lines when `wrap` is set (#5)", () => {
+    const { container } = render(
+      <CodeBlock code="a very long single line of code" language="tsx" wrap />,
+    );
+    const pre = container.querySelector("pre");
+    expect(pre?.className).toContain("whitespace-pre-wrap");
+    expect(pre?.className).toContain("break-words");
+    // No horizontal-scroll affordance when wrapping (there's nothing to scroll).
+    const scroller = container.querySelector(".overflow-auto");
+    expect(scroller?.className ?? "").not.toContain("scrollbar-width:thin");
+  });
+
+  it("does not wrap by default, and shows a scroll affordance (#5)", () => {
+    const { container } = render(
+      <CodeBlock code="a very long single line of code" language="tsx" />,
+    );
+    const pre = container.querySelector("pre");
+    expect(pre?.className).not.toContain("whitespace-pre-wrap");
+    // Default mode keeps horizontal scroll with a discoverable thin scrollbar.
+    const scroller = container.querySelector(".overflow-auto");
+    expect(scroller).not.toBeNull();
+    expect(scroller?.className).toContain("scrollbar-width:thin");
+  });
+});
+
+describe("CodeBlock isStreaming (#269, loading-states.md)", () => {
+  it("keeps rendering the partial code (build-up), not a skeleton", () => {
+    const { container } = render(<CodeBlock code="const partial = " language="tsx" isStreaming />);
+    expect(container.textContent).toContain("const partial =");
+    expect(container.querySelector(".animate-pulse")).toBeNull();
+  });
+
+  it("shows exactly one in-progress live region while streaming", () => {
+    const { container } = render(<CodeBlock code="const a = 1;" language="tsx" isStreaming />);
+    const statuses = container.querySelectorAll('[role="status"]');
+    expect(statuses).toHaveLength(1);
+    expect(statuses[0]).toHaveAttribute("aria-live", "polite");
+    expect(statuses[0]).toHaveTextContent("Generating…");
+  });
+
+  it("shows no in-progress cue when not streaming", () => {
+    const { container } = render(<CodeBlock code="const a = 1;" language="tsx" />);
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+});