@carbon/ai-chat-components 0.7.1 → 0.8.0

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

@@ -0,0 +1,144 @@
+/**
+ * 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.
+ */
+class PanelManager {
+    constructor(panelsSlot, shellRoot) {
+        this.panelsSlot = panelsSlot;
+        this.shellRoot = shellRoot;
+        this.panelObservers = new Map();
+        this.slotElements = [];
+        this.onSlotChange = () => {
+            this.observeAssignedPanels();
+            this.updateState();
+        };
+        this.onPanelMutation = () => {
+            this.updateState();
+        };
+    }
+    connect() {
+        this.syncSlotElements();
+        this.panelsSlot.addEventListener("slotchange", this.onSlotChange);
+        this.observeAssignedPanels();
+        this.updateState();
+    }
+    disconnect() {
+        this.panelsSlot.removeEventListener("slotchange", this.onSlotChange);
+        this.stopObservingPanels();
+    }
+    refresh() {
+        this.observeAssignedPanels();
+        this.updateState();
+    }
+    observeAssignedPanels() {
+        const panels = this.getAssignedPanelElements();
+        const current = new Set(panels);
+        for (const [panel, observer] of this.panelObservers) {
+            if (!current.has(panel)) {
+                observer.disconnect();
+                this.panelObservers.delete(panel);
+            }
+        }
+        for (const panel of panels) {
+            if (!this.panelObservers.has(panel)) {
+                const observer = new MutationObserver(this.onPanelMutation);
+                observer.observe(panel, { attributes: true });
+                this.panelObservers.set(panel, observer);
+            }
+        }
+    }
+    stopObservingPanels() {
+        for (const observer of this.panelObservers.values()) {
+            observer.disconnect();
+        }
+        this.panelObservers.clear();
+    }
+    updateState() {
+        this.syncSlotElements();
+        const panels = this.getPanelStates();
+        const active = this.pickActivePanel(panels);
+        const hasActive = Boolean(active);
+        const headerInert = hasActive && !active?.showChatHeader;
+        this.slotElements.forEach((slot) => {
+            const slotName = slot.dataset.panelSlot;
+            if (slotName === "header" || slotName === "header-after") {
+                this.setInert(slot, headerInert);
+            }
+            else {
+                this.setInert(slot, hasActive);
+            }
+        });
+        panels.forEach((panel) => {
+            const shouldInert = hasActive && panel.element !== active?.element && panel.open;
+            this.setInert(panel.element, shouldInert);
+        });
+        const isAnyPanelAnimating = panels.some((panelState) => this.isPanelAnimating(panelState.element));
+        this.shellRoot.classList.toggle("shell--panels-animating", isAnyPanelAnimating);
+    }
+    getAssignedPanelElements() {
+        const internalPanels = Array.from(this.shellRoot.querySelectorAll("cds-aichat-panel[data-internal-panel]"));
+        const panelsElement = this.panelsSlot
+            .assignedElements({ flatten: true })
+            .find((element) => element instanceof HTMLElement);
+        const slottedPanels = panelsElement
+            ? Array.from(panelsElement.querySelectorAll("cds-aichat-panel"))
+            : [];
+        const panels = [...internalPanels, ...slottedPanels];
+        return Array.from(new Set(panels));
+    }
+    getPanelStates() {
+        const panels = this.getAssignedPanelElements();
+        return panels.map((element, index) => ({
+            element,
+            open: element.hasAttribute("open"),
+            priority: Number(element.getAttribute("priority") ?? 0),
+            showChatHeader: element.hasAttribute("show-chat-header"),
+            index,
+        }));
+    }
+    pickActivePanel(panels) {
+        if (panels?.length) {
+            const sortedPanels = panels
+                .filter((panel) => panel.open)
+                .sort((a, b) => {
+                if (a.priority !== b.priority) {
+                    return b.priority - a.priority;
+                }
+                return b.index - a.index;
+            });
+            return sortedPanels[0];
+        }
+        return;
+    }
+    setInert(target, value) {
+        if (!target) {
+            return;
+        }
+        if (value) {
+            target.inert = true;
+        }
+        else {
+            target.inert = false;
+        }
+    }
+    isPanelAnimating(panelElement) {
+        return panelElement.classList.contains("panel-container--animating");
+    }
+    syncSlotElements() {
+        this.slotElements = Array.from(this.shellRoot.querySelectorAll("[data-panel-slot]"));
+    }
+}
+
+export { PanelManager };
+//# sourceMappingURL=panel-manager.js.map

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

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

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

@@ -0,0 +1,118 @@
+/**
+ * @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.
+ */
+interface WorkspaceConfig {
+    showWorkspace: boolean;
+    showHistory: boolean;
+    workspaceLocation: "start" | "end";
+    roundedCorners: boolean;
+}
+interface WorkspaceState {
+    inPanel: boolean;
+    contentVisible: boolean;
+    containerVisible: boolean;
+    isExpanding: boolean;
+    isContracting: boolean;
+}
+/**
+ * Manages workspace layout, responsive behavior, and transitions for cds-aichat-shell.
+ * Handles switching between inline and panel modes based on available width,
+ * and orchestrates smooth transitions when workspace visibility changes.
+ */
+export declare class WorkspaceManager {
+    private readonly shellRoot;
+    private readonly hostElement;
+    private config;
+    private state;
+    private hostResizeObserver?;
+    private windowResizeHandler?;
+    private expansionCheckInterval?;
+    private expansionLastInlineSize?;
+    private closingCheckInterval?;
+    private closingLastInlineSize?;
+    private throttledHandleHostResize;
+    private cssPropertyObserver?;
+    private lastKnownCssValues;
+    constructor(shellRoot: HTMLElement, hostElement: HTMLElement, config: WorkspaceConfig);
+    /**
+     * Initialize workspace management and start observing resize events.
+     * Should be called after the shell component is fully rendered.
+     */
+    connect(): void;
+    /**
+     * Clean up observers and timers.
+     * Should be called when the shell component is disconnected.
+     */
+    disconnect(): void;
+    /**
+     * Refresh workspace state and re-evaluate layout.
+     * Useful after external changes that might affect layout.
+     */
+    refresh(): void;
+    /**
+     * Update workspace configuration.
+     * Handles transitions when workspace visibility or related settings change.
+     */
+    updateConfig(newConfig: Partial<WorkspaceConfig>): void;
+    /**
+     * Get current workspace state.
+     * Returns a readonly copy to prevent external mutations.
+     */
+    getState(): Readonly<WorkspaceState>;
+    /**
+     * Check if workspace should be rendered inline (side-by-side with messages).
+     */
+    shouldRenderInline(): boolean;
+    /**
+     * Check if workspace should be rendered as a panel (overlay).
+     */
+    shouldRenderPanel(): boolean;
+    private observeHostWidth;
+    private setupWindowResizeListener;
+    private createHostResizeObserver;
+    private reconnectHostResizeObserver;
+    private performInitialHostMeasurement;
+    private handleHostResize;
+    private updateWorkspaceInPanelState;
+    private handleShowWorkspaceEnabled;
+    private handleShowWorkspaceDisabled;
+    private startExpansionPolling;
+    private startClosingPolling;
+    private finishWorkspaceExpansion;
+    private finishWorkspaceClosing;
+    private trackExpectedExpansion;
+    private clearExpansionTimers;
+    private clearClosingTimer;
+    private setWorkspaceInPanel;
+    private setWorkspaceContentVisible;
+    private setShowWorkspaceContainer;
+    private setState;
+    private updateShellClasses;
+    private requestHostUpdate;
+    private getRequiredMinWidth;
+    private isWideEnough;
+    private canHostGrow;
+    private finalizeImmediateDisplay;
+    private setupExpansionTracking;
+    private getInlineSizeFromEntry;
+    private getCssLengthFromProperty;
+    /**
+     * Observe CSS custom properties that affect workspace layout.
+     * When these properties change, recalculate workspace positioning.
+     */
+    private observeCssProperties;
+    /**
+     * Update the cached CSS property values.
+     */
+    private updateLastKnownCssValues;
+    /**
+     * Check if any relevant CSS properties have changed and trigger recalculation.
+     */
+    private checkCssPropertyChanges;
+}
+export {};