AI Prompt Input
AI 對話輸入框：自動長高、IME 安全的 Enter 送出、送出箭頭飛出動畫。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8
<AiPromptInput />
安裝
npx shadcn@latest add https://webberui.com/r/ai-prompt-input.json安裝時會一併寫入 --wb-duration-fast、--wb-ease-out CSS 變數到你的全域樣式。
安裝依賴後，從 registry JSON（/r/ai-prompt-input.json 的 files[0].content）複製 ai-prompt-input.tsx 原始碼到你的 components/ui/ 目錄，並在全域 CSS 加入：
npm install motion lucide-react clsx tailwind-merge:root {
--wb-duration-fast: 200ms;
--wb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}使用
import { AIPromptInput } from "@/components/ui/ai-prompt-input";
<AIPromptInput onSubmit={(value) => console.log(value)} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
placeholder | string | "問我任何問題⋯" | 佔位文字 |
onSubmit | (value: string) => void | — | 送出時觸發 |
maxRows | number | 8 | 最大行數，超過後捲動 |
disabled | boolean | false | 停用輸入 |
細節
- IME 安全：中文注音/拼音組字中按 Enter 不會誤送出（檢查
isComposing） - 自動長高：隨內容增高，達到
maxRows後改為內部捲動 - 使用者系統開啟「減少動態效果」時，送出動畫退化為淡出
第一階段為核心版；進階版（附件、模型選單、語音波形、斜線指令）見路線圖 #12。