Edit and resend

EditTurn.tsxA user turn that opens in place, pages between its versions, and says how many turns a save will move before it moves them.Copy

import { useEffect, useRef, useState, type KeyboardEvent } from "react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

type Props = {
  /** Every version of this question, oldest first. Editing appends one; it
   *  never replaces, because the old limb of the conversation still hangs
   *  off the old wording. */
  versions: string[];
  /** How many turns sit below this one. Required, because saving moves all of
   *  them to the other branch and the viewer has to read that before they
   *  commit, never after. */
  turnsBelow: number;
  onSave: (text: string) => void;
  onCancel?: () => void;
  /** Which version the transcript continues from. */
  onSelect?: (index: number) => void;
  defaultEditing?: boolean;
  /** Which version shows first. Defaults to the newest. */
  defaultIndex?: number;
};

export function EditTurn({ versions, turnsBelow, onSave, onCancel, onSelect, defaultEditing = false, defaultIndex }: Props) {
  const n = versions.length;
  const [i, setI] = useState(defaultIndex ?? n - 1);
  const [editing, setEditing] = useState(defaultEditing);
  const [draft, setDraft] = useState(versions[i]);
  const ref = useRef<HTMLTextAreaElement>(null);

  const go = (next: number) => { setI(next); setDraft(versions[next]); onSelect?.(next); };

  // A saved edit lands on the new version, the same as a regenerate lands on
  // the new answer.
  const seen = useRef(n);
  useEffect(() => {
    if (n > seen.current) go(n - 1);
    seen.current = n;
  }, [n]);

  // Pre-filled with the cursor at the end. The viewer is here to change a
  // word or add a clause, and the caret at the start makes them arrow past
  // the whole question first.
  useEffect(() => {
    const el = ref.current;
    if (!editing || !el) return;
    el.focus();
    el.setSelectionRange(el.value.length, el.value.length);
  }, [editing]);

  const cancel = () => { setEditing(false); setDraft(versions[i]); onCancel?.(); };
  const save = () => {
    const text = draft.trim();
    if (!text || text === versions[i]) { cancel(); return; }
    setEditing(false);
    onSave(text);
  };
  const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Escape") { e.preventDefault(); cancel(); }
    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); save(); }
  };

  const pager = n > 1 && (
    <div className="flex items-center gap-1 text-[11px]">
      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => go(i - 1)} disabled={i === 0} aria-label="previous version">‹</Button>
      <span className="tabular-nums text-chart-1">{i + 1} of {n}</span>
      <Button variant="ghost" size="sm" className="h-6 w-6 p-0" onClick={() => go(i + 1)} disabled={i === n - 1} aria-label="next version">›</Button>
    </div>
  );

  return (
    <div className="flex flex-col items-end">
      <div className="w-[328px] rounded-lg border bg-background p-3">
        {editing ? (
          <Textarea ref={ref} value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={onKeyDown} rows={2}
            aria-label="Edit your question" className="min-h-0 resize-none border-0 p-0 text-sm shadow-none focus-visible:ring-0" />
        ) : (
          <p className="text-sm leading-relaxed text-foreground">{versions[i]}</p>
        )}
        <div className="mt-3 flex items-center gap-2 text-[11px] text-muted-foreground">
          {pager}
          {editing ? (
            <>
              <span className="ml-auto">esc to abandon</span>
              <Button size="sm" className="h-6 px-2 text-[11px]" onClick={save}>save</Button>
            </>
          ) : (
            <Button variant="ghost" size="sm" className="ml-auto h-6 px-2 text-[11px]" onClick={() => setEditing(true)}>edit</Button>
          )}
        </div>
      </div>

      {/* The cost of saving, stated where the save button is. */}
      {editing && turnsBelow > 0 && (
        <p className="mt-2 text-[11px] text-status-warn" role="status">
          the {turnsBelow} {turnsBelow === 1 ? "turn" : "turns"} below {turnsBelow === 1 ? "moves" : "move"} to the other branch
        </p>
      )}
    </div>
  );
}

demo.tsxHow it is called: two versions, opened for editing on the second, six turns below. Save appends a third.Copy

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

/**
 * A question already edited once, open for a second edit, with six turns of
 * conversation hanging below it. Saving appends a third version and the new
 * limb starts empty, so the warning goes away with it.
 */
export default function Demo() {
  const [versions, setVersions] = useState([
    "Summarise the lease.",
    "Summarise the lease: term, rent, the break clause and what happens to the deposit.",
  ]);
  const [turnsBelow, setTurnsBelow] = useState(6);
  const save = (text: string) => {
    setVersions([...versions, text]);
    setTurnsBelow(0);
  };
  return (
    <div className="rounded-lg border bg-card p-4">
      <EditTurn versions={versions} turnsBelow={turnsBelow} defaultEditing defaultIndex={1} onSave={save} />
    </div>
  );
}