@informedai/react 0.4.22 → 0.4.23

package/dist/index.mjs

@@ -2329,19 +2329,832 @@ function WebsiteChatbot({ className, ...config }) {
   );
 }
 
+// src/components/SmartQuestionnaire.tsx
+import { useState as useState5, useRef as useRef5, useEffect as useEffect5 } from "react";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var defaultTheme4 = {
+  primaryColor: "#8b5cf6",
+  backgroundColor: "#ffffff",
+  textColor: "#1c1917",
+  borderRadius: "12px",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+function ChatCard2({ card, theme }) {
+  const data = extractCardDisplayData(card);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#fff",
+        marginTop: "8px",
+        marginBottom: "8px"
+      },
+      children: [
+        data.imageUrl && /* @__PURE__ */ jsx5("div", { style: { width: "100%", height: "140px", backgroundColor: "#f3f4f6", overflow: "hidden" }, children: /* @__PURE__ */ jsx5(
+          "img",
+          {
+            src: data.imageUrl,
+            alt: data.title,
+            style: { width: "100%", height: "100%", objectFit: "cover" },
+            onError: (e) => {
+              e.target.style.display = "none";
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs4("div", { style: { padding: "12px" }, 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",
+                marginBottom: "6px"
+              },
+              children: card.type
+            }
+          ),
+          /* @__PURE__ */ jsx5("div", { style: { fontSize: "15px", fontWeight: 600, color: "#1f2937", marginBottom: "4px", lineHeight: "1.3" }, children: data.title }),
+          data.subtitle && /* @__PURE__ */ jsx5("div", { style: { fontSize: "13px", color: "#6b7280", marginBottom: "6px" }, children: data.subtitle }),
+          data.description && /* @__PURE__ */ jsx5("div", { style: { fontSize: "13px", color: "#4b5563", lineHeight: "1.4", marginBottom: "8px" }, children: data.description }),
+          data.extraValues.length > 0 && /* @__PURE__ */ jsx5("div", { style: { fontSize: "12px", color: "#6b7280", marginBottom: "8px" }, children: data.extraValues.join(" \u2022 ") }),
+          data.actionUrl && /* @__PURE__ */ jsxs4(
+            "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`
+              },
+              children: [
+                data.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" })
+                ] })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MessageContent2({ content, theme }) {
+  const segments = parseMessageContent(content);
+  if (segments.length === 1 && segments[0].type === "text") {
+    return /* @__PURE__ */ jsx5(Fragment3, { children: segments[0].content });
+  }
+  return /* @__PURE__ */ jsx5(Fragment3, { children: segments.map((segment, index) => {
+    if (segment.type === "text") {
+      return /* @__PURE__ */ jsx5("span", { style: { whiteSpace: "pre-wrap" }, children: segment.content }, index);
+    }
+    if (segment.type === "card" && segment.card) {
+      return /* @__PURE__ */ jsx5(ChatCard2, { card: segment.card, theme }, index);
+    }
+    return null;
+  }) });
+}
+function SmartQuestionnaire({ className, ...config }) {
+  const theme = { ...defaultTheme4, ...config.theme };
+  const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
+  const jsonHeaders = { "Content-Type": "application/json" };
+  const [phase, setPhase] = useState5("loading");
+  const [steps, setSteps] = useState5([]);
+  const [currentStepIndex, setCurrentStepIndex] = useState5(0);
+  const [answers, setAnswers] = useState5({});
+  const [messages, setMessages] = useState5([]);
+  const [inputValue, setInputValue] = useState5("");
+  const [isStreaming, setIsStreaming] = useState5(false);
+  const [streamingContent, setStreamingContent] = useState5("");
+  const [error, setError] = useState5(null);
+  const [isCollapsed, setIsCollapsed] = useState5(config.defaultCollapsed ?? false);
+  const [multiSelectChoices, setMultiSelectChoices] = useState5(/* @__PURE__ */ new Set());
+  const [matches, setMatches] = useState5(null);
+  const [resultsHistory, setResultsHistory] = useState5([]);
+  const [answeredStepIndices, setAnsweredStepIndices] = useState5(/* @__PURE__ */ new Set());
+  const [awaitingFreeTextResponse, setAwaitingFreeTextResponse] = useState5(false);
+  const messagesEndRef = useRef5(null);
+  useEffect5(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, streamingContent]);
+  useEffect5(() => {
+    fetchSteps();
+  }, []);
+  const fetchSteps = async () => {
+    try {
+      const res = await fetch(`${apiUrl}/smart-questionnaire/${config.questionnaireId}/steps`, {
+        headers: jsonHeaders
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: "Failed to load" }));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      const data = await res.json();
+      if (data.length === 0) {
+        setError("This questionnaire has no steps configured.");
+        setPhase("steps");
+        return;
+      }
+      setSteps(data);
+      setMessages([{ role: "assistant", content: data[0].question }]);
+      setPhase("steps");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load questionnaire");
+      setPhase("steps");
+    }
+  };
+  const advanceStep = (newAnswers, newMessages, newAnsweredIndices, fromIndex) => {
+    const nextIndex = fromIndex + 1;
+    if (nextIndex >= steps.length) {
+      setMessages(newMessages);
+      setAnswers(newAnswers);
+      setAnsweredStepIndices(newAnsweredIndices);
+      setCurrentStepIndex(nextIndex);
+      startMatching(newAnswers, newMessages);
+    } else {
+      const nextStep = steps[nextIndex];
+      const updated = [...newMessages, { role: "assistant", content: nextStep.question }];
+      setMessages(updated);
+      setAnswers(newAnswers);
+      setAnsweredStepIndices(newAnsweredIndices);
+      setCurrentStepIndex(nextIndex);
+    }
+  };
+  const handleOptionClick = (option) => {
+    const step = steps[currentStepIndex];
+    const newAnswers = {
+      ...answers,
+      [step.answerKey]: { value: option, question: step.question, inputType: "selected" }
+    };
+    const newMessages = [...messages, { role: "user", content: option }];
+    const newAnswered = new Set(answeredStepIndices);
+    newAnswered.add(currentStepIndex);
+    advanceStep(newAnswers, newMessages, newAnswered, currentStepIndex);
+  };
+  const handleMultiSelectConfirm = () => {
+    if (multiSelectChoices.size === 0) return;
+    const step = steps[currentStepIndex];
+    const value = Array.from(multiSelectChoices).join(", ");
+    const newAnswers = {
+      ...answers,
+      [step.answerKey]: { value, question: step.question, inputType: "selected" }
+    };
+    const newMessages = [...messages, { role: "user", content: value }];
+    const newAnswered = new Set(answeredStepIndices);
+    newAnswered.add(currentStepIndex);
+    setMultiSelectChoices(/* @__PURE__ */ new Set());
+    advanceStep(newAnswers, newMessages, newAnswered, currentStepIndex);
+  };
+  const handleFreeTextSubmit = async (text) => {
+    if (!text.trim() || isStreaming) return;
+    const step = steps[currentStepIndex];
+    const userMsg = { role: "user", content: text };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setInputValue("");
+    setIsStreaming(true);
+    setAwaitingFreeTextResponse(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `${apiUrl}/smart-questionnaire/${config.questionnaireId}/step/${step.name}`,
+        {
+          method: "POST",
+          headers: jsonHeaders,
+          body: JSON.stringify({ message: text, history: [] })
+        }
+      );
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: "Request failed" }));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      const data = await res.json();
+      if (data.answer) {
+        const newAnswers = {
+          ...answers,
+          [step.answerKey]: { value: data.answer, question: step.question, inputType: "typed" }
+        };
+        const newAnswered = new Set(answeredStepIndices);
+        newAnswered.add(currentStepIndex);
+        let msgs = newMessages;
+        if (data.message) {
+          msgs = [...msgs, { role: "assistant", content: data.message }];
+        }
+        advanceStep(newAnswers, msgs, newAnswered, currentStepIndex);
+      } else {
+        if (data.message) {
+          setMessages([...newMessages, { role: "assistant", content: data.message }]);
+        }
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to process answer");
+    } finally {
+      setIsStreaming(false);
+      setAwaitingFreeTextResponse(false);
+    }
+  };
+  const startMatching = async (finalAnswers, finalMessages) => {
+    setPhase("matching");
+    setError(null);
+    try {
+      const res = await fetch(`${apiUrl}/smart-questionnaire/${config.questionnaireId}/match`, {
+        method: "POST",
+        headers: jsonHeaders,
+        body: JSON.stringify({ answers: finalAnswers })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: "Matching failed" }));
+        throw new Error(err.error || `HTTP ${res.status}`);
+      }
+      const data = await res.json();
+      const matchList = data.matches || [];
+      setMatches(matchList);
+      startResults(finalAnswers, finalMessages, matchList);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to find matches");
+      setPhase("results");
+    }
+  };
+  const startResults = async (finalAnswers, finalMessages, matchList) => {
+    setPhase("results");
+    setIsStreaming(true);
+    setStreamingContent("");
+    try {
+      const res = await fetch(`${apiUrl}/smart-questionnaire/${config.questionnaireId}/results`, {
+        method: "POST",
+        headers: jsonHeaders,
+        body: JSON.stringify({ matches: matchList, history: [] })
+      });
+      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();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to stream results");
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+  const sendResultsFollowUp = async (message) => {
+    if (!message.trim() || isStreaming) return;
+    setIsStreaming(true);
+    setStreamingContent("");
+    setError(null);
+    const userMsg = { role: "user", content: message };
+    const newHistory = [...resultsHistory, userMsg];
+    setMessages((prev) => [...prev, userMsg]);
+    setInputValue("");
+    try {
+      const res = await fetch(`${apiUrl}/smart-questionnaire/${config.questionnaireId}/results`, {
+        method: "POST",
+        headers: jsonHeaders,
+        body: JSON.stringify({
+          message,
+          matches: matches || [],
+          history: newHistory
+        })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: "Request 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 assistantMsg = { role: "assistant", content: displayContent };
+      const updatedHistory = [...newHistory, assistantMsg];
+      setMessages((prev) => [...prev, assistantMsg]);
+      setResultsHistory(updatedHistory);
+      setStreamingContent("");
+      if (action === "restart") {
+        handleRestart();
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send message");
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+  const handleRestart = () => {
+    setPhase("steps");
+    setCurrentStepIndex(0);
+    setAnswers({});
+    setMessages(steps.length > 0 ? [{ role: "assistant", content: steps[0].question }] : []);
+    setResultsHistory([]);
+    setMatches(null);
+    setMultiSelectChoices(/* @__PURE__ */ new Set());
+    setAnsweredStepIndices(/* @__PURE__ */ new Set());
+    setStreamingContent("");
+    setError(null);
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!inputValue.trim() || isStreaming) return;
+    const msg = inputValue.trim();
+    if (phase === "results") {
+      sendResultsFollowUp(msg);
+    } else if (phase === "steps") {
+      handleFreeTextSubmit(msg);
+    }
+  };
+  const progress = steps.length > 0 ? Math.min(currentStepIndex / steps.length, 1) : 0;
+  const currentStep = phase === "steps" && currentStepIndex < steps.length ? steps[currentStepIndex] : null;
+  const showOptions = currentStep && !answeredStepIndices.has(currentStepIndex) && !awaitingFreeTextResponse;
+  const cssVars = {
+    "--sq-primary": theme.primaryColor,
+    "--sq-bg": theme.backgroundColor,
+    "--sq-text": theme.textColor,
+    "--sq-radius": theme.borderRadius,
+    "--sq-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__ */ jsx5(
+      "button",
+      {
+        onClick: () => setIsCollapsed(false),
+        className,
+        style: {
+          ...cssVars,
+          ...positionStyles,
+          width: "56px",
+          height: "56px",
+          borderRadius: "50%",
+          backgroundColor: "var(--sq-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(--sq-font)"
+        },
+        children: /* @__PURE__ */ jsxs4("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsx5("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }),
+          /* @__PURE__ */ jsx5("rect", { x: "9", y: "3", width: "6", height: "4", rx: "2" }),
+          /* @__PURE__ */ jsx5("path", { d: "M9 14l2 2 4-4" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className,
+      style: {
+        ...cssVars,
+        ...positionStyles,
+        width: config.position === "inline" ? "100%" : "380px",
+        maxHeight: config.position === "inline" ? "600px" : "520px",
+        backgroundColor: "var(--sq-bg)",
+        borderRadius: "var(--sq-radius)",
+        border: "1px solid #e5e5e5",
+        fontFamily: "var(--sq-font)",
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: config.position === "inline" ? "none" : "0 4px 20px rgba(0,0,0,0.15)",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              padding: "14px 16px",
+              borderBottom: "1px solid #e5e5e5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              backgroundColor: "var(--sq-primary)",
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsx5("path", { d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2" }),
+                  /* @__PURE__ */ jsx5("rect", { x: "9", y: "3", width: "6", height: "4", rx: "2" }),
+                  /* @__PURE__ */ jsx5("path", { d: "M9 14l2 2 4-4" })
+                ] }),
+                /* @__PURE__ */ jsx5("span", { style: { fontWeight: 600 }, children: config.title || "Smart Questionnaire" })
+              ] }),
+              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
+                phase === "results" && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    onClick: handleRestart,
+                    style: {
+                      background: "rgba(255,255,255,0.2)",
+                      border: "none",
+                      borderRadius: "4px",
+                      padding: "4px 8px",
+                      color: "white",
+                      cursor: "pointer",
+                      fontSize: "12px"
+                    },
+                    children: "Restart"
+                  }
+                ),
+                config.position !== "inline" && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    onClick: () => setIsCollapsed(true),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer",
+                      padding: "4px"
+                    },
+                    children: /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        phase === "steps" && steps.length > 0 && /* @__PURE__ */ jsx5("div", { style: { height: "3px", backgroundColor: "#e5e7eb" }, children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              height: "100%",
+              width: `${progress * 100}%`,
+              backgroundColor: "var(--sq-primary)",
+              transition: "width 0.3s ease"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              minHeight: "200px"
+            },
+            children: [
+              phase === "loading" && /* @__PURE__ */ jsxs4("div", { style: { textAlign: "center", color: "#9ca3af", padding: "40px 20px" }, children: [
+                /* @__PURE__ */ jsx5("div", { style: { marginBottom: "12px" }, children: /* @__PURE__ */ jsx5(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    style: { margin: "0 auto", animation: "sq-spin 1s linear infinite" },
+                    children: /* @__PURE__ */ jsx5("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx5("p", { style: { margin: 0, fontSize: "14px" }, children: "Loading questionnaire..." })
+              ] }),
+              messages.map((msg, i) => /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
+                    maxWidth: "85%"
+                  },
+                  children: /* @__PURE__ */ jsx5(
+                    "div",
+                    {
+                      style: {
+                        padding: "10px 14px",
+                        borderRadius: "12px",
+                        backgroundColor: msg.role === "user" ? "var(--sq-primary)" : "#f3f4f6",
+                        color: msg.role === "user" ? "white" : "var(--sq-text)",
+                        fontSize: "14px",
+                        lineHeight: "1.5"
+                      },
+                      children: msg.role === "user" ? msg.content : /* @__PURE__ */ jsx5(MessageContent2, { content: msg.content, theme })
+                    }
+                  )
+                },
+                i
+              )),
+              streamingContent && /* @__PURE__ */ jsx5("div", { style: { alignSelf: "flex-start", maxWidth: "85%" }, children: /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "12px",
+                    backgroundColor: "#f3f4f6",
+                    color: "var(--sq-text)",
+                    fontSize: "14px",
+                    lineHeight: "1.5"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(MessageContent2, { content: streamingContent, theme }),
+                    /* @__PURE__ */ jsx5("span", { style: { opacity: 0.5, animation: "sq-blink 1s infinite" }, children: "|" })
+                  ]
+                }
+              ) }),
+              phase === "matching" && /* @__PURE__ */ jsx5("div", { style: { alignSelf: "flex-start", maxWidth: "85%" }, children: /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "12px",
+                    backgroundColor: "#f3f4f6",
+                    color: "#6b7280",
+                    fontSize: "14px",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "svg",
+                      {
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        style: { animation: "sq-spin 1s linear infinite" },
+                        children: /* @__PURE__ */ jsx5("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
+                      }
+                    ),
+                    "Finding matches..."
+                  ]
+                }
+              ) }),
+              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);
+                  return /* @__PURE__ */ jsxs4(
+                    "button",
+                    {
+                      onClick: () => {
+                        const next = new Set(multiSelectChoices);
+                        if (isSelected) next.delete(opt);
+                        else next.add(opt);
+                        setMultiSelectChoices(next);
+                      },
+                      style: {
+                        padding: "8px 14px",
+                        borderRadius: "8px",
+                        border: `1.5px solid ${isSelected ? theme.primaryColor : "#d1d5db"}`,
+                        backgroundColor: isSelected ? `${theme.primaryColor}10` : "white",
+                        color: isSelected ? theme.primaryColor : "#374151",
+                        fontSize: "13px",
+                        cursor: "pointer",
+                        textAlign: "left",
+                        fontFamily: "var(--sq-font)",
+                        transition: "all 0.15s ease"
+                      },
+                      children: [
+                        isSelected ? "\u2611 " : "\u2610 ",
+                        opt
+                      ]
+                    },
+                    opt
+                  );
+                }),
+                multiSelectChoices.size > 0 && /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    onClick: handleMultiSelectConfirm,
+                    style: {
+                      padding: "8px 14px",
+                      borderRadius: "8px",
+                      border: "none",
+                      backgroundColor: "var(--sq-primary)",
+                      color: "white",
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      cursor: "pointer",
+                      fontFamily: "var(--sq-font)",
+                      marginTop: "4px"
+                    },
+                    children: [
+                      "Confirm (",
+                      multiSelectChoices.size,
+                      " selected)"
+                    ]
+                  }
+                )
+              ] }) : currentStep.options.map((opt) => /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: () => handleOptionClick(opt),
+                  style: {
+                    padding: "8px 14px",
+                    borderRadius: "8px",
+                    border: "1.5px solid #d1d5db",
+                    backgroundColor: "white",
+                    color: "#374151",
+                    fontSize: "13px",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    fontFamily: "var(--sq-font)",
+                    transition: "all 0.15s ease"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.borderColor = theme.primaryColor || "#8b5cf6";
+                    e.currentTarget.style.backgroundColor = `${theme.primaryColor}08`;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.borderColor = "#d1d5db";
+                    e.currentTarget.style.backgroundColor = "white";
+                  },
+                  children: opt
+                },
+                opt
+              )) }),
+              error && /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "8px",
+                    backgroundColor: "#fef2f2",
+                    color: "#dc2626",
+                    fontSize: "13px"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
+        (phase === "steps" || phase === "results") && /* @__PURE__ */ jsx5("form", { onSubmit: handleSubmit, style: { padding: "12px", borderTop: "1px solid #e5e5e5" }, children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx5(
+            "input",
+            {
+              type: "text",
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              placeholder: phase === "results" ? config.placeholder || "Ask a follow-up question..." : config.placeholder || "Type your answer...",
+              disabled: isStreaming,
+              style: {
+                flex: 1,
+                padding: "10px 14px",
+                borderRadius: "8px",
+                border: "1px solid #d1d5db",
+                fontSize: "14px",
+                fontFamily: "var(--sq-font)",
+                outline: "none",
+                color: "#1f2937",
+                backgroundColor: "#ffffff"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "submit",
+              disabled: isStreaming || !inputValue.trim(),
+              style: {
+                padding: "10px 16px",
+                borderRadius: "8px",
+                backgroundColor: isStreaming || !inputValue.trim() ? "#d1d5db" : "var(--sq-primary)",
+                color: "white",
+                border: "none",
+                cursor: isStreaming || !inputValue.trim() ? "not-allowed" : "pointer",
+                fontWeight: 500,
+                fontSize: "14px"
+              },
+              children: isStreaming ? "..." : "Send"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx5("style", { children: `
+        @keyframes sq-blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+        @keyframes sq-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+}
+
 // src/hooks/useSession.ts
-import { useState as useState5, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef5 } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback2, useRef as useRef6 } from "react";
 function useSession(options) {
   const { apiUrl, documentTypeId, sessionId, onSessionChange, onError } = options;
-  const [session, setSession] = useState5(null);
-  const [isLoading, setIsLoading] = useState5(true);
-  const [error, setError] = useState5(null);
-  const clientRef = useRef5(null);
-  const isStreamingRef = useRef5(false);
-  useEffect5(() => {
+  const [session, setSession] = useState6(null);
+  const [isLoading, setIsLoading] = useState6(true);
+  const [error, setError] = useState6(null);
+  const clientRef = useRef6(null);
+  const isStreamingRef = useRef6(false);
+  useEffect6(() => {
     clientRef.current = new InformedAIClient(apiUrl);
   }, [apiUrl]);
-  useEffect5(() => {
+  useEffect6(() => {
     async function initialize() {
       if (!clientRef.current) return;
       try {
@@ -2455,6 +3268,7 @@ export {
   InformedAIClient,
   InformedAIProvider,
   InformedAssistant,
+  SmartQuestionnaire,
   WebsiteChatbot,
   useInformedAI,
   useSession