チャット UI コンポーネント
チャットや AI アシスタントの画面を作る部品。アバターと操作付きのメッセージ、角がまとまりリアクションも付く吹き出し、新しいメッセージを追いつつ読み返し中は位置を保つスクローラー、ファイルや画像の添付、日付やイベントのマーカー。
これらは HextaUI Pro の AI ブロックの無料の土台で、Pro ではコンポーザー、ストリーミング、ツール呼び出しなど会話の残りが加わります。
- Attachmentアップロード向けのファイルカードと画像カードです。進捗、状態、操作、カード全体のトリガーに対応し、名前は拡張子を保ったまま表示されます。
- Bubbleバリアント、グループ化された角、リアクション、インタラクティブなコンテンツの余地を備えたチャットのメッセージバブルです。
- Marker日付の区切りやシステムイベントのように、コンテンツの間に置く控えめなメモです。日付と時刻はスティッキーで、「今日」や「昨日」と表示されます。
- Messageアバター、名前、バブル、ステータスを備えたチャットのメッセージ行です。新しいメッセージは送信者の側からせり上がって表示されます。
- Message scroller新しいメッセージに追従し、過去を読み返している間は位置を保ち、見逃した件数をジャンプボタンに表示するチャットのスクロール領域です。
Pro ブロックでの利用
これらのコンポーネントで作られた AI プロダクト向けのブロック。
- Chat ThreadAI チャットの会話ビュー。ストリーミング、編集、再試行される返信と、切り替えられる返信のバージョンに対応します。
- Prompt Input入力に合わせて広がるチャット入力欄。ファイルのアップロード、キャレット位置の @ と / メニュー、返信のストリーミング中に入力したメッセージに対応します。
- Agent Todosエージェントが作業中に保持する計画を、1 ステップ 1 行で表示します。進行中のステップ、失敗したステップ、実行途中の計画変更に対応します。
- Chat Sidebarピン留めしたチャット、プロジェクト、最近の履歴を備えたチャットアプリのサイドバー。その場での名前変更、取り消し可能な削除、返信中のチャットに対応します。
- Code BlockAI の回答向けのコードブロック。ハイライトはストリーミングに追従し、差分は承認または却下でき、コマンドはターミナルで実行されます。
- Diff Reviewエージェントのファイル編集を適用前にレビューする画面。変更ごとの承認と却下、エージェントへ返すコメント、ストリーミング中の編集に対応します。