@prodact.ai/sdk 0.0.9 → 0.0.10

package/dist/react.js

@@ -2031,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;
@@ -3548,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
                   )) })
                 ]
               }