@eka-care/medassist-widget-embed 0.2.3 → 0.2.5

package/iframe.ts

@@ -29,6 +29,77 @@
     return undefined;
   };
 
+  /** Theme from agent-config API (has mode; textColor derived: dark → black, light → white) */
+  type AgentConfig = {
+    name?: string;
+    theme?: {
+      background?: string;
+      background_img?: string;
+      accent?: string;
+      mode?: "light" | "dark";
+      title_img?: string;
+      icon_img?: string;
+    };
+  };
+
+  type WidgetTheme = {
+    background?: string;
+    backgroundImage?: string;
+    primary?: string;
+    textColor?: "black" | "white";
+    titleImg?: string;
+  };
+
+  const API_FETCH_TIMEOUT_MS = 10000;
+
+  /** Map agent-config API theme to widget theme (mode → textColor: dark→black, light→white) */
+  function mapAgentConfigThemeToWidgetTheme(
+    apiTheme: AgentConfig["theme"] | undefined
+  ): WidgetTheme | undefined {
+    if (!apiTheme) return undefined;
+    const textColor =
+      apiTheme.mode === "dark"
+        ? "white"
+        : apiTheme.mode === "light"
+          ? "black"
+          : undefined;
+    return {
+      ...(apiTheme.background && { background: apiTheme.background }),
+      ...(apiTheme.background_img && {
+        backgroundImage: apiTheme.background_img,
+      }),
+      ...(apiTheme.accent && { primary: apiTheme.accent }),
+      ...(textColor && { textColor }),
+      ...(apiTheme.title_img && { titleImg: apiTheme.title_img }),
+    };
+  }
+
+  /** Fetch agent-config from API with timeout; aborts if pending > 10s */
+  async function fetchAgentConfig(
+    baseUrl: string,
+    agentId: string
+  ): Promise<AgentConfig | undefined> {
+    const url = `${baseUrl.replace(/\/$/, "")}/med-assist/agent-config/${agentId}`;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), API_FETCH_TIMEOUT_MS);
+    try {
+      const res = await fetch(url, {
+        signal: controller.signal,
+        headers: {
+          "ngrok-skip-browser-warning": "69420",
+        },
+      });
+      if (!res.ok) return undefined;
+      const json = await res.json();
+      if (json?.success && json?.data?.theme) return json.data as AgentConfig;
+      return undefined;
+    } catch {
+      return undefined;
+    } finally {
+      clearTimeout(timeoutId);
+    }
+  }
+
   const DEFAULT_WIDGET_ASSET_BASE =
     "https://unpkg.com/@eka-care/medassist-widget@latest/dist/";
 
@@ -81,35 +152,64 @@
       return;
     }
 
-    const title = urlParams.get("title") || "Medi Clinic";
-    const iconUrl = urlParams.get("iconUrl") || undefined;
+    let title = urlParams.get("title") || "Medi Clinic";
+    let iconUrl = urlParams.get("iconUrl") || undefined;
     const context = urlParams.get("context");
-    const baseUrl = urlParams.get("baseUrl") || undefined;
+    const baseUrl = urlParams.get("baseUrl") || "https://matrix.eka.care/reloaded";
     const environment =
       getEnvironment(urlParams.get("environment")) ?? "production";
+    const attributeTheme = urlParams.get("theme")
+      ? (() => {
+        try {
+          return JSON.parse(urlParams.get("theme") || "{}") as WidgetTheme;
+        } catch {
+          return undefined;
+        }
+      })()
+      : undefined;
     const container = document.getElementById("root") || document.body;
     try {
-      await Promise.all([
-        loadWidgetCss(),
-        loadWidgetScript(),
-      ])
-      if (!window?.renderMedAssist || typeof window?.renderMedAssist !== "function") {
+      await Promise.all([loadWidgetCss(), loadWidgetScript()]);
+      if (
+        !window?.renderMedAssist ||
+        typeof window?.renderMedAssist !== "function"
+      ) {
         throw new Error("renderMedAssist is not available on window");
       }
 
+      // Fetch agent-config when baseUrl is available; 10s timeout aborts pending request
+      let apiTheme: WidgetTheme | undefined;
+      console.log("base url", baseUrl);
+
+      if (baseUrl) {
+        try {
+          const agentConfig = await fetchAgentConfig(baseUrl, agentId);
+          title = agentConfig?.name ?? title;
+          iconUrl = agentConfig?.theme?.icon_img ?? iconUrl;
+          apiTheme = mapAgentConfigThemeToWidgetTheme(
+            agentConfig?.theme ?? undefined
+          );
+        } catch {
+          // ignore; use URL params only
+        }
+      }
+
       const config = {
         title,
         iconUrl,
         environment,
         onClose: () => {
-          // Send message to parent window to close iframe
           if (window.parent !== window) {
             window.parent.postMessage({ type: "WIDGET_CLOSE" }, "*");
           }
         },
         context: context ? JSON.parse(context) : undefined,
         baseUrl,
-        displayMode: "full" as "full" | "widget",//for iframe default display mode is full
+        displayMode: "full" as "full" | "widget",
+        theme: {
+          ...(apiTheme ?? {}),
+          ...(attributeTheme ?? {}),
+        },
       };
       window.renderMedAssist(container, agentId, config);
     } catch (error) {

package/index.ts

@@ -38,6 +38,19 @@ const DEFAULT_WIDGET_ASSET_BASE = (() => {
   return "https://unpkg.com/@eka-care/medassist-widget@latest/dist/";
 })();
 
+/** Theme from agent-config API (has mode; textColor derived: dark → black, light → white) */
+type AgentConfig = {
+  name?: string;
+  theme?: {
+    background?: string;
+    background_img?: string;
+    accent?: string;
+    mode?: "light" | "dark";
+    title_img?: string;
+    icon_img?: string
+  }
+};
+
 type MedAssistInitConfig = {
   auth?: string;
   agentId?: string;
@@ -45,9 +58,43 @@ type MedAssistInitConfig = {
   title?: string;
   iconUrl?: string;
   baseUrl?: string;
+  theme?: {
+    background?: string;
+    backgroundImage?: string;
+    primary?: string;
+    textColor?: "black" | "white";
+  };
   [key: string]: unknown;
 };
 
+/** Map agent-config API theme to widget theme (mode → textColor: dark→black, light→white) */
+function mapAgentConfigThemeToWidgetTheme(apiTheme: AgentConfig["theme"] | undefined): MedAssistInitConfig["theme"] {
+  if (!apiTheme) return undefined;
+  const textColor = apiTheme.mode === "dark" ? "white" : apiTheme.mode === "light" ? "black" : undefined;
+  return {
+    ...(apiTheme.background && { background: apiTheme.background }),
+    ...(apiTheme.background_img && { backgroundImage: apiTheme.background_img }),
+    ...(apiTheme.accent && { primary: apiTheme.accent }),
+    ...(textColor && { textColor }),
+    ...(apiTheme.title_img && { titleImg: apiTheme.title_img }),
+  };
+}
+
+/** 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}`;
+  const res = await fetch(url, {
+    headers: {
+      "ngrok-skip-browser-warning": "69420",
+    },
+  });
+
+  if (!res.ok) return undefined;
+  const json = await res.json();
+  if (json?.success && json?.data?.theme) return json.data as AgentConfig;
+  return undefined;
+}
+
 interface EkaMedAssistWindow extends Window {
   EkaMedAssist?: {
     init: (config: MedAssistInitConfig) => void;
@@ -142,7 +189,6 @@ class MedAssistWidgetLoader extends HTMLElement {
     this.widgetLoaded = false;
     this.displayMode = this.getAttribute("display-mode") === "full" ? "full" : "widget";
 
-    this.preloadResources();
     // Listen for AUTH_EXPIRED events from the widget and forward to parent
     this.setupAuthExpirationListener();
   }
@@ -178,28 +224,6 @@ class MedAssistWidgetLoader extends HTMLElement {
     }
   }
 
-  // Preload resources in the background
-  private preloadResources(): void {
-    // Preload CSS (browser will cache it)
-    if (!document.querySelector(`link[href="${WIDGET_CSS_URL}"]`)) {
-      const cssLink = document.createElement("link");
-      cssLink.rel = "preload";
-      cssLink.href = WIDGET_CSS_URL;
-      cssLink.as = "style";
-      document.head.appendChild(cssLink);
-    }
-
-    // Preload JS (browser will cache it)
-    if (!document.querySelector(`link[href="${WIDGET_JS_URL}"]`)) {
-      const jsLink = document.createElement("link");
-      jsLink.rel = "preload";
-      jsLink.href = WIDGET_JS_URL;
-      jsLink.as = "script";
-      jsLink.crossOrigin = "anonymous";
-      document.head.appendChild(jsLink);
-    }
-  }
-
   private setupAuthExpirationListener(): void {
     if (typeof window === "undefined") return;
 
@@ -223,7 +247,8 @@ class MedAssistWidgetLoader extends HTMLElement {
       this.renderButton();
     }
 
-    Promise.all([this.loadWidgetCss(), this.loadWidgetScript()])
+    this.loadWidgetCss()
+      .then(() => this.loadWidgetScript())
       .then(() => this.loadAndRender())
       .catch((error) => {
         console.error("Failed to open MedAssist widget from bridge", error);
@@ -334,14 +359,15 @@ class MedAssistWidgetLoader extends HTMLElement {
     const button = shadowRoot.getElementById("medassist-open-btn");
     const rootElement = shadowRoot.getElementById("medassist-widget-root");
     const agentId = this.getAttribute("agent-id");
-    const iconUrl = this.getAttribute("icon-url") || this.defaultIconUrl;
+    let iconUrl = this.getAttribute("icon-url") || this.defaultIconUrl;
     const environment =
       getEnvironment(this.getAttribute("environment")) ?? "production";
-    const title = this.getAttribute("title") || "Medi Clinic";
-    const baseUrl = this.getAttribute("base-url") || undefined;
+    let title = this.getAttribute("title") || "Medi Clinic";
+    const baseUrl = this.getAttribute("base-url") || "https://matrix.eka.care/reloaded";
     const displayModeAttribute = this.getAttribute("display-mode");
     const displayMode: "full" | "widget" = displayModeAttribute === "full" ? "full" : "widget";
     const attributeContext = this.getAttribute("context") ? JSON.parse(this.getAttribute("context") || "{}") : undefined;
+    const attributeTheme = this.getAttribute("theme") ? (() => { try { return JSON.parse(this.getAttribute("theme") || "{}"); } catch { return undefined; } })() : undefined;
 
     const initConfig = (typeof window !== "undefined"
       ? (window as EkaMedAssistWindow).__ekaMedAssistConfig__
@@ -354,6 +380,7 @@ class MedAssistWidgetLoader extends HTMLElement {
 
     const auth = initConfig.auth || undefined;
     const resolvedAgentId = initConfig.agentId || agentId;
+    const apiBaseUrl = (initConfig.baseUrl as string) || baseUrl;
 
     const customOnClose = typeof window !== "undefined" ? (window as EkaMedAssistWindow).EkaMedAssist?.onClose : undefined;
 
@@ -372,6 +399,19 @@ class MedAssistWidgetLoader extends HTMLElement {
     }
     rootElement.classList.remove("hidden");
 
+    // Fetch agent-config when baseUrl is available; derive theme (mode → textColor: dark→black, light→white)
+    let apiTheme: MedAssistInitConfig["theme"] = undefined;
+    if (apiBaseUrl) {
+      try {
+        const agentConfig = await fetchAgentConfig(apiBaseUrl, resolvedAgentId);
+        title = agentConfig?.name || title;
+        iconUrl = agentConfig?.theme?.icon_img || iconUrl;
+        apiTheme = mapAgentConfigThemeToWidgetTheme(agentConfig?.theme || undefined);
+      } catch {
+        // ignore; use attribute + init theme only
+      }
+    }
+
     const widgetConfig = {
       title: (initConfig.title as string) || title,
       iconUrl: (initConfig.iconUrl as string) || iconUrl,
@@ -386,10 +426,11 @@ class MedAssistWidgetLoader extends HTMLElement {
         rootElement.classList.add("hidden");
 
       },
-      baseUrl: (initConfig.baseUrl as string) || baseUrl,
+      baseUrl: apiBaseUrl,
       context: mergedContext,
       displayMode,
-      auth
+      auth,
+      theme: { ...(apiTheme || {}), ...(attributeTheme || {}), ...(initConfig.theme || {}) }
     };
 
     if (this.widgetLoaded) {

package/package.json

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