npm - @eka-care/medassist-widget-embed - Versions diffs - 0.2.7 → 0.2.9 - Mend

@eka-care/medassist-widget-embed 0.2.7 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/iframe.html CHANGED Viewed

@@ -21,17 +21,37 @@
         position: fixed;
         top: 0;
         left: 0;
+        background-color: #1a1a1a;
       }
       #root {
         width: 100vw;
         height: 100vh;
         height: 100dvh; /* Dynamic viewport height for mobile */
         position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #1a1a1a;
+      }
+      .loader {
+        width: 48px;
+        height: 48px;
+        border: 3px solid rgba(255, 255, 255, 0.1);
+        border-top-color: #09FBD3;
+        border-radius: 50%;
+        animation: loader-spin 0.8s linear infinite;
+      }
+      @keyframes loader-spin {
+        to {
+          transform: rotate(360deg);
+        }
       }
     </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div class="loader" aria-hidden="true"></div>
+    </div>
     <!-- for local development -->
     <!-- <script src="./iframe.js" data-widget-assets="local" async></script> -->

package/dist/iframe.js CHANGED Viewed

@@ -40,6 +40,22 @@
             ...(apiTheme.title_img && { titleImg: apiTheme.title_img }),
         };
     }
+    /** Preload an image by URL so it is cached and loads faster when the widget uses it. */
+    function preloadImage(url) {
+        if (!url || typeof document === "undefined")
+            return;
+        try {
+            const link = document.createElement("link");
+            link.rel = "preload";
+            link.as = "image";
+            link.href = url;
+            document.head.appendChild(link);
+        }
+        catch {
+            const img = new Image();
+            img.src = url;
+        }
+    }
     /** Fetch agent-config from API with timeout; aborts if pending > 10s */
     async function fetchAgentConfig(baseUrl, agentId) {
         var _a;
@@ -142,6 +158,26 @@
     const agentConfigPromise = earlyAgentId && earlyBaseUrl
         ? fetchAgentConfig(earlyBaseUrl, earlyAgentId)
         : Promise.resolve(undefined);
+    // Preload background image when available (theme URL param or agent-config)
+    if (typeof document !== "undefined" && document.head) {
+        const themeParam = urlParams.get("theme");
+        if (themeParam) {
+            try {
+                const theme = JSON.parse(themeParam);
+                if (theme.backgroundImage)
+                    preloadImage(theme.backgroundImage);
+            }
+            catch {
+                // ignore
+            }
+        }
+        agentConfigPromise.then((agentConfig) => {
+            var _a;
+            const url = (_a = agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.theme) === null || _a === void 0 ? void 0 : _a.background_img;
+            if (url)
+                preloadImage(url);
+        });
+    }
     // Auto-initialize from URL parameters (no shadow DOM needed in iframe)
     const initializeFromUrlParams = async () => {
         var _a, _b, _c, _d, _e;

package/dist/index.d.ts CHANGED Viewed

@@ -34,6 +34,8 @@ type MedAssistInitConfig = {
 };
 /** Map agent-config API theme to widget theme (mode → textColor: dark→black, light→white) */
 declare function mapAgentConfigThemeToWidgetTheme(apiTheme: AgentConfig["theme"] | undefined): MedAssistInitConfig["theme"];
+/** Preload an image by URL so it is cached and loads faster when the widget uses it. */
+declare function preloadImage(url: string): void;
 /** Fetch agent-config from API and return theme from response data */
 declare function fetchAgentConfig(baseUrl: string, agentId: string): Promise<AgentConfig | undefined>;
 interface EkaMedAssistWindow extends Window {
@@ -51,6 +53,8 @@ declare const WIDGET_JS_URL: string;
 declare const WIDGET_CSS_URL: string;
 declare let widgetScriptPromise: Promise<void> | null;
 declare let widgetCssTextPromise: Promise<string> | null;
+/** Start fetching widget CSS (shared promise). Used for preload and by loadWidgetCss. */
+declare function getWidgetCssTextPromise(): Promise<string>;
 declare class MedAssistWidgetLoader extends HTMLElement {
     private defaultIconUrl;
     private widgetLoaded;
@@ -59,6 +63,10 @@ declare class MedAssistWidgetLoader extends HTMLElement {
     static get observedAttributes(): string[];
     connectedCallback(): void;
     attributeChangedCallback(name: string): void;
+    /** When in widget mode, start loading JS and CSS on page load so first open is faster. */
+    private preloadWidgetAssets;
+    /** Preload theme background image from init config, theme attribute, or agent-config API. */
+    private preloadBackgroundImage;
     private setupAuthExpirationListener;
     openFromBridge(): void;
     renderButton(): void;

package/dist/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,QAAO,iBAAiB,GAAG,IAahD,CAAC;AAEF,KAAK,iBAAiB,GAAG,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;AAElE,QAAA,MAAM,cAAc,GAClB,OAAO,MAAM,GAAG,IAAI,KACnB,iBAAiB,GAAG,SAStB,CAAC;AAEF,QAAA,MAAM,QAAQ,0BAAqB,CAAC;AAGpC,QAAA,MAAM,yBAAyB,QAK3B,CAAC;AAEL,6FAA6F;AAC7F,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QACN,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QACN,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;KAC/B,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,6FAA6F;AAC7F,iBAAS,gCAAgC,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,SAAS,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAUlH;AAED,sEAAsE;AACtE,iBAAe,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC,CAYlG;AAED,UAAU,kBAAmB,SAAQ,MAAM;IACzC,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;QAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,sBAAsB,CAAC,EAAE,mBAAmB,CAAC;CAC9C;AAED,QAAA,MAAM,qBAAqB,EAAE,mBAAwB,CAAC;AAEtD,QAAA,MAAM,gBAAgB,QAAO,WAAW,GAAG,IAK1C,CAAC;~~AA6BF~~,QAAA,MAAM,aAAa,QASf,CAAC;AAEL,QAAA,MAAM,kBAAkB,QAmBpB,CAAC;AAEL,QAAA,MAAM,aAAa,QAA6C,CAAC;AACjE,QAAA,MAAM,cAAc,QAA8C,CAAC;AAEnE,QAAA,IAAI,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAW,CAAC;AACrD,QAAA,IAAI,oBAAoB,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,IAAW,CAAC;AAExD,cAAM,qBAAsB,SAAQ,WAAW;IAC7C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,WAAW,CAAoB;;IAavC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,iBAAiB,IAAI,IAAI;~~IAQzB~~,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAmB5C,OAAO,CAAC,2BAA2B;IAe5B,cAAc,IAAI,IAAI;IAgB7B,YAAY,IAAI,IAAI;IAiEpB,kBAAkB,IAAI,IAAI;IA6BpB,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IA6G9B,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;~~IA4BpC~~,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;CA0ClC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,gBAAgB,QAAO,iBAAiB,GAAG,IAahD,CAAC;AAEF,KAAK,iBAAiB,GAAG,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;AAElE,QAAA,MAAM,cAAc,GAClB,OAAO,MAAM,GAAG,IAAI,KACnB,iBAAiB,GAAG,SAStB,CAAC;AAEF,QAAA,MAAM,QAAQ,0BAAqB,CAAC;AAGpC,QAAA,MAAM,yBAAyB,QAK3B,CAAC;AAEL,6FAA6F;AAC7F,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QACN,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACxB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;CACF,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QACN,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,SAAS,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;KAC/B,CAAC;IACF,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAEF,6FAA6F;AAC7F,iBAAS,gCAAgC,CAAC,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,SAAS,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAUlH;AAED,wFAAwF;AACxF,iBAAS,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAavC;AAED,sEAAsE;AACtE,iBAAe,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC,CAYlG;AAED,UAAU,kBAAmB,SAAQ,MAAM;IACzC,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAC;QAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACtB,CAAC;IACF,sBAAsB,CAAC,EAAE,mBAAmB,CAAC;CAC9C;AAED,QAAA,MAAM,qBAAqB,EAAE,mBAAwB,CAAC;AAEtD,QAAA,MAAM,gBAAgB,QAAO,WAAW,GAAG,IAK1C,CAAC;AAiCF,QAAA,MAAM,aAAa,QASf,CAAC;AAEL,QAAA,MAAM,kBAAkB,QAmBpB,CAAC;AAEL,QAAA,MAAM,aAAa,QAA6C,CAAC;AACjE,QAAA,MAAM,cAAc,QAA8C,CAAC;AAEnE,QAAA,IAAI,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,IAAW,CAAC;AACrD,QAAA,IAAI,oBAAoB,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,IAAW,CAAC;AAExD,yFAAyF;AACzF,iBAAS,uBAAuB,IAAI,OAAO,CAAC,MAAM,CAAC,CAYlD;AAED,cAAM,qBAAsB,SAAQ,WAAW;IAC7C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAU;IAC9B,OAAO,CAAC,WAAW,CAAoB;;IAavC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,iBAAiB,IAAI,IAAI;IASzB,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAmB5C,0FAA0F;IAC1F,OAAO,CAAC,mBAAmB;IAM3B,6FAA6F;IAC7F,OAAO,CAAC,sBAAsB;IAoC9B,OAAO,CAAC,2BAA2B;IAe5B,cAAc,IAAI,IAAI;IAgB7B,YAAY,IAAI,IAAI;IAiEpB,kBAAkB,IAAI,IAAI;IA6BpB,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IA6G9B,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC;IAiBpC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;CA0ClC"}

package/dist/index.js CHANGED Viewed

@@ -41,6 +41,23 @@ function mapAgentConfigThemeToWidgetTheme(apiTheme) {
         ...(apiTheme.title_img && { titleImg: apiTheme.title_img }),
     };
 }
+/** Preload an image by URL so it is cached and loads faster when the widget uses it. */
+function preloadImage(url) {
+    if (!url || typeof document === "undefined")
+        return;
+    try {
+        const link = document.createElement("link");
+        link.rel = "preload";
+        link.as = "image";
+        link.href = url;
+        document.head.appendChild(link);
+    }
+    catch {
+        // fallback: use Image to prime cache
+        const img = new Image();
+        img.src = url;
+    }
+}
 /** Fetch agent-config from API and return theme from response data */
 async function fetchAgentConfig(baseUrl, agentId) {
     const url = `${baseUrl.replace(/\/$/, "")}/med-assist/agent-config/${agentId}`;
@@ -68,7 +85,7 @@ if (typeof window !== "undefined") {
     w.__ekaMedAssistConfig__ = globalMedAssistConfig;
     w.EkaMedAssist = {
         init(config) {
-            var _a, _b;
+            var _a, _b, _c;
             Object.assign(globalMedAssistConfig, config);
             const el = getWidgetElement();
             if (!el)
@@ -89,7 +106,10 @@ if (typeof window !== "undefined") {
                     console.warn("Failed to stringify context passed to init");
                 }
             }
-            (_b = (_a = el).openFromBridge) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if ((_a = config.theme) === null || _a === void 0 ? void 0 : _a.backgroundImage) {
+                preloadImage(config.theme.backgroundImage);
+            }
+            (_c = (_b = el).openFromBridge) === null || _c === void 0 ? void 0 : _c.call(_b);
         },
     };
 }
@@ -126,6 +146,18 @@ const WIDGET_JS_URL = `${widgetAssetBaseUrl}medassist-widget.js`;
 const WIDGET_CSS_URL = `${widgetAssetBaseUrl}medassist-widget.css`;
 let widgetScriptPromise = null;
 let widgetCssTextPromise = null;
+/** Start fetching widget CSS (shared promise). Used for preload and by loadWidgetCss. */
+function getWidgetCssTextPromise() {
+    if (!widgetCssTextPromise) {
+        widgetCssTextPromise = fetch(WIDGET_CSS_URL).then((response) => {
+            if (!response.ok) {
+                throw new Error(`Unable to fetch widget styles from ${WIDGET_CSS_URL}`);
+            }
+            return response.text();
+        });
+    }
+    return widgetCssTextPromise;
+}
 class MedAssistWidgetLoader extends HTMLElement {
     constructor() {
         super();
@@ -145,6 +177,7 @@ class MedAssistWidgetLoader extends HTMLElement {
         }
         else {
             this.renderButton();
+            this.preloadWidgetAssets();
         }
     }
     attributeChangedCallback(name) {
@@ -166,6 +199,49 @@ class MedAssistWidgetLoader extends HTMLElement {
             }
         }
     }
+    /** When in widget mode, start loading JS and CSS on page load so first open is faster. */
+    preloadWidgetAssets() {
+        getWidgetCssTextPromise(); // start CSS fetch (no inject until open)
+        void this.loadWidgetScript(); // start JS load
+        void this.preloadBackgroundImage();
+    }
+    /** Preload theme background image from init config, theme attribute, or agent-config API. */
+    preloadBackgroundImage() {
+        var _a;
+        const initConfig = typeof window !== "undefined"
+            ? window.__ekaMedAssistConfig__
+            : undefined;
+        const attributeTheme = this.getAttribute("theme")
+            ? (() => {
+                try {
+                    return JSON.parse(this.getAttribute("theme") || "{}");
+                }
+                catch {
+                    return undefined;
+                }
+            })()
+            : undefined;
+        const fromInit = (_a = initConfig === null || initConfig === void 0 ? void 0 : initConfig.theme) === null || _a === void 0 ? void 0 : _a.backgroundImage;
+        const fromAttr = attributeTheme === null || attributeTheme === void 0 ? void 0 : attributeTheme.backgroundImage;
+        if (fromInit)
+            preloadImage(fromInit);
+        if (fromAttr && fromAttr !== fromInit)
+            preloadImage(fromAttr);
+        const baseUrl = (initConfig === null || initConfig === void 0 ? void 0 : initConfig.baseUrl) || this.getAttribute("base-url") || "";
+        const agentId = (initConfig === null || initConfig === void 0 ? void 0 : initConfig.agentId) || this.getAttribute("agent-id") || "";
+        if (baseUrl && agentId) {
+            fetchAgentConfig(baseUrl, agentId)
+                .then((agentConfig) => {
+                var _a;
+                const url = (_a = agentConfig === null || agentConfig === void 0 ? void 0 : agentConfig.theme) === null || _a === void 0 ? void 0 : _a.background_img;
+                if (url)
+                    preloadImage(url);
+            })
+                .catch(() => {
+                // ignore; widget will load config when it opens
+            });
+        }
+    }
     setupAuthExpirationListener() {
         if (typeof window === "undefined")
             return;
@@ -391,15 +467,7 @@ class MedAssistWidgetLoader extends HTMLElement {
         if (shadowRoot.querySelector("[data-medassist-style='true']")) {
             return;
         }
-        if (!widgetCssTextPromise) {
-            widgetCssTextPromise = fetch(WIDGET_CSS_URL).then((response) => {
-                if (!response.ok) {
-                    throw new Error(`Unable to fetch widget styles from ${WIDGET_CSS_URL}`);
-                }
-                return response.text();
-            });
-        }
-        const cssText = await widgetCssTextPromise;
+        const cssText = await getWidgetCssTextPromise();
         const styleTag = document.createElement("style");
         styleTag.setAttribute("data-medassist-style", "true");
         styleTag.textContent = cssText;

package/iframe.html CHANGED Viewed

@@ -21,17 +21,37 @@
         position: fixed;
         top: 0;
         left: 0;
+        background-color: #1a1a1a;
       }
       #root {
         width: 100vw;
         height: 100vh;
         height: 100dvh; /* Dynamic viewport height for mobile */
         position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #1a1a1a;
+      }
+      .loader {
+        width: 48px;
+        height: 48px;
+        border: 3px solid rgba(255, 255, 255, 0.1);
+        border-top-color: #09FBD3;
+        border-radius: 50%;
+        animation: loader-spin 0.8s linear infinite;
+      }
+      @keyframes loader-spin {
+        to {
+          transform: rotate(360deg);
+        }
       }
     </style>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <div class="loader" aria-hidden="true"></div>
+    </div>
     <!-- for local development -->
     <!-- <script src="./iframe.js" data-widget-assets="local" async></script> -->

package/iframe.ts CHANGED Viewed

@@ -74,6 +74,21 @@
     };
   }
+  /** Preload an image by URL so it is cached and loads faster when the widget uses it. */
+  function preloadImage(url: string): void {
+    if (!url || typeof document === "undefined") return;
+    try {
+      const link = document.createElement("link");
+      link.rel = "preload";
+      link.as = "image";
+      link.href = url;
+      document.head.appendChild(link);
+    } catch {
+      const img = new Image();
+      img.src = url;
+    }
+  }
   /** Fetch agent-config from API with timeout; aborts if pending > 10s */
   async function fetchAgentConfig(
     baseUrl: string,
@@ -188,6 +203,23 @@
       ? fetchAgentConfig(earlyBaseUrl, earlyAgentId)
       : Promise.resolve(undefined);
+  // Preload background image when available (theme URL param or agent-config)
+  if (typeof document !== "undefined" && document.head) {
+    const themeParam = urlParams.get("theme");
+    if (themeParam) {
+      try {
+        const theme = JSON.parse(themeParam) as WidgetTheme;
+        if (theme.backgroundImage) preloadImage(theme.backgroundImage);
+      } catch {
+        // ignore
+      }
+    }
+    agentConfigPromise.then((agentConfig) => {
+      const url = agentConfig?.theme?.background_img;
+      if (url) preloadImage(url);
+    });
+  }
   // Auto-initialize from URL parameters (no shadow DOM needed in iframe)
   const initializeFromUrlParams = async (): Promise<void> => {
     const agentId = urlParams.get("agentId");

package/index.ts CHANGED Viewed

@@ -82,6 +82,22 @@ function mapAgentConfigThemeToWidgetTheme(apiTheme: AgentConfig["theme"] | undef
   };
 }
+/** Preload an image by URL so it is cached and loads faster when the widget uses it. */
+function preloadImage(url: string): void {
+  if (!url || typeof document === "undefined") return;
+  try {
+    const link = document.createElement("link");
+    link.rel = "preload";
+    link.as = "image";
+    link.href = url;
+    document.head.appendChild(link);
+  } catch {
+    // fallback: use Image to prime cache
+    const img = new Image();
+    img.src = url;
+  }
+}
 /** Fetch agent-config from API and return theme from response data */
 async function fetchAgentConfig(baseUrl: string, agentId: string): Promise<AgentConfig | undefined> {
   const url = `${baseUrl.replace(/\/$/, "")}/med-assist/agent-config/${agentId}`;
@@ -136,6 +152,10 @@ if (typeof window !== "undefined") {
         }
       }
+      if (config.theme?.backgroundImage) {
+        preloadImage(config.theme.backgroundImage);
+      }
       (el as any).openFromBridge?.();
     },
   };
@@ -179,6 +199,21 @@ const WIDGET_CSS_URL = `${widgetAssetBaseUrl}medassist-widget.css`;
 let widgetScriptPromise: Promise<void> | null = null;
 let widgetCssTextPromise: Promise<string> | null = null;
+/** Start fetching widget CSS (shared promise). Used for preload and by loadWidgetCss. */
+function getWidgetCssTextPromise(): Promise<string> {
+  if (!widgetCssTextPromise) {
+    widgetCssTextPromise = fetch(WIDGET_CSS_URL).then((response) => {
+      if (!response.ok) {
+        throw new Error(
+          `Unable to fetch widget styles from ${WIDGET_CSS_URL}`
+        );
+      }
+      return response.text();
+    });
+  }
+  return widgetCssTextPromise;
+}
 class MedAssistWidgetLoader extends HTMLElement {
   private defaultIconUrl: string;
   private widgetLoaded: boolean;
@@ -204,6 +239,7 @@ class MedAssistWidgetLoader extends HTMLElement {
       this.initializeFullMode();
     } else {
       this.renderButton();
+      this.preloadWidgetAssets();
     }
   }
@@ -226,6 +262,50 @@ class MedAssistWidgetLoader extends HTMLElement {
     }
   }
+  /** When in widget mode, start loading JS and CSS on page load so first open is faster. */
+  private preloadWidgetAssets(): void {
+    getWidgetCssTextPromise(); // start CSS fetch (no inject until open)
+    void this.loadWidgetScript(); // start JS load
+    void this.preloadBackgroundImage();
+  }
+  /** Preload theme background image from init config, theme attribute, or agent-config API. */
+  private preloadBackgroundImage(): void {
+    const initConfig =
+      typeof window !== "undefined"
+        ? (window as EkaMedAssistWindow).__ekaMedAssistConfig__
+        : undefined;
+    const attributeTheme = this.getAttribute("theme")
+      ? (() => {
+          try {
+            return JSON.parse(this.getAttribute("theme") || "{}") as { backgroundImage?: string };
+          } catch {
+            return undefined;
+          }
+        })()
+      : undefined;
+    const fromInit = initConfig?.theme?.backgroundImage;
+    const fromAttr = attributeTheme?.backgroundImage;
+    if (fromInit) preloadImage(fromInit);
+    if (fromAttr && fromAttr !== fromInit) preloadImage(fromAttr);
+    const baseUrl =
+      (initConfig?.baseUrl as string) || this.getAttribute("base-url") || "";
+    const agentId =
+      (initConfig?.agentId as string) || this.getAttribute("agent-id") || "";
+    if (baseUrl && agentId) {
+      fetchAgentConfig(baseUrl, agentId)
+        .then((agentConfig) => {
+          const url = agentConfig?.theme?.background_img;
+          if (url) preloadImage(url);
+        })
+        .catch(() => {
+          // ignore; widget will load config when it opens
+        });
+    }
+  }
   private setupAuthExpirationListener(): void {
     if (typeof window === "undefined") return;
@@ -470,18 +550,7 @@ class MedAssistWidgetLoader extends HTMLElement {
       return;
     }
-    if (!widgetCssTextPromise) {
-      widgetCssTextPromise = fetch(WIDGET_CSS_URL).then((response) => {
-        if (!response.ok) {
-          throw new Error(
-            `Unable to fetch widget styles from ${WIDGET_CSS_URL}`
-          );
-        }
-        return response.text();
-      });
-    }
-    const cssText = await widgetCssTextPromise;
+    const cssText = await getWidgetCssTextPromise();
     const styleTag = document.createElement("style");
     styleTag.setAttribute("data-medassist-style", "true");
     styleTag.textContent = cssText;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@eka-care/medassist-widget-embed",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "Embeddable MedAssist widget loader built with Web Components.",
   "author": "Geethanjali S",
   "license": "MIT",

package/test.html CHANGED Viewed

@@ -30,7 +30,6 @@
       agent-id="MmE3Y2Y0NDctNTM4Mi00MDUzLWFmODgtZDRiOWM2NmMzMDBlIzcxNzY5NjA3ODkzNjIyNzg="
       icon-url="https://cdn.eka.care/bot-icon.svg" //add your own icon url here
       title="Moolchand Assist"
-      environment="development"
       base-url="https://e3b3-125-17-125-117.ngrok-free.app/reloaded"
     </eka-medassist-widget>
     <!-- <script>