@kayro-ia/widget 1.0.0 → 1.0.2

package/dist/index.d.mts

@@ -0,0 +1,27 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    status: 'sending' | 'streaming' | 'done' | 'error';
+    tokensUsed?: number;
+}
+interface WidgetConfig {
+    apiKey: string;
+    orchestratorUrl?: string;
+    userToken?: string;
+    authHeaders?: Record<string, string>;
+    userId?: string;
+    userName?: string;
+    title?: string;
+    placeholder?: string;
+    primaryColor?: string;
+    position?: 'bottom-right' | 'bottom-left';
+    initialOpen?: boolean;
+    zIndex?: number;
+}
+
+declare function AIWidget(props: WidgetConfig): react_jsx_runtime.JSX.Element;
+
+export { AIWidget, type Message, type WidgetConfig };

package/dist/index.js

@@ -684,16 +684,27 @@ function ChatWindow({ config }) {
 // src/AIWidget.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function AIWidget(props) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f;
   const { isOpen, setOpen } = useChatStore();
-  const primaryColor = (_a = props.primaryColor) != null ? _a : "#6366f1";
-  const position = (_b = props.position) != null ? _b : "bottom-right";
-  const zIndex = (_c = props.zIndex) != null ? _c : 9999;
+  const [serverConfig, setServerConfig] = (0, import_react4.useState)(null);
+  const baseUrl = ((_a = props.orchestratorUrl) != null ? _a : "https://app.kayro.com.ar").replace(/\/$/, "");
   (0, import_react4.useEffect)(() => {
-    if (props.initialOpen) {
-      setOpen(true);
-    }
+    fetch(`${baseUrl}/api/widget-config?apiKey=${encodeURIComponent(props.apiKey)}`).then((r) => r.ok ? r.json() : null).then((data) => {
+      if (data) setServerConfig(data);
+    }).catch(() => {
+    });
+  }, [props.apiKey, baseUrl]);
+  (0, import_react4.useEffect)(() => {
+    if (props.initialOpen) setOpen(true);
   }, []);
+  const primaryColor = (_c = (_b = props.primaryColor) != null ? _b : serverConfig == null ? void 0 : serverConfig.primaryColor) != null ? _c : "#6366f1";
+  const position = (_d = props.position) != null ? _d : "bottom-right";
+  const zIndex = (_e = props.zIndex) != null ? _e : 9999;
+  const mergedConfig = {
+    ...props,
+    primaryColor,
+    title: (_f = props.title) != null ? _f : serverConfig == null ? void 0 : serverConfig.assistantName
+  };
   function handleBubbleClick() {
     setOpen(!isOpen);
   }
@@ -708,7 +719,7 @@ function AIWidget(props) {
         zIndex
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatWindow, { config: props })
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatWindow, { config: mergedConfig })
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -0,0 +1,701 @@
+// src/AIWidget.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+
+// src/store/chatStore.ts
+import { create } from "zustand";
+var useChatStore = create((set) => ({
+  messages: [],
+  isOpen: false,
+  isStreaming: false,
+  conversationId: crypto.randomUUID(),
+  addMessage: (msg) => set((state) => ({ messages: [...state.messages, msg] })),
+  updateLastAssistantMessage: (delta) => set((state) => {
+    const messages = [...state.messages];
+    const lastIdx = messages.length - 1;
+    if (lastIdx < 0 || messages[lastIdx].role !== "assistant") return state;
+    messages[lastIdx] = {
+      ...messages[lastIdx],
+      content: messages[lastIdx].content + delta
+    };
+    return { messages };
+  }),
+  finalizeLastAssistantMessage: (tokensUsed) => set((state) => {
+    const messages = [...state.messages];
+    const lastIdx = messages.length - 1;
+    if (lastIdx < 0 || messages[lastIdx].role !== "assistant") return state;
+    messages[lastIdx] = {
+      ...messages[lastIdx],
+      status: "done",
+      tokensUsed
+    };
+    return { messages };
+  }),
+  setLastAssistantError: () => set((state) => {
+    const messages = [...state.messages];
+    const lastIdx = messages.length - 1;
+    if (lastIdx < 0 || messages[lastIdx].role !== "assistant") return state;
+    messages[lastIdx] = {
+      ...messages[lastIdx],
+      status: "error"
+    };
+    return { messages };
+  }),
+  setStreaming: (v) => set({ isStreaming: v }),
+  setOpen: (v) => set({ isOpen: v }),
+  clearMessages: () => set({ messages: [] })
+}));
+
+// src/components/ChatBubble.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ChatBubble({ isOpen, onClick, primaryColor, position, zIndex }) {
+  const positionStyle = position === "bottom-right" ? { right: 24, bottom: 24 } : { left: 24, bottom: 24 };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      "aria-label": isOpen ? "Cerrar chat" : "Abrir chat",
+      style: {
+        position: "fixed",
+        ...positionStyle,
+        width: 56,
+        height: 56,
+        borderRadius: "50%",
+        backgroundColor: primaryColor,
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
+        zIndex,
+        transition: "transform 0.2s ease, box-shadow 0.2s ease",
+        color: "#ffffff",
+        padding: 0
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.08)";
+        e.currentTarget.style.boxShadow = "0 6px 24px rgba(0,0,0,0.28)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.2)";
+      },
+      children: isOpen ? (
+        // Close (×) icon
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "22",
+            height: "22",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      ) : (
+        // Chat bubble icon
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            children: /* @__PURE__ */ jsx("path", { d: "M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" })
+          }
+        )
+      )
+    }
+  );
+}
+
+// src/hooks/useChat.ts
+function normalizeUrl(base) {
+  return base.endsWith("/") ? base.slice(0, -1) : base;
+}
+function useChat() {
+  const {
+    messages,
+    isStreaming,
+    conversationId,
+    addMessage,
+    updateLastAssistantMessage,
+    finalizeLastAssistantMessage,
+    setLastAssistantError,
+    setStreaming
+  } = useChatStore();
+  async function sendMessage(content, config) {
+    var _a, _b, _c;
+    if (isStreaming || !content.trim()) return;
+    const userMessage = {
+      id: crypto.randomUUID(),
+      role: "user",
+      content: content.trim(),
+      status: "done"
+    };
+    addMessage(userMessage);
+    const assistantMessage = {
+      id: crypto.randomUUID(),
+      role: "assistant",
+      content: "",
+      status: "streaming"
+    };
+    addMessage(assistantMessage);
+    setStreaming(true);
+    const baseUrl = normalizeUrl((_a = config.orchestratorUrl) != null ? _a : "https://app.kayro.com.ar");
+    const history = [...messages, userMessage].map((m) => ({
+      role: m.role,
+      content: m.content
+    }));
+    try {
+      const response = await fetch(`${baseUrl}/api/chat`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": config.apiKey
+        },
+        body: JSON.stringify({
+          apiKey: config.apiKey,
+          conversationId,
+          messages: history,
+          ...config.userToken !== void 0 && { userToken: config.userToken },
+          ...config.authHeaders !== void 0 && { authHeaders: config.authHeaders },
+          ...config.userId !== void 0 && { userId: config.userId },
+          ...config.userName !== void 0 && { userName: config.userName }
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+      if (!response.body) {
+        throw new Error("Response body is null");
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const chunks = buffer.split("\n\n");
+        buffer = (_b = chunks.pop()) != null ? _b : "";
+        for (const chunk of chunks) {
+          for (const line of chunk.split("\n")) {
+            if (!line.startsWith("data: ")) continue;
+            const raw = line.slice(6).trim();
+            if (!raw) continue;
+            let data;
+            try {
+              data = JSON.parse(raw);
+            } catch (e) {
+              continue;
+            }
+            if (data.type === "text_delta" && data.delta !== void 0) {
+              updateLastAssistantMessage(data.delta);
+            } else if (data.type === "text" && data.text !== void 0) {
+              updateLastAssistantMessage(data.text);
+            } else if (data.type === "done") {
+              const tokensUsed = (_c = data.tokensUsed) != null ? _c : data.tokens_used;
+              finalizeLastAssistantMessage(tokensUsed);
+            } else if (data.type === "error") {
+              setLastAssistantError();
+            }
+          }
+        }
+      }
+      finalizeLastAssistantMessage();
+    } catch (err) {
+      console.error("[AIWidget] sendMessage error:", err);
+      setLastAssistantError();
+    } finally {
+      setStreaming(false);
+    }
+  }
+  return { sendMessage };
+}
+
+// src/components/MessageList.tsx
+import { useEffect as useEffect2, useRef } from "react";
+
+// src/components/TypingIndicator.tsx
+import { useEffect, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DOT_STYLE = {
+  width: 8,
+  height: 8,
+  borderRadius: "50%",
+  backgroundColor: "#9ca3af",
+  display: "inline-block",
+  margin: "0 2px"
+};
+function TypingIndicator() {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % 3);
+    }, 400);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "10px 14px",
+        backgroundColor: "#f3f4f6",
+        borderRadius: "16px 16px 16px 4px",
+        width: "fit-content",
+        maxWidth: 80
+      },
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx2(
+        "span",
+        {
+          style: {
+            ...DOT_STYLE,
+            opacity: frame === i ? 1 : 0.35,
+            transform: frame === i ? "translateY(-2px)" : "translateY(0)",
+            transition: "opacity 0.2s ease, transform 0.2s ease"
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/components/MessageItem.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function renderContent(text) {
+  const nodes = [];
+  const parts = text.split(/(\*\*[^*]+\*\*|\n)/g);
+  parts.forEach((part, i) => {
+    if (part.startsWith("**") && part.endsWith("**") && part.length > 4) {
+      nodes.push(/* @__PURE__ */ jsx3("strong", { children: part.slice(2, -2) }, i));
+    } else if (part === "\n") {
+      nodes.push(/* @__PURE__ */ jsx3("br", {}, i));
+    } else {
+      nodes.push(/* @__PURE__ */ jsx3("span", { children: part }, i));
+    }
+  });
+  return nodes;
+}
+function MessageItem({ message, primaryColor }) {
+  const isUser = message.role === "user";
+  const bubbleStyle = isUser ? {
+    backgroundColor: primaryColor,
+    color: "#ffffff",
+    borderRadius: "16px 16px 4px 16px",
+    padding: "10px 14px",
+    maxWidth: "75%",
+    wordBreak: "break-word",
+    fontSize: 14,
+    lineHeight: "1.5"
+  } : {
+    backgroundColor: "#f3f4f6",
+    color: "#111827",
+    borderRadius: "16px 16px 16px 4px",
+    padding: "10px 14px",
+    maxWidth: "75%",
+    wordBreak: "break-word",
+    fontSize: 14,
+    lineHeight: "1.5"
+  };
+  if (message.status === "streaming" && message.content === "") {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "flex-start",
+          marginBottom: 8
+        },
+        children: /* @__PURE__ */ jsx3(TypingIndicator, {})
+      }
+    );
+  }
+  if (message.status === "error") {
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: isUser ? "flex-end" : "flex-start",
+          marginBottom: 8
+        },
+        children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              ...bubbleStyle,
+              backgroundColor: "#fee2e2",
+              color: "#dc2626",
+              borderRadius: "16px"
+            },
+            children: "Error al procesar el mensaje. Por favor, intent\xE1 de nuevo."
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: isUser ? "flex-end" : "flex-start",
+        marginBottom: 8
+      },
+      children: /* @__PURE__ */ jsx3("div", { style: bubbleStyle, children: renderContent(message.content) })
+    }
+  );
+}
+
+// src/components/MessageList.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function MessageList({ messages, primaryColor }) {
+  const bottomRef = useRef(null);
+  useEffect2(() => {
+    var _a;
+    (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "16px 16px 8px",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        messages.length === 0 && /* @__PURE__ */ jsx4(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#9ca3af",
+              fontSize: 14,
+              textAlign: "center",
+              padding: "0 24px"
+            },
+            children: "\xBFEn qu\xE9 te puedo ayudar?"
+          }
+        ),
+        messages.map((msg) => /* @__PURE__ */ jsx4(MessageItem, { message: msg, primaryColor }, msg.id)),
+        /* @__PURE__ */ jsx4("div", { ref: bottomRef })
+      ]
+    }
+  );
+}
+
+// src/components/InputBar.tsx
+import { useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function InputBar({ onSend, isStreaming, placeholder, primaryColor }) {
+  const [value, setValue] = useState2("");
+  const textareaRef = useRef2(null);
+  function handleSend() {
+    const trimmed = value.trim();
+    if (!trimmed || isStreaming) return;
+    onSend(trimmed);
+    setValue("");
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+  function handleInput() {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 72)}px`;
+  }
+  const disabled = isStreaming || !value.trim();
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: "12px 16px",
+        borderTop: "1px solid #e5e7eb",
+        backgroundColor: "#ffffff"
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          "textarea",
+          {
+            ref: textareaRef,
+            value,
+            onChange: (e) => setValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            onInput: handleInput,
+            placeholder,
+            rows: 1,
+            disabled: isStreaming,
+            style: {
+              flex: 1,
+              resize: "none",
+              border: "1px solid #e5e7eb",
+              borderRadius: 12,
+              padding: "8px 12px",
+              fontSize: 14,
+              lineHeight: "24px",
+              outline: "none",
+              fontFamily: "inherit",
+              color: "#111827",
+              backgroundColor: isStreaming ? "#f9fafb" : "#ffffff",
+              transition: "border-color 0.15s ease",
+              overflowY: "hidden"
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = primaryColor;
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = "#e5e7eb";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            onClick: handleSend,
+            disabled,
+            "aria-label": "Enviar mensaje",
+            style: {
+              width: 36,
+              height: 36,
+              borderRadius: "50%",
+              border: "none",
+              cursor: disabled ? "not-allowed" : "pointer",
+              backgroundColor: disabled ? "#e5e7eb" : primaryColor,
+              color: "#ffffff",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "background-color 0.15s ease",
+              padding: 0
+            },
+            children: /* @__PURE__ */ jsxs3(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx5("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                  /* @__PURE__ */ jsx5("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatWindow.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChatWindow({ config }) {
+  var _a, _b, _c, _d, _e;
+  const { messages, isStreaming, setOpen } = useChatStore();
+  const { sendMessage } = useChat();
+  const title = (_a = config.title) != null ? _a : "Asistente";
+  const placeholder = (_b = config.placeholder) != null ? _b : "Escrib\xED tu mensaje...";
+  const primaryColor = (_c = config.primaryColor) != null ? _c : "#6366f1";
+  const position = (_d = config.position) != null ? _d : "bottom-right";
+  const positionStyle = position === "bottom-right" ? { right: 24, bottom: 88 } : { left: 24, bottom: 88 };
+  function handleSend(content) {
+    sendMessage(content, config);
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        ...positionStyle,
+        width: 380,
+        height: 520,
+        backgroundColor: "#ffffff",
+        borderRadius: 16,
+        boxShadow: "0 20px 60px rgba(0,0,0,0.15), 0 4px 16px rgba(0,0,0,0.08)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        zIndex: (_e = config.zIndex) != null ? _e : 9999,
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            style: {
+              backgroundColor: primaryColor,
+              color: "#ffffff",
+              padding: "16px 20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                /* @__PURE__ */ jsx6(
+                  "div",
+                  {
+                    style: {
+                      width: 32,
+                      height: 32,
+                      borderRadius: "50%",
+                      backgroundColor: "rgba(255,255,255,0.25)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx6(
+                      "svg",
+                      {
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor",
+                        children: /* @__PURE__ */ jsx6("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs4("div", { children: [
+                  /* @__PURE__ */ jsx6("div", { style: { fontWeight: 600, fontSize: 15 }, children: title }),
+                  /* @__PURE__ */ jsx6("div", { style: { fontSize: 12, opacity: 0.85 }, children: isStreaming ? "Escribiendo..." : "En l\xEDnea" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  onClick: () => setOpen(false),
+                  "aria-label": "Cerrar chat",
+                  style: {
+                    background: "none",
+                    border: "none",
+                    color: "#ffffff",
+                    cursor: "pointer",
+                    padding: 4,
+                    borderRadius: 8,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    opacity: 0.85,
+                    transition: "opacity 0.15s ease"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.opacity = "0.85";
+                  },
+                  children: /* @__PURE__ */ jsxs4(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsx6("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ jsx6("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6(MessageList, { messages, primaryColor }),
+        /* @__PURE__ */ jsx6(
+          InputBar,
+          {
+            onSend: handleSend,
+            isStreaming,
+            placeholder,
+            primaryColor
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/AIWidget.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function AIWidget(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { isOpen, setOpen } = useChatStore();
+  const [serverConfig, setServerConfig] = useState3(null);
+  const baseUrl = ((_a = props.orchestratorUrl) != null ? _a : "https://app.kayro.com.ar").replace(/\/$/, "");
+  useEffect3(() => {
+    fetch(`${baseUrl}/api/widget-config?apiKey=${encodeURIComponent(props.apiKey)}`).then((r) => r.ok ? r.json() : null).then((data) => {
+      if (data) setServerConfig(data);
+    }).catch(() => {
+    });
+  }, [props.apiKey, baseUrl]);
+  useEffect3(() => {
+    if (props.initialOpen) setOpen(true);
+  }, []);
+  const primaryColor = (_c = (_b = props.primaryColor) != null ? _b : serverConfig == null ? void 0 : serverConfig.primaryColor) != null ? _c : "#6366f1";
+  const position = (_d = props.position) != null ? _d : "bottom-right";
+  const zIndex = (_e = props.zIndex) != null ? _e : 9999;
+  const mergedConfig = {
+    ...props,
+    primaryColor,
+    title: (_f = props.title) != null ? _f : serverConfig == null ? void 0 : serverConfig.assistantName
+  };
+  function handleBubbleClick() {
+    setOpen(!isOpen);
+  }
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx7(
+      ChatBubble,
+      {
+        isOpen,
+        onClick: handleBubbleClick,
+        primaryColor,
+        position,
+        zIndex
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx7(ChatWindow, { config: mergedConfig })
+  ] });
+}
+export {
+  AIWidget
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kayro-ia/widget",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Embeddable AI chat widget for your product — powered by Kairo",
   "author": "Kairo <hola@kayro.com.ar>",
   "license": "MIT",
@@ -13,15 +13,33 @@
     "url": "https://github.com/kairo-ia/helix-monorepo/issues"
   },
   "keywords": [
-    "ai", "chatbot", "widget", "mcp", "kairo", "react", "chat", "llm", "streaming"
+    "ai",
+    "chatbot",
+    "widget",
+    "mcp",
+    "kairo",
+    "react",
+    "chat",
+    "llm",
+    "streaming"
   ],
   "sideEffects": false,
   "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "dev": "tsup src/index.tsx --watch",
-    "build": "tsup src/index.tsx --dts",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch",
+    "build": "tsup src/index.tsx --format esm,cjs --dts",
     "type-check": "tsc --noEmit"
   },
   "peerDependencies": {