Assistant sidebar

A panel down one edge, worth its width only if it can see the work beside it. It names what it currently sees, routes an answer back into the document, and every pixel it takes comes off the thing being written.

npx shadcn@latest add resizable button input
npm i lucide-react

Tokens this needs: --background, --foreground, --card, --card-foreground, --muted, --muted-foreground, --border, --input, --ring, --chart-1

────────────────────────────────────────────────────────────────────────
// AssistantSidebar.tsx
────────────────────────────────────────────────────────────────────────

import { useEffect, useState, type ReactNode } from "react";
import { CornerDownLeft, PanelRightOpen } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

/** One turn in the panel. `insert` is the text an answer offers to put into
 *  the document; an answer without one is a remark, and gets no button. */
export type Turn = { role: "user" | "assistant"; text: string; insert?: string };

type Props = {
  /** What the assistant can currently see, in the viewer's words. Required:
   *  a panel that will not say gets the question answered by experiment. */
  scope: string;
  onChangeScope: () => void;
  turns: Turn[];
  onSend: (text: string) => void;
  /** The path from an answer back into the document. A button, never a
   *  copy and paste. */
  onInsert: (text: string) => void;
};

export function AssistantSidebar({ scope, onChangeScope, turns, onSend, onInsert }: Props) {
  const [draft, setDraft] = useState("");
  const send = () => {
    if (!draft.trim()) return;
    onSend(draft.trim());
    setDraft("");
  };

  return (
    <aside className="flex h-full flex-col bg-card" aria-label="Assistant">
      <div className="m-3 flex items-center gap-2 rounded-md border border-chart-1 bg-chart-1/10 px-2.5 py-1 text-xs">
        <span className="text-chart-1">seeing: {scope}</span>
        <button type="button" className="ml-auto text-muted-foreground hover:text-foreground" onClick={onChangeScope}>change</button>
      </div>

      <div className="min-h-0 flex-1 space-y-3 overflow-y-auto px-3">
        {turns.map((t, i) =>
          t.role === "user" ? (
            <div key={i} className="flex justify-end">
              <p className="rounded-xl bg-muted px-3 py-1.5 text-sm text-foreground">{t.text}</p>
            </div>
          ) : (
            <div key={i}>
              <p className="text-sm leading-relaxed text-card-foreground">{t.text}</p>
              {t.insert && (
                <Button variant="outline" size="sm" className="mt-2 h-7 text-xs" onClick={() => onInsert(t.insert!)}>
                  <CornerDownLeft className="size-3.5" /> insert
                </Button>
              )}
            </div>
          ),
        )}
      </div>

      <form onSubmit={(e) => { e.preventDefault(); send(); }} className="p-3">
        <Input value={draft} onChange={(e) => setDraft(e.target.value)} placeholder={`Ask about ${scope}`} aria-label="Ask the assistant" />
      </form>
    </aside>
  );
}

/** The work on the left, the panel down the right edge, one keystroke to open
 *  and the same one to close. The split is the viewer's and is remembered
 *  under `id`. Closed, the panel collapses to a rail rather than vanishing. */
export function AssistantLayout({ id, document, sidebar, open, onToggle, defaultWidth = 38 }: {
  id: string;
  document: ReactNode;
  sidebar: ReactNode;
  open: boolean;
  onToggle: () => void;
  /** Percent of the group. Prose wants roughly 360 to 420px to read. */
  defaultWidth?: number;
}) {
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "j") { e.preventDefault(); onToggle(); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onToggle]);

  return (
    <ResizablePanelGroup direction="horizontal" autoSaveId={id}>
      <ResizablePanel id="document" order={1} defaultSize={100 - defaultWidth} minSize={40}>{document}</ResizablePanel>
      {open ? (
        <>
          <ResizableHandle />
          <ResizablePanel id="assistant" order={2} defaultSize={defaultWidth} minSize={30} maxSize={55}>{sidebar}</ResizablePanel>
        </>
      ) : (
        <button type="button" onClick={onToggle} aria-label="Open assistant (⌘J)" className="flex w-9 items-start justify-center border-l pt-3 text-muted-foreground hover:text-foreground">
          <PanelRightOpen className="size-4" />
        </button>
      )}
    </ResizablePanelGroup>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { AssistantLayout, AssistantSidebar, type Turn } from "./AssistantSidebar";

const INTRO =
  "Our pricing is designed to grow with you. Whether you are a solo founder or a global enterprise, we have a plan that fits your needs and your budget, with transparent pricing and no hidden fees.";
const PLANS = [
  "Starter: three seats, unlimited projects, community support. Free.",
  "Team: £12 a seat a month, shared workspaces, priority support, SSO.",
  "Enterprise: custom seat pricing, audit log, dedicated support, invoicing.",
];

const TURNS: Turn[] = [
  { role: "user", text: "Is the intro pulling its weight?" },
  {
    role: "assistant",
    text: "The intro runs three sentences before a plan is named, and none of them says a price. One line does the job: seats, not tiers, and the first three are free.",
    insert: "Seats, not tiers. The first three are free.",
  },
];

/** The pricing page draft on the left, the panel on the right seeing it.
 *  Insert replaces the intro the answer is about. ⌘J closes the panel to a
 *  rail and opens it again; the split you drag is remembered. */
export default function Demo() {
  const [intro, setIntro] = useState(INTRO);
  const [open, setOpen] = useState(true);
  const [turns, setTurns] = useState(TURNS);

  return (
    <div className="h-[360px] overflow-hidden rounded-lg border bg-card">
      <AssistantLayout
        id="demo:assistant-sidebar"
        open={open}
        onToggle={() => setOpen((o) => !o)}
        document={
          <article className="h-full overflow-y-auto p-4 text-sm leading-relaxed text-card-foreground">
            <h2 className="text-base font-semibold">Pricing page draft</h2>
            <p className={`mt-2 ${intro === INTRO ? "rounded bg-chart-1/10 px-1" : ""}`}>{intro}</p>
            {PLANS.map((p) => <p key={p} className="mt-2">{p}</p>)}
          </article>
        }
        sidebar={
          <AssistantSidebar
            scope="this page"
            onChangeScope={() => {}}
            turns={turns}
            onInsert={(text) => setIntro(text)}
            onSend={(text) => setTurns([...turns, { role: "user", text }])}
          />
        }
      />
    </div>
  );
}