@prodact.ai/sdk 0.0.10 → 0.0.11

package/dist/react.js

@@ -1247,7 +1247,7 @@ var UserFlowTracker = class {
       samplingRate: this.config.samplingRate,
       currentState: this.state,
       apiUrl: this.apiUrl,
-      hasSessionToken: !!this.sessionToken
+      hasSessionToken: !!this.sdkSessionToken
     });
     if (!this.config.enabled) {
       console.warn("[UserFlow] Tracking disabled by config");
@@ -1373,6 +1373,57 @@ var UserFlowTracker = class {
   isTracking() {
     return this.state === "tracking";
   }
+  /**
+   * Get recent events for context (excludes SDK UI interactions like chat widget)
+   * @param limit - Maximum number of events to return (default: 10)
+   * @param excludeSelectors - CSS selectors to exclude (default: produck SDK elements)
+   */
+  getRecentEvents(limit = 10, excludeSelectors) {
+    const defaultExcludeSelectors = [
+      "[data-produck-chat]",
+      ".produck-chat",
+      ".produck-widget",
+      "#produck-chat",
+      "#produck-widget",
+      '[class*="produck"]',
+      '[id*="produck"]'
+    ];
+    const selectorsToExclude = excludeSelectors || defaultExcludeSelectors;
+    const filteredEvents = this.events.filter((event) => {
+      if (event.eventType === "navigation") return true;
+      if (event.element?.selector) {
+        const selectorLower = event.element.selector.toLowerCase();
+        const matchesExclude = selectorsToExclude.some((excludeSel) => {
+          const excludeLower = excludeSel.toLowerCase();
+          if (excludeLower.includes("produck")) {
+            return selectorLower.includes("produck");
+          }
+          return selectorLower.includes(excludeLower.replace(/[\[\].*#]/g, ""));
+        });
+        if (matchesExclude) return false;
+      }
+      return true;
+    });
+    return filteredEvents.slice(-limit);
+  }
+  /**
+   * Get recent events as a summary string for chat context
+   */
+  getRecentEventsAsSummary(limit = 10) {
+    const events = this.getRecentEvents(limit);
+    if (events.length === 0) return "";
+    return events.map((event) => {
+      if (event.eventType === "navigation") {
+        return `Navigated to: ${event.pageTitle || event.pagePath}`;
+      } else if (event.eventType === "click" && event.element) {
+        const elementDesc = event.element.text || event.element.tag || "element";
+        return `Clicked: ${elementDesc}${event.pageTitle ? ` on ${event.pageTitle}` : ""}`;
+      } else if (event.eventType === "form_submit") {
+        return `Submitted form on: ${event.pageTitle || event.pagePath}`;
+      }
+      return `${event.eventType}: ${event.pageTitle || event.pagePath}`;
+    }).join("\n");
+  }
   /**
    * Add a custom event
    */
@@ -2015,12 +2066,16 @@ Check the Network tab in DevTools for more details.`
           });
         }
       }
+      const userContext = this.getRecentUserFlowSummary(10);
       const sessionResponse = await fetch(
         `${this.config.apiUrl}/chat/sessions/${this.sessionToken}/message`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ message })
+          body: JSON.stringify({
+            message,
+            userContext: userContext || void 0
+          })
         }
       );
       if (!sessionResponse.ok) {
@@ -2711,6 +2766,19 @@ Check the Network tab in DevTools for more details.`
   getUserFlowStats() {
     return this.userFlowTracker?.getStats() ?? null;
   }
+  /**
+   * Get recent user flow events (excluding SDK UI interactions)
+   * Useful for providing context to chat
+   */
+  getRecentUserFlowEvents(limit = 10) {
+    return this.userFlowTracker?.getRecentEvents(limit) ?? [];
+  }
+  /**
+   * Get recent user flow events as a summary string for chat context
+   */
+  getRecentUserFlowSummary(limit = 10) {
+    return this.userFlowTracker?.getRecentEventsAsSummary(limit) ?? "";
+  }
   /**
    * Check if user flow tracking is active
    */
@@ -2881,7 +2949,7 @@ function ProduckProvider({
 }
 
 // src/react/ProduckChat.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/react/hooks.ts
 var import_react3 = require("react");
@@ -3171,8 +3239,267 @@ function VisualFlowDisplay({
   ] });
 }
 
-// src/react/ProduckChat.tsx
+// src/react/StepGuide.tsx
+var import_react5 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function StepGuide({
+  title,
+  description,
+  steps,
+  theme = "light",
+  primaryColor = "#f97316",
+  onStepClick,
+  hasReplay,
+  onWatchReplay,
+  compact = false
+}) {
+  const [expandedStep, setExpandedStep] = (0, import_react5.useState)(null);
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#1f2937" : "#f9fafb";
+  const borderColor = isDark ? "#374151" : "#e5e7eb";
+  const textColor = isDark ? "#f3f4f6" : "#111827";
+  const mutedColor = isDark ? "#9ca3af" : "#6b7280";
+  const stepBgColor = isDark ? "#374151" : "#ffffff";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      style: {
+        backgroundColor: compact ? "transparent" : bgColor,
+        border: compact ? "none" : `1px solid ${borderColor}`,
+        borderRadius: compact ? "0" : "12px",
+        overflow: "hidden",
+        marginTop: compact ? "0" : "12px"
+      },
+      children: [
+        !compact && title && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: `1px solid ${borderColor}`,
+              backgroundColor: isDark ? "#111827" : "#ffffff"
+            },
+            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: "18px" }, children: "\u{1F4CB}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      fontSize: "14px",
+                      color: textColor
+                    },
+                    children: title
+                  }
+                )
+              ] }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "p",
+                {
+                  style: {
+                    marginTop: "4px",
+                    fontSize: "12px",
+                    color: mutedColor,
+                    lineHeight: 1.4
+                  },
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: compact ? "0" : "12px" }, children: steps.map((step, index) => {
+          const isLast = index === steps.length - 1;
+          const isExpanded = expandedStep === index;
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "12px",
+                cursor: onStepClick ? "pointer" : "default"
+              },
+              onClick: () => {
+                if (onStepClick) {
+                  onStepClick(step, index);
+                }
+                setExpandedStep(isExpanded ? null : index);
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      width: "24px"
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: "24px",
+                            height: "24px",
+                            borderRadius: "50%",
+                            backgroundColor: primaryColor,
+                            color: "#ffffff",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: "12px",
+                            fontWeight: 600,
+                            flexShrink: 0
+                          },
+                          children: step.stepNumber
+                        }
+                      ),
+                      !isLast && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: "2px",
+                            flexGrow: 1,
+                            minHeight: "20px",
+                            backgroundColor: isDark ? "#4b5563" : "#d1d5db",
+                            marginTop: "4px"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      paddingBottom: isLast ? 0 : "16px"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          backgroundColor: stepBgColor,
+                          border: `1px solid ${borderColor}`,
+                          borderRadius: "8px",
+                          padding: "10px 12px",
+                          transition: "all 0.2s ease"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "div",
+                            {
+                              style: {
+                                fontSize: "13px",
+                                fontWeight: 500,
+                                color: textColor,
+                                lineHeight: 1.4
+                              },
+                              children: step.action
+                            }
+                          ),
+                          step.page && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                marginTop: "4px",
+                                fontSize: "11px",
+                                color: mutedColor,
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "4px"
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u{1F4CD}" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: step.page })
+                              ]
+                            }
+                          ),
+                          isExpanded && step.details && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "div",
+                            {
+                              style: {
+                                marginTop: "8px",
+                                paddingTop: "8px",
+                                borderTop: `1px solid ${borderColor}`,
+                                fontSize: "12px",
+                                color: mutedColor,
+                                lineHeight: 1.5
+                              },
+                              children: step.details
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            index
+          );
+        }) }),
+        hasReplay && onWatchReplay && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderTop: `1px solid ${borderColor}`,
+              backgroundColor: isDark ? "#111827" : "#ffffff"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              "button",
+              {
+                onClick: onWatchReplay,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "8px",
+                  width: "100%",
+                  padding: "10px 16px",
+                  backgroundColor: primaryColor,
+                  color: "#ffffff",
+                  border: "none",
+                  borderRadius: "8px",
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  cursor: "pointer"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u25B6\uFE0F" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Watch Full Session Replay" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function parseStepsFromStrings(steps) {
+  return steps.map((stepStr, index) => {
+    const stepMatch = stepStr.match(/^(?:Step\s+)?(\d+)[:.]\s*(.+?)(?:\s*\((?:on\s+)?(.+?)\))?$/i);
+    if (stepMatch) {
+      return {
+        stepNumber: parseInt(stepMatch[1], 10),
+        action: stepMatch[2].trim(),
+        page: stepMatch[3]?.trim()
+      };
+    }
+    return {
+      stepNumber: index + 1,
+      action: stepStr.replace(/^(?:Step\s+)?\d+[:.]\s*/i, "").trim()
+    };
+  });
+}
+
+// src/react/ProduckChat.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ProduckChat({
   placeholder = "Ask a question...",
   title = "Chat Assistant",
@@ -3193,15 +3520,15 @@ function ProduckChat({
 }) {
   const { messages, isLoading, sendMessage } = useProduckMessages();
   const isReady = useProduckReady();
-  const [input, setInput] = (0, import_react5.useState)("");
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(position === "inline" ? true : defaultOpen);
-  const [isHovering, setIsHovering] = (0, import_react5.useState)(false);
-  const messagesEndRef = (0, import_react5.useRef)(null);
-  const inputRef = (0, import_react5.useRef)(null);
-  const [streamedMessage, setStreamedMessage] = (0, import_react5.useState)("");
-  const [isStreamingInitial, setIsStreamingInitial] = (0, import_react5.useState)(false);
-  const [hasShownInitial, setHasShownInitial] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [input, setInput] = (0, import_react6.useState)("");
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(position === "inline" ? true : defaultOpen);
+  const [isHovering, setIsHovering] = (0, import_react6.useState)(false);
+  const messagesEndRef = (0, import_react6.useRef)(null);
+  const inputRef = (0, import_react6.useRef)(null);
+  const [streamedMessage, setStreamedMessage] = (0, import_react6.useState)("");
+  const [isStreamingInitial, setIsStreamingInitial] = (0, import_react6.useState)(false);
+  const [hasShownInitial, setHasShownInitial] = (0, import_react6.useState)(false);
+  (0, import_react6.useEffect)(() => {
     if (autoOpenDelay && autoOpenDelay > 0 && !isOpen && isReady) {
       const timer = setTimeout(() => {
         setIsOpen(true);
@@ -3209,7 +3536,7 @@ function ProduckChat({
       return () => clearTimeout(timer);
     }
   }, [autoOpenDelay, isReady]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isOpen && initialMessage && isReady && !hasShownInitial) {
       const timer = setTimeout(() => {
         streamInitialMessage(initialMessage);
@@ -3230,12 +3557,12 @@ function ProduckChat({
     }
     setIsStreamingInitial(false);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (isOpen && inputRef.current) {
       setTimeout(() => inputRef.current?.focus(), 100);
     }
@@ -3329,7 +3656,7 @@ function ProduckChat({
     backgroundColor: isDark ? "#111827" : "#f9fafb",
     flexShrink: 0
   };
-  const renderFloatingButton = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const renderFloatingButton = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       onClick: () => setIsOpen(true),
@@ -3361,12 +3688,12 @@ function ProduckChat({
     return renderFloatingButton();
   }
   if (position === "inline" && !isReady) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: chatWindowStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: containerStyles, className, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
         "Loading..."
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: {
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: {
         flex: 1,
         display: "flex",
         alignItems: "center",
@@ -3375,14 +3702,14 @@ function ProduckChat({
       }, children: "Connecting to chat..." })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: containerStyles, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: chatWindowStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: headerStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: headerIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: containerStyles, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: headerStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: headerIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: title })
         ] }),
-        position !== "inline" && showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        position !== "inline" && showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             onClick: () => setIsOpen(false),
@@ -3404,15 +3731,15 @@ function ProduckChat({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: messagesContainerStyles, children: [
-        streamedMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: messagesContainerStyles, children: [
+        streamedMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             style: {
               display: "flex",
               justifyContent: "flex-start"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 style: {
@@ -3427,7 +3754,7 @@ function ProduckChat({
                 },
                 children: [
                   streamedMessage,
-                  isStreamingInitial && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  isStreamingInitial && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "span",
                     {
                       style: {
@@ -3445,7 +3772,7 @@ function ProduckChat({
             )
           }
         ),
-        messages.length === 0 && !streamedMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        messages.length === 0 && !streamedMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "div",
           {
             style: {
@@ -3454,20 +3781,20 @@ function ProduckChat({
               padding: "40px 20px"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
             ]
           }
         ),
-        messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             style: {
               display: "flex",
               justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "div",
               {
                 style: {
@@ -3482,7 +3809,7 @@ function ProduckChat({
                 },
                 children: [
                   msg.content,
-                  msg.action && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  msg.action && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
@@ -3496,15 +3823,15 @@ function ProduckChat({
                         gap: "6px"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u26A1" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u26A1" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
                           "Action triggered: ",
                           msg.action.name
                         ] })
                       ]
                     }
                   ),
-                  msg.visualFlows && msg.visualFlows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "12px" }, children: msg.visualFlows.map((flowRef, flowIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  msg.visualFlows && msg.visualFlows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "12px" }, children: msg.visualFlows.map((flowRef, flowIdx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     VisualFlowDisplay,
                     {
                       flowRef,
@@ -3513,7 +3840,7 @@ function ProduckChat({
                     },
                     flowRef.flowId || flowIdx
                   )) }),
-                  msg.images && msg.images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { marginTop: "12px" }, children: msg.images.map((img, imgIdx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  msg.images && msg.images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "12px" }, children: msg.images.map((img, imgIdx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
@@ -3523,7 +3850,7 @@ function ProduckChat({
                         border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "img",
                           {
                             src: img.url,
@@ -3535,7 +3862,7 @@ function ProduckChat({
                             }
                           }
                         ),
-                        img.name && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        img.name && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                           "div",
                           {
                             style: {
@@ -3551,32 +3878,32 @@ 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)(
+                  msg.userFlows && msg.userFlows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { marginTop: "12px" }, children: msg.userFlows.slice(0, 3).map((userFlow, ufIdx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                     "div",
                     {
                       style: {
-                        marginTop: ufIdx > 0 ? "8px" : 0,
+                        marginTop: ufIdx > 0 ? "12px" : 0,
                         padding: "12px",
                         borderRadius: "8px",
                         border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
                         backgroundColor: isDark ? "#1f2937" : "#f9fafb"
                       },
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: {
+                        /* @__PURE__ */ (0, import_jsx_runtime4.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: {
+                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "16px" }, children: "\u{1F4CB}" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
                               fontWeight: 600,
-                              fontSize: "13px",
+                              fontSize: "14px",
                               color: isDark ? "#f3f4f6" : "#111827"
                             }, children: userFlow.title })
                           ] }),
-                          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: {
+                          userFlow.eventCount && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { style: {
                             fontSize: "11px",
                             padding: "2px 6px",
                             backgroundColor: primaryColor + "20",
@@ -3587,13 +3914,22 @@ function ProduckChat({
                             " steps"
                           ] })
                         ] }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: {
+                        userFlow.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: {
                           fontSize: "12px",
                           color: isDark ? "#9ca3af" : "#6b7280",
-                          marginBottom: "10px",
+                          marginBottom: "12px",
                           lineHeight: 1.4
                         }, children: userFlow.description }),
-                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                        userFlow.steps && userFlow.steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                          StepGuide,
+                          {
+                            steps: parseStepsFromStrings(userFlow.steps),
+                            theme,
+                            primaryColor,
+                            compact: true
+                          }
+                        ),
+                        userFlow.hasReplay && userFlow.recordingId && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                           "button",
                           {
                             onClick: () => {
@@ -3605,6 +3941,7 @@ function ProduckChat({
                               alignItems: "center",
                               gap: "6px",
                               padding: "8px 12px",
+                              marginTop: userFlow.steps && userFlow.steps.length > 0 ? "12px" : "8px",
                               backgroundColor: primaryColor,
                               color: "#fff",
                               border: "none",
@@ -3616,8 +3953,8 @@ function ProduckChat({
                               justifyContent: "center"
                             },
                             children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "\u25B6\uFE0F" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: "Watch Session Replay" })
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "\u25B6\uFE0F" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Watch Session Replay" })
                             ]
                           }
                         )
@@ -3631,7 +3968,7 @@ function ProduckChat({
           },
           idx
         )),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "div",
           {
             style: {
@@ -3641,16 +3978,16 @@ function ProduckChat({
               color: isDark ? "#9ca3af" : "#6b7280",
               fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: {
               display: "inline-block",
               animation: "pulse 1.5s ease-in-out infinite"
             }, children: "Thinking..." })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: messagesEndRef })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "input",
           {
             ref: inputRef,
@@ -3681,7 +4018,7 @@ function ProduckChat({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "button",
           {
             type: "submit",
@@ -3713,13 +4050,13 @@ function ProduckChat({
               e.currentTarget.style.boxShadow = "none";
             },
             children: [
-              sendButtonIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: sendButtonIcon }),
+              sendButtonIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: sendButtonIcon }),
               sendButtonText
             ]
           }
         )
       ] }) }),
-      showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      showPoweredBy && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
           style: {
@@ -3727,7 +4064,7 @@ function ProduckChat({
             textAlign: "center",
             borderTop: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "a",
             {
               href: poweredByUrl,
@@ -3751,7 +4088,7 @@ function ProduckChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
@@ -3765,8 +4102,8 @@ function ProduckChat({
 }
 
 // src/react/ProduckTarget.tsx
-var import_react6 = __toESM(require("react"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react7 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ProduckTarget({
   actionKey,
   children,
@@ -3780,8 +4117,8 @@ function ProduckTarget({
   highlightDuration = 3e3,
   scrollIntoView = true
 }) {
-  const ref = (0, import_react6.useRef)(null);
-  const [isHighlighted, setIsHighlighted] = import_react6.default.useState(false);
+  const ref = (0, import_react7.useRef)(null);
+  const [isHighlighted, setIsHighlighted] = import_react7.default.useState(false);
   useProduckAction(
     actionKey,
     (payload) => {
@@ -3797,7 +4134,7 @@ function ProduckTarget({
     },
     [scrollIntoView, highlightDuration, onTrigger]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ref,