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 模組連接器，將 UI 模組整合至 Agent Assist 不支援的客服人員桌面。 如要進一步瞭解如何導入模組和連接器，請參閱導入說明文件。
如果將 Agent Assist UI 模組整合至任何代理程式桌面，但沒有預先建構的 UI 模組連接器，就必須自行撰寫。建立自訂 UI 模組連接器後，請返回 UI 模組實作說明文件，進一步瞭解如何設定連接器及實作模組。您可以將自訂 UI 模組連接器與代管容器或個別模組搭配使用。
自訂 UI 模組連接器必須負責下列作業：
- 將事件分派至選取要啟用的對話。系統會初始化對話和參與者。
活動名稱：
active-conversation-selected - 如果是即時通訊對話，每當系統從服務專員或顧客註冊新語音時，就會傳送事件。
活動名稱：
analyze-content-requested - 在主要應用程式中切換「深色模式」時，通知模組系統。
活動名稱：
dark-mode-toggled
此外，自訂 UI 模組連接器必須訂閱下列事件，才能在適當情況下更新服務專員桌面 UI：
- 如果是智慧回覆，請在選取智慧回覆晶片時，更新代理程式的輸入欄位。活動名稱：
smart-reply-selected。 - 如果是生成式知識輔助，每當知識輔助答案貼到輸入框時，請更新服務專員的輸入欄位。
活動名稱：
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);