@prodact.ai/sdk 0.0.8 → 0.0.10

package/dist/react.js

@@ -1242,7 +1242,15 @@ var UserFlowTracker = class {
       console.warn("[UserFlow] Cannot track outside browser environment");
       return null;
     }
+    console.log("[UserFlow] start() called", {
+      enabled: this.config.enabled,
+      samplingRate: this.config.samplingRate,
+      currentState: this.state,
+      apiUrl: this.apiUrl,
+      hasSessionToken: !!this.sessionToken
+    });
     if (!this.config.enabled) {
+      console.warn("[UserFlow] Tracking disabled by config");
       return null;
     }
     if (this.state === "tracking") {
@@ -2023,11 +2031,13 @@ Check the Network tab in DevTools for more details.`
         role: "assistant",
         content: result.message?.content || result.response || "",
         visualFlows: result.flows || [],
-        images: result.images || []
+        images: result.images || [],
+        userFlows: result.userFlows || []
       };
       await this.log("info", "Chat response received", {
         hasFlows: (result.flows || []).length > 0,
-        hasImages: (result.images || []).length > 0
+        hasImages: (result.images || []).length > 0,
+        hasUserFlows: (result.userFlows || []).length > 0
       });
       this.emit("message", chatMessage);
       return chatMessage;
@@ -2593,6 +2603,15 @@ Check the Network tab in DevTools for more details.`
    */
   async initUserFlowTracking() {
     try {
+      console.log(
+        "%c\u{1F4CA} Initializing User Flow Tracking",
+        "background: #8b5cf6; color: #fff; padding: 2px 6px; border-radius: 3px;",
+        {
+          config: this.config.userFlows,
+          apiUrl: this.config.apiUrl,
+          sdkKey: this.config.sdkKey ? "present" : "missing"
+        }
+      );
       this.userFlowTracker = new UserFlowTracker(this.config.userFlows);
       this.userFlowTracker.initialize(
         this.sessionToken,
@@ -2602,12 +2621,27 @@ Check the Network tab in DevTools for more details.`
       const recordingSessionId = this.recorder?.getSessionId?.() || null;
       const sessionId = await this.userFlowTracker.start(recordingSessionId);
       if (sessionId) {
+        console.log(
+          "%c\u2705 User Flow Tracking Started",
+          "background: #10b981; color: #fff; padding: 2px 6px; border-radius: 3px;",
+          { flowSessionId: sessionId, linkedRecordingSession: recordingSessionId }
+        );
         await this.log("info", "User flow tracking started", {
           flowSessionId: sessionId,
           linkedRecordingSession: recordingSessionId
         });
+      } else {
+        console.warn(
+          "%c\u26A0\uFE0F User Flow Tracking: No session ID returned",
+          "background: #f59e0b; color: #000; padding: 2px 6px; border-radius: 3px;"
+        );
       }
     } catch (error) {
+      console.error(
+        "%c\u274C User Flow Tracking Failed",
+        "background: #ef4444; color: #fff; padding: 2px 6px; border-radius: 3px;",
+        error
+      );
       await this.log("warn", "Failed to initialize user flow tracking", {
         error: error instanceof Error ? error.message : String(error)
       });
@@ -3516,6 +3550,80 @@ function ProduckChat({
                       ]
                     },
                     imgIdx
+                  )) }),
+                  msg.userFlows && msg.userFlows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "12px" }, children: msg.userFlows.filter((uf) => uf.hasReplay).slice(0, 2).map((userFlow, ufIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        marginTop: ufIdx > 0 ? "8px" : 0,
+                        padding: "12px",
+                        borderRadius: "8px",
+                        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+                        backgroundColor: isDark ? "#1f2937" : "#f9fafb"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginBottom: "8px"
+                        }, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "16px" }, children: "\u{1F3AC}" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
+                              fontWeight: 600,
+                              fontSize: "13px",
+                              color: isDark ? "#f3f4f6" : "#111827"
+                            }, children: userFlow.title })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: {
+                            fontSize: "11px",
+                            padding: "2px 6px",
+                            backgroundColor: primaryColor + "20",
+                            color: primaryColor,
+                            borderRadius: "4px"
+                          }, children: [
+                            userFlow.eventCount,
+                            " steps"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: {
+                          fontSize: "12px",
+                          color: isDark ? "#9ca3af" : "#6b7280",
+                          marginBottom: "10px",
+                          lineHeight: 1.4
+                        }, children: userFlow.description }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                          "button",
+                          {
+                            onClick: () => {
+                              const replayUrl = `${window.location.origin}/recordings/${userFlow.recordingId}`;
+                              window.open(replayUrl, "_blank", "width=1200,height=800");
+                            },
+                            style: {
+                              display: "flex",
+                              alignItems: "center",
+                              gap: "6px",
+                              padding: "8px 12px",
+                              backgroundColor: primaryColor,
+                              color: "#fff",
+                              border: "none",
+                              borderRadius: "6px",
+                              fontSize: "12px",
+                              fontWeight: 500,
+                              cursor: "pointer",
+                              width: "100%",
+                              justifyContent: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u25B6\uFE0F" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Watch Session Replay" })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    userFlow.id || ufIdx
                   )) })
                 ]
               }