interfaceUiModuleContainerConfig{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";};}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["わかりにくい","hardToUnderstand","thumb-down"],["情報またはサンプルコードが不正確","incorrectInformationOrSampleCode","thumb-down"],["必要な情報 / サンプルがない","missingTheInformationSamplesINeed","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-09-04 UTC。"],[[["\u003cp\u003eThis document outlines the API for implementing Agent Assist UI modules within a container, including Knowledge Assist, Generative Knowledge Assist, Smart Reply, and Conversation Summarization features.\u003c/p\u003e\n"],["\u003cp\u003eThe UI modules are embedded using the \u003ccode\u003e<agent-assist-ui-modules>\u003c/code\u003e tag, and you can configure various settings using attributes like \u003ccode\u003efeatures\u003c/code\u003e, \u003ccode\u003eapi-headers\u003c/code\u003e, \u003ccode\u003etheme\u003c/code\u003e, and \u003ccode\u003econversation-profile\u003c/code\u003e to customize how it is displayed.\u003c/p\u003e\n"],["\u003cp\u003eAgent Assist features are activated using comma-separated keys, such as \u003ccode\u003e'SMART_REPLY'\u003c/code\u003e, \u003ccode\u003e'CONVERSATION_SUMMARIZATION'\u003c/code\u003e, \u003ccode\u003e'FAQ'\u003c/code\u003e, \u003ccode\u003e'ARTICLE_SUGGESTION'\u003c/code\u003e, or \u003ccode\u003e'KNOWLEDGE_ASSIST_V2'\u003c/code\u003e, within the \u003ccode\u003efeatures\u003c/code\u003e attribute of the component tag.\u003c/p\u003e\n"],["\u003cp\u003eThe container supports different agent desktop integrations, including LivePerson, GenesysCloud, SalesForce, and Custom, through the \u003ccode\u003eagent-desktop\u003c/code\u003e attribute.\u003c/p\u003e\n"],["\u003cp\u003eThe UI module's behavior and presentation can be further customized through the use of inputs such as \u003ccode\u003esocketIoConnectOpts\u003c/code\u003e and \u003ccode\u003econfig\u003c/code\u003e, which provide settings for socket connections and module-specific options.\u003c/p\u003e\n"]]],[],null,["# Container\n\nThis page contains the API documentation for the container method of implementing UI modules. The following are the Agent Assist features that you can implement as components within your container.\n\n- [Knowledge assist](/agent-assist/docs/ui-modules-knowledge-assist-documentation), Keys: `'FAQ'` and `'ARTICLE_SUGGESTION'`\n- [Generative knowledge assist](/agent-assist/docs/ui-modules-knowledge-assist-v2-documentation), Key: `'KNOWLEDGE_ASSIST_V2'`\n- [Smart Reply](/agent-assist/docs/ui-modules-smart-reply-documentation), Key: `'SMART_REPLY'`\n- [Conversation Summarization](/agent-assist/docs/ui-modules-summarization-documentation), Key: `'CONVERSATION_SUMMARIZATION'`\n\nVersion 2\n---------\n\nThe container v2 offers significant improvements from the initial container. To ensure the most impactful suggestions and key tools are always accessible to the agent, version 2 uses a reactive display with dynamic panels and a unified feed of suggestions. This version also offers greater integration flexibility by decoupling the [UI modules connector](/agent-assist/docs/ui-modules#implement_the_ui_module_connector) from the container.\n\n### Upgrade from version 1 to version 2\n\nUpgrading from container v1 to v2 requires you to initialize a UI connector. The UI connector config uses the same keys and values previously passed as HTML attributes to the `\u003cagent-assist-ui-modules\u003e` element.\n\nTake note of the following details before you begin to upgrade:\n\n- The custom HTML element name must be `\u003cagent-assist-ui-modules-v2\u003e`.\n- The `features` attribute is required on the `\u003cagent-assist-ui-modules-v2\u003e` HTML element, for example `CONVERSATION_SUMMARIZATION,KNOWLEDGE_ASSIST_V2,SMART_REPLY`.\n- As part of the upgrade from UI Modules v1 to v2, the Agent Assist engineering team has moved values previously specified as HTML attributes to the [UI modules connector](/agent-assist/docs/ui-modules#implement_the_ui_module_connector) config.\n- The connector config does not need the `features` string.\n\nUsage\n-----\n\nImport the module in your HTML page using the following code: \n\n \u003cscript src=\"https://www.gstatic.com/agent-assist-ui-modules/v2/container.js\"\u003e\u003c/script\u003e\n\nEmbed the module using the following tag: \n\n \u003cagent-assist-ui-modules-v2\u003e\n\nAttributes\n----------\n\n### Usage\n\nAttributes are string-based component properties which can be set in the following ways:\n\nFrom your HTML template directly: \n\n \u003celement-selector property-name=\"value\"\u003e\n\nFrom your JavaScript code: \n\n var el = document.querySelector('element-selector');\n el.setAttribute('property-name', 'value');\n\nInputs\n------\n\n### Usage\n\nInputs are typically JavaScript objects or other complex property types which must be assigned on the element instance directly: \n\n const el = document.querySelector('element-selector');\n el.propertyName = value;\n\nTypes\n-----\n\nSee the following section for the custom types used by the component.\n\n### AgentDesktop\n\n \"LivePerson\" | \"GenesysCloud\" | \"SalesForce\" | \"Custom\"\n\n### CommunicationChannel\n\n \"chat\" | \"voice\" | \"omnichannel\"\n\n### BooleanString\n\n \"true\" | \"false\"\n\n### EventBasedTransport\n\n \"websocket\" | \"polling\"\n\n### EventBasedLibrary\n\n \"SocketIo\"\n\n### SocketIoConnectOpts\n\n interface SocketIoConnectOpts extends SocketIOClient.ConnectOpts {\n auth: {\n token: string;\n };\n withCredentials?: boolean;\n }\n\n### UiModuleContainerConfig\n\n interface UiModuleContainerConfig {\n knowledgeAssistConfig?: {\n articleLinkConfig: {\n /**\n * Whether to open the article in a new tab or as a dialog. Defaults to new\n * tab.\n */\n target?: \"blank\" | \"popup\";\n /**\n * Options to configure the popup's size and location. See\n * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.\n */\n popupWindowOptions?: string;\n /**\n * The field name on the document metadata if a separate article link source\n * is provided.\n */\n linkMetadataKey?: string;\n };\n };\n knowledgeAssistV2Config?: {\n articleLinkConfig?: {\n /**\n * Whether to open the article in a new tab or as a dialog. Defaults to new\n * tab.\n */\n target?: \"blank\" | \"popup\";\n /**\n * Options to configure the popup's size and location. See\n * https://developer.mozilla.org/en-US/docs/Web/API/Window/open#window_features.\n */\n popupWindowOptions?: string;\n /**\n * The field name on the document metadata if a separate article link source\n * is provided.\n */\n linkMetadataKey?: string;\n };\n showCopyAnswer: boolean;\n showPasteAnswer: boolean;\n };\n summarizationConfig?: {\n /**\n * Optional callback that can be used to save the generated summary to an\n * external source.\n */\n onSaveSummary?: (\n summary: {\n summary: string;\n conversationDetails: ConversationDetails;\n },\n saveCallbacks: {\n setLoading: () =\u003e void;\n setSuccess: (message: string) =\u003e void;\n setError: (message: string) =\u003e void;\n }\n ) =\u003e void;\n\n /** Whether to show the 'Generate summary' button. */\n showGenerateSummaryButton?: \"true\" | \"false\";\n };\n }"]]
