Artifact panel

The conversation stays about the work and the panel holds the work. A generated document gets its own version pager, its own actions and its own scroll, while the transcript keeps a short reference to what was produced.

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

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

────────────────────────────────────────────────────────────────────────
// ArtifactPanel.tsx
────────────────────────────────────────────────────────────────────────

import { useState, type ReactNode } from "react";
import { Copy, Download, Play, Eye, Globe, FileText } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";

export type Artifact = {
  title: string;
  /** Document, code or page. The actions follow the type. */
  kind: "document" | "code" | "page";
  /** Every version, oldest first. Six near-identical drafts in a transcript
   *  have to be diffed by eye; here they page. */
  versions: string[];
};

/** Copy and download for a document, run and preview for code, publish for
 *  a page. A panel with the wrong verbs is a panel nobody uses. */
const ACTIONS = {
  document: [{ label: "copy", Icon: Copy }, { label: "download", Icon: Download }],
  code:     [{ label: "run", Icon: Play },   { label: "preview", Icon: Eye }],
  page:     [{ label: "publish", Icon: Globe }],
} as const;

/** The transcript keeps a short pointer, so the conversation stays about the
 *  work and stays navigable. The work itself lives in the panel. */
export function ArtifactReference({ artifact, version, onOpen }: { artifact: Artifact; version: number; onOpen: () => void }) {
  return (
    <Button variant="outline" size="sm" className="w-full justify-start font-normal" onClick={onOpen}>
      <FileText className="size-4" /> {artifact.title} · v{version}
    </Button>
  );
}

export function ArtifactPanel({ artifact, onAction, onEdit, defaultVersion }: {
  artifact: Artifact;
  /** Which version opens first. Defaults to the newest. */
  defaultVersion?: number;
  onAction: (label: string, version: number) => void;
  /** Fires on every edit made in the panel. The model has to see this next
   *  turn; a panel whose contents diverge from what the model holds is the
   *  worst failure here. */
  onEdit: (version: number, text: string) => void;
}) {
  const n = artifact.versions.length;
  const [v, setV] = useState(defaultVersion ?? n);
  const [dirty, setDirty] = useState(false);

  return (
    <div className="flex h-full min-w-0 flex-col overflow-hidden rounded-lg border bg-muted">
      <div className="border-b px-3 py-2">
        <p className="text-sm text-card-foreground">{artifact.title}</p>
        <div className="mt-1 flex flex-wrap items-center gap-2">
        <div className="flex items-center gap-1 text-xs">
          <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setV(v - 1)} disabled={v === 1} aria-label="previous version">‹</Button>
          <span className="tabular-nums text-chart-1">v{v} of {n}</span>
          <Button variant="ghost" size="sm" className="h-7 w-7 p-0" onClick={() => setV(v + 1)} disabled={v === n} aria-label="next version">›</Button>
        </div>
        <div className="ml-auto flex gap-1">
          {ACTIONS[artifact.kind].map(({ label, Icon }) => (
            <Button key={label} variant="ghost" size="sm" className="h-7 text-xs" onClick={() => onAction(label, v)}>
              <Icon className="size-3.5" /> {label}
            </Button>
          ))}
        </div>
        </div>
      </div>

      {/* The panel has its own scroll, and its body is the editable thing. */}
      <div
        contentEditable
        suppressContentEditableWarning
        onInput={(e) => { setDirty(true); onEdit(v, e.currentTarget.innerText); }}
        className="min-h-0 flex-1 overflow-y-auto whitespace-pre-wrap p-3 text-sm leading-relaxed text-card-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        {artifact.versions[v - 1]}
      </div>

      {dirty && (
        <p className="border-t px-3 py-1.5 text-xs text-muted-foreground">edited here, and the model sees it next turn</p>
      )}
    </div>
  );
}

/** Transcript on the left, work on the right, and the reader sets the split. */
export function ArtifactLayout({ transcript, panel }: { transcript: ReactNode; panel: ReactNode }) {
  return (
    <ResizablePanelGroup direction="horizontal">
      <ResizablePanel defaultSize={45} minSize={30}>{transcript}</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={55} minSize={35}>{panel}</ResizablePanel>
    </ResizablePanelGroup>
  );
}

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

import { useState } from "react";
import { ArtifactLayout, ArtifactPanel, ArtifactReference, type Artifact } from "./ArtifactPanel";

const PLANS =
  "Starter: three seats, unlimited projects, community support. Free.\nTeam: £12 a seat a month, shared workspaces, priority support, SSO.\nEnterprise: custom seat pricing, audit log, dedicated support, invoicing.";
const CLOSE = "Every plan includes unlimited viewers, and you can move between plans at any time without losing work.";

/** Five drafts of the same page. v3 is the one the transcript points at. */
const draft: Artifact = {
  title: "Pricing page draft",
  kind: "document",
  versions: [
    `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.\n\n${PLANS}`,
    `Pricing that grows with you. One plan per team size, metered by seats, with the first three seats free so you can try it with real colleagues before you pay anything.\n\n${PLANS}\n\n${CLOSE}`,
    `Pay for what you use. One plan, metered by seats, with the first three free.\n\n${PLANS}\n\n${CLOSE}`,
    `Pay for what you use. Seats, not tiers.\n\n${PLANS}\n\n${CLOSE}`,
    `Seats, not tiers. The first three are free.\n\n${PLANS}\n\n${CLOSE}`,
  ],
};

export default function Demo() {
  const [open, setOpen] = useState(true);

  return (
    <div className="h-[420px] overflow-hidden rounded-lg border bg-card">
      <ArtifactLayout
        transcript={
          <div className="h-full p-4">
            <div className="flex justify-end">
              <p className="rounded-xl bg-muted px-3 py-1.5 text-sm text-foreground">make the intro shorter</p>
            </div>
            <p className="mt-4 text-sm leading-relaxed text-card-foreground">Cut it to two sentences and moved the plan comparison up. v3 is in the panel.</p>
            <div className="mt-4">
              <ArtifactReference artifact={draft} version={3} onOpen={() => setOpen(true)} />
            </div>
          </div>
        }
        panel={
          open ? (
            <div className="h-full p-4">
              <ArtifactPanel artifact={draft} defaultVersion={3} onAction={() => {}} onEdit={() => {}} />
            </div>
          ) : null
        }
      />
    </div>
  );
}