@merit-systems/echo-react-sdk 1.0.16 → 1.0.18

package/dist/index.js

@@ -27130,13 +27130,16 @@ var EchoClient = class {
     this.models = new ModelsResource(this.http);
   }
 };
-function createEchoOpenAI({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn) {
+function createEchoOpenAI({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn, onInsufficientFunds) {
   const getProvider = async () => {
     const token = await getTokenFn(appId);
     return createOpenAI({
       baseURL: baseRouterUrl,
-      apiKey: token ?? ""
+      apiKey: token ?? "",
       // null will fail auth
+      ...onInsufficientFunds && {
+        fetch: fetchWith402Interceptor(fetch, onInsufficientFunds)
+      }
     });
   };
   const openaiFunction = async (modelId) => {
@@ -27192,13 +27195,21 @@ function createEchoOpenAI({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn
   });
   return implementation;
 }
-function createEchoAnthropic({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn) {
+function createEchoAnthropic({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn, onInsufficientFunds) {
   const getProvider = async () => {
     const token = await getTokenFn(appId);
     return createAnthropic({
       baseURL: baseRouterUrl,
-      apiKey: token ?? ""
+      apiKey: token ?? "",
       // null will fail auth
+      headers: {
+        // this is safe in Echo because the token is an echo oauth jwt
+        // not a long lived anthropic api key
+        "anthropic-dangerous-direct-browser-access": "true"
+      },
+      ...onInsufficientFunds && {
+        fetch: fetchWith402Interceptor(fetch, onInsufficientFunds)
+      }
     });
   };
   const anthropicFunction = async (modelId) => {
@@ -27235,13 +27246,16 @@ function createEchoAnthropic({ appId, baseRouterUrl = ROUTER_BASE_URL }, getToke
   );
   return implementation;
 }
-function createEchoGoogle({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn) {
+function createEchoGoogle({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn, onInsufficientFunds) {
   const getProvider = async () => {
     const token = await getTokenFn(appId);
     return createGoogleGenerativeAI({
       baseURL: baseRouterUrl,
-      apiKey: token ?? ""
+      apiKey: token ?? "",
       // null will fail auth
+      ...onInsufficientFunds && {
+        fetch: fetchWith402Interceptor(fetch, onInsufficientFunds)
+      }
     });
   };
   const googleFunction = async (modelId) => {
@@ -27291,6 +27305,15 @@ function createEchoGoogle({ appId, baseRouterUrl = ROUTER_BASE_URL }, getTokenFn
   });
   return implementation;
 }
+function fetchWith402Interceptor(originalFetch, onInsufficientFunds) {
+  return async (input, init) => {
+    const response = await originalFetch(input, init);
+    if (response.status === 402) {
+      onInsufficientFunds();
+    }
+    return response;
+  };
+}
 function useEchoBalance(echoClient, appId) {
   const [balance, setBalance] = useState(null);
   const [freeTierBalance, setFreeTierBalance] = useState(
@@ -27422,6 +27445,47 @@ function useEchoPayments(echoClient) {
     isLoading
   };
 }
+function useEchoUser(echoClient) {
+  const [user, setUser] = useState(null);
+  const [error2, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const refreshUser = useCallback(async () => {
+    if (!echoClient) {
+      throw new Error("Not authenticated");
+    }
+    setIsLoading(true);
+    try {
+      const userResponse = await echoClient.users.getUserInfo();
+      setUser(userResponse);
+      setError(null);
+    } catch (err) {
+      const echoError = parseEchoError(
+        err instanceof Error ? err : new Error(String(err)),
+        "refreshing user"
+      );
+      setError(echoError.message);
+      throw echoError;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [echoClient]);
+  useEffect(() => {
+    if (echoClient) {
+      refreshUser().catch((err) => {
+        console.error("Error loading initial user:", err);
+      });
+    } else {
+      setUser(null);
+      setError(null);
+    }
+  }, [echoClient, refreshUser]);
+  return {
+    user,
+    error: error2,
+    isLoading,
+    refreshUser
+  };
+}
 const EchoContext = createContext(null);
 const EchoRefreshContext = createContext(
   null
@@ -27430,10 +27494,10 @@ function EchoProviderInternal({ config: config2, children }) {
   var _a10, _b, _c;
   const auth = useAuth();
   const user = auth.user;
-  const echoUser = user ? parseEchoUser(user) : null;
   const apiUrl = config2.baseEchoUrl || "https://echo.merit.systems";
   const token = ((_a10 = auth.user) == null ? void 0 : _a10.access_token) || null;
   const echoClient = useEchoClient({ apiUrl });
+  const [isInsufficientFunds, setIsInsufficientFunds] = useState(false);
   const {
     balance,
     freeTierBalance,
@@ -27441,6 +27505,11 @@ function EchoProviderInternal({ config: config2, children }) {
     error: balanceError,
     isLoading: balanceLoading
   } = useEchoBalance(echoClient, config2.appId);
+  const {
+    user: echoUser,
+    error: userError,
+    isLoading: userLoading
+  } = useEchoUser(echoClient);
   const {
     createPaymentLink,
     error: paymentError,
@@ -27457,13 +27526,13 @@ function EchoProviderInternal({ config: config2, children }) {
     var _a15;
     return ((_a15 = auth.user) == null ? void 0 : _a15.access_token) || null;
   }, [(_b = auth.user) == null ? void 0 : _b.access_token]);
-  const combinedError = ((_c = auth.error) == null ? void 0 : _c.message) || balanceError || paymentError || null;
+  const combinedError = ((_c = auth.error) == null ? void 0 : _c.message) || balanceError || paymentError || userError || null;
   const isInitialAuthLoading = auth.isLoading && !auth.isAuthenticated;
   const isTokenRefreshing = auth.isLoading && auth.isAuthenticated;
-  const combinedLoading = isInitialAuthLoading || balanceLoading || paymentLoading;
+  const combinedLoading = isInitialAuthLoading || balanceLoading || paymentLoading || userLoading;
   const contextValue = useMemo(
     () => ({
-      user: echoUser || null,
+      user: echoUser,
       rawUser: user,
       balance,
       freeTierBalance,
@@ -27478,7 +27547,9 @@ function EchoProviderInternal({ config: config2, children }) {
       createPaymentLink,
       getToken,
       clearAuth,
-      config: config2
+      config: config2,
+      isInsufficientFunds,
+      setIsInsufficientFunds
     }),
     [
       echoUser,
@@ -27495,7 +27566,8 @@ function EchoProviderInternal({ config: config2, children }) {
       refreshBalance,
       createPaymentLink,
       getToken,
-      config2
+      config2,
+      isInsufficientFunds
     ]
   );
   const refreshContextValue = useMemo(
@@ -27553,14 +27625,6 @@ function EchoProvider({ config: config2, children }) {
   };
   return /* @__PURE__ */ jsx(AuthProvider, { ...oidcConfig, children: /* @__PURE__ */ jsx(EchoProviderInternal, { config: config2, children }) });
 }
-function parseEchoUser(user) {
-  return {
-    id: user.profile.sub || "",
-    email: user.profile.email || "",
-    name: user.profile.name || user.profile.preferred_username || "",
-    picture: user.profile.picture || ""
-  };
-}
 function useEcho() {
   const context = useContext(EchoContext);
   if (!context) {
@@ -28597,7 +28661,7 @@ function sanitizeUrl(url2) {
   }
 }
 async function openPaymentFlow(paymentUrl, options = {}) {
-  const { onComplete, onCancel, onError } = options;
+  const { onComplete, onError } = options;
   const safeUrl = sanitizeUrl(paymentUrl);
   if (!safeUrl) {
     const error2 = new Error("Invalid payment URL provided");
@@ -28605,62 +28669,7 @@ async function openPaymentFlow(paymentUrl, options = {}) {
     throw error2;
   }
   try {
-    const popup = window.open(
-      safeUrl,
-      "echo-payment",
-      "width=600,height=700,scrollbars=yes,resizable=yes"
-    );
-    if (popup && !popup.closed) {
-      return new Promise((resolve2) => {
-        const checkComplete = () => {
-          try {
-            if (popup.closed) {
-              onComplete == null ? void 0 : onComplete();
-              resolve2();
-              return;
-            }
-            setTimeout(checkComplete, 1e3);
-          } catch {
-            onComplete == null ? void 0 : onComplete();
-            resolve2();
-          }
-        };
-        checkComplete();
-        setTimeout(() => {
-          popup.close();
-          onCancel == null ? void 0 : onCancel();
-          resolve2();
-        }, 6e5);
-      });
-    } else {
-      const confirmed = confirm(
-        "Payment will open in a new tab. Click OK to continue, or Cancel to abort."
-      );
-      if (confirmed) {
-        sessionStorage.setItem("echo_payment_flow", "true");
-        window.location.href = safeUrl;
-        return new Promise((resolve2) => {
-          const handleFocus = () => {
-            if (sessionStorage.getItem("echo_payment_flow") === "completed") {
-              sessionStorage.removeItem("echo_payment_flow");
-              onComplete == null ? void 0 : onComplete();
-              window.removeEventListener("focus", handleFocus);
-              resolve2();
-            }
-          };
-          window.addEventListener("focus", handleFocus);
-          setTimeout(() => {
-            window.removeEventListener("focus", handleFocus);
-            sessionStorage.removeItem("echo_payment_flow");
-            onCancel == null ? void 0 : onCancel();
-            resolve2();
-          }, 18e5);
-        });
-      } else {
-        onCancel == null ? void 0 : onCancel();
-        return Promise.resolve();
-      }
-    }
+    window.location.href = safeUrl;
   } catch (err) {
     const error2 = err instanceof Error ? err : new Error("Payment flow failed");
     onError == null ? void 0 : onError(error2);
@@ -28896,6 +28905,482 @@ function EchoSignIn({
     }
   ) });
 }
+function EchoSignOut({
+  onSuccess,
+  onError,
+  className = "",
+  children
+}) {
+  const { signOut, isLoading, user, error: error2 } = useEcho();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isSigningOut, setIsSigningOut] = useState(false);
+  React2.useEffect(() => {
+    if (!user && onSuccess && isSigningOut) {
+      onSuccess();
+      setIsSigningOut(false);
+    }
+  }, [user, onSuccess, isSigningOut]);
+  React2.useEffect(() => {
+    if (error2 && onError) {
+      onError(new Error(error2));
+    }
+  }, [error2, onError]);
+  const handleSignOut = async () => {
+    try {
+      setIsSigningOut(true);
+      await signOut();
+    } catch (err) {
+      setIsSigningOut(false);
+      if (onError) {
+        onError(err instanceof Error ? err : new Error("Sign out failed"));
+      }
+    }
+  };
+  if (!user) {
+    return /* @__PURE__ */ jsx("div", { className: `echo-signout-success ${className}`, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          padding: "12px 16px",
+          backgroundColor: "#f8fafc",
+          border: "1px solid #e2e8f0",
+          borderRadius: "8px",
+          color: "#334155",
+          fontSize: "14px",
+          fontFamily: "HelveticaNowDisplay, sans-serif",
+          fontWeight: "800",
+          width: "fit-content"
+        },
+        children: [
+          /* @__PURE__ */ jsx(Logo, { width: 16, height: 16, variant: "light" }),
+          /* @__PURE__ */ jsx("span", { children: "Signed out" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: `echo-signout ${className}`, children: children ? /* @__PURE__ */ jsx("div", { onClick: handleSignOut, style: { cursor: "pointer" }, children }) : /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: handleSignOut,
+      disabled: isLoading || isSigningOut,
+      className: "echo-signout-button",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "12px 20px",
+        backgroundColor: isLoading || isSigningOut ? "#f3f4f6" : isHovered ? "#fef2f2" : "#ffffff",
+        color: isLoading || isSigningOut ? "#9ca3af" : isHovered ? "#dc2626" : "#374151",
+        border: "1px solid #e2e8f0",
+        borderRadius: "8px",
+        cursor: isLoading || isSigningOut ? "not-allowed" : "pointer",
+        fontSize: "14px",
+        fontWeight: "800",
+        fontFamily: "HelveticaNowDisplay, sans-serif",
+        transition: "all 0.2s ease",
+        boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+        backdropFilter: "blur(8px)"
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        /* @__PURE__ */ jsx(Logo, { width: 16, height: 16, variant: "light" }),
+        /* @__PURE__ */ jsx("span", { children: isLoading || isSigningOut ? "Signing out..." : `Sign out` })
+      ]
+    }
+  ) });
+}
+const CustomAmountInput$1 = ({
+  onAddCredits,
+  onCancel,
+  isProcessing
+}) => {
+  const [amount, setAmount] = useState("");
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+  const handleAddCredits = () => {
+    const purchaseAmount = Number(amount);
+    if (purchaseAmount > 0) {
+      onAddCredits(purchaseAmount);
+    }
+  };
+  const isValidAmount = amount !== "" && Number(amount) > 0;
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: "14px",
+            color: "#6b7280",
+            fontFamily: "HelveticaNowDisplay, sans-serif"
+          },
+          children: "$"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "number",
+          value: amount,
+          onChange: (e) => setAmount(e.target.value),
+          placeholder: "0.00",
+          min: "1",
+          step: "0.01",
+          style: {
+            flex: 1,
+            padding: "8px 12px",
+            border: "1px solid #d1d5db",
+            borderRadius: "6px",
+            fontSize: "14px",
+            fontFamily: "HelveticaNowDisplay, sans-serif",
+            outline: "none"
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && isValidAmount && !isProcessing) {
+              handleAddCredits();
+            } else if (e.key === "Escape") {
+              onCancel();
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCancel,
+          style: {
+            flex: 1,
+            padding: "8px 16px",
+            backgroundColor: "transparent",
+            color: "#6b7280",
+            border: "1px solid #d1d5db",
+            borderRadius: "6px",
+            fontSize: "14px",
+            cursor: "pointer",
+            fontFamily: "HelveticaNowDisplay, sans-serif"
+          },
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleAddCredits,
+          disabled: !isValidAmount || isProcessing,
+          style: {
+            flex: 1,
+            padding: "8px 16px",
+            backgroundColor: isValidAmount && !isProcessing ? "#dc2626" : "#9ca3af",
+            color: "white",
+            border: "none",
+            borderRadius: "6px",
+            fontSize: "14px",
+            fontWeight: "600",
+            cursor: isValidAmount && !isProcessing ? "pointer" : "not-allowed",
+            fontFamily: "HelveticaNowDisplay, sans-serif"
+          },
+          children: isProcessing ? "Processing..." : "Add Credits"
+        }
+      )
+    ] })
+  ] });
+};
+function InsufficientFundsModal({
+  isOpen,
+  onClose,
+  onPurchaseComplete,
+  onError
+}) {
+  const { createPaymentLink, user, refreshBalance } = useEcho();
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [purchaseError, setPurchaseError] = useState(null);
+  const [showCustomAmount, setShowCustomAmount] = useState(false);
+  const handlePurchase = async (amount) => {
+    if (!user) {
+      const error2 = new Error("Please sign in to purchase tokens");
+      setPurchaseError(error2.message);
+      onError == null ? void 0 : onError(error2);
+      return;
+    }
+    try {
+      setIsProcessing(true);
+      setPurchaseError(null);
+      const paymentUrl = await createPaymentLink(amount);
+      await openPaymentFlow(paymentUrl, {
+        onComplete: async () => {
+          try {
+            await refreshBalance();
+            onPurchaseComplete == null ? void 0 : onPurchaseComplete();
+            onClose();
+          } catch (refreshError) {
+            console.error("Failed to refresh balance:", refreshError);
+          }
+        },
+        onError: (error2) => {
+          setPurchaseError(error2.message);
+          onError == null ? void 0 : onError(error2);
+        }
+      });
+    } catch (error2) {
+      const errorMessage = error2 instanceof Error ? error2.message : "Purchase failed";
+      setPurchaseError(errorMessage);
+      onError == null ? void 0 : onError(error2 instanceof Error ? error2 : new Error(errorMessage));
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: 1e3,
+        padding: "16px",
+        margin: 0,
+        boxSizing: "border-box",
+        // CSS reset to prevent inheritance issues
+        border: "none",
+        outline: "none",
+        textDecoration: "none",
+        listStyle: "none"
+      },
+      onClick: (e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            backgroundColor: "#ffffff",
+            borderRadius: "12px",
+            border: "1px solid #e5e7eb",
+            padding: "0",
+            margin: "0",
+            width: "100%",
+            maxWidth: "450px",
+            maxHeight: "90vh",
+            overflow: "hidden",
+            boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+            fontFamily: "HelveticaNowDisplay, sans-serif",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: "320px",
+            boxSizing: "border-box"
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 0 16px", marginBottom: "12px" }, children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Logo, { width: 20, height: 20, variant: "light" }),
+                  /* @__PURE__ */ jsx(
+                    "h2",
+                    {
+                      style: {
+                        fontSize: "18px",
+                        fontWeight: "500",
+                        color: "#111827",
+                        margin: 0,
+                        fontFamily: "HelveticaNowDisplay, sans-serif"
+                      },
+                      children: "Insufficient Balance"
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx("div", { style: { padding: "0 16px 16px 16px" }, children: /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: "#6b7280",
+                  margin: "0 0 12px 0",
+                  fontFamily: "HelveticaNowDisplay, sans-serif"
+                },
+                children: "You don't have enough credits to complete this request. Please add credits to your account."
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "0 16px 16px 16px",
+                  borderTop: "1px solid #f3f4f6",
+                  paddingTop: "16px"
+                },
+                children: !showCustomAmount ? /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: { display: "flex", flexDirection: "column", gap: "8px" },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => handlePurchase(10),
+                          disabled: isProcessing,
+                          style: {
+                            width: "100%",
+                            padding: "12px 16px",
+                            backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "6px",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            cursor: isProcessing ? "not-allowed" : "pointer",
+                            transition: "background-color 0.2s ease",
+                            fontFamily: "HelveticaNowDisplay, sans-serif"
+                          },
+                          onMouseEnter: (e) => {
+                            if (!isProcessing) {
+                              e.currentTarget.style.backgroundColor = "#b91c1c";
+                            }
+                          },
+                          onMouseLeave: (e) => {
+                            if (!isProcessing) {
+                              e.currentTarget.style.backgroundColor = "#dc2626";
+                            }
+                          },
+                          children: isProcessing ? "Processing..." : "Add $10.00"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setShowCustomAmount(true),
+                          disabled: isProcessing,
+                          style: {
+                            width: "100%",
+                            padding: "8px 16px",
+                            backgroundColor: "transparent",
+                            color: "#dc2626",
+                            border: "1px solid #dc2626",
+                            borderRadius: "6px",
+                            fontSize: "14px",
+                            cursor: isProcessing ? "not-allowed" : "pointer",
+                            fontFamily: "HelveticaNowDisplay, sans-serif",
+                            transition: "all 0.2s ease"
+                          },
+                          onMouseEnter: (e) => {
+                            if (!isProcessing) {
+                              e.currentTarget.style.backgroundColor = "#fef2f2";
+                              e.currentTarget.style.borderColor = "#b91c1c";
+                            }
+                          },
+                          onMouseLeave: (e) => {
+                            if (!isProcessing) {
+                              e.currentTarget.style.backgroundColor = "transparent";
+                              e.currentTarget.style.borderColor = "#dc2626";
+                            }
+                          },
+                          children: "Custom Amount"
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  CustomAmountInput$1,
+                  {
+                    onAddCredits: handlePurchase,
+                    onCancel: () => setShowCustomAmount(false),
+                    isProcessing
+                  }
+                )
+              }
+            ),
+            purchaseError && /* @__PURE__ */ jsx("div", { style: { padding: "0 16px 16px 16px" }, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  padding: "8px 12px",
+                  backgroundColor: "#fef2f2",
+                  borderRadius: "6px",
+                  border: "1px solid #fecaca"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    style: {
+                      color: "#dc2626",
+                      margin: 0,
+                      fontSize: "12px",
+                      fontFamily: "HelveticaNowDisplay, sans-serif"
+                    },
+                    children: purchaseError
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "flex-end",
+                  alignItems: "center",
+                  padding: "12px 16px",
+                  borderTop: "1px solid #f3f4f6",
+                  gap: "8px"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    style: {
+                      padding: "8px 16px",
+                      backgroundColor: "#f3f4f6",
+                      color: "#374151",
+                      border: "none",
+                      borderRadius: "6px",
+                      fontSize: "14px",
+                      cursor: "pointer",
+                      fontFamily: "HelveticaNowDisplay, sans-serif"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "#e5e7eb";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "#f3f4f6";
+                    },
+                    children: "Close"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 const CustomAmountInput = ({
   onAddCredits,
   onCancel,
@@ -29020,13 +29505,22 @@ const CustomAmountInput = ({
     }
   );
 };
-function EchoTokenPurchase({
+function EchoTokens({
   onPurchaseComplete,
   onError,
   className = "",
-  children
+  children,
+  showAvatar = false
 }) {
-  const { createPaymentLink, user, balance, freeTierBalance, refreshBalance } = useEcho();
+  const {
+    createPaymentLink,
+    user,
+    balance,
+    freeTierBalance,
+    refreshBalance,
+    isInsufficientFunds,
+    setIsInsufficientFunds
+  } = useEcho();
   const [isProcessing, setIsProcessing] = useState(false);
   const [purchaseError, setPurchaseError] = useState(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -29093,7 +29587,7 @@ function EchoTokenPurchase({
     setPurchaseError(null);
   };
   if (!user) {
-    return /* @__PURE__ */ jsx("div", { className: `echo-token-purchase ${className}`, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { className: `echo-token-purchase ${className}`, children: children ? /* @__PURE__ */ jsxs(
       "div",
       {
         className: "echo-token-purchase-unauthorized",
@@ -29102,11 +29596,15 @@ function EchoTokenPurchase({
           backgroundColor: "#fef3c7",
           color: "#92400e",
           borderRadius: "8px",
-          fontSize: "14px"
+          fontSize: "14px",
+          textAlign: "center"
         },
-        children: "Please sign in to purchase tokens"
+        children: [
+          /* @__PURE__ */ jsx("p", { style: { margin: "0 0 12px 0" }, children: "Please sign in to purchase tokens" }),
+          /* @__PURE__ */ jsx(EchoSignIn, {})
+        ]
       }
-    ) });
+    ) : /* @__PURE__ */ jsx(EchoSignIn, {}) });
   }
   const CompactButton = () => {
     const [isHovered, setIsHovered] = useState(false);
@@ -29136,7 +29634,23 @@ function EchoTokenPurchase({
         onMouseEnter: () => setIsHovered(true),
         onMouseLeave: () => setIsHovered(false),
         children: [
-          /* @__PURE__ */ jsx(Logo, { width: 16, height: 16, variant: "light" }),
+          showAvatar && (user == null ? void 0 : user.picture) ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: user.picture,
+              alt: user.name || user.email || "User avatar",
+              style: {
+                width: "24px",
+                height: "24px",
+                borderRadius: "50%",
+                objectFit: "cover",
+                flexShrink: 0
+              },
+              onError: (e) => {
+                e.currentTarget.style.display = "none";
+              }
+            }
+          ) : /* @__PURE__ */ jsx(Logo, { width: 20, height: 20, variant: "light" }),
           /* @__PURE__ */ jsx("span", { children: formatCurrency(calculateAvailableSpend()) }),
           /* @__PURE__ */ jsxs(
             "svg",
@@ -29204,17 +29718,30 @@ function EchoTokenPurchase({
               minHeight: "320px"
             },
             children: [
-              /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 0 16px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx(
-                "h2",
+              /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 0 16px", marginBottom: "12px" }, children: /* @__PURE__ */ jsxs(
+                "div",
                 {
                   style: {
-                    fontSize: "18px",
-                    fontWeight: "500",
-                    color: "#111827",
-                    margin: 0,
-                    fontFamily: "HelveticaNowDisplay, sans-serif"
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
                   },
-                  children: "Credits"
+                  children: [
+                    /* @__PURE__ */ jsx(Logo, { width: 20, height: 20, variant: "light" }),
+                    /* @__PURE__ */ jsx(
+                      "h2",
+                      {
+                        style: {
+                          fontSize: "18px",
+                          fontWeight: "500",
+                          color: "#111827",
+                          margin: 0,
+                          fontFamily: "HelveticaNowDisplay, sans-serif"
+                        },
+                        children: "Credits"
+                      }
+                    )
+                  ]
                 }
               ) }),
               /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px", marginBottom: "16px" }, children: [
@@ -29351,10 +29878,10 @@ function EchoTokenPurchase({
                               /* @__PURE__ */ jsxs("span", { children: [
                                 formatCurrency(balance.balance),
                                 " Paid Credits",
-                                balance.totalSpent && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
+                                balance.totalPaid > 0 && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
                                   "(",
                                   formatCurrency(balance.totalSpent),
-                                  " /",
+                                  " of",
                                   " ",
                                   formatCurrency(balance.totalPaid),
                                   " spent)"
@@ -29502,38 +30029,78 @@ function EchoTokenPurchase({
                   children: purchaseError
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsxs(
                 "div",
                 {
                   style: {
                     padding: "12px 16px",
                     display: "flex",
-                    justifyContent: "flex-end",
+                    justifyContent: "space-between",
+                    alignItems: "center",
                     borderTop: "1px solid #f3f4f6"
                   },
-                  children: /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: closeModal,
-                      style: {
-                        padding: "8px 16px",
-                        backgroundColor: "#f3f4f6",
-                        color: "#374151",
-                        border: "none",
-                        borderRadius: "6px",
-                        fontSize: "14px",
-                        cursor: "pointer",
-                        fontFamily: "HelveticaNowDisplay, sans-serif"
-                      },
-                      onMouseEnter: (e) => {
-                        e.currentTarget.style.backgroundColor = "#e5e7eb";
-                      },
-                      onMouseLeave: (e) => {
-                        e.currentTarget.style.backgroundColor = "#f3f4f6";
-                      },
-                      children: "Close"
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      EchoSignOut,
+                      {
+                        onSuccess: () => {
+                          console.log("Signed out from credits modal");
+                          closeModal();
+                        },
+                        onError: (error2) => {
+                          console.error("Sign out error from credits modal:", error2);
+                        },
+                        children: /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            style: {
+                              padding: "8px 16px",
+                              backgroundColor: "transparent",
+                              color: "#dc2626",
+                              border: "1px solid #dc2626",
+                              borderRadius: "6px",
+                              fontSize: "14px",
+                              cursor: "pointer",
+                              fontFamily: "HelveticaNowDisplay, sans-serif",
+                              transition: "all 0.2s ease"
+                            },
+                            onMouseEnter: (e) => {
+                              e.currentTarget.style.backgroundColor = "#fef2f2";
+                              e.currentTarget.style.borderColor = "#b91c1c";
+                            },
+                            onMouseLeave: (e) => {
+                              e.currentTarget.style.backgroundColor = "transparent";
+                              e.currentTarget.style.borderColor = "#dc2626";
+                            },
+                            children: "Sign Out"
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: closeModal,
+                        style: {
+                          padding: "8px 16px",
+                          backgroundColor: "#f3f4f6",
+                          color: "#374151",
+                          border: "none",
+                          borderRadius: "6px",
+                          fontSize: "14px",
+                          cursor: "pointer",
+                          fontFamily: "HelveticaNowDisplay, sans-serif"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.backgroundColor = "#e5e7eb";
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.backgroundColor = "#f3f4f6";
+                        },
+                        children: "Close"
+                      }
+                    )
+                  ]
                 }
               )
             ]
@@ -29553,7 +30120,19 @@ function EchoTokenPurchase({
         children
       }
     ) : /* @__PURE__ */ jsx(CompactButton, {}),
-    isModalOpen && /* @__PURE__ */ jsx(Modal, {})
+    isModalOpen && /* @__PURE__ */ jsx(Modal, {}),
+    /* @__PURE__ */ jsx(
+      InsufficientFundsModal,
+      {
+        isOpen: isInsufficientFunds,
+        onClose: () => setIsInsufficientFunds(false),
+        onPurchaseComplete: () => {
+          onPurchaseComplete == null ? void 0 : onPurchaseComplete(balance);
+          setIsInsufficientFunds(false);
+        },
+        onError
+      }
+    )
   ] });
 }
 function useEchoOpenAI(options = {}) {
@@ -29628,7 +30207,8 @@ function useEchoOpenAI(options = {}) {
   };
 }
 const useEchoModelProviders = () => {
-  const { token, config: config2 } = useEcho();
+  const { token, config: config2, setIsInsufficientFunds } = useEcho();
+  const onInsufficientFunds = () => setIsInsufficientFunds(true);
   return useMemo(() => {
     const baseConfig = {
       appId: config2.appId,
@@ -29636,11 +30216,11 @@ const useEchoModelProviders = () => {
     };
     const getToken = async () => token;
     return {
-      openai: createEchoOpenAI(baseConfig, getToken),
-      anthropic: createEchoAnthropic(baseConfig, getToken),
-      google: createEchoGoogle(baseConfig, getToken)
+      openai: createEchoOpenAI(baseConfig, getToken, onInsufficientFunds),
+      anthropic: createEchoAnthropic(baseConfig, getToken, onInsufficientFunds),
+      google: createEchoGoogle(baseConfig, getToken, onInsufficientFunds)
     };
-  }, [token, config2.appId, config2.baseRouterUrl]);
+  }, [token, config2.appId, config2.baseRouterUrl, setIsInsufficientFunds]);
 };
 const EchoChatConfigContext = createContext(null);
 function EchoChatProvider({
@@ -33351,7 +33931,9 @@ export {
   EchoChatProvider,
   EchoProvider,
   EchoSignIn,
-  EchoTokenPurchase,
+  EchoSignOut,
+  EchoTokens,
+  InsufficientFundsModal,
   Logo,
   useChat,
   useEcho,