# AI Input I (`prompt-composer`) > An editorial AI chat input — attachment dropdown for images and documents, web-search and deep-think toggles, a model selector, and a live character counter. - **Docs:** https://www.mellowui.com/components/prompt-composer - **Markdown:** https://www.mellowui.com/components/prompt-composer.md - **Registry:** https://www.mellowui.com/r/prompt-composer.json - **Tool prompt:** https://www.mellowui.com/api/prompt/prompt-composer - **Categories:** interactive, form, ai - **Dependencies:** none ## AI prompt Add a PromptComposer component from the mellow library — an AI chat input with an attachment dropdown (image / document file pickers), 'Search web' and 'Deep think' toggle pills, a model selector dropdown, and a send button. Enter submits, Shift+Enter adds a newline. Pass a `models` string array and handle `onSubmit`, which receives { text, model, attachments, webSearch, deepThink }. Attachments are File objects — upload them yourself in the handler. ## Install ```bash npx shadcn@latest add https://mellowui.com/r/prompt-composer.json ``` ## Props | Prop | Type | Default | Description | |---|---|---|---| | `models` | `string[]` | `["mellow-4-opus", "mellow-4-sonnet", "mellow-4-mini"]` | Model ids shown in the selector dropdown. | | `defaultModel` | `string` | `models[0]` | Initially selected model. | | `placeholder` | `string` | `"Set your question in type…"` | Placeholder text for the prompt textarea. | | `maxLength` | `number` | `4000` | Character limit, reflected in the live counter. | | `disabled` | `boolean` | `false` | Disables all input while a response is streaming. | | `enableSound` | `boolean` | `true` | Play a synthesized typewriter carriage-return (thock + faint bell) on submit. | | `onSubmit` | `(message: PromptMessage) => void` | — | Called on send with { text, model, attachments, webSearch, deepThink }. | | `className` | `string` | — | Additional CSS classes. | ## Design notes - Client component (`"use client"`) — required for animation and refs. - Uses Mellow design tokens: `--ink`, `--ink-rgb`, `--background`, `--background-rgb`, `--rule`, `--font-sans`, `--font-serif`, `--font-mono`. Tokens auto-flip between light and dark themes — never hardcode colors. - Respects `prefers-reduced-motion: reduce` where applicable. - Self-contained — no shared utilities. Copy-paste, not a package. ## Source ```tsx "use client"; import React, { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode, } from "react"; export interface PromptAttachment { id: string; file: File; kind: "image" | "document"; } export interface PromptMessage { text: string; model: string; attachments: PromptAttachment[]; webSearch: boolean; deepThink: boolean; } export interface PromptComposerProps { models?: string[]; defaultModel?: string; placeholder?: string; maxLength?: number; disabled?: boolean; /** Play a typewriter carriage-return sound on submit. */ enableSound?: boolean; onSubmit?: (message: PromptMessage) => void; className?: string; style?: CSSProperties; } const DEFAULT_MODELS = ["mellow-4-opus", "mellow-4-sonnet", "mellow-4-mini"]; let attachmentSeq = 0; /** Typewriter carriage return — a low filtered-noise thock, then a faint bell. */ function playCarriageReturn(ctx: AudioContext) { const thockLen = Math.floor(ctx.sampleRate * 0.06); const buf = ctx.createBuffer(1, thockLen, ctx.sampleRate); const data = buf.getChannelData(0); for (let i = 0; i < thockLen; i++) { data[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / thockLen, 5) * 0.85; } const src = ctx.createBufferSource(); src.buffer = buf; const lp = ctx.createBiquadFilter(); lp.type = "lowpass"; lp.frequency.value = 1100; const thockGain = ctx.createGain(); thockGain.gain.value = 0.55; src.connect(lp); lp.connect(thockGain); thockGain.connect(ctx.destination); src.start(); const bell = ctx.createOscillator(); bell.type = "sine"; bell.frequency.value = 1870; const bellGain = ctx.createGain(); const t = ctx.currentTime + 0.05; bellGain.gain.setValueAtTime(0, t); bellGain.gain.linearRampToValueAtTime(0.05, t + 0.008); bellGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.45); bell.connect(bellGain); bellGain.connect(ctx.destination); bell.start(t); bell.stop(t + 0.5); } function formatBytes(bytes: number) { if (bytes < 1024) return `${bytes} B`; if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`; return `${(bytes / (1024 * 1024)).toFixed(1)} MB`; } /** Closes the menu when a pointer event lands outside `ref`. */ function useClickOutside(ref: React.RefObject, onOutside: () => void) { useEffect(() => { const handler = (event: PointerEvent) => { if (ref.current && !ref.current.contains(event.target as Node)) onOutside(); }; document.addEventListener("pointerdown", handler); return () => document.removeEventListener("pointerdown", handler); }, [ref, onOutside]); } function Icon({ path, size = 13 }: { path: ReactNode; size?: number }) { return ( ); } const PATHS = { plus: , image: ( <> ), document: ( <> ), globe: ( <> ), think: ( <> ), chevron: , arrowUp: , x: , }; export function PromptComposer({ models = DEFAULT_MODELS, defaultModel, placeholder = "Set your question in type…", maxLength = 4000, disabled = false, enableSound = true, onSubmit, className, style, }: PromptComposerProps) { const [text, setText] = useState(""); const [stamped, setStamped] = useState(false); const audioCtxRef = useRef(null); const [model, setModel] = useState(defaultModel ?? models[0] ?? ""); const [webSearch, setWebSearch] = useState(false); const [deepThink, setDeepThink] = useState(false); const [attachments, setAttachments] = useState([]); const [attachOpen, setAttachOpen] = useState(false); const [modelOpen, setModelOpen] = useState(false); const textareaRef = useRef(null); const attachMenuRef = useRef(null); const modelMenuRef = useRef(null); const imageInputRef = useRef(null); const docInputRef = useRef(null); useClickOutside(attachMenuRef, useCallback(() => setAttachOpen(false), [])); useClickOutside(modelMenuRef, useCallback(() => setModelOpen(false), [])); const autogrow = useCallback(() => { const el = textareaRef.current; if (!el) return; el.style.height = "auto"; el.style.height = `${Math.min(el.scrollHeight, 200)}px`; }, []); useEffect(autogrow, [text, autogrow]); const addFiles = (files: FileList | null, kind: "image" | "document") => { if (!files) return; const next = Array.from(files).map((file) => ({ id: `att-${++attachmentSeq}`, file, kind, })); setAttachments((prev) => [...prev, ...next]); }; const canSend = !disabled && (text.trim().length > 0 || attachments.length > 0); const submit = () => { if (!canSend) return; onSubmit?.({ text: text.trim(), model, attachments, webSearch, deepThink }); setText(""); setAttachments([]); if (enableSound) { try { const AC = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }) .webkitAudioContext; if (!audioCtxRef.current || audioCtxRef.current.state === "closed") { audioCtxRef.current = new AC(); } const ctx = audioCtxRef.current; const play = () => playCarriageReturn(ctx); ctx.state === "suspended" ? void ctx.resume().then(play) : play(); } catch { // audio unavailable — animation alone carries the feedback } } if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setStamped(true); } }; return (
setStamped(false)} > {/* registration marks */}