Streaming Chat Needs Cancel and Retry States, Not Just a Spinner

type ChatState =
  | { status: 'idle' }
  | { status: 'streaming'; controller: AbortController; text: string }
  | { status: 'cancelling'; controller: AbortController; text: string }
  | { status: 'cancelled'; text: string; prompt: string }
  | { status: 'error'; message: string; text: string; prompt: string }
  | { status: 'done'; text: string; prompt: string };

type ChatEvent =
  | { type: 'SUBMIT'; prompt: string; controller: AbortController }
  | { type: 'TOKEN'; delta: string }
  | { type: 'CANCEL' }
  | { type: 'FAIL'; message: string }
  | { type: 'SETTLE' }; // stream ended, or abort settled

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accessible streaming chat</title>
<style>
  [hidden]{display:none}
  #log{min-height:8rem;border:1px solid #999;padding:.75rem;white-space:pre-wrap}
  #status{margin:.5rem 0}
  .error{color:#8b0000}
  button:focus-visible, textarea:focus-visible, input:focus-visible{
    outline:3px solid #005fcc; outline-offset:2px;
  }
</style>
</head>
<body>
  <h1>Streaming chat with cancel and retry</h1>

  <label>Endpoint <input id="endpoint" size="40"
    placeholder="https://your-host/v1/chat/completions"></label>
  <label>API key <input id="key" type="password" size="24"
    placeholder="leave blank if none needed"></label>

  <div id="log" aria-label="Conversation"></div>

  <!-- Polite, throttled announcements: never aria-live the token stream itself -->
  <div id="status" role="status"></div>

  <label for="prompt">Prompt</label>
  <textarea id="prompt" rows="3"></textarea>
  <button id="send">Send</button>
  <button id="stop" hidden>Stop (Esc)</button>
  <button id="retry" hidden>Retry last prompt</button>

<script type="module">
let state = { status: 'idle' };
const $ = id => document.getElementById(id);
const log = $('log'), statusEl = $('status'), promptEl = $('prompt');

function announce(msg){ statusEl.textContent = msg; }
function render(){
  $('stop').hidden  = state.status !== 'streaming';
  $('retry').hidden = !(state.status === 'cancelled' || state.status === 'error');
  $('send').disabled = state.status === 'streaming' || state.status === 'cancelling';
}

async function run(prompt){
  const controller = new AbortController();
  state = { status: 'streaming', controller, text: '' };
  render(); announce('Response started. Press Escape to stop.');

  const div = document.createElement('div');
  log.append(div);

  try {
    const res = await fetch($('endpoint').value, {
      method: 'POST',
      signal: controller.signal,
      headers: {
        'content-type': 'application/json',
        ...($('key').value ? { authorization: `Bearer ${$('key').value}` } : {})
      },
      body: JSON.stringify({
        model: 'default', stream: true,
        messages: [{ role: 'user', content: prompt }]
      })
    });
    if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);

    const reader = res.body.getReader();
    const decoder = new TextDecoder();
    let buf = '';
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      buf += decoder.decode(value, { stream: true });
      // Parse SSE lines; tolerate partial lines.
      for (const line of buf.split('\n')) {
        if (!line.startsWith('data:')) continue;
        const payload = line.slice(5).trim();
        if (payload === '[DONE]') break;
        try {
          const delta = JSON.parse(payload)?.choices?.[0]?.delta?.content ?? '';
          if (delta && state.status === 'streaming') {
            state = { ...state, text: state.text + delta };
            div.textContent = state.text; // visual only; NOT announced per-token
          }
        } catch { /* keep buffered partial JSON for next chunk */ }
      }
      buf = buf.endsWith('\n') ? '' : buf.slice(buf.lastIndexOf('\n') + 1);
    }
    const words = state.text.trim().split(/\s+/).length;
    state = { status: 'done', text: state.text, prompt };
    announce(`Response complete, ${words} words.`);
  } catch (err) {
    if (err.name === 'AbortError') {
      state = { status: 'cancelled', text: state.text, prompt };
      announce('Response stopped. Partial answer kept. Retry available.');
    } else {
      state = { status: 'error', message: err.message, text: state.text, prompt };
      div.classList.add('error');
      div.textContent += `\n[error: ${err.message}]`;
      announce(`Error: ${err.message}. Retry available.`);
      $('retry').focus(); // move focus to the recovery action
    }
  }
  render();
  if (state.status !== 'error') promptEl.focus(); // return focus to composer
}

$('send').addEventListener('click', () => {
  const prompt = promptEl.value.trim();
  if (prompt && state.status !== 'streaming') run(prompt);
});
$('retry').addEventListener('click', () => {
  if (state.status === 'cancelled' || state.status === 'error') run(state.prompt);
});
$('stop').addEventListener('click', () => {
  if (state.status === 'streaming') state.controller.abort();
});
document.addEventListener('keydown', e => {
  if (e.key === 'Escape' && state.status === 'streaming') state.controller.abort();
});
promptEl.addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); $('send').click(); }
});
render();
</script>
</body>
</html>