@informedai/react 0.4.14 → 0.4.16

package/dist/index.js

@@ -20,9 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AdminChatbot: () => AdminChatbot,
   InformedAIClient: () => InformedAIClient,
   InformedAIProvider: () => InformedAIProvider,
   InformedAssistant: () => InformedAssistant,
+  WebsiteChatbot: () => WebsiteChatbot,
   useInformedAI: () => useInformedAI,
   useSession: () => useSession
 });
@@ -1301,19 +1303,1008 @@ function LoadingSpinner({ size = 20 }) {
   );
 }
 
-// src/hooks/useSession.ts
+// src/components/AdminChatbot.tsx
 var import_react3 = require("react");
-function useSession(options) {
-  const { apiUrl, documentTypeId, sessionId, onSessionChange, onError } = options;
-  const [session, setSession] = (0, import_react3.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultTheme2 = {
+  primaryColor: "#3b82f6",
+  // Blue (different from widget's amber)
+  backgroundColor: "#ffffff",
+  textColor: "#1c1917",
+  borderRadius: "12px",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+function AdminChatbot({ className, ...config }) {
+  const theme = { ...defaultTheme2, ...config.theme };
+  const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [inputValue, setInputValue] = (0, import_react3.useState)("");
+  const [systemPrompt, setSystemPrompt] = (0, import_react3.useState)(config.systemPrompt || "");
+  const [showSystemPromptEditor, setShowSystemPromptEditor] = (0, import_react3.useState)(false);
+  const [isStreaming, setIsStreaming] = (0, import_react3.useState)(false);
+  const [streamingContent, setStreamingContent] = (0, import_react3.useState)("");
   const [error, setError] = (0, import_react3.useState)(null);
-  const clientRef = (0, import_react3.useRef)(null);
-  const isStreamingRef = (0, import_react3.useRef)(false);
+  const [isCollapsed, setIsCollapsed] = (0, import_react3.useState)(config.defaultCollapsed ?? false);
+  const messagesEndRef = (0, import_react3.useRef)(null);
+  const inputRef = (0, import_react3.useRef)(null);
   (0, import_react3.useEffect)(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingContent]);
+  const sendMessage = async (message) => {
+    if (!message.trim() || isStreaming) return;
+    setError(null);
+    setIsStreaming(true);
+    setStreamingContent("");
+    const newMessages = [...messages, { role: "user", content: message }];
+    setMessages(newMessages);
+    try {
+      const response = await fetch(`${apiUrl}/admin-chatbot/message`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${config.apiKey}`
+        },
+        body: JSON.stringify({
+          message,
+          history: messages,
+          // Send previous messages (not including current)
+          systemPrompt: systemPrompt || void 0
+        })
+      });
+      if (!response.ok) {
+        const err = await response.json().catch(() => ({ error: "Request failed" }));
+        throw new Error(err.error || `HTTP ${response.status}`);
+      }
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error("No response body");
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let fullContent = "";
+      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 data = line.slice(5).trim();
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.content) {
+                fullContent += parsed.content;
+                setStreamingContent(fullContent);
+              }
+              if (parsed.fullContent) {
+                fullContent = parsed.fullContent;
+              }
+            } catch {
+            }
+          }
+        }
+      }
+      setMessages([...newMessages, { role: "assistant", content: fullContent }]);
+      setStreamingContent("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send message");
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!inputValue.trim() || isStreaming) return;
+    const message = inputValue.trim();
+    setInputValue("");
+    sendMessage(message);
+  };
+  const clearConversation = () => {
+    setMessages([]);
+    setStreamingContent("");
+    setError(null);
+  };
+  const cssVars = {
+    "--ac-primary": theme.primaryColor,
+    "--ac-bg": theme.backgroundColor,
+    "--ac-text": theme.textColor,
+    "--ac-radius": theme.borderRadius,
+    "--ac-font": theme.fontFamily
+  };
+  const positionStyles = config.position === "inline" ? {} : {
+    position: "fixed",
+    [config.position === "bottom-left" ? "left" : "right"]: "20px",
+    bottom: "20px",
+    zIndex: 9999
+  };
+  if (isCollapsed && config.position !== "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        onClick: () => setIsCollapsed(false),
+        className,
+        style: {
+          ...cssVars,
+          ...positionStyles,
+          width: "56px",
+          height: "56px",
+          borderRadius: "50%",
+          backgroundColor: "var(--ac-primary)",
+          color: "white",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          fontFamily: "var(--ac-font)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        ...cssVars,
+        ...positionStyles,
+        width: config.position === "inline" ? "100%" : "400px",
+        maxHeight: config.position === "inline" ? "600px" : "80vh",
+        backgroundColor: "var(--ac-bg)",
+        borderRadius: "var(--ac-radius)",
+        border: "1px solid #e5e5e5",
+        fontFamily: "var(--ac-font)",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: config.position === "inline" ? "none" : "0 4px 20px rgba(0,0,0,0.15)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              borderBottom: "1px solid #e5e5e5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              backgroundColor: "var(--ac-primary)",
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 16v-4M12 8h.01" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontWeight: 600 }, children: config.title || "Knowledge Library" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+                config.allowEditSystemPrompt && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: () => setShowSystemPromptEditor(!showSystemPromptEditor),
+                    style: {
+                      background: "rgba(255,255,255,0.2)",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "4px 8px",
+                      color: "white",
+                      cursor: "pointer",
+                      fontSize: "12px"
+                    },
+                    children: showSystemPromptEditor ? "Hide Prompt" : "Edit Prompt"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: clearConversation,
+                    style: {
+                      background: "rgba(255,255,255,0.2)",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "4px 8px",
+                      color: "white",
+                      cursor: "pointer",
+                      fontSize: "12px"
+                    },
+                    children: "Clear"
+                  }
+                ),
+                config.position !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    onClick: () => setIsCollapsed(true),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer",
+                      padding: "4px"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showSystemPromptEditor && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: "12px", borderBottom: "1px solid #e5e5e5", backgroundColor: "#f9fafb" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { style: { display: "block", fontSize: "12px", fontWeight: 500, marginBottom: "4px", color: "#6b7280" }, children: "System Prompt" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "textarea",
+            {
+              value: systemPrompt,
+              onChange: (e) => setSystemPrompt(e.target.value),
+              placeholder: "Enter a system prompt to guide the chatbot's behavior...",
+              style: {
+                width: "100%",
+                minHeight: "80px",
+                padding: "8px",
+                borderRadius: "6px",
+                border: "1px solid #d1d5db",
+                fontSize: "13px",
+                fontFamily: "var(--ac-font)",
+                resize: "vertical"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              minHeight: "200px"
+            },
+            children: [
+              messages.length === 0 && !streamingContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { textAlign: "center", color: "#9ca3af", padding: "40px 20px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "svg",
+                  {
+                    width: "48",
+                    height: "48",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    style: { margin: "0 auto 16px" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: 0, fontSize: "14px" }, children: "Ask a question about your knowledge library" })
+              ] }),
+              messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
+                    maxWidth: "85%"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    "div",
+                    {
+                      style: {
+                        padding: "10px 14px",
+                        borderRadius: "12px",
+                        backgroundColor: msg.role === "user" ? "var(--ac-primary)" : "#f3f4f6",
+                        color: msg.role === "user" ? "white" : "var(--ac-text)",
+                        fontSize: "14px",
+                        lineHeight: "1.5",
+                        whiteSpace: "pre-wrap"
+                      },
+                      children: msg.content
+                    }
+                  )
+                },
+                i
+              )),
+              streamingContent && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { alignSelf: "flex-start", maxWidth: "85%" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "12px",
+                    backgroundColor: "#f3f4f6",
+                    color: "var(--ac-text)",
+                    fontSize: "14px",
+                    lineHeight: "1.5",
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: [
+                    streamingContent,
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { opacity: 0.5, animation: "blink 1s infinite" }, children: "|" })
+                  ]
+                }
+              ) }),
+              error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "8px",
+                    backgroundColor: "#fef2f2",
+                    color: "#dc2626",
+                    fontSize: "13px"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { onSubmit: handleSubmit, style: { padding: "12px", borderTop: "1px solid #e5e5e5" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              placeholder: config.placeholder || "Ask a question...",
+              disabled: isStreaming,
+              style: {
+                flex: 1,
+                padding: "10px 14px",
+                borderRadius: "8px",
+                border: "1px solid #d1d5db",
+                fontSize: "14px",
+                fontFamily: "var(--ac-font)",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "submit",
+              disabled: isStreaming || !inputValue.trim(),
+              style: {
+                padding: "10px 16px",
+                borderRadius: "8px",
+                backgroundColor: isStreaming || !inputValue.trim() ? "#d1d5db" : "var(--ac-primary)",
+                color: "white",
+                border: "none",
+                cursor: isStreaming || !inputValue.trim() ? "not-allowed" : "pointer",
+                fontWeight: 500,
+                fontSize: "14px"
+              },
+              children: isStreaming ? "..." : "Send"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("style", { children: `
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+
+// 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",
+  // Amber
+  backgroundColor: "#ffffff",
+  textColor: "#1c1917",
+  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";
+  const [messages, setMessages] = (0, import_react4.useState)([]);
+  const [inputValue, setInputValue] = (0, import_react4.useState)("");
+  const [isStreaming, setIsStreaming] = (0, import_react4.useState)(false);
+  const [streamingContent, setStreamingContent] = (0, import_react4.useState)("");
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [isCollapsed, setIsCollapsed] = (0, import_react4.useState)(config.defaultCollapsed ?? false);
+  const messagesEndRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingContent]);
+  const sendMessage = async (message) => {
+    if (!message.trim() || isStreaming) return;
+    setError(null);
+    setIsStreaming(true);
+    setStreamingContent("");
+    const newMessages = [...messages, { role: "user", content: message }];
+    setMessages(newMessages);
+    try {
+      const response = await fetch(`${apiUrl}/website-agent/${config.agentId}/message`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          message,
+          history: messages
+        })
+      });
+      if (!response.ok) {
+        const err = await response.json().catch(() => ({ error: "Request failed" }));
+        throw new Error(err.error || `HTTP ${response.status}`);
+      }
+      const reader = response.body?.getReader();
+      if (!reader) throw new Error("No response body");
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let fullContent = "";
+      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 data = line.slice(5).trim();
+            try {
+              const parsed = JSON.parse(data);
+              if (parsed.content) {
+                fullContent += parsed.content;
+                setStreamingContent(fullContent);
+              }
+              if (parsed.fullContent) {
+                fullContent = parsed.fullContent;
+              }
+            } catch {
+            }
+          }
+        }
+      }
+      setMessages([...newMessages, { role: "assistant", content: fullContent }]);
+      setStreamingContent("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send message");
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!inputValue.trim() || isStreaming) return;
+    const message = inputValue.trim();
+    setInputValue("");
+    sendMessage(message);
+  };
+  const clearConversation = () => {
+    setMessages([]);
+    setStreamingContent("");
+    setError(null);
+  };
+  const cssVars = {
+    "--wc-primary": theme.primaryColor,
+    "--wc-bg": theme.backgroundColor,
+    "--wc-text": theme.textColor,
+    "--wc-radius": theme.borderRadius,
+    "--wc-font": theme.fontFamily
+  };
+  const positionStyles = config.position === "inline" ? {} : {
+    position: "fixed",
+    [config.position === "bottom-left" ? "left" : "right"]: "20px",
+    bottom: "20px",
+    zIndex: 9999
+  };
+  if (isCollapsed && config.position !== "inline") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: () => setIsCollapsed(false),
+        className,
+        style: {
+          ...cssVars,
+          ...positionStyles,
+          width: "56px",
+          height: "56px",
+          borderRadius: "50%",
+          backgroundColor: "var(--wc-primary)",
+          color: "white",
+          border: "none",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          fontFamily: "var(--wc-font)"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className,
+      style: {
+        ...cssVars,
+        ...positionStyles,
+        width: config.position === "inline" ? "100%" : "400px",
+        maxHeight: config.position === "inline" ? "600px" : "80vh",
+        backgroundColor: "var(--wc-bg)",
+        borderRadius: "var(--wc-radius)",
+        border: "1px solid #e5e5e5",
+        fontFamily: "var(--wc-font)",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: config.position === "inline" ? "none" : "0 4px 20px rgba(0,0,0,0.15)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              borderBottom: "1px solid #e5e5e5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              backgroundColor: "var(--wc-primary)",
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontWeight: 600 }, children: config.title || "Chat" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    onClick: clearConversation,
+                    style: {
+                      background: "rgba(255,255,255,0.2)",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "4px 8px",
+                      color: "white",
+                      cursor: "pointer",
+                      fontSize: "12px"
+                    },
+                    children: "Clear"
+                  }
+                ),
+                config.position !== "inline" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    onClick: () => setIsCollapsed(true),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer",
+                      padding: "4px"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              minHeight: "200px"
+            },
+            children: [
+              messages.length === 0 && !streamingContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { textAlign: "center", color: "#9ca3af", padding: "40px 20px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "svg",
+                  {
+                    width: "48",
+                    height: "48",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    style: { margin: "0 auto 16px" },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { margin: 0, fontSize: "14px" }, children: "How can I help you today?" })
+              ] }),
+              messages.map((msg, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
+                    maxWidth: "85%"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "div",
+                    {
+                      style: {
+                        padding: "10px 14px",
+                        borderRadius: "12px",
+                        backgroundColor: msg.role === "user" ? "var(--wc-primary)" : "#f3f4f6",
+                        color: msg.role === "user" ? "white" : "var(--wc-text)",
+                        fontSize: "14px",
+                        lineHeight: "1.5"
+                      },
+                      children: msg.role === "user" ? msg.content : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MessageContent, { content: msg.content, theme })
+                    }
+                  )
+                },
+                i
+              )),
+              streamingContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { alignSelf: "flex-start", maxWidth: "85%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "12px",
+                    backgroundColor: "#f3f4f6",
+                    color: "var(--wc-text)",
+                    fontSize: "14px",
+                    lineHeight: "1.5"
+                  },
+                  children: [
+                    /* @__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: "|" })
+                  ]
+                }
+              ) }),
+              error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "8px",
+                    backgroundColor: "#fef2f2",
+                    color: "#dc2626",
+                    fontSize: "13px"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("form", { onSubmit: handleSubmit, style: { padding: "12px", borderTop: "1px solid #e5e5e5" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              type: "text",
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              placeholder: config.placeholder || "Type a message...",
+              disabled: isStreaming,
+              style: {
+                flex: 1,
+                padding: "10px 14px",
+                borderRadius: "8px",
+                border: "1px solid #d1d5db",
+                fontSize: "14px",
+                fontFamily: "var(--wc-font)",
+                outline: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "submit",
+              disabled: isStreaming || !inputValue.trim(),
+              style: {
+                padding: "10px 16px",
+                borderRadius: "8px",
+                backgroundColor: isStreaming || !inputValue.trim() ? "#d1d5db" : "var(--wc-primary)",
+                color: "white",
+                border: "none",
+                cursor: isStreaming || !inputValue.trim() ? "not-allowed" : "pointer",
+                fontWeight: 500,
+                fontSize: "14px"
+              },
+              children: isStreaming ? "..." : "Send"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("style", { children: `
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+
+// src/hooks/useSession.ts
+var import_react5 = require("react");
+function useSession(options) {
+  const { apiUrl, documentTypeId, sessionId, onSessionChange, onError } = options;
+  const [session, setSession] = (0, import_react5.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(true);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const clientRef = (0, import_react5.useRef)(null);
+  const isStreamingRef = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     clientRef.current = new InformedAIClient(apiUrl);
   }, [apiUrl]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     async function initialize() {
       if (!clientRef.current) return;
       try {
@@ -1338,7 +2329,7 @@ function useSession(options) {
     }
     initialize();
   }, [documentTypeId, sessionId, onSessionChange, onError]);
-  const handleSSEEvent = (0, import_react3.useCallback)((event) => {
+  const handleSSEEvent = (0, import_react5.useCallback)((event) => {
     if (event.type === "done" || event.type === "session_update") {
       if (event.session) {
         setSession(event.session);
@@ -1353,7 +2344,7 @@ function useSession(options) {
       isStreamingRef.current = false;
     }
   }, [onSessionChange, onError]);
-  const sendMessage = (0, import_react3.useCallback)(async (message) => {
+  const sendMessage = (0, import_react5.useCallback)(async (message) => {
     if (!clientRef.current || !session || isStreamingRef.current) return;
     try {
       isStreamingRef.current = true;
@@ -1366,7 +2357,7 @@ function useSession(options) {
       isStreamingRef.current = false;
     }
   }, [session, handleSSEEvent, onError]);
-  const sendQuickAction = (0, import_react3.useCallback)(async (action) => {
+  const sendQuickAction = (0, import_react5.useCallback)(async (action) => {
     if (!clientRef.current || !session || isStreamingRef.current) return;
     try {
       isStreamingRef.current = true;
@@ -1386,7 +2377,7 @@ function useSession(options) {
       isStreamingRef.current = false;
     }
   }, [session, handleSSEEvent, onSessionChange, onError]);
-  const applyPendingValue = (0, import_react3.useCallback)(async () => {
+  const applyPendingValue = (0, import_react5.useCallback)(async () => {
     if (!clientRef.current || !session) return;
     try {
       setError(null);
@@ -1399,7 +2390,7 @@ function useSession(options) {
       onError?.(error2);
     }
   }, [session, onSessionChange, onError]);
-  const skipTask = (0, import_react3.useCallback)(async () => {
+  const skipTask = (0, import_react5.useCallback)(async () => {
     if (!clientRef.current || !session) return;
     try {
       setError(null);
@@ -1424,9 +2415,11 @@ function useSession(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AdminChatbot,
   InformedAIClient,
   InformedAIProvider,
   InformedAssistant,
+  WebsiteChatbot,
   useInformedAI,
   useSession
 });