@informedai/react 0.4.15 → 0.4.16

package/dist/index.d.mts

@@ -240,6 +240,7 @@ declare function AdminChatbot({ className, ...config }: AdminChatbotProps): reac
  * WebsiteChatbot
  * An embeddable chatbot widget for website agents.
  * Uses domain-based authentication - no API key required.
+ * Supports rendering rich cards from AI responses.
  */
 interface WebsiteChatbotTheme {
     primaryColor?: string;

package/dist/index.d.ts

@@ -240,6 +240,7 @@ declare function AdminChatbot({ className, ...config }: AdminChatbotProps): reac
  * WebsiteChatbot
  * An embeddable chatbot widget for website agents.
  * Uses domain-based authentication - no API key required.
+ * Supports rendering rich cards from AI responses.
  */
 interface WebsiteChatbotTheme {
     primaryColor?: string;

package/dist/index.js

@@ -1699,6 +1699,91 @@ function AdminChatbot({ className, ...config }) {
 
 // src/components/WebsiteChatbot.tsx
 var import_react4 = require("react");
+
+// src/utils/card-parser.ts
+var CARD_MARKER_REGEX = /\[([A-Z][A-Z0-9_]*):([^\]]+)\]/g;
+function parseCardMarker(marker) {
+  const match = marker.match(/^\[([A-Z][A-Z0-9_]*):([^\]]+)\]$/);
+  if (!match) return null;
+  const [, type, valuesStr] = match;
+  const values = valuesStr.split("|").map((v) => v.trim());
+  return {
+    type,
+    values,
+    originalMarker: marker
+  };
+}
+function parseMessageContent(content) {
+  const segments = [];
+  let lastIndex = 0;
+  const matches = [...content.matchAll(CARD_MARKER_REGEX)];
+  for (const match of matches) {
+    const marker = match[0];
+    const startIndex = match.index;
+    if (startIndex > lastIndex) {
+      const text = content.slice(lastIndex, startIndex).trim();
+      if (text) {
+        segments.push({ type: "text", content: text });
+      }
+    }
+    const card = parseCardMarker(marker);
+    if (card) {
+      segments.push({ type: "card", card });
+    }
+    lastIndex = startIndex + marker.length;
+  }
+  if (lastIndex < content.length) {
+    const text = content.slice(lastIndex).trim();
+    if (text) {
+      segments.push({ type: "text", content: text });
+    }
+  }
+  if (segments.length === 0 && content.trim()) {
+    segments.push({ type: "text", content: content.trim() });
+  }
+  return segments;
+}
+function isUrl(str) {
+  return /^https?:\/\//i.test(str);
+}
+function isImageUrl(url) {
+  if (!isUrl(url)) return false;
+  return /\.(jpg|jpeg|png|gif|webp|svg)(\?|$)/i.test(url);
+}
+function extractCardDisplayData(card) {
+  const values = [...card.values];
+  const result = {
+    title: values[0] || card.type,
+    extraValues: []
+  };
+  if (values.length <= 1) return result;
+  const imageIndex = values.findIndex((v, i) => i > 0 && isImageUrl(v));
+  if (imageIndex > 0) {
+    result.imageUrl = values[imageIndex];
+    values.splice(imageIndex, 1);
+  }
+  const actionIndex = values.findIndex((v, i) => i > 0 && isUrl(v) && !isImageUrl(v));
+  if (actionIndex > 0) {
+    result.actionUrl = values[actionIndex];
+    result.actionLabel = "View";
+    values.splice(actionIndex, 1);
+  }
+  const remaining = values.slice(1);
+  if (remaining.length > 0) {
+    if (remaining[0].length <= 50) {
+      result.subtitle = remaining[0];
+      remaining.shift();
+    }
+  }
+  if (remaining.length > 0) {
+    result.description = remaining[0];
+    remaining.shift();
+  }
+  result.extraValues = remaining;
+  return result;
+}
+
+// src/components/WebsiteChatbot.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultTheme3 = {
   primaryColor: "#f59e0b",
@@ -1708,6 +1793,167 @@ var defaultTheme3 = {
   borderRadius: "12px",
   fontFamily: "system-ui, -apple-system, sans-serif"
 };
+function ChatCard({ card, theme }) {
+  const data = extractCardDisplayData(card);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#fff",
+        marginTop: "8px",
+        marginBottom: "8px"
+      },
+      children: [
+        data.imageUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "140px",
+              backgroundColor: "#f3f4f6",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "img",
+              {
+                src: data.imageUrl,
+                alt: data.title,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                },
+                onError: (e) => {
+                  e.target.style.display = "none";
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "12px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.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",
+                marginBottom: "6px"
+              },
+              children: card.type
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "15px",
+                fontWeight: 600,
+                color: "#1f2937",
+                marginBottom: "4px",
+                lineHeight: "1.3"
+              },
+              children: data.title
+            }
+          ),
+          data.subtitle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "13px",
+                color: "#6b7280",
+                marginBottom: "6px"
+              },
+              children: data.subtitle
+            }
+          ),
+          data.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "13px",
+                color: "#4b5563",
+                lineHeight: "1.4",
+                marginBottom: "8px"
+              },
+              children: data.description
+            }
+          ),
+          data.extraValues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "12px",
+                color: "#6b7280",
+                marginBottom: "8px"
+              },
+              children: data.extraValues.join(" \u2022 ")
+            }
+          ),
+          data.actionUrl && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            "a",
+            {
+              href: data.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`,
+                transition: "background-color 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = `${theme.primaryColor}20`;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = `${theme.primaryColor}10`;
+              },
+              children: [
+                data.actionLabel || "View",
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.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_runtime4.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MessageContent({ content, theme }) {
+  const segments = parseMessageContent(content);
+  if (segments.length === 1 && segments[0].type === "text") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: segments[0].content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: segments.map((segment, index) => {
+    if (segment.type === "text") {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { whiteSpace: "pre-wrap" }, children: segment.content }, index);
+    }
+    if (segment.type === "card" && segment.card) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChatCard, { card: segment.card, theme }, index);
+    }
+    return null;
+  }) });
+}
 function WebsiteChatbot({ className, ...config }) {
   const theme = { ...defaultTheme3, ...config.theme };
   const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
@@ -1729,13 +1975,12 @@ function WebsiteChatbot({ className, ...config }) {
     const newMessages = [...messages, { role: "user", content: message }];
     setMessages(newMessages);
     try {
-      const response = await fetch(`${apiUrl}/website-agent/message`, {
+      const response = await fetch(`${apiUrl}/website-agent/${config.agentId}/message`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
-          agentId: config.agentId,
           message,
           history: messages
         })
@@ -1955,10 +2200,9 @@ function WebsiteChatbot({ className, ...config }) {
                         backgroundColor: msg.role === "user" ? "var(--wc-primary)" : "#f3f4f6",
                         color: msg.role === "user" ? "white" : "var(--wc-text)",
                         fontSize: "14px",
-                        lineHeight: "1.5",
-                        whiteSpace: "pre-wrap"
+                        lineHeight: "1.5"
                       },
-                      children: msg.content
+                      children: msg.role === "user" ? msg.content : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContent, { content: msg.content, theme })
                     }
                   )
                 },
@@ -1973,11 +2217,10 @@ function WebsiteChatbot({ className, ...config }) {
                     backgroundColor: "#f3f4f6",
                     color: "var(--wc-text)",
                     fontSize: "14px",
-                    lineHeight: "1.5",
-                    whiteSpace: "pre-wrap"
+                    lineHeight: "1.5"
                   },
                   children: [
-                    streamingContent,
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContent, { content: streamingContent, theme }),
                     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { opacity: 0.5, animation: "blink 1s infinite" }, children: "|" })
                   ]
                 }

package/dist/index.mjs

@@ -1667,7 +1667,92 @@ function AdminChatbot({ className, ...config }) {
 
 // src/components/WebsiteChatbot.tsx
 import { useState as useState4, useRef as useRef4, useEffect as useEffect4 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+
+// src/utils/card-parser.ts
+var CARD_MARKER_REGEX = /\[([A-Z][A-Z0-9_]*):([^\]]+)\]/g;
+function parseCardMarker(marker) {
+  const match = marker.match(/^\[([A-Z][A-Z0-9_]*):([^\]]+)\]$/);
+  if (!match) return null;
+  const [, type, valuesStr] = match;
+  const values = valuesStr.split("|").map((v) => v.trim());
+  return {
+    type,
+    values,
+    originalMarker: marker
+  };
+}
+function parseMessageContent(content) {
+  const segments = [];
+  let lastIndex = 0;
+  const matches = [...content.matchAll(CARD_MARKER_REGEX)];
+  for (const match of matches) {
+    const marker = match[0];
+    const startIndex = match.index;
+    if (startIndex > lastIndex) {
+      const text = content.slice(lastIndex, startIndex).trim();
+      if (text) {
+        segments.push({ type: "text", content: text });
+      }
+    }
+    const card = parseCardMarker(marker);
+    if (card) {
+      segments.push({ type: "card", card });
+    }
+    lastIndex = startIndex + marker.length;
+  }
+  if (lastIndex < content.length) {
+    const text = content.slice(lastIndex).trim();
+    if (text) {
+      segments.push({ type: "text", content: text });
+    }
+  }
+  if (segments.length === 0 && content.trim()) {
+    segments.push({ type: "text", content: content.trim() });
+  }
+  return segments;
+}
+function isUrl(str) {
+  return /^https?:\/\//i.test(str);
+}
+function isImageUrl(url) {
+  if (!isUrl(url)) return false;
+  return /\.(jpg|jpeg|png|gif|webp|svg)(\?|$)/i.test(url);
+}
+function extractCardDisplayData(card) {
+  const values = [...card.values];
+  const result = {
+    title: values[0] || card.type,
+    extraValues: []
+  };
+  if (values.length <= 1) return result;
+  const imageIndex = values.findIndex((v, i) => i > 0 && isImageUrl(v));
+  if (imageIndex > 0) {
+    result.imageUrl = values[imageIndex];
+    values.splice(imageIndex, 1);
+  }
+  const actionIndex = values.findIndex((v, i) => i > 0 && isUrl(v) && !isImageUrl(v));
+  if (actionIndex > 0) {
+    result.actionUrl = values[actionIndex];
+    result.actionLabel = "View";
+    values.splice(actionIndex, 1);
+  }
+  const remaining = values.slice(1);
+  if (remaining.length > 0) {
+    if (remaining[0].length <= 50) {
+      result.subtitle = remaining[0];
+      remaining.shift();
+    }
+  }
+  if (remaining.length > 0) {
+    result.description = remaining[0];
+    remaining.shift();
+  }
+  result.extraValues = remaining;
+  return result;
+}
+
+// src/components/WebsiteChatbot.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultTheme3 = {
   primaryColor: "#f59e0b",
   // Amber
@@ -1676,6 +1761,167 @@ var defaultTheme3 = {
   borderRadius: "12px",
   fontFamily: "system-ui, -apple-system, sans-serif"
 };
+function ChatCard({ card, theme }) {
+  const data = extractCardDisplayData(card);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#fff",
+        marginTop: "8px",
+        marginBottom: "8px"
+      },
+      children: [
+        data.imageUrl && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "140px",
+              backgroundColor: "#f3f4f6",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx4(
+              "img",
+              {
+                src: data.imageUrl,
+                alt: data.title,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                },
+                onError: (e) => {
+                  e.target.style.display = "none";
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { style: { padding: "12px" }, children: [
+          /* @__PURE__ */ jsx4(
+            "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",
+                marginBottom: "6px"
+              },
+              children: card.type
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                fontSize: "15px",
+                fontWeight: 600,
+                color: "#1f2937",
+                marginBottom: "4px",
+                lineHeight: "1.3"
+              },
+              children: data.title
+            }
+          ),
+          data.subtitle && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                fontSize: "13px",
+                color: "#6b7280",
+                marginBottom: "6px"
+              },
+              children: data.subtitle
+            }
+          ),
+          data.description && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                fontSize: "13px",
+                color: "#4b5563",
+                lineHeight: "1.4",
+                marginBottom: "8px"
+              },
+              children: data.description
+            }
+          ),
+          data.extraValues.length > 0 && /* @__PURE__ */ jsx4(
+            "div",
+            {
+              style: {
+                fontSize: "12px",
+                color: "#6b7280",
+                marginBottom: "8px"
+              },
+              children: data.extraValues.join(" \u2022 ")
+            }
+          ),
+          data.actionUrl && /* @__PURE__ */ jsxs3(
+            "a",
+            {
+              href: data.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`,
+                transition: "background-color 0.2s"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = `${theme.primaryColor}20`;
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = `${theme.primaryColor}10`;
+              },
+              children: [
+                data.actionLabel || "View",
+                /* @__PURE__ */ jsxs3("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsx4("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                  /* @__PURE__ */ jsx4("polyline", { points: "15 3 21 3 21 9" }),
+                  /* @__PURE__ */ jsx4("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MessageContent({ content, theme }) {
+  const segments = parseMessageContent(content);
+  if (segments.length === 1 && segments[0].type === "text") {
+    return /* @__PURE__ */ jsx4(Fragment2, { children: segments[0].content });
+  }
+  return /* @__PURE__ */ jsx4(Fragment2, { children: segments.map((segment, index) => {
+    if (segment.type === "text") {
+      return /* @__PURE__ */ jsx4("span", { style: { whiteSpace: "pre-wrap" }, children: segment.content }, index);
+    }
+    if (segment.type === "card" && segment.card) {
+      return /* @__PURE__ */ jsx4(ChatCard, { card: segment.card, theme }, index);
+    }
+    return null;
+  }) });
+}
 function WebsiteChatbot({ className, ...config }) {
   const theme = { ...defaultTheme3, ...config.theme };
   const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
@@ -1697,13 +1943,12 @@ function WebsiteChatbot({ className, ...config }) {
     const newMessages = [...messages, { role: "user", content: message }];
     setMessages(newMessages);
     try {
-      const response = await fetch(`${apiUrl}/website-agent/message`, {
+      const response = await fetch(`${apiUrl}/website-agent/${config.agentId}/message`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
-          agentId: config.agentId,
           message,
           history: messages
         })
@@ -1923,10 +2168,9 @@ function WebsiteChatbot({ className, ...config }) {
                         backgroundColor: msg.role === "user" ? "var(--wc-primary)" : "#f3f4f6",
                         color: msg.role === "user" ? "white" : "var(--wc-text)",
                         fontSize: "14px",
-                        lineHeight: "1.5",
-                        whiteSpace: "pre-wrap"
+                        lineHeight: "1.5"
                       },
-                      children: msg.content
+                      children: msg.role === "user" ? msg.content : /* @__PURE__ */ jsx4(MessageContent, { content: msg.content, theme })
                     }
                   )
                 },
@@ -1941,11 +2185,10 @@ function WebsiteChatbot({ className, ...config }) {
                     backgroundColor: "#f3f4f6",
                     color: "var(--wc-text)",
                     fontSize: "14px",
-                    lineHeight: "1.5",
-                    whiteSpace: "pre-wrap"
+                    lineHeight: "1.5"
                   },
                   children: [
-                    streamingContent,
+                    /* @__PURE__ */ jsx4(MessageContent, { content: streamingContent, theme }),
                     /* @__PURE__ */ jsx4("span", { style: { opacity: 0.5, animation: "blink 1s infinite" }, children: "|" })
                   ]
                 }

package/package.json

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