Tutorial: renderizando uma resposta customizada como um carrossel de conteúdo

Este tutorial mostra como você pode usar respostas customizadas para renderizar informações na forma de um carrossel de conteúdo

Para obter uma versão de trabalho completa do exemplo descrito neste tutorial, consulte Carrossel de conteúdo para watsonx Assistant bate-papo da web.

Um carrossel de conteúdo (ou régua de controle) é um tipo de elemento interativo que mostra opções como uma série rolável de slides.

watsonx Assistant não tem um tipo de resposta integrado para carrosséis de conteúdo. Em vez disso, é possível usar o tipo de resposta user_defined para enviar uma resposta customizada com as informações que você deseja mostrar e estender o bate-papo da Web para renderizar o carrossel de conteúdo usando bibliotecas JavaScript padrão..

Carrossel de conteúdo no bate-papo da web — Carrossel de conteúdo

Este exemplo mostra como é possível usar a biblioteca Swiper para renderizar uma resposta customizada como um carrossel de conteúdo

Na etapa de ação na qual você deseja criar um carrossel de conteúdo, use o editor JSON para definir uma resposta customizada do user_defined, que pode conter quaisquer dados que você deseja incluir Dentro da resposta, especifique os dados que são necessários para preencher o carrossel de conteúdo. Neste exemplo, estamos enviando informações sobre vários tipos de cartões de crédito, que são exibidos em uma resposta personalizada:

{
  "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"
    }
  ]
}

Neste exemplo, nós estamos incluindo os dados de carrossel dentro da resposta user_defined Dependendo do design de seu assistente, outra opção seria armazenar os dados em variáveis de qualificação que podem ser acessados por bate-papo da web do objeto context.

Crie um manipulador para o evento customResponse. Esse manipulador renderiza o carrossel de conteúdo usando os estilos definidos pela biblioteca Swiper. (É possível ver as definições desses estilos no exemplo completo.)

Esta função também depende de uma função auxiliar (createSlides()), que será criada na próxima etapa. O código completo para essa função também inicializa a biblioteca Swiper. Para obter mais informações, consulte o exemplo completo

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

...

}

Crie a função auxiliar createSlides() que renderiza cada slide no carrossel do conteúdo. Essa função recupera os valores da resposta customizada (alt, url, title e description) e os usa para preencher o HTML para o slide. (Para a função completa, consulte o exemplo completo.)

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>
  `;

  ...

  });

Em seu manipulador de eventos onLoad, use o método da instância on() para assinar o evento customResponse, registrando a função carouselCustomResponseHandler() como o retorno de chamada.
```
  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);
      }
    },
  });
```
Neste exemplo, estamos verificando a propriedade user_defined_type customizada da resposta customizada e chamando a função carouselCustomResponseHandler() somente se o tipo especificado for carousel.. Esta verificação opcional mostra como você pode usar uma propriedade customizada para definir várias respostas customizadas diferentes (cada uma com um valor diferente para user_defined_type)...

Para obter o código de trabalho completo, consulte o exemplo de Carrossel de conteúdo para watsonx Assistant bate-papo da web.