Stop generation

StopGeneration.tsxSendOrStop is the slot, with Esc wired to it while streaming. StoppedTurn keeps the partial text and marks it.Copy

import { useEffect } from "react";
import { ArrowUp, Square } from "lucide-react";
import { Button } from "@/components/ui/button";

/**
 * One slot, two states. While a response streams the send button is the
 * stop button, because that is where the pointer already is. Esc stops too,
 * for the hand that is still on the keyboard.
 */
export function SendOrStop({ streaming, canSend, onSend, onStop }: {
  streaming: boolean; canSend: boolean; onSend: () => void; onStop: () => void;
}) {
  useEffect(() => {
    if (!streaming) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") onStop(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [streaming, onStop]);

  return streaming ? (
    <Button variant="outline" size="sm" className="border-chart-1 text-chart-1" onClick={onStop} aria-label="Stop generating (Esc)">
      <Square className="size-3 fill-current" /> esc
    </Button>
  ) : (
    <Button size="sm" onClick={onSend} disabled={!canSend}>
      <ArrowUp className="size-4" /> send
    </Button>
  );
}

/**
 * The partial output stays. The first two paragraphs were often fine, and
 * truncating throws away the part that worked. It stays marked, because a
 * partial answer that looks complete is worse than none, and the mark is in
 * the text's own container so it travels with a copy.
 */
export function StoppedTurn({ paragraphs, expected, tokens }: {
  /** What was written before the stop. */
  paragraphs: string[];
  /** The model's own estimate of length, so the mark can say how far it got. */
  expected: number;
  /** Already billed. Stopping does not refund the part that was written. */
  tokens: { used: number; budget: number };
}) {
  return (
    <div>
      {paragraphs.map((p, i) => (
        <p key={i} className={`text-sm leading-relaxed text-card-foreground ${i ? "mt-3" : ""}`}>{p}</p>
      ))}
      <p className="mt-3 text-xs tabular-nums text-chart-1">Stopped. {paragraphs.length} of about {expected} paragraphs.</p>

      <div className="mt-4 flex items-center gap-3 text-xs text-muted-foreground">
        <span>tokens billed for the part that was written</span>
        <span
          role="meter" aria-valuemin={0} aria-valuemax={tokens.budget} aria-valuenow={tokens.used}
          aria-label="tokens used of this turn's budget"
          className="ml-auto flex h-2 w-44 overflow-hidden rounded-full bg-muted"
        >
          <span className="bg-chart-1" style={{ width: `${(100 * tokens.used) / tokens.budget}%` }} />
        </span>
      </div>
    </div>
  );
}

demo.tsxHow it is called: a turn mid-stream with the slot showing stop. Stop keeps and marks what was written.Copy

import { useEffect, useState } from "react";
import { Textarea } from "@/components/ui/textarea";
import { SendOrStop, StoppedTurn } from "./StopGeneration";

/**
 * Starts just after a stop: two paragraphs kept, the second cut mid-sentence
 * and marked. Send starts the answer over, and while it streams the slot is
 * stop; stop (or Esc) brings this state back.
 */
const P1 =
  "The lease runs five years from 1 March 2024 at £42,000 a year. There is a tenant-only break at the end of year two on six months' written notice, conditional on the rent being paid up to date and vacant possession being given on the break date.";
const P2 =
  "The rent review at year three is upward-only, which means the rent can rise to the open market figure but never fall below £42,000. The mechanism if the two sides cannot agree is an independent surveyor acting as an expert, whose decision binds both.";
const P2_HEAD = "The rent review at year three is upward-only, which means the rent can rise to the open market figure but never fall below £42,000. The mechanism if the two sides cannot agree is";

export default function Demo() {
  const [p2, setP2] = useState(P2_HEAD);
  const [streaming, setStreaming] = useState(false);
  const [stopped, setStopped] = useState(true);
  const [draft, setDraft] = useState("");

  useEffect(() => {
    if (!streaming) return;
    const rest = P2.slice(p2.length).split(/(?<=\s)/);
    let i = 0;
    const id = setInterval(() => {
      if (i >= rest.length) { setStreaming(false); clearInterval(id); return; }
      setP2((t) => t + rest[i++]);
    }, 300);
    return () => clearInterval(id);
  }, [streaming]);

  const stop = () => { setStreaming(false); setStopped(true); };
  const send = () => { setP2(P2_HEAD); setStopped(false); setStreaming(true); setDraft(""); };

  return (
    <div className="rounded-lg border bg-card p-4">
      {stopped ? (
        <StoppedTurn paragraphs={[P1, p2]} expected={9} tokens={{ used: 680, budget: 2000 }} />
      ) : (
        <>
          <p className="text-sm leading-relaxed text-card-foreground">{P1}</p>
          <p className="mt-3 text-sm leading-relaxed text-card-foreground">
            {p2}
            {streaming && <span aria-hidden="true" className="ml-0.5 inline-block h-3.5 w-0.5 animate-pulse bg-foreground align-middle" />}
          </p>
        </>
      )}

      <div className="mt-5 flex items-end gap-2 rounded-lg border bg-background p-2">
        <Textarea
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          rows={1}
          placeholder="Message"
          aria-label="Message"
          className="min-h-0 resize-none border-0 px-2 py-1.5 shadow-none focus-visible:ring-0"
        />
        <SendOrStop streaming={streaming} canSend onSend={send} onStop={stop} />
      </div>
    </div>
  );
}