Tutoriel: implémentation de boutons d'option personnalisés dans la discussion Web

Ce tutoriel montre comment vous pouvez remplacer le rendu par défaut d'une réponse d'options par vos propres boutons cliquables personnalisés.

Pour une version complète et fonctionnelle de l'exemple décrit dans ce tutoriel, voir Boutons personnalisés pour la discussion Web watsonx Assistant.

Par défaut, la discussion Web affiche toujours une réponse d'options sous la forme d'un ensemble de boutons cliquables (pour 4 options ou moins) ou sous la forme d'une liste déroulante (pour 5 options ou plus). Cet exemple illustre le rendu par défaut d'une réponse d'options avec 3 options:

Pour ce tutoriel, nous allons remplacer ce rendu par défaut par des boutons de style carte plus grands:

Etant donné que le rendu d'une réponse d'options ne peut pas être modifié, nous allons le faire en interceptant les réponses d'options entrantes de l'assistant et en les convertissant en réponses personnalisées (user_defined). Nous pouvons ensuite implémenter un rendu personnalisé pour ces réponses.

1. Créez un gestionnaire pour l'événement pre:receive. Dans ce gestionnaire, recherchez les réponses option dans la charge de message et convertissez-les en réponses 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';
         }
       })
     }
   }
   

2. Créez un gestionnaire pour l'événement customResponse. Ce gestionnaire affiche les boutons personnalisés, à l'aide d'un style CardButton personnalisé que nous pouvons définir dans la feuille de style en cascade. (Vous pouvez voir la définition de ce style dans l'exemple complet.)

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

3. Dans votre gestionnaire d'événements onLoad, utilisez la méthode d'instance on() pour vous abonner aux événements pre:receive et customResponse, en enregistrant les gestionnaires en tant que rappels.

   instance.on({ type: 'customResponse', handler: customResponseHandler });
   instance.on({ type: 'pre:receive', handler: preReceiveHandler });
   

4. Créez un gestionnaire de clics pour répondre lorsque le client clique sur l'un des boutons personnalisés. Dans le gestionnaire, utilisez la méthode d'instance send() pour envoyer un message à l'assistant, en utilisant le libellé du bouton comme texte du message.

   En outre, nous ajoutons la classe CSS personnalisée CardButton--selected au bouton sur lequel vous avez cliqué, en modifiant son apparence pour indiquer qu'elle a été sélectionnée. (Cette classe est également définie dans l' exemple complet.)

   function onClick(messageItem, button, fullMessage, itemIndex) {
     webChatInstance.send({ input: { text: messageItem.label }});
     button.classList.add('CardButton--selected');
   }
   

5. Si l'utilisateur recharge la page ou accède à une autre page, la discussion Web est rechargée à partir de l'historique de la session. Si cela se produit, nous souhaitons conserver l'état "sélectionné" des boutons sur lesquels vous avez cliqué.

   Pour ce faire, dans le gestionnaire onClick, utilisez la méthode d'instance updateHistoryUserDefined pour stocker une variable dans l'historique des sessions qui indique le bouton sur lequel vous avez cliqué.

   webChatInstance.updateHistoryUserDefined(fullMessage.id, { selectedIndex:     itemIndex });
   

   Ensuite, dans le gestionnaire customResponse, lisez cette valeur et utilisez-la pour définir les états initiaux des boutons dans les réponses personnalisées figurant déjà dans l'historique des sessions.

   if (fullMessage.history?.user_defined?.selectedIndex === index) {
     button.classList.add('CardButton--selected');
   }
   

Pour un code de travail complet, voir l'exemple Boutons personnalisés pour la discussion Web watsonx Assistant. L'exemple montre également comment désactiver les boutons dans une réponse personnalisée une fois que le client a envoyé un message, ce qui empêche l'utilisation des boutons pour envoyer un message dans le désordre.