"use client"; /** * @author: @kokonutui * @description: AI Message Queue * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { ArrowUp, Check, CornerDownLeft, GripVertical, ListPlus, Pencil, Play, Square, X, } from "lucide-react"; import { AnimatePresence, MotionConfig, motion, Reorder, useDragControls, } from "motion/react"; import { type KeyboardEvent, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface AgentResponse { /** What the agent shows while it works, one line per step. */ steps: string[]; reply: string; } export interface QueuedMessage { id: string; text: string; } export interface AIMessageQueueProps { title?: string; /** The message the agent is working on when the component mounts. */ initialPrompt?: string; /** Follow-ups already waiting in the queue. */ initialQueue?: string[]; /** How the agent answers a message. Demo steps and replies when omitted. */ respond?: (text: string) => AgentResponse; /** Milliseconds per step of a run. */ stepMs?: number; className?: string; } interface UserEntry { id: string; role: "user"; text: string; } interface AgentEntry { id: string; role: "agent"; steps: string[]; reply: string; step: number; status: "running" | "done" | "stopped"; seconds: number; } type Entry = UserEntry | AgentEntry; const EASE_OUT = [0.23, 1, 0.32, 1] as const; const APPLE = /Mac|iPhone|iPad/; const DEMO: Record = { "Move session handling onto the new token store": { steps: [ "Reading src/auth/session.ts", "Finding every getSession call", "Editing 6 files", "Running auth tests", ], reply: "Session handling now reads from TokenStore. I updated 6 files and the auth tests pass.", }, "Also add a test for expired tokens": { steps: [ "Opening session.test.ts", "Writing the expired token case", "Running auth tests", ], reply: "Added a test that expires a token mid-request and checks we answer 401. 14 of 14 pass.", }, "Keep the old cookie name for now": { steps: [ "Searching for SESSION_COOKIE", "Restoring kk_session", "Running auth tests", ], reply: "The cookie stays kk_session so nobody gets signed out. I left a TODO to rename it after the migration.", }, "Then open a PR": { steps: [ "Writing the PR description", "Pushing auth/token-store", "Opening the pull request", ], reply: "Opened #482, Move sessions onto TokenStore, with the test and the cookie change in it.", }, }; const demoRespond = (text: string): AgentResponse => DEMO[text] ?? { steps: ["Reading the thread", "Making the change", "Checking the result"], reply: "Done, that's in. The tests still pass.", }; let counter = 0; const uid = (prefix: string) => { counter += 1; return `${prefix}-${counter}`; }; const useModKey = () => { const [mod, setMod] = useState("⌘"); useEffect(() => { if (!APPLE.test(navigator.userAgent)) { setMod("Ctrl"); } }, []); return mod; }; const startRun = (text: string, respond: (t: string) => AgentResponse) => { const { steps, reply } = respond(text); const user: UserEntry = { id: uid("u"), role: "user", text }; const agent: AgentEntry = { id: uid("a"), role: "agent", steps, reply, step: 0, status: "running", seconds: 0, }; return [user, agent] as const; }; export default function AIMessageQueue({ title = "Auth refactor", initialPrompt = "Move session handling onto the new token store", initialQueue = [ "Also add a test for expired tokens", "Keep the old cookie name for now", ], respond = demoRespond, stepMs = 1700, className, }: AIMessageQueueProps) { const [entries, setEntries] = useState(() => [ { id: "u-0", role: "user", text: initialPrompt }, { id: "a-0", role: "agent", ...respond(initialPrompt), step: 0, status: "running", seconds: 0, }, ]); const [queue, setQueue] = useState(() => initialQueue.map((text, i) => ({ id: `q-${i}`, text })) ); const [paused, setPaused] = useState(false); const [draft, setDraft] = useState(""); const [announcement, setAnnouncement] = useState(""); const mod = useModKey(); const scrollRef = useRef(null); const inputRef = useRef(null); const last = entries.at(-1); const running = last?.role === "agent" && last.status === "running"; const runId = running ? last.id : null; const runStep = running ? last.step : -1; // Step the current run along. useEffect(() => { if (!runId || runStep < 0) { return; } const id = setTimeout(() => { setEntries((list) => list.map((e) => { if (e.id !== runId || e.role !== "agent") { return e; } const step = e.step + 1; return step >= e.steps.length ? { ...e, step, status: "done" } : { ...e, step }; }) ); }, stepMs); return () => clearTimeout(id); }, [runId, runStep, stepMs]); // A clock for the run, so "Working · 4s" keeps moving. useEffect(() => { if (!running) { return; } const id = setInterval(() => { setEntries((list) => list.map((e) => e.role === "agent" && e.status === "running" ? { ...e, seconds: e.seconds + 1 } : e ) ); }, 1000); return () => clearInterval(id); }, [running]); // When a run ends, the next queued message goes in. useEffect(() => { if (running || paused || queue.length === 0) { return; } const id = setTimeout(() => { const [next, ...rest] = queue; setQueue(rest); setEntries((list) => [...list, ...startRun(next.text, respond)]); }, 450); return () => clearTimeout(id); }, [running, paused, queue, respond]); // Keep the newest activity in view. const entryCount = entries.length; const lastStep = last?.role === "agent" ? last.step : 0; useEffect(() => { const el = scrollRef.current; if (entryCount > 0 && el) { el.scrollTo({ top: el.scrollHeight + lastStep, behavior: "smooth" }); } }, [entryCount, lastStep]); const stopCurrent = useCallback(() => { setEntries((list) => list.map((e) => e.role === "agent" && e.status === "running" ? { ...e, status: "stopped" } : e ) ); }, []); /** Interrupts the run and sends this message straight away. */ const sendNow = (text: string) => { setPaused(false); setEntries((list) => [ ...list.map((e) => e.role === "agent" && e.status === "running" ? { ...e, status: "stopped" as const } : e ), ...startRun(text, respond), ]); }; const submit = (now: boolean) => { const text = draft.trim(); if (!text) { return; } setDraft(""); if (running && !now) { setQueue((q) => [...q, { id: uid("q"), text }]); return; } if (running) { sendNow(text); return; } setPaused(false); setEntries((list) => [...list, ...startRun(text, respond)]); }; const onKeyDown = (event: KeyboardEvent) => { if (event.key === "Enter" && !event.shiftKey) { event.preventDefault(); submit(event.metaKey || event.ctrlKey); } }; const queueing = running && draft.trim().length > 0; let action: "stop" | "queue" | "send" = "send"; if (queueing) { action = "queue"; } else if (running) { action = "stop"; } return (

{title}

{running ? "Working" : "Idle"}

{entries.map((entry) => ( {entry.role === "user" ? (

{entry.text}

) : ( )} ))}

setQueue([])} onEdit={(id, text) => setQueue((q) => q.map((m) => (m.id === id ? { ...m, text } : m)) ) } onMoved={(text, position) => setAnnouncement(`Moved "${text}" to position ${position}`) } onRemove={(id) => setQueue((q) => q.filter((m) => m.id !== id))} onReorder={setQueue} onResume={() => setPaused(false)} onSendNow={(m) => { setQueue((q) => q.filter((x) => x.id !== m.id)); sendNow(m.text); }} paused={paused && !running} progress={ running && last.steps.length > 0 ? (last.step + 1) / last.steps.length : 0 } queue={queue} /> {announcement}

setDraft(event.target.value)}
                onKeyDown={onKeyDown}
                placeholder={
                  running
                    ? "Queue a follow-up…"
                    : "Ask the agent to do something…"
                }
                ref={inputRef}
                rows={1}
                value={draft}
              />
              <ComposerAction
                draft={draft}
                mode={action}
                onSend={() => submit(false)}
                onStop={() => {
                  stopCurrent();
                  setPaused(queue.length > 0);
                }}
              />
            </div>
          </div>
          <p className="flex h-7 items-center gap-1 px-2 text-[11px] text-zinc-400 dark:text-zinc-500">
            {running ? (
              <>
                <CornerDownLeft aria-hidden="true" className="size-3" />
                to queue
                <span className="mx-1">·</span>
                <kbd className="font-sans">{mod}</kbd>
                <CornerDownLeft aria-hidden="true" className="size-3" />
                to send now
              </>
            ) : (
              "The agent picks up queued messages when it finishes"
            )}
          </p>
        </div>
      </div>
    </MotionConfig>
  );
}

return (
    <AnimatePresence initial={false}>
      {queue.length > 0 && (
        <motion.div
          animate={{ height: "auto", opacity: 1 }}
          className="overflow-hidden"
          exit={{ height: 0, opacity: 0 }}
          initial={{ height: 0, opacity: 0 }}
          transition={{ duration: 0.25, ease: EASE_OUT }}
        >
          <div className="border-black/[0.06] border-b px-1.5 pt-1.5 pb-1 dark:border-white/[0.08]">
            <div className="flex h-6 items-center gap-2 px-1.5 text-[11px] text-zinc-500 dark:text-zinc-400">
              <span>
                {paused ? "Queue paused" : "Queued"}
                <span className="ml-1 tabular-nums">{queue.length}</span>
              </span>
              {paused && (
                <button
                  className="flex items-center gap-1 rounded px-1 font-medium text-zinc-800 transition-colors duration-100 hover:bg-zinc-900/[0.06] dark:text-zinc-100 dark:hover:bg-white/10"
                  onClick={onResume}
                  type="button"
                >
                  <Play aria-hidden="true" className="size-2.5 fill-current" />
                  Resume
                </button>
              )}
              <button
                className="ml-auto rounded px-1 transition-colors duration-100 hover:bg-zinc-900/[0.06] hover:text-zinc-800 dark:hover:bg-white/10 dark:hover:text-zinc-100"
                onClick={onClear}
                type="button"
              >
                Clear
              </button>
            </div>
            <Reorder.Group
              axis="y"
              className="space-y-0.5"
              onReorder={onReorder}
              values={queue}
            >
              <AnimatePresence initial={false}>
                {queue.map((message, index) => (
                  <QueueRow
                    index={index}
                    key={message.id}
                    message={message}
                    next={index === 0}
                    onEdit={(text) => onEdit(message.id, text)}
                    onMove={(by) => move(index, by)}
                    onRemove={() => onRemove(message.id)}
                    onSendNow={() => onSendNow(message)}
                    progress={paused ? 0 : progress}
                  />
                ))}
              </AnimatePresence>
            </Reorder.Group>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

function QueueRow({
  message,
  index,
  next,
  progress,
  onEdit,
  onMove,
  onRemove,
  onSendNow,
}: {
  message: QueuedMessage;
  index: number;
  next: boolean;
  progress: number;
  onEdit: (text: string) => void;
  onMove: (by: number) => void;
  onRemove: () => void;
  onSendNow: () => void;
}) {
  const controls = useDragControls();
  const [editing, setEditing] = useState(false);
  const [value, setValue] = useState(message.text);
  const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
    if (editing) {
      inputRef.current?.focus();
      inputRef.current?.select();
    }
  }, [editing]);

const save = () => {
    const text = value.trim();
    if (text) {
      onEdit(text);
    } else {
      setValue(message.text);
    }
    setEditing(false);
  };

const icon =
    "flex size-6 shrink-0 items-center justify-center rounded-md text-zinc-400 outline-hidden transition-colors duration-100 hover:bg-zinc-900/[0.06] hover:text-zinc-800 focus-visible:bg-zinc-900/[0.06] active:bg-zinc-900/[0.1] dark:active:bg-white/15 focus-visible:text-zinc-800 dark:text-zinc-500 dark:focus-visible:bg-white/10 dark:focus-visible:text-zinc-100 dark:hover:bg-white/10 dark:hover:text-zinc-100";

return (
    <Reorder.Item
      animate={{ opacity: 1, y: 0 }}
      className="group/row relative flex h-8 items-center gap-1 overflow-hidden rounded-lg bg-white pr-1 pl-0.5 ring-1 ring-black/[0.05] dark:bg-zinc-900 dark:ring-white/[0.06]"
      dragControls={controls}
      dragListener={false}
      exit={{ opacity: 0, y: -6, transition: { duration: 0.15 } }}
      initial={{ opacity: 0, y: 8 }}
      transition={{ duration: 0.22, ease: EASE_OUT }}
      value={message}
      whileDrag={{
        boxShadow: "0 8px 20px -8px rgb(0 0 0 / 0.25)",
        zIndex: 10,
      }}
    >
      <button
        aria-label={`Move "${message.text}". Use the arrow keys to reorder`}
        className={cn(icon, "cursor-grab touch-none active:cursor-grabbing")}
        onKeyDown={(event) => {
          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
            event.preventDefault();
            onMove(event.key === "ArrowUp" ? -1 : 1);
          }
        }}
        onPointerDown={(event) => controls.start(event)}
        type="button"
      >
        <GripVertical className="size-3.5" />
      </button>
      {next && (
        <motion.span
          animate={{ scaleX: progress, opacity: progress > 0 ? 1 : 0 }}
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 bottom-0 h-px origin-left bg-zinc-900/25 dark:bg-white/30"
          initial={false}
          transition={{ duration: 0.4, ease: EASE_OUT }}
        />
      )}
      <span className="w-3.5 shrink-0 text-center text-[11px] text-zinc-400 tabular-nums dark:text-zinc-500">
        {index + 1}
      </span>
      {editing ? (
        <input
          aria-label="Edit queued message"
          className="h-6 min-w-0 flex-1 rounded-md bg-zinc-100 px-1.5 text-[12px] text-zinc-900 outline-hidden dark:bg-zinc-800 dark:text-zinc-100"
          onBlur={save}
          onChange={(event) => setValue(event.target.value)}
          onKeyDown={(event) => {
            if (event.key === "Enter") {
              event.preventDefault();
              save();
            } else if (event.key === "Escape") {
              event.preventDefault();
              setValue(message.text);
              setEditing(false);
            }
          }}
          ref={inputRef}
          value={value}
        />
      ) : (
        <p className="min-w-0 flex-1 truncate px-1.5 text-[12px] text-zinc-700 dark:text-zinc-200">
          {message.text}
        </p>
      )}
      <div className="flex shrink-0 items-center opacity-100 transition-opacity duration-150 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:focus-within:opacity-100 [@media(hover:hover)]:group-hover/row:opacity-100">
        <button
          aria-label="Edit"
          className={icon}
          onClick={() => setEditing(true)}
          type="button"
        >
          <Pencil className="size-3" />
        </button>
        <button
          aria-label="Send now"
          className={icon}
          onClick={onSendNow}
          title="Stop the agent and send this now"
          type="button"
        >
          <ArrowUp className="size-3.5" />
        </button>
        <button
          aria-label="Remove from queue"
          className={icon}
          onClick={onRemove}
          type="button"
        >
          <X className="size-3.5" />
        </button>
      </div>
    </Reorder.Item>
  );
}

function Pulse() {
  return (
    <span
      aria-hidden="true"
      className="relative flex size-3.5 items-center justify-center"
    >
      <motion.span
        animate={{ opacity: [0.35, 1, 0.35] }}
        className="size-1.5 rounded-full bg-zinc-800 dark:bg-zinc-200"
        transition={{
          duration: 1.2,
          repeat: Number.POSITIVE_INFINITY,
          ease: "easeInOut",
        }}
      />
    </span>
  );
}
</article></body></html>

AI Message Queue

On this page