Lernprogramm: Angepasste Antwort als Inhaltskarussell wiedergeben

Dieses Lernprogramm zeigt, wie Sie angepasste Antworten verwenden können, um Informationen in Form eines Inhaltskarussells wiederzugeben.

Eine vollständige, funktionsfähige Version des in diesem Lernprogramm beschriebenen Beispiels finden Sie unter Inhaltskarussell für watsonx Assistant-Web-Chat.

Ein Inhaltskarussell (oder Schieberegler) ist ein Typ von interaktivem Element, das Optionen als verschiebbare Reihe von Folien anzeigt.

watsonx Assistant hat keinen integrierten Antworttyp für Inhaltskarussells. Stattdessen können Sie den Antworttyp user_defined verwenden, um eine angepasste Antwort mit den Informationen zu senden, die Sie anzeigen möchten, und den Web-Chat erweitern, um das Inhaltskarussell mithilfe von JavaScript-Standardbibliotheken wiederzugeben.

Inhaltskarussell im Web-Chat — Inhaltskarussell

Dieses Beispiel zeigt, wie Sie die Swiper-Bibliothek verwenden können, um eine angepasste Antwort als Inhaltskarussell wiederzugeben.

Verwenden Sie im Aktionsschritt, in dem Sie ein Inhaltskarussell erstellen möchten, den JSON-Editor, um eine angepasste user_defined-Antwort zu definieren, die alle Daten enthalten kann, die Sie einschließen möchten. Geben Sie in der Antwort die Daten an, die zum Füllen des Inhaltskarussell erforderlich sind. In diesem Beispiel senden wir Informationen über verschiedene Arten von Kreditkarten, die wir in einer benutzerdefinierten Antwort anzeigen:

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

In diesem Beispiel werden die Karusselldaten in die Antwort user_defined eingeschlossen. Abhängig vom Design Ihres Assistenten besteht eine weitere Option darin, die Daten in Skillvariablen zu speichern, auf die der Web-Chat über das Objekt context zugreifen kann.

Erstellen Sie einen Handler für das Ereignis customResponse. Dieser Handler gibt das Inhaltskarussell unter Verwendung der von der Swiper-Bibliothek definierten Stile wieder. (Die Definitionen dieser Stile finden Sie im vollständigen Beispiel.)

Diese Funktion basiert auch auf einer Helper-Funktion (createSlides()), die im nächsten Schritt erstellt wird. Der vollständige Code für diese Funktion initialisiert auch die Swiper-Bibliothek. Weitere Informationen finden Sie im vollständigen Beispiel.

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

...

}

Erstellen Sie die Helper-Funktion createSlides(), die jede Folie im Inhaltskarussell wiedergibt. Diese Funktion ruft die Werte aus der angepassten Antwort ab (alt, url, title und description) und verwendet sie zum Füllen der HTML für die Folie. (Die vollständige Funktion finden Sie im vollständigen Beispiel.)

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

  ...

  });

Verwenden Sie in Ihrem onLoad-Ereignishandler die on()-Instanzmethode, um das Ereignis customResponse zu subskribieren und die Funktion carouselCustomResponseHandler() als Callback zu registrieren.
```
  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);
      }
    },
  });
```
In diesem Beispiel überprüfen wir die angepasste Eigenschaft user_defined_type der angepassten Antwort und rufen die Funktion carouselCustomResponseHandler() nur auf, wenn der angegebene Typ carousel ist. Diese optionale Prüfung zeigt, wie Sie eine angepasste Eigenschaft verwenden können, um mehrere verschiedene angepasste Antworten zu definieren (jede mit einem anderen Wert für user_defined_type).

Vollständigen Arbeitscode finden Sie im Beispiel Inhaltskarussell für watsonx Assistant-Web-Chat.