Calling Claude on Next.js

npx create-next-app@latest my-app --ts --app --tailwind
cd my-app
npm install @drashland/drash @anthropic-ai/sdk react-markdown remark-gfm
npm install --save-dev @tailwindcss/typography
export ANTHROPIC_API_KEY="sk-ant-..."

@import "tailwindcss";
@plugin "@tailwindcss/typography";

import Anthropic from "@anthropic-ai/sdk";
import {
  Application,
  HTTPError,
  Resource,
} from "@drashland/drash/modules/http.polyfill.js";
import { Status } from "@drashland/drash/core/http/response/Status.js";
import { DEFAULT_MODEL, isModel, type Model } from "@/app/models";
 
const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});
 
type Turn = { role: "user" | "assistant"; content: string };
 
// The API keeps no state between calls, so something has to hold the
// conversation and send all of it every time. Here that is the server: one
// list of turns per conversation, in memory. A restart forgets them all, and
// serverless instances do not share memory, so a real deployment keeps these
// in a database or a key-value store instead.
const conversations = new Map<string, Turn[]>();
 
const COOKIE = "conversation";
 
// The browser holds only an ID, in a cookie, and sends it back on its own.
// `HttpOnly` keeps page scripts from reading it.
function openConversation(request: Request) {
  const cookies = request.headers.get("cookie") ?? "";
  const found = cookies.match(new RegExp(`(?:^|;\\s*)${COOKIE}=([^;]+)`))?.[1];
  const id = found ?? crypto.randomUUID();
 
  const headers: Record<string, string> = found        // Only a new conversation
    ? {}                                               // needs the cookie set.
    : { "set-cookie": `${COOKIE}=${id}; Path=/; HttpOnly; SameSite=Lax` };
 
  return { id, turns: conversations.get(id) ?? [], headers };
}
 
// Stores the prompt and the reply together, and only once the reply is done.
// A failed request leaves no trace, so the next one never sends Claude a
// question that was never answered.
function remember(id: string, turns: Turn[], prompt: string, reply: string) {
  if (reply === "") {                                  // The API rejects an empty
    return;                                            // turn, so storing one would
  }                                                    // break every later request.
 
  conversations.set(id, [
    ...turns,
    { role: "user", content: prompt },
    { role: "assistant", content: reply },
  ]);
}
 
// Both chat resources start here. A route handler is handed a Web `Request`,
// which parses its own body.
async function readRequest(
  request: Request,
): Promise<{ prompt: string; model: Model }> {
  let body: { prompt?: unknown; model?: unknown };
 
  try {
    body = await request.json();
  } catch {
    throw new HTTPError(Status.BadRequest, "Body must be JSON");
  }
 
  if (typeof body.prompt !== "string" || body.prompt === "") {
    throw new HTTPError(Status.BadRequest, "Body must have a `prompt` string");
  }
 
  const model = body.model ?? DEFAULT_MODEL;           // The browser picks from a
                                                       // list, but nothing stops a
  if (!isModel(model)) {                               // caller sending any string.
    throw new HTTPError(Status.BadRequest, "Unknown model");
  }
 
  return { prompt: body.prompt, model };
}
 
// Anthropic's failures are not your caller's failures. Restate each one as the
// status your caller should actually see, with a reason a person can act on.
// Order matters — the specific classes come before `APIError`, which is their
// shared parent.
function anthropicErrorToHTTPError(error: unknown): unknown {
  if (error instanceof Anthropic.AuthenticationError) {
    return new HTTPError(                              // Your key is wrong. The
      Status.InternalServerError,                      // caller cannot fix that.
      "The server's Anthropic API key was rejected.",
    );
  }
 
  if (error instanceof Anthropic.RateLimitError) {
    return new HTTPError(                              // Pass the limit on.
      Status.TooManyRequests,
      "Too many requests right now. Wait a moment, then try again.",
    );
  }
 
  if (error instanceof Anthropic.NotFoundError) {
    return new HTTPError(                              // A model this key has no
      Status.BadRequest,                               // access to.
      "That model is not available to this server's API key.",
    );
  }
 
  if (error instanceof Anthropic.BadRequestError) {
    return new HTTPError(                              // Usually the prompt.
      Status.BadRequest,
      "Claude could not accept that request. The conversation may be too long.",
    );
  }
 
  if (error instanceof Anthropic.APIError) {
    return new HTTPError(                              // Upstream is down.
      Status.BadGateway,
      "Claude could not be reached. Try again in a moment.",
    );
  }
 
  return error;                                        // Not ours. Leave it.
}
 
// Claude can search the web and read pages, but only with tools it is given.
// Both run on Anthropic's servers: the reply comes back with the browsing
// already done, so nothing on this server fetches anything. Haiku 4.5 takes the
// older versions. The newer ones let Claude filter results with code before
// reading them, which spends fewer tokens. `max_uses` caps the cost per reply.
function webTools(model: Model): Anthropic.Messages.ToolUnion[] {
  if (model === "claude-haiku-4-5") {
    return [
      { type: "web_search_20250305", name: "web_search", max_uses: 5 },
      { type: "web_fetch_20250910", name: "web_fetch", max_uses: 5 },
    ];
  }
 
  return [
    { type: "web_search_20260209", name: "web_search", max_uses: 5 },
    { type: "web_fetch_20260209", name: "web_fetch", max_uses: 5 },
  ];
}
 
// Browsing runs as a loop on Anthropic's side, and a long one stops partway
// with `stop_reason: "pause_turn"`. Sending the reply so far back picks it up
// where it stopped. This caps how many times that happens for one prompt.
const MAX_CONTINUATIONS = 3;
 
// Search results come back as citations on the text that used them. Anything
// that shows web search results has to show where they came from, so they are
// listed under the reply. Brackets would end the link text early.
type Sources = Map<string, string>;                    // URL → page title.
 
function collect(sources: Sources, citation: Anthropic.TextCitation) {
  if (citation.type === "web_search_result_location") {
    sources.set(citation.url, citation.title ?? citation.url);
  }
}
 
function listSources(sources: Sources): string {
  if (sources.size === 0) {
    return "";
  }
 
  const links = [...sources].map(
    ([url, title]) => `- [${title.replace(/[[\]]/g, "\\$&")}](${url})`,
  );
 
  return `\n\n**Sources**\n\n${links.join("\n")}`;
}
 
// A reply is several text blocks when Claude writes, searches, then writes
// again. Joined as-is, "Let me check." runs straight into the answer, so a
// paragraph break goes wherever text resumes after something that was not
// text. Adjacent text blocks are one sentence split by citations; they join
// with nothing.
const resumes = (previous: string, reply: string) =>
  previous !== "text" && reply !== "" ? "\n\n" : "";
 
// A refusal is not an exception. The API answers `200` and says so in
// `stop_reason`, so it is checked for and turned into one.
const refused = () =>
  new HTTPError(
    Status.UnprocessableEntity,
    "Claude declined to answer that prompt.",
  );
 
class Conversation extends Resource {                  // The page reads the thread
  public paths = ["/api/conversation"];                // back from here on load.
 
  public GET(request: Request) {
    const { turns } = openConversation(request);
 
    return Response.json({ messages: turns });
  }
 
  public DELETE(request: Request) {                    // Starts over. The cookie
    const { id } = openConversation(request);          // stays; its history goes.
 
    conversations.delete(id);
 
    return new Response(null, { status: 204 });
  }
}
 
class Chat extends Resource {                          // Answers with the whole reply.
  public paths = ["/api/chat"];                        // The URL the browser asks
                                                       // for, not a path relative
  public async POST(request: Request) {                // to the handler.
    const { prompt, model } = await readRequest(request);
    const { id, turns, headers } = openConversation(request);
 
    const messages: Anthropic.MessageParam[] = [
      ...turns,
      { role: "user", content: prompt },
    ];
    const sources: Sources = new Map();
    let text = "";
    let previous = "";
 
    for (let round = 0; ; round++) {
      let message;
 
      try {
        message = await client.messages.create({
          model,
          max_tokens: 16000,
          tools: webTools(model),
          messages,
        });
      } catch (error) {
        throw anthropicErrorToHTTPError(error);
      }
 
      if (message.stop_reason === "refusal") {
        throw refused();
      }
 
      for (const block of message.content) {           // `content` holds blocks of
        if (block.type === "text") {                   // several types: searches,
          text += resumes(previous, text) + block.text;// their results, and text.
          block.citations?.forEach((citation) => collect(sources, citation));
        }
 
        previous = block.type;
      }
 
      if (message.stop_reason !== "pause_turn" || round === MAX_CONTINUATIONS) {
        break;
      }
 
      messages.push({ role: "assistant", content: message.content });
    }
 
    text += listSources(sources);
 
    remember(id, turns, prompt, text);
 
    return Response.json({ text }, { headers });
  }
}
 
class ChatStream extends Resource {                    // Answers a piece at a time.
  public paths = ["/api/chat/stream"];
 
  public async POST(request: Request) {
    // Read and checked before the `Response` exists — that matters.
    const { prompt, model } = await readRequest(request);
    const { id, turns, headers } = openConversation(request);
 
    const messages: Anthropic.MessageParam[] = [
      ...turns,
      { role: "user", content: prompt },
    ];
 
    const encoder = new TextEncoder();
 
    const body = new ReadableStream({
      async start(controller) {
        const send = (frame: string) =>
          controller.enqueue(encoder.encode(frame));
 
        let reply = "";                                // Collected as it goes out,
                                                       // so it can be stored once
        const write = (text: string) => {              // the stream is done.
          if (text === "") {
            return;
          }
 
          reply += text;
          send(`data: ${JSON.stringify({ text })}\n\n`);
        };
 
        const sources: Sources = new Map();
        let previous = "";
 
        try {
          for (let round = 0; ; round++) {
            const stream = client.messages.stream({
              model,
              max_tokens: 64000,
              tools: webTools(model),
              messages,
            });
 
            for await (const event of stream) {
              if (event.type === "content_block_start") {
                const block = event.content_block;
 
                if (block.type === "text") {
                  write(resumes(previous, reply));
                }
 
                if (block.type === "server_tool_use") {// A search can take several
                  const text = block.name === "web_fetch" // seconds with no text, so
                    ? "Reading a page"                 // say what is happening.
                    : "Searching the web";
 
                  send(`event: activity\ndata: ${JSON.stringify({ text })}\n\n`);
                }
 
                previous = block.type;
              }
 
              if (event.type === "content_block_delta") {
                if (event.delta.type === "text_delta") {
                  write(event.delta.text);
                }
 
                if (event.delta.type === "citations_delta") {
                  collect(sources, event.delta.citation);
                }
              }
 
              if (
                event.type === "message_delta" &&
                event.delta.stop_reason === "refusal"
              ) {
                throw refused();                       // Any text already sent is
              }                                        // dropped by the page.
            }
 
            const message = await stream.finalMessage();
 
            if (
              message.stop_reason !== "pause_turn" ||
              round === MAX_CONTINUATIONS
            ) {
              break;
            }
 
            messages.push({ role: "assistant", content: message.content });
          }
 
          write(listSources(sources));
          remember(id, turns, prompt, reply);
          send("event: done\ndata: {}\n\n");
        } catch (error) {                              // Too late for a status code.
          const failure = anthropicErrorToHTTPError(error);
          const message = failure instanceof HTTPError // Say so in the stream
            ? failure.message                          // instead, with the same
            : "The reply stopped partway through.";    // reason /api/chat gives.
 
          send(`event: error\ndata: ${JSON.stringify({ message })}\n\n`);
          console.error(error);
        } finally {
          controller.close();
        }
      },
    });
 
    return new Response(body, {
      headers: {
        ...headers,
        "content-type": "text/event-stream",
        "cache-control": "no-store",
        "x-accel-buffering": "no",                     // Stops a reverse proxy from
      },                                               // holding frames back.
    });
  }
}
 
const app = Application
  .builder()
  .resources(Conversation, Chat, ChatStream)
  .build();
 
function handle(request: Request): Promise<Response> {
  return app
    .handle<Response>(request)
    .catch((error) => {
      // `name` is checked before `instanceof` because `instanceof` fails when
      // two copies of Drash end up in one bundle.
      if (error.name === "HTTPError") {
        return new Response(error.message, {
          status: error.status_code,
          statusText: error.status_code_description,
        });
      }
 
      console.error(error);
 
      return new Response("The server could not generate a response", {
        status: 500,
      });
    });
}
 
// Next.js dispatches on the export name, so every method the chain should see
// needs one. All of them hand the request straight to the same application.
export async function GET(request: Request) {
  return handle(request);
}
 
export async function POST(request: Request) {
  return handle(request);
}
 
export async function DELETE(request: Request) {
  return handle(request);
}

// The models the page offers and the only ones the server will call. Both
// sides import this list, so they cannot disagree. It is plain data with no
// secrets in it, which is what makes it safe to ship to the browser.
export const MODELS = {
  "claude-opus-5": "Claude Opus 5",
  "claude-sonnet-5": "Claude Sonnet 5",
  "claude-haiku-4-5": "Claude Haiku 4.5",
  "claude-fable-5-1": "Claude Fable 5.1",
} as const;
 
export type Model = keyof typeof MODELS;
 
export const DEFAULT_MODEL: Model = "claude-opus-5";
 
export function isModel(value: unknown): value is Model {
  return typeof value === "string" && Object.hasOwn(MODELS, value);
}

import { ChatClient } from "./chat-client";
 
// A server component. It renders on the server and ships no JavaScript of its
// own, so nothing here is reachable from the browser.
export default function ChatPage() {
  return (
    <div className="flex h-dvh flex-col items-center bg-zinc-50 p-6 font-sans dark:bg-zinc-950">
      <main className="flex min-h-0 w-full flex-1 flex-col items-center gap-3">
        <h1 className="text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
          Chat with Claude
        </h1>
        <ChatClient />
      </main>
    </div>
  );
}

"use client";
 
import { useEffect, useRef, useState } from "react";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { DEFAULT_MODEL, MODELS, type Model } from "./models";
 
type Turn = {
  role: "user" | "assistant";
  content: string;
  error?: string;                                      // "Not delivered", and why.
};                                                     // The server never stored it.
 
// One tab per resource. Both add to the same conversation on the server, so
// switching tabs partway through carries it over.
const ENDPOINTS = {
  "/api/chat/stream": {
    summary: "Receive text as the model writes it",
    explanation: (
      <>
        <p>
          The server starts its response straight away and forwards each piece
          of text the moment Claude writes it, as a{" "}
          <em>server-sent event</em>: a <code>data:</code> line, then a blank
          line.
        </p>
        <pre className="overflow-x-auto rounded-lg bg-black/[.05] p-3 text-xs dark:bg-white/[.08]">
          {`data: {"text":"Hel"}\n\ndata: {"text":"lo"}\n\nevent: done`}
        </pre>
        <p>
          The first words show up within a second or two and the reply grows as
          you watch. The page reads the body piece by piece and stitches the
          events back together, because a network read can stop in the middle
          of one.
        </p>
        <p>
          The trade-off: the <code>200</code> status goes out before Claude has
          written anything, so a failure partway through cannot change it. The
          server reports it inside the stream instead, as an{" "}
          <code>event: error</code>.
        </p>
      </>
    ),
  },
  "/api/chat": {
    summary: "Receive all text once the model has finished",
    explanation: (
      <>
        <p>
          The server asks Claude for the whole reply and waits. Only when the
          model has written its last word does the server answer, with one
          JSON body: <code>{`{"text": "..."}`}</code>.
        </p>
        <p>
          That makes the client simple: one <code>fetch</code>, one{" "}
          <code>response.json()</code>. The cost is the wait. Nothing appears
          until the reply is finished, and a long reply can take a minute.
        </p>
        <p>
          Failures are simple too. Nothing has been sent when something goes
          wrong, so the status code (400, 429, 500, 502) says exactly what
          happened.
        </p>
      </>
    ),
  },
} as const;
 
type Endpoint = keyof typeof ENDPOINTS;
 
export function ChatClient() {
  const [endpoint, setEndpoint] = useState<Endpoint>("/api/chat/stream");
  const [model, setModel] = useState<Model>(DEFAULT_MODEL);
  const [messages, setMessages] = useState<Turn[]>([]);
  const [busy, setBusy] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [problem, setProblem] = useState("");
  const [activity, setActivity] = useState("");
  const thread = useRef<HTMLDivElement>(null);
  const input = useRef<HTMLInputElement>(null);
  const learnMore = useRef<HTMLDialogElement>(null);
  const errorModal = useRef<HTMLDialogElement>(null);
  const startOverModal = useRef<HTMLDialogElement>(null);
 
  useEffect(() => {                                    // The server holds the
    fetch("/api/conversation")                         // conversation, so a reload
      .then((response) => response.json())             // picks up where it left off.
      .then((body: { messages: Turn[] }) => setMessages(body.messages))
      .catch(() => {})                                 // Nothing to restore; start
      .finally(() => setLoaded(true));                 // empty.
  }, []);
 
  useEffect(() => {                                    // Follow the newest bubble,
    const box = thread.current;                        // the way a messaging app
    box?.scrollTo({ top: box.scrollHeight });          // does. Only the thread
  }, [messages]);                                      // scrolls, not the page.
 
  const locked = busy || !loaded;                      // No sending until the saved
                                                       // thread arrives, or it would
                                                       // overwrite the new prompt.
  function send(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
 
    const form = event.currentTarget;
    const prompt = String(new FormData(form).get("prompt")).trim();
 
    if (!prompt || locked) {
      return;
    }
 
    form.reset();
    submit(prompt);
  }
 
  function retry(index: number) {                      // The server never stored the
    const prompt = messages[index].content;            // failed prompt, so sending it
                                                       // again is just sending it.
    setMessages((turns) => turns.filter((_, i) => i !== index));
    input.current?.focus();                            // The button is about to
    submit(prompt);                                    // disappear from under focus.
  }
 
  async function submit(prompt: string) {
    setMessages((turns) => [
      ...turns,
      { role: "user", content: prompt },
      { role: "assistant", content: "" },              // Where the reply lands.
    ]);
    setBusy(true);
 
    const fail = (reason: string) => {
      setMessages((turns) => [                         // Drop the half-written
        ...turns.slice(0, -2),                         // reply and mark the prompt,
        { ...turns[turns.length - 2], error: reason }, // like iMessage does.
      ]);
      setBusy(false);
      setActivity("");
      setProblem(reason);
      errorModal.current?.showModal();
    };
 
    const append = (text: string) => {
      setMessages((turns) => {                         // Add to the last bubble.
        const last = turns[turns.length - 1];          // The function form sees every
                                                       // earlier append, even ones
        return [                                       // that landed between renders.
          ...turns.slice(0, -1),
          { ...last, content: last.content + text },
        ];
      });
    };
 
    // Only the new prompt goes up. The server already has the rest, found by
    // the cookie the browser sends along with the request on its own.
    const response = await fetch(endpoint, {
      method: "POST",                                  // `EventSource` only sends
      headers: { "content-type": "application/json" }, // GET, so the stream is read
      body: JSON.stringify({ prompt, model }),         // by hand below instead.
    }).catch(() => null);
 
    if (!response) {
      fail("Could not reach the server. Check your connection and try again.");
      return;
    }
 
    if (!response.ok || !response.body) {              // A failure before the reply
      const reason = await response.text();            // started still has a status
      fail(reason || `Error ${response.status}`);      // code worth believing.
      return;
    }
 
    if (endpoint === "/api/chat") {                    // The whole reply, in one go.
      const { text } = await response.json();
      append(text);
      setBusy(false);
      return;
    }
 
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let buffer = "";
 
    while (true) {
      const { done, value } = await reader.read();
 
      if (done) {
        break;
      }
 
      buffer += decoder.decode(value, { stream: true });
 
      const frames = buffer.split("\n\n");             // A read can end mid-frame,
      buffer = frames.pop() ?? "";                     // so hold the tail back until
                                                       // its blank line arrives.
      for (const frame of frames) {
        const name = frame.match(/^event: (.*)$/m)?.[1] ?? "message";
        const data = frame.match(/^data: (.*)$/m)?.[1];
 
        if (!data) {
          continue;
        }
 
        if (name === "error") {                        // The stream already sent 200
          fail(JSON.parse(data).message);              // and then failed. Without
          return;                                      // this, a failure looks like
        }                                              // a short, successful answer.
 
        if (name === "activity") {                     // Claude is searching or
          setActivity(JSON.parse(data).text);          // reading, not writing. Say
          continue;                                    // so under the bubble.
        }
 
        if (name === "done") {
          setBusy(false);
          setActivity("");
          return;
        }
 
        setActivity("");                               // Writing again.
        append(JSON.parse(data).text);
      }
    }
 
    // The body ended without a `done` event, so the reply is not finished.
    fail("The connection closed before the reply finished.");
  }
 
  function confirmStartOver() {
    const dialog = startOverModal.current;
 
    if (!dialog) {
      return;
    }
 
    dialog.returnValue = "";                           // It keeps the last answer,
    dialog.showModal();                                // so a "yes" from before would
  }                                                    // count again on Escape.
 
  // Forgotten on the server first, then on screen.
  async function startOver() {
    await fetch("/api/conversation", { method: "DELETE" });
    setMessages([]);
    input.current?.focus();
  }
 
  return (
    <div className="flex min-h-0 w-full flex-1 flex-col items-center gap-3">
      <div
        role="tablist"
        className="flex gap-1 rounded-lg bg-black/[.05] p-1 dark:bg-white/[.08]"
      >
        {/* Locked while a reply is arriving, which is still being read from
            the endpoint it was sent to. */}
        {(Object.keys(ENDPOINTS) as Endpoint[]).map((path) => (
          <button
            key={path}
            role="tab"
            aria-selected={endpoint === path}
            disabled={busy}
            onClick={() => setEndpoint(path)}
            className={`rounded-md px-3 py-1.5 font-mono text-sm disabled:opacity-50 ${
              endpoint === path
                ? "bg-white text-black shadow-sm dark:bg-zinc-800 dark:text-zinc-50"
                : "text-zinc-600 dark:text-zinc-400"
            }`}
          >
            {path}
          </button>
        ))}
      </div>
      <p className="text-sm text-zinc-600 dark:text-zinc-400">
        {ENDPOINTS[endpoint].summary}.{" "}
        <button
          onClick={() => learnMore.current?.showModal()}
          className="font-medium text-blue-600 underline-offset-2 hover:underline dark:text-blue-400"
        >
          Learn more
        </button>
      </p>
 
      {/* The box fills whatever space the window leaves, and the thread
          scrolls inside it, so a long conversation never pushes the input
          off the screen. */}
      <div className="flex min-h-0 w-full max-w-[650px] flex-1 flex-col overflow-hidden rounded-2xl border border-black/[.08] bg-white dark:border-white/[.12] dark:bg-black">
        <div className="flex items-center justify-between gap-2 border-b border-black/[.08] px-3 py-2 dark:border-white/[.12]">
          <select
            aria-label="Model"
            value={model}
            disabled={busy}
            onChange={(event) => setModel(event.target.value as Model)}
            className="rounded-md bg-transparent py-1 text-sm text-black disabled:opacity-50 dark:text-zinc-50"
          >
            {(Object.keys(MODELS) as Model[]).map((id) => (
              <option key={id} value={id}>
                {MODELS[id]}
              </option>
            ))}
          </select>
          <button
            onClick={confirmStartOver}
            disabled={locked || messages.length === 0}
            className="rounded-md px-2 py-1 text-sm text-blue-600 disabled:opacity-40 dark:text-blue-400"
          >
            Start new chat
          </button>
        </div>
 
        <div ref={thread} className="flex flex-1 flex-col gap-2 overflow-y-auto p-4">
          {messages.map((turn, index) => {
            const mine = turn.role === "user";
            const typing = busy && index === messages.length - 1;
 
            return (
              <div
                key={index}
                className={`flex max-w-[80%] flex-col gap-1 ${mine ? "items-end self-end" : "items-start self-start"}`}
              >
                {/* Claude answers in Markdown, so its bubbles render it:
                    `prose` styles the lists, headings, and code blocks it
                    produces. A prompt is shown as typed, and
                    `whitespace-pre-wrap` keeps its newlines, which HTML would
                    otherwise collapse. A `<div>`, not a `<p>`, because a list
                    or a code block cannot sit inside a paragraph. */}
                <div
                  className={`min-w-0 rounded-2xl px-4 py-2 leading-6 ${
                    mine
                      ? "whitespace-pre-wrap rounded-br-md bg-blue-500 text-white"
                      : "prose prose-zinc max-w-none rounded-bl-md bg-zinc-100 text-black dark:prose-invert dark:bg-zinc-800 dark:text-zinc-50"
                  }`}
                >
                  {mine ? (
                    turn.content
                  ) : (
                    <Markdown
                      remarkPlugins={[remarkGfm]}
                      components={{ a: NewTabLink }}
                    >
                      {turn.content}
                    </Markdown>
                  )}
                  {typing && (
                    <span className="ml-0.5 inline-block h-4 w-2 animate-pulse bg-current align-middle" />
                  )}
                </div>
                {typing && activity && (
                  <span className="animate-pulse text-xs text-zinc-500 dark:text-zinc-400">
                    {activity}…
                  </span>
                )}
                {turn.error && (
                  <span className="flex gap-2 text-xs">
                    <span role="alert" className="text-red-600 dark:text-red-400">
                      Not delivered
                    </span>
                    <button
                      onClick={() => retry(index)}
                      disabled={locked}
                      className="font-medium text-blue-600 disabled:opacity-40 dark:text-blue-400"
                    >
                      Try again
                    </button>
                  </span>
                )}
              </div>
            );
          })}
        </div>
 
        {/* The input is never disabled. A disabled input drops focus, so the
            cursor would leave it on every send; only the button locks. */}
        <form
          onSubmit={send}
          className="flex gap-2 border-t border-black/[.08] p-3 dark:border-white/[.12]"
        >
          <input
            ref={input}
            name="prompt"
            placeholder="Ask Claude something"
            autoComplete="off"
            autoFocus
            className="min-w-0 flex-1 rounded-full border border-black/[.08] px-4 py-2 text-black placeholder:text-zinc-400 dark:border-white/[.12] dark:text-zinc-50"
          />
          <button
            disabled={locked}
            className="rounded-full bg-black px-4 py-2 font-medium text-white disabled:opacity-50 dark:bg-zinc-50 dark:text-black"
          >
            {busy ? "…" : "Send"}
          </button>
        </form>
      </div>
 
      <Modal ref={learnMore} title={endpoint} onClose={() => input.current?.focus()}>
        {ENDPOINTS[endpoint].explanation}
      </Modal>
 
      <Modal ref={errorModal} title="Not delivered" onClose={() => input.current?.focus()}>
        <p>{problem}</p>
        <p>Your message is still in the thread. Use Try again to send it again.</p>
      </Modal>
 
      {/* The button that closed the dialog leaves its `value` in
          `returnValue`. Cancel, Escape, and a backdrop click leave it empty. */}
      <Modal
        ref={startOverModal}
        title="Start new chat?"
        confirm="Start new chat"
        onClose={(event) =>
          event.currentTarget.returnValue === "confirm"
            ? startOver()
            : input.current?.focus()
        }
      >
        <p>
          This conversation will be deleted from the server. You cannot get it
          back.
        </p>
      </Modal>
    </div>
  );
}
 
// Links in a reply, like the sources under a web search, open in a new tab so
// the chat stays where it is. `noreferrer` keeps the opened page from reaching
// back into this one through `window.opener`.
function NewTabLink({ href, children }: React.ComponentProps<"a">) {
  return (
    <a href={href} target="_blank" rel="noreferrer">
      {children}
    </a>
  );
}
 
// `<dialog>` with `showModal()` does the hard parts of a modal on its own: it
// sits above the page, blocks clicks behind it, keeps focus inside, and closes
// on Escape. A `<form method="dialog">` button closes it with no handler.
// Pass `confirm` to turn Close into Cancel plus a button that says yes.
function Modal({
  ref,
  title,
  confirm,
  onClose,
  children,
}: {
  ref: React.Ref<HTMLDialogElement>;
  title: string;
  confirm?: string;
  onClose: (event: React.SyntheticEvent<HTMLDialogElement>) => void;
  children: React.ReactNode;
}) {
  return (
    <dialog
      ref={ref}
      onClose={onClose}
      onClick={(event) => {                            // A click on the backdrop
        if (event.target === event.currentTarget) {    // lands on the dialog itself,
          event.currentTarget.close();                 // not on anything inside it.
        }
      }}
      className="m-auto w-[calc(100%-2rem)] max-w-md rounded-2xl bg-white p-0 text-black backdrop:bg-black/40 dark:bg-zinc-900 dark:text-zinc-50"
    >
      <div className="p-6">
        <h2 className="font-mono text-lg font-semibold">{title}</h2>
        <div className="mt-3 flex flex-col gap-3 text-sm leading-6 text-zinc-700 dark:text-zinc-300">
          {children}
        </div>
        <form method="dialog" className="mt-5 flex justify-end gap-2">
          {confirm ? (
            <>
              <button className="rounded-full px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300">
                Cancel
              </button>
              <button
                value="confirm"
                className="rounded-full bg-red-600 px-4 py-2 text-sm font-medium text-white"
              >
                {confirm}
              </button>
            </>
          ) : (
            <button className="rounded-full bg-black px-4 py-2 text-sm font-medium text-white dark:bg-zinc-50 dark:text-black">
              Close
            </button>
          )}
        </form>
      </div>
    </dialog>
  );
}

npm run dev