Function App

demo/App.tsx:207–566

()

}

export default function App() {
  const [msgs, setMsgs] = useState<Message[]>([
    {
      id: "init",
      role: "ai",
      done: true,
      content:
        '<div class="callout info"><strong>27 examples</strong> on the right — start with <strong>★ Ultimate showcase</strong> under Showcase, or browse <strong>Claude</strong> edge cases. Tune speed on the left.</div>',
    },
  ]);
  const [busy, setBusy] = useState(false);
  const [category, setCategory] = useState<string>("Showcase");
  const [activeExId, setActiveExId] = useState<string | null>(null);
  const [preset, setPreset] = useState(DEFAULT_PRESET);
  const [chunkSize, setChunkSize] = useState(14);
  const [intervalMs, setIntervalMs] = useState(18);
  const [jitterMs, setJitterMs] = useState(0);
  const [streamProgress, setStreamProgress] = useState<{ cur: number; total: number } | null>(null);

  const timer = useRef<ReturnType<typeof setTimeout>>(null);
  const msgsRef = useRef<HTMLDivElement>(null);
  const userScrolledUpRef = useRef(false);
  const streamParams = useRef<StreamParams>({ chunkSize, intervalMs, jitterMs });

  streamParams.current = { chunkSize, intervalMs, jitterMs };

  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );

  useEffect(() => {
    const el = msgsRef.current;
    if (!el) {
      return;
    }
    let touchStartY = 0;

    const onWheel = (e: WheelEvent) => {
      if (e.deltaY < 0) {
        userScrolledUpRef.current = true;
      }
    };
    const onTouchStart = (e: TouchEvent) => {
      touchStartY = e.touches[0]?.clientY ?? 0;
    };
    const onTouchMove = (e: TouchEvent) => {
      const y = e.touches[0]?.clientY ?? 0;
      if (y > touchStartY + 12) {
        userScrolledUpRef.current = true;
      }
    };

    el.addEventListener("wheel", onWheel, { passive: true });
    el.addEventListener("touchstart", onTouchStart, { passive: true });
    el.addEventListener("touchmove", onTouchMove, { passive: true });