AIパネルインターフェース
パネルの状態
AIパネルは、動作中にさまざまな状態を表示します：
待機状態（Idle）： 入力を受け付けられる状態です。チャット履歴がない場合は、開始をサポートするための4つの推奨プロンプトが表示されます。推奨プロンプトをクリックすると、入力フィールドに反映されます。プロンプトは入力されますが、自動的には送信されません。
処理中状態（Processing）： AIがリクエストを分析しています。「取得中...」や「分析中...」などのステータスインジケーターが表示されます。
編集状態（Editing）： AIがあなたのプロトタイプをアクティブに修正しています。キャンバスの下部に「ProtoPie AIがコントロールしています」というバナーが表示され、必要に応じてキャンセルできる [停止] ボタンが表示されます。
チャットの挙動
送信されたプロンプトは、チャットエリアの最上部に表示されます
チャット履歴はセッションをまたいで保存されません。タブを閉じるかリセットすると、履歴は消去されます
新しくやり直すには、パネルヘッダーのリセットボタンをクリックします
@ メンションの使用
プロンプト内で特定のレイヤーをメンションするには、@ を入力します。これにより、レイヤー名だけで説明するよりもAIに適切な文脈が提供され、より正確なインタラクションを生成できます。
例：「タップしたときに @ButtonLayer を灰色にする」
応答コントロール
AIが応答した後は、いくつかのオプションを利用できます：
👍 / 👎 フィードバック： 応答の品質を評価し、AIの改善に協力します。
応答をコピー： コードブロックを含む応答内容全体をクリップボードにコピーします。
書き直し： 同じプロンプトに対して異なる応答を再生成します。
最新の応答に対してのみ利用可能です
新しいプロンプトを送信するか、手動で編集を行うと表示されなくなります
AIの応答タイプ
Studio AIは、リクエスト内容に応じて異なる応答フォーマットを提供します：
テキストによる応答
見出し、本文、リンク、インラインコード、引用ブロック、表などのフォーマットに対応した、プレーンテキストによる解説です。説明、ドキュメントの回答、一般的な応答に使用されます。
Mermaid ダイアグラム
フローチャート、ユーザーフロー、またはその他の図を描くようにAIに依頼すると、Mermaid.jsの構文を使用してビジュアルの図を生成できます。フローチャートは、ワークスペース内の既存のオブジェクトとインタラクションに基づいています。ダイアグラムは、以下のオプションを備えたインタラクティブな画像としてレンダリングされます：
コードをコピー： Mermaid.jsのソースコードをコピーします
画像としてダウンロード： レンダリングされたダイアグラムを.svgとして保存します
数式ブロック
ProtoPieの数式専用のコードブロックで、以下のように表示されます：
構文のハイライト表示（シンタックスハイライト）
コピー ボタン
ProtoPieの数式ドキュメントへの 使い方の説明 リンク
コードブロック
言語ラベル、構文のハイライト表示、および コピー ボタンを備えた、一般的なコード例（JSON、JavaScriptなど）です。
リソースカード
AIがドキュメントを参照する際、インタラクティブなリソースカードを表示します：
公式記事： ProtoPieのアイコン、記事のタイトルと階層パス、「公式記事」ラベル
YouTube動画： 動画のサムネイル、「YouTube動画」ラベル
外部リンク： URL付きの地球儀アイコン
複数のリソースがある場合は、ページネーション付きのカルーセルで表示されます。
計画（Plan）ブロック
インタラクションの作成において、AIはその計画プロセスを示します：
計画中： 「計画中...」と表示され、展開可能なコンテンツで詳細な分析が表示されます。
完了時： 「計画済み」に折りたたまれ、チェックマークが表示されます。コンテンツには以下が含まれます：
目標： AIが作成しようとしているもの
構成： 使用される要素
作成順序： ステップバイステップの実行計画
インタラクション： トリガー → レスポンスのマッピング
タスク（Task）ブロック
インタラクション作成の実行プロセスを表示します：
進行中： 回転するアイコンとともに「処理中...」と表示されます
完了： チェックマークとともに「X個のタスクが完了」と表示されます
各タスクには、アクションのタイプ（追加、編集、削除など）と影響を受ける要素が表示されます。チェックマークは完了したタスクを示し、スピナーは進行中のタスクを示します。