@ergoblockchain/sage-widget 0.2.0 → 0.3.0

package/dist/react.d.cts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-import { u as SageWidgetOptions, c as SageActivityResponse, l as SagePaymentWidgetOptions } from './types-yv1THHVz.cjs';
-export { D as DEFAULT_API_BASE, a as DEFAULT_LIMIT, b as DEFAULT_REFRESH_MS, S as SageActivityEvent, d as SageActivityType, e as SageChatMessage, f as SageChatRole, g as SageChatStreamEvent, h as SageChatStreamResult, i as SageChatTier, j as SagePaymentInstructions, k as SagePaymentPhase, m as SagePaymentWidgetStatus, n as SagePremiumPaymentRequired, o as SagePremiumReason, p as SageQuote, q as SageQuoteResponse, r as SageReceiptBundle, s as SageTenantConfig, t as SageVerifyPaymentResponse } from './types-yv1THHVz.cjs';
+import { y as SageWidgetOptions, c as SageActivityResponse, n as SagePaymentWidgetOptions } from './types-B5V2rsYn.cjs';
+export { D as DEFAULT_API_BASE, a as DEFAULT_LIMIT, b as DEFAULT_REFRESH_MS, S as SageActivityEvent, d as SageActivityType, e as SageChatMessage, f as SageChatRole, g as SageChatStreamEvent, h as SageChatStreamResult, i as SageChatTier, j as SagePaymentInstructions, k as SagePaymentIntent, l as SagePaymentNetwork, m as SagePaymentPhase, o as SagePaymentWidgetStatus, p as SagePremiumPaymentRequired, q as SagePremiumReason, r as SageQuote, s as SageQuoteResponse, t as SageReceiptBundle, u as SageTenantConfig, v as SageVerifyPaymentResponse, w as SageWalletLaunchResult, x as SageWalletLauncher } from './types-B5V2rsYn.cjs';
 
 /**
  * <SageActivityFeed /> — drop-in React component rendering Sage's live

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
-import { u as SageWidgetOptions, c as SageActivityResponse, l as SagePaymentWidgetOptions } from './types-yv1THHVz.js';
-export { D as DEFAULT_API_BASE, a as DEFAULT_LIMIT, b as DEFAULT_REFRESH_MS, S as SageActivityEvent, d as SageActivityType, e as SageChatMessage, f as SageChatRole, g as SageChatStreamEvent, h as SageChatStreamResult, i as SageChatTier, j as SagePaymentInstructions, k as SagePaymentPhase, m as SagePaymentWidgetStatus, n as SagePremiumPaymentRequired, o as SagePremiumReason, p as SageQuote, q as SageQuoteResponse, r as SageReceiptBundle, s as SageTenantConfig, t as SageVerifyPaymentResponse } from './types-yv1THHVz.js';
+import { y as SageWidgetOptions, c as SageActivityResponse, n as SagePaymentWidgetOptions } from './types-B5V2rsYn.js';
+export { D as DEFAULT_API_BASE, a as DEFAULT_LIMIT, b as DEFAULT_REFRESH_MS, S as SageActivityEvent, d as SageActivityType, e as SageChatMessage, f as SageChatRole, g as SageChatStreamEvent, h as SageChatStreamResult, i as SageChatTier, j as SagePaymentInstructions, k as SagePaymentIntent, l as SagePaymentNetwork, m as SagePaymentPhase, o as SagePaymentWidgetStatus, p as SagePremiumPaymentRequired, q as SagePremiumReason, r as SageQuote, s as SageQuoteResponse, t as SageReceiptBundle, u as SageTenantConfig, v as SageVerifyPaymentResponse, w as SageWalletLaunchResult, x as SageWalletLauncher } from './types-B5V2rsYn.js';
 
 /**
  * <SageActivityFeed /> — drop-in React component rendering Sage's live

package/dist/react.js

@@ -57,6 +57,28 @@ async function fetchSageReceipt(id, opts = {}) {
   if (!res.ok) throw new Error(readError(body, `sage receipt ${res.status}`));
   return body;
 }
+function createSagePaymentIntent(opts) {
+  const base = trimSlash(opts.apiBase ?? DEFAULT_API_BASE);
+  return {
+    type: "sage.payment_intent.v1",
+    network: opts.network ?? "ergo-testnet",
+    createdAt: opts.createdAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+    question: opts.question,
+    ...opts.tenant?.id || opts.tenant?.label ? { tenant: { id: opts.tenant.id, label: opts.tenant.label } } : {},
+    quote: opts.quote,
+    amountErg: opts.quote.price,
+    receiverAddress: opts.quote.receiverAddress,
+    reserveBoxId: opts.quote.reserveBoxId,
+    taskHash: opts.quote.taskHash,
+    expiresAt: opts.quote.expiresAt,
+    deadline: opts.quote.deadline,
+    verifyEndpoint: `${base}/api/sage/verify-payment`,
+    receiptEndpointTemplate: `${base}/api/sage/receipt/{receiptId}`
+  };
+}
+function serializeSagePaymentIntent(intent) {
+  return JSON.stringify(intent, null, 2);
+}
 async function streamSageChat(opts) {
   const res = await fetch(`${apiBase(opts)}/api/sage/chat`, {
     method: "POST",
@@ -490,6 +512,8 @@ function SagePaymentWidget(props) {
     initialMessages = [],
     placeholder = "Ask Sage about Ergo or agent payments...",
     paymentInstructions,
+    showPaymentIntent = true,
+    testnetWarning = "Testnet proof flow. The widget never signs funds; connect your own reviewed wallet layer before handling real value.",
     className,
     style,
     title = "Ask Sage"
@@ -498,6 +522,7 @@ function SagePaymentWidget(props) {
   const [input, setInput] = useState("");
   const [phase, setPhase] = useState("idle");
   const [quoteResponse, setQuoteResponse] = useState(null);
+  const [paymentIntent, setPaymentIntent] = useState(null);
   const [activeQuestion, setActiveQuestion] = useState("");
   const [noteBoxId, setNoteBoxId] = useState("");
   const [receipt, setReceipt] = useState(null);
@@ -526,6 +551,7 @@ function SagePaymentWidget(props) {
     setReceipt(null);
     setReceiptBundle(null);
     setQuoteResponse(null);
+    setPaymentIntent(null);
     setActiveQuestion(question);
     setNoteBoxId("");
     setTier(null);
@@ -539,8 +565,15 @@ function SagePaymentWidget(props) {
       props.onQuote?.(quote2);
       if (quote2.premium) {
         if (!quote2.quote) throw new Error("Sage marked this question premium but did not return a quote.");
+        const intent = createSagePaymentIntent({
+          ...apiOpts,
+          question,
+          quote: quote2.quote
+        });
+        setPaymentIntent(intent);
         setQuoteResponse(quote2);
-        transition("payment_required", { quote: quote2.quote });
+        props.onPaymentIntent?.(intent);
+        transition("payment_required", { quote: quote2.quote, paymentIntent: intent });
         return;
       }
       await streamAnswer(nextMessages, void 0, question);
@@ -571,14 +604,15 @@ function SagePaymentWidget(props) {
     setReceipt(verified);
     props.onReceipt?.(verified);
     setQuoteResponse(null);
+    setPaymentIntent(null);
     setNoteBoxId("");
-    transition("streaming", { quote: null, receipt: verified });
+    transition("streaming", { quote: null, paymentIntent: null, receipt: verified });
     try {
       const bundle = await fetchSageReceipt(verified.receiptId, apiOpts);
       if (!mountedRef.current) return;
       setReceiptBundle(bundle);
       props.onReceiptBundle?.(bundle);
-      emitStatus("streaming", { quote: null, receipt: verified, receiptBundle: bundle });
+      emitStatus("streaming", { quote: null, paymentIntent: null, receipt: verified, receiptBundle: bundle });
     } catch (bundleErr) {
       props.onError?.(bundleErr);
     }
@@ -622,7 +656,10 @@ function SagePaymentWidget(props) {
         props.onQuote?.(quote2);
         setQuoteResponse(quote2);
         setActiveQuestion(question);
-        transition("payment_required", { quote: quote2.quote ?? null });
+        const intent = quote2.quote ? createSagePaymentIntent({ ...apiOpts, question, quote: quote2.quote }) : null;
+        setPaymentIntent(intent);
+        if (intent) props.onPaymentIntent?.(intent);
+        transition("payment_required", { quote: quote2.quote ?? null, paymentIntent: intent });
         return;
       }
       throw new Error(result.error ?? "Sage chat failed.");
@@ -651,6 +688,7 @@ function SagePaymentWidget(props) {
       phase: nextPhase,
       tier: has("tier") ? overrides.tier ?? null : tier,
       quote: has("quote") ? overrides.quote ?? null : quoteResponse?.quote ?? null,
+      paymentIntent: has("paymentIntent") ? overrides.paymentIntent ?? null : paymentIntent,
       receipt: has("receipt") ? overrides.receipt ?? null : receipt,
       receiptBundle: has("receiptBundle") ? overrides.receiptBundle ?? null : receiptBundle,
       error: has("error") ? overrides.error ?? null : error,
@@ -660,6 +698,23 @@ function SagePaymentWidget(props) {
   }
   const quote = quoteResponse?.quote;
   const showPaymentPanel = quote && !receipt;
+  async function copyPaymentIntent() {
+    if (!paymentIntent) return;
+    await copyText(serializeSagePaymentIntent(paymentIntent));
+  }
+  async function launchWallet() {
+    if (!paymentIntent || !props.walletLauncher || busy) return;
+    setError(null);
+    try {
+      const result = await props.walletLauncher(paymentIntent);
+      if (result?.ok === false) {
+        throw new Error(result.error ?? "Wallet flow did not produce a Note.");
+      }
+      if (result?.noteBoxId) setNoteBoxId(result.noteBoxId);
+    } catch (err) {
+      fail(err, false);
+    }
+  }
   return /* @__PURE__ */ jsxs("section", { className, style: { ...rootStyle2, ...style }, children: [
     /* @__PURE__ */ jsxs("header", { style: headerStyle2, children: [
       /* @__PURE__ */ jsxs("div", { children: [
@@ -695,6 +750,24 @@ function SagePaymentWidget(props) {
       /* @__PURE__ */ jsx(Field, { label: "Receiver", value: quote.receiverAddress, copy: true }),
       /* @__PURE__ */ jsx(Field, { label: "Reserve box", value: quote.reserveBoxId, copy: true }),
       /* @__PURE__ */ jsx(Field, { label: "Task hash", value: quote.taskHash, copy: true }),
+      testnetWarning ? /* @__PURE__ */ jsx("div", { style: warningStyle, children: testnetWarning }) : null,
+      showPaymentIntent && paymentIntent ? /* @__PURE__ */ jsxs("div", { style: intentStyle, children: [
+        /* @__PURE__ */ jsxs("div", { style: intentHeaderStyle, children: [
+          /* @__PURE__ */ jsx("strong", { children: "Payment intent" }),
+          /* @__PURE__ */ jsx("button", { type: "button", style: copyButtonStyle, onClick: copyPaymentIntent, children: "Copy JSON" })
+        ] }),
+        /* @__PURE__ */ jsx("code", { style: intentCodeStyle, children: serializeSagePaymentIntent(paymentIntent) })
+      ] }) : null,
+      props.walletLauncher && paymentIntent ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: launchWallet,
+          disabled: busy,
+          style: secondaryButtonStyle,
+          children: paymentInstructions?.walletLauncherLabel ?? "Open wallet flow"
+        }
+      ) : null,
       /* @__PURE__ */ jsxs("label", { style: labelStyle2, children: [
         paymentInstructions?.noteBoxLabel ?? "Note box id",
         /* @__PURE__ */ jsx(
@@ -750,9 +823,9 @@ function Field({ label, value, copy = false }) {
     copy ? /* @__PURE__ */ jsx("button", { type: "button", style: copyButtonStyle, onClick: () => copyText(value), children: "Copy" }) : null
   ] });
 }
-function copyText(value) {
+async function copyText(value) {
   if (typeof navigator !== "undefined" && navigator.clipboard) {
-    void navigator.clipboard.writeText(value);
+    await navigator.clipboard.writeText(value);
   }
 }
 function shortId(value) {
@@ -925,6 +998,50 @@ var primaryButtonStyle = {
   ...sendButtonStyle,
   padding: "10px 12px"
 };
+var secondaryButtonStyle = {
+  border: "1px solid rgba(103,232,249,.28)",
+  background: "rgba(103,232,249,.08)",
+  color: "#cffafe",
+  borderRadius: 6,
+  padding: "10px 12px",
+  fontWeight: 800,
+  cursor: "pointer"
+};
+var warningStyle = {
+  color: "#fde68a",
+  background: "rgba(245,158,11,.1)",
+  border: "1px solid rgba(245,158,11,.24)",
+  borderRadius: 6,
+  padding: "8px 9px",
+  fontSize: 12,
+  lineHeight: 1.45
+};
+var intentStyle = {
+  border: "1px solid rgba(255,255,255,.12)",
+  background: "rgba(255,255,255,.04)",
+  borderRadius: 6,
+  padding: 10,
+  display: "grid",
+  gap: 8
+};
+var intentHeaderStyle = {
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  gap: 8,
+  color: "#e2e8f0",
+  fontSize: 12
+};
+var intentCodeStyle = {
+  display: "block",
+  maxHeight: 130,
+  overflow: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  color: "#cbd5e1",
+  fontSize: 10,
+  lineHeight: 1.45
+};
 var receiptStyle = {
   display: "inline-flex",
   color: "#67e8f9",