@carbon/ai-chat-components 0.10.0 → 0.11.0

package/es/components/chat-shell/src/chat-header.js

@@ -0,0 +1,415 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { __decorate } from 'tslib';
+import { LitElement, nothing, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { carbonElement } from '../../../globals/decorators/carbon-element.js';
+import { iconLoader } from '@carbon/web-components/es/globals/internal/icon-loader.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/overflow-menu/index.js';
+import '../../toolbar/src/toolbar.js';
+import prefix from '../../../globals/settings.js';
+import { PageObjectId } from '../../../testing/PageObjectId.js';
+import { tryFocus } from '../../../globals/utils/focus-utils.js';
+import styles from './chat-header.scss.js';
+
+/*
+ *  Copyright IBM Corp. 2025
+ *
+ *  This source code is licensed under the Apache-2.0 license found in the
+ *  LICENSE file in the root directory of this source tree.
+ *
+ *  @license
+ */
+var CdsAiChatChatHeader_1;
+/**
+ * Chat Header component that wraps the Toolbar component.
+ * Provides a consistent header for chat interfaces with support for
+ * navigation, title, actions, and decorators (like AI labels).
+ *
+ * @element cds-aichat-chat-header
+ * @slot navigation - Navigation controls (e.g., back button, overflow menu)
+ * @slot title - Title and name content (can also use title/name properties)
+ * @slot decorator - Decorative elements like AI labels
+ * @slot fixed-actions - Actions that never overflow (allows passing custom components)
+ */
+let CdsAiChatChatHeader = CdsAiChatChatHeader_1 = class CdsAiChatChatHeader extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array of actions that can overflow into a menu when space is limited.
+         */
+        this.actions = [];
+        /**
+         * Enable overflow behavior for actions.
+         */
+        this.overflow = false;
+        /**
+         * Optional header title text to display.
+         */
+        this.headerTitle = "";
+        /**
+         * Optional name text to display after the title.
+         */
+        this.headerName = "";
+        /**
+         * Type of navigation to display: 'back', 'overflow', or 'none'.
+         */
+        this.navigationType = "none";
+        /**
+         * Label/tooltip text for the back button.
+         */
+        this.navigationBackLabel = "";
+        /**
+         * Label/tooltip text for the overflow menu button.
+         */
+        this.navigationOverflowLabel = "";
+    }
+    /**
+     * Attempts to focus an element if it's focusable and not disabled.
+     * Uses the enhanced tryFocus utility from focus-utils which checks
+     * visibility, accessibility attributes, and proper focusability.
+     *
+     * @param element - The element to attempt to focus
+     * @returns True if focus was successfully set, false otherwise
+     */
+    tryFocusElement(element) {
+        return tryFocus(element);
+    }
+    /**
+     * Attempts to focus buttons within a named slot.
+     * Reduces duplication by centralizing slot querying logic.
+     *
+     * @param slotName - The name of the slot to query
+     * @param selectors - CSS selector string for buttons to find
+     * @returns True if a button was focused, false otherwise
+     */
+    tryFocusSlotButtons(slotName, selectors) {
+        const slot = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`);
+        if (!slot) {
+            return false;
+        }
+        for (const el of slot.assignedElements()) {
+            const button = el.querySelector(selectors);
+            if (button instanceof HTMLElement && this.tryFocusElement(button)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Requests focus on the best available focusable element within the component.
+     * This method implements a generic focus management pattern that can be used
+     * across all web components.
+     *
+     * Priority order:
+     * 1. First enabled button in navigation (either slotted or rendered from properties)
+     * 2. First enabled button in fixed-actions slot (usually close button)
+     * 3. First enabled action button from toolbar (rendered by actions array)
+     * 4. Any other focusable element (last resort)
+     *
+     * @returns True if focus was successfully set, false otherwise
+     */
+    requestFocus() {
+        // Check if navigation is rendered from properties
+        const hasNavigationProps = this.navigationType && this.navigationType !== "none";
+        // Define focus strategies in priority order
+        const focusStrategies = [
+            // 1. Try navigation - either slotted or rendered from properties
+            () => {
+                if (hasNavigationProps) {
+                    // Navigation rendered from properties - query toolbar's navigation slot
+                    const toolbar = this.shadowRoot?.querySelector(`${prefix}-toolbar`);
+                    const navSlot = toolbar?.shadowRoot?.querySelector('slot[name="navigation"]');
+                    if (navSlot) {
+                        // Get the assigned elements from the toolbar's navigation slot
+                        const assignedElements = navSlot.assignedElements();
+                        for (const el of assignedElements) {
+                            // The element itself might be the button (e.g., cds-icon-button)
+                            if (this.tryFocusElement(el)) {
+                                return true;
+                            }
+                            // Or it might be a wrapper div containing the button
+                            const button = el.querySelector(CdsAiChatChatHeader_1.NAV_BUTTON_SELECTORS);
+                            if (button && this.tryFocusElement(button)) {
+                                return true;
+                            }
+                        }
+                    }
+                    return false;
+                }
+                else {
+                    // Navigation slotted - query slot for buttons
+                    return this.tryFocusSlotButtons("navigation", CdsAiChatChatHeader_1.NAV_BUTTON_SELECTORS);
+                }
+            },
+            // 2. Try fixed-actions slot
+            () => this.tryFocusSlotButtons("fixed-actions", CdsAiChatChatHeader_1.BUTTON_SELECTORS),
+            // 3. Try toolbar action buttons
+            () => {
+                const toolbar = this.shadowRoot?.querySelector(`${prefix}-toolbar`);
+                const buttons = toolbar?.shadowRoot?.querySelectorAll(CdsAiChatChatHeader_1.TOOLBAR_ACTION_SELECTOR);
+                return (buttons?.[0] instanceof HTMLElement &&
+                    this.tryFocusElement(buttons[0]));
+            },
+            // 4. Try any focusable element as last resort
+            () => {
+                const focusable = this.shadowRoot?.querySelector(CdsAiChatChatHeader_1.FOCUSABLE_SELECTORS);
+                return (focusable instanceof HTMLElement && this.tryFocusElement(focusable));
+            },
+        ];
+        // Execute strategies until one succeeds
+        return focusStrategies.some((strategy) => strategy());
+    }
+    /**
+     * Renders the overflow menu items.
+     */
+    renderOverflowMenuItems() {
+        return this.navigationOverflowItems?.map((item) => html `
+        <cds-overflow-menu-item
+          @click=${item.onClick}
+          href=${item.href || nothing}
+          target=${item.href ? item.target || "_self" : nothing}
+          ?disabled=${item.disabled}
+          ?danger=${item.danger}
+          danger-description=${item.dangerDescription || nothing}
+          ?divider=${item.divider}
+          data-testid=${item.testId || nothing}
+        >
+          ${item.text}
+        </cds-overflow-menu-item>
+      `);
+    }
+    /**
+     * Checks if back navigation should be rendered.
+     * @returns True if back navigation type is set and icon is provided
+     */
+    shouldRenderBackNavigation() {
+        return this.navigationType === "back" && !!this.navigationBackIcon;
+    }
+    /**
+     * Checks if overflow navigation should be rendered.
+     * @returns True if overflow navigation type is set and items are available
+     */
+    shouldRenderOverflowNavigation() {
+        return (this.navigationType === "overflow" &&
+            !!this.navigationOverflowItems?.length);
+    }
+    /**
+     * Gets the configuration object for overflow menu icon.
+     * @returns Icon loader configuration with class and slot
+     */
+    getOverflowIconConfig() {
+        return {
+            class: `${prefix}-chat-header-overflow-icon`,
+            slot: "icon",
+        };
+    }
+    /**
+     * Renders the back navigation button.
+     * @returns Template result for back button
+     */
+    renderBackNavigation() {
+        return html `
+      <div slot="navigation">
+        <cds-icon-button
+          kind="ghost"
+          size="md"
+          tooltip-alignment=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.alignment}
+          tooltip-position=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.position}
+          enter-delay-ms=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.enterDelayMs}
+          leave-delay-ms=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.leaveDelayMs}
+          @click=${this.navigationBackOnClick}
+        >
+          ${iconLoader(this.navigationBackIcon, CdsAiChatChatHeader_1.BACK_ICON_CONFIG)}
+          <span slot="tooltip-content">${this.navigationBackLabel}</span>
+        </cds-icon-button>
+      </div>
+    `;
+    }
+    /**
+     * Renders the overflow navigation menu.
+     * @returns Template result for overflow menu
+     */
+    renderOverflowNavigation() {
+        // Check if RTL direction is set
+        const isRTL = document.dir === "rtl" || document.documentElement.dir === "rtl";
+        // For LTR: menu opens right
+        // For RTL: menu opens left
+        const menuAlignment = isRTL ? "left" : "right";
+        return html `
+      <div
+        slot="navigation"
+        data-floating-menu-container
+        class="${prefix}-chat-header-overflow-wrapper"
+      >
+        <cds-overflow-menu
+          align=${menuAlignment}
+          tooltip-alignment=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.alignment}
+          tooltip-position=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.position}
+          enter-delay-ms=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.enterDelayMs}
+          leave-delay-ms=${CdsAiChatChatHeader_1.NAV_TOOLTIP_CONFIG.leaveDelayMs}
+          @click=${this.navigationOverflowOnClick}
+        >
+          ${this.navigationOverflowIcon
+            ? iconLoader(this.navigationOverflowIcon, this.getOverflowIconConfig())
+            : nothing}
+          <span slot="tooltip-content">${this.navigationOverflowLabel}</span>
+          <cds-overflow-menu-body>
+            ${this.renderOverflowMenuItems()}
+          </cds-overflow-menu-body>
+        </cds-overflow-menu>
+      </div>
+    `;
+    }
+    /**
+     * Renders the navigation content based on navigationType.
+     * Uses guard clauses and extracted methods for clarity.
+     * @returns Template result for navigation or nothing
+     */
+    renderNavigation() {
+        if (!this.navigationType || this.navigationType === "none") {
+            return nothing;
+        }
+        if (this.shouldRenderBackNavigation()) {
+            return this.renderBackNavigation();
+        }
+        if (this.shouldRenderOverflowNavigation()) {
+            return this.renderOverflowNavigation();
+        }
+        return nothing;
+    }
+    /**
+     * Renders the title content based on headerTitle and headerName properties.
+     * @returns Template result for title content or title slot
+     */
+    renderTitle() {
+        const hasTitle = this.headerTitle || this.headerName;
+        if (!hasTitle) {
+            return html `<slot name="title"></slot>`;
+        }
+        return html `
+      <div slot="title" class="cds-aichat-chat-header__title">
+        ${this.headerTitle
+            ? html `
+              <span
+                class="cds-aichat-chat-header__title-text"
+                data-testid=${PageObjectId.HEADER_TITLE}
+              >
+                ${this.headerTitle}
+              </span>
+            `
+            : nothing}
+        ${this.headerName
+            ? html `
+              <span
+                class="cds-aichat-chat-header__name-text"
+                data-testid=${PageObjectId.HEADER_NAME}
+              >
+                ${this.headerName}
+              </span>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    render() {
+        // Determine if we should render navigation from props or use slot
+        const hasNavigationProps = this.navigationType && this.navigationType !== "none";
+        const navigationContent = hasNavigationProps
+            ? this.renderNavigation()
+            : html `<slot name="navigation"></slot>`;
+        return html `
+      <cds-aichat-toolbar
+        .actions=${this.actions}
+        ?overflow=${this.overflow}
+        titleText=${this.headerTitle || nothing}
+        nameText=${this.headerName || nothing}
+        data-testid=${PageObjectId.CHAT_HEADER}
+      >
+        ${navigationContent}
+        ${!this.headerTitle && !this.headerName ? this.renderTitle() : nothing}
+        <slot name="fixed-actions" slot="fixed-actions"></slot>
+        <slot name="decorator" slot="decorator"></slot>
+      </cds-aichat-toolbar>
+    `;
+    }
+};
+CdsAiChatChatHeader.styles = styles;
+/**
+ * Selector strings for finding focusable elements.
+ *
+ * Design rationale:
+ * - BUTTON_SELECTORS: Used for fixed-actions slot. Targets Carbon buttons and native buttons.
+ * - NAV_BUTTON_SELECTORS: Used for navigation slot. Includes overflow menu for navigation patterns.
+ * - TOOLBAR_ACTION_SELECTOR: Specifically targets toolbar icon buttons (most common action type).
+ * - FOCUSABLE_SELECTORS: Fallback selector for any focusable element. Uses "*" because the
+ *   tryFocus() utility already performs comprehensive validation including:
+ *   - Visibility checks (display, visibility, hidden, inert, aria-hidden)
+ *   - Focusability validation (handles standard elements and custom elements with delegatesFocus)
+ *   - Actual focus verification (checks if document.activeElement changed)
+ *   This approach avoids duplicating validation logic and properly handles Carbon components.
+ */
+CdsAiChatChatHeader.BUTTON_SELECTORS = "cds-button, cds-icon-button, button";
+CdsAiChatChatHeader.NAV_BUTTON_SELECTORS = "cds-button, cds-icon-button, cds-overflow-menu, button";
+CdsAiChatChatHeader.FOCUSABLE_SELECTORS = "*";
+CdsAiChatChatHeader.TOOLBAR_ACTION_SELECTOR = "cds-icon-button:not([disabled])";
+/**
+ * Configuration constants for navigation elements.
+ */
+CdsAiChatChatHeader.BACK_ICON_CONFIG = { slot: "icon" };
+CdsAiChatChatHeader.NAV_TOOLTIP_CONFIG = {
+    alignment: "end",
+    position: "right",
+    enterDelayMs: "0",
+    leaveDelayMs: "0",
+};
+__decorate([
+    property({ type: Array, attribute: false })
+], CdsAiChatChatHeader.prototype, "actions", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "overflow", reflect: true })
+], CdsAiChatChatHeader.prototype, "overflow", void 0);
+__decorate([
+    property({ type: String, attribute: "header-title" })
+], CdsAiChatChatHeader.prototype, "headerTitle", void 0);
+__decorate([
+    property({ type: String, attribute: "header-name" })
+], CdsAiChatChatHeader.prototype, "headerName", void 0);
+__decorate([
+    property({ type: String, attribute: "navigation-type" })
+], CdsAiChatChatHeader.prototype, "navigationType", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CdsAiChatChatHeader.prototype, "navigationBackIcon", void 0);
+__decorate([
+    property({ type: String, attribute: "navigation-back-label" })
+], CdsAiChatChatHeader.prototype, "navigationBackLabel", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CdsAiChatChatHeader.prototype, "navigationBackOnClick", void 0);
+__decorate([
+    property({ type: Array, attribute: false })
+], CdsAiChatChatHeader.prototype, "navigationOverflowItems", void 0);
+__decorate([
+    property({ type: String, attribute: "navigation-overflow-label" })
+], CdsAiChatChatHeader.prototype, "navigationOverflowLabel", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CdsAiChatChatHeader.prototype, "navigationOverflowIcon", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], CdsAiChatChatHeader.prototype, "navigationOverflowOnClick", void 0);
+CdsAiChatChatHeader = CdsAiChatChatHeader_1 = __decorate([
+    carbonElement(`${prefix}-chat-header`)
+], CdsAiChatChatHeader);
+var CdsAiChatChatHeader$1 = CdsAiChatChatHeader;
+// Made with Bob
+
+export { CdsAiChatChatHeader, CdsAiChatChatHeader$1 as default };
+//# sourceMappingURL=chat-header.js.map

package/es/components/chat-shell/src/chat-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-header.js","sources":["../../../../src/components/chat-shell/src/chat-header.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/es/components/chat-shell/src/chat-header.scss.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+var styles = css([":host{box-sizing:border-box;display:block;inline-size:100%}.cds-aichat-chat-header-overflow-wrapper{position:relative}.cds-aichat-chat-header-overflow-wrapper cds-overflow-menu{border-start-start-radius:calc(var(--cds-aichat-border-radius-start-start, var(--cds-aichat-border-radius)) - .0625rem)}.cds-aichat-chat-header-overflow-wrapper cds-overflow-menu::part(button){border-start-start-radius:calc(var(--cds-aichat-border-radius-start-start, var(--cds-aichat-border-radius)) - .0625rem)}.cds-aichat-chat-header-overflow-icon{color:var(--cds-icon-primary,#161616)}.cds-aichat-chat-header__title{color:var(--cds-text-primary,#161616);inline-size:100%;min-inline-size:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds-aichat-chat-header__name-text{font-weight:700}"]);
+
+export { styles as default };
+//# sourceMappingURL=chat-header.scss.js.map

package/es/components/chat-shell/src/chat-header.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chat-header.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/es/components/chat-shell/src/corner-manager.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CornerConfig, CornerStyle, CornerPosition } from "./types.js";
+/**
+ * Manages rounded corner calculations and CSS variable updates for the chat shell.
+ * Handles the logic for determining effective corner styles and applying them
+ * to CSS custom properties.
+ */
+export declare class CornerManager {
+    private readonly shellRoot;
+    private config;
+    constructor(shellRoot: HTMLElement, config: CornerConfig);
+    /**
+     * Update corner configuration and apply CSS variables
+     */
+    updateCorners(config: CornerConfig): void;
+    /**
+     * Check if any corner is rounded
+     */
+    hasAnyRoundedCorner(): boolean;
+    /**
+     * Get the effective corner value (individual corner overrides cornerAll)
+     */
+    getEffectiveCorner(position: CornerPosition): CornerStyle;
+    /**
+     * Updates CSS custom properties for corner radii based on corner configuration
+     */
+    private updateCornerCSSVariables;
+}

package/es/components/chat-shell/src/corner-manager.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Manages rounded corner calculations and CSS variable updates for the chat shell.
+ * Handles the logic for determining effective corner styles and applying them
+ * to CSS custom properties.
+ */
+class CornerManager {
+    constructor(shellRoot, config) {
+        this.shellRoot = shellRoot;
+        this.config = config;
+        this.updateCornerCSSVariables();
+    }
+    /**
+     * Update corner configuration and apply CSS variables
+     */
+    updateCorners(config) {
+        this.config = config;
+        this.updateCornerCSSVariables();
+    }
+    /**
+     * Check if any corner is rounded
+     */
+    hasAnyRoundedCorner() {
+        return (this.config.cornerAll === "round" ||
+            this.config.cornerStartStart === "round" ||
+            this.config.cornerStartEnd === "round" ||
+            this.config.cornerEndStart === "round" ||
+            this.config.cornerEndEnd === "round");
+    }
+    /**
+     * Get the effective corner value (individual corner overrides cornerAll)
+     */
+    getEffectiveCorner(position) {
+        switch (position) {
+            case "start-start":
+                return this.config.cornerStartStart ?? this.config.cornerAll;
+            case "start-end":
+                return this.config.cornerStartEnd ?? this.config.cornerAll;
+            case "end-start":
+                return this.config.cornerEndStart ?? this.config.cornerAll;
+            case "end-end":
+                return this.config.cornerEndEnd ?? this.config.cornerAll;
+        }
+    }
+    /**
+     * Updates CSS custom properties for corner radii based on corner configuration
+     */
+    updateCornerCSSVariables() {
+        if (!this.shellRoot) {
+            return;
+        }
+        const radiusValue = (corner) => corner === "round" ? "0.5rem" : "0";
+        // Calculate effective values for each corner
+        const startStartValue = radiusValue(this.getEffectiveCorner("start-start"));
+        const startEndValue = radiusValue(this.getEffectiveCorner("start-end"));
+        const endStartValue = radiusValue(this.getEffectiveCorner("end-start"));
+        const endEndValue = radiusValue(this.getEffectiveCorner("end-end"));
+        // Set -base variables (source of truth for per-corner control)
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-start-start-base", startStartValue);
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-start-end-base", startEndValue);
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-end-start-base", endStartValue);
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-end-end-base", endEndValue);
+        // Also set regular variables for direct usage (backward compatibility)
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-start-start", startStartValue);
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-start-end", startEndValue);
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-end-start", endStartValue);
+        this.shellRoot.style.setProperty("--cds-aichat-border-radius-end-end", endEndValue);
+    }
+}
+// Made with Bob
+
+export { CornerManager };
+//# sourceMappingURL=corner-manager.js.map

package/es/components/chat-shell/src/corner-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"corner-manager.js","sources":["../../../../src/components/chat-shell/src/corner-manager.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAIH;;;;AAIG;MACU,aAAa,CAAA;IAGxB,WAAA,CACmB,SAAsB,EACvC,MAAoB,EAAA;QADH,IAAA,CAAA,SAAS,GAAT,SAAS;AAG1B,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,IAAI,CAAC,wBAAwB,EAAE;IACjC;AAEA;;AAEG;AACH,IAAA,aAAa,CAAC,MAAoB,EAAA;AAChC,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;QACpB,IAAI,CAAC,wBAAwB,EAAE;IACjC;AAEA;;AAEG;IACH,mBAAmB,GAAA;AACjB,QAAA,QACE,IAAI,CAAC,MAAM,CAAC,SAAS,KAAK,OAAO;AACjC,YAAA,IAAI,CAAC,MAAM,CAAC,gBAAgB,KAAK,OAAO;AACxC,YAAA,IAAI,CAAC,MAAM,CAAC,cAAc,KAAK,OAAO;AACtC,YAAA,IAAI,CAAC,MAAM,CAAC,cAAc,KAAK,OAAO;AACtC,YAAA,IAAI,CAAC,MAAM,CAAC,YAAY,KAAK,OAAO;IAExC;AAEA;;AAEG;AACH,IAAA,kBAAkB,CAAC,QAAwB,EAAA;QACzC,QAAQ,QAAQ;AACd,YAAA,KAAK,aAAa;gBAChB,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;AAC9D,YAAA,KAAK,WAAW;gBACd,OAAO,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;AAC5D,YAAA,KAAK,WAAW;gBACd,OAAO,IAAI,CAAC,MAAM,CAAC,cAAc,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;AAC5D,YAAA,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAC,MAAM,CAAC,YAAY,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS;;IAE9D;AAEA;;AAEG;IACK,wBAAwB,GAAA;AAC9B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB;QACF;AAEA,QAAA,MAAM,WAAW,GAAG,CAAC,MAAmB,KACtC,MAAM,KAAK,OAAO,GAAG,QAAQ,GAAG,GAAG;;QAGrC,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,CAAC;QAC3E,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;QACvE,MAAM,aAAa,GAAG,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;QACvE,MAAM,WAAW,GAAG,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;;QAGnE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,6CAA6C,EAC7C,eAAe,CAChB;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,2CAA2C,EAC3C,aAAa,CACd;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,2CAA2C,EAC3C,aAAa,CACd;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,yCAAyC,EACzC,WAAW,CACZ;;QAGD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,wCAAwC,EACxC,eAAe,CAChB;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,sCAAsC,EACtC,aAAa,CACd;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,sCAAsC,EACtC,aAAa,CACd;QACD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,CAC9B,oCAAoC,EACpC,WAAW,CACZ;IACH;AACD;AAED;;;;"}

package/es/components/chat-shell/src/initialization-manager.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { InitialStateKey } from "./types.js";
+/**
+ * Manages component initialization state tracking.
+ * Tracks when various initial state properties have been set and determines
+ * when initialization is complete to prevent visible layout thrashing.
+ */
+export declare class InitializationManager {
+    private initialStateSet;
+    private isInitializing;
+    private onCompleteCallback?;
+    /**
+     * Mark a specific initial state property as set
+     */
+    markStateSet(key: InitialStateKey): void;
+    /**
+     * Check if initialization is complete
+     */
+    isInitializationComplete(): boolean;
+    /**
+     * Get the current initializing state
+     */
+    getInitializingState(): boolean;
+    /**
+     * Set callback to be called when initialization completes
+     */
+    onComplete(callback: () => void): void;
+    /**
+     * Reset initialization state (useful for testing or re-initialization)
+     */
+    reset(): void;
+    /**
+     * Check if all initial state properties have been set
+     * and mark initialization as complete if so
+     */
+    private checkInitializationComplete;
+}