addAgentAssistEventListener('analyze-content-response-received', function (event) {
// Use the AnalyzeContent response to render suggestions in the UI.
});
addAgentAssistEventListener('smart-reply-selected', function (event) {
var chipContent = event.details;
// Populate the agent chat box with the selected Smart Reply chip.
});
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["很难理解","hardToUnderstand","thumb-down"],["信息或示例代码不正确","incorrectInformationOrSampleCode","thumb-down"],["没有我需要的信息/示例","missingTheInformationSamplesINeed","thumb-down"],["翻译问题","translationIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2025-09-01。"],[[["\u003cp\u003eCommunication between an Agent Assist UI module and its connector relies on custom events, facilitated by the UI module connector.\u003c/p\u003e\n"],["\u003cp\u003eCustom events are dispatched using the \u003ccode\u003edispatchAgentAssistEvent\u003c/code\u003e function, which sends an event name and a payload to UI modules.\u003c/p\u003e\n"],["\u003cp\u003eUI modules can subscribe to specific custom events using the \u003ccode\u003eaddAgentAssistEventListener\u003c/code\u003e function to receive and process event details.\u003c/p\u003e\n"],["\u003cp\u003eCustom UI module connectors can be created to integrate UI modules into unsupported agent desktops and must handle specific events like \u003ccode\u003eactive-conversation-selected\u003c/code\u003e, \u003ccode\u003eanalyze-content-requested\u003c/code\u003e, and \u003ccode\u003edark-mode-toggled\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eConnectors also need to subscribe to events like \u003ccode\u003esmart-reply-selected\u003c/code\u003e and \u003ccode\u003eknowledge-assist-v2-answer-pasted\u003c/code\u003e to update the agent desktop's UI accordingly.\u003c/p\u003e\n"]]],[],null,["# Custom events and custom UI module connectors\n\nAll communication between an [Agent Assist UI module](/agent-assist/docs/ui-modules) and its connector happens through **custom events** . The **UI module connector** facilitates events between the agent desktop and the UI modules.\n\nFor example, when an Agent Assist suggestion is received, a UI module connector service will dispatch an `analyze-content-received` event to the UI modules, and the modules are subscribed to such events.\n\nCustom event details\n--------------------\n\nFor the full list of UI module events and their payloads, see the [UI module events API documentation](/agent-assist/docs/ui-modules-events-documentation).\n\nTo manually dispatch a custom event, use the following syntax: \n\n dispatchAgentAssistEvent('event_name', {\n detail: event_payload,\n });\n\nThe following example shows how to dispatch the `analyze-content-received` event: \n\n```json\nif (newMessageFromHumanAgent) {\n dispatchAgentAssistEvent('analyze-content-received', {\n detail: {\n participantRole: 'HUMAN_AGENT',\n request: {\n textInput: {text: newMessageFromHumanAgent},\n messageSendTime: new Date().toISOString()\n }\n }\n });\n}\n```\n\nAfter a you dispatch a custom event, you will see the following in the UI module connector service: \n\n this.api.analyzeContent(...).then(function (response) {\n dispatchAgentAssistEvent('analyze-content-response-received', {\n detail: {response: response}});\n });\n\nAnd you will see the following in the module: \n\n addAgentAssistEventListener('analyze-content-response-received', function (event) {\n // Use the AnalyzeContent response to render suggestions in the UI.\n });\n\nTo manually subscribe to a custom event, use the following syntax: \n\n addAgentAssistEventListener('event_name', function (event) {\n // `event.detail` contains the event payload.\n });\n\nThe following example shows a custom event subscription: \n\n```json\naddAgentAssistEventListener('smart-reply-selected', function (event) {\n var chipContent = event.details;\n // Populate the agent chat box with the selected Smart Reply chip.\n});\n```\n\nCustom UI module connectors\n---------------------------\n\nYou can also use custom events to create your own custom UI module connectors, which allow you to integrate the UI modules into an agent desktop that isn't supported by Agent Assist.\nFor more information about implementing modules and connectors, see the\n[implementation documentation](/agent-assist/docs/ui-modules).\n\nIf you're integrating Agent Assist UI modules into any agent desktop without a prebuilt UI module connector, you will need to write a custom one. Once you have created a custom UI module connector, return to the [UI module implementation](/agent-assist/docs/ui-modules#implement_connectors)\ndocumentation for details about configuring your connectors and implementing\nthe modules. You can use a custom UI module connector with either a managed container or with individual modules.\n\nA custom UI module connector must be responsible for the following operations:\n\n1. Dispatching an event to select the active conversation. This will initialize the conversation along with its participants. Event name: `active-conversation-selected`\n2. For chat conversations, dispatching an event whenever a new utterance is registered from the agent or customer. Event name: `analyze-content-requested`\n3. Notifying the module system when 'dark mode' has been toggled in the primary application. Event name: `dark-mode-toggled`\n\nIn addition, a custom UI module connector must subscribe to the following events to update the agent desktop UI where applicable:\n\n1. For Smart Reply, update the agent's input field whenever a Smart Reply chip is selected. Event name: `smart-reply-selected`.\n2. For Generative Knowledge Assist, update the agent's input field whenever a knowledge assist answer is pasted into the input box. Event name: `knowledge-assist-v2-answer-pasted`.\n\nInitialize multiple UI modules instances with `namespace`\n---------------------------------------------------------\n\nTo load multiple instances of the UI modules on the same page, agent desktops need multiple initialization instances. To keep them separate, at initialization, pass a `namespace` configuration option to the [UI modules](/agent-assist/docs/ui-modules-container-documentation#attributes) and the [`UIModulesConnector`](/agent-assist/docs/ui-modules#implement_the_ui_module_connector).\n\nUse this option if you notice messages and suggestions shared between distinct conversations in your agent desktop. For example: \n\n const connector = new UiModulesConnector();\n const config = {};\n // ...other UI module connector config options\n config.uiModuleEventOptions = { namespace: this.recordId }\n\n const containerElement = document.createElement(\"agent-assist-ui-modules-v2\");\n // ...other UI modules HTML attributes\n containerEl.setAttribute(\"namespace\", this.recordId);"]]