Streaming text

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from 'react';import { useAutoplay } from './use-autoplay';import styles from './streaming-text.module.css';/* * Streaming text: an assistant's answer that arrives word by word behind a thin caret, with a * source cited inline, a row of message actions, the sources it read, and follow-up questions. * * - The answer is a list of parts: runs of words and citations. They are cut into tokens, one per *   word or citation, and the stream reveals one more token every `speed` ms (58 by default). Each *   word is a span of its own with its trailing space, so a revealed word never reflows the ones *   before it; the paragraph wraps "pretty", so the last lines settle as it grows. * - The caret is a 2 by 12 px bar that fades in when a stream starts and goes with the last word. *   A citation is a small chip (the source's tile and domain) that pops in as it arrives. * - While the answer streams, the actions and the follow-ups fade out (400 ms) and stop taking the *   pointer, and the sources list folds away. With the last word they fade back, the open sources *   list unfolds again (a 0fr to 1fr grid row, 300 ms), and the follow-ups rise in one by one, *   90 ms apart. * - Retry plays the stream again; copy puts the answer's text on the clipboard; the thumbs are *   toggles. "10 sources" opens the list of sources, each a link with its tile, name and domain.

/* Streaming text (streaming-text.tsx): a soft grey stage, or at night a charcoal one, with the   answer in a 380 px column in its middle. Sizes are the component's own (13 px answer, 12 px   details); the column narrows with the stage on a phone, and the stage grows taller when the   sources list opens.   Colours are the tokens below, light-dark(light, dark): the component takes the color-scheme it   inherits from the page (light unless the page says otherwise), or the one its colorScheme prop   sets (data-color-scheme). */.root {  /* The stage, raised and inset surfaces on it. */  --canvas: oklch(96.1% 0.002 247.84);  --surface: oklch(100% 0 0);  --inset: oklch(97.9% 0.002 247.839);  /* The words: the answer, the details, the quiet icons. */  --ink: oklch(24.7% 0.006 258.361);  --ink-2: oklch(50.6% 0.01 264.477);  --ink-3: oklch(69.5% 0.009 264.505);  /* Hovered rows and buttons. */  --hover: oklch(97% 0.002 247.839);  --hover-2: oklch(93.3% 0.003 247.86);  /* Hairlines: the stage's edge, the chips', the rule under each follow-up. */  --line: oklch(94.6% 0.003 264.542);  /* The ring around each tile on the sources button. */

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;