AI entry point

AiEntryPoint.tsxSparkle plus verb, an accessible name built from the verb and its object, and a placement that marks a selection-attached control as belonging to the passage.Copy

import { Sparkle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * An entry point is a button that sits next to the thing it acts on and says
 * what it does. Both halves are props the caller cannot leave out. `verb`,
 * because the sparkle became a genre marker in about two years and now says
 * that something is AI rather than what it does. `object`, because the
 * accessible name has to describe the action on the thing, and a screen
 * reader hearing the product's name learns nothing.
 *
 * Where it goes is the caller's job, and the point: at the selection for a
 * passage, in the header for the document, beside the table for the data.
 * A permanent slot in the global toolbar is the one placement this component
 * does not offer a style for.
 */
export type Placement = "document" | "selection";

type Props = {
  /** What pressing it does, as an imperative: "summarise", "rewrite this". */
  verb: string;
  /** What it acts on. Only the accessible name carries it; the button beside
   *  the object does not need to repeat what the eye can see. */
  object: string;
  /** "document" waits quietly in the header. "selection" rode in on a signal
   *  the viewer made, so it is marked as belonging to the passage. */
  placement: Placement;
  onInvoke: () => void;
  /** The keyboard path, for people who never reach for the button. */
  shortcut?: string;
};

export function AiEntryPoint({ verb, object, placement, onInvoke, shortcut }: Props) {
  const name = `${verb}: ${object}`;
  return (
    <Button
      variant="outline"
      size="sm"
      onClick={onInvoke}
      aria-label={name}
      aria-keyshortcuts={shortcut}
      title={shortcut ? `${name} (${shortcut})` : name}
      className={cn(
        "h-7 gap-1.5 px-2.5 text-[11px] font-normal",
        placement === "selection" && "border-chart-1 text-chart-1 hover:text-chart-1",
      )}
    >
      <Sparkle className="!size-3 fill-chart-1 text-chart-1" aria-hidden="true" />
      {verb}
    </Button>
  );
}

demo.tsxHow it is called: summarise in the document header, rewrite this at a selected sentence. Rewriting replaces the sentence and takes the control away with the selection.Copy

import { useState } from "react";
import { AiEntryPoint } from "./AiEntryPoint";

/**
 * A document with two entry points, each next to its object. "summarise" waits
 * in the header because its object is the whole page. "rewrite this" appeared
 * because a sentence was selected, and goes away with the selection.
 */
const BEFORE = "Revenue for the quarter came in at £1.84m, three percent ahead of plan, with services carrying most of the beat. ";
const SELECTED = "Costs were higher than we had budgeted for on account of the fact that hiring ran ahead of the plan in the second half of the quarter.";
const AFTER = " Cash at the end of the period stood at £6.2m.";
const REWRITTEN = "Costs ran over budget because hiring outpaced the plan in the second half.";

export default function Demo() {
  const [selected, setSelected] = useState(true);
  const [sentence, setSentence] = useState(SELECTED);
  const [summary, setSummary] = useState<string>();

  const rewrite = () => {
    setSentence(REWRITTEN);
    setSelected(false);
  };

  return (
    <div className="rounded-lg border bg-card">
      <div className="flex gap-5 border-b px-4 py-2.5 text-[11px] text-muted-foreground">
        <span>File</span><span>Edit</span><span>View</span>
      </div>

      <div className="p-4">
        <div className="flex items-center gap-3">
          <h2 className="text-sm font-medium text-card-foreground">Q3 review</h2>
          <AiEntryPoint
            verb="summarise"
            object="Q3 review"
            placement="document"
            shortcut="Meta+J"
            onInvoke={() => setSummary("Revenue £1.84m, 3% over plan. Costs over budget on hiring. Cash £6.2m.")}
          />
        </div>
        {summary && <p className="mt-2 text-xs text-muted-foreground">{summary}</p>}

        <p className="mt-4 text-sm leading-relaxed text-card-foreground">
          {BEFORE}
          <span
            className={selected ? "bg-chart-1/20 text-card-foreground" : undefined}
            onMouseUp={() => setSelected(true)}
          >
            {sentence}
          </span>
          {AFTER}
        </p>

        {selected && (
          <div className="mt-2 flex justify-end">
            <AiEntryPoint
              verb="rewrite this"
              object="the selected sentence"
              placement="selection"
              onInvoke={rewrite}
            />
          </div>
        )}
      </div>
    </div>
  );
}