"use client"; /** * @author: @kokonutui * @description: AI Token Alternatives * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Check, RotateCcw, X } from "lucide-react"; import { AnimatePresence, MotionConfig, motion, useReducedMotion, } from "motion/react"; import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export interface TokenOption { text: string; /** How likely the model was to pick this word, from 0 to 1. */ p: number; } export interface TokenSlot { id: string; /** Most likely first. The first one is what the model wrote. */ options: TokenOption[]; } /** Plain text, or a word the model nearly wrote differently. */ export type AnswerPiece = string | { slot: string }; export interface AITokenAlternativesProps { prompt?: string; slots?: TokenSlot[]; /** Builds the answer from the word picked in each slot. */ compose?: (choice: Record) => AnswerPiece[]; className?: string; } interface Token { key: string; /** Whitespace before the word, kept outside the button. */ lead: string; word: string; p: number; slot?: string; } interface Open { slot: string; index: number; x: number; y: number; } const EASE_OUT = [0.23, 1, 0.32, 1] as const; const MENU_WIDTH = 252; const TOKEN_PATTERN = /\s+|[^\s,.?!]+|[,.?!]/g; const SPACE = /^\s+$/; const DEMO_SLOTS: TokenSlot[] = [ { id: "greet", options: [ { text: "Sure", p: 0.58 }, { text: "Yes", p: 0.23 }, { text: "Good call", p: 0.12 }, ], }, { id: "day", options: [ { text: "Thursday", p: 0.41 }, { text: "Friday", p: 0.34 }, { text: "next Monday", p: 0.17 }, ], }, { id: "time", options: [ { text: "2pm", p: 0.38 }, { text: "10am", p: 0.31 }, { text: "after lunch", p: 0.22 }, ], }, { id: "length", options: [ { text: "30 minutes", p: 0.52 }, { text: "an hour", p: 0.29 }, { text: "15 minutes", p: 0.13 }, ], }, ]; const dayReason: Record = { Friday: " since the build lands Thursday night.", "next Monday": ", so we get the weekend to fix the last bugs.", }; const demoCompose = (c: Record): AnswerPiece[] => [ { slot: "greet" }, ", ", { slot: "day" }, " works better for me", dayReason[c.day] ?? ", and it gives design a day to finish the flows.", " Want to do ", { slot: "time" }, c.time === "after lunch" ? " when everyone is back" : "", "? Let's keep it to ", { slot: "length" }, c.length === "15 minutes" ? " and only go through the blockers." : " and walk through the launch checklist together.", ]; /** Words the model was less sure of, so the confidence view has texture. */ const SOFT: Record = { design: 0.62, flows: 0.71, build: 0.68, bugs: 0.64, blockers: 0.6, checklist: 0.57, together: 0.74, everyone: 0.7, }; /** A steady, high probability for a plain word, so renders match. */ const plainP = (word: string, index: number) => { if (SOFT[word] !== undefined) { return SOFT[word]; } let h = index * 31; for (const ch of word) { h = (h * 33 + ch.charCodeAt(0)) % 997; } return 0.86 + (h % 13) / 100; }; const tokenize = ( pieces: AnswerPiece[], choice: Record, slots: TokenSlot[] ) => { const tokens: Token[] = []; let lead = ""; const push = (word: string, p: number, slot?: string) => { const index = tokens.length; tokens.push({ key: `${index}:${word}`, lead, word, p, slot }); lead = ""; }; for (const piece of pieces) { if (typeof piece === "string") { for (const part of piece.match(TOKEN_PATTERN) ?? []) { if (SPACE.test(part)) { lead += part; } else { push(part, plainP(part, tokens.length)); } } continue; } const slot = slots.find((s) => s.id === piece.slot); const picked = slot?.options.find((o) => o.text === choice[piece.slot]) ?? slot?.options[0]; if (picked) { push(picked.text, picked.p, piece.slot); } } return tokens; }; const defaults = (slots: TokenSlot[]) => Object.fromEntries(slots.map((s) => [s.id, s.options[0]?.text ?? ""])); export default function AITokenAlternatives({ prompt = "Sam wants to push the launch review. Can you draft a quick reply?", slots = DEMO_SLOTS, compose = demoCompose, className, }: AITokenAlternativesProps) { const reduceMotion = useReducedMotion(); const [choice, setChoice] = useState(() => defaults(slots)); const [shown, setShown] = useState(0); const [open, setOpen] = useState(null); const [heat, setHeat] = useState(false); const answerRef = useRef(null); const textRef = useRef(null); /** Holds the height while a rewrite streams, so the card does not jump. */ const [minHeight, setMinHeight] = useState(); const tokenRefs = useRef(new Map()); const tokens = useMemo( () => tokenize(compose(choice), choice, slots), [compose, choice, slots] ); const streaming = shown < tokens.length; // Stream the answer in a word at a time. useEffect(() => { if (!streaming) { return; } if (reduceMotion) { setShown(tokens.length); return; } const word = tokens[shown]?.word ?? ""; const id = setTimeout( () => setShown((n) => n + 1), 26 + Math.min(40, word.length * 6) ); return () => clearTimeout(id); }, [shown, streaming, tokens, reduceMotion]); const pick = useCallback( (slotId: string, text: string) => { const index = tokens.findIndex((t) => t.slot === slotId); setOpen(null); if (choice[slotId] === text) { return; } setMinHeight(textRef.current?.offsetHeight); setChoice((c) => ({ ...c, [slotId]: text })); // Keep everything up to the new word, then write the rest again. setShown(index + 1); requestAnimationFrame(() => tokenRefs.current.get(slotId)?.focus({ preventScroll: true }) ); }, [choice, tokens] ); const toggle = (token: Token, index: number) => { const slotId = token.slot; const button = slotId ? tokenRefs.current.get(slotId) : undefined; const box = answerRef.current; if (!(slotId && button && box)) { return; } if (open?.slot === slotId) { setOpen(null); return; } const b = button.getBoundingClientRect(); const r = box.getBoundingClientRect(); setOpen({ slot: slotId, index, x: Math.max(0, Math.min(b.left - r.left - 10, r.width - MENU_WIDTH)), y: b.bottom - r.top + 6, }); }; const close = useCallback(() => { const slotId = open?.slot; setOpen(null); if (slotId) { tokenRefs.current.get(slotId)?.focus({ preventScroll: true }); } }, [open]); // Click outside closes the list. useEffect(() => { if (!open) { return; } const onDown = (event: PointerEvent) => { const target = event.target as Node; if (!answerRef.current?.contains(target)) { setOpen(null); } }; document.addEventListener("pointerdown", onDown); return () => document.removeEventListener("pointerdown", onDown); }, [open]); const edits = slots.filter((s) => choice[s.id] !== s.options[0]?.text); const openSlot = slots.find((s) => s.id === open?.slot); return (

{prompt}

{tokens.slice(0, shown).map((token, index) => ( s.id === token.slot) } heat={heat} key={token.key} onToggle={() => toggle(token, index)} ref={(el) => { if (token.slot && el) { tokenRefs.current.set(token.slot, el); } }} token={token} /> ))} {streaming && (

{open && openSlot && ( pick(openSlot.id, text)} slot={openSlot} x={open.x} y={open.y} /> )}

{streaming ? "" : "Answer updated"}

); } function TokenView({ token, heat, active, edited, onToggle, ref, }: { token: Token; heat: boolean; active: boolean; edited: boolean; onToggle: () => void; ref: (el: HTMLButtonElement | null) => void; }) { // The less sure the model was, the warmer the word in the confidence view. const warmth = heat ? Math.max(0, (0.95 - token.p) / 0.75) : 0; const style = { backgroundColor: `rgb(234 88 12 / ${(warmth * 0.32).toFixed(3)})`, }; const enter = { initial: { opacity: 0, filter: "blur(3px)" }, animate: { opacity: 1, filter: "blur(0px)" }, transition: { duration: 0.28, ease: EASE_OUT }, }; if (!token.slot) { return ( <> {token.lead} {token.word} ); } return ( <> {token.lead} ); } function Alternatives({ slot, current, x, y, onPick, onClose, }: { slot: TokenSlot; current: string; x: number; y: number; onPick: (text: string) => void; onClose: () => void; }) { const listRef = useRef(null); const options = [...slot.options].sort((a, b) => b.p - a.p); useEffect(() => { const selected = listRef.current?.querySelector( '[aria-selected="true"]' ); selected?.focus({ preventScroll: true }); }, []); const onKeyDown = (event: KeyboardEvent) => { const items = [ ...(listRef.current?.querySelectorAll( '[role="option"]' ) ?? []), ]; const at = items.indexOf(document.activeElement as HTMLButtonElement); if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); const step = event.key === "ArrowDown" ? 1 : -1; items.at((at + step + items.length) % items.length)?.focus(); } else if (event.key === "Escape" || event.key === "Tab") { event.preventDefault(); onClose(); } }; return ( ); } function HeatSwitch({ on, onToggle }: { on: boolean; onToggle: () => void }) { return ( ); } function EditChips({ edits, choice, onRevert, onReset, }: { edits: TokenSlot[]; choice: Record; onRevert: (slot: TokenSlot) => void; onReset: () => void; }) { return ( <> {edits.map((slot) => ( {slot.options[0].text} {choice[slot.id]} ))} {edits.length > 1 && ( )} ); }

AI Token Alternatives

On this page