Lernprogramm: Benutzerdefinierte Optionsfelder im Web-Chat implementieren

Dieses Lernprogramm zeigt, wie Sie die Standardwiedergabe einer Optionsantwort durch Ihre eigenen angepassten, per Mausklick steuerbaren Schaltflächen ersetzen können.

Eine vollständige, funktionierende Version des in diesem Lernprogramm beschriebenen Beispiels finden Sie unter Angepasste Schaltflächen für watsonx Assistant-Web-Chat.

Standardmäßig zeigt der Web-Chat eine Optionsantwort immer als Gruppe von anklickbaren Schaltflächen (für 4 oder weniger Optionen) oder als Dropdown-Liste (für 5 oder mehr Optionen) an. Dieses Beispiel zeigt die Standardwiedergabe einer Optionsantwort mit 3 Optionen:

Optionsantwort als drei Schaltflächen wiedergegeben

In diesem Lernprogramm wird diese Standardwiedergabe durch größere Schaltflächen im Kartenstil ersetzt:

Optionsantwort als drei Schaltflächen im benutzerdefinierten Kartenstil wiedergegeben

Da die Wiedergabe einer Optionsantwort nicht geändert werden kann, werden alle eingehenden Optionsantworten vom Assistenten abgefangen und in angepasste Antworten (user_defined) konvertiert. Anschließend können Sie eine angepasste Wiedergabe für diese Antworten implementieren.

Erstellen Sie einen Handler für das Ereignis pre:receive. Suchen Sie in diesem Handler nach option-Antworten in den Nachrichtennutzdaten und konvertieren Sie sie in user_defined-Antworten.

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';
      }
    })
  }
}

Erstellen Sie einen Handler für das Ereignis customResponse. Dieser Handler gibt die angepassten Schaltflächen mithilfe eines benutzerdefinierten CardButton-Stils wieder, den Sie im CSS definieren können. (Die Definition dieses Stils wird im vollständigen Beispielangezeigt.)

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);
  });
}

Verwenden Sie in Ihrem onLoad-Ereignishandler die Instanzmethode on(), um die Ereignisse pre:receive und customResponse zu subskribieren, und registrieren Sie die Handler als Callbacks.
```
instance.on({ type: 'customResponse', handler: customResponseHandler });
instance.on({ type: 'pre:receive', handler: preReceiveHandler });
```
Erstellen Sie einen Klickhandler, um zu antworten, wenn der Kunde auf eine der angepassten Schaltflächen klickt. Verwenden Sie im Handler die Methode der send()-Instanz, um eine Nachricht an den Assistenten zu senden, wobei die Schaltflächenbezeichnung als Nachrichtentext verwendet wird.

Darüber hinaus fügen wir die angepasste CSS-Klasse CardButton--selected zur angeklickten Schaltfläche hinzu und ändern deren Darstellung, um anzuzeigen, dass sie ausgewählt wurde. (Diese Klasse ist auch im vollständigen Beispieldefiniert)
```
function onClick(messageItem, button, fullMessage, itemIndex) {
  webChatInstance.send({ input: { text: messageItem.label }});
  button.classList.add('CardButton--selected');
}
```
Wenn der Benutzer die Seite erneut lädt oder zu einer anderen Seite navigiert, wird der Web-Chat aus dem Sitzungsprotokoll erneut geladen. In diesem Fall soll der Status "ausgewählt" aller angeklickten Schaltflächen beibehalten werden.

Verwenden Sie dazu im Handler onClick die Instanzmethode updateHistoryUserDefined, um eine Variable im Sitzungsprotokoll zu speichern, die angibt, auf welche Schaltfläche geklickt wurde.
```
webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
```
Lesen Sie anschließend im customResponse-Handler diesen Wert und verwenden Sie ihn, um die Anfangsstatus der Schaltflächen in allen bereits im Sitzungsprotokoll vorhandenen angepassten Antworten festzulegen.
```
if (fullMessage.history?.user_defined?.selectedIndex === index) {
  button.classList.add('CardButton--selected');
}
```

Den vollständigen Arbeitscode finden Sie im Beispiel Angepasste Schaltflächen für watsonx Assistant-Web-Chat. Das Beispiel zeigt auch, wie die Schaltflächen in einer benutzerdefinierten Antwort inaktiviert werden, nachdem der Kunde eine Nachricht gesendet hat. Dadurch wird verhindert, dass die Schaltflächen verwendet werden, um eine Nachricht in der nicht richtigen Reihenfolge zu senden.