@informedai/react 0.4.23 → 0.4.25

package/dist/index.js

@@ -2468,6 +2468,221 @@ function MessageContent2({ content, theme }) {
     return null;
   }) });
 }
+function MatchCard({ match, theme }) {
+  const name = match.name || "Match";
+  const score = match.score;
+  const reasons = match.matchReasons || [];
+  const cardMarkerStr = match.cardMarker;
+  const parsedCard = cardMarkerStr ? parseCardMarker(cardMarkerStr) : null;
+  const cardData = parsedCard ? extractCardDisplayData(parsedCard) : null;
+  if (cardData) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        style: {
+          border: "1px solid #e5e7eb",
+          borderRadius: "8px",
+          overflow: "hidden",
+          backgroundColor: "#fff"
+        },
+        children: [
+          cardData.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "140px",
+                backgroundColor: "#f3f4f6",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "img",
+                {
+                  src: cardData.imageUrl,
+                  alt: cardData.title,
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                  },
+                  onError: (e) => {
+                    e.target.style.display = "none";
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "inline-block",
+                    fontSize: "10px",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px",
+                    color: theme.primaryColor,
+                    backgroundColor: `${theme.primaryColor}15`,
+                    padding: "2px 6px",
+                    borderRadius: "4px"
+                  },
+                  children: parsedCard.type
+                }
+              ),
+              score != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    fontWeight: 600,
+                    color: theme.primaryColor,
+                    backgroundColor: `${theme.primaryColor}15`,
+                    padding: "2px 8px",
+                    borderRadius: "10px"
+                  },
+                  children: [
+                    score,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: "15px",
+                  fontWeight: 600,
+                  color: "#1f2937",
+                  marginBottom: "4px",
+                  lineHeight: "1.3"
+                },
+                children: cardData.title
+              }
+            ),
+            cardData.subtitle && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: "13px",
+                  color: "#6b7280",
+                  marginBottom: "6px"
+                },
+                children: cardData.subtitle
+              }
+            ),
+            cardData.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                style: {
+                  fontSize: "13px",
+                  color: "#4b5563",
+                  lineHeight: "1.4",
+                  marginBottom: "8px"
+                },
+                children: cardData.description
+              }
+            ),
+            cardData.actionUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+              "a",
+              {
+                href: cardData.actionUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  color: theme.primaryColor,
+                  textDecoration: "none",
+                  padding: "6px 12px",
+                  borderRadius: "6px",
+                  backgroundColor: `${theme.primaryColor}10`,
+                  marginBottom: "8px"
+                },
+                children: [
+                  cardData.actionLabel || "View",
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                  ] })
+                ]
+              }
+            ),
+            reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: cardData.actionUrl ? "0" : "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  color: "#4b5563",
+                  backgroundColor: "#f3f4f6",
+                  padding: "3px 8px",
+                  borderRadius: "10px",
+                  lineHeight: "1.3"
+                },
+                children: reason
+              },
+              i
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#fff"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { padding: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { fontSize: "15px", fontWeight: 600, color: "#1f2937", lineHeight: "1.3" }, children: name }),
+          score != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "11px",
+                fontWeight: 600,
+                color: theme.primaryColor,
+                backgroundColor: `${theme.primaryColor}15`,
+                padding: "2px 8px",
+                borderRadius: "10px"
+              },
+              children: [
+                score,
+                "%"
+              ]
+            }
+          )
+        ] }),
+        reasons.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              color: "#4b5563",
+              backgroundColor: "#f3f4f6",
+              padding: "3px 8px",
+              borderRadius: "10px",
+              lineHeight: "1.3"
+            },
+            children: reason
+          },
+          i
+        )) })
+      ] })
+    }
+  );
+}
 function SmartQuestionnaire({ className, ...config }) {
   const theme = { ...defaultTheme4, ...config.theme };
   const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
@@ -2631,63 +2846,24 @@ function SmartQuestionnaire({ className, ...config }) {
   };
   const startResults = async (finalAnswers, finalMessages, matchList) => {
     setPhase("results");
-    setIsStreaming(true);
-    setStreamingContent("");
+    setError(null);
     try {
       const res = await fetch(`${apiUrl}/smart-questionnaire/${config.questionnaireId}/results`, {
         method: "POST",
         headers: jsonHeaders,
-        body: JSON.stringify({ matches: matchList, history: [] })
+        body: JSON.stringify({ matches: matchList })
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({ error: "Results failed" }));
         throw new Error(err.error || `HTTP ${res.status}`);
       }
-      const reader = res.body?.getReader();
-      if (!reader) throw new Error("No response body");
-      const decoder = new TextDecoder();
-      let buffer = "";
-      let fullContent = "";
-      let action = null;
-      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.startsWith("event:")) continue;
-          if (line.startsWith("data:")) {
-            const d = line.slice(5).trim();
-            try {
-              const parsed = JSON.parse(d);
-              if (parsed.content) {
-                fullContent += parsed.content;
-                setStreamingContent(fullContent);
-              }
-              if (parsed.fullContent) {
-                fullContent = parsed.fullContent;
-              }
-              if (parsed.action) {
-                action = parsed.action;
-              }
-            } catch {
-            }
-          }
-        }
-      }
-      const displayContent = fullContent.replace(/\[RESTART\]/g, "").trim();
-      const resultMsg = { role: "assistant", content: displayContent };
-      setMessages([...finalMessages, resultMsg]);
-      setResultsHistory([resultMsg]);
-      setStreamingContent("");
-      if (action === "restart") {
-        handleRestart();
-      }
+      const data = await res.json();
+      const introMsg = { role: "assistant", content: data.message || "Here is what I found:" };
+      setMessages([...finalMessages, introMsg]);
+      setResultsHistory([introMsg]);
+      setMatches(data.matches || matchList);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to stream results");
-    } finally {
-      setIsStreaming(false);
+      setError(err instanceof Error ? err.message : "Failed to load results");
     }
   };
   const sendResultsFollowUp = async (message) => {
@@ -3019,6 +3195,7 @@ function SmartQuestionnaire({ className, ...config }) {
                   ]
                 }
               ) }),
+              phase === "results" && matches && matches.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "90%" }, children: matches.map((match, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MatchCard, { match, theme }, i)) }),
               showOptions && currentStep.options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: "6px", maxWidth: "85%" }, children: currentStep.multiSelect ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
                 currentStep.options.map((opt) => {
                   const isSelected = multiSelectChoices.has(opt);

package/dist/index.mjs

@@ -2435,6 +2435,221 @@ function MessageContent2({ content, theme }) {
     return null;
   }) });
 }
+function MatchCard({ match, theme }) {
+  const name = match.name || "Match";
+  const score = match.score;
+  const reasons = match.matchReasons || [];
+  const cardMarkerStr = match.cardMarker;
+  const parsedCard = cardMarkerStr ? parseCardMarker(cardMarkerStr) : null;
+  const cardData = parsedCard ? extractCardDisplayData(parsedCard) : null;
+  if (cardData) {
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        style: {
+          border: "1px solid #e5e7eb",
+          borderRadius: "8px",
+          overflow: "hidden",
+          backgroundColor: "#fff"
+        },
+        children: [
+          cardData.imageUrl && /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: {
+                width: "100%",
+                height: "140px",
+                backgroundColor: "#f3f4f6",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx5(
+                "img",
+                {
+                  src: cardData.imageUrl,
+                  alt: cardData.title,
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                  },
+                  onError: (e) => {
+                    e.target.style.display = "none";
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs4("div", { style: { padding: "12px" }, children: [
+            /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    display: "inline-block",
+                    fontSize: "10px",
+                    fontWeight: 600,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px",
+                    color: theme.primaryColor,
+                    backgroundColor: `${theme.primaryColor}15`,
+                    padding: "2px 6px",
+                    borderRadius: "4px"
+                  },
+                  children: parsedCard.type
+                }
+              ),
+              score != null && /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  style: {
+                    fontSize: "11px",
+                    fontWeight: 600,
+                    color: theme.primaryColor,
+                    backgroundColor: `${theme.primaryColor}15`,
+                    padding: "2px 8px",
+                    borderRadius: "10px"
+                  },
+                  children: [
+                    score,
+                    "%"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx5(
+              "div",
+              {
+                style: {
+                  fontSize: "15px",
+                  fontWeight: 600,
+                  color: "#1f2937",
+                  marginBottom: "4px",
+                  lineHeight: "1.3"
+                },
+                children: cardData.title
+              }
+            ),
+            cardData.subtitle && /* @__PURE__ */ jsx5(
+              "div",
+              {
+                style: {
+                  fontSize: "13px",
+                  color: "#6b7280",
+                  marginBottom: "6px"
+                },
+                children: cardData.subtitle
+              }
+            ),
+            cardData.description && /* @__PURE__ */ jsx5(
+              "div",
+              {
+                style: {
+                  fontSize: "13px",
+                  color: "#4b5563",
+                  lineHeight: "1.4",
+                  marginBottom: "8px"
+                },
+                children: cardData.description
+              }
+            ),
+            cardData.actionUrl && /* @__PURE__ */ jsxs4(
+              "a",
+              {
+                href: cardData.actionUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  fontSize: "13px",
+                  fontWeight: 500,
+                  color: theme.primaryColor,
+                  textDecoration: "none",
+                  padding: "6px 12px",
+                  borderRadius: "6px",
+                  backgroundColor: `${theme.primaryColor}10`,
+                  marginBottom: "8px"
+                },
+                children: [
+                  cardData.actionLabel || "View",
+                  /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx5("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                    /* @__PURE__ */ jsx5("polyline", { points: "15 3 21 3 21 9" }),
+                    /* @__PURE__ */ jsx5("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                  ] })
+                ]
+              }
+            ),
+            reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: cardData.actionUrl ? "0" : "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ jsx5(
+              "span",
+              {
+                style: {
+                  fontSize: "11px",
+                  color: "#4b5563",
+                  backgroundColor: "#f3f4f6",
+                  padding: "3px 8px",
+                  borderRadius: "10px",
+                  lineHeight: "1.3"
+                },
+                children: reason
+              },
+              i
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#fff"
+      },
+      children: /* @__PURE__ */ jsxs4("div", { style: { padding: "12px" }, children: [
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px" }, children: [
+          /* @__PURE__ */ jsx5("div", { style: { fontSize: "15px", fontWeight: 600, color: "#1f2937", lineHeight: "1.3" }, children: name }),
+          score != null && /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              style: {
+                fontSize: "11px",
+                fontWeight: 600,
+                color: theme.primaryColor,
+                backgroundColor: `${theme.primaryColor}15`,
+                padding: "2px 8px",
+                borderRadius: "10px"
+              },
+              children: [
+                score,
+                "%"
+              ]
+            }
+          )
+        ] }),
+        reasons.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px", marginTop: "4px" }, children: reasons.map((reason, i) => /* @__PURE__ */ jsx5(
+          "span",
+          {
+            style: {
+              fontSize: "11px",
+              color: "#4b5563",
+              backgroundColor: "#f3f4f6",
+              padding: "3px 8px",
+              borderRadius: "10px",
+              lineHeight: "1.3"
+            },
+            children: reason
+          },
+          i
+        )) })
+      ] })
+    }
+  );
+}
 function SmartQuestionnaire({ className, ...config }) {
   const theme = { ...defaultTheme4, ...config.theme };
   const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
@@ -2598,63 +2813,24 @@ function SmartQuestionnaire({ className, ...config }) {
   };
   const startResults = async (finalAnswers, finalMessages, matchList) => {
     setPhase("results");
-    setIsStreaming(true);
-    setStreamingContent("");
+    setError(null);
     try {
       const res = await fetch(`${apiUrl}/smart-questionnaire/${config.questionnaireId}/results`, {
         method: "POST",
         headers: jsonHeaders,
-        body: JSON.stringify({ matches: matchList, history: [] })
+        body: JSON.stringify({ matches: matchList })
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({ error: "Results failed" }));
         throw new Error(err.error || `HTTP ${res.status}`);
       }
-      const reader = res.body?.getReader();
-      if (!reader) throw new Error("No response body");
-      const decoder = new TextDecoder();
-      let buffer = "";
-      let fullContent = "";
-      let action = null;
-      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.startsWith("event:")) continue;
-          if (line.startsWith("data:")) {
-            const d = line.slice(5).trim();
-            try {
-              const parsed = JSON.parse(d);
-              if (parsed.content) {
-                fullContent += parsed.content;
-                setStreamingContent(fullContent);
-              }
-              if (parsed.fullContent) {
-                fullContent = parsed.fullContent;
-              }
-              if (parsed.action) {
-                action = parsed.action;
-              }
-            } catch {
-            }
-          }
-        }
-      }
-      const displayContent = fullContent.replace(/\[RESTART\]/g, "").trim();
-      const resultMsg = { role: "assistant", content: displayContent };
-      setMessages([...finalMessages, resultMsg]);
-      setResultsHistory([resultMsg]);
-      setStreamingContent("");
-      if (action === "restart") {
-        handleRestart();
-      }
+      const data = await res.json();
+      const introMsg = { role: "assistant", content: data.message || "Here is what I found:" };
+      setMessages([...finalMessages, introMsg]);
+      setResultsHistory([introMsg]);
+      setMatches(data.matches || matchList);
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to stream results");
-    } finally {
-      setIsStreaming(false);
+      setError(err instanceof Error ? err.message : "Failed to load results");
     }
   };
   const sendResultsFollowUp = async (message) => {
@@ -2986,6 +3162,7 @@ function SmartQuestionnaire({ className, ...config }) {
                   ]
                 }
               ) }),
+              phase === "results" && matches && matches.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "90%" }, children: matches.map((match, i) => /* @__PURE__ */ jsx5(MatchCard, { match, theme }, i)) }),
               showOptions && currentStep.options.length > 0 && /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: "6px", maxWidth: "85%" }, children: currentStep.multiSelect ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
                 currentStep.options.map((opt) => {
                   const isSelected = multiSelectChoices.has(opt);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@informedai/react",
-  "version": "0.4.23",
+  "version": "0.4.25",
   "description": "React SDK for InformedAI Assistant - AI-powered content creation widget",
   "main": "dist/index.js",
   "module": "dist/index.mjs",