@salesforce/agentforce-conversation-client 1.25.0 → 1.25.2

package/dist/index.d.ts

@@ -4,100 +4,45 @@
  * For full license text, see the LICENSE.txt file
  */
 import { LightningOutApplication } from "@lightning-out/application";
-/**
- * The ACC wrapper component name used by Lightning Out
- */
 export declare const AGENTFORCE_CLIENT_ELEMENT_TAG = "runtime_copilot-acc-sdk-wrapper";
-/**
- * The namespace used by Lightning Out
- */
 export declare const AGENTFORCE_CLIENT_NAMESPACE = "runtime_copilot";
-/**
- * The component name used by Lightning Out
- */
 export declare const AGENTFORCE_CLIENT_COMPONENT_NAME = "accSdkWrapper";
-/**
- * Rendering mode for the Agentforce client
- */
 export declare const RenderingMode: Readonly<{
-    INLINE: "inline";
-    FLOATING: "floating";
+    readonly INLINE: "inline";
+    readonly FLOATING: "floating";
 }>;
-type RenderingModeValue = (typeof RenderingMode)[keyof typeof RenderingMode];
-/**
- * Styling options for the Agentforce client
- * Accepts any style property key-value pairs
- */
+export type RenderingModeValue = (typeof RenderingMode)[keyof typeof RenderingMode];
 export type StyleTokens = Record<string, string>;
-/**
- * Agentforce client configuration options
- */
 export interface AgentforceClientConfig {
-    /** Styling options */
     styleTokens?: StyleTokens;
-    /** Agent identifier used to select which agent to load */
     agentId?: string;
-    /** Rendering configuration */
     renderingConfig?: {
         mode?: RenderingModeValue;
         width?: string | number;
         height?: string | number;
     };
 }
-/**
- * Options for embedding the Agentforce client
- */
 export interface EmbedAgentforceClientOptions {
-    /** CSS selector or HTMLElement */
     container: string | HTMLElement;
-    /** Salesforce org origin URL (used as endpoint for component resolution) */
     salesforceOrigin?: string;
-    /** Lightning Out application ID */
     appId?: string;
-    /** Frontdoor URL for authentication */
     frontdoorUrl?: string;
-    /** Agentforce client configuration */
     agentforceClientConfig?: AgentforceClientConfig;
 }
-/**
- * Result of embedding the Agentforce client
- */
 export interface EmbedAgentforceClientResult {
-    /** The Lightning Out application element */
     loApp: LightningOutApplication;
-    /** The chat client component element */
     chatClientComponent: HTMLElement;
 }
 /**
- * Embeds the Agentforce Conversation Client into a specified DOM container.
- *
- * @param options - Configuration options
- * @returns The created elements
- * @throws Error if required options are missing
+ * Embeds the Agentforce Conversation Client into a DOM container.
+ * Embed is hidden (opacity 0) until the frame receives the "accready" event.
  *
  * @example
- * ```ts
- * embedAgentforceClient({
- *   container: '#agentforce-conversation-client-container',
+ * const { loApp, chatClientComponent } = embedAgentforceClient({
+ *   container: '#agentforce-container',
  *   salesforceOrigin: 'https://myorg.my.salesforce.com',
- *   agentforceClientConfig: { styleTokens: { MessageBlockInboundColor: '#0176d3' } }
- * });
- * ```
- *
- * @example
- * ```ts
- * // Listen for Lightning Out events after embedding
- * const { loApp } = embedAgentforceClient({ ... });
- *
- * loApp.addEventListener('lo.application.ready', () => {
- *   console.log('Lightning Out is ready');
- * });
- *
- * loApp.addEventListener('lo.component.ready', (event) => {
- *   console.log('Component ready:', event.detail.componentName);
+ *   agentforceClientConfig: { renderingConfig: { mode: 'Floating' } }
  * });
- * ```
  */
 export declare function embedAgentforceClient(options?: EmbedAgentforceClientOptions | null): EmbedAgentforceClientResult;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAErE;;GAEG;AACH,eAAO,MAAM,6BAA6B,oCAAoC,CAAC;AAE/E;;GAEG;AACH,eAAO,MAAM,2BAA2B,oBAAoB,CAAC;AAE7D;;GAEG;AACH,eAAO,MAAM,gCAAgC,kBAAkB,CAAC;AA8ChE;;GAEG;AACH,eAAO,MAAM,aAAa;;;EAGxB,CAAC;AAEH,KAAK,kBAAkB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAK7E;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACtC,sBAAsB;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,eAAe,CAAC,EAAE;QACjB,IAAI,CAAC,EAAE,kBAAkB,CAAC;QAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACzB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC5C,kCAAkC;IAClC,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CAChD;AAED;;GAEG;AACH,MAAM,WAAW,2BAA2B;IAC3C,4CAA4C;IAC5C,KAAK,EAAE,uBAAuB,CAAC;IAC/B,wCAAwC;IACxC,mBAAmB,EAAE,WAAW,CAAC;CACjC;AA0LD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,qBAAqB,CACpC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,GAC3C,2BAA2B,CA0B7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAMrE,eAAO,MAAM,6BAA6B,oCAAoC,CAAC;AAC/E,eAAO,MAAM,2BAA2B,oBAAoB,CAAC;AAC7D,eAAO,MAAM,gCAAgC,kBAAkB,CAAC;AAEhE,eAAO,MAAM,aAAa;;;EAGf,CAAC;AAEZ,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAMpF,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEjD,MAAM,WAAW,sBAAsB;IACtC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE;QACjB,IAAI,CAAC,EAAE,kBAAkB,CAAC;QAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KACzB,CAAC;CACF;AAED,MAAM,WAAW,4BAA4B;IAC5C,SAAS,EAAE,MAAM,GAAG,WAAW,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CAChD;AAED,MAAM,WAAW,2BAA2B;IAC3C,KAAK,EAAE,uBAAuB,CAAC;IAC/B,mBAAmB,EAAE,WAAW,CAAC;CACjC;AAwUD;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CACpC,OAAO,CAAC,EAAE,4BAA4B,GAAG,IAAI,GAC3C,2BAA2B,CAuB7B"}

package/dist/index.js

@@ -4,232 +4,275 @@
  * For full license text, see the LICENSE.txt file
  */
 import { LightningOutApplication } from "@lightning-out/application";
-/**
- * The ACC wrapper component name used by Lightning Out
- */
+// ═══════════════════════════════════════════════════════════════════════════════
+// PUBLIC CONSTANTS (API surface)
+// ═══════════════════════════════════════════════════════════════════════════════
 export const AGENTFORCE_CLIENT_ELEMENT_TAG = "runtime_copilot-acc-sdk-wrapper";
-/**
- * The namespace used by Lightning Out
- */
 export const AGENTFORCE_CLIENT_NAMESPACE = "runtime_copilot";
-/**
- * The component name used by Lightning Out
- */
 export const AGENTFORCE_CLIENT_COMPONENT_NAME = "accSdkWrapper";
-/**
- * Base styles for the floating mode
- */
-const FLOATING_BASE = Object.freeze({
-    display: "block",
-    position: "fixed",
-    maxWidth: "calc(100vw - 4rem)",
-    maxHeight: "calc(100dvh - 4rem)",
-    transition: "all 0s ease",
-    background: "transparent",
-    border: "none",
-    outline: "none",
-    borderRadius: "16px",
-    boxShadow: "2px 2px 20px rgba(0,0,0,0.2)",
-    bottom: "24px",
-    right: "24px",
-    zIndex: "999",
-});
-/**
- * Minimized styles for the floating mode
- */
-const FLOATING_MINIMIZED = Object.freeze({ width: "145px", height: "56px" });
-/**
- * Maximized styles for the floating mode
- */
-const FLOATING_MAXIMIZED = Object.freeze({
-    width: "380px",
-    height: "540px",
-    "--agentic-chat-container-height": "540px",
-    boxShadow: "0 10px 25px -3px rgba(0,0,0,0.1),0 4px 12px -2px rgba(0,0,0,0.05),0 0 2px 0 rgba(0,0,0,0.05),0 20px 45px -5px rgba(0,0,0,0.08)",
-    transition: "all 0.3s ease",
-});
-/**
- * Base styles for the inline mode
- */
-const INLINE_BASE = Object.freeze({
-    display: "block",
-    borderRadius: "0.5em",
-});
-/**
- * Rendering mode for the Agentforce client
- */
 export const RenderingMode = Object.freeze({
     INLINE: "inline",
     FLOATING: "floating",
 });
-const ACC_MAXIMIZE_EVENT = "accmaximize";
-const ACC_MINIMIZE_EVENT = "accminimize";
-function applyStyles(el, styles) {
-    Object.entries(styles).forEach(([key, value]) => {
-        if (key.startsWith("--")) {
-            el.style.setProperty(key, value);
-        }
-        else {
-            el.style[key] = value;
-        }
-    });
+// ═══════════════════════════════════════════════════════════════════════════════
+// INTERNAL CONSTANTS
+// ═══════════════════════════════════════════════════════════════════════════════
+const EVENTS = Object.freeze({
+    ACC_MAXIMIZE: "accmaximize",
+    ACC_MINIMIZE: "accminimize",
+    ACC_READY: "accready",
+});
+const STYLE_ID = "agentforce-client-injected-styles";
+const FLOATING_DIMENSIONS = Object.freeze({
+    MINIMIZED_HEIGHT: "56px",
+    MAXIMIZED_HEIGHT: "742px",
+});
+// ═══════════════════════════════════════════════════════════════════════════════
+// STYLES – Injected CSS (overrides acc-sdk-wrapper inline width/height via !important)
+// ═══════════════════════════════════════════════════════════════════════════════
+const AGENTFORCE_CLIENT_CSS = `
+:root {
+    --minimized-iframe-width: 180px !important;
+    --minimized-iframe-height: 70px !important;
 }
-function applyFloatingMinimized(el) {
-    applyStyles(el, {
-        ...FLOATING_MINIMIZED,
-        boxShadow: FLOATING_BASE.boxShadow,
-        transition: FLOATING_BASE.transition,
-    });
+
+.acc-container:has(> .acc-frame.inline) {
+    height: 100%;
+    width: 100%;
 }
-function applyFloatingMaximized(el) {
-    applyStyles(el, FLOATING_MAXIMIZED);
+  
+.sds-overrides {
+  width: auto;
 }
-function toCssLength(value) {
-    return typeof value === "number" ? `${value}px` : value;
+
+.acc-container > .acc-frame {
+    display: block;
+    position: fixed;
+    background: transparent;
+    border: none;
+    outline: none;
+    border-radius: 20px;
+    bottom: 24px;
+    right: 24px;
+    height: 0 !important;
+    width: 0 !important;
+    max-width: calc(100vw - 4rem);
+    max-height: calc(100dvh - 4rem);
+    z-index: 999;
 }
-function applyInlineFromConfig(el, { width, height }) {
-    if (width != null)
-        el.style.width = toCssLength(width);
-    if (height != null) {
-        const heightValue = toCssLength(height);
-        el.style.height = heightValue;
-        el.style.setProperty("--agentic-chat-container-height", heightValue);
+
+.acc-container > .acc-frame.inline,
+.acc-container > .acc-frame.inline.maximize {
+    height: 100% !important;
+    width: 100% !important;
+    position: static;
+    bottom: 0;
+    right: 0;
+    max-height: 100%;
+    max-width: 100%;
+    box-shadow: none;
+    border-radius: 0;
+}
+
+.acc-container > .acc-frame.inline:not(.maximize) {
+    width: var(--acc-width, auto) !important;
+    height: var(--acc-height, auto) !important;
+}
+
+.acc-container > .acc-frame.initial {
+    height: var(--minimized-iframe-height, 56px) !important;
+    width: var(--minimized-iframe-width, 145px) !important;
+    transition: all 0s ease;
+}
+
+.acc-container > .acc-frame.minimize {
+    height: var(--minimized-iframe-height, 56px) !important;
+    width: var(--minimized-iframe-width, 145px) !important;
+    transition: width 0.25s ease-in-out, height 0.25s ease-in-out;
+}
+
+.acc-container > .acc-frame.maximize {
+    width: 400px !important;
+    height: 600px !important;
+    background: #ffffff;
+    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.05),
+        0 0 2px 0 rgba(0, 0, 0, 0.05), 0 20px 45px -5px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+}
+
+.acc-container > lightning-out-application {
+    background: transparent;
+}
+
+@media (max-width: 639px) {
+    .acc-container > .acc-frame.maximize {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100% !important;
+        height: 100vh !important;
+        height: 100dvh !important;
+        border-radius: 0;
+        max-width: 100%;
+        max-height: 100vh;
+        overflow-y: auto;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+        transition: height 0.2s ease-in-out;
     }
+
+    .acc-container:has(> .acc-frame.maximize) {
+        position: fixed;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+}
+`;
+function injectStyles(additionalCss = "") {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = AGENTFORCE_CLIENT_CSS + (additionalCss ? "\n" + additionalCss : "");
+    document.head.appendChild(style);
+}
+function toCssLength(value) {
+    return typeof value === "number" ? `${value}px` : value;
 }
 function normalizeRenderingMode(value) {
-    if (value === RenderingMode.INLINE || value === RenderingMode.FLOATING) {
+    if (value === RenderingMode.INLINE || value === RenderingMode.FLOATING)
         return value;
-    }
     return undefined;
 }
 function getRenderingContext(clientConfig) {
     const renderingConfig = clientConfig?.renderingConfig ?? {};
-    const normalizedMode = normalizeRenderingMode(renderingConfig.mode);
-    const mode = normalizedMode ?? RenderingMode.FLOATING;
+    const mode = normalizeRenderingMode(renderingConfig.mode) ?? RenderingMode.FLOATING;
     const isFloating = mode !== RenderingMode.INLINE;
     return { mode, isFloating, renderingConfig };
 }
-function createChatClientElement() {
+function applyInlineSizing(container, { width, height }) {
+    if (width != null)
+        container.style.setProperty("--acc-width", toCssLength(width));
+    if (height != null) {
+        const h = toCssLength(height);
+        container.style.setProperty("--acc-height", h);
+        container.style.setProperty("--agentic-chat-container-height", h);
+    }
+}
+function createFrameElement() {
     const el = document.createElement(AGENTFORCE_CLIENT_ELEMENT_TAG);
     el.classList.add("acc-frame");
     return el;
 }
-function applyInitialClientStyles(el, context) {
+function applyFrameInitialState(el, context, container) {
+    el.style.opacity = "0";
+    el.style.pointerEvents = "none";
+    el.style.setProperty("--agentic-chat-container-height", "100vh");
     if (context.isFloating) {
-        applyStyles(el, FLOATING_BASE);
-        applyFloatingMinimized(el);
+        el.classList.add("floating");
+        el.classList.remove("maximize", "minimize");
+        el.classList.add("initial");
     }
     else {
-        applyStyles(el, INLINE_BASE);
-        applyInlineFromConfig(el, context.renderingConfig);
+        el.classList.add("inline");
+        applyInlineSizing(container, context.renderingConfig);
     }
 }
-function attachResizeHandlers(el, isFloating) {
-    const setSizeClass = (className) => {
-        el.classList.remove("maximize", "minimize");
-        el.classList.add(className);
+function attachFrameResizeHandlers(el, container, isFloating, loApp) {
+    const onAccReady = () => {
+        el.style.opacity = "";
+        el.style.pointerEvents = "";
+        if (loApp) {
+            loApp.style.opacity = "";
+            loApp.style.pointerEvents = "";
+        }
     };
-    const handleMaximize = () => {
-        setSizeClass("maximize");
-        if (isFloating)
-            applyFloatingMaximized(el);
+    el.addEventListener(EVENTS.ACC_READY, onAccReady);
+    if (!isFloating)
+        return;
+    const onMaximize = () => {
+        el.classList.remove("initial", "minimize");
+        el.classList.add("maximize");
     };
-    const handleMinimize = () => {
-        setSizeClass("minimize");
-        if (isFloating)
-            applyFloatingMinimized(el);
+    const onMinimize = () => {
+        el.classList.remove("maximize");
+        el.classList.add("minimize");
+        container.style.setProperty("--agentic-chat-container-height", FLOATING_DIMENSIONS.MINIMIZED_HEIGHT);
     };
-    el.addEventListener(ACC_MAXIMIZE_EVENT, handleMaximize);
-    el.addEventListener(ACC_MINIMIZE_EVENT, handleMinimize);
+    el.addEventListener(EVENTS.ACC_MAXIMIZE, onMaximize);
+    el.addEventListener(EVENTS.ACC_MINIMIZE, onMinimize);
 }
-function createAndMountChatClient(container, clientConfig) {
+function createAndMountFrame(container, clientConfig, loApp) {
+    injectStyles();
     const config = { ...(clientConfig ?? {}) };
     const context = getRenderingContext(config);
-    const el = createChatClientElement();
+    const el = createFrameElement();
     el.configuration = config;
-    applyInitialClientStyles(el, context);
-    attachResizeHandlers(el, context.isFloating);
+    applyFrameInitialState(el, context, container);
+    attachFrameResizeHandlers(el, container, context.isFloating, loApp);
     container.appendChild(el);
     return el;
 }
-/**
- * Resolves a container parameter to an HTMLElement
- * @param container - CSS selector or HTMLElement
- * @returns The resolved HTMLElement or null if not found
- * @internal
- */
-function resolveContainer(container) {
-    if (container instanceof HTMLElement)
-        return container;
-    if (typeof container === "string")
-        return document.querySelector(container);
-    return null;
-}
-/**
- * Create and configure the Lightning Out application and chat client component
- * @param container - The container element
- * @param salesforceOrigin - The Salesforce origin URL
- * @param agentforceClientConfig - Configuration for the Agentforce client
- * @returns The created Lightning Out app and chat client component
- * @internal
- */
+// ═══════════════════════════════════════════════════════════════════════════════
+// LIGHTNING OUT – LO app creation and error handling
+// ═══════════════════════════════════════════════════════════════════════════════
 function createAndMountLoApp(container, salesforceOrigin, appId, frontdoorUrl) {
     const loApp = new LightningOutApplication();
-    if (salesforceOrigin) {
+    if (salesforceOrigin)
         loApp.setAttribute("org-url", salesforceOrigin);
-    }
     loApp.setAttribute("components", `${AGENTFORCE_CLIENT_NAMESPACE}/${AGENTFORCE_CLIENT_COMPONENT_NAME}`);
-    if (appId) {
+    if (appId)
         loApp.setAttribute("app-id", appId);
-    }
-    if (frontdoorUrl) {
+    if (frontdoorUrl)
         loApp.setAttribute("frontdoor-url", frontdoorUrl);
-    }
-    loApp.style.background = "transparent";
+    loApp.style.opacity = "0";
+    loApp.style.pointerEvents = "none";
+    attachLoEventHandlers(loApp);
     container.appendChild(loApp);
     return loApp;
 }
-function attachLoAppErrorHandler(loApp) {
-    loApp.addEventListener("lo.application.error", (event) => {
-        console.error("Agentforce Conversation Client: Lightning Out error:", event.detail);
+function attachLoEventHandlers(loApp) {
+    loApp.addEventListener("lo.application.ready", (e) => {
+        console.log("Agentforce Conversation Client: Lightning Out ready", e.detail != null ? e.detail : "");
+    });
+    loApp.addEventListener("lo.application.error", (e) => {
+        console.error("Agentforce Conversation Client: Lightning Out error:", e.detail);
+    });
+    loApp.addEventListener("lo.iframe.error", (e) => {
+        console.error("Agentforce Conversation Client: Lightning Out iframe error:", e.detail);
     });
 }
+// ═══════════════════════════════════════════════════════════════════════════════
+// CONTAINER & EMBED
+// ═══════════════════════════════════════════════════════════════════════════════
+function resolveContainer(container) {
+    if (container instanceof HTMLElement)
+        return container;
+    if (typeof container === "string")
+        return document.querySelector(container);
+    return null;
+}
 function embedIntoContainer(containerElement, options) {
     const { salesforceOrigin, appId, frontdoorUrl, agentforceClientConfig = {} } = options;
+    containerElement.classList.add("acc-container");
     const loApp = createAndMountLoApp(containerElement, salesforceOrigin, appId, frontdoorUrl);
-    attachLoAppErrorHandler(loApp);
-    const chatClientComponent = createAndMountChatClient(containerElement, agentforceClientConfig);
+    const chatClientComponent = createAndMountFrame(containerElement, agentforceClientConfig, loApp);
     return { loApp, chatClientComponent };
 }
+// ═══════════════════════════════════════════════════════════════════════════════
+// PUBLIC API
+// ═══════════════════════════════════════════════════════════════════════════════
 /**
- * Embeds the Agentforce Conversation Client into a specified DOM container.
- *
- * @param options - Configuration options
- * @returns The created elements
- * @throws Error if required options are missing
+ * Embeds the Agentforce Conversation Client into a DOM container.
+ * Embed is hidden (opacity 0) until the frame receives the "accready" event.
  *
  * @example
- * ```ts
- * embedAgentforceClient({
- *   container: '#agentforce-conversation-client-container',
+ * const { loApp, chatClientComponent } = embedAgentforceClient({
+ *   container: '#agentforce-container',
  *   salesforceOrigin: 'https://myorg.my.salesforce.com',
- *   agentforceClientConfig: { styleTokens: { MessageBlockInboundColor: '#0176d3' } }
- * });
- * ```
- *
- * @example
- * ```ts
- * // Listen for Lightning Out events after embedding
- * const { loApp } = embedAgentforceClient({ ... });
- *
- * loApp.addEventListener('lo.application.ready', () => {
- *   console.log('Lightning Out is ready');
- * });
- *
- * loApp.addEventListener('lo.component.ready', (event) => {
- *   console.log('Component ready:', event.detail.componentName);
+ *   agentforceClientConfig: { renderingConfig: { mode: 'Floating' } }
  * });
- * ```
  */
 export function embedAgentforceClient(options) {
     const { container, salesforceOrigin, appId, frontdoorUrl, agentforceClientConfig = {}, } = options ?? {};

package/dist/index.spec.js

@@ -45,7 +45,7 @@ describe("Agentforce Conversation Client SDK", () => {
             });
         }).toThrow("Agentforce Conversation Client: container is required");
     });
-    it("throws when salesforceOrigin is missing", () => {
+    it("throws when neither salesforceOrigin nor frontdoorUrl is provided", () => {
         expect(() => {
             embedAgentforceClient({
                 container: "#test-container",
@@ -130,23 +130,19 @@ describe("Agentforce Conversation Client SDK", () => {
         });
         chatClientComponent.dispatchEvent(new Event("accmaximize"));
         expect(chatClientComponent.classList.contains("maximize")).toBe(true);
-        expect(chatClientComponent.style.width).toBe("380px");
-        expect(chatClientComponent.style.height).toBe("540px");
         chatClientComponent.dispatchEvent(new Event("accminimize"));
         expect(chatClientComponent.classList.contains("minimize")).toBe(true);
-        expect(chatClientComponent.style.width).toBe("145px");
-        expect(chatClientComponent.style.height).toBe("56px");
     });
     it("applies inline width/height when configured", () => {
-        const { chatClientComponent } = embedAgentforceClient({
+        embedAgentforceClient({
             container: "#test-container",
             salesforceOrigin: "https://test.salesforce.com",
             agentforceClientConfig: {
                 renderingConfig: { mode: "inline", width: 420, height: 600 },
             },
         });
-        expect(chatClientComponent.style.width).toBe("420px");
-        expect(chatClientComponent.style.height).toBe("600px");
-        expect(chatClientComponent.style.getPropertyValue("--agentic-chat-container-height")).toBe("600px");
+        expect(container.style.getPropertyValue("--acc-width")).toBe("420px");
+        expect(container.style.getPropertyValue("--acc-height")).toBe("600px");
+        expect(container.style.getPropertyValue("--agentic-chat-container-height")).toBe("600px");
     });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/agentforce-conversation-client",
   "description": "Agentforce Conversation Client SDK for embedding via Lightning Out 2.0",
-  "version": "1.25.0",
+  "version": "1.25.2",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3e523f7686a9863422228d253bb538c123a2ff53"
+  "gitHead": "6e4299053c2bdad6b1eb6d81c983368bd539e711"
 }