エージェントの思考

応答が機能している間、チャットコンポーザーの上に座っているエージェントの思考状態。四変種 - 対角波、軌道頭、対面星、および無限の彗星を持つドットグリッド - それぞれが没入ラベルと脱出タイマーでそのインジケータをペアリングします。

価格設定ページヒーローを再設計し、CTAのコピーを締めます。
考え中0.0s
57%

インストール

この loader コンポーネントを CLI または手動で追加できます。

ダークモード対応:この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add agent-thinking

共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー&ペーストの例は、標準のインポートを使います。

ドット波

斜めの波面に交差する3×3ドットグリッド - 明るいバンドは左上、フェードトレイルで右下にグライドし、ビート後に再入力します。 デフォルトのバリアント。

考え中0.0s
<AgentThinking variant="wave" />

ドットスピン

明るい頭を横切って同じグリッドで、コメットテールを横切る - スピンナーグリフなしで安定した回転として読みます。

考え中0.0s
<AgentThinking variant="spin" />

スターズ

5つの4点のスパークルズは、ストガーの上に入る。 デフォルトは微妙なトーンにするため、ドットグリッドよりも静かに読みます。

考え中0.0s
<AgentThinking variant="stars" />

インフィニティ

コメットトレイルは、ファイントラックの上に図を貼り付ける - 開始または終了なしの連続運動、長時間のエージェントの作業のために。

考え中0.0s
<AgentThinking variant="infinity" />

ラベル、トーン、タイマー

すべての variant は同じオプションを共有します。 label ステータスコピーをセットします。 showTimer elapsed秒を切り替えます。 shimmer 旅行のハイライトをトグルし、 tone per-variant のデフォルト色を上書きします。すべての動きは静的な状態に下がります prefers-reduced-motion.

ドキュメントを検索する0.0s
考え中
考え中0.0s
{/* Status copy and elapsed timer */}<AgentThinking variant="spin" label="Searching the docs" /><AgentThinking variant="wave" showTimer={false} /> {/* Tone defaults per variant (stars is subtle); override with `tone` */}<AgentThinking variant="infinity" tone="accent" /> {/* Static label instead of the traveling shimmer */}<AgentThinking variant="wave" shimmer={false} />