Agent Assist 界面模块与其连接器之间的所有通信都通过自定义事件进行。界面模块连接器有助于在代理桌面和界面模块之间传递事件。
例如,当收到 Agent Assist 建议时,界面模块连接器服务会将 analyze-content-received
事件分派给界面模块,而这些模块会订阅此类事件。
自定义事件详情
如需查看界面模块事件及其载荷的完整列表,请参阅界面模块事件 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() } } }); }
调度自定义事件后,您将在界面模块连接器服务中看到以下内容:
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. });
自定义界面模块连接器
您还可以使用自定义事件来创建自己的自定义界面模块连接器,从而将界面模块集成到不受 Agent Assist 支持的客服桌面中。 如需详细了解如何实现模块和连接器,请参阅实现文档。
如果您要将 Agent Assist 界面模块集成到任何没有预构建界面模块连接器的客服桌面中,则需要编写自定义连接器。创建自定义界面模块连接器后,请返回界面模块实现文档,详细了解如何配置连接器和实现模块。您可以将自定义界面模块连接器与受管理的容器或各个模块搭配使用。
自定义界面模块连接器必须负责以下操作:
- 调度事件以选择活跃对话。这将初始化对话及其参与者。
活动名称:
active-conversation-selected
- 对于聊天对话,每当从代理或客户处注册新话语时,都会调度一个事件。
活动名称:
analyze-content-requested
- 在主应用中切换“深色模式”时通知模块系统。
活动名称:
dark-mode-toggled
此外,自定义界面模块连接器必须订阅以下事件,以便在适用的情况下更新客服人员桌面界面:
- 对于智能回复,每当选择智能回复功能块时,更新代理的输入字段。
活动名称:
smart-reply-selected
。 - 对于生成式知识辅助,每当知识辅助答案粘贴到输入框中时,都会更新客服人员的输入字段。
活动名称:
knowledge-assist-v2-answer-pasted
。
使用 namespace
初始化多个界面模块实例
为了在同一页面上加载多个界面模块实例,客服桌面需要多个初始化实例。为了将它们分开,在初始化时,请将 namespace
配置选项传递给 界面模块和 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);