Chat AI

"use client";

import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type FormEvent,
  type KeyboardEvent as ReactKeyboardEvent,
} from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";

type Role = "user" | "assistant";

type Source = {
  label: string;
  host: string;
};

type Message = {
  id: string;
  role: Role;
  text: string;
  done: boolean;
  model?: string;
  sources?: Source[];
};

type ModelOption = {
  id: string;
  name: string;
  blurb: string;
  latency: string;
  speed: number;
};

const MODELS: ModelOption[] = [
  {
    id: "swift",
    name: "Atlas Swift",
    blurb: "Quick lookups, short drafts",
    latency: "~0.4s first token",
    speed: 14,
  },
  {
    id: "core",
    name: "Atlas Core",
    blurb: "Balanced reasoning, default",
    latency: "~0.9s first token",
    speed: 26,
  },
  {
    id: "deep",
    name: "Atlas Deep",
    blurb: "Long context, careful analysis",
    latency: "~2.1s first token",
    speed: 42,
  },
];

type Answer = {
  text: string;
  sources: Source[];
};

const ANSWERS: { match: RegExp; answer: Answer }[] = [
  {
    match: /\b(lcp|largest contentful|web vitals|slow (page|load)|performance)\b/i,
    answer: {
      text: `Your LCP element is almost certainly the hero image, and the delay is happening before the browser even knows about it.

Three things to check, in the order they'll pay off:

1. Discovery — if the hero is loaded by JavaScript or sits behind a CSS background rule, the preload scanner never sees it. Move it to a plain <img> in the initial HTML and add fetchpriority="high".

2. Delivery — serve AVIF with a WebP fallback, size it to the largest rendered box (not the original 2400px export), and drop lazy loading on anything above the fold. Lazy-loading a hero is the single most common self-inflicted LCP wound.

3. Render blocking — inline the ~4KB of CSS the hero needs and defer the rest. Fonts with display: block will hold your text hostage for up to 3 seconds; switch to swap or preload the woff2.

A realistic target is 2.5s at p75 on 4G. If you're above 4s today, the image work alone usually gets you to ~2.8s.`,
      sources: [
        { label: "Optimize Largest Contentful Paint", host: "web.dev" },
        { label: "fetchpriority attribute", host: "developer.mozilla.org" },
      ],
    },
  },
  {
    match: /\b(postgres|sql|query|index|database|db)\b/i,
    answer: {
      text: `Start with EXPLAIN (ANALYZE, BUFFERS) rather than guessing — the plan tells you whether you're CPU-bound, I/O-bound, or just missing an index.

What to look for:

— Seq Scan on a large table with a selective WHERE clause means the index is missing, or the planner thinks it's not worth using. Check pg_stat_user_tables for the row estimate drift; a stale ANALYZE fixes more "slow queries" than people expect.

— Rows Removed by Filter being huge relative to rows returned means your index covers the wrong columns. Composite indexes are ordered: (tenant_id, created_at) serves WHERE tenant_id = $1 ORDER BY created_at, but (created_at, tenant_id) will not.

— A Nested Loop with a bad row estimate on the outer side is the classic 200ms → 12s cliff. That's usually correlated columns; extended statistics with CREATE STATISTICS can teach the planner about the correlation.

One caution: every index you add is a write tax and more vacuum work. On a hot insert path, three indexes is usually the point where you start to feel it.`,
      sources: [
        { label: "Using EXPLAIN", host: "postgresql.org" },
        { label: "Multicolumn Indexes", host: "postgresql.org" },
      ],
    },
  },
  {
    match: /\b(onboarding|churn|retention|activation|signup|funnel)\b/i,
    answer: {
      text: `Before changing anything, split the number. "Churn" at the account level and churn at the seat level are different problems with opposite fixes.

The pattern I'd test first: measure time-to-first-value, not time-to-signup. Most onboarding flows optimise the wrong end — they shave a field off the registration form while the user still needs 20 minutes and a teammate before the product does anything useful.

Concretely:
— Instrument the single action that correlates with week-4 retention. For most B2B tools it's an invite, an import, or a first published artifact.
— Pre-fill that action with real sample data so an empty state is never the first screen.
— Move any setup that isn't required for that action out of the flow entirely. Ask for it later, in context.

Expect the honest version of the result: onboarding changes move activation quickly and retention slowly. If week-4 retention doesn't move within two cohorts, the problem is in the product, not the door.`,
      sources: [
        { label: "Activation metrics teardown", host: "reforge.com" },
        { label: "Cohort retention basics", host: "amplitude.com" },
      ],
    },
  },
  {
    match: /\b(accessib|a11y|aria|screen reader|keyboard|contrast)\b/i,
    answer: {
      text: `The fastest audit that finds real bugs: unplug your mouse and use the page for two minutes.

You'll catch the four issues that make up most of what real users hit:

— Focus you can't see. Every interactive element needs a focus-visible ring with at least 3:1 contrast against its background. Removing outlines without a replacement is the most common regression in a design polish pass.

— Focus you can't escape. Modals must trap focus and return it to the trigger on close. Test with Escape.

— Divs pretending to be buttons. A <div onClick> has no role, no Enter/Space handling, and no place in the tab order. Use a real <button>; you get all three free.

— Live content that never announces. Streaming text, toasts, and validation errors need aria-live="polite" (or assertive for errors) on a container that exists in the DOM before the content arrives.

Automated tools catch roughly a third of WCAG failures. They are a floor, not a pass.`,
      sources: [
        { label: "WCAG 2.2 Quick Reference", host: "w3.org" },
        { label: "ARIA live regions", host: "developer.mozilla.org" },
      ],
    },
  },
];

const FALLBACK: Answer = {
  text: `Happy to dig in — I'll be more useful with a bit more to work with.

What helps most:
— The concrete symptom, with a number attached ("p95 is 4.2s", "activation dropped from 34% to 21%").
— What you've already tried and what it did.
— The constraint I should respect: deadline, stack, or the thing you can't change.

Give me any one of those and I'll come back with a specific plan rather than a checklist you could have found yourself.`,
  sources: [{ label: "Session context", host: "atlas.local" }],
};

const SUGGESTIONS = [
  "Why is my LCP 4.2s on mobile?",
  "This Postgres query got 30x slower overnight",
  "Our week-4 retention is 21% — where do I start?",
  "Audit this flow for keyboard accessibility",
];

function answerFor(prompt: string): Answer {
  const hit = ANSWERS.find((a) => a.match.test(prompt));
  return hit ? hit.answer : FALLBACK;
}

function SparkIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-full w-full">
      <path
        d="M12 3l1.6 4.9L18.5 9.5 13.6 11 12 16l-1.6-5L5.5 9.5l4.9-1.6L12 3z"
        fill="currentColor"
      />
      <path
        d="M18.5 15.5l.8 2.3 2.2.8-2.2.8-.8 2.3-.8-2.3-2.2-.8 2.2-.8.8-2.3z"
        fill="currentColor"
        opacity="0.65"
      />
    </svg>
  );
}

function SendIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-4 w-4">
      <path
        d="M12 19V5m0 0l-6 6m6-6l6 6"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function StopIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-4 w-4">
      <rect x="7" y="7" width="10" height="10" rx="2" fill="currentColor" />
    </svg>
  );
}

function CopyIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
      <rect
        x="9"
        y="9"
        width="11"
        height="11"
        rx="2"
        stroke="currentColor"
        strokeWidth="1.8"
      />
      <path
        d="M5 15V6a1 1 0 011-1h9"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
      />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M5 12.5l4.5 4.5L19 7"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function RetryIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M20 11a8 8 0 10-2.3 6.3M20 5v6h-6"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function ThumbIcon({ down }: { down?: boolean }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      aria-hidden="true"
      className={`h-3.5 w-3.5 ${down ? "rotate-180" : ""}`}
    >
      <path
        d="M7 10.5v9H4.5a1 1 0 01-1-1v-7a1 1 0 011-1H7zm0 0l4-6.6a1 1 0 01.9-.5 2.1 2.1 0 012 2.6L13.2 9h4.9a2 2 0 011.95 2.45l-1.35 6A2 2 0 0116.75 19H7"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function LinkIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3 w-3">
      <path
        d="M10 13a4 4 0 005.7 0l2.6-2.6a4 4 0 10-5.7-5.7L11.5 6M14 11a4 4 0 00-5.7 0l-2.6 2.6a4 4 0 105.7 5.7L12.5 18"
        stroke="currentColor"
        strokeWidth="1.8"
        strokeLinecap="round"
      />
    </svg>
  );
}

function TrashIcon() {
  return (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="h-3.5 w-3.5">
      <path
        d="M4 7h16M9 7V5.5A1.5 1.5 0 0110.5 4h3A1.5 1.5 0 0115 5.5V7m-8 0l.8 11.1A2 2 0 009.8 20h4.4a2 2 0 002-1.9L17 7"
        stroke="currentColor"
        strokeWidth="1.7"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

const GREETING: Message = {
  id: "m0",
  role: "assistant",
  text: "I'm Atlas. I answer with specifics — a plan, a tradeoff, and the number you should expect to move. Ask me something real, or start from one of the prompts below.",
  done: true,
  model: "Atlas Core",
};

export default function ChatAI() {
  const uid = useId();
  const reduced = useReducedMotion();

  const [messages, setMessages] = useState<Message[]>([GREETING]);
  const [input, setInput] = useState("");
  const [modelId, setModelId] = useState("core");
  const [streamingId, setStreamingId] = useState<string | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const [votes, setVotes] = useState<Record<string, "up" | "down">>({});

  const timerRef = useRef<number | null>(null);
  const copyTimerRef = useRef<number | null>(null);
  const counterRef = useRef(1);
  const threadRef = useRef<HTMLDivElement | null>(null);
  const inputRef = useRef<HTMLTextAreaElement | null>(null);

  const model = useMemo(
    () => MODELS.find((m) => m.id === modelId) ?? MODELS[1],
    [modelId],
  );

  const streaming = streamingId !== null;
  const thinking =
    streaming && messages.some((m) => m.id === streamingId && m.text === "");

  const lastUserPrompt = useMemo(() => {
    for (let i = messages.length - 1; i >= 0; i -= 1) {
      if (messages[i].role === "user") return messages[i].text;
    }
    return "";
  }, [messages]);

  const clearTimer = useCallback(() => {
    if (timerRef.current !== null) {
      window.clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);

  useEffect(() => {
    return () => {
      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
      if (copyTimerRef.current !== null) window.clearTimeout(copyTimerRef.current);
    };
  }, []);

  useEffect(() => {
    const el = threadRef.current;
    if (!el) return;
    el.scrollTo({ top: el.scrollHeight, behavior: reduced ? "auto" : "smooth" });
  }, [messages, reduced]);

  const stream = useCallback(
    (id: string, full: string, speed: number) => {
      if (reduced) {
        setMessages((prev) =>
          prev.map((m) => (m.id === id ? { ...m, text: full, done: true } : m)),
        );
        setStreamingId(null);
        return;
      }
      const tokens = full.split(/(\s+)/);
      let i = 0;
      const tick = () => {
        i += 1;
        const text = tokens.slice(0, i).join("");
        setMessages((prev) => prev.map((m) => (m.id === id ? { ...m, text } : m)));
        if (i >= tokens.length) {
          setMessages((prev) =>
            prev.map((m) => (m.id === id ? { ...m, done: true } : m)),
          );
          setStreamingId(null);
          timerRef.current = null;
          return;
        }
        timerRef.current = window.setTimeout(tick, speed);
      };
      timerRef.current = window.setTimeout(tick, speed * 14);
    },
    [reduced],
  );

  const stop = useCallback(() => {
    clearTimer();
    setMessages((prev) =>
      prev.map((m) =>
        m.done
          ? m
          : {
              ...m,
              done: true,
              text: m.text.length > 0 ? `${m.text.trimEnd()} …[stopped]` : "[stopped before first token]",
            },
      ),
    );
    setStreamingId(null);
    inputRef.current?.focus();
  }, [clearTimer]);

  const send = useCallback(
    (raw: string) => {
      const text = raw.trim();
      if (text.length === 0 || streaming) return;
      const n = counterRef.current;
      counterRef.current = n + 2;
      const userId = `u${n}`;
      const botId = `a${n + 1}`;
      const reply = answerFor(text);
      setMessages((prev) => [
        ...prev,
        { id: userId, role: "user", text, done: true },
        {
          id: botId,
          role: "assistant",
          text: "",
          done: false,
          model: model.name,
          sources: reply.sources,
        },
      ]);
      setInput("");
      setStreamingId(botId);
      if (inputRef.current) inputRef.current.style.height = "auto";
      stream(botId, reply.text, model.speed);
    },
    [model, stream, streaming],
  );

  const regenerate = useCallback(() => {
    if (streaming || lastUserPrompt.length === 0) return;
    const n = counterRef.current;
    counterRef.current = n + 1;
    const botId = `a${n}`;
    const reply = answerFor(lastUserPrompt);
    setMessages((prev) => {
      const next = [...prev];
      while (next.length > 0 && next[next.length - 1].role === "assistant") next.pop();
      return [
        ...next,
        {
          id: botId,
          role: "assistant",
          text: "",
          done: false,
          model: model.name,
          sources: reply.sources,
        },
      ];
    });
    setStreamingId(botId);
    stream(botId, reply.text, model.speed);
  }, [lastUserPrompt, model, stream, streaming]);

  const reset = useCallback(() => {
    clearTimer();
    setStreamingId(null);
    setVotes({});
    setCopiedId(null);
    setMessages([GREETING]);
    setInput("");
    inputRef.current?.focus();
  }, [clearTimer]);

  const toggleVote = useCallback((id: string, dir: "up" | "down") => {
    setVotes((prev) => {
      const next = { ...prev };
      if (next[id] === dir) delete next[id];
      else next[id] = dir;
      return next;
    });
  }, []);

  const copy = useCallback((id: string, text: string) => {
    const done = () => {
      setCopiedId(id);
      if (copyTimerRef.current !== null) window.clearTimeout(copyTimerRef.current);
      copyTimerRef.current = window.setTimeout(() => setCopiedId(null), 1600);
    };
    if (typeof navigator !== "undefined" && navigator.clipboard) {
      navigator.clipboard.writeText(text).then(done, () => undefined);
    } else {
      done();
    }
  }, []);

  const onKeyDown = (e: ReactKeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault();
      send(input);
    }
  };

  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    send(input);
  };

  const grow = (el: HTMLTextAreaElement) => {
    el.style.height = "auto";
    el.style.height = `${Math.min(el.scrollHeight, 152)}px`;
  };

  return (
    <section className="relative w-full overflow-hidden bg-slate-50 px-4 py-20 sm:px-6 sm:py-28 dark:bg-slate-950">
      <style>{`
        @keyframes caix-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
        @keyframes caix-pulse-dot {
          0%, 80%, 100% { transform: translateY(0); opacity: .35; }
          40% { transform: translateY(-3px); opacity: 1; }
        }
        @keyframes caix-drift {
          0%, 100% { transform: translate3d(0,0,0) scale(1); }
          50% { transform: translate3d(2%, -3%, 0) scale(1.08); }
        }
        @keyframes caix-ring { 0% { transform: scale(.9); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }
        .caix-caret { animation: caix-caret 1s steps(1, end) infinite; }
        .caix-dot { animation: caix-pulse-dot 1.1s ease-in-out infinite; }
        .caix-orb { animation: caix-drift 18s ease-in-out infinite; }
        .caix-ring { animation: caix-ring 2.4s ease-out infinite; }
        @media (prefers-reduced-motion: reduce) {
          .caix-caret, .caix-dot, .caix-orb, .caix-ring {
            animation: none !important;
          }
          .caix-caret { opacity: 1; }
        }
      `}</style>

      <div
        aria-hidden="true"
        className="caix-orb pointer-events-none absolute -top-32 left-1/4 h-80 w-80 rounded-full bg-indigo-400/20 blur-3xl dark:bg-indigo-600/15"
      />
      <div
        aria-hidden="true"
        className="caix-orb pointer-events-none absolute -bottom-40 right-1/5 h-96 w-96 rounded-full bg-violet-400/15 blur-3xl dark:bg-violet-700/15"
        style={{ animationDelay: "-8s" }}
      />

      <div className="relative mx-auto w-full max-w-5xl">
        <header className="mx-auto mb-10 max-w-2xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-white/80 px-3 py-1 text-xs font-medium tracking-wide text-indigo-700 uppercase dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-300">
            <span className="h-3.5 w-3.5 text-indigo-500 dark:text-indigo-400">
              <SparkIcon />
            </span>
            Atlas assistant
          </span>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl dark:text-slate-50">
            Answers with a number attached
          </h2>
          <p className="mt-3 text-base leading-relaxed text-slate-600 dark:text-slate-400">
            Pick a model, ask something specific, and watch the response stream in. Stop
            it, regenerate it, or copy it — every control here actually works.
          </p>
        </header>

        <div className="grid overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-xl shadow-slate-900/5 md:grid-cols-[15rem_1fr] dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/40">
          {/* Rail */}
          <aside className="border-b border-slate-200 bg-slate-50/80 p-5 md:border-r md:border-b-0 dark:border-slate-800 dark:bg-slate-950/40">
            <div className="flex items-center gap-3">
              <span className="relative grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-600 text-white">
                <span className="h-5 w-5">
                  <SparkIcon />
                </span>
                {streaming ? (
                  <span
                    aria-hidden="true"
                    className="caix-ring absolute inset-0 rounded-xl ring-2 ring-indigo-400"
                  />
                ) : null}
              </span>
              <div className="min-w-0">
                <p className="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">
                  Atlas
                </p>
                <p className="truncate text-xs text-slate-500 dark:text-slate-400">
                  {streaming ? "Generating…" : "Ready"}
                </p>
              </div>
            </div>

            <fieldset className="mt-6">
              <legend className="mb-2 text-xs font-semibold tracking-wide text-slate-500 uppercase dark:text-slate-400">
                Model
              </legend>
              <div className="flex gap-2 md:flex-col">
                {MODELS.map((m) => (
                  <div key={m.id} className="flex-1 md:flex-none">
                    <input
                      type="radio"
                      id={`${uid}-model-${m.id}`}
                      name={`${uid}-model`}
                      value={m.id}
                      checked={modelId === m.id}
                      onChange={() => setModelId(m.id)}
                      className="peer sr-only"
                    />
                    <label
                      htmlFor={`${uid}-model-${m.id}`}
                      className="block cursor-pointer rounded-xl border border-slate-200 bg-white p-3 transition-colors peer-checked:border-indigo-500 peer-checked:bg-indigo-50 peer-focus-visible:ring-2 peer-focus-visible:ring-indigo-500 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-slate-50 hover:border-slate-300 dark:border-slate-800 dark:bg-slate-900 dark:peer-checked:border-indigo-400 dark:peer-checked:bg-indigo-500/10 dark:peer-focus-visible:ring-offset-slate-950 dark:hover:border-slate-700"
                    >
                      <span className="block text-xs font-semibold text-slate-900 dark:text-slate-100">
                        {m.name}
                      </span>
                      <span className="mt-0.5 hidden text-[11px] leading-snug text-slate-500 md:block dark:text-slate-400">
                        {m.blurb}
                      </span>
                    </label>
                  </div>
                ))}
              </div>
            </fieldset>

            <dl className="mt-6 hidden space-y-3 border-t border-slate-200 pt-5 md:block dark:border-slate-800">
              <div className="flex items-baseline justify-between gap-2">
                <dt className="text-xs text-slate-500 dark:text-slate-400">Latency</dt>
                <dd className="text-xs font-medium text-slate-700 tabular-nums dark:text-slate-300">
                  {model.latency}
                </dd>
              </div>
              <div className="flex items-baseline justify-between gap-2">
                <dt className="text-xs text-slate-500 dark:text-slate-400">Context</dt>
                <dd className="text-xs font-medium text-slate-700 tabular-nums dark:text-slate-300">
                  {messages.length} msg
                </dd>
              </div>
              <div className="flex items-baseline justify-between gap-2">
                <dt className="text-xs text-slate-500 dark:text-slate-400">Retention</dt>
                <dd className="text-xs font-medium text-emerald-600 dark:text-emerald-400">
                  Not stored
                </dd>
              </div>
            </dl>

            <button
              type="button"
              onClick={reset}
              className="mt-6 inline-flex w-full items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs font-medium text-slate-600 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 focus-visible:outline-none hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:focus-visible:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-100"
            >
              <TrashIcon />
              Clear conversation
            </button>
          </aside>

          {/* Thread + composer */}
          <div className="flex min-w-0 flex-col">
            <div
              ref={threadRef}
              role="region"
              aria-label="Conversation with Atlas"
              className="h-[28rem] overflow-y-auto scroll-smooth px-4 py-6 sm:px-6"
            >
              <ul className="space-y-6">
                {messages.map((m) => {
                  const isUser = m.role === "user";
                  const isStreaming = m.id === streamingId;
                  return (
                    <motion.li
                      key={m.id}
                      initial={reduced ? false : { opacity: 0, y: 8 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.28, ease: [0.22, 1, 0.36, 1] }}
                      className={`flex gap-3 ${isUser ? "flex-row-reverse" : ""}`}
                    >
                      <span
                        aria-hidden="true"
                        className={`mt-0.5 grid h-7 w-7 shrink-0 place-items-center rounded-lg text-[10px] font-semibold ${
                          isUser
                            ? "bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            : "bg-gradient-to-br from-indigo-500 to-violet-600 text-white"
                        }`}
                      >
                        {isUser ? (
                          "You"
                        ) : (
                          <span className="h-4 w-4">
                            <SparkIcon />
                          </span>
                        )}
                      </span>

                      <div className={`min-w-0 max-w-[85%] ${isUser ? "items-end" : ""}`}>
                        <div
                          className={`rounded-2xl px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap ${
                            isUser
                              ? "rounded-tr-sm bg-indigo-600 text-white dark:bg-indigo-500"
                              : "rounded-tl-sm border border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/60 dark:text-slate-300"
                          }`}
                        >
                          {m.text.length === 0 && isStreaming ? (
                            <span className="flex items-center gap-1.5 py-0.5">
                              <span className="sr-only">Atlas is thinking</span>
                              {[0, 1, 2].map((d) => (
                                <span
                                  key={d}
                                  aria-hidden="true"
                                  className="caix-dot h-1.5 w-1.5 rounded-full bg-slate-400 dark:bg-slate-500"
                                  style={{ animationDelay: `${d * 0.14}s` }}
                                />
                              ))}
                            </span>
                          ) : (
                            <>
                              {m.text}
                              {isStreaming ? (
                                <span
                                  aria-hidden="true"
                                  className="caix-caret ml-0.5 inline-block h-4 w-[2px] translate-y-0.5 bg-indigo-500 dark:bg-indigo-400"
                                />
                              ) : null}
                            </>
                          )}
                        </div>

                        {!isUser && m.done && m.sources ? (
                          <ul className="mt-2 flex flex-wrap gap-1.5">
                            {m.sources.map((s) => (
                              <li key={s.label}>
                                <span className="inline-flex items-center gap-1 rounded-md border border-slate-200 bg-white px-2 py-1 text-[11px] text-slate-500 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400">
                                  <LinkIcon />
                                  <span className="font-medium text-slate-700 dark:text-slate-300">
                                    {s.label}
                                  </span>
                                  <span className="text-slate-400 dark:text-slate-500">
                                    {s.host}
                                  </span>
                                </span>
                              </li>
                            ))}
                          </ul>
                        ) : null}

                        {!isUser && m.done ? (
                          <div className="mt-2 flex flex-wrap items-center gap-1">
                            {m.model ? (
                              <span className="mr-1 text-[11px] text-slate-400 dark:text-slate-500">
                                {m.model}
                              </span>
                            ) : null}
                            <button
                              type="button"
                              onClick={() => copy(m.id, m.text)}
                              className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] text-slate-500 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
                            >
                              {copiedId === m.id ? <CheckIcon /> : <CopyIcon />}
                              {copiedId === m.id ? "Copied" : "Copy"}
                            </button>
                            <button
                              type="button"
                              onClick={() => toggleVote(m.id, "up")}
                              aria-pressed={votes[m.id] === "up"}
                              aria-label="Helpful answer"
                              className={`inline-flex items-center rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none hover:bg-slate-100 dark:hover:bg-slate-800 ${
                                votes[m.id] === "up"
                                  ? "text-emerald-600 dark:text-emerald-400"
                                  : "text-slate-400 hover:text-slate-700 dark:text-slate-500 dark:hover:text-slate-200"
                              }`}
                            >
                              <ThumbIcon />
                            </button>
                            <button
                              type="button"
                              onClick={() => toggleVote(m.id, "down")}
                              aria-pressed={votes[m.id] === "down"}
                              aria-label="Unhelpful answer"
                              className={`inline-flex items-center rounded-md p-1.5 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none hover:bg-slate-100 dark:hover:bg-slate-800 ${
                                votes[m.id] === "down"
                                  ? "text-rose-600 dark:text-rose-400"
                                  : "text-slate-400 hover:text-slate-700 dark:text-slate-500 dark:hover:text-slate-200"
                              }`}
                            >
                              <ThumbIcon down />
                            </button>
                          </div>
                        ) : null}
                      </div>
                    </motion.li>
                  );
                })}
              </ul>
            </div>

            <div className="border-t border-slate-200 bg-slate-50/60 px-4 py-4 sm:px-6 dark:border-slate-800 dark:bg-slate-950/30">
              <AnimatePresence initial={false}>
                {messages.length === 1 ? (
                  <motion.div
                    key="suggestions"
                    initial={reduced ? false : { opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={reduced ? { opacity: 0 } : { opacity: 0, height: 0 }}
                    transition={{ duration: 0.24 }}
                    className="overflow-hidden"
                  >
                    <p className="mb-2 text-xs font-medium text-slate-500 dark:text-slate-400">
                      Try one of these
                    </p>
                    <div className="mb-3 flex flex-wrap gap-2">
                      {SUGGESTIONS.map((s) => (
                        <button
                          key={s}
                          type="button"
                          onClick={() => send(s)}
                          className="rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs text-slate-600 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 focus-visible:outline-none hover:border-indigo-300 hover:bg-indigo-50 hover:text-indigo-700 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-400 dark:focus-visible:ring-offset-slate-950 dark:hover:border-indigo-500/40 dark:hover:bg-indigo-500/10 dark:hover:text-indigo-300"
                        >
                          {s}
                        </button>
                      ))}
                    </div>
                  </motion.div>
                ) : null}
              </AnimatePresence>

              <form onSubmit={onSubmit}>
                <label htmlFor={`${uid}-input`} className="sr-only">
                  Message Atlas
                </label>
                <div className="flex items-end gap-2 rounded-2xl border border-slate-200 bg-white p-2 transition-colors focus-within:border-indigo-400 focus-within:ring-2 focus-within:ring-indigo-500/30 dark:border-slate-800 dark:bg-slate-900 dark:focus-within:border-indigo-500">
                  <textarea
                    id={`${uid}-input`}
                    ref={inputRef}
                    rows={1}
                    value={input}
                    maxLength={2000}
                    onChange={(e) => {
                      setInput(e.target.value);
                      grow(e.target);
                    }}
                    onKeyDown={onKeyDown}
                    placeholder={
                      streaming
                        ? "Atlas is answering — press Stop to interrupt…"
                        : "Ask Atlas anything specific…"
                    }
                    aria-describedby={`${uid}-hint`}
                    className="max-h-[152px] min-h-[2.5rem] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-slate-100 dark:placeholder:text-slate-500"
                  />
                  {streaming ? (
                    <button
                      type="button"
                      onClick={stop}
                      className="inline-flex h-9 shrink-0 items-center gap-1.5 rounded-xl border border-slate-300 bg-white px-3 text-xs font-medium text-slate-700 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:focus-visible:ring-offset-slate-900 dark:hover:bg-slate-700"
                    >
                      <StopIcon />
                      Stop
                    </button>
                  ) : (
                    <button
                      type="submit"
                      disabled={input.trim().length === 0}
                      aria-label="Send message"
                      className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-indigo-600 text-white transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-slate-200 disabled:text-slate-400 hover:bg-indigo-700 dark:focus-visible:ring-offset-slate-900 dark:disabled:bg-slate-800 dark:disabled:text-slate-600"
                    >
                      <SendIcon />
                    </button>
                  )}
                </div>

                <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
                  <p
                    id={`${uid}-hint`}
                    className="text-[11px] text-slate-400 dark:text-slate-500"
                  >
                    <kbd className="rounded border border-slate-200 bg-slate-100 px-1 font-sans dark:border-slate-700 dark:bg-slate-800">
                      Enter
                    </kbd>{" "}
                    to send ·{" "}
                    <kbd className="rounded border border-slate-200 bg-slate-100 px-1 font-sans dark:border-slate-700 dark:bg-slate-800">
                      Shift
                    </kbd>
                    +
                    <kbd className="rounded border border-slate-200 bg-slate-100 px-1 font-sans dark:border-slate-700 dark:bg-slate-800">
                      Enter
                    </kbd>{" "}
                    for a new line
                  </p>
                  <div className="flex items-center gap-3">
                    {lastUserPrompt.length > 0 && !streaming ? (
                      <button
                        type="button"
                        onClick={regenerate}
                        className="inline-flex items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium text-slate-500 transition-colors focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:outline-none hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
                      >
                        <RetryIcon />
                        Regenerate
                      </button>
                    ) : null}
                    <span className="text-[11px] text-slate-400 tabular-nums dark:text-slate-500">
                      {input.length}/2000
                    </span>
                  </div>
                </div>
              </form>

              <p aria-live="polite" className="sr-only">
                {thinking
                  ? "Atlas is thinking"
                  : streaming
                    ? "Atlas is responding"
                    : "Atlas finished responding"}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}