vibezcheck 0.2.0 → 0.3.0

package/dist/react/index.mjs

@@ -383,7 +383,7 @@ var VibezSessionProvider = ({
 };
 
 // src/react/hooks.ts
-import { useContext } from "react";
+import { useContext, useState as useState2, useCallback as useCallback2, useRef } from "react";
 function useVibezSession() {
   const context = useContext(VibezSessionContext);
   if (!context) {
@@ -394,9 +394,196 @@ function useVibezSession() {
   return context;
 }
 var useVibez = useVibezSession;
+function useVibezChat(options = {}) {
+  const {
+    api = "/api/chat",
+    model = "gpt-4o-mini",
+    customer = "anonymous",
+    body = {},
+    initialMessages = [],
+    onFinish,
+    onError
+  } = options;
+  const session = useContext(VibezSessionContext);
+  const [messages, setMessages] = useState2(initialMessages);
+  const [input, setInput] = useState2("");
+  const [isLoading, setIsLoading] = useState2(false);
+  const abortControllerRef = useRef(null);
+  const handleInputChange = useCallback2(
+    (e) => {
+      setInput(e.target.value);
+    },
+    []
+  );
+  const append = useCallback2(
+    async (userMessage) => {
+      const updatedMessages = [...messages, userMessage];
+      setMessages(updatedMessages);
+      setIsLoading(true);
+      const assistantId = "msg_" + Math.random().toString(36).substring(2, 9);
+      let assistantContent = "";
+      let detectedReasoning = "";
+      let detectedUsage = {
+        promptTokens: 0,
+        completionTokens: 0,
+        totalTokens: 0,
+        reasoningTokens: 0
+      };
+      setMessages((prev) => [
+        ...prev,
+        {
+          id: assistantId,
+          role: "assistant",
+          content: "",
+          createdAt: /* @__PURE__ */ new Date()
+        }
+      ]);
+      try {
+        abortControllerRef.current = new AbortController();
+        const res = await fetch(api, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            messages: updatedMessages.map((m) => ({
+              role: m.role,
+              content: m.content
+            })),
+            model,
+            customer,
+            ...body
+          }),
+          signal: abortControllerRef.current.signal
+        });
+        if (!res.ok) {
+          const errData = await res.json().catch(() => ({}));
+          throw new Error(errData.error || `HTTP error! status: ${res.status}`);
+        }
+        const reader = res.body?.getReader();
+        if (!reader) throw new Error("No stream body available");
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop() || "";
+          for (const line of lines) {
+            if (!line.trim()) continue;
+            if (line.startsWith("0:")) {
+              try {
+                assistantContent += JSON.parse(line.substring(2));
+              } catch {
+                assistantContent += line.substring(2).replace(/^"|"$/g, "");
+              }
+            } else if (line.startsWith("d:")) {
+              try {
+                const data = JSON.parse(line.substring(2));
+                if (data.usage) {
+                  detectedUsage = {
+                    promptTokens: data.usage.promptTokens ?? 0,
+                    completionTokens: data.usage.completionTokens ?? 0,
+                    totalTokens: (data.usage.promptTokens ?? 0) + (data.usage.completionTokens ?? 0),
+                    reasoningTokens: data.usage.reasoningTokens ?? 0
+                  };
+                }
+              } catch {
+              }
+            } else if (line.startsWith("e:") || line.startsWith("g:")) {
+              try {
+                detectedReasoning += JSON.parse(line.substring(2));
+              } catch {
+                detectedReasoning += line.substring(2);
+              }
+            } else if (!line.startsWith("f:") && !line.startsWith("2:")) {
+              assistantContent += line;
+            }
+            setMessages(
+              (prev) => prev.map(
+                (msg) => msg.id === assistantId ? {
+                  ...msg,
+                  content: assistantContent,
+                  annotations: detectedReasoning ? [{ type: "reasoning", reasoning: detectedReasoning }] : void 0
+                } : msg
+              )
+            );
+          }
+        }
+        if (detectedUsage.promptTokens === 0 && detectedUsage.completionTokens === 0) {
+          const promptWords = updatedMessages.reduce(
+            (acc, m) => acc + m.content.split(/\s+/).length,
+            0
+          );
+          const outputWords = assistantContent.split(/\s+/).length;
+          detectedUsage = {
+            promptTokens: Math.ceil(promptWords * 1.3),
+            completionTokens: Math.ceil(outputWords * 1.3),
+            totalTokens: Math.ceil((promptWords + outputWords) * 1.3),
+            reasoningTokens: detectedReasoning ? Math.ceil(detectedReasoning.split(/\s+/).length * 1.3) : 0
+          };
+        }
+        if (session) {
+          session.recordTurn({
+            model,
+            usage: detectedUsage
+          });
+        }
+        const finalMsg = {
+          id: assistantId,
+          role: "assistant",
+          content: assistantContent,
+          annotations: detectedReasoning ? [{ type: "reasoning", reasoning: detectedReasoning }] : void 0,
+          createdAt: /* @__PURE__ */ new Date()
+        };
+        if (onFinish) {
+          onFinish(finalMsg, detectedUsage);
+        }
+      } catch (err) {
+        if (err.name === "AbortError") return;
+        console.error("[useVibezChat Error]", err);
+        if (onError) onError(err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [api, model, customer, body, messages, session, onFinish, onError]
+  );
+  const handleSubmit = useCallback2(
+    (e) => {
+      if (e) e.preventDefault();
+      if (!input.trim() || isLoading) return;
+      const userMsg = {
+        id: "msg_" + Math.random().toString(36).substring(2, 9),
+        role: "user",
+        content: input.trim(),
+        createdAt: /* @__PURE__ */ new Date()
+      };
+      setInput("");
+      append(userMsg);
+    },
+    [input, isLoading, append]
+  );
+  const stop = useCallback2(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsLoading(false);
+    }
+  }, []);
+  return {
+    messages,
+    setMessages,
+    input,
+    setInput,
+    handleInputChange,
+    handleSubmit,
+    isLoading,
+    stop,
+    append
+  };
+}
 
 // src/react/widget.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var VibezSessionWidget = ({
   position = "bottom-right",
@@ -408,7 +595,7 @@ var VibezSessionWidget = ({
   style
 }) => {
   const { sessionUsage, sessionCost, turnCount, byModel } = useVibezSession();
-  const [expanded, setExpanded] = useState2(false);
+  const [expanded, setExpanded] = useState3(false);
   const hasUsage = sessionUsage.totalTokens > 0;
   const isDark = theme === "dark" || theme === "auto" && typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
   const colors = {
@@ -631,12 +818,168 @@ var VibezSessionBadge = ({
     }
   );
 };
+
+// src/react/billing-modal.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CreditCardIcon = () => /* @__PURE__ */ jsxs3("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ jsx4("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx4("line", { x1: "2", y1: "10", x2: "22", y2: "10", strokeWidth: "2" })
+] });
+var ShieldCheckIcon = () => /* @__PURE__ */ jsx4("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" }) });
+var ZapIcon = () => /* @__PURE__ */ jsx4("svg", { className: "h-3.5 w-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("polygon", { points: "13 2 3 14 12 14 11 22 21 10 12 10 13 2", strokeWidth: "2", strokeLinejoin: "round" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxs3("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ jsx4("line", { x1: "18", y1: "6", x2: "6", y2: "18", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx4("line", { x1: "6", y1: "6", x2: "18", y2: "18", strokeWidth: "2", strokeLinecap: "round" })
+] });
+var CheckIcon = () => /* @__PURE__ */ jsx4("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx4("polyline", { points: "20 6 9 17 4 12", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ArrowRightIcon = () => /* @__PURE__ */ jsxs3("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+  /* @__PURE__ */ jsx4("line", { x1: "5", y1: "12", x2: "19", y2: "12", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx4("polyline", { points: "12 5 19 12 12 19", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var VibezBillingModal = ({
+  notice,
+  isOpen: explicitIsOpen,
+  onClose,
+  onSuccess,
+  theme = "light",
+  testMode = true
+}) => {
+  const [loading, setLoading] = useState4(false);
+  const [successState, setSuccessState] = useState4(false);
+  const [selectedPlan, setSelectedPlan] = useState4("starter");
+  const isVisible = explicitIsOpen !== void 0 ? explicitIsOpen : Boolean(notice);
+  if (!isVisible) return null;
+  const handleSimulatePayment = async () => {
+    setLoading(true);
+    if (notice?.checkoutUrl) {
+      window.location.href = notice.checkoutUrl;
+      return;
+    }
+    await new Promise((r) => setTimeout(r, 1200));
+    setLoading(false);
+    setSuccessState(true);
+    setTimeout(() => {
+      setSuccessState(false);
+      if (onSuccess) onSuccess();
+      if (onClose) onClose();
+    }, 1500);
+  };
+  const isLight = theme === "light";
+  return /* @__PURE__ */ jsx4("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-200", children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `relative w-full max-w-md rounded-2xl shadow-2xl border transition-all overflow-hidden ${isLight ? "bg-white border-slate-200 text-slate-900" : "bg-slate-900 border-slate-800 text-white"}`,
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "h-1.5 w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-emerald-500" }),
+        onClose && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: onClose,
+            className: "absolute top-3.5 right-3.5 p-1 rounded-lg text-slate-400 hover:text-slate-700 hover:bg-slate-100 transition",
+            children: /* @__PURE__ */ jsx4(CloseIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "p-6 space-y-5", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx4("div", { className: "h-10 w-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-md shadow-indigo-500/20 shrink-0", children: /* @__PURE__ */ jsx4(CreditCardIcon, {}) }),
+            /* @__PURE__ */ jsxs3("div", { children: [
+              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx4("h3", { className: "font-bold text-base tracking-tight", children: notice?.status === "limit_reached" ? "Token Limit Reached" : "Add Billing Credits" }),
+                testMode && /* @__PURE__ */ jsx4("span", { className: "text-[10px] uppercase font-bold px-2 py-0.5 rounded-full bg-amber-50 text-amber-700 border border-amber-200", children: "Stripe Sandbox" })
+              ] }),
+              /* @__PURE__ */ jsx4("p", { className: "text-xs text-slate-500 mt-0.5", children: notice?.message || "Top up your account to continue streaming AI tokens." })
+            ] })
+          ] }),
+          (notice?.tokensUsed || notice?.costUSD) && /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: `p-3 rounded-xl border flex items-center justify-between text-xs ${isLight ? "bg-slate-50 border-slate-200" : "bg-slate-800 border-slate-700"}`,
+              children: [
+                /* @__PURE__ */ jsxs3("div", { children: [
+                  /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Tokens Metered:" }),
+                  " ",
+                  /* @__PURE__ */ jsx4("strong", { className: "text-slate-800 font-semibold", children: notice.tokensUsed?.toLocaleString() || 0 })
+                ] }),
+                /* @__PURE__ */ jsxs3("div", { children: [
+                  /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Cost:" }),
+                  " ",
+                  /* @__PURE__ */ jsxs3("strong", { className: "text-indigo-600 font-semibold", children: [
+                    "$",
+                    notice.costUSD?.toFixed(4) || "0.0000",
+                    " USD"
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx4("label", { className: "text-xs font-semibold text-slate-500 uppercase tracking-wider", children: "Select Top-Up Option" }),
+            /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-2.5", children: [
+              /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedPlan("starter"),
+                  className: `p-3 rounded-xl border text-left transition relative ${selectedPlan === "starter" ? "border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20" : isLight ? "border-slate-200 bg-white hover:border-slate-300" : "border-slate-800 bg-slate-800/50"}`,
+                  children: [
+                    /* @__PURE__ */ jsx4("div", { className: "text-xs font-bold text-slate-900", children: "$5.00 Top-Up" }),
+                    /* @__PURE__ */ jsx4("div", { className: "text-[11px] text-slate-500 mt-0.5", children: "500k AI Tokens" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSelectedPlan("pro"),
+                  className: `p-3 rounded-xl border text-left transition relative ${selectedPlan === "pro" ? "border-indigo-600 bg-indigo-50/60 ring-2 ring-indigo-500/20" : isLight ? "border-slate-200 bg-white hover:border-slate-300" : "border-slate-800 bg-slate-800/50"}`,
+                  children: [
+                    /* @__PURE__ */ jsx4("div", { className: "text-xs font-bold text-slate-900", children: "$20.00 Pro" }),
+                    /* @__PURE__ */ jsx4("div", { className: "text-[11px] text-slate-500 mt-0.5", children: "2.5M AI Tokens" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: handleSimulatePayment,
+              disabled: loading || successState,
+              className: "w-full py-2.5 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-500 disabled:opacity-50 text-white text-sm font-semibold flex items-center justify-center gap-2 shadow-md shadow-indigo-500/20 transition",
+              children: loading ? /* @__PURE__ */ jsx4("span", { children: "Processing Stripe Sandbox Checkout..." }) : successState ? /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5 text-emerald-300 font-semibold", children: [
+                /* @__PURE__ */ jsx4(CheckIcon, {}),
+                " Credits Added Successfully!"
+              ] }) : /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx4("span", { children: "Checkout with Stripe" }),
+                /* @__PURE__ */ jsx4(ArrowRightIcon, {})
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center gap-4 text-[11px] text-slate-400 pt-1 border-t border-slate-100", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx4(ShieldCheckIcon, {}),
+              /* @__PURE__ */ jsx4("span", { children: "Stripe v2 Meter Events" })
+            ] }),
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx4(ZapIcon, {}),
+              /* @__PURE__ */ jsx4("span", { children: "Zero Latency Telemetry" })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+};
 export {
+  VibezBillingModal,
   VibezSessionBadge,
   VibezSessionContext,
   VibezSessionProvider,
   VibezSessionWidget,
   useVibez,
+  useVibezChat,
   useVibezSession
 };
 //# sourceMappingURL=index.mjs.map