@kayro-ia/widget 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kairo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# @kayro-ia/widget
+
+Embeddable AI chat widget for your product — powered by [Kairo](https://kayro.com.ar).
+
+Add a fully functional AI assistant to your app in 3 lines of code.
+
+## Installation
+
+```bash
+npm install @kayro-ia/widget
+```
+
+## Quick start
+
+```tsx
+import { AIWidget } from '@kayro-ia/widget'
+
+export default function App() {
+  return (
+    <AIWidget
+      apiKey="your_api_key"
+      orchestratorUrl="https://kayro.com.ar"
+    />
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `apiKey` | `string` | ✅ | — | Your Kairo API key |
+| `orchestratorUrl` | `string` | ✅ | — | Kairo orchestrator base URL |
+| `title` | `string` | | `"Asistente"` | Chat window header title |
+| `placeholder` | `string` | | `"Escribí tu mensaje..."` | Input placeholder |
+| `primaryColor` | `string` | | `"#6366f1"` | Accent color (bubble + user messages) |
+| `position` | `"bottom-right" \| "bottom-left"` | | `"bottom-right"` | Widget position |
+| `initialOpen` | `boolean` | | `false` | Open the chat window on load |
+| `zIndex` | `number` | | `9999` | CSS z-index |
+| `userToken` | `string` | | — | End-user auth token (forwarded to your MCP server) |
+| `authHeaders` | `Record<string, string>` | | — | Extra headers forwarded to your MCP server |
+| `userId` | `string` | | — | End-user ID (for analytics) |
+| `userName` | `string` | | — | End-user display name |
+
+## Requirements
+
+- React 18+
+- Modern browser (Chrome 92+, Firefox 90+, Safari 15+)
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -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

@@ -0,0 +1,717 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  AIWidget: () => AIWidget
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AIWidget.tsx
+var import_react4 = require("react");
+
+// src/store/chatStore.ts
+var import_zustand = require("zustand");
+var useChatStore = (0, import_zustand.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
+var import_jsx_runtime = (
+  // Close (×) icon
+  require("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__ */ (0, import_jsx_runtime.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 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "svg",
+        {
+          width: "22",
+          height: "22",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ]
+        }
+      ) : (
+        // Chat bubble icon
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "svg",
+          {
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.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
+var import_react2 = require("react");
+
+// src/components/TypingIndicator.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("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] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % 3);
+    }, 400);
+    return () => clearInterval(interval);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "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__ */ (0, import_jsx_runtime2.jsx)(
+        "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
+var import_jsx_runtime3 = require("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__ */ (0, import_jsx_runtime3.jsx)("strong", { children: part.slice(2, -2) }, i));
+    } else if (part === "\n") {
+      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("br", {}, i));
+    } else {
+      nodes.push(/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "flex-start",
+          marginBottom: 8
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TypingIndicator, {})
+      }
+    );
+  }
+  if (message.status === "error") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: isUser ? "flex-end" : "flex-start",
+          marginBottom: 8
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            style: {
+              ...bubbleStyle,
+              backgroundColor: "#fee2e2",
+              color: "#dc2626",
+              borderRadius: "16px"
+            },
+            children: "Error al procesar el mensaje. Por favor, intent\xE1 de nuevo."
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        justifyContent: isUser ? "flex-end" : "flex-start",
+        marginBottom: 8
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: bubbleStyle, children: renderContent(message.content) })
+    }
+  );
+}
+
+// src/components/MessageList.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function MessageList({ messages, primaryColor }) {
+  const bottomRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    var _a;
+    (_a = bottomRef.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      style: {
+        flex: 1,
+        overflowY: "auto",
+        padding: "16px 16px 8px",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "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__ */ (0, import_jsx_runtime4.jsx)(MessageItem, { message: msg, primaryColor }, msg.id)),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: bottomRef })
+      ]
+    }
+  );
+}
+
+// src/components/InputBar.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function InputBar({ onSend, isStreaming, placeholder, primaryColor }) {
+  const [value, setValue] = (0, import_react3.useState)("");
+  const textareaRef = (0, import_react3.useRef)(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__ */ (0, import_jsx_runtime5.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "flex-end",
+        gap: 8,
+        padding: "12px 16px",
+        borderTop: "1px solid #e5e7eb",
+        backgroundColor: "#ffffff"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "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__ */ (0, import_jsx_runtime5.jsx)(
+          "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__ */ (0, import_jsx_runtime5.jsxs)(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ChatWindow.tsx
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)(
+    "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__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            style: {
+              backgroundColor: primaryColor,
+              color: "#ffffff",
+              padding: "16px 20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                  "div",
+                  {
+                    style: {
+                      width: 32,
+                      height: 32,
+                      borderRadius: "50%",
+                      backgroundColor: "rgba(255,255,255,0.25)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      "svg",
+                      {
+                        width: "16",
+                        height: "16",
+                        viewBox: "0 0 24 24",
+                        fill: "currentColor",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontWeight: 600, fontSize: 15 }, children: title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { fontSize: 12, opacity: 0.85 }, children: isStreaming ? "Escribiendo..." : "En l\xEDnea" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "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__ */ (0, import_jsx_runtime6.jsxs)(
+                    "svg",
+                    {
+                      width: "20",
+                      height: "20",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                      ]
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageList, { messages, primaryColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          InputBar,
+          {
+            onSend: handleSend,
+            isStreaming,
+            placeholder,
+            primaryColor
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/AIWidget.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function AIWidget(props) {
+  var _a, _b, _c;
+  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;
+  (0, import_react4.useEffect)(() => {
+    if (props.initialOpen) {
+      setOpen(true);
+    }
+  }, []);
+  function handleBubbleClick() {
+    setOpen(!isOpen);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ChatBubble,
+      {
+        isOpen,
+        onClick: handleBubbleClick,
+        primaryColor,
+        position,
+        zIndex
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatWindow, { config: props })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AIWidget
+});

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@kayro-ia/widget",
+  "version": "1.0.0",
+  "description": "Embeddable AI chat widget for your product — powered by Kairo",
+  "author": "Kairo <hola@kayro.com.ar>",
+  "license": "MIT",
+  "homepage": "https://kayro.com.ar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kairo-ia/helix-monorepo"
+  },
+  "bugs": {
+    "url": "https://github.com/kairo-ia/helix-monorepo/issues"
+  },
+  "keywords": [
+    "ai", "chatbot", "widget", "mcp", "kairo", "react", "chat", "llm", "streaming"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "dev": "tsup src/index.tsx --watch",
+    "build": "tsup src/index.tsx --dts",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "zustand": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  }
+}