AI Prompt Input
An AI chat input — auto-growing height, IME-safe Enter to submit, and a submit arrow that flies out.
npx shadcn@latest add https://webberui.com/r/ai-prompt-input.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<AiPromptInput />
Installation
npx shadcn@latest add https://webberui.com/r/ai-prompt-input.jsonInstalling also writes the --wb-duration-fast and --wb-ease-out CSS variables into your global stylesheet.
Usage
import { AIPromptInput } from "@/components/ui/ai-prompt-input";
<AIPromptInput onSubmit={(value) => console.log(value)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | "問我任何問題⋯" ("Ask me anything…") | Placeholder text |
onSubmit | (value: string) => void | — | Fires on submit |
maxRows | number | 8 | Maximum number of rows; scrolls beyond that |
disabled | boolean | false | Disables the input |
How it works
- IME-safe: pressing Enter mid-composition in Chinese Bopomofo (Zhuyin) or Pinyin does not submit by accident (it checks
isComposing) - Auto-growing height: it grows with the content, then switches to internal scrolling once it reaches
maxRows - When the user has "reduce motion" enabled at the system level, the submit animation degrades to a fade out
This is the core version from phase one; for the advanced version (attachments, model menu, voice waveform, slash commands) see roadmap item #12.
Taiwan Tile Map (React)
A React tile-grid map of Taiwan's 22 counties and cities that needs no geo data: value-driven choropleth colouring, hover tooltip cards, click callbacks and arrow-key navigation, usable as a visual filter.
AI Prompt Input Pro
An advanced AI chat input integrating attachments, a model menu, a voice waveform, slash commands, @ mentions, and a streaming stop state.