@eka-care/medassist-widget-embed 0.2.0 → 0.2.2

package/iframe.html

@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MedAssist Widget</title>
+
+    <!-- Resouce hints for faster loading -->
+    <link rel="preconnect" href="https://unpkg.com" crossorigin/>
+    <link rel="dns-prefetch" href="https://unpkg.com"/>
     <style>
       * {
         margin: 0;

package/iframe.ts

@@ -88,57 +88,61 @@
     const environment =
       getEnvironment(urlParams.get("environment")) ?? "production";
     const container = document.getElementById("root") || document.body;
+    try {
+      await Promise.all([
+        loadWidgetCss(),
+        loadWidgetScript(),
+      ])
+      if (!window?.renderMedAssist || typeof window?.renderMedAssist !== "function") {
+        throw new Error("renderMedAssist is not available on window");
+      }
 
-    // Load CSS first
-    await loadWidgetCss();
-
-    // Load and wait for script
-    await loadWidgetScript();
-
-    if (typeof window.renderMedAssist !== "function") {
-      throw new Error("renderMedAssist is not available on window");
+      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
+      };
+      window.renderMedAssist(container, agentId, config);
+    } catch (error) {
+      console.error("Failed to initialize MedAssist widget", error);
+      throw error;
     }
-
-    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
-    };
-
-    window.renderMedAssist(container, agentId, config);
   };
 
   async function loadWidgetCss(): Promise<void> {
     // Check if already loaded
-    if (document.querySelector("[data-medassist-style='true']")) {
+    const existingLink = document.querySelector<HTMLLinkElement>(`link[data-medassist-style='true']`);
+
+    if (existingLink) {
       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();
+      widgetCssTextPromise = new Promise((resolve, reject) => {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = WIDGET_CSS_URL;
+        link.setAttribute("data-medassist-style", "true");
+
+        link.onload = () => {
+          resolve("");
+        };
+        link.onerror = () => {
+          reject(new Error(`Failed to load ${WIDGET_CSS_URL}`));
+        };
+        document.head.appendChild(link);
       });
     }
 
-    const cssText = await widgetCssTextPromise;
-    const styleTag = document.createElement("style");
-    styleTag.setAttribute("data-medassist-style", "true");
-    styleTag.textContent = cssText;
-    document.head.appendChild(styleTag);
+    await widgetCssTextPromise;
   }
 
   function loadWidgetScript(): Promise<void> {
@@ -180,7 +184,6 @@
         document.head.appendChild(script);
       });
     }
-
     return widgetScriptPromise;
   }
 
@@ -189,7 +192,11 @@
     if (document.readyState === "loading") {
       document.addEventListener("DOMContentLoaded", initializeFromUrlParams);
     } else {
-      initializeFromUrlParams();
+      try {
+        initializeFromUrlParams();
+      } catch (error) {
+        console.error("Failed to initialize MedAssist widget", error);
+      }
     }
   }
 })();

package/index.ts

@@ -141,6 +141,10 @@ class MedAssistWidgetLoader extends HTMLElement {
     this.defaultIconUrl = "https://cdn.eka.care/bot-icon.svg";
     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();
   }
 
   static get observedAttributes(): string[] {
@@ -174,15 +178,52 @@ 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;
+
+    const messageHandler = (event: MessageEvent) => {
+      if (event.data?.type === "AUTH_EXPIRED") {
+        if (window.parent !== window) {
+          window.parent.postMessage({ type: "AUTH_EXPIRED", message: "Authentication expired" }, "*");
+        }
+        // window.webkit.messageHandlers.authTokenExpired.postMessage({});
+      }
+    }
+
+    window.addEventListener("message", messageHandler);
+  }
+
   public openFromBridge(): void {
+    this.displayMode = this.getAttribute("display-mode") === "full" ? "full" : "widget";
     if (this.displayMode === "full") {
       this.initializeFullMode();
     } else {
       this.renderButton();
     }
 
-    this.loadWidgetCss()
-      .then(() => this.loadWidgetScript())
+    Promise.all([this.loadWidgetCss(), this.loadWidgetScript()])
       .then(() => this.loadAndRender())
       .catch((error) => {
         console.error("Failed to open MedAssist widget from bridge", error);

package/package.json

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

package/src/medassist-widget.js

@@ -26737,7 +26737,7 @@ var MedAssistWidget = (function(exports) {
     hasRequired_Error$1 = 1;
     (function(exports$1) {
       Object.defineProperty(exports$1, "__esModule", { value: true });
-      exports$1.ValidationError = exports$1.ConfigurationError = exports$1.StoreError = exports$1.MessageError = exports$1.SessionError = exports$1.FileError = exports$1.RecordingError = exports$1.ConnectionError = exports$1.InternalServerError = exports$1.RateLimitError = exports$1.MethodNotAllowedError = exports$1.NotFoundError = exports$1.PermissionDeniedError = exports$1.UnauthorizedError = exports$1.BadRequestError = exports$1.APIConnectionTimeoutError = exports$1.APIUserAbortError = exports$1.APIError = exports$1.SynapseError = exports$1.SynapseErrorCode = void 0;
+      exports$1.ValidationError = exports$1.ConfigurationError = exports$1.StoreError = exports$1.MessageError = exports$1.SessionError = exports$1.FileError = exports$1.AuthenticationError = exports$1.RecordingError = exports$1.ConnectionError = exports$1.InternalServerError = exports$1.RateLimitError = exports$1.MethodNotAllowedError = exports$1.NotFoundError = exports$1.PermissionDeniedError = exports$1.UnauthorizedError = exports$1.BadRequestError = exports$1.APIConnectionTimeoutError = exports$1.APIUserAbortError = exports$1.APIError = exports$1.SynapseError = exports$1.SynapseErrorCode = void 0;
       exports$1.normalizeError = normalizeError;
       exports$1.SynapseErrorCode = {
         API: "API_ERROR",
@@ -26915,6 +26915,13 @@ var MedAssistWidget = (function(exports) {
         }
       }
       exports$1.RecordingError = RecordingError;
+      class AuthenticationError extends SynapseError {
+        constructor(message, options = {}) {
+          super(message, exports$1.SynapseErrorCode.AUTH, options);
+          this.name = "AuthenticationError";
+        }
+      }
+      exports$1.AuthenticationError = AuthenticationError;
       class FileError extends SynapseError {
         constructor(message, options = {}) {
           super(message, exports$1.SynapseErrorCode.FILE, options);
@@ -27464,11 +27471,11 @@ var MedAssistWidget = (function(exports) {
     };
     var SYNAPSE_TOOL_CALLBACK_NAME;
     (function(SYNAPSE_TOOL_CALLBACK_NAME2) {
-      SYNAPSE_TOOL_CALLBACK_NAME2["DOCTOR_AVAILABILITY"] = "tool_callback_doctor_availability";
-      SYNAPSE_TOOL_CALLBACK_NAME2["AVAILABILITY_DATES"] = "tool_callback_availability_dates";
-      SYNAPSE_TOOL_CALLBACK_NAME2["AVAILABILITY_SLOTS"] = "tool_callback_availability_slots";
-      SYNAPSE_TOOL_CALLBACK_NAME2["MOBILE_VERIFICATION"] = "tool_callback_mobile_verification";
-      SYNAPSE_TOOL_CALLBACK_NAME2["DOCTOR_DETAILS"] = "tool_callback_doctor_details";
+      SYNAPSE_TOOL_CALLBACK_NAME2["DOCTOR_AVAILABILITY"] = "get_doctor_availability";
+      SYNAPSE_TOOL_CALLBACK_NAME2["AVAILABILITY_DATES"] = "get_available_dates";
+      SYNAPSE_TOOL_CALLBACK_NAME2["AVAILABILITY_SLOTS"] = "get_available_slots";
+      SYNAPSE_TOOL_CALLBACK_NAME2["MOBILE_VERIFICATION"] = "verify_mobile_number";
+      SYNAPSE_TOOL_CALLBACK_NAME2["DOCTOR_DETAILS"] = "get_doctor_details";
     })(SYNAPSE_TOOL_CALLBACK_NAME || (types$7.SYNAPSE_TOOL_CALLBACK_NAME = SYNAPSE_TOOL_CALLBACK_NAME = {}));
     return types$7;
   }
@@ -27908,7 +27915,9 @@ var MedAssistWidget = (function(exports) {
       FILE_UPLOAD_INPROGRESS: "file_upload_inprogress",
       TIMEOUT: "timeout",
       SERVER_ERROR: "server_error",
-      SESSION_TOKEN_MISMATCH: "session_token_mismatch"
+      SESSION_TOKEN_MISMATCH: "session_token_mismatch",
+      PROMPT_FETCH_ERROR: "prompt_fetch_error",
+      INVALID_FILE_REQUEST: "invalid_file_request"
     };
     types$6.SYNAPSE_REALTIME_RESERVED_EVENTS = {
       SESSION_EXPIRED: "session_expired"
@@ -28473,19 +28482,25 @@ var MedAssistWidget = (function(exports) {
        */
       handleIncomingSocketErrorMessage(message) {
         const connection = this.assertConnection("handleIncomingSocketErrorMessage");
-        switch (message.code) {
+        switch (message?.data?.code) {
           case types_1.SYNAPSE_REALTIME_ERROR_CODES.SESSION_EXPIRED:
             connection.emit(types_1.SYNAPSE_REALTIME_RESERVED_EVENTS.SESSION_EXPIRED);
             break;
+          case types_1.SYNAPSE_REALTIME_ERROR_CODES.INVALID_EVENT:
+            console.log("invalid event error", message);
+            break;
           default:
-            const error = new Error_1.MessageError(message.msg || "Socket error received", {
+            const error = new Error_1.MessageError(message?.data?.msg || "Socket error received", {
               context: {
                 stage: "handleIncomingSocketErrorMessage",
-                errorCode: message.code
-              }
+                errorCode: message?.data?.code
+              },
+              hint: message?.data?.msg,
+              cause: message,
+              displayMessage: message?.data?.msg
             });
-            connection.emit(types_1.SYNAPSE_REALTIME_EVENTS.ERROR, error);
-            this.emitError(error);
+            console.log("error from socket", error);
+            connection.emit(types_1.SYNAPSE_REALTIME_EVENTS.ERROR, message);
         }
       }
       /**
@@ -30337,8 +30352,26 @@ var MedAssistWidget = (function(exports) {
             if (error instanceof distExports.SynapseError) {
               switch (error.code) {
                 case distExports.SynapseErrorCode.SESSION:
-                  setConnectionStatus(distExports.ConnectionStatus.NOT_CONNECTED);
-                  setShowRetryButton(true);
+                  const errorContext = error.context;
+                  const isRefreshFailure = errorContext?.stage === "handleSessionExpiry" || errorContext?.stage === "refreshSession";
+                  if (isRefreshFailure) {
+                    if (!isOnline) {
+                      setError({
+                        title: "Session expired",
+                        description: "Please check your connection and try again"
+                      });
+                      setShowRetryButton(true);
+                    } else {
+                      setError({
+                        title: "Session not found",
+                        description: "Please start a new session"
+                      });
+                      setStartNewConnection(true);
+                    }
+                  } else {
+                    setConnectionStatus(distExports.ConnectionStatus.NOT_CONNECTED);
+                    setShowRetryButton(true);
+                  }
                   break;
                 case distExports.SynapseErrorCode.RECORDING:
                   setError({
@@ -30346,8 +30379,22 @@ var MedAssistWidget = (function(exports) {
                     description: error?.displayMessage || "Please try again later"
                   });
                   break;
+                case distExports.SynapseErrorCode.CONNECTION:
+                  setError({
+                    title: "Connecting..."
+                  });
+                  setShowRetryButton(true);
+                  break;
+                // case SynapseErrorCode.AUTH:
+                //   setError({
+                //     title: "Authentication failed",
+                //     description:
+                //       error?.displayMessage || "Please try again later",
+                //   });
+                //   window.parent.postMessage({ type: "AUTH_EXPIRED"})
+                //   break;
                 default:
-                  console.error("useChat: Error from SDK", error.code);
+                  console.error("useChat: Error from SDK from onError callback", error.code, error);
                   setError({
                     title: "Something went wrong",
                     description: "Please try again later"
@@ -30552,6 +30599,9 @@ var MedAssistWidget = (function(exports) {
             );
             return;
           }
+          if (isWaitingForResponse) {
+            setIsWaitingForResponse(false);
+          }
           const messageId = toolCallData.messageId;
           const timestamp = toolCallData.timestamp ?? Date.now();
           setMessages((prevMessages) => {
@@ -30600,14 +30650,96 @@ var MedAssistWidget = (function(exports) {
         }
       });
       synapseRef.current?.on(distExports.SYNAPSE_REALTIME_EVENTS.ERROR, (error) => {
-        console.log("error from sdk", error);
-        const errorMessage = error.message || error.displayMessage || "Something went wrong";
-        setError({
-          title: errorMessage,
-          description: "Please try again later"
-        });
-        setShowRetryButton(true);
-        setRecordingStatus(AudioRecordingStatus.IDLE);
+        console.log("error from sdk on ERROR event", error);
+        const errorCode = error?.data?.code;
+        switch (errorCode) {
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.SESSION_INACTIVE:
+            setError({
+              title: "Session not found",
+              description: "Please start a new session"
+            });
+            setStartNewConnection(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.SESSION_EXPIRED:
+            if (!isOnline) {
+              setError({
+                title: "Session expired",
+                description: "Please check your connection and try again"
+              });
+              setShowRetryButton(true);
+            } else {
+              setError({
+                title: "Session not found",
+                description: "Please start a new session"
+              });
+              setStartNewConnection(true);
+            }
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.SESSION_TOKEN_MISMATCH:
+            setError({
+              title: "Session not found",
+              description: "Please start a new session"
+            });
+            setStartNewConnection(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.INVALID_EVENT:
+            console.log("invalid event error", error);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.INVALID_CONTENT_TYPE:
+            console.log("invalid content type error", error);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.PARSING_ERROR:
+            setError({
+              title: "Error parsing request",
+              description: "please try again"
+            });
+            setShowRetryButton(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.TIMEOUT:
+            setError({
+              title: "Request timed out",
+              description: "please try again"
+            });
+            setShowRetryButton(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.PROMPT_FETCH_ERROR:
+            setError({
+              title: "Something went wrong",
+              description: "please try again"
+            });
+            setShowRetryButton(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.INVALID_FILE_REQUEST:
+            setError({
+              title: "Something went wrong",
+              description: "please try again"
+            });
+            setShowRetryButton(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          case distExports.SYNAPSE_REALTIME_ERROR_CODES.SERVER_ERROR:
+            setError({
+              title: "Something went wrong",
+              description: "please try again"
+            });
+            setShowRetryButton(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+          default:
+            setError({
+              title: "Something went wrong",
+              description: "please try again"
+            });
+            setShowRetryButton(true);
+            setRecordingStatus(AudioRecordingStatus.IDLE);
+            return;
+        }
       });
       synapseRef.current?.on(distExports.SYNAPSE_REALTIME_EVENTS.AUDIO_TRANSCRIPT, async (data) => {
         const inlineTextData = data;
@@ -41921,10 +42053,10 @@ var MedAssistWidget = (function(exports) {
       }
     }, [selectedHospital, doctor.doctor_id]);
     reactExports.useEffect(() => {
-      if (callbacks?.[distExports.SYNAPSE_TOOL_CALLBACK_NAME.AVAILABILITY_DATES] && !doctor?.availability?.length && selectedHospital) {
+      if (callbacks?.[distExports.SYNAPSE_TOOL_CALLBACK_NAME.AVAILABILITY_DATES] && selectedHospital && !availability[selectedHospital]?.length) {
         getAvailabilityDates(callbacks[distExports.SYNAPSE_TOOL_CALLBACK_NAME.AVAILABILITY_DATES].tool_name);
       }
-    }, [callbacks, doctor.availability, selectedHospital, getAvailabilityDates]);
+    }, [callbacks, selectedHospital]);
     const availabilityForSelectedHospital = reactExports.useMemo(() => {
       return availability[selectedHospital] || [];
     }, [availability, selectedHospital]);
@@ -42101,7 +42233,7 @@ var MedAssistWidget = (function(exports) {
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-slate-600", children: doctorDetails.hospitals?.[0].name || "" })
               ] })
             ] }),
-            availabilityForSelectedHospital.length || loadingAvailabilityDates ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            availabilityForSelectedHospital.length > 0 || loadingAvailabilityDates ? /* @__PURE__ */ jsxRuntimeExports.jsx(
               Button,
               {
                 type: "button",
@@ -42126,7 +42258,7 @@ var MedAssistWidget = (function(exports) {
                 ] })
               }
             ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-3 w-full flex items-center justify-center py-3 px-4 bg-lavender-50 border border-lavender-200 rounded-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-slate-600 font-medium", children: "No details available" }) }),
-            open && availabilityForSelectedHospital.length && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            open && availabilityForSelectedHospital.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
                 id: "ap-slots",