@dowel-ui/react 0.1.0

package/src/components/ai-prompt-input/ai-prompt-input.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type ComponentPropsWithRef,
+  type FormEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+
+import { focusRing, focusRingInset } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * The composer.
+ *
+ * Handles the parts of a chat input that are easy to get subtly wrong:
+ * auto-growing to fit the text up to a ceiling, sending on Enter without
+ * breaking multi-line input, and — the one almost everybody misses —
+ * not sending mid-composition when someone is typing with an IME.
+ */
+
+interface PromptInputContextValue {
+  textareaId: string;
+  submit: () => void;
+  disabled: boolean;
+  busy: boolean;
+}
+
+const PromptInputContext = createContext<PromptInputContextValue | null>(null);
+
+function usePromptInput(component: string): PromptInputContextValue {
+  const context = useContext(PromptInputContext);
+  if (!context) {
+    throw new Error(`${component} must be rendered inside <PromptInput>.`);
+  }
+  return context;
+}
+
+export interface PromptInputProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit"> {
+  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+  /** Blocks submission and dims the composer. */
+  disabled?: boolean;
+  /** A response is in flight: submission is blocked and Stop is shown instead. */
+  busy?: boolean;
+}
+
+export function PromptInput({
+  className,
+  onSubmit,
+  disabled = false,
+  busy = false,
+  children,
+  ...props
+}: PromptInputProps) {
+  const uid = useId();
+  const formRef = useRef<HTMLFormElement | null>(null);
+
+  const context = useMemo<PromptInputContextValue>(
+    () => ({
+      textareaId: `${uid}-textarea`,
+      disabled,
+      busy,
+      submit: () => {
+        formRef.current?.requestSubmit();
+      },
+    }),
+    [uid, disabled, busy],
+  );
+
+  return (
+    <PromptInputContext.Provider value={context}>
+      <form
+        ref={formRef}
+        data-slot="prompt-input"
+        data-busy={busy || undefined}
+        onSubmit={(event) => {
+          if (disabled || busy) {
+            event.preventDefault();
+            return;
+          }
+          onSubmit?.(event);
+        }}
+        className={cn(
+          "rounded-xl border border-input bg-background shadow-xs",
+          "transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
+          "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/55",
+          disabled && "opacity-60",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </form>
+    </PromptInputContext.Provider>
+  );
+}
+
+/** Rows the textarea will grow to before it starts scrolling. */
+const DEFAULT_MAX_ROWS = 8;
+
+export interface PromptInputTextareaProps extends Omit<
+  ComponentPropsWithRef<"textarea">,
+  "rows"
+> {
+  maxRows?: number;
+  /**
+   * Send on Enter, newline on Shift+Enter.
+   *
+   * Turn it off for a composer where Enter should always insert a newline and
+   * sending is only ever an explicit button press.
+   */
+  submitOnEnter?: boolean;
+}
+
+export function PromptInputTextarea({
+  className,
+  maxRows = DEFAULT_MAX_ROWS,
+  submitOnEnter = true,
+  onKeyDown,
+  onChange,
+  ...props
+}: PromptInputTextareaProps) {
+  const { textareaId, submit, disabled, busy } = usePromptInput("PromptInputTextarea");
+  const ref = useRef<HTMLTextAreaElement | null>(null);
+
+  // Grows with the content up to maxRows, then scrolls. Measured after layout
+  // so the height is right on the first paint rather than one frame late.
+  useLayoutEffect(() => {
+    const textarea = ref.current;
+    if (!textarea) return;
+
+    textarea.style.height = "auto";
+    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;
+    const maxHeight = lineHeight * maxRows;
+    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;
+    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? "auto" : "hidden";
+  });
+
+  function handleKeyDown(event: ReactKeyboardEvent<HTMLTextAreaElement>) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || !submitOnEnter) return;
+    if (event.key !== "Enter" || event.shiftKey) return;
+
+    // Mid-composition Enter confirms the candidate an IME is offering — for
+    // Japanese, Chinese, Korean and others it is part of typing a word, not a
+    // request to send. Sending here truncates the sentence and is the single
+    // most common way a chat composer breaks for those users.
+    if (event.nativeEvent.isComposing) return;
+
+    event.preventDefault();
+    submit();
+  }
+
+  return (
+    <textarea
+      ref={ref}
+      id={textareaId}
+      data-slot="prompt-input-textarea"
+      rows={1}
+      disabled={disabled}
+      aria-disabled={busy || undefined}
+      onKeyDown={handleKeyDown}
+      onChange={onChange}
+      className={cn(
+        "block w-full resize-none bg-transparent px-4 py-3 text-sm outline-none",
+        "placeholder:text-muted-foreground disabled:cursor-not-allowed",
+        focusRingInset,
+        "focus-visible:ring-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** The row beneath the textarea: attachments, model picker, send. */
+export function PromptInputToolbar({ className, ...props }: ComponentPropsWithRef<"div">) {
+  return (
+    <div
+      data-slot="prompt-input-toolbar"
+      className={cn("flex items-center gap-2 px-2 pb-2", className)}
+      {...props}
+    />
+  );
+}
+
+export interface PromptInputSubmitProps extends ComponentPropsWithRef<"button"> {
+  /** Label while idle. */
+  label?: string;
+  /** Label while a response is streaming. */
+  stopLabel?: string;
+  /** Called instead of submitting when busy. */
+  onStop?: () => void;
+}
+
+/**
+ * Send, or stop.
+ *
+ * One control with two jobs, because that is what the space affords and what
+ * people expect. The accessible name changes with the state, so it is never
+ * "Send" while it actually stops.
+ */
+export function PromptInputSubmit({
+  className,
+  label = "Send message",
+  stopLabel = "Stop generating",
+  onStop,
+  ...props
+}: PromptInputSubmitProps) {
+  const { busy, disabled } = usePromptInput("PromptInputSubmit");
+
+  return (
+    <button
+      type={busy ? "button" : "submit"}
+      data-slot="prompt-input-submit"
+      aria-label={busy ? stopLabel : label}
+      disabled={disabled}
+      onClick={busy ? onStop : undefined}
+      className={cn(
+        "ml-auto grid size-8 shrink-0 place-items-center rounded-lg",
+        "bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]",
+        "hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55",
+        focusRing,
+        className,
+      )}
+      {...props}
+    >
+      {busy ? (
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
+          <rect x="6" y="6" width="12" height="12" rx="2" fill="currentColor" />
+        </svg>
+      ) : (
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4">
+          <path
+            d="M12 19V5m0 0-6 6m6-6 6 6"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+export interface PromptInputCounterProps extends ComponentPropsWithRef<"div"> {
+  value: number;
+  max: number;
+  /** Fraction of the limit past which the counter starts warning. */
+  warnAt?: number;
+}
+
+/**
+ * Characters used against a limit.
+ *
+ * The visible count updates on every keystroke; the live region does not.
+ *
+ * The naive version toggles `aria-live` on once the count matters, but a region
+ * only announces changes that happen *while* it is live — switching it on at
+ * the same moment the content changes means the one update worth hearing is the
+ * one that is missed. So the region is live from the start and simply has
+ * nothing in it until the limit is close, which is also what keeps ordinary
+ * typing silent.
+ */
+export function PromptInputCounter({
+  className,
+  value,
+  max,
+  warnAt = 0.9,
+  ...props
+}: PromptInputCounterProps) {
+  const warning = value >= max * warnAt;
+  const over = value > max;
+  const remaining = max - value;
+
+  return (
+    <div
+      data-slot="prompt-input-counter"
+      data-warning={warning || undefined}
+      data-over={over || undefined}
+      className={cn(
+        "text-xs tabular-nums",
+        over ? "text-destructive" : warning ? "text-warning" : "text-muted-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <span aria-hidden="true">
+        {warning ? `${String(value)} / ${String(max)}` : String(value)}
+      </span>
+      <span role="status" aria-live="polite" className="sr-only">
+        {over
+          ? `Over the limit by ${String(-remaining)} characters`
+          : warning
+            ? `${String(remaining)} characters remaining`
+            : ""}
+      </span>
+    </div>
+  );
+}

package/src/components/ai-prompt-input/index.ts

@@ -0,0 +1,11 @@
+export {
+  PromptInput,
+  PromptInputCounter,
+  PromptInputSubmit,
+  PromptInputTextarea,
+  PromptInputToolbar,
+  type PromptInputCounterProps,
+  type PromptInputProps,
+  type PromptInputSubmitProps,
+  type PromptInputTextareaProps,
+} from "./ai-prompt-input";

package/src/components/ai-prompt-input/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "ai-prompt-input",
+  title: "AI Prompt Input",
+  description: "The composer: auto-growing textarea, send-on-Enter, and a send/stop control.",
+  category: "ai",
+  status: "stable",
+  dependencies: [],
+  registryDependencies: [],
+  files: ["ai-prompt-input.tsx"],
+  a11y:
+    "Enter sends and Shift+Enter inserts a newline, but never while an IME composition is active " +
+    "— for Japanese, Chinese and Korean input Enter confirms a candidate, and sending there " +
+    'truncates the sentence mid-word. The submit control renames itself to "Stop generating" ' +
+    "while busy, so its accessible name always matches what it does. The character counter stays " +
+    "silent until it nears the limit; announcing every keystroke would be unusable.",
+});

package/src/components/ai-reasoning/ai-reasoning.stories.tsx

@@ -0,0 +1,60 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
+
+import { Response } from "@/components/ai-response";
+
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./ai-reasoning";
+
+/** Named so its type is nameable in declaration output (TS2883). */
+const withFixedWidth: Decorator = (Story) => (
+  <div className="w-[32rem]">
+    <Story />
+  </div>
+);
+
+const meta = {
+  title: "AI/Reasoning",
+  component: Reasoning,
+  parameters: { controls: { disable: true } },
+  decorators: [withFixedWidth],
+} satisfies Meta<typeof Reasoning>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const WORKING =
+  'The question is about keyboard access to overflowing tables.\n\nA scroll container is not focusable by default, so its content past the edge cannot be reached without a pointer. Adding tabindex="0" makes it a focus stop, and a role plus a name stops it being an unlabelled one.';
+
+/** Collapsed by default: reasoning is supporting material, not the answer. */
+export const Default: Story = {
+  render: () => (
+    <div className="grid gap-2">
+      <Reasoning>
+        <ReasoningTrigger />
+        <ReasoningContent>{WORKING}</ReasoningContent>
+      </Reasoning>
+      <Response>
+        Give the scrolling wrapper `tabindex=&quot;0&quot;`, a role and an accessible name.
+      </Response>
+    </div>
+  ),
+};
+
+export const Streaming: Story = {
+  render: () => (
+    <Reasoning defaultOpen>
+      <ReasoningTrigger streaming />
+      <ReasoningContent>
+        The question is about keyboard access to overflowing tables. A scroll container
+      </ReasoningContent>
+    </Reasoning>
+  ),
+};
+
+export const Expanded: Story = {
+  render: () => (
+    <Reasoning defaultOpen>
+      <ReasoningTrigger />
+      <ReasoningContent>{WORKING}</ReasoningContent>
+    </Reasoning>
+  ),
+};

package/src/components/ai-reasoning/ai-reasoning.test.tsx

@@ -0,0 +1,95 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "./ai-reasoning";
+
+describe("Reasoning", () => {
+  it("is collapsed by default, so the answer is not buried", () => {
+    render(
+      <Reasoning>
+        <ReasoningTrigger />
+        <ReasoningContent>Step one, then step two.</ReasoningContent>
+      </Reasoning>,
+    );
+
+    expect(screen.getByRole("button", { name: "Reasoning" })).toHaveAttribute(
+      "aria-expanded",
+      "false",
+    );
+    expect(screen.queryByText("Step one, then step two.")).not.toBeInTheDocument();
+  });
+
+  it("opens on click", async () => {
+    const user = userEvent.setup();
+    render(
+      <Reasoning>
+        <ReasoningTrigger />
+        <ReasoningContent>Step one, then step two.</ReasoningContent>
+      </Reasoning>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Reasoning" }));
+    expect(await screen.findByText("Step one, then step two.")).toBeInTheDocument();
+  });
+
+  it("says it is thinking while reasoning streams", () => {
+    render(
+      <Reasoning>
+        <ReasoningTrigger streaming />
+        <ReasoningContent>Partial…</ReasoningContent>
+      </Reasoning>,
+    );
+    expect(screen.getByRole("button", { name: "Thinking…" })).toBeInTheDocument();
+  });
+
+  it("accepts custom labels", () => {
+    render(
+      <Reasoning>
+        <ReasoningTrigger label="Show working" />
+        <ReasoningContent>Work</ReasoningContent>
+      </Reasoning>,
+    );
+    expect(screen.getByRole("button", { name: "Show working" })).toBeInTheDocument();
+  });
+
+  it("can be opened by default", () => {
+    render(
+      <Reasoning defaultOpen>
+        <ReasoningTrigger />
+        <ReasoningContent>Visible</ReasoningContent>
+      </Reasoning>,
+    );
+    expect(screen.getByText("Visible")).toBeInTheDocument();
+  });
+
+  it("toggles from the keyboard", async () => {
+    const user = userEvent.setup();
+    render(
+      <Reasoning>
+        <ReasoningTrigger />
+        <ReasoningContent>Work</ReasoningContent>
+      </Reasoning>,
+    );
+
+    await user.tab();
+    await user.keyboard("{Enter}");
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Reasoning" })).toHaveAttribute(
+        "aria-expanded",
+        "true",
+      );
+    });
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <Reasoning defaultOpen>
+        <ReasoningTrigger />
+        <ReasoningContent>Step one, then step two.</ReasoningContent>
+      </Reasoning>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/ai-reasoning/ai-reasoning.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import type { ComponentPropsWithRef } from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * The model's reasoning, tucked away.
+ *
+ * Collapsed by default and deliberately understated. Reasoning is supporting
+ * material — surfacing it at the same weight as the answer buries the answer,
+ * and most readers never want it. It stays one keystroke away for the people
+ * who do.
+ */
+export type ReasoningProps = ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>;
+
+export function Reasoning({ className, ...props }: ReasoningProps) {
+  return (
+    <CollapsiblePrimitive.Root
+      data-slot="reasoning"
+      className={cn("text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export interface ReasoningTriggerProps extends ComponentPropsWithRef<
+  typeof CollapsiblePrimitive.Trigger
+> {
+  /** Shown while reasoning is still arriving. */
+  streaming?: boolean;
+  label?: string;
+  streamingLabel?: string;
+}
+
+export function ReasoningTrigger({
+  className,
+  streaming,
+  label = "Reasoning",
+  streamingLabel = "Thinking…",
+  children,
+  ...props
+}: ReasoningTriggerProps) {
+  return (
+    <CollapsiblePrimitive.Trigger
+      data-slot="reasoning-trigger"
+      className={cn(
+        "flex items-center gap-1.5 rounded-md text-xs text-muted-foreground",
+        "transition-colors duration-[var(--duration-fast)] hover:text-foreground",
+        "[&[data-state=open]>svg:last-child]:rotate-180",
+        focusRing,
+        className,
+      )}
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5 shrink-0">
+        <path
+          d="M9.5 21h5M12 3a6 6 0 0 1 3.6 10.8c-.6.5-.9 1.1-1 1.7l-.1.5h-5l-.1-.5c-.1-.6-.4-1.2-1-1.7A6 6 0 0 1 12 3Z"
+          stroke="currentColor"
+          strokeWidth="1.75"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      {children ?? (streaming ? streamingLabel : label)}
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        aria-hidden="true"
+        className="size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)]"
+      >
+        <path
+          d="m6 9 6 6 6-6"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </CollapsiblePrimitive.Trigger>
+  );
+}
+
+export function ReasoningContent({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      data-slot="reasoning-content"
+      className={cn(
+        "overflow-hidden",
+        "data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mt-2 border-l-2 border-border pl-3 text-sm whitespace-pre-wrap text-muted-foreground">
+        {children}
+      </div>
+    </CollapsiblePrimitive.Content>
+  );
+}

package/src/components/ai-reasoning/index.ts

@@ -0,0 +1,7 @@
+export {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+  type ReasoningProps,
+  type ReasoningTriggerProps,
+} from "./ai-reasoning";

package/src/components/ai-reasoning/meta.ts

@@ -0,0 +1,17 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "ai-reasoning",
+  title: "AI Reasoning",
+  description: "A collapsible disclosure for the model's reasoning.",
+  category: "ai",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["ai-reasoning.tsx"],
+  a11y:
+    "A standard disclosure with aria-expanded on the trigger. Collapsed by default because " +
+    "reasoning is supporting material — giving it the same weight as the answer buries the " +
+    "answer. The trigger's label changes while reasoning streams, so its accessible name matches " +
+    "what is happening.",
+});

package/src/components/ai-response/ai-response.stories.tsx

@@ -0,0 +1,75 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useState } from "react";
+
+import { Response, ThinkingIndicator } from "./ai-response";
+
+const FULL =
+  "Streaming works one token at a time. The caret marks where the text stops, and nothing is announced as it arrives — a live region firing on every token is unusable with a screen reader.";
+
+/** Named so its type is nameable in declaration output (TS2883). */
+const withFixedWidth: Decorator = (Story) => (
+  <div className="w-[32rem]">
+    <Story />
+  </div>
+);
+
+const meta = {
+  title: "AI/Response",
+  component: Response,
+  args: { streaming: false, children: FULL },
+  argTypes: { streaming: { control: "boolean" } },
+  decorators: [withFixedWidth],
+} satisfies Meta<typeof Response>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Streaming: Story = {
+  args: { streaming: true, children: "Streaming works one token at a time. The caret" },
+};
+
+/** The real thing: text arriving, then settling. */
+export const Live: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Live() {
+    const [length, setLength] = useState(0);
+
+    useEffect(() => {
+      const timer = setInterval(() => {
+        setLength((current) => (current >= FULL.length ? 0 : current + 2));
+      }, 40);
+      return () => {
+        clearInterval(timer);
+      };
+    }, []);
+
+    const done = length >= FULL.length;
+    return <Response streaming={!done}>{FULL.slice(0, length)}</Response>;
+  },
+};
+
+/** Before the first token there is nothing to put a caret after. */
+export const Thinking: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ThinkingIndicator />,
+};
+
+export const WithRenderedMarkdown: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Response>
+      <p>Three things matter here:</p>
+      <ul>
+        <li>
+          The transcript is a <code>list</code>, not a live region.
+        </li>
+        <li>State is announced; content is not.</li>
+        <li>
+          See <a href="#a11y">the accessibility notes</a>.
+        </li>
+      </ul>
+    </Response>
+  ),
+};