Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

实现界面模块和连接器

Agent Assist 提供了一组预构建的、可自定义的界面组件模块，您可以使用这些模块将 Agent Assist 功能集成到界面中。您可以将模块嵌入到任何 Web 应用中，以便向客服人员显示 Agent Assist 建议。如需了解有关如何将模块集成到 LivePerson 中的具体说明，请参阅 LivePerson 教程。

Agent Assist 功能

以下是可以作为界面模块组件实现的 Agent Assist 功能。

准备工作

在实现界面模块之前，请先配置对话配置文件。

实现界面模块

根据您使用的 Agent Assist 功能选择界面模块：

特性	界面模块示例
辅助智能体、对话总结	辅助代理、转写文稿
AI 教练、（主动）生成式知识助理、智能回复、对话摘要	Container V2、智能回复、转写

所有界面模块都可以与任何客服桌面平台搭配使用，但 Agent Assist 仅为 Genesys Cloud、LivePerson、Twilio 和 Salesforce 提供开源界面模块集成。如需将界面模块与其他任何客服人员桌面平台集成，您必须创建自己的集成。

界面模块连接器有助于在界面组件、客服人员桌面和 Agent Assist 后端之间进行通信。所有客户端通信都通过调度自定义事件进行。

辅助智能体

配套代理是一个组件，可在代理桌面中嵌入交互式配套代理。配套代理功能取代了大多数其他 Agent Assist 功能，但其界面模块包含一些补充功能，例如对话总结。因此，您无需将容器与配套代理界面模块一起使用。

如需了解详情，请参阅配套代理 API 文档页面。

功能容器

容器是一个单一组件，可在统一的响应式面板中呈现您选择的非辅助代理 Agent Assist 功能。如果您使用 AI 指导、生成式知识辅助（主动）、智能回复或对话总结，请使用此容器。

如需了解详情，请参阅 Container V2 API 文档页面。

各个组件

您可以单独集成部分 Agent Assist 功能，也可以与配套代理或容器一起集成。如果您的客服桌面处理语音对话，您通常会添加“转写”组件。只有在您使用自定义应用（其中模块必须在网页的不同部分呈现）或需要进行大量自定义时，我们才建议使用其他各个组件。例如，您可能希望将智能回复模块直接放置在聊天显示下方。

在这种情况下，您需要单独导入所选的特定于功能的界面模块。此外，您还必须导入并初始化界面模块连接器。

文件版本

通过指定最新版本来检索 gstatic 文件的最新版本：

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

通过指定确切版本来检索特定稳定版本的 gstatic 文件：

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

实现界面模块连接器

除非您使用的是容器版本 1，否则您必须实现界面模块连接器才能使用界面模块。将以下代码添加到您的应用，以公开可随后实例化和初始化的全局 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 接口。如果您已创建自定义界面模块连接器以用于不受支持的系统，请将 agentDesktop 设置为 Custom。以下示例提供了一份支持的客服人员桌面系统列表。

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

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

  /** Optional desktop source for metric tracking. */
  agentDesktopSource?: string;

  /** 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. Required for voice/omnichannel conversations and some features of chat conversations. */
  eventBasedConfig?: {
    /** Transport protocol to use for updates. Defaults to 'websocket'. */
    transport?: string;

    /** Event-based library to use. */
    library?: 'SocketIo';

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

    /** Additional Socket.io connect options. */
    socketIoConnectOpts?: any;

    /** Options to retry initial Socket.io connection in case of failure. */
    backOffOpts?: {
      initialDelay: number;
      maxDelay: number;
      maxAttempts: number;
      connectionTimeout: number;
    };
  }

}

实例化示例：

const connector = new UiModulesConnector();

connector.init({
  channel: 'chat',
  agentDesktop: 'Custom',
  conversationProfileName: 'projects/my-project/locations/global/conversationProfiles/123',
  apiConfig: {
    authToken: 'abc123',
    customApiEndpoint: 'https://my-dialogflow-proxy-server.com',
  },
  eventBasedConfig: {
    notifierServerEndpoint: 'https://my-notifier-server-endpoint.com',
    transport: 'websocket',
    library: 'SocketIo',
  }
});

价格免责声明

如果您使用界面模块，则需要支付相关底层服务的费用，包括：