@informedai/react 0.4.14 → 0.4.15

package/dist/index.mjs

@@ -1271,19 +1271,765 @@ function LoadingSpinner({ size = 20 }) {
   );
 }
 
+// src/components/AdminChatbot.tsx
+import { useState as useState3, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "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] = useState3([]);
+  const [inputValue, setInputValue] = useState3("");
+  const [systemPrompt, setSystemPrompt] = useState3(config.systemPrompt || "");
+  const [showSystemPromptEditor, setShowSystemPromptEditor] = useState3(false);
+  const [isStreaming, setIsStreaming] = useState3(false);
+  const [streamingContent, setStreamingContent] = useState3("");
+  const [error, setError] = useState3(null);
+  const [isCollapsed, setIsCollapsed] = useState3(config.defaultCollapsed ?? false);
+  const messagesEndRef = useRef3(null);
+  const inputRef = useRef3(null);
+  useEffect3(() => {
+    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__ */ jsx3(
+      "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__ */ jsx3("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx3("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__ */ jsxs2(
+    "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__ */ jsxs2(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              borderBottom: "1px solid #e5e5e5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              backgroundColor: "var(--ac-primary)",
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsxs2("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx3("path", { d: "M12 16v-4M12 8h.01" })
+                ] }),
+                /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600 }, children: config.title || "Knowledge Library" })
+              ] }),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "8px" }, children: [
+                config.allowEditSystemPrompt && /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3(
+                  "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__ */ jsx3(
+                  "button",
+                  {
+                    onClick: () => setIsCollapsed(true),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer",
+                      padding: "4px"
+                    },
+                    children: /* @__PURE__ */ jsxs2("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx3("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx3("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showSystemPromptEditor && /* @__PURE__ */ jsxs2("div", { style: { padding: "12px", borderBottom: "1px solid #e5e5e5", backgroundColor: "#f9fafb" }, children: [
+          /* @__PURE__ */ jsx3("label", { style: { display: "block", fontSize: "12px", fontWeight: 500, marginBottom: "4px", color: "#6b7280" }, children: "System Prompt" }),
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsxs2(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              minHeight: "200px"
+            },
+            children: [
+              messages.length === 0 && !streamingContent && /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", color: "#9ca3af", padding: "40px 20px" }, children: [
+                /* @__PURE__ */ jsx3(
+                  "svg",
+                  {
+                    width: "48",
+                    height: "48",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    style: { margin: "0 auto 16px" },
+                    children: /* @__PURE__ */ jsx3("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__ */ jsx3("p", { style: { margin: 0, fontSize: "14px" }, children: "Ask a question about your knowledge library" })
+              ] }),
+              messages.map((msg, i) => /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
+                    maxWidth: "85%"
+                  },
+                  children: /* @__PURE__ */ jsx3(
+                    "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__ */ jsx3("div", { style: { alignSelf: "flex-start", maxWidth: "85%" }, children: /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "12px",
+                    backgroundColor: "#f3f4f6",
+                    color: "var(--ac-text)",
+                    fontSize: "14px",
+                    lineHeight: "1.5",
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: [
+                    streamingContent,
+                    /* @__PURE__ */ jsx3("span", { style: { opacity: 0.5, animation: "blink 1s infinite" }, children: "|" })
+                  ]
+                }
+              ) }),
+              error && /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "8px",
+                    backgroundColor: "#fef2f2",
+                    color: "#dc2626",
+                    fontSize: "13px"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsx3("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3("form", { onSubmit: handleSubmit, style: { padding: "12px", borderTop: "1px solid #e5e5e5" }, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx3(
+            "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__ */ jsx3(
+            "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__ */ jsx3("style", { children: `
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+
+// 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";
+var defaultTheme3 = {
+  primaryColor: "#f59e0b",
+  // Amber
+  backgroundColor: "#ffffff",
+  textColor: "#1c1917",
+  borderRadius: "12px",
+  fontFamily: "system-ui, -apple-system, sans-serif"
+};
+function WebsiteChatbot({ className, ...config }) {
+  const theme = { ...defaultTheme3, ...config.theme };
+  const apiUrl = config.apiUrl || "https://api.informedai.app/api/v1";
+  const [messages, setMessages] = useState4([]);
+  const [inputValue, setInputValue] = useState4("");
+  const [isStreaming, setIsStreaming] = useState4(false);
+  const [streamingContent, setStreamingContent] = useState4("");
+  const [error, setError] = useState4(null);
+  const [isCollapsed, setIsCollapsed] = useState4(config.defaultCollapsed ?? false);
+  const messagesEndRef = useRef4(null);
+  useEffect4(() => {
+    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/message`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          agentId: config.agentId,
+          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__ */ jsx4(
+      "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__ */ jsx4("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx4("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__ */ jsxs3(
+    "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__ */ jsxs3(
+          "div",
+          {
+            style: {
+              padding: "16px",
+              borderBottom: "1px solid #e5e5e5",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              backgroundColor: "var(--wc-primary)",
+              color: "white"
+            },
+            children: [
+              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsxs3("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx4("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+                  /* @__PURE__ */ jsx4("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__ */ jsx4("span", { style: { fontWeight: 600 }, children: config.title || "Chat" })
+              ] }),
+              /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx4(
+                  "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__ */ jsx4(
+                  "button",
+                  {
+                    onClick: () => setIsCollapsed(true),
+                    style: {
+                      background: "none",
+                      border: "none",
+                      color: "white",
+                      cursor: "pointer",
+                      padding: "4px"
+                    },
+                    children: /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsx4("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx4("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    ] })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "12px",
+              minHeight: "200px"
+            },
+            children: [
+              messages.length === 0 && !streamingContent && /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center", color: "#9ca3af", padding: "40px 20px" }, children: [
+                /* @__PURE__ */ jsx4(
+                  "svg",
+                  {
+                    width: "48",
+                    height: "48",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    style: { margin: "0 auto 16px" },
+                    children: /* @__PURE__ */ jsx4("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__ */ jsx4("p", { style: { margin: 0, fontSize: "14px" }, children: "How can I help you today?" })
+              ] }),
+              messages.map((msg, i) => /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  style: {
+                    alignSelf: msg.role === "user" ? "flex-end" : "flex-start",
+                    maxWidth: "85%"
+                  },
+                  children: /* @__PURE__ */ jsx4(
+                    "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",
+                        whiteSpace: "pre-wrap"
+                      },
+                      children: msg.content
+                    }
+                  )
+                },
+                i
+              )),
+              streamingContent && /* @__PURE__ */ jsx4("div", { style: { alignSelf: "flex-start", maxWidth: "85%" }, children: /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "12px",
+                    backgroundColor: "#f3f4f6",
+                    color: "var(--wc-text)",
+                    fontSize: "14px",
+                    lineHeight: "1.5",
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: [
+                    streamingContent,
+                    /* @__PURE__ */ jsx4("span", { style: { opacity: 0.5, animation: "blink 1s infinite" }, children: "|" })
+                  ]
+                }
+              ) }),
+              error && /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  style: {
+                    padding: "10px 14px",
+                    borderRadius: "8px",
+                    backgroundColor: "#fef2f2",
+                    color: "#dc2626",
+                    fontSize: "13px"
+                  },
+                  children: error
+                }
+              ),
+              /* @__PURE__ */ jsx4("div", { ref: messagesEndRef })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("form", { onSubmit: handleSubmit, style: { padding: "12px", borderTop: "1px solid #e5e5e5" }, children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx4(
+            "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__ */ jsx4(
+            "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__ */ jsx4("style", { children: `
+        @keyframes blink {
+          0%, 50% { opacity: 1; }
+          51%, 100% { opacity: 0; }
+        }
+      ` })
+      ]
+    }
+  );
+}
+
 // src/hooks/useSession.ts
-import { useState as useState3, useEffect as useEffect3, useCallback as useCallback2, useRef as useRef3 } from "react";
+import { useState as useState5, useEffect as useEffect5, useCallback as useCallback2, useRef as useRef5 } from "react";
 function useSession(options) {
   const { apiUrl, documentTypeId, sessionId, onSessionChange, onError } = options;
-  const [session, setSession] = useState3(null);
-  const [isLoading, setIsLoading] = useState3(true);
-  const [error, setError] = useState3(null);
-  const clientRef = useRef3(null);
-  const isStreamingRef = useRef3(false);
-  useEffect3(() => {
+  const [session, setSession] = useState5(null);
+  const [isLoading, setIsLoading] = useState5(true);
+  const [error, setError] = useState5(null);
+  const clientRef = useRef5(null);
+  const isStreamingRef = useRef5(false);
+  useEffect5(() => {
     clientRef.current = new InformedAIClient(apiUrl);
   }, [apiUrl]);
-  useEffect3(() => {
+  useEffect5(() => {
     async function initialize() {
       if (!clientRef.current) return;
       try {
@@ -1393,9 +2139,11 @@ function useSession(options) {
   };
 }
 export {
+  AdminChatbot,
   InformedAIClient,
   InformedAIProvider,
   InformedAssistant,
+  WebsiteChatbot,
   useInformedAI,
   useSession
 };