チュートリアル: Web チャットでのカスタム・オプション・ボタンの実装

このチュートリアルでは、オプション応答のデフォルト・レンダリングを独自のカスタム・クリック可能ボタンに置き換える方法について説明します。

このチュートリアルで説明されている完全な作業バージョンの例については、 watsonx Assistant Web チャットのカスタム・ボタンを参照してください。

デフォルトでは、Web チャットはオプションの応答を、クリック可能なボタンのセット (4 つ以下のオプションの場合) またはドロップダウン・リスト (5 つ以上のオプションの場合) として常に表示します。以下の例は、3 つのオプションを使用したオプション応答のデフォルト・レンダリングを示しています。

3 つのボタンとしてレンダリングされるオプション応答

このチュートリアルでは、このデフォルト・レンダリングを、より大きいカード・スタイルのボタンに置き換えます。

3 つのカスタム・カード・スタイル・ボタンとしてレンダリングされるオプション応答

オプション応答のレンダリングは変更できないため、アシスタントからのすべての着信オプション応答をインターセプトし、それらをカスタム (user_defined) 応答に変換することによってこれを行います。その後、これらの応答のカスタム・レンダリングを実装できます。

pre:receive イベントのハンドラーを作成します。このハンドラーで、メッセージ・ペイロード内の option 応答を探し、それらを user_defined 応答に変換します。

function preReceiveHandler(event) {
  const message = event.data;
  if (message.output.generic) {
    message.output.generic.forEach(messageItem => {
      if (messageItem.response_type === 'option') {
        messageItem.response_type = 'user_defined';
      }
    })
  }
}

customResponse イベントのハンドラーを作成します。このハンドラーは、CSS で定義できるカスタム CardButton スタイルを使用して、カスタム・ボタンをレンダリングします。 (このスタイルの定義については、完全な例を参照してください。)

function customResponseHandler(event) {
  const { message, element, fullMessage } = event.data;
  message.options.forEach((messageItem, index) => {
    const button = document.createElement('button');
    button.innerHTML = messageItem.label;
    button.classList.add('CardButton');
    button.addEventListener('click', () => onClick(messageItem, button,     fullMessage, index));
    element.appendChild(button);
  });
}

onLoad イベント・ハンドラーで、 on() インスタンス・メソッドを使用して pre:receive イベントおよび customResponse イベントをサブスクライブし、ハンドラーをコールバックとして登録します。
```
instance.on({ type: 'customResponse', handler: customResponseHandler });
instance.on({ type: 'pre:receive', handler: preReceiveHandler });
```
顧客がいずれかのカスタム・ボタンをクリックしたときに応答するクリック・ハンドラーを作成します。ハンドラーで、 send() インスタンス・メソッドを使用して、メッセージ・テキストとしてボタン・ラベルを使用してメッセージをアシスタントに送信します。

さらに、カスタム CSS クラス CardButton--selected をクリックされたボタンに追加し、選択されたことを示すように外観を変更します。 (このクラスは、完全な例でも定義されています。)
```
function onClick(messageItem, button, fullMessage, itemIndex) {
  webChatInstance.send({ input: { text: messageItem.label }});
  button.classList.add('CardButton--selected');
}
```
ユーザーがページを再ロードするか、別のページにナビゲートすると、Web チャットはセッション履歴から再ロードされます。これが発生した場合は、クリックされたすべてのボタンの「選択済み」状態を保持する必要があります。

これを行うには、 onClick ハンドラーで、 updateHistoryUserDefined インスタンス・メソッドを使用して、どのボタンがクリックされたかを示す変数をセッション履歴に保管します。
```
webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
```
次に、 customResponse ハンドラーでこの値を読み取り、それを使用して、セッション履歴に既に存在するカスタム応答のボタンの初期状態を設定します。
```
if (fullMessage.history?.user_defined?.selectedIndex === index) {
  button.classList.add('CardButton--selected');
}
```

完全な作業コードについては、 watsonx Assistant Web チャットのカスタム・ボタンの例を参照してください。この例では、顧客がメッセージを送信した後に、カスタム応答のボタンを無効にする方法も示しています。これにより、ボタンを使用してメッセージを順不同で送信することができなくなります。