Tutorial: implementare pulsanti di opzione personalizzati nella chat web

Questo tutorial mostra come si potrebbe sostituire il rendering predefinito di una risposta di opzioni con i propri pulsanti selezionabili personalizzati.

Per una versione completa e funzionante dell'esempio descritto in questa esercitazione, vedi Pulsanti personalizzati per la chat web watsonx Assistant.

Per impostazione predefinita, la chat web visualizza sempre una risposta di opzioni come una serie di pulsanti cliccabili (per 4 o meno opzioni) o come elenco a discesa (per 5 o più opzioni). Questo esempio mostra il rendering predefinito di una risposta di opzioni con 3 opzioni:

Risposta della risposta resa come 3 pulsanti

Per questo tutorial, sostituiremo questo rendering predefinito con pulsanti in stile più ampio:

Risposta della risposta resa come 3 pulsanti in stile personalizzato

Poiché il rendering di una risposta di opzioni non può essere modificato, lo faremo intercettare eventuali risposte delle opzioni in entrata dall'assistente e convertirle in risposte personalizzate (user_defined). Possiamo quindi implementare un rendering personalizzato per queste risposte.

Creare un gestore per l'evento pre:receive. In questo gestore, cercare eventuali risposte option nel payload del messaggio, e convertirle in user_defined risposte.

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

Creare un gestore per l'evento customResponse. Questo gestore rende i pulsanti personalizzati, utilizzando uno stile CardButton personalizzato possiamo definire nel CSS. (è possibile vedere la definizione di questo stile nell'esempio completo.)

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

Nel tuo gestore eventi onLoad, utilizzare il metodo dell'istanza on() per sottoscrivere gli eventi pre:receive e customResponse, registrando i gestori come callback.
```
instance.on({ type: 'customResponse', handler: customResponseHandler });
instance.on({ type: 'pre:receive', handler: preReceiveHandler });
```
Creare un gestore di clic per rispondere quando il cliente clicca su uno dei pulsanti personalizzati. Nel gestore utilizzare il metodo dell'istanza send() per inviare un messaggio all'assistente, utilizzando l'etichetta del pulsante come testo del messaggio.

Inoltre, stiamo aggiungendo la classe CSS personalizzata CardButton--selected al pulsante clicca, cambiando aspetto per mostrare che è stato selezionato. (Questa classe è definita anche nell'esempio completo.)
```
function onClick(messageItem, button, fullMessage, itemIndex) {
  webChatInstance.send({ input: { text: messageItem.label }});
  button.classList.add('CardButton--selected');
}
```
Se l'utente ricarica la pagina o naviga in una pagina diversa, la chat web si ricarica dalla cronologia delle sessioni. Se questo accade, vogliamo preservare lo stato "selezionato" di eventuali pulsanti cliccenti.

Per fare questo, nel gestore onClick, utilizzare il metodo dell'istanza updateHistoryUserDefined per memorizzare una variabile nella cronologia di sessione che indica quale pulsante è stato clicato.
```
webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
```
Poi, nel gestore customResponse, leggere questo valore e utilizzarlo per impostare gli stati iniziali dei pulsanti in qualsiasi risposta personalizzata già nella cronologia delle sessioni.
```
if (fullMessage.history?.user_defined?.selectedIndex === index) {
  button.classList.add('CardButton--selected');
}
```

Per il codice di lavoro completo, consultare i pulsanti personalizzati per watsonx Assistant esempio web chat. L'esempio mostra anche come disabilitare i pulsanti in una risposta personalizzata dopo che il cliente ha inviato un messaggio, che impedisce di utilizzare i pulsanti per inviare un messaggio fuori ordine.