カスタム イベントとカスタム UI モジュール コネクタ

Agent Assist UI モジュールとそのコネクタ間のすべての通信は、カスタム イベントを介して行われます。UI モジュール コネクタは、エージェント デスクトップと UI モジュール間のイベントを容易にします。

たとえば、エージェント アシストの提案が届くと、UI モジュール コネクタ サービスは analyze-content-received イベントを UI モジュールにディスパッチします。モジュールはこのようなイベントをサブスクライブします。

カスタム イベントの詳細

UI モジュール イベントとそのペイロードの完全なリストについては、UI モジュール イベント API ドキュメントをご覧ください。

カスタム イベントを手動でディスパッチするには、次の構文を使用します。

    dispatchAgentAssistEvent('event_name', {
      detail: event_payload,
    });

次の例は、analyze-content-received イベントをディスパッチする方法を示しています。

if (newMessageFromHumanAgent) {
  dispatchAgentAssistEvent('analyze-content-received', {
    detail: {
      participantRole: 'HUMAN_AGENT',
      request: {
        textInput: {text: newMessageFromHumanAgent},
        messageSendTime: new Date().toISOString()
      }
    }
  });
}

カスタム イベントをディスパッチすると、UI モジュール コネクタ サービスに次の内容が表示されます。

    this.api.analyzeContent(...).then(function (response) {
      dispatchAgentAssistEvent('analyze-content-response-received', {
       detail: {response: response}});
    });

モジュールには次のように表示されます。

    addAgentAssistEventListener('analyze-content-response-received', function (event) {
      // Use the AnalyzeContent response to render suggestions in the UI.
    });

カスタム イベントを手動でサブスクライブするには、次の構文を使用します。

    addAgentAssistEventListener('event_name', function (event) {
      // `event.detail` contains the event payload.
    });

次の例は、カスタム イベント サブスクリプションを示しています。

addAgentAssistEventListener('smart-reply-selected', function (event) {
  var chipContent = event.details;
  // Populate the agent chat box with the selected Smart Reply chip.
});

カスタム UI モジュール コネクタ

カスタム イベントを使用して、独自のカスタム UI モジュール コネクタを作成することもできます。これにより、Agent Assist でサポートされていないエージェント デスクトップに UI モジュールを統合できます。モジュールとコネクタの実装について詳しくは、実装に関するドキュメントをご覧ください。

エージェント アシスト UI モジュールを、事前構築済みの UI モジュール コネクタのないエージェント デスクトップに統合する場合は、カスタム コネクタを作成する必要があります。カスタム UI モジュール コネクタを作成したら、UI モジュールの実装に関するドキュメントに戻り、コネクタの構成とモジュールの実装の詳細を確認してください。カスタム UI モジュール コネクタは、マネージド コンテナまたは個々のモジュールで使用できます。

カスタム UI モジュール コネクタは、次のオペレーションを担当する必要があります。

  1. アクティブな会話を選択するイベントをディスパッチします。これにより、会話とその参加者が初期化されます。イベント名: active-conversation-selected
  2. チャットの会話では、エージェントまたはお客様から新しい発話が登録されるたびにイベントをディスパッチします。イベント名: analyze-content-requested
  3. プライマリ アプリケーションで「ダークモード」が切り替えられたときにモジュール システムに通知します。イベント名: dark-mode-toggled

また、カスタム UI モジュール コネクタは、該当する場合にエージェント デスクトップ UI を更新するために、次のイベントをサブスクライブする必要があります。

  1. スマート リプライの場合、スマート リプライ チップが選択されるたびに、エージェントの入力フィールドを更新します。イベント名: smart-reply-selected。
  2. 生成ナレッジ アシストの場合、ナレッジ アシストの回答が入力ボックスに貼り付けられるたびに、エージェントの入力フィールドを更新します。イベント名: knowledge-assist-v2-answer-pasted。

namespace を使用して複数の UI モジュール インスタンスを初期化する

同じページに UI モジュールの複数のインスタンスを読み込むには、エージェント デスクトップに複数の初期化インスタンスが必要です。これらを分離するには、初期化時に namespace 構成オプションを UI モジュールと UIModulesConnector に渡します。

エージェント デスクトップで、異なる会話間でメッセージや提案が共有されている場合は、このオプションを使用します。次に例を示します。

const connector = new UiModulesConnector();
const config = {};
// ...other UI module connector config options
config.uiModuleEventOptions = { namespace: this.recordId }

const containerElement = document.createElement("agent-assist-ui-modules-v2");
// ...other UI modules HTML attributes
containerEl.setAttribute("namespace", this.recordId);