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

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

たとえば、Agent Assist の候補が受信されると、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 モジュール コネクタがないエージェント デスクトップに Agent Assist UI モジュールを統合する場合は、カスタムのコネクタを作成する必要があります。カスタム UI モジュールコネクタを作成したら、UI モジュール実装ドキュメントに戻り、コネクタの構成とモジュールの実装について確認してください。カスタム UI モジュール コネクタは、マネージド コンテナまたは個々のモジュールで使用できます。

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

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

また、カスタム UI モジュール コネクタは、必要に応じてエージェント デスクトップ UI を更新するために、次のイベントに登録する必要があります。

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