Tutoriel: Rendu d'une réponse personnalisée en tant que carrousel de contenu

Ce tutoriel montre comment utiliser des réponses personnalisées pour afficher des informations sous la forme d'un carrousel de contenu.

Pour une version complète et opérationnelle de l'exemple décrit dans ce tutoriel, voir Content carousel for watsonx Assistant web chat.

Un carrousel de contenu (ou curseur) est un type d'élément interactif qui affiche les options sous la forme d'une série de diapositives à défilement.

watsonx Assistant ne possède pas de type de réponse intégré pour les carrousels de contenu. A la place, vous pouvez utiliser le type de réponse user_defined pour envoyer une réponse personnalisée avec les informations que vous souhaitez afficher et étendre la discussion Web pour afficher le carrousel de contenu à l'aide des bibliothèques JavaScript standard.

Carrousel de contenu dans la discussion Web — Carrousel de contenu

Cet exemple montre comment utiliser la bibliothèque Swiper pour afficher une réponse personnalisée en tant que carrousel de contenu.

Dans l'étape d'action à laquelle vous souhaitez créer un carrousel de contenu, utilisez l'éditeur JSON pour définir une réponse personnalisée user_defined, qui peut contenir toutes les données que vous souhaitez inclure. Dans la réponse, indiquez les données requises pour remplir le carrousel de contenu. Dans cet exemple, nous envoyons des informations sur différents types de cartes de crédit, que nous affichons dans une réponse personnalisée:

{
  "generic": [
    {
      "user_defined": {
        "carousel_data": [
          {
            "alt": "everyday card",
            "url": "lendyr-everyday-card.jpg",
            "title": "The Everyday Card",
            "description": "$300 bonus plus 5% gas station cash back offer. Earn 2% cash back on all other purchases."
          },
          {
            "alt": "preferred card",
            "url": "lendyr-preferred-card.jpg",
            "title": "The Preferred Card",
            "description": "$300 bonus plus 5% gas station cash back offer. Earn 5% cash back on all other purchases."
          },
          {
            "alt": "topaz card",
            "url": "lendyr-topaz-card.jpg",
            "title": "The Topaz Card",
            "description": "$90 Annual fee. Earn 120,000 bonus points. Earn additional points on every purchase."
          }
        ],
        "user_defined_type": "carousel"
      },
      "response_type": "user_defined"
    }
  ]
}

Dans cet exemple, nous incluons les données de carrousel dans la réponse user_defined. Selon la conception de votre assistant, une autre option consiste à stocker les données dans des variables de compétence accessibles par la discussion Web à partir de l'objet context.

Créez un gestionnaire pour l'événement customResponse. Ce gestionnaire affiche le carrousel de contenu à l'aide des styles définis par la bibliothèque Swiper. (Vous pouvez voir les définitions de ces styles dans l'exemple complet.)

Cette fonction repose également sur une fonction auxiliaire (createSlides()), que nous créerons à l'étape suivante. Le code complet de cette fonction initialise également la bibliothèque Swiper. Pour plus d'informations, voir l'exemple complet.

function carouselCustomResponseHandler(event, instance) {
  const { element, message } = event.data;

  element.innerHTML = `
    <div class="Carousel">
      <div class="swiper">
        <div class="swiper-wrapper"></div>
      </div>
      <div class="Carousel__Navigation" >
        <button type="button" class="Carousel__NavigationButton Carousel__NavigationPrevious bx--btn bx--btn--ghost">
          <svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M20 24L10 16 20 8z"></path></svg>
        </button>
        <div class="Carousel__BulletContainer"></div>
        <button type="button" class="Carousel__NavigationButton Carousel__NavigationNext bx--btn bx--btn--ghost">
          <svg fill="currentColor" width="16" height="16" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 8L22 16 12 24z"></path></svg>
        </button>
      </div>
    </div>`;

  // Once we have the main HTML, create each of the individual slides that will appear in the carousel.
  const slidesContainer = element.querySelector('.swiper-wrapper');
  createSlides(slidesContainer, message, instance);

...

}

Créez la fonction auxiliaire createSlides() qui affiche chaque diapositive dans le carrousel de contenu. Cette fonction extrait les valeurs de la réponse personnalisée (alt, url, title et description) et les utilise pour remplir le code HTML de la diapositive. (Pour la fonction complète, voir l'exemple complet.)

carouselData.forEach((cardData) => {
  const { url, title, description, alt } = cardData;
  const cardElement = document.createElement('div');
  cardElement.classList.add('swiper-slide');

  cardElement.innerHTML = `
    <div class="bx--tile Carousel__Card">
      <img class="Carousel__CardImage" src="${url}" alt="${alt}" />
      <div class="Carousel__CardText">
        <div class="Carousel__CardTitle">${title}</div>
        <div class="Carousel__CardDescription">${description}</div>
      </div>

      <a href="https://www.ibm.com" class="Carousel__CardButton bx--btn bx--btn--primary" target="_blank">
        View more details
      </a>

      <button type="button" class="Carousel__CardButton Carousel__CardButtonMessage bx--btn bx--btn--primary">
        Tell me more about this
      </button>
    </div>
  `;

  ...

  });

Dans votre gestionnaire d'événements onLoad, utilisez la méthode d'instance on() pour vous abonner à l'événement customResponse, en enregistrant la fonction carouselCustomResponseHandler() en tant que rappel.
```
  instance.on({
    type: 'customResponse',
    handler: (event, instance) => {
      if (event.data.message.user_defined && event.data.message.user_defined.user_defined_type === 'carousel') {
        carouselCustomResponseHandler(event, instance);
      }
    },
  });
```
Dans cet exemple, nous vérifions la propriété user_defined_type personnalisée de la réponse personnalisée et nous n'appelons la fonction carouselCustomResponseHandler() que si le type spécifié est carousel. Cette vérification facultative montre comment vous pouvez utiliser une propriété personnalisée pour définir plusieurs réponses personnalisées différentes (chacune avec une valeur différente pour user_defined_type).

Pour un code de travail complet, voir l'exemple de carrousel de contenu pour watsonx Assistant discussion Web.