UI モジュールとコネクタを実装する

Agent Assist には、カスタマイズ可能なビルド済みの UI コンポーネント モジュールが用意されています。これらのモジュールを使用して、Agent Assist 機能を UI に統合できます。任意のウェブ アプリケーションにモジュールを埋め込んで、エージェント アシストの候補をエージェントに表示できます。モジュールを LivePerson に統合する具体的な手順については、LivePerson チュートリアルをご覧ください。

Agent Assist の機能

以下は、UI モジュール コンポーネントとして実装できるエージェント アシスト機能です。

始める前に

UI モジュールを実装する前に、会話プロファイルを構成します。

UI モジュールを実装する

Agent Assist モジュールを UI に統合する主な方法は 2 つあります。管理対象コンテナ アプローチでは、選択したすべてのエージェント アシスト機能を 1 つのパネルに統合します。インターフェースで特徴の構成をカスタマイズする場合は、特徴を個別にインポートすることもできます。UI コンポーネントとエージェント デスクトップ間の通信は、UI モジュール コネクタによって容易になります。すべての通信は、カスタム イベントのディスパッチを介して行われます。

コンテナ アプローチと個々のコンポーネントはどちらも任意のシステムで使用できますが、Agent Assist には、Genesys Cloud、LivePerson、Twilio、Salesforce で使用するための UI モジュール コネクタのみが用意されています。UI モジュールを他のエージェント システムと統合するには、独自のコネクタを作成する必要があります。詳細については、カスタム UI モジュール コネクタのドキュメントをご覧ください。

ファイルのバージョン

最新バージョンを指定して、gstatic ファイルの最新バージョンを取得します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

正確なバージョンを指定して、gstatic ファイルの特定の安定版を取得します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1.7/container.js"></script>

最新バージョン:

      Container: v1.10
      Common: v1.4
      Knowledge assist: v1.1
      Generative knowledge assist: v2.9
      Smart reply: v1.3
      Summarization: v1.3
      Transcript: v1.2

マネージド コンテナ

マネージド コンテナ アプローチでは、選択したエージェント アシスト機能を 1 つの統合パネルにレンダリングする単一のコンポーネントが統合されます。このパネルでは、コネクタの読み込みやエラー メッセージなど、共有モジュールに関するすべての問題も処理されます。この方法は、モジュールを LivePerson などのサードパーティ エージェント デスクトップに統合する場合や、エージェント アシスト機能が UI にレンダリングされる方法をカスタマイズする必要がない場合におすすめします。

コンテナ コンポーネントが初期化されると、必要なすべての依存関係が読み込まれます。コンテナを初期化するために必要なインポートは、使用している Agent Assist 機能の数に関係なく 1 つだけです。

コンテナ コンポーネントを初期化します。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/container.js"></script>

要素タグ名:

    <agent-assist-ui-modules>

初期化の例:

    const uiModulesEl = document.createElement('agent-assist-ui-modules');
    uiModulesEl.setAttribute('features', 'SMART_REPLY,ARTICLE_SUGGESTION');
    uiModulesEl.setAttribute('conversation-profile', 'projects/my-project/locations/global/conversationProfiles/123');
    uiModulesEl.setAttribute('auth-token', authToken);
    uiModulesEl.setAttribute('channel', 'chat');
    uiModulesEl.setAttribute('custom-api-endpoint', 'https://my-dialogflow-proxy-service.com');
    uiModulesEl.setAttribute('dark-mode-background', '#000000');
    hostElement.appendChild(uiModulesEl);

詳細については、コンポーネント API のドキュメント ページをご覧ください。

個々のコンポーネント

Agent Assist UI モジュールは、1 つのコンテナに統合するのではなく、個別に統合することもできます。この方法は、モジュールをページのさまざまなセクションにレンダリングする必要があるカスタム アプリケーションを使用する場合や、大幅なカスタマイズが必要な場合にのみおすすめします。

この場合、各機能固有の UI モジュールを個別にインポートする必要があります。また、UI モジュール コネクタをインポートして初期化する必要があります。

UI モジュール コネクタを実装する

次のコードをアプリケーションに追加します。これにより、インスタンス化して初期化できるグローバル UiModulesConnector クラスが公開されます。

    <script src="https://www.gstatic.com/agent-assist-ui-modules/v1/common.js"></script>

メソッド:

    constructor(): void;
    init(config: ConnectorConfig): void;
    disconnect(): void;
    setAuthToken(token: string): void;

以下は、コネクタ構成オブジェクトの完全な TypeScript インターフェースの例です。サポートされていないシステムで使用するカスタム UI モジュール コネクタを作成した場合は、agentDesktop を Custom に設定します。次の例は、サポートされているエージェント デスクトップ システムのリストを示しています。

interface ConnectorConfig {
  /** Communication mode for the UI modules application. */
  channel: 'chat'|'voice';

  /** Agent desktop to use. */
  agentDesktop: 'LivePerson' | 'GenesysCloud' | 'SalesForce' | 'GenesysEngageWwe' | 'Custom';

  /** Conversation profile name to use. */
  conversationProfileName: string;

  /** API Connector config. */
  apiConfig: {
    /**
     * Authentication token to attach to outgoing requests. Should be a valid
     * OAuth token for Dialogflow API, or any other token for custom API
     * endpoints.
     */
    authToken: string;

    /**
     * Specifies a custom proxy server to call instead of calling the Dialogflow
     * API directly.
     */
    customApiEndpoint?: string;

    /** API key to use. */
    apiKey?: string;

    /**
     * Additional HTTP headers to include in the Dialogflow/proxy server API
     * request.
     */
    headers?: Array;
  }

  /** Event-based connector config. Set this for voice conversations. */
  eventBasedConfig?: {
    /**
     * Transport protocol to use for updates. Defaults to 'websocket' if none is
     * specified.
     */
    transport?: 'websocket'|'polling';

    /** Event-based library to use (i.e., Socket.io). */
    library?: 'SocketIo';

    /** Endpoint to which the connection will be established. */
    notifierServerEndpoint: string;
  }
}

インスタンス化の例:

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'LivePerson',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  }
});