AI 應用元件
AI Prompt Input
AI 對話輸入框：自動長高、IME 安全的 Enter 送出、送出箭頭飛出動畫。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add ai-prompt-inputPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8
編輯中的呼叫預設屬性
<AIPromptInput/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/ai-prompt-input.json安裝時會一併寫入 --wb-duration-fast、--wb-ease-out CSS 變數到你的全域樣式。
使用
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。