The container V2 offers significant improvements from the initial container and will continue to have the most up-to-date features and changes. 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.

## Usage

Import the module in your HTML page with the following code:

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

Embed the module with the following tag:

    <agent-assist-ui-modules-v2>

### UI module connector

Unlike V1, you must initialize the UI module connector separately in V2. Decoupling the connector from the container allows for greater integration flexibility. For the setup, refer to [UI modules connector](https://docs.cloud.google.com/agent-assist/docs/ui-modules#implement_the_ui_module_connector). Many of the properties on the V1 container apply only to the UI module connector.

### Localization

The V2 Container supports localized languages. To load the container in a specific language, prepend the locale code to the script path:

Example for Japanese:

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

If no locale is specified, the container defaults to English (`en`), loaded from the root path:
`html
<script src="https://www.gstatic.com/agent-assist-ui-modules/v2/container.js"></script>`

Supported locales:

- Arabic (`ar`)
- Chinese (Simplified) (`zh_cn`)
- Croatian (`hr`)
- English (Australia) (`en_au`)
- English (Canada) (`en_ca`)
- English (United Kingdom) (`en_gb`)
- Filipino (`fil`)
- French (`fr`)
- French (Canada) (`fr_ca`)
- German (`de`)
- Hindi (`hi`)
- Hungarian (`hu`)
- Italian (`it`)
- Japanese (`ja`)
- Korean (`ko`)
- Malay (`ms`)
- Norwegian (`no`)
- Polish (`pl`)
- Portuguese (Brazil) (`pt_br`)
- Romanian (`ro`)
- Russian (`ru`)
- Spanish (`es`)
- Swedish (`sv`)
- Thai (`th`)
- Turkish (`tr`)
- Vietnamese (`vi`)

## Attributes

Attributes are string-based component properties which can be set in HTML or using `setAttribute()` in JavaScript.

| Property name | Type | Comment |
|---|---|---|
| features | string | Comma-separated list of Agent Assist suggestion feature keys to render. Supported list: `AGENT_COACHING`, `CONVERSATION_SUMMARIZATION`, `SMART_REPLY`, `KNOWLEDGE_SEARCH`, `PROACTIVE_GENERATIVE_KNOWLEDGE_ASSIST`. Ignored if `use-configured-features` is set to `true`. |
| use-configured-features | [BooleanString](https://docs.cloud.google.com/agent-assist/docs/ui-modules-container-v2#BooleanString) | Whether to dynamically load the suggestion features configured on the conversation profile instead of hardcoding them in `features`. Defaults to `"false"`. |
| disabled-features | string | Comma-separated list of suggestion features to exclude when `use-configured-features` is `"true"`. Example: `"SMART_REPLY,CONVERSATION_SUMMARIZATION"`. |
| session-id | string | Optional session ID for non-conversation-based usage, such as with Generative knowledge assist. |
| show-header | [BooleanString](https://docs.cloud.google.com/agent-assist/docs/ui-modules-container-v2#BooleanString) | Whether to show the Agent Assist branding header. Defaults to `"false"`. |
| show-dark-mode-toggle | [BooleanString](https://docs.cloud.google.com/agent-assist/docs/ui-modules-container-v2#BooleanString) | Whether to show the toggle for dark mode versus light mode. Defaults to `"true"`. |
| namespace | string | Optional namespace limit. Only needed if implementing multiple UI module instances on a single page. |
| handoff-summarization-enabled | [BooleanString](https://docs.cloud.google.com/agent-assist/docs/ui-modules-container-v2#BooleanString) | Whether to automatically trigger conversation summarization for when an existing conversation is initialized. Defaults to `"false"`. |

## Inputs

Inputs are JavaScript objects or other complex property types which must be assigned on the element instance directly:

    const el = document.querySelector('agent-assist-ui-modules-v2');
    el.propertyName = value;

| Property name | Type | Comment |
|---|---|---|
| knowledgeAssistCardConfig | [KnowledgeAssistV2Config](https://docs.cloud.google.com/agent-assist/docs/ui-modules-container-v2#KnowledgeAssistV2Config) | Optional configurations for Generative Knowledge Assist cards, including copying/pasting answers and customizing article link targets. |

## Types

See the following section for the custom types used by the component.

### BooleanString

    "true" | "false"

### KnowledgeAssistV2Config

    interface KnowledgeAssistV2Config {
      /** Configuration for how suggested article links are opened. */
      articleLinkConfig?: {
        /** Whether to open the article in a new tab or in a popup window. Defaults to 'blank' (new tab). */
        target?: "blank" | "popup";
        /** Options to configure the popup's size and location. */
        popupWindowOptions?: string;
        /** The field name on the document metadata if a separate article link source is provided. */
        linkMetadataKey?: string;
      };
      /** Whether to show the Copy Answer button on suggestions. */
      showCopyAnswer: boolean;
      /** Whether to show the Paste Answer button on suggestions. */
      showPasteAnswer: boolean;
    }