容器

此页面包含有关实现界面模块的容器方法的 API 文档。以下是您可以作为组件在容器中实现的 Agent Assist 功能。

版本 2

与初始容器相比，容器 v2 有了显著改进。为确保客服人员始终可以获得最具影响力的建议和关键工具，版本 2 采用响应式显示，其中包含动态面板和统一的建议 Feed。此版本还通过将 界面模块连接器与容器分离，提供了更高的集成灵活性。

从版本 1 升级到版本 2

从容器 v1 升级到 v2 需要初始化界面连接器。界面连接器配置使用之前作为 HTML 属性传递给 <agent-assist-ui-modules> 元素的相同键和值。

在开始升级之前，请注意以下详细信息：

  • 自定义 HTML 元素名称必须为 <agent-assist-ui-modules-v2>。
  • features 属性是 <agent-assist-ui-modules-v2> HTML 元素（例如 CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY）的必需属性。
  • 在从界面模块 v1 升级到 v2 的过程中，Agent Assist 工程团队已将之前指定为 HTML 属性的值移至 UI 模块连接器配置。
  • 连接器配置不需要 features 字符串。

用法

使用以下代码在 HTML 页面中导入模块：

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

使用以下标记嵌入模块：

<agent-assist-ui-modules-v2>

属性

属性名称 类型 评论
功能 字符串 以英文逗号分隔的要呈现的 Agent Assist 建议功能键的列表。示例：“SMART_REPLY, CONVERSATION_SUMMARIZATION”
api-headers 字符串 要包含在 Dialogflow API 调用中的其他标头。示例：“Content-Type:application/json, Accept:application/json”
conversation-profile 字符串 要使用的对话配置文件的名称。
客服桌面 AgentDesktop 要集成的客服人员桌面软件。
auth-token 字符串 用于 API 调用的身份验证令牌。
api-key 字符串 用于 API 调用的可选 API 密钥。
频道 CommunicationChannel 相应应用使用的通信渠道（即时通讯、语音或全渠道）。
custom-api-endpoint 字符串 要使用的可选自定义 API 端点（如果界面模块配置了代理服务器）。
主题 'dark' | 'light' 要使用的颜色主题。
show-header BooleanString 是否显示 Agent Assist 建议标题。
深色模式背景 字符串 用于深色模式的背景颜色。如果未指定任何值，系统会为主要支持的客服人员桌面提供默认值。
notifier-server-endpoint 字符串 用于基于事件的对话的通知程序服务器端点。
基于事件的传输 EventBasedTransport 用于基于事件的对话的传输协议。
基于事件的库 EventBasedLibrary 用于基于事件的对话的库。
oauth-client-id 字符串 用于隐式身份验证的可选 OAuth 客户端 ID，用于某些代理桌面配置 (Genesys Cloud)。
redirect-uri 字符串 身份验证后要前往的可选重定向 URI，用于某些代理桌面配置 (Genesys Cloud)。
genesys-cloud-区域 字符串 Genesys Cloud 的可选区域，默认为 mypurecloud.com。

用法

属性是基于字符串的组件属性，可以通过以下方式进行设置：

直接从 HTML 模板中：

<element-selector property-name="value">

在 JavaScript 代码中：

var el = document.querySelector('element-selector');
el.setAttribute('property-name', 'value');

输入

属性名称 类型 评论
socketIoConnectOpts SocketIoConnectOpts 其他 Socket.io 连接选项。
config UiModuleContainerConfig 用于定义模块特定配置的配置对象。

用法

输入通常是 JavaScript 对象或其他复杂属性类型，必须直接在元素实例上分配：

const el = document.querySelector('element-selector');
el.propertyName = value;

类型

如需了解该组件使用的自定义类型，请参阅以下部分。

AgentDesktop

"LivePerson" | "GenesysCloud" | "SalesForce" | "Custom"

CommunicationChannel

"chat" | "voice" | "omnichannel"

BooleanString

"true" | "false"

EventBasedTransport

"websocket" | "polling"

EventBasedLibrary

"SocketIo"

SocketIoConnectOpts

interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {
  auth: {
    token: string;
  };
  withCredentials?: boolean;
}

UiModuleContainerConfig

interface UiModuleContainerConfig {
  knowledgeAssistConfig?: {
    articleLinkConfig: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
  };
  knowledgeAssistV2Config?: {
    articleLinkConfig?: {
      /**
       * Whether to open the article in a new tab or as a dialog. Defaults to new
       * tab.
       */
      target?: "blank" | "popup";
      /**
       * Options to configure the popup's size and location. See
       * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.
       */
      popupWindowOptions?: string;
      /**
       * The field name on the document metadata if a separate article link source
       * is provided.
       */
      linkMetadataKey?: string;
    };
    showCopyAnswer: boolean;
    showPasteAnswer: boolean;
  };
  summarizationConfig?: {
    /**
     * Optional callback that can be used to save the generated summary to an
     * external source.
     */
    onSaveSummary?: (
      summary: {
        summary: string;
        conversationDetails: ConversationDetails;
      },
      saveCallbacks: {
        setLoading: () => void;
        setSuccess: (message: string) => void;
        setError: (message: string) => void;
      }
    ) => void;

    /** Whether to show the 'Generate summary' button. */
    showGenerateSummaryButton?: "true" | "false";
  };
}