コンポーザーローダー
エージェントが動作している間、チャットコンポーザーをラップするロード状態 - 一定の速度でピルのリムを旅行する虹色の光バンドは、それの後ろに柔らかい咲き出血を伴う鮮明な反応ラインによって導かれます。それをトゲリングし、オフは、全体の効果をフェードアウトするので、コンポーザーは切り替えるのではなく、照明として読みます。
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add composer-loader共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
会話の中で
リアル・ライフ・シーン: ユーザーのメッセージ・ランズ、コンポーザーがライトアップしながら、 AgentThinking それの上に考え、コンポーザーは液体ガラスにモルファムを制御し、その後、応答が到着し、すべてのフェードが戻ってきます。 1つですべてを運転する waiting フラグ - fade-in と fade-out が組み込まれています。
const [waiting, setWaiting] = useState(false);
async function send(message: string) { setWaiting(true); // light fades in, AgentThinking appears await complete(message); setWaiting(false); // reply landed — everything fades out}
{waiting && <AgentThinking variant="infinity" />}<ComposerLoader active={waiting}> <Composer className="bg-transparent shadow-none" /></ComposerLoader>コンポーザー自身
これらのプレビューのカプセルは、 コンポーザー、AIチャットのテンプレートの入力は、独自に出荷されます Pro ブロック: 作業の添付ファイルとモデルメニュー, マイクとコントロールを送信, ステータスバー, 液体ガラス処理 デモの使用. Composer Loaderは、あなたが既に持っている任意のコンポーザーをラップします; 上記の正確な外観のために、この1とペアリング.
チューニング
デフォルトのライトは、調整されたハウススタイルです。 colors カプセルを渡る4つの停止を広げて下さい、 arc バンドが占有するリムの量を設定します。 bloom そして、 bloomStrength 軽い傷が内側にどれだけ遠くに形づけ、 speed 1周秒です。バンドは一定の速度で旅行し、エンドキャップの周りの曲がります。動きは下を止めます prefers-reduced-motion.
{/* Everything ships tuned; override per surface as needed */}<ComposerLoader colors={["#5eead4", "#46baec", "#e633a4", "#00faa7"]} speed={4.5} // seconds per lap arc={120} // how much of the rim the band occupies intensity={0.7} bloom={16} // how far the light bleeds inward, px bloomStrength={0.3} reverse={false} radius={26} // omit for a full pill> ...</ComposerLoader>