AI Prompt Input Pro
進階 AI 對話輸入框，整合附件、模型選單、語音波形、斜線指令、@提及與串流停止狀態。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8
<AiPromptInputPro />
安裝
npx shadcn@latest add https://webberui.com/r/ai-prompt-input-pro.json或在 components.json 設定 registries 後，改用 @webberui/ai-prompt-input-pro 安裝。
安裝依賴後，從 registry JSON（/r/ai-prompt-input-pro.json 的 files[0].content）複製 ai-prompt-input-pro.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import {
AIPromptInputPro,
type PromptSubmitPayload,
} from "@/components/ui/ai-prompt-input-pro";
const models = [
{ id: "opus", label: "Webber Opus", description: "最強推理" },
{ id: "haiku", label: "Webber Haiku", description: "極速輕量" },
];
const commands = [{ id: "sum", label: "摘要", description: "濃縮重點" }];
const mentions = [{ id: "alex", label: "Alex", description: "產品設計" }];
<AIPromptInputPro
models={models}
commands={commands}
mentions={mentions}
onSubmit={(payload: PromptSubmitPayload) => console.log(payload)}
/>;送出時 onSubmit 會收到包含文字、附件與當前模型的 PromptSubmitPayload。串流回應期間把 streaming 設為 true，送出鈕會轉為停止鈕並觸發 onStop。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
value | string | — | 受控文字值，不傳則由元件內部管理 |
onValueChange | (value: string) => void | — | 文字變更時觸發（受控與非受控皆呼叫） |
onSubmit | (payload: PromptSubmitPayload) => void | — | 送出時觸發，回傳文字、附件與模型 |
placeholder | string | "問我任何問題⋯" | 文字區佔位文字 |
models | PromptModel[] | — | 可選模型清單，提供後顯示模型選單 |
modelId | string | — | 受控的當前模型 id |
defaultModelId | string | models[0].id | 非受控模式的預設模型 id |
onModelChange | (modelId: string) => void | — | 模型變更時觸發 |
commands | PromptSuggestion[] | — | 輸入 / 時彈出的斜線指令清單 |
mentions | PromptSuggestion[] | — | 輸入 @ 時彈出的提及清單 |
allowAttachments | boolean | true | 是否顯示附件按鈕 |
accept | string | — | 檔案選取器的 accept 屬性 |
allowVoice | boolean | true | 是否顯示麥克風與錄音波形 |
onVoiceStop | (seconds: number) => void | — | 結束錄音時觸發，帶入錄音秒數 |
streaming | boolean | false | 串流中：送出鈕轉為停止鈕 |
onStop | () => void | — | 串流中按下停止鈕時觸發 |
maxRows | number | 8 | 最大行數，超過後於文字區內捲動 |
disabled | boolean | false | 停用整個輸入器 |
PromptSubmitPayload
| 欄位 | 型別 | 說明 |
|---|---|---|
text | string | 去除前後空白的文字內容 |
attachments | File[] | 使用者附加的檔案 |
modelId | string | undefined | 送出時選取的模型 id |
細節
- 斜線指令與 @提及：輸入時依游標所在的 token 即時解析，
/需位於句首或空白後才觸發。候選清單以子序列模糊比對過濾，支援 ↑ ↓ 移動、Enter / Tab 插入、Esc 關閉。 - 附件：以晶片列呈現，帶檔名與大小，支援逐一移除；晶片增減使用
AnimatePresence的popLayout平滑補位。 - 語音波形：麥克風鈕切換錄音狀態，錄音中文字區替換為動態波形與計時器，再次點擊即結束並回傳秒數（純視覺示意，不含實際錄音）。
- 串流狀態：
streaming為true時送出鈕以彈簧動畫換為停止方塊，點擊觸發onStop。 - 受控／非受控：文字與模型皆支援兩種模式，未提供對應的
value/modelId時由元件內部管理。 - IME 友善：中文等組字期間按 Enter 不會誤送出；Shift+Enter 換行。
可及性
- 文字區以
role="combobox"搭配aria-expanded、aria-controls、aria-activedescendant連結建議浮層，候選項目為role="option"。 - 模型選單為
role="menu"，項目為role="menuitemradio"並帶aria-checked；開啟後點擊外部或選取即關閉。 - 所有圖示按鈕皆有
aria-label，錄音鈕以aria-pressed標示狀態，錄音波形以role="status"回報。 - 使用者系統開啟「減少動態效果」時，波形改為靜態、彈入與位移退化為淡入淡出。
- 計時器與事件監聽在卸載時全數清理。