@emblemvault/hustle-react 1.5.7 → 1.5.8

package/dist/browser/hustle-react.js

@@ -1,3 +1,4 @@
+'use client';
 import { createContext, useState, useEffect, useCallback, useRef, useMemo, useContext } from 'react';
 import { HustleIncognitoClient } from 'hustle-incognito';
 import { useEmblemAuthOptional } from '@emblemvault/emblem-auth-react';
@@ -15324,6 +15325,9 @@ function HustleChat({
     }
     return false;
   });
+  const [paygStatus, setPaygStatus] = useState(null);
+  const [paygLoading, setPaygLoading] = useState(false);
+  const [paygError, setPaygError] = useState(null);
   useEffect(() => {
     if (typeof window !== "undefined") {
       localStorage.setItem(`hustle-stt-enabled-${instanceId}`, String(speechToTextEnabled));
@@ -15377,6 +15381,34 @@ function HustleChat({
   const removeAttachment = useCallback((index) => {
     setAttachments((prev) => prev.filter((_2, i) => i !== index));
   }, []);
+  const fetchPaygStatus = useCallback(async () => {
+    if (!client) return;
+    setPaygLoading(true);
+    setPaygError(null);
+    try {
+      const status = await client.getPaygStatus();
+      setPaygStatus(status);
+    } catch (err) {
+      setPaygError(err.message || "Failed to fetch PAYG status");
+    } finally {
+      setPaygLoading(false);
+    }
+  }, [client]);
+  const configurePayg = useCallback(async (options) => {
+    if (!client) return;
+    setPaygError(null);
+    try {
+      await client.configurePayg(options);
+      await fetchPaygStatus();
+    } catch (err) {
+      setPaygError(err.message || "Failed to configure PAYG");
+    }
+  }, [client, fetchPaygStatus]);
+  useEffect(() => {
+    if (showSettingsPanel && client) {
+      fetchPaygStatus();
+    }
+  }, [showSettingsPanel, client, fetchPaygStatus]);
   const sendContinue = useCallback(async () => {
     if (isStreaming || !isReady) return;
     console.log("[AUTO_CONTINUE] Sending continue message...");
@@ -15831,6 +15863,84 @@ function HustleChat({
             /* @__PURE__ */ jsx("p", { style: styles.settingDescription, children: "Use your microphone to dictate messages" })
           ] }),
           /* @__PURE__ */ jsx("div", { style: styles.settingDivider }),
+          /* @__PURE__ */ jsxs("div", { style: styles.settingGroup, children: [
+            /* @__PURE__ */ jsx("label", { style: styles.settingLabel, children: "Pay-As-You-Go Billing" }),
+            /* @__PURE__ */ jsx("p", { style: styles.settingDescription, children: "Manage your PAYG billing configuration" }),
+            paygLoading && !paygStatus && /* @__PURE__ */ jsx("p", { style: { ...styles.settingDescription, fontStyle: "italic" }, children: "Loading billing status..." }),
+            paygError && /* @__PURE__ */ jsx("p", { style: { ...styles.settingDescription, color: "#ef4444" }, children: paygError }),
+            paygStatus && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: styles.toggleRow,
+                  onClick: () => configurePayg({ enabled: !paygStatus.enabled }),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: styles.toggleLabel, children: paygStatus.enabled ? "PAYG Enabled" : "PAYG Disabled" }),
+                    /* @__PURE__ */ jsx("div", { style: {
+                      ...styles.toggleSwitch,
+                      ...paygStatus.enabled ? styles.toggleSwitchActive : {}
+                    }, children: /* @__PURE__ */ jsx("div", { style: {
+                      ...styles.toggleKnob,
+                      ...paygStatus.enabled ? styles.toggleKnobActive : {}
+                    } }) })
+                  ]
+                }
+              ),
+              paygStatus.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacing.sm }, children: [
+                  /* @__PURE__ */ jsx("label", { style: { ...styles.settingDescription, display: "block", marginBottom: "4px" }, children: "Payment Token" }),
+                  /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: paygStatus.payment_token || "",
+                      onChange: (e) => configurePayg({ payment_token: e.target.value }),
+                      style: styles.settingSelect,
+                      children: (paygStatus.available_tokens || ["SOL", "SOL_USDC", "HUSTLE", "ETH", "ETH_USDC", "BASE_ETH", "BASE_USDC"]).map((token) => /* @__PURE__ */ jsx("option", { value: token, children: token }, token))
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacing.sm }, children: [
+                  /* @__PURE__ */ jsx("label", { style: { ...styles.settingDescription, display: "block", marginBottom: "4px" }, children: "Payment Mode" }),
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: paygStatus.mode || "pay_per_request",
+                      onChange: (e) => configurePayg({ mode: e.target.value }),
+                      style: styles.settingSelect,
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "pay_per_request", children: "Pay Per Request" }),
+                        /* @__PURE__ */ jsx("option", { value: "debt_accumulation", children: "Debt Accumulation" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { marginTop: tokens.spacing.md, padding: tokens.spacing.sm, background: "rgba(255,255,255,0.05)", borderRadius: tokens.radius.sm, fontSize: tokens.typography.fontSizeXs, color: tokens.colors.textSecondary }, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "Chain: ",
+                    paygStatus.payment_chain || "N/A"
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "Total Debt: $",
+                    (paygStatus.total_debt_usd || 0).toFixed(4)
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "Total Paid: $",
+                    (paygStatus.total_paid_usd || 0).toFixed(4)
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "Debt Ceiling: $",
+                    (paygStatus.debt_ceiling_usd || 0).toFixed(2)
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    "Pending Charges: ",
+                    paygStatus.pending_charges || 0
+                  ] }),
+                  paygStatus.is_blocked && /* @__PURE__ */ jsx("div", { style: { color: "#ef4444", fontWeight: "bold", marginTop: "4px" }, children: "Account is blocked" })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: styles.settingDivider }),
           /* @__PURE__ */ jsxs("div", { style: { ...styles.settingGroup, marginBottom: 0 }, children: [
             /* @__PURE__ */ jsx("label", { style: styles.settingLabel, children: "Plugins" }),
             /* @__PURE__ */ jsx("p", { style: styles.settingDescription, children: "Extend the AI with custom tools" }),