Streaming and loading states

import Anthropic from '@anthropic-ai/sdk';

// Runs on the server only. The API key never reaches the browser.
const client = new Anthropic();

/** One JSON object per line, so the client can act on each event as it arrives. */
type StreamEvent =
  | { type: 'text'; text: string }
  | { type: 'done'; stopReason: Anthropic.Message['stop_reason'] }
  | { type: 'error'; retryable: boolean };

export async function POST(request: Request): Promise<Response> {
  const { prompt } = (await request.json()) as { prompt?: unknown };
  if (typeof prompt !== 'string' || prompt.length === 0 || prompt.length > 8000) {
    return Response.json({ error: 'Prompt must be 1 to 8,000 characters.' }, { status: 400 });
  }

  const encoder = new TextEncoder();
  const body = new ReadableStream<Uint8Array>({
    async start(controller) {
      const send = (event: StreamEvent) => controller.enqueue(encoder.encode(`${JSON.stringify(event)}\n`));
      try {
        // Passing request.signal cancels the model call when the user presses Stop or leaves the page.
        const stream = client.messages.stream(
          {
            model: 'claude-opus-5-5',
            max_tokens: 4096,
            output_config: { effort: 'low' },
            system: 'Draft a concise, friendly reply to the customer message. Plain text, no greeting line.',
            messages: [{ role: 'user', content: prompt }],
          },
          { signal: request.signal },
        );
        for await (const event of stream) {
          if (event.type === 'content_block_delta' && event.delta.type === 'text_delta') {
            send({ type: 'text', text: event.delta.text });
          }
        }
        const message = await stream.finalMessage();
        send({ type: 'done', stopReason: message.stop_reason });
      } catch (error) {
        // If the user cancelled, the browser has already gone: there's nobody to tell.
        if (!request.signal.aborted) {
          const retryable =
            error instanceof Anthropic.RateLimitError ||
            error instanceof Anthropic.InternalServerError ||
            error instanceof Anthropic.APIConnectionError;
          send({ type: 'error', retryable });
        }
      } finally {
        try {
          controller.close();
        } catch {
          // Already closed because the client disconnected.
        }
      }
    },
  });

  return new Response(body, {
    headers: { 'Content-Type': 'application/x-ndjson; charset=utf-8', 'Cache-Control': 'no-store' },
  });
}

'use client';

import { useRef, useState } from 'react';

// Same shape as the events the route sends.
type StreamEvent =
  | { type: 'text'; text: string }
  | { type: 'done'; stopReason: string | null }
  | { type: 'error'; retryable: boolean };

type Status = 'idle' | 'waiting' | 'streaming' | 'done' | 'truncated' | 'declined' | 'stopped' | 'error';

const finalStatus = (stopReason: string | null): Status => {
  switch (stopReason) {
    case 'end_turn':
      return 'done';
    case 'max_tokens':
    case 'model_context_window_exceeded':
      return 'truncated';
    case 'refusal':
      return 'declined';
    default:
      // Anything else (no tools are defined here, so tool_use or pause_turn would be a bug) is shown as an error.
      return 'error';
  }
};

const messages: Partial<Record<Status, string>> = {
  truncated: 'This draft was cut off. Try asking for a shorter reply.',
  declined: "This request can't be drafted automatically. Please write this reply yourself.",
  stopped: 'Stopped. You can keep this partial draft or try again.',
  error: 'Something went wrong while drafting.',
};

export function DraftReply({ customerMessage }: { customerMessage: string }) {
  const [status, setStatus] = useState<Status>('idle');
  const [text, setText] = useState('');
  const [retryable, setRetryable] = useState(false);
  const controller = useRef<AbortController | null>(null);

  async function draft() {
    controller.current = new AbortController();
    setText('');
    setStatus('waiting');
    try {
      const response = await fetch('/api/draft', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: customerMessage }),
        signal: controller.current.signal,
      });
      if (!response.ok || !response.body) throw new Error(`HTTP ${response.status}`);

      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
      let buffer = '';
      let ended = false;
      for (;;) {
        const { value, done } = await reader.read();
        if (done) break;
        buffer += value;
        const lines = buffer.split('\n');
        buffer = lines.pop() ?? '';
        for (const line of lines.filter(Boolean)) {
          const event = JSON.parse(line) as StreamEvent;
          if (event.type === 'text') {
            setStatus('streaming');
            setText((t) => t + event.text);
          } else if (event.type === 'done') {
            ended = true;
            setStatus(finalStatus(event.stopReason));
          } else {
            ended = true;
            setRetryable(event.retryable);
            setStatus('error');
          }
        }
      }
      // The connection closed without a final event: treat it as an error, not as a finished draft.
      if (!ended) {
        setRetryable(true);
        setStatus('error');
      }
    } catch {
      if (controller.current.signal.aborted) {
        setStatus('stopped');
      } else {
        setRetryable(true);
        setStatus('error');
      }
    }
  }

  const busy = status === 'waiting' || status === 'streaming';
  const note = messages[status];

  return (
    <section aria-labelledby="draft-heading">
      <h2 id="draft-heading">Suggested reply</h2>
      {/* aria-busy stops screen readers announcing every token; the status line announces the outcome once. */}
      <div aria-busy={busy}>{status === 'waiting' ? <p>Drafting…</p> : <p style={{ whiteSpace: 'pre-wrap' }}>{text}</p>}</div>
      <p role="status">{note ?? (status === 'done' ? 'Draft ready.' : '')}</p>
      {busy ? (
        <button type="button" onClick={() => controller.current?.abort()}>
          Stop
        </button>
      ) : (
        <button type="button" onClick={draft} disabled={status === 'error' && !retryable}>
          {status === 'idle' ? 'Draft a reply' : 'Try again'}
        </button>
      )}
    </section>
  );
}