コンポーザー
スタンドアローンブロックとしてAIチャットテンプレートからAIチャットコンポーザー:作業用アタッチメントとモデルメニューの入力、音声と送信制御、ブランチ、プロジェクト、エージェントモード、コンテクストメーターのステータスバー、およびエージェントが動作している間、コントロールを上回る液体ガラス処理。
57%
インストール
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
ワーキング・ステート
完全な代理店仕事の処置、ループ: AgentThinking ピルの上に考えます, 無料 ComposerLoader 光はそれを軌道にするか、そして GlassComposer アタッチメント、モデル、マイクのコントロールを液体ガラスに定着させます。応答地に帰ると、すべてが消えます。
const [working, setWorking] = useState(false);
{working && <AgentThinking variant="infinity" />}<ComposerLoader active={working}> {/* the controls morph to liquid glass while the agent works */} <GlassComposer glass={working} /></ComposerLoader><StatusBar />メンションとコマンド
triggers を渡すと、ピルの入力欄は 1 行の TokenInput になります。@ でファイル、/ でコマンドのメニューがカーソル位置に開き、選んだ項目はチップになり、Enter で送信します。onSubmit は引き続き [@label](type:value) のように書かれた文字列を受け取り、fromText でトークンに戻せます。
import { Composer } from "@/components/application/ai-chat/ai-chat-composer";import { fromText } from "@/components/base/token-input/token-input";
<Composer triggers={triggers} onSubmit={(text) => { // "Review [@sidebar.tsx](file:components/sidebar.tsx)" send(fromText(text)); // text and { type, value, label } tokens }}/>
{/* GlassComposer and AiChatComposerPreview take triggers too */}<GlassComposer glass={working} triggers={triggers} />パーツ
すべてが別の輸出として出荷されるので、作品は作曲します:カプセル、ステータスバー、組み立てられたプレビュー、およびガラスラッパー。 添付ファイルとモデルメニューは、完全にポップオーバー、プラグイングリッド、およびすべての作業です。
{/* The pill alone - attachment menu, input, model picker, mic, send */}<Composer />
{/* Status row - branch, project folder menu, agent mode, context meter */}<StatusBar />
{/* Both assembled, as in the AI chat template */}<AiChatComposerPreview />