コンポーザーパネル
2列のコンポーサー:上と下にある制御のプロンプトと半径-24カード、追加メニュー、オート、マニュアル、プランモード、バイパス、スクロール可能なプロバイダーレールとモデルピッカー、選択したモデル、マイクと送信の労力ポップアップ、およびブランチ、プロジェクトフォルダ、およびコンテキストメーターがカードのトップエッジをぶら下ろすステータスタブ。 シングルラインコンポーザーピルは、それがそのままにとどまります。 これは、レイアウトのための背の高いエージェントです。
インストール
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
パーミッション
ピッカーは、ホバー、プレス、またはメニューが開いている間のみ表面を塗装するので、残りの部分では、プラスボタンの横にラベルとして読みます。メニューは、各ラインの説明と4つのモードをリストします。 もっと詳しく ヘッダ内のリンクボタン()learnMoreHref または onLearnMore). オートロック デフォルトです。 設定 defaultPermission 別の場所を始めるか、または渡して下さい permission そして、 onPermissionChange それを所有するために。 トリガー、メニュー、オプションリストは、そのように自分自身で出荷します PermissionMenu そして、 COMPOSER_PERMISSIONS.
{/* Auto is the default; start on another mode */}<ComposerPanel defaultPermission="plan" />
{/* Or own the mode yourself */}const [permission, setPermission] = useState<ComposerPermission>("auto");<ComposerPanel permission={permission} onPermissionChange={setPermission} />
{/* The picker on its own; "Learn more" is a Link Button, a link with href or a button with onLearnMore */}<PermissionMenu value={permission} onChange={setPermission} learnMoreHref="/docs/permissions" />モデルピッカー
341px パネル: プロバイダーのスクロール可能なレールが左にマークされ、選択したプロバイダのラインは、クイック検索ヒントでモデルヘッダーの右側にあるラジオ行として表示されます。 MODEL_PROVIDERS 8つのマークは、LUBHubのアイコンセットから、OpenAIとAnthropicからGoogle、Mistral、xAI、Amazonまでの10以上のデザインを運びます。 選択した行だけが努力チップを運びます。 それを押すと、同じ6ストップFaster to Smarterのスライダーが使用されるのと同じ6ストップFastoverが開きます。 クイック検索、または /ヘッダーを一度にすべてのラインナップをフィルタリングするフィールドに変えます。そのプロバイダーにタグ付けされた各マッチは、そのプロバイダーのリストにあなたをリストします。 すべてのリストはスクロールします。 パス providers あなた自身のカタログのために。
{/* Start on a model and effort stop; MODEL_PROVIDERS ships eighteen realistic lineups */}<ComposerPanel defaultModel="anthropic/fable-5.1" defaultEffort={3} />
{/* Or own both */}const [model, setModel] = useState("openai/gpt-5.6-mini");const [effort, setEffort] = useState(1); // 0 Low … 5 Max, see EFFORT_LEVELS<ComposerPanel model={model} onModelChange={setModel} effort={effort} onEffortChange={setEffort} />
{/* Your own catalogue, and the picker on its own */}<ModelPicker providers={[{ id: "acme", name: "Acme", logo: "/logos/acme.svg", models: [{ id: "acme/acme-1", name: "Acme 1" }] }]} value={model} onChange={setModel}/>ステータスタブ
タブは、各側面に34pxグレーストリップのセット28pxで、上部だけに丸められ、ブランチ、プロジェクトフォルダ、16pxのコンテクストリングを運ぶ。 これは、 status スロット: レンダリング ComposerStatusTab 自分の値で、他の値でドロップするか、またはパス null ベアカード用。
{/* Branch, project folder and context meter */}<ComposerPanel status={<ComposerStatusTab branch="release/2.0" project="boardui" context={82} />}/>
{/* No tab at all */}<ComposerPanel status={null} />メンションとコマンド
triggers を渡すとプロンプトは TokenInput になります。@ でファイル、/ でコマンドのメニューがカーソル位置に開き、選んだ項目は分割できないチップになります。Backspace でまるごと削除でき、取り消しで戻せます。プロンプトは引き続き文字列を送ります。onSubmit は [@label](type:value) のようなテキストを受け取り、fromText でトークンに戻せます。トークン入力は単体の無料コンポーネントでもあります。
import { ComposerPanel } from "@/components/application/composer-panel/composer-panel";import { fromText } from "@/components/base/token-input/token-input";
const triggers = [ { char: "@", type: "file", title: "Files", items: files }, { char: "/", type: "command", title: "Commands", boundary: "start", tone: "accent", items: commands },];
<ComposerPanel triggers={triggers} onSubmit={(text) => { // "Review [@sidebar.tsx](file:components/sidebar.tsx)" const value = fromText(text); // text and { type, value, label } tokens send(value); }}/>接続方法
プロンプトは10行までの時間でラインを成長させるtextareaです。 送信とShift+Enterを入力すると、行が破綻します。 onSubmit 制御解除時にテキストとフィールドが消去されます。 disabled ターンが飛行中、グレーは送信され、 inputRef 焦点のための分野に達する。
const [draft, setDraft] = useState("");const inputRef = useRef<HTMLTextAreaElement>(null);
<ComposerPanel value={draft} onValueChange={setDraft} onSubmit={(message) => send(message)} // Enter sends, Shift+Enter breaks the line disabled={waiting} placeholder="Hi, what do you need today?" inputRef={inputRef}/>添付ファイル
同じカードは、プロンプトの上の56pxファイルタイルのストリップを運びます。各アップロードリングをファイルランス中に描画します。 タイル、ストリップ、およびシーケンシャルアップロードキューには、独自のページがあります。