仮想エージェント のコンポーネントの開発

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間：6分

    • 仮想エージェント クライアントインターフェイスで入力を収集したり、情報を表示したりするカスタム 仮想エージェントコンポーネントを作成します。

    仮想エージェント コンポーネントのタイプ

    仮想エージェント のコンポーネントを開発するには、仮想エージェント クライアントインターフェイスとやり取りするための特定のプロパティとアクションを追加します。必要なプロパティは、作成するコンポーネントのタイプによって異なります。

    応答コンポーネント

    応答コンポーネントは、ユーザーに情報を提供するだけで、入力を収集したり、ユーザーインタラクションを処理したりすることはありません。たとえば、ユーザー入力を必要とせず、一度だけ会話に含まれるカードコントロールなどです。ユーザー入力を必要としない出力コンポーネントの例としてのカードコントロール

    応答コンポーネントにプロパティを追加して、仮想エージェント サーバーから送信されるデータを処理します。

    表 : 1. 出力コンポーネントのプロパティ
    プロパティ 説明
    controlData トピックの実行時に 仮想エージェント サーバーがコンポーネントに送信する初期データ。

    データタイプ：JSON オブジェクト
    入力コンポーネント

    入力コンポーネントは、情報を表示したり、ユーザー入力を収集したりします。これには、サーバーから送信されるデータを処理するための出力コンポーネントと同じプロパティが含まれていますが、より多くのステータスがあり、ユーザーのインタラクションが必要です。

    表 : 2. 入力コンポーネントのプロパティ
    プロパティ 説明
    controlData トピックの実行時に 仮想エージェント サーバーがコンポーネントに送信する初期データ。

    データタイプ：JSON オブジェクト
    responseValue ユーザーの応答からコンポーネントに送信されるデータ。クライアントから直接、または更新がある場合はサーバーから送信されます。ユーザー入力が必要なコンポーネントでのみ使用します。

    データタイプ：JSON オブジェクト
    forceCloseControl コンポーネントが入力を受け入れることができるかどうかを示すフラグ。true の場合、コントロールは閉じられ、ユーザーは操作できません。クライアントの変更を監視して、この値を更新します。ユーザー入力が必要なコンポーネントでのみ使用します。

    データタイプ：ブール

    このアクションを使用して、ユーザーのインタラクションからデータを発行します。

    表 : 3. 入力コンポーネントのアクション
    アクション 説明
    VA_CONTROL#VALUE_SENT サーバーに送信するクライアントからの応答データ。ユーザー入力が必要なコンポーネントでのみ使用します。

    データタイプ：JSON オブジェクト

    入力コンポーネントのステータス

    入力コンポーネントはデータを受け入れるため、複数のステータスを処理する必要があります。状況フローは一般に次のとおりです。

    1. 仮想エージェント は入力待ちステータスのカスタムコンポーネントを表示します。
    2. ユーザーはコンポーネントとやり取りして入力します。
    3. コンポーネントは、 responseValue プロパティを閉じてサーバーに送信します。
    4. サーバーはサーバー側のロジックを実行し、ユーザーの入力とともにコンポーネントをクライアントに送り返します。
    入力待ち

    ユーザーのインタラクションを待機しているコンポーネントの初期ステータス。controlData プロパティは設定されていますが、forceControlClosed プロパティが false です。この例は、入力待ちステータスのスライダーコンポーネントを示しています。

    入力待ちのコンポーネント。

    この例では、ユーザーが responseValue を指定せず、コントロールがクローズされていない場合、スライダーと入力ボタンが表示されます。

    const {controlClosed, sliderVal, sliderMin, sliderMax} = state;
return (<div class={{"slider-chat": true}}>
    {responseValue ? null :  <Fragment>
    <div class={{"slider-label": true}}>{label}</div>
    {controlClosed ? null : <Fragment>
        <div class={{"slider-container": true}}>
                    <input on-change={onSliderChange} type="range" min={sliderMin} max={sliderMax} value={sliderVal} class={{"slider": true}} />
            <div class={{"slider-value": true}}>
                    {unitIcon && 
                     <div class={{"unit-icon": true}}><img src={unitIcon} /></div>
                     } 
                     {sliderVal} {unitName}
                </div>
        <div class={{"button-container":true}}>
            <now-button variant="primary" label={buttonText || 'Confirm'} />
         </div></div></Fragment>}
    入力の処理

    前の例では、スライダーは now-button コンポーネントを使用しています。このボタンをユーザーがクリックすると、入力が確定され、サーバーに送信されます。ユーザーがボタンをクリックすると、responseValue ペイロードを使用して VA_CONTROL#VALUE_SENT アクションが開始されます。

    'NOW_BUTTON#CLICKED': (data) => {
    const {updateState, dispatch, state: {sliderVal}} = data;
    updateState({controlClosed: true});
    dispatch('VA_CONTROL#VALUE_SENT', {
        value: {
            sliderVal
        }
    }); 
}
    クローズ済み

    クローズされたコンポーネントは、ユーザー入力を受け入れることができなくなります。通常、コンポーネントは次の理由でクローズされます。

    • ユーザーがコンポーネントに応答した。コンポーネントがクローズし、会話が続行される。
    • ユーザーがチャットを終了した。サーバーが応答を待機していない。

    たとえば、スライダーコンポーネントは、クローズ済みステータスのときにのみ元のプロンプトを表示します。

    ユーザー入力を待機していないクローズ済みコンポーネント。

    応答の送信

    ユーザーが応答すると、responseValue プロパティの値を使用して、コントロールが会話のユーザー側に再度表示されます。

    クライアントに送信されるユーザー応答。

    たとえば、スライダーコントロールはこのスニペットを使用して応答を表示します。

    {responseValue && <div className="response-container slider-value">
   {unitIcon && 
   <div className="unit-icon"><img src={unitIcon} /></div>
   } 
   {returnVal} {unitName}
</div>}

    仮想エージェントデザイナー へのコンポーネントの追加

    コンポーネントを開発してインスタンスに展開した後、カスタムコントロールと定義を使用して 仮想エージェントデザイナー に追加します。詳細については、「仮想エージェントのカスタムコントロール」を参照してください。