フィードバックのコンポーネント
いま何が起きているかを伝えるコンポーネント。トースト、インラインのアラート、プログレスバーと円形プログレス、スピナー、スケルトン、空の状態。
スピナーは少し待ってから現れ、読めるだけの時間は表示されるので、速い処理でちらつきません。変化はすべてスクリーンリーダーに読み上げられます。
- Alertステータスやフィードバックを伝えるインラインメッセージです。ニュートラルなサーフェス、色付きのアイコン、滑らかに折りたたまれる閉じる操作を備えています。
- Emptyまだ表示するものがない画面のためのプレースホルダーです。アイコン、メッセージ、次の操作を備えています。
- Progressタスクの進み具合を示すバーまたはリングです。更新のたびに滑らかに動き、全体量が不明なときはスライドします。
- Skeleton150ms待ってから表示され、包んだコンテンツと同じサイズになり、何も動かさずにコンテンツをフェードインさせるプレースホルダーです。
- SpinnerApple風の目盛りまたは呼吸するリングで表示する読み込みインジケーターです。表示までの待機と、ちらつかない最短表示時間を設定できます。
- Toastきれいに積み重なり、ホバーで展開し、スワイプで消せる短いメッセージです。読み込み中の状態をその場で成功またはエラーに切り替えます。
Pro ブロックでの利用
これらのコンポーネントで作られた AI プロダクト向けのブロック。
- MarkdownAI の回答向けの Markdown レンダリング。書きかけの記法を見せないストリーミング、コピーできる表、インライン引用に対応します。
- BillingAI 製品のプランと使用量のページ。サイクル途中でのクレジット切れ、日割り計算付きのプラン変更、カードエラーに対応します。
- Diff Reviewエージェントのファイル編集を適用前にレビューする画面。変更ごとの承認と却下、エージェントへ返すコメント、ストリーミング中の編集に対応します。
- API keysAI 製品の API キーページ。一度しか表示されないシークレット、取り消し可能な無効化、猶予期間付きのローテーションに対応します。
- SecurityAI 製品の設定にある「セキュリティ」セクション。セッション、リカバリーコード付きの二要素認証、入力確認を経た削除に対応します。
- SettingsAI 製品の設定ページ。変更があったときだけ現れる保存バー、フィールドのエラー、読み込み中の状態に対応します。