"use client"; /** * @author: @kokonutui * @description: AI Prompt Input * @version: 2.0.0 * @date: 2026-10-15 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { AlignLeft, ArrowUp, Bot, Check, ChevronDown, Code2, FileText, Languages, Lightbulb, Plus, Slash, X, } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ReactNode, useEffect, useId, useRef, useState } from "react"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Textarea } from "@/components/ui/textarea"; import { useAutoResizeTextarea } from "@/hooks/use-auto-resize-textarea"; import { cn } from "@/lib/utils"; export interface PromptCommand { id: string; label: string; description?: string; icon?: ReactNode; } export interface PromptAttachment { id: string; file: File; } export interface PromptModel { name: string; /** One line under the name in the menu. */ description?: string; /** * Effort levels, lowest first, e.g. ["Low", "Medium", "High"]. Leave out * for a model without a thinking control: the Effort button hides. */ efforts?: string[]; /** Effort to start on when the model is picked fresh. */ defaultEffort?: string; } interface AIPromptProps { models?: PromptModel[]; /** Name of the model selected at first. */ defaultModel?: string; placeholder?: string; /** One line above the box, e.g. a promo. Pass "" to hide the header. */ headerText?: string; /** Label of the header button, which switches to `promotedModel`. */ headerAction?: string; /** The model the header talks about; its icon leads the header. */ promotedModel?: string; /** * Sends the message. Return a promise to show the Stop button until it * settles; `signal` aborts when the user presses Stop. Without it, the * component plays a short pretend reply so the demo feels alive. */ onSubmit?: ( value: string, model: string, options: { /** The effort level, or null for a model without one. */ effort: string | null; files: File[]; signal: AbortSignal; command: PromptCommand | null; } ) => unknown; /** Shown when the message starts with "/". Pass [] to turn the menu off. */ commands?: PromptCommand[]; /** Called when the user presses Stop while a reply is in progress. */ onStop?: () => void; /** Called with the files picked, dropped or pasted into the prompt. */ onAttach?: (files: FileList | File[]) => void; className?: string; } const DEFAULT_COMMANDS: PromptCommand[] = [ { id: "summarize", label: "Summarize", description: "Shorten text or files", icon: , }, { id: "translate", label: "Translate", description: "Into another language", icon: , }, { id: "explain", label: "Explain", description: "Step by step, in plain words", icon: , }, { id: "code", label: "Write code", description: "Functions, tests and fixes", icon: , }, ]; const DEFAULT_MODELS: PromptModel[] = [ { name: "Claude Opus 5.5", description: "Most capable, for complex work", efforts: ["Low", "Medium", "High", "Max"], defaultEffort: "High", }, { name: "Claude Sonnet 5.5", description: "Fast and smart for everyday tasks", efforts: ["Low", "Medium", "High", "Max"], defaultEffort: "Medium", }, { name: "Claude Fable 5.1", description: "Newest model, free to try this weekend", efforts: ["Low", "Medium", "High"], defaultEffort: "Medium", }, { name: "Claude Haiku 5.5", description: "Fastest, no thinking step", }, ]; /** Hints for the usual effort names; other names show without one. */ const EFFORT_HINTS: Record = { Minimal: "Skips reasoning almost entirely", Low: "Answers right away", Medium: "Thinks briefly first", High: "Thinks longer on hard problems", Max: "No limit on thinking", }; const effortsOf = (model: PromptModel | undefined) => model?.efforts ?? []; const startEffort = (model: PromptModel | undefined) => { const efforts = effortsOf(model); if (efforts.length === 0) { return null; } return model?.defaultEffort && efforts.includes(model.defaultEffort) ? model.defaultEffort : (efforts.at(-1) ?? null); }; /** * The effort to keep when switching models: the same level if the new model * has it, otherwise the one at the same height on its scale. */ function carryEffort( from: PromptModel | undefined, to: PromptModel, effort: string | null ) { const next = effortsOf(to); if (next.length === 0) { return null; } if (effort && next.includes(effort)) { return effort; } const previous = effortsOf(from); if (!effort || previous.length < 2) { return startEffort(to); } const share = previous.indexOf(effort) / (previous.length - 1); return next[Math.round(share * (next.length - 1))] ?? startEffort(to); } // Decorative: the icon sits next to the model name, which carries the label. const CLAUDE_ICON = ( ); const getModelIcon = (model: string) => model.startsWith("Claude") ? ( CLAUDE_ICON ) : ( ); const EASE_OUT = [0.23, 1, 0.32, 1] as const; const DEMO_REPLY_MS = 2400; const WHITESPACE = /\s/; const formatSize = (bytes: number) => { if (bytes < 1024) { return `${bytes} B`; } if (bytes < 1024 * 1024) { return `${Math.round(bytes / 1024)} KB`; } return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; }; const waitFor = (ms: number, signal: AbortSignal) => new Promise((resolve) => { const id = setTimeout(resolve, ms); signal.addEventListener("abort", () => { clearTimeout(id); resolve(); }); }); function AttachmentChip({ attachment, onRemove, }: { attachment: PromptAttachment; onRemove: () => void; }) { const { file } = attachment; const isImage = file.type.startsWith("image/"); const [previewUrl, setPreviewUrl] = useState(null); // Object URLs are created after mount and revoked on unmount, so a // removed chip doesn't keep its image in memory. useEffect(() => { if (!isImage) { return; } const url = URL.createObjectURL(file); setPreviewUrl(url); return () => URL.revokeObjectURL(url); }, [file, isImage]); return ( {previewUrl ? ( // biome-ignore lint/performance/noImgElement: object URL preview, nothing to optimise

) : ( {file.name} {formatSize(file.size)} ); } /** Bolds the part of the label the user has typed after "/". */ function MatchedLabel({ label, query }: { label: string; query: string }) { const start = query ? label.toLowerCase().indexOf(query) : -1; if (start < 0) { return <>{label}; } const end = start + query.length; return ( <> {label.slice(0, start)} {label.slice(start, end)} {label.slice(end)} ); } function Kbd({ children }: { children: ReactNode }) { return ( {children} ); } function CommandMenu({ id, commands, query, activeIndex, onHover, onSelect, }: { id: string; commands: PromptCommand[]; query: string | null; activeIndex: number; onHover: (index: number) => void; onSelect: (command: PromptCommand) => void; }) { // Opened by typing, so it only fades: nothing travels between the // keystroke and the list. return ( {/* The highlight follows the keyboard instantly, without a transition. */}

↑ ↓ to move ↵ to pick esc to close

); } function CommandPill({ command, onRemove, }: { command: PromptCommand; onRemove: () => void; }) { return ( {command.label} ); } function SendButton({ responding, canSend, onSend, onStop, }: { responding: boolean; canSend: boolean; onSend: () => void; onStop: () => void; }) { // One button with two faces. The faces crossfade with a little blur, so // Send turning into Stop reads as the same control changing state. const face = "absolute inset-0 flex items-center justify-center transition-[opacity,filter] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"; return ( ); } function PromoHeader({ model, text, action, canSwitch, inUse, onAction, }: { model: string; text: string; action: string; /** False when the promoted model is not in the menu: no button then. */ canSwitch: boolean; inUse: boolean; onAction: () => void; }) { return (

{getModelIcon(model)}

{text}

{action && canSwitch && ( )}

); } /** Rising bars, filled up to the current effort, like a signal meter. */ function EffortBars({ count, level }: { count: number; level: number }) { return ( {Array.from({ length: count }, (_, i) => ( ))} ); } const ghostButton = cn( "flex h-8 items-center gap-1.5 rounded-full px-2.5 text-black/70 text-xs dark:text-white/70", "hover:bg-black/5 hover:text-black data-[state=open]:bg-black/5 data-[state=open]:text-black", "dark:data-[state=open]:bg-white/10 dark:data-[state=open]:text-white dark:hover:bg-white/10 dark:hover:text-white", "transition-[background-color,color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500/60" ); const menuPanel = "origin-(--radix-dropdown-menu-content-transform-origin) rounded-xl border-black/10 p-1 shadow-[0_8px_24px_-8px_rgb(0_0_0/0.18)] dark:border-white/10 dark:bg-zinc-900"; function ModelMenu({ models, selected, onSelect, }: { models: PromptModel[]; selected: string; onSelect: (model: PromptModel) => void; }) { return ( {/* Opens upward, as the prompt sits at the bottom of a chat, and grows out of its trigger. */} Model {models.map((model) => ( onSelect(model)} > {getModelIcon(model.name)} {model.name} {model.description && ( {model.description} )} ))} ); } /** * How hard the model thinks. A separate control from the model, so it can * be turned up for one hard question without opening the model list. */ function EffortMenu({ efforts, value, onChange, }: { efforts: string[]; value: string; onChange: (effort: string) => void; }) { const level = Math.max(0, efforts.indexOf(value)); return ( Effort {/* Highest first, so the list reads like the bars: up is more. */} {[...efforts].reverse().map((effort) => { const index = efforts.indexOf(effort); return ( {effort} {EFFORT_HINTS[effort] && ( {EFFORT_HINTS[effort]} )} ); })} ); } export default function AI_Prompt({ models = DEFAULT_MODELS, defaultModel = "Claude Opus 5.5", placeholder = "Ask anything. Type / for commands", headerText = "Claude Fable 5.1 is free this weekend", headerAction = "Try it", promotedModel = "Claude Fable 5.1", onSubmit, onStop, onAttach, commands = DEFAULT_COMMANDS, className, }: AIPromptProps) { const [value, setValue] = useState(""); const [command, setCommand] = useState(null); const [menuIndex, setMenuIndex] = useState(0); const [menuDismissed, setMenuDismissed] = useState(false); const menuId = useId(); const [attachments, setAttachments] = useState([]); const [responding, setResponding] = useState(false); const [isDragging, setIsDragging] = useState(false); const abortRef = useRef(null); const nextIdRef = useRef(0); // The last message sent, for ↑ in an empty prompt (as in a terminal). const lastSentRef = useRef(""); const { textareaRef, adjustHeight } = useAutoResizeTextarea({ minHeight: 56, maxHeight: 280, }); // A default that is not in `models` would show a model the menu can't pick. const [selectedModel, setSelectedModel] = useState(() => models.some((m) => m.name === defaultModel) ? defaultModel : (models[0]?.name ?? defaultModel) ); const currentModel = models.find((m) => m.name === selectedModel); const [effort, setEffort] = useState(() => startEffort(currentModel)); const textareaId = useId(); const shouldReduceMotion = useReducedMotion(); useEffect(() => () => abortRef.current?.abort(), []); const pickModel = (next: PromptModel) => { setEffort(carryEffort(currentModel, next, effort)); setSelectedModel(next.name); }; const addFiles = (files: FileList | File[]) => { const list = Array.from(files); if (list.length === 0) { return; } onAttach?.(files); setAttachments((current) => [ ...current, ...list.map((file) => { nextIdRef.current += 1; return { id: `attachment-${nextIdRef.current}`, file }; }), ]); }; const removeAttachment = (id: string) => { setAttachments((current) => current.filter((a) => a.id !== id)); textareaRef.current?.focus(); }; // "/" at the very start opens the menu; the text after it filters it. const slashQuery = !command && value.startsWith("/") && !WHITESPACE.test(value) ? value.slice(1).toLowerCase() : null; const matches = slashQuery === null ? [] : commands.filter((c) => c.label.toLowerCase().includes(slashQuery)); const menuOpen = matches.length > 0 && !menuDismissed; const activeIndex = Math.min(menuIndex, matches.length - 1); const pickCommand = (picked: PromptCommand) => { setCommand(picked); setValue(""); setMenuIndex(0); adjustHeight(true); textareaRef.current?.focus(); }; const canSend = value.trim().length > 0 && !responding; const submit = async () => { if (!canSend) { return; } const controller = new AbortController(); abortRef.current = controller; const files = attachments.map((a) => a.file); const sentCommand = command; lastSentRef.current = value; setValue(""); setAttachments([]); setCommand(null); adjustHeight(true); setResponding(true); try { await (onSubmit ? onSubmit(value, selectedModel, { effort, files, signal: controller.signal, command: sentCommand, }) : waitFor(DEMO_REPLY_MS, controller.signal)); } finally { if (abortRef.current === controller) { abortRef.current = null; setResponding(false); } } }; const stop = () => { abortRef.current?.abort(); abortRef.current = null; setResponding(false); onStop?.(); textareaRef.current?.focus(); }; const handleMenuKey = (e: React.KeyboardEvent) => { const step = { ArrowDown: 1, ArrowUp: -1 }[e.key]; if (step) { e.preventDefault(); setMenuIndex((activeIndex + step + matches.length) % matches.length); return true; } if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); pickCommand(matches[activeIndex]); return true; } if (e.key === "Escape") { e.preventDefault(); setMenuDismissed(true); return true; } return false; }; // ↑ in an empty prompt brings the last message back to edit. const recallLast = () => { setValue(lastSentRef.current); // After React writes the value: grow to fit, caret at the end. requestAnimationFrame(() => { const el = textareaRef.current; adjustHeight(); el?.setSelectionRange(el.value.length, el.value.length); }); }; const handleEmptyKey = (e: React.KeyboardEvent) => { if (e.key === "ArrowUp" && lastSentRef.current) { e.preventDefault(); recallLast(); return true; } // Backspace in an empty prompt takes the command off first. if (e.key === "Backspace" && command) { e.preventDefault(); setCommand(null); return true; } return false; }; const handleKeyDown = (e: React.KeyboardEvent) => { // Enter during IME composition confirms the candidate; it must not submit. if (e.nativeEvent.isComposing) { return; } if (menuOpen && handleMenuKey(e)) { return; } if (value === "" && handleEmptyKey(e)) { return; } if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submit(); } else if (e.key === "Escape" && responding) { e.preventDefault(); stop(); } }; const hasFiles = (e: React.DragEvent) => Array.from(e.dataTransfer.types).includes("Files"); const efforts = effortsOf(currentModel); const hasTray = attachments.length > 0 || command !== null; return (

{headerText && ( m.name === promotedModel)} inUse={selectedModel === promotedModel} model={promotedModel} onAction={() => { const promoted = models.find((m) => m.name === promotedModel); if (promoted) { pickModel(promoted); } textareaRef.current?.focus(); }} text={headerText} /> )} {/* biome-ignore lint/a11y/noStaticElementInteractions lint/a11y/noNoninteractiveElementInteractions: drop target for files; keyboard users have the attach button */}

{ if (!e.currentTarget.contains(e.relatedTarget as Node | null)) { setIsDragging(false); } }} onDragOver={(e) => { if (hasFiles(e)) { e.preventDefault(); setIsDragging(true); } }} onDrop={(e) => { if (!hasFiles(e)) { return; } e.preventDefault(); setIsDragging(false); addFiles(e.dataTransfer.files); }} > {hasTray && (

{command && ( { setCommand(null); textareaRef.current?.focus(); }} /> )} {attachments.map((attachment) => ( removeAttachment(attachment.id)} /> ))}

)} Message {menuOpen && ( )}

setMenuDismissed(true)}
            onChange={(e) => {
              setValue(e.target.value);
              setMenuDismissed(false);
              setMenuIndex(0);
              adjustHeight();
            }}
            onFocus={() => setMenuDismissed(false)}
            onKeyDown={handleKeyDown}
            onPaste={(e) => {
              if (e.clipboardData.files.length > 0) {
                e.preventDefault();
                addFiles(e.clipboardData.files);
              }
            }}
            placeholder={
              responding ? "Replying… Esc to stop, or keep typing" : placeholder
            }
            ref={textareaRef}
            value={value}
          />

<div className="flex items-center gap-1 px-2.5 pt-1 pb-2.5">
            <label
              className={cn(
                "flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full ring-1 ring-black/10 dark:ring-white/15",
                "text-black/60 hover:bg-black/5 hover:text-black dark:text-white/60 dark:hover:bg-white/10 dark:hover:text-white",
                "has-focus-visible:ring-2 has-focus-visible:ring-blue-500/60",
                "transition-[background-color,color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]"
              )}
              title="Attach files, or drop or paste them"
            >
              <input
                aria-label="Attach files"
                className="sr-only"
                multiple
                onChange={(e) => {
                  if (e.target.files?.length) {
                    addFiles(e.target.files);
                  }
                  // Cleared so picking the same file again still fires.
                  e.target.value = "";
                }}
                type="file"
              />
              <Plus aria-hidden="true" className="size-4" />
            </label>
            <ModelMenu
              models={models}
              onSelect={pickModel}
              selected={selectedModel}
            />
            {efforts.length > 0 && effort && (
              <EffortMenu
                efforts={efforts}
                onChange={setEffort}
                value={effort}
              />
            )}
            <div className="flex-1" />
            <SendButton
              canSend={canSend}
              onSend={submit}
              onStop={stop}
              responding={responding}
            />
          </div>

{/* Shown while files are dragged over the prompt. */}
          <div
            aria-hidden="true"
            className={cn(
              "pointer-events-none absolute inset-0 flex items-center justify-center rounded-[18px] border border-blue-500/50 border-dashed bg-white/85 text-blue-600 text-xs transition-opacity duration-150 dark:bg-zinc-900/85 dark:text-blue-400",
              isDragging ? "opacity-100" : "opacity-0"
            )}
          >
            Drop files to attach
          </div>
        </div>
      </div>
    </div>
  );
}
</article></body></html>

AI Input Selector

On this page