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

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

## 概要

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

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

#### **主な用途**

* Yes/No の選択肢を提示して会話をスムーズに進める
* ユーザーが次に聞きたいことを誘導する
* よくある質問や深掘り質問を即座に送信させる

## 仕様

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

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

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

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

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

## 設定方法（Chatbot / SpeakAPI）

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

#### 設定例

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

## 表示イメージ

![](/files/ezuOkyWRA6DgXuQKUPdz)

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

### フルビュー

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

![](/files/p8JIxWjonfq10305WA21)

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

![](/files/o0RMd5kCjQfaiFXdyEQl)

### オーバーレイ

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

![](/files/cgvtu5NMy7nDDZbwJMVG)

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

![](/files/PwTViquGtxoZ7i54E0aG)

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

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

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

* `dhx-suggested-responses-container` : サジェステッドレスポンスを表示するコンテナ
* `dhx-suggested-response-button` : サジェステッドレスポンスのボタン本体

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

ダーク背景向け

![](/files/D7TQu6Ck8ciQjzbkuwri)

```css
  .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;
  }
```

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

![](/files/VXPrV68Sjqixxv5zUwTW)

```css
  .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個前後が最も使いやすいです。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.digitalhumans.jp/ops/experience/suggested-responses.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.