@eka-care/medassist-widget-embed 0.2.6 → 0.2.8

package/iframe.ts

@@ -32,7 +32,6 @@
   /** Theme from agent-config API (has mode; textColor derived: dark → black, light → white) */
   type AgentConfig = {
     name?: string;
-    allowed?: ("text" | "file" | "audio")[];
     theme?: {
       background?: string;
       background_img?: string;
@@ -92,7 +91,7 @@
       });
       if (!res.ok) return undefined;
       const json = await res.json();
-      if (json?.success && json?.data) return json.data as AgentConfig;
+      if (json?.success && json?.data?.theme) return json.data as AgentConfig;
       return undefined;
     } catch {
       return undefined;
@@ -143,9 +142,54 @@
   let widgetScriptPromise: Promise<void> | null = null;
   let widgetCssTextPromise: Promise<string> | null = null;
 
+  // --- Start loading as early as possible (don't wait for DOMContentLoaded) ---
+  const urlParams = new URLSearchParams(
+    typeof window !== "undefined" ? window.location.search : ""
+  );
+  const earlyAgentId = urlParams.get("agentId");
+  const earlyBaseUrl =
+    urlParams.get("baseUrl") || "https://matrix.eka.care/reloaded";
+
+  if (typeof document !== "undefined" && document.head) {
+    try {
+      const assetOrigin = new URL(widgetAssetBaseUrl).origin;
+      const apiOrigin = new URL(earlyBaseUrl).origin;
+      const preconnectAsset = document.createElement("link");
+      preconnectAsset.rel = "preconnect";
+      preconnectAsset.href = assetOrigin;
+      preconnectAsset.crossOrigin = "anonymous";
+      document.head.appendChild(preconnectAsset);
+      if (assetOrigin !== apiOrigin) {
+        const preconnectApi = document.createElement("link");
+        preconnectApi.rel = "preconnect";
+        preconnectApi.href = apiOrigin;
+        preconnectApi.crossOrigin = "anonymous";
+        document.head.appendChild(preconnectApi);
+      }
+      const preloadScript = document.createElement("link");
+      preloadScript.rel = "preload";
+      preloadScript.as = "script";
+      preloadScript.href = WIDGET_JS_URL;
+      document.head.appendChild(preloadScript);
+      const preloadCss = document.createElement("link");
+      preloadCss.rel = "preload";
+      preloadCss.as = "style";
+      preloadCss.href = WIDGET_CSS_URL;
+      document.head.appendChild(preloadCss);
+    } catch {
+      // ignore URL/preload errors
+    }
+    loadWidgetCss();
+    loadWidgetScript();
+  }
+
+  const agentConfigPromise: Promise<AgentConfig | undefined> =
+    earlyAgentId && earlyBaseUrl
+      ? fetchAgentConfig(earlyBaseUrl, earlyAgentId)
+      : Promise.resolve(undefined);
+
   // Auto-initialize from URL parameters (no shadow DOM needed in iframe)
   const initializeFromUrlParams = async (): Promise<void> => {
-    const urlParams = new URLSearchParams(window.location.search);
     const agentId = urlParams.get("agentId");
 
     if (!agentId) {
@@ -170,7 +214,11 @@
       : undefined;
     const container = document.getElementById("root") || document.body;
     try {
-      await Promise.all([loadWidgetCss(), loadWidgetScript()]);
+      const [, , agentConfig] = await Promise.all([
+        loadWidgetCss(),
+        loadWidgetScript(),
+        agentConfigPromise,
+      ]);
       if (
         !window?.renderMedAssist ||
         typeof window?.renderMedAssist !== "function"
@@ -178,29 +226,18 @@
         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;
-      let allowed: ("text" | "file" | "audio")[] | 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
-          );
-          allowed = agentConfig?.allowed;
-        } catch {
-          // ignore; use URL params only
-        }
+      if (agentConfig) {
+        title = agentConfig?.name ?? title;
+        iconUrl = agentConfig?.theme?.icon_img ?? iconUrl;
+        apiTheme = mapAgentConfigThemeToWidgetTheme(
+          agentConfig?.theme ?? undefined
+        );
       }
 
       const config = {
         title,
         iconUrl,
-        allowed,
         environment,
         onClose: () => {
           if (window.parent !== window) {

package/index.ts

@@ -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

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

package/src/medassist-widget.css

@@ -2727,6 +2727,12 @@ body {
   opacity: 0.6;
 }
 
+.disabled\:hover\:scale-100:hover:disabled {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .group:hover .group-hover\:bg-purple-200\/70 {
   background-color: rgb(233 213 255 / 0.7);
 }

package/src/medassist-widget.js

@@ -32017,8 +32017,10 @@ var MedAssistWidget = (function(exports) {
   }) {
     const fileInputRef = reactExports.useRef(null);
     const textareaRef = reactExports.useRef(null);
-    const showSendButton = value.trim().length > 0 || hasAttachment;
+    const hasContent = value.trim().length > 0 || hasAttachment;
     const showMic = allowed === void 0 || allowed.includes("audio");
+    const showSendButton = hasContent || !showMic;
+    const canSend = hasContent;
     const showFileAttachment = allowed === void 0 || allowed.includes("file");
     const isMicDisabled = (isDisabled || recordingStatus !== AudioRecordingStatus.IDLE) && !isRecording;
     const micButtonClasses = cn(
@@ -32038,7 +32040,7 @@ var MedAssistWidget = (function(exports) {
       fileInputRef.current?.click();
     };
     const handleKeyPress = (e) => {
-      if (e.key === "Enter" && !e.shiftKey && showSendButton && !isDisabled) {
+      if (e.key === "Enter" && !e.shiftKey && canSend && !isDisabled) {
         e.preventDefault();
         onSend();
       }
@@ -32178,15 +32180,16 @@ var MedAssistWidget = (function(exports) {
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mic, { className: "w-5 h-5" })
                 }
               ),
-              showSendButton && !isDisabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              showSendButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Button,
                 {
                   type: "button",
                   size: "icon",
                   onClick: onSend,
-                  className: "absolute right-0.5 top-1/2 -translate-y-1/2 h-10 w-10 bg-primary hover:bg-primary/90 rounded-full text-primary-foreground transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 shrink-0",
-                  title: "Send message",
-                  "aria-label": "Send message",
+                  disabled: isDisabled || !canSend,
+                  className: `absolute right-0.5 top-1/2 -translate-y-1/2 h-10 w-10 ${!showMic ? "" : "bg-primary"}  hover:bg-primary/90 rounded-full text-primary-foreground transition-all duration-200 shadow-lg hover:shadow-xl hover:scale-105 active:scale-95 shrink-0 disabled:opacity-50 disabled:pointer-events-none disabled:hover:scale-100`,
+                  title: canSend ? "Send message" : "Type a message to send",
+                  "aria-label": canSend ? "Send message" : "Type a message to send",
                   children: /* @__PURE__ */ jsxRuntimeExports.jsx(SendIcon, { className: "w-4 h-4 text-primary-foreground" })
                 }
               )