@elabs-ai/components-ai 4.0.0 → 4.1.0

package/src/message-compare.stories.tsx

@@ -0,0 +1,175 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MessageCompare, MessageCompareColumn } from "./message-compare";
+import { MessageFeedback } from "./message-feedback";
+import { MessageResponse } from "./message";
+import { Switch } from "@elabs-ai/components-ui";
+
+const meta = {
+  title: "AI/MessageCompare",
+  component: MessageCompare,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Two to four model ANSWERS side by side — not a diff. Nothing here is line-level; for that, start from `AI/DiffView` and the rest of the diff family in [Choosing between similar components](?path=/docs/docs-choosing-between-similar-components--docs). The one-at-a-time sibling is `MessageBranch`, which switches between responses instead of showing them at once; each pane here keeps its own status, its own scroll position and its own feedback.",
+      },
+    },
+  },
+} satisfies Meta<typeof MessageCompare>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const GPT_ANSWER = `Postgres row-level security is the safer default for a multi-tenant
+schema: every query is filtered by the database itself, so a missing \`WHERE tenant_id = …\`
+in application code can't leak another tenant's rows.`;
+
+const CLAUDE_ANSWER = `I'd reach for a separate schema per tenant only once you're past a few
+hundred tenants — below that, a shared schema with row-level security is simpler to migrate
+and easier to reason about, and it keeps a single connection pool.`;
+
+const GEMINI_ANSWER = `Both approaches work. Schema-per-tenant gives the strongest isolation
+(useful for compliance-heavy customers) at the cost of migration fan-out; row-level security
+keeps one schema and pushes isolation into policies, which is cheaper to operate at scale.`;
+
+/** Two columns: one still streaming, one settled — independent status per column. */
+export const Default: Story = {
+  render: () => (
+    <div className="h-[520px]">
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="streaming">
+          <MessageResponse>{GPT_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="ready">
+          <MessageResponse>{CLAUDE_ANSWER}</MessageResponse>
+          <MessageFeedback className="mt-3" />
+        </MessageCompareColumn>
+      </MessageCompare>
+    </div>
+  ),
+};
+
+/** Both columns still generating — the `Shimmer` status indicator per header. */
+export const Streaming: Story = {
+  render: () => (
+    <div className="h-[520px]">
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="streaming">
+          <MessageResponse>{GPT_ANSWER.slice(0, 60)}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="submitted" />
+      </MessageCompare>
+    </div>
+  ),
+};
+
+/** One column failed — `role="alert"` + icon + `text-destructive-text`, never colour alone. */
+export const WithError: Story = {
+  render: () => (
+    <div className="h-[520px]">
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="ready">
+          <MessageResponse>{GPT_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="error">
+          <p className="text-body text-muted-foreground">No response — the request failed.</p>
+        </MessageCompareColumn>
+      </MessageCompare>
+    </div>
+  ),
+};
+
+/** Three responses side by side (`columns` supports 2-4). */
+export const ThreeColumns: Story = {
+  render: () => (
+    <div className="h-[520px]">
+      <MessageCompare columns={3}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="ready">
+          <MessageResponse>{GPT_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="ready">
+          <MessageResponse>{CLAUDE_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Gemini" }} status="ready">
+          <MessageResponse>{GEMINI_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+      </MessageCompare>
+    </div>
+  ),
+};
+
+/** Four responses — the upper bound of `columns`. */
+export const FourColumns: Story = {
+  render: () => (
+    <div className="h-[520px]">
+      <MessageCompare columns={4}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="ready">
+          <MessageResponse>{GPT_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="ready">
+          <MessageResponse>{CLAUDE_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Gemini" }} status="ready">
+          <MessageResponse>{GEMINI_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Llama" }} status="streaming">
+          <MessageResponse>{GEMINI_ANSWER.slice(0, 40)}</MessageResponse>
+        </MessageCompareColumn>
+      </MessageCompare>
+    </div>
+  ),
+};
+
+function SyncedScrollDemo() {
+  const [syncScroll, setSyncScroll] = useState(true);
+  const long = (label: string) =>
+    Array.from({ length: 24 }, (_, i) => `${label} — paragraph ${i + 1}. ${GEMINI_ANSWER}`).join(
+      "\n\n",
+    );
+
+  return (
+    <div className="flex h-[520px] flex-col gap-3">
+      <label className="flex w-fit items-center gap-2 text-body">
+        <Switch checked={syncScroll} onCheckedChange={setSyncScroll} />
+        Sync scroll across columns
+      </label>
+      <div className="min-h-0 flex-1">
+        <MessageCompare columns={2} syncScroll={syncScroll}>
+          <MessageCompareColumn model={{ name: "GPT-5" }} status="ready">
+            <MessageResponse>{long("GPT-5")}</MessageResponse>
+          </MessageCompareColumn>
+          <MessageCompareColumn model={{ name: "Claude" }} status="ready">
+            <MessageResponse>{long("Claude")}</MessageResponse>
+          </MessageCompareColumn>
+        </MessageCompare>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Long content in both columns with a `syncScroll` toggle — scrolling one
+ * column proportionally moves its sibling while the toggle is on (issue #23).
+ */
+export const SyncedScroll: Story = {
+  render: () => <SyncedScrollDemo />,
+};
+
+/** Below the `md` breakpoint the grid collapses to a `MessageBranch`-style tab strip. */
+export const Mobile: Story = {
+  globals: { viewport: { value: "mobile1", isRotated: false } },
+  render: () => (
+    <div className="h-[520px]">
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "GPT-5" }} status="ready">
+          <MessageResponse>{GPT_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }} status="ready">
+          <MessageResponse>{CLAUDE_ANSWER}</MessageResponse>
+        </MessageCompareColumn>
+      </MessageCompare>
+    </div>
+  ),
+};

package/src/message-compare.test.tsx

@@ -0,0 +1,207 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { MessageCompare, MessageCompareColumn } from "./message-compare";
+import { MessageFeedback } from "./message-feedback";
+
+afterEach(cleanup);
+
+function columnBodies(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>('[data-slot="message-compare-column-body"]'),
+  );
+}
+
+/**
+ * jsdom performs no layout, so `scrollHeight`/`clientHeight` are always 0.
+ * Every test that reads a proportional scroll offset needs a real, non-zero
+ * content/viewport size to divide by.
+ */
+function mockScrollMetrics(
+  el: HTMLElement,
+  { scrollHeight, clientHeight }: { scrollHeight: number; clientHeight: number },
+) {
+  Object.defineProperty(el, "scrollHeight", { value: scrollHeight, configurable: true });
+  Object.defineProperty(el, "clientHeight", { value: clientHeight, configurable: true });
+}
+
+describe("MessageCompare", () => {
+  it("does not move a settled column's scroll position when a sibling's content grows", () => {
+    const { container, rerender } = render(
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "Model A" }} status="streaming">
+          Short
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }} status="ready">
+          Done
+        </MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const complete = columnBodies(container)[1]!;
+    mockScrollMetrics(complete, { scrollHeight: 400, clientHeight: 200 });
+    complete.scrollTop = 120;
+    expect(complete.scrollTop).toBe(120);
+
+    // Simulate the streaming column's content growing.
+    rerender(
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "Model A" }} status="streaming">
+          {"Much longer streamed content. ".repeat(40)}
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }} status="ready">
+          Done
+        </MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const completeAfter = columnBodies(container)[1]!;
+    expect(completeAfter.scrollTop).toBe(120);
+  });
+
+  it("does not propagate scroll to siblings by default (syncScroll unset)", () => {
+    const { container } = render(
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "Model A" }}>A</MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }}>B</MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const [a, b] = columnBodies(container);
+    mockScrollMetrics(a!, { scrollHeight: 1000, clientHeight: 200 });
+    mockScrollMetrics(b!, { scrollHeight: 500, clientHeight: 100 });
+
+    a!.scrollTop = 400; // 50% of A's scrollable range
+    fireEvent.scroll(a!);
+
+    expect(b!.scrollTop).toBe(0);
+  });
+
+  it("propagates scroll to siblings proportionally when syncScroll is on", () => {
+    const { container } = render(
+      <MessageCompare columns={2} syncScroll>
+        <MessageCompareColumn model={{ name: "Model A" }}>A</MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }}>B</MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const [a, b] = columnBodies(container);
+    mockScrollMetrics(a!, { scrollHeight: 1000, clientHeight: 200 }); // range 800
+    mockScrollMetrics(b!, { scrollHeight: 500, clientHeight: 100 }); // range 400
+
+    a!.scrollTop = 400; // 50% of A's range
+    fireEvent.scroll(a!);
+
+    expect(b!.scrollTop).toBe(200); // 50% of B's range
+  });
+
+  // #12/#53 review (P2): when the destination column's scroll position ALREADY
+  // sits at the computed proportional offset, writing the same value produces
+  // no real change — real browsers emit no `scroll` event for it, so a naive
+  // "always arm suppression" left the flag permanently set, and the
+  // destination's next genuine user scroll (a keyboard PageDown/Home in
+  // particular) got silently swallowed instead of propagating to its siblings.
+  it("does not swallow a column's own next real scroll when a sync write left its offset unchanged", () => {
+    const { container } = render(
+      <MessageCompare columns={2} syncScroll>
+        <MessageCompareColumn model={{ name: "Model A" }}>A</MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }}>B</MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const [a, b] = columnBodies(container);
+    mockScrollMetrics(a!, { scrollHeight: 1000, clientHeight: 200 }); // range 800
+    mockScrollMetrics(b!, { scrollHeight: 500, clientHeight: 100 }); // range 400
+
+    // B is already sitting at the exact offset A's forthcoming scroll will
+    // compute for it (50% of 400 = 200) — set directly, no scroll event, so
+    // no suppression flag is armed yet.
+    b!.scrollTop = 200;
+
+    // A scrolls to 50% of its own range. The sync write to B assigns 200 —
+    // identical to B's current value, i.e. a genuine no-op write.
+    a!.scrollTop = 400;
+    fireEvent.scroll(a!);
+    expect(b!.scrollTop).toBe(200); // unchanged, as expected
+
+    // B's OWN next real scroll (e.g. keyboard PageDown) must still propagate
+    // to A — it must NOT be swallowed by a suppression flag left armed from
+    // the no-op write above.
+    b!.scrollTop = 300; // 75% of B's range
+    fireEvent.scroll(b!);
+
+    expect(a!.scrollTop).toBe(600); // 75% of A's range — propagated, not swallowed
+  });
+
+  it("labels each column as a region with a distinct accessible name from its model", () => {
+    render(
+      <MessageCompare columns={3}>
+        <MessageCompareColumn model={{ name: "GPT-5" }}>x</MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Claude" }}>y</MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Gemini" }}>z</MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const regions = screen.getAllByRole("region");
+    expect(regions).toHaveLength(3);
+    expect(regions.map((region) => region.getAttribute("aria-label"))).toEqual([
+      "GPT-5",
+      "Claude",
+      "Gemini",
+    ]);
+  });
+
+  it("collapses to a tab strip under the responsive breakpoint instead of side-by-side columns", () => {
+    const originalWidth = window.innerWidth;
+    Object.defineProperty(window, "innerWidth", { value: 500, configurable: true });
+
+    try {
+      render(
+        <MessageCompare columns={2}>
+          <MessageCompareColumn model={{ name: "Model A" }}>A</MessageCompareColumn>
+          <MessageCompareColumn model={{ name: "Model B" }}>B</MessageCompareColumn>
+        </MessageCompare>,
+      );
+
+      expect(screen.getByRole("tablist")).toBeInTheDocument();
+      expect(screen.getAllByRole("tab")).toHaveLength(2);
+    } finally {
+      Object.defineProperty(window, "innerWidth", { value: originalWidth, configurable: true });
+    }
+  });
+
+  it("does not render a tab strip at a normal (non-mobile) viewport", () => {
+    render(
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "Model A" }}>A</MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }}>B</MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    expect(screen.queryByRole("tablist")).not.toBeInTheDocument();
+  });
+
+  it("keeps per-column feedback state independent between siblings", async () => {
+    const user = userEvent.setup();
+    const onSubmitA = vi.fn();
+    const onSubmitB = vi.fn();
+
+    render(
+      <MessageCompare columns={2}>
+        <MessageCompareColumn model={{ name: "Model A" }}>
+          <MessageFeedback onSubmit={onSubmitA} />
+        </MessageCompareColumn>
+        <MessageCompareColumn model={{ name: "Model B" }}>
+          <MessageFeedback onSubmit={onSubmitB} />
+        </MessageCompareColumn>
+      </MessageCompare>,
+    );
+
+    const [goodA] = screen.getAllByRole("button", { name: "Good response" });
+    await user.click(goodA!);
+
+    expect(onSubmitA).toHaveBeenCalledTimes(1);
+    expect(onSubmitA).toHaveBeenCalledWith({ type: "positive" });
+    expect(onSubmitB).not.toHaveBeenCalled();
+  });
+});