@prodact.ai/sdk 0.0.9 → 0.0.11

package/dist/react.mjs

@@ -1203,7 +1203,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");
@@ -1329,6 +1329,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
    */
@@ -1971,12 +2022,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) {
@@ -1987,11 +2042,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;
@@ -2665,6 +2722,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
    */
@@ -2835,7 +2905,7 @@ function ProduckProvider({
 }
 
 // src/react/ProduckChat.tsx
-import { useState as useState3, useRef as useRef2, useEffect as useEffect4 } from "react";
+import { useState as useState4, useRef as useRef2, useEffect as useEffect4 } from "react";
 
 // src/react/hooks.ts
 import { useEffect as useEffect2, useCallback as useCallback2 } from "react";
@@ -3125,8 +3195,267 @@ function VisualFlowDisplay({
   ] });
 }
 
-// src/react/ProduckChat.tsx
+// src/react/StepGuide.tsx
+import { useState as useState3 } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function StepGuide({
+  title,
+  description,
+  steps,
+  theme = "light",
+  primaryColor = "#f97316",
+  onStepClick,
+  hasReplay,
+  onWatchReplay,
+  compact = false
+}) {
+  const [expandedStep, setExpandedStep] = useState3(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__ */ jsxs2(
+    "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__ */ jsxs2(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: `1px solid ${borderColor}`,
+              backgroundColor: isDark ? "#111827" : "#ffffff"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx3("span", { style: { fontSize: "18px" }, children: "\u{1F4CB}" }),
+                /* @__PURE__ */ jsx3(
+                  "span",
+                  {
+                    style: {
+                      fontWeight: 600,
+                      fontSize: "14px",
+                      color: textColor
+                    },
+                    children: title
+                  }
+                )
+              ] }),
+              description && /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  style: {
+                    marginTop: "4px",
+                    fontSize: "12px",
+                    color: mutedColor,
+                    lineHeight: 1.4
+                  },
+                  children: description
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { padding: compact ? "0" : "12px" }, children: steps.map((step, index) => {
+          const isLast = index === steps.length - 1;
+          const isExpanded = expandedStep === index;
+          return /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "12px",
+                cursor: onStepClick ? "pointer" : "default"
+              },
+              onClick: () => {
+                if (onStepClick) {
+                  onStepClick(step, index);
+                }
+                setExpandedStep(isExpanded ? null : index);
+              },
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      width: "24px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        "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__ */ jsx3(
+                        "div",
+                        {
+                          style: {
+                            width: "2px",
+                            flexGrow: 1,
+                            minHeight: "20px",
+                            backgroundColor: isDark ? "#4b5563" : "#d1d5db",
+                            marginTop: "4px"
+                          }
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      paddingBottom: isLast ? 0 : "16px"
+                    },
+                    children: /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          backgroundColor: stepBgColor,
+                          border: `1px solid ${borderColor}`,
+                          borderRadius: "8px",
+                          padding: "10px 12px",
+                          transition: "all 0.2s ease"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              style: {
+                                fontSize: "13px",
+                                fontWeight: 500,
+                                color: textColor,
+                                lineHeight: 1.4
+                              },
+                              children: step.action
+                            }
+                          ),
+                          step.page && /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                marginTop: "4px",
+                                fontSize: "11px",
+                                color: mutedColor,
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "4px"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx3("span", { children: "\u{1F4CD}" }),
+                                /* @__PURE__ */ jsx3("span", { children: step.page })
+                              ]
+                            }
+                          ),
+                          isExpanded && step.details && /* @__PURE__ */ jsx3(
+                            "div",
+                            {
+                              style: {
+                                marginTop: "8px",
+                                paddingTop: "8px",
+                                borderTop: `1px solid ${borderColor}`,
+                                fontSize: "12px",
+                                color: mutedColor,
+                                lineHeight: 1.5
+                              },
+                              children: step.details
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            index
+          );
+        }) }),
+        hasReplay && onWatchReplay && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderTop: `1px solid ${borderColor}`,
+              backgroundColor: isDark ? "#111827" : "#ffffff"
+            },
+            children: /* @__PURE__ */ jsxs2(
+              "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__ */ jsx3("span", { children: "\u25B6\uFE0F" }),
+                  /* @__PURE__ */ jsx3("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
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function ProduckChat({
   placeholder = "Ask a question...",
   title = "Chat Assistant",
@@ -3147,14 +3476,14 @@ function ProduckChat({
 }) {
   const { messages, isLoading, sendMessage } = useProduckMessages();
   const isReady = useProduckReady();
-  const [input, setInput] = useState3("");
-  const [isOpen, setIsOpen] = useState3(position === "inline" ? true : defaultOpen);
-  const [isHovering, setIsHovering] = useState3(false);
+  const [input, setInput] = useState4("");
+  const [isOpen, setIsOpen] = useState4(position === "inline" ? true : defaultOpen);
+  const [isHovering, setIsHovering] = useState4(false);
   const messagesEndRef = useRef2(null);
   const inputRef = useRef2(null);
-  const [streamedMessage, setStreamedMessage] = useState3("");
-  const [isStreamingInitial, setIsStreamingInitial] = useState3(false);
-  const [hasShownInitial, setHasShownInitial] = useState3(false);
+  const [streamedMessage, setStreamedMessage] = useState4("");
+  const [isStreamingInitial, setIsStreamingInitial] = useState4(false);
+  const [hasShownInitial, setHasShownInitial] = useState4(false);
   useEffect4(() => {
     if (autoOpenDelay && autoOpenDelay > 0 && !isOpen && isReady) {
       const timer = setTimeout(() => {
@@ -3283,7 +3612,7 @@ function ProduckChat({
     backgroundColor: isDark ? "#111827" : "#f9fafb",
     flexShrink: 0
   };
-  const renderFloatingButton = () => /* @__PURE__ */ jsx3("div", { style: containerStyles, className, children: /* @__PURE__ */ jsx3(
+  const renderFloatingButton = () => /* @__PURE__ */ jsx4("div", { style: containerStyles, className, children: /* @__PURE__ */ jsx4(
     "button",
     {
       onClick: () => setIsOpen(true),
@@ -3315,12 +3644,12 @@ function ProduckChat({
     return renderFloatingButton();
   }
   if (position === "inline" && !isReady) {
-    return /* @__PURE__ */ jsx3("div", { style: containerStyles, className, children: /* @__PURE__ */ jsxs2("div", { style: chatWindowStyles, children: [
-      /* @__PURE__ */ jsx3("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-        /* @__PURE__ */ jsx3("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
+    return /* @__PURE__ */ jsx4("div", { style: containerStyles, className, children: /* @__PURE__ */ jsxs3("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ jsx4("div", { style: { ...headerStyles, justifyContent: "center" }, children: /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx4("span", { style: { animation: "spin 1s linear infinite" }, children: floatingButtonLoadingIcon }),
         "Loading..."
       ] }) }),
-      /* @__PURE__ */ jsx3("div", { style: {
+      /* @__PURE__ */ jsx4("div", { style: {
         flex: 1,
         display: "flex",
         alignItems: "center",
@@ -3329,14 +3658,14 @@ function ProduckChat({
       }, children: "Connecting to chat..." })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs2("div", { style: containerStyles, className, children: [
-    /* @__PURE__ */ jsxs2("div", { style: chatWindowStyles, children: [
-      /* @__PURE__ */ jsxs2("div", { style: headerStyles, children: [
-        /* @__PURE__ */ jsxs2("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx3("span", { children: headerIcon }),
-          /* @__PURE__ */ jsx3("span", { children: title })
+  return /* @__PURE__ */ jsxs3("div", { style: containerStyles, className, children: [
+    /* @__PURE__ */ jsxs3("div", { style: chatWindowStyles, children: [
+      /* @__PURE__ */ jsxs3("div", { style: headerStyles, children: [
+        /* @__PURE__ */ jsxs3("span", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx4("span", { children: headerIcon }),
+          /* @__PURE__ */ jsx4("span", { children: title })
         ] }),
-        position !== "inline" && showCloseButton && /* @__PURE__ */ jsx3(
+        position !== "inline" && showCloseButton && /* @__PURE__ */ jsx4(
           "button",
           {
             onClick: () => setIsOpen(false),
@@ -3358,15 +3687,15 @@ function ProduckChat({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2("div", { style: messagesContainerStyles, children: [
-        streamedMessage && /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsxs3("div", { style: messagesContainerStyles, children: [
+        streamedMessage && /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
               display: "flex",
               justifyContent: "flex-start"
             },
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs3(
               "div",
               {
                 style: {
@@ -3381,7 +3710,7 @@ function ProduckChat({
                 },
                 children: [
                   streamedMessage,
-                  isStreamingInitial && /* @__PURE__ */ jsx3(
+                  isStreamingInitial && /* @__PURE__ */ jsx4(
                     "span",
                     {
                       style: {
@@ -3399,7 +3728,7 @@ function ProduckChat({
             )
           }
         ),
-        messages.length === 0 && !streamedMessage && /* @__PURE__ */ jsxs2(
+        messages.length === 0 && !streamedMessage && /* @__PURE__ */ jsxs3(
           "div",
           {
             style: {
@@ -3408,20 +3737,20 @@ function ProduckChat({
               padding: "40px 20px"
             },
             children: [
-              /* @__PURE__ */ jsx3("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
-              /* @__PURE__ */ jsx3("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
-              /* @__PURE__ */ jsx3("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
+              /* @__PURE__ */ jsx4("div", { style: { fontSize: "40px", marginBottom: "16px" }, children: emptyStateIcon }),
+              /* @__PURE__ */ jsx4("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize + 2}px` : fontSize, fontWeight: 500 }, children: emptyStateTitle }),
+              /* @__PURE__ */ jsx4("div", { style: { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, marginTop: "8px", opacity: 0.8 }, children: emptyStateSubtitle })
             ]
           }
         ),
-        messages.map((msg, idx) => /* @__PURE__ */ jsx3(
+        messages.map((msg, idx) => /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
               display: "flex",
               justifyContent: msg.role === "user" ? "flex-end" : "flex-start"
             },
-            children: /* @__PURE__ */ jsxs2(
+            children: /* @__PURE__ */ jsxs3(
               "div",
               {
                 style: {
@@ -3436,7 +3765,7 @@ function ProduckChat({
                 },
                 children: [
                   msg.content,
-                  msg.action && /* @__PURE__ */ jsxs2(
+                  msg.action && /* @__PURE__ */ jsxs3(
                     "div",
                     {
                       style: {
@@ -3450,15 +3779,15 @@ function ProduckChat({
                         gap: "6px"
                       },
                       children: [
-                        /* @__PURE__ */ jsx3("span", { children: "\u26A1" }),
-                        /* @__PURE__ */ jsxs2("span", { children: [
+                        /* @__PURE__ */ jsx4("span", { children: "\u26A1" }),
+                        /* @__PURE__ */ jsxs3("span", { children: [
                           "Action triggered: ",
                           msg.action.name
                         ] })
                       ]
                     }
                   ),
-                  msg.visualFlows && msg.visualFlows.length > 0 && /* @__PURE__ */ jsx3("div", { style: { marginTop: "12px" }, children: msg.visualFlows.map((flowRef, flowIdx) => /* @__PURE__ */ jsx3(
+                  msg.visualFlows && msg.visualFlows.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginTop: "12px" }, children: msg.visualFlows.map((flowRef, flowIdx) => /* @__PURE__ */ jsx4(
                     VisualFlowDisplay,
                     {
                       flowRef,
@@ -3467,7 +3796,7 @@ function ProduckChat({
                     },
                     flowRef.flowId || flowIdx
                   )) }),
-                  msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx3("div", { style: { marginTop: "12px" }, children: msg.images.map((img, imgIdx) => /* @__PURE__ */ jsxs2(
+                  msg.images && msg.images.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginTop: "12px" }, children: msg.images.map((img, imgIdx) => /* @__PURE__ */ jsxs3(
                     "div",
                     {
                       style: {
@@ -3477,7 +3806,7 @@ function ProduckChat({
                         border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
                       },
                       children: [
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx4(
                           "img",
                           {
                             src: img.url,
@@ -3489,7 +3818,7 @@ function ProduckChat({
                             }
                           }
                         ),
-                        img.name && /* @__PURE__ */ jsx3(
+                        img.name && /* @__PURE__ */ jsx4(
                           "div",
                           {
                             style: {
@@ -3504,6 +3833,90 @@ function ProduckChat({
                       ]
                     },
                     imgIdx
+                  )) }),
+                  msg.userFlows && msg.userFlows.length > 0 && /* @__PURE__ */ jsx4("div", { style: { marginTop: "12px" }, children: msg.userFlows.slice(0, 3).map((userFlow, ufIdx) => /* @__PURE__ */ jsxs3(
+                    "div",
+                    {
+                      style: {
+                        marginTop: ufIdx > 0 ? "12px" : 0,
+                        padding: "12px",
+                        borderRadius: "8px",
+                        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+                        backgroundColor: isDark ? "#1f2937" : "#f9fafb"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs3("div", { style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginBottom: "8px"
+                        }, children: [
+                          /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                            /* @__PURE__ */ jsx4("span", { style: { fontSize: "16px" }, children: "\u{1F4CB}" }),
+                            /* @__PURE__ */ jsx4("span", { style: {
+                              fontWeight: 600,
+                              fontSize: "14px",
+                              color: isDark ? "#f3f4f6" : "#111827"
+                            }, children: userFlow.title })
+                          ] }),
+                          userFlow.eventCount && /* @__PURE__ */ jsxs3("span", { style: {
+                            fontSize: "11px",
+                            padding: "2px 6px",
+                            backgroundColor: primaryColor + "20",
+                            color: primaryColor,
+                            borderRadius: "4px"
+                          }, children: [
+                            userFlow.eventCount,
+                            " steps"
+                          ] })
+                        ] }),
+                        userFlow.description && /* @__PURE__ */ jsx4("p", { style: {
+                          fontSize: "12px",
+                          color: isDark ? "#9ca3af" : "#6b7280",
+                          marginBottom: "12px",
+                          lineHeight: 1.4
+                        }, children: userFlow.description }),
+                        userFlow.steps && userFlow.steps.length > 0 && /* @__PURE__ */ jsx4(
+                          StepGuide,
+                          {
+                            steps: parseStepsFromStrings(userFlow.steps),
+                            theme,
+                            primaryColor,
+                            compact: true
+                          }
+                        ),
+                        userFlow.hasReplay && userFlow.recordingId && /* @__PURE__ */ jsxs3(
+                          "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",
+                              marginTop: userFlow.steps && userFlow.steps.length > 0 ? "12px" : "8px",
+                              backgroundColor: primaryColor,
+                              color: "#fff",
+                              border: "none",
+                              borderRadius: "6px",
+                              fontSize: "12px",
+                              fontWeight: 500,
+                              cursor: "pointer",
+                              width: "100%",
+                              justifyContent: "center"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx4("span", { children: "\u25B6\uFE0F" }),
+                              /* @__PURE__ */ jsx4("span", { children: "Watch Session Replay" })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    userFlow.id || ufIdx
                   )) })
                 ]
               }
@@ -3511,7 +3924,7 @@ function ProduckChat({
           },
           idx
         )),
-        isLoading && /* @__PURE__ */ jsx3("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsx3(
+        isLoading && /* @__PURE__ */ jsx4("div", { style: { display: "flex", justifyContent: "flex-start" }, children: /* @__PURE__ */ jsx4(
           "div",
           {
             style: {
@@ -3521,16 +3934,16 @@ function ProduckChat({
               color: isDark ? "#9ca3af" : "#6b7280",
               fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize
             },
-            children: /* @__PURE__ */ jsx3("span", { style: {
+            children: /* @__PURE__ */ jsx4("span", { style: {
               display: "inline-block",
               animation: "pulse 1.5s ease-in-out infinite"
             }, children: "Thinking..." })
           }
         ) }),
-        /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+        /* @__PURE__ */ jsx4("div", { ref: messagesEndRef })
       ] }),
-      /* @__PURE__ */ jsx3("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4("form", { onSubmit: handleSubmit, style: inputContainerStyles, children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "10px", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx4(
           "input",
           {
             ref: inputRef,
@@ -3561,7 +3974,7 @@ function ProduckChat({
             }
           }
         ),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "submit",
@@ -3593,13 +4006,13 @@ function ProduckChat({
               e.currentTarget.style.boxShadow = "none";
             },
             children: [
-              sendButtonIcon && /* @__PURE__ */ jsx3("span", { children: sendButtonIcon }),
+              sendButtonIcon && /* @__PURE__ */ jsx4("span", { children: sendButtonIcon }),
               sendButtonText
             ]
           }
         )
       ] }) }),
-      showPoweredBy && /* @__PURE__ */ jsx3(
+      showPoweredBy && /* @__PURE__ */ jsx4(
         "div",
         {
           style: {
@@ -3607,7 +4020,7 @@ function ProduckChat({
             textAlign: "center",
             borderTop: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`
           },
-          children: /* @__PURE__ */ jsx3(
+          children: /* @__PURE__ */ jsx4(
             "a",
             {
               href: poweredByUrl,
@@ -3631,7 +4044,7 @@ function ProduckChat({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx3("style", { children: `
+    /* @__PURE__ */ jsx4("style", { children: `
         @keyframes pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
@@ -3645,8 +4058,8 @@ function ProduckChat({
 }
 
 // src/react/ProduckTarget.tsx
-import React4, { useRef as useRef3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import React5, { useRef as useRef3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function ProduckTarget({
   actionKey,
   children,
@@ -3661,7 +4074,7 @@ function ProduckTarget({
   scrollIntoView = true
 }) {
   const ref = useRef3(null);
-  const [isHighlighted, setIsHighlighted] = React4.useState(false);
+  const [isHighlighted, setIsHighlighted] = React5.useState(false);
   useProduckAction(
     actionKey,
     (payload) => {
@@ -3677,7 +4090,7 @@ function ProduckTarget({
     },
     [scrollIntoView, highlightDuration, onTrigger]
   );
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "div",
     {
       ref,