サジェステッドレスポンス:表示する

サジェステッドレスポンス:表示する

概要

サジェステッドレスポンスは、会話AI（Chatbot / SpeakAPI）から instructions を通じて、フロントエンドに**ユーザーが選択できる返信候補（ボタン）**を提示する機能です。

ユーザーは表示されたボタンをクリックすることで、指定された発話（メッセージ）を即座に送信できます。

主な用途

• Yes/No の選択肢を提示して会話をスムーズに進める

• ユーザーが次に聞きたいことを誘導する

• よくある質問や深掘り質問を即座に送信させる

仕様

サジェステッドレスポンスの構造

suggestedResponses は instructions 内に 配列として指定します。

配列の各要素は サジェステッドレスポンスオブジェクト です。

サジェステッドレスポンスオブジェクト

フィールド	型	必須	説明
label	string	✅	ボタンに表示されるテキスト
utterance	string	✅	クリック時に送信されるメッセージ

設定方法（Chatbot / SpeakAPI）

会話AI 側から返すレスポンスの instructions に suggestedResponses を追加します。

設定例

{
	"instructions": {
		"suggestedResponses": [
		      {"label":"はい","utterance":"はい" },
		      {"label":"いいえ","utterance":"いいえ" },
		      {"label":"詳しく教えて","utterance":"詳しく教えてください" }
		]
	}
}

表示イメージ

サジェステッドレスポンスは、表示モード（フルビュー / オーバーレイ）と、画面サイズ（一般 / スマホ）によって表示位置や見え方が変わります。

フルビュー

一般サイズ：入力欄（マイク・テキスト入力）の右側に表示

スマホサイズ：画面中央上部に表示

オーバーレイ

一般サイズ：オーバーレイの左側に表示

スマホサイズ：画面中央上部に表示

CSS カスタマイズ（見た目の調整）

サジェステッドレスポンスの見た目は、フロントエンド側のCSSで調整できます。

以下のクラス名がボタン表示部分に付与されます。

• dhx-suggested-responses-container : サジェステッドレスポンスを表示するコンテナ

• dhx-suggested-response-button : サジェステッドレスポンスのボタン本体

背景・服装に合わせたボタンカスタマイズ例

ダーク背景向け

  .dhx-suggested-response-button {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .dhx-suggested-response-button:hover {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }

ユニバーサル、アクセント

  .dhx-suggested-response-button {
    background: rgba(94, 106, 210, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 16px rgba(94, 106, 210, 0.15) !important;
  }

  .dhx-suggested-response-button:hover {
    background: rgba(94, 106, 210, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }

動作

1. 会話AI がレスポンス内で instructions.suggestedResponses を返します。

2. フロントエンドが suggestedResponses を解析し、ボタンUIとして表示します。

3. ユーザーがボタンをクリックすると、対応する utterance がユーザー発話として送信されます。

推奨（ベストプラクティス）

• 推奨表示数：3個程度

  • 表示数に制限はありませんが、多すぎると UI が崩れたり、選択肢が多いとユーザーが迷いやすくなるため、3個前後が最も使いやすいです。