チュートリアル: コンテンツ・カルーセルとしてのカスタム応答のレンダリング
このチュートリアルでは、カスタム応答を使用して、コンテンツ・カルーセルの形式で情報をレンダリングする方法を示します。
このチュートリアルで説明する完全な実例については、 watsonx Assistant Web チャットのコンテンツ・カルーセルを参照してください。
コンテンツ・カルーセル (または スライダー) は、スクロール可能な一連のスライドとしてオプションを表示する対話式要素の一種です。
watsonx Assistant には、コンテンツ・カルーセル用の組み込み応答タイプがありません。 代わりに、 user_defined
応答タイプを使用して、表示する情報を含むカスタム応答を送信し、標準の JavaScript ライブラリーを使用してコンテンツ・カルーセルをレンダリングするように Web チャットを拡張することができます。

この例では、 Swiper ライブラリーを使用して、カスタム応答をコンテンツ・カルーセルとしてレンダリングする方法を示します。
-
コンテンツ・カルーセルを作成するアクション・ステップで、JSON エディターを使用して
user_defined
カスタム応答を定義します。この応答には、含める任意のデータを含めることができます。 応答内で、コンテンツ・カルーセルにデータを取り込むために必要なデータを指定します。 この例では、さまざまなタイプのクレジット・カードに関する情報を送信します。この情報はカスタム応答で表示されます。{ "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" } ] }
この例では、
user_defined
応答内にカルーセル・データを組み込みます。 アシスタントの設計によっては、context
オブジェクトから Web チャットでアクセスできるスキル変数にデータを保管するという選択肢もあります。 -
customResponse
イベントのハンドラーを作成します。 このハンドラーは、Swiper ライブラリーによって定義されたスタイルを使用して、コンテンツ・カルーセルをレンダリングします。 (これらのスタイルの定義については、 完全な例を参照してください。)この関数は、次のステップで作成するヘルパー関数 (
createSlides()
) にも依存しています。 この関数の完全なコードは、Swiper ライブラリーも初期化します。 詳しくは、 完全な例を参照してください。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); ... }
-
コンテンツ・カルーセル内の各スライドをレンダリングする
createSlides()
ヘルパー関数を作成します。 この関数は、カスタム応答 (alt
、url
、title
、およびdescription
) から値を取得し、それらを使用してスライドの HTML にデータを取り込みます。 (完全な機能については、 完全な例を参照してください。)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> `; ... });
-
onLoad
イベント・ハンドラーで、on()
インスタンス・メソッドを使用してcustomResponse
イベントをサブスクライブし、carouselCustomResponseHandler()
関数をコールバックとして登録します。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); } }, });
この例では、カスタム応答のカスタム
user_defined_type
プロパティーを検査し、指定されたタイプがcarousel
の場合にのみcarouselCustomResponseHandler()
関数を呼び出します。 このオプションのチェックは、カスタム・プロパティーを使用して、複数の異なるカスタム応答 (それぞれがuser_defined_type
の異なる値を持つ) を定義する方法を示しています。
完全な作業コードについては、 watsonx Assistant Web チャットのコンテンツ・カルーセル の例を参照してください。