chatbotlite 0.0.1 → 0.2.0

package/dist/react/index.cjs

@@ -0,0 +1,657 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/ChatWidget.tsx
+
+// src/core/prompts.ts
+function buildSystemPrompt(business) {
+  const parts = [];
+  parts.push(`You are an AI receptionist for ${business.name}.`);
+  if (business.description) parts.push(business.description);
+  parts.push("");
+  if (business.services && business.services.length > 0) {
+    parts.push("Services offered (only these \u2014 do not invent others):");
+    for (const s of business.services) {
+      const price = s.price ? ` \u2014 ${s.price}` : "";
+      const notes = s.notes ? ` (${s.notes})` : "";
+      parts.push(`- ${s.name}${price}${notes}`);
+    }
+    parts.push("");
+  }
+  if (business.hours) {
+    parts.push(`Hours: ${business.hours}`);
+  }
+  if (business.serviceArea && business.serviceArea.length > 0) {
+    parts.push(`Service area: ${business.serviceArea.join(", ")}.`);
+    parts.push("If the caller is outside this area, say so and recommend owner review.");
+  }
+  if (business.policies && business.policies.length > 0) {
+    parts.push("");
+    parts.push("Known policies (use these exact answers when asked):");
+    for (const p of business.policies) {
+      parts.push(`- ${p.topic}: ${p.answer}`);
+    }
+  }
+  parts.push("");
+  parts.push("Rules:");
+  parts.push("- Reply in 1-2 short sentences, conversational tone.");
+  parts.push("- NEVER invent prices, availability, dispatch times, or appointment confirmations.");
+  parts.push("- For anything not covered in the setup above, say it needs owner review.");
+  parts.push('- If the caller is clearly a vendor/sales pitch, say: "This does not look like a customer service request, so we will not continue this thread."');
+  parts.push(`- If wrong number or asked to stop, say: "Sorry about that. We won't text again."`);
+  if (business.doNotPromise && business.doNotPromise.length > 0) {
+    parts.push("");
+    parts.push("Never promise:");
+    for (const p of business.doNotPromise) parts.push(`- ${p}`);
+  }
+  if (business.customInstructions) {
+    parts.push("");
+    parts.push("Additional instructions:");
+    parts.push(business.customInstructions);
+  }
+  if (business.language && business.language !== "en") {
+    parts.push("");
+    parts.push(`Reply in ${business.language}.`);
+  }
+  return parts.join("\n");
+}
+
+// src/core/guards.ts
+var FORBIDDEN_PHRASES = [
+  "help is coming",
+  "someone is on the way",
+  "technician is on the way",
+  "provider is on the way",
+  "dispatching someone",
+  "i've booked",
+  "i have booked",
+  "reservation confirmed",
+  "your appointment is confirmed",
+  "i've scheduled",
+  "i have scheduled",
+  "we've dispatched",
+  "we have dispatched",
+  "i can confirm",
+  "i guarantee",
+  "guaranteed delivery",
+  "guaranteed arrival",
+  "will arrive at",
+  "arriving at",
+  "i'll send",
+  "i will send"
+];
+function checkForbiddenPhrases(reply) {
+  const lower = reply.toLowerCase();
+  const violations = [];
+  for (const phrase of FORBIDDEN_PHRASES) {
+    if (lower.includes(phrase)) {
+      violations.push(`Forbidden phrase: "${phrase}"`);
+    }
+  }
+  return { ok: violations.length === 0, violations };
+}
+function stripForbidden(reply) {
+  const sentences = reply.split(/(?<=[.!?])\s+/);
+  const kept = sentences.filter((s) => {
+    const lower = s.toLowerCase();
+    return !FORBIDDEN_PHRASES.some((p) => lower.includes(p));
+  });
+  const trimmed = kept.join(" ").trim();
+  if (trimmed.length < 10) {
+    return "Thanks for reaching out \u2014 let me check with the owner and get back to you.";
+  }
+  return trimmed;
+}
+
+// src/client/types.ts
+var PROVIDER_NAMES = /* @__PURE__ */ new Set([
+  "openai",
+  "deepseek",
+  "groq",
+  "gemini",
+  "anthropic",
+  "cerebras",
+  "sambanova",
+  "fireworks",
+  "mistral",
+  "openrouter",
+  "moonshot"
+]);
+function parseChainSpec(spec) {
+  const slash = spec.indexOf("/");
+  if (slash === -1) {
+    if (!PROVIDER_NAMES.has(spec)) {
+      throw new Error(`chatbotlite: unknown provider "${spec}". Use "provider/model" or a known provider name.`);
+    }
+    return { provider: spec, model: null };
+  }
+  const provider = spec.slice(0, slash);
+  const model = spec.slice(slash + 1);
+  if (!PROVIDER_NAMES.has(provider)) {
+    throw new Error(`chatbotlite: unknown provider "${provider}" in chain spec "${spec}".`);
+  }
+  if (!model) {
+    throw new Error(`chatbotlite: empty model name in chain spec "${spec}".`);
+  }
+  return { provider, model };
+}
+function isKnownProvider(name) {
+  return PROVIDER_NAMES.has(name);
+}
+
+// src/client/providers.ts
+var PROVIDER_ENDPOINTS = {
+  openai: { baseUrl: "https://api.openai.com/v1", defaultModel: "gpt-4o-mini" },
+  deepseek: { baseUrl: "https://api.deepseek.com/v1", defaultModel: "deepseek-chat" },
+  groq: { baseUrl: "https://api.groq.com/openai/v1", defaultModel: "llama-3.3-70b-versatile" },
+  gemini: { baseUrl: "https://generativelanguage.googleapis.com/v1beta/openai", defaultModel: "gemini-2.5-flash" },
+  anthropic: { baseUrl: "https://api.anthropic.com/v1", defaultModel: "claude-haiku-4-5" },
+  cerebras: { baseUrl: "https://api.cerebras.ai/v1", defaultModel: "qwen-3-235b-a22b-instruct-2507" },
+  sambanova: { baseUrl: "https://api.sambanova.ai/v1", defaultModel: "Meta-Llama-3.3-70B-Instruct" },
+  fireworks: { baseUrl: "https://api.fireworks.ai/inference/v1", defaultModel: "accounts/fireworks/models/llama-v3p3-70b-instruct" },
+  mistral: { baseUrl: "https://api.mistral.ai/v1", defaultModel: "mistral-small-latest" },
+  openrouter: { baseUrl: "https://openrouter.ai/api/v1", defaultModel: "deepseek/deepseek-chat" },
+  moonshot: { baseUrl: "https://api.moonshot.ai/v1", defaultModel: "moonshot-v1-32k" }
+};
+function isRetryableError(err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  return /\b(429|rate.?limit|quota|exceed|5\d\d|timeout|ECONNRESET|fetch failed)\b/i.test(msg);
+}
+
+// src/client/chatbot.ts
+var ChatBot = class {
+  business;
+  steps;
+  keys;
+  fetcher;
+  timeoutMs;
+  cachedSystemPrompt;
+  constructor(init) {
+    this.business = init.business;
+    this.keys = init.providers.keys ?? {};
+    this.steps = resolveChain(init.providers);
+    this.fetcher = init.options?.fetch ?? globalThis.fetch.bind(globalThis);
+    this.timeoutMs = init.options?.timeoutMs ?? 3e4;
+    this.cachedSystemPrompt = buildSystemPrompt(this.business);
+  }
+  async reply(message, opts = {}) {
+    const systemPrompt = opts.systemPrompt ?? this.cachedSystemPrompt;
+    const messages = [
+      { role: "system", content: systemPrompt },
+      ...opts.history ?? [],
+      { role: "user", content: message }
+    ];
+    const attempts = [];
+    let lastError;
+    for (const step of this.steps) {
+      const t0 = Date.now();
+      try {
+        const result = await this.callProvider(step, messages);
+        attempts.push({ provider: step.provider, model: step.model, status: "ok", latencyMs: Date.now() - t0 });
+        const guard = checkForbiddenPhrases(result.reply);
+        const finalReply = guard.ok ? result.reply : stripForbidden(result.reply);
+        return {
+          reply: finalReply,
+          usedProvider: step.provider,
+          usedModel: step.model,
+          ...result.usage ? { usage: result.usage } : {},
+          guardWarnings: guard.violations,
+          attempts
+        };
+      } catch (err) {
+        lastError = err;
+        const errMsg = err instanceof Error ? err.message : String(err);
+        attempts.push({
+          provider: step.provider,
+          model: step.model,
+          status: "error",
+          error: errMsg,
+          latencyMs: Date.now() - t0
+        });
+        if (!isRetryableError(err)) {
+          throw new Error(`chatbotlite: ${step.provider}/${step.model} failed (non-retryable). ${errMsg}`);
+        }
+      }
+    }
+    const summary = attempts.map((a) => `${a.provider}/${a.model}:${a.error ?? "ok"}`).join(" \u2192 ");
+    throw new Error(`chatbotlite: all chain steps failed. Trace: ${summary}. Last error: ${lastError instanceof Error ? lastError.message : String(lastError)}`);
+  }
+  async callProvider(step, messages) {
+    const endpoint = PROVIDER_ENDPOINTS[step.provider];
+    const key = this.keys[step.provider];
+    if (!key) throw new Error(`Missing API key for provider: ${step.provider}`);
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), this.timeoutMs);
+    try {
+      const res = await this.fetcher(`${endpoint.baseUrl}/chat/completions`, {
+        method: "POST",
+        headers: {
+          "Authorization": `Bearer ${key}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          model: step.model,
+          messages,
+          temperature: 0.3,
+          max_tokens: 300
+        }),
+        signal: controller.signal
+      });
+      if (!res.ok) {
+        const body = await res.text();
+        throw new Error(`${res.status}: ${body.slice(0, 200)}`);
+      }
+      const data = await res.json();
+      const msg = data.choices?.[0]?.message;
+      const reply = (msg?.content?.trim() || msg?.reasoning_content?.trim()) ?? "";
+      if (!reply) throw new Error("empty reply from provider");
+      const result = { reply };
+      if (data.usage) result.usage = data.usage;
+      return result;
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+};
+function resolveChain(providers) {
+  const keys = providers.keys ?? {};
+  const explicit = providers.chain;
+  if (explicit && explicit.length > 0) {
+    return explicit.map((entry) => normalizeChainEntry(entry, keys));
+  }
+  const orderedProviders = Object.keys(keys).filter((k) => isKnownProvider(k) && keys[k]);
+  if (orderedProviders.length === 0) {
+    throw new Error("chatbotlite: at least one provider key is required.");
+  }
+  return orderedProviders.map((provider) => ({
+    provider,
+    model: PROVIDER_ENDPOINTS[provider].defaultModel,
+    spec: `${provider}/${PROVIDER_ENDPOINTS[provider].defaultModel}`
+  }));
+}
+function normalizeChainEntry(entry, keys) {
+  let provider;
+  let model;
+  let spec;
+  if (typeof entry === "string") {
+    const parsed = parseChainSpec(entry);
+    provider = parsed.provider;
+    model = parsed.model ?? PROVIDER_ENDPOINTS[provider].defaultModel;
+    spec = entry;
+  } else {
+    if (!isKnownProvider(entry.provider)) {
+      throw new Error(`chatbotlite: unknown provider "${entry.provider}" in chain entry.`);
+    }
+    provider = entry.provider;
+    model = entry.model ?? PROVIDER_ENDPOINTS[provider].defaultModel;
+    spec = `${provider}/${model}`;
+  }
+  if (!keys[provider]) {
+    throw new Error(`chatbotlite: chain step "${spec}" needs a key for provider "${provider}" but none was provided.`);
+  }
+  return { provider, model, spec };
+}
+var BOLT = "\u26A1";
+var DEFAULT_PRIMARY = "#0f172a";
+var DEFAULT_ON_PRIMARY = "#ffffff";
+var SURFACE = "#ffffff";
+var SURFACE_MUTED = "#fafbfc";
+var BORDER = "#e5e7eb";
+var TEXT_BODY = "#0f172a";
+var TEXT_MUTED = "#64748b";
+var TEXT_FAINT = "#94a3b8";
+var FONT_STACK = `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`;
+var STYLE_TAG_ID = "chatbotlite-widget-styles";
+var KEYFRAMES = `
+@keyframes chatbotlite-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
+@keyframes chatbotlite-slide { 0% { opacity: 0; transform: translateY(16px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes chatbotlite-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes chatbotlite-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
+.chatbotlite-launcher { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1); }
+.chatbotlite-launcher:hover { transform: translateY(-2px) scale(1.04); }
+.chatbotlite-launcher:active { transform: translateY(0) scale(0.98); }
+.chatbotlite-close { transition: background 120ms ease; }
+.chatbotlite-close:hover { background: rgba(255,255,255,0.16); }
+.chatbotlite-send { transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease; }
+.chatbotlite-send:not(:disabled):hover { transform: translateY(-1px); }
+.chatbotlite-send:not(:disabled):active { transform: translateY(0); }
+.chatbotlite-input:focus { box-shadow: 0 0 0 3px rgba(15,23,42,0.06); }
+.chatbotlite-msg { animation: chatbotlite-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1); }
+.chatbotlite-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: ${TEXT_FAINT}; margin-right: 4px; animation: chatbotlite-dot 1.2s ease-in-out infinite; }
+.chatbotlite-dot:nth-child(2) { animation-delay: 0.15s; }
+.chatbotlite-dot:nth-child(3) { animation-delay: 0.3s; margin-right: 0; }
+.chatbotlite-brand:hover { color: ${TEXT_MUTED} !important; }
+`;
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_TAG_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_TAG_ID;
+  style.textContent = KEYFRAMES;
+  document.head.appendChild(style);
+}
+function ChatWidget(props) {
+  const {
+    theme: themeOverrides,
+    title,
+    subtitle,
+    greeting,
+    showBranding = true,
+    position = "bottom-right"
+  } = props;
+  const isEndpointMode = "endpoint" in props && typeof props.endpoint === "string";
+  const resolvedTitle = title ?? props.business?.name ?? "Chat";
+  const resolvedGreeting = greeting ?? (props.business ? `Hi! I'm here for ${props.business.name}. How can we help?` : "Hi! How can we help?");
+  const primary = themeOverrides?.primary ?? DEFAULT_PRIMARY;
+  const onPrimary = themeOverrides?.onPrimary ?? DEFAULT_ON_PRIMARY;
+  const [open, setOpen] = react.useState(false);
+  const [messages, setMessages] = react.useState([
+    { id: "g0", role: "assistant", content: resolvedGreeting, ts: Date.now() }
+  ]);
+  const [input, setInput] = react.useState("");
+  const [sending, setSending] = react.useState(false);
+  const scrollRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    ensureStyles();
+  }, []);
+  const bot = react.useMemo(() => {
+    if (isEndpointMode) return null;
+    if (!props.business || !props.providers) return null;
+    return new ChatBot({ business: props.business, providers: props.providers });
+  }, [isEndpointMode, props.business, props.providers]);
+  react.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, sending, open]);
+  react.useEffect(() => {
+    if (open && inputRef.current) {
+      const t = setTimeout(() => inputRef.current?.focus(), 240);
+      return () => clearTimeout(t);
+    }
+    return void 0;
+  }, [open]);
+  async function fetchReplyFromEndpoint(text, history) {
+    const res = await fetch(props.endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ message: text, transcript: history })
+    });
+    if (!res.ok) throw new Error(`Endpoint ${res.status}: ${await res.text().catch(() => "")}`);
+    const data = await res.json();
+    if (data.error) throw new Error(data.error);
+    if (!data.reply) throw new Error("Endpoint returned no reply.");
+    return data.reply;
+  }
+  async function send() {
+    const text = input.trim();
+    if (!text || sending) return;
+    setInput("");
+    const userMsg = { id: `u${Date.now()}`, role: "user", content: text, ts: Date.now() };
+    setMessages((prev) => [...prev, userMsg]);
+    setSending(true);
+    try {
+      const history = messages.filter((m) => m.role !== "system").map((m) => ({ role: m.role, content: m.content }));
+      const reply = isEndpointMode ? await fetchReplyFromEndpoint(text, history) : (await bot.reply(text, { history })).reply;
+      setMessages((prev) => [...prev, { id: `a${Date.now()}`, role: "assistant", content: reply, ts: Date.now() }]);
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : String(err);
+      setMessages((prev) => [...prev, { id: `e${Date.now()}`, role: "assistant", content: `Sorry \u2014 something went wrong. (${errMsg})`, ts: Date.now() }]);
+    } finally {
+      setSending(false);
+    }
+  }
+  const launcherPos = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  const panelPos = position === "bottom-left" ? { left: 20 } : { right: 20 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !open && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: "chatbotlite-launcher",
+        onClick: () => setOpen(true),
+        "aria-label": "Open chat",
+        style: {
+          position: "fixed",
+          bottom: 20,
+          ...launcherPos,
+          width: 60,
+          height: 60,
+          borderRadius: 18,
+          background: primary,
+          color: onPrimary,
+          border: "none",
+          fontSize: 28,
+          lineHeight: 1,
+          cursor: "pointer",
+          boxShadow: "0 12px 28px -8px rgba(15,23,42,0.32), 0 4px 8px -2px rgba(15,23,42,0.12)",
+          zIndex: 99999,
+          animation: "chatbotlite-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" }, children: BOLT })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-label": "Chat",
+        style: {
+          position: "fixed",
+          bottom: 20,
+          ...panelPos,
+          width: 380,
+          maxWidth: "calc(100vw - 40px)",
+          height: 580,
+          maxHeight: "calc(100vh - 40px)",
+          background: SURFACE,
+          color: TEXT_BODY,
+          borderRadius: 20,
+          boxShadow: "0 24px 60px -16px rgba(15,23,42,0.32), 0 8px 24px -8px rgba(15,23,42,0.12), 0 0 0 1px rgba(15,23,42,0.04)",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          fontFamily: FONT_STACK,
+          zIndex: 99999,
+          animation: "chatbotlite-slide 280ms cubic-bezier(0.16, 1, 0.3, 1)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { style: {
+            padding: "16px 18px",
+            background: primary,
+            color: onPrimary,
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: 12
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", lineHeight: 1.2, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: resolvedTitle }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, opacity: 0.7, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "chatbotlite-close",
+                onClick: () => setOpen(false),
+                "aria-label": "Close chat",
+                style: {
+                  background: "transparent",
+                  border: "none",
+                  color: onPrimary,
+                  width: 32,
+                  height: 32,
+                  borderRadius: 10,
+                  fontSize: 22,
+                  lineHeight: 1,
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  flexShrink: 0
+                },
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: scrollRef,
+              style: {
+                flex: 1,
+                overflowY: "auto",
+                padding: "16px 14px",
+                display: "flex",
+                flexDirection: "column",
+                gap: 8,
+                background: SURFACE_MUTED
+              },
+              children: [
+                messages.map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "chatbotlite-msg",
+                    style: {
+                      alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+                      maxWidth: "82%",
+                      padding: "9px 13px",
+                      borderRadius: m.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
+                      background: m.role === "user" ? primary : SURFACE,
+                      color: m.role === "user" ? onPrimary : TEXT_BODY,
+                      border: m.role === "user" ? "none" : `1px solid ${BORDER}`,
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      letterSpacing: "-0.005em",
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
+                      boxShadow: m.role === "user" ? "0 1px 2px rgba(15,23,42,0.12)" : "0 1px 2px rgba(15,23,42,0.04)"
+                    },
+                    children: m.content
+                  },
+                  m.id
+                )),
+                sending && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "chatbotlite-msg",
+                    style: {
+                      alignSelf: "flex-start",
+                      padding: "12px 14px",
+                      borderRadius: "18px 18px 18px 4px",
+                      background: SURFACE,
+                      border: `1px solid ${BORDER}`,
+                      boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatbotlite-dot" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatbotlite-dot" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatbotlite-dot" })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+            display: "flex",
+            padding: 12,
+            gap: 8,
+            background: SURFACE,
+            borderTop: `1px solid ${BORDER}`
+          }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                className: "chatbotlite-input",
+                type: "text",
+                value: input,
+                onChange: (e) => setInput(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    void send();
+                  }
+                },
+                placeholder: "Type a message\u2026",
+                disabled: sending,
+                style: {
+                  flex: 1,
+                  padding: "10px 14px",
+                  borderRadius: 12,
+                  border: `1px solid ${BORDER}`,
+                  background: SURFACE_MUTED,
+                  fontSize: 14,
+                  fontFamily: FONT_STACK,
+                  color: TEXT_BODY,
+                  outline: "none",
+                  transition: "box-shadow 120ms ease, border-color 120ms ease"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "chatbotlite-send",
+                onClick: () => void send(),
+                disabled: sending || !input.trim(),
+                "aria-label": "Send message",
+                style: {
+                  padding: "0 16px",
+                  height: 40,
+                  minWidth: 64,
+                  borderRadius: 12,
+                  background: primary,
+                  color: onPrimary,
+                  border: "none",
+                  fontSize: 14,
+                  fontWeight: 600,
+                  fontFamily: FONT_STACK,
+                  cursor: sending || !input.trim() ? "default" : "pointer",
+                  opacity: sending || !input.trim() ? 0.4 : 1,
+                  boxShadow: "0 2px 6px -1px rgba(15,23,42,0.18)"
+                },
+                children: "Send"
+              }
+            )
+          ] }),
+          showBranding && /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              className: "chatbotlite-brand",
+              href: "https://github.com/agents-io/chatbotlite",
+              target: "_blank",
+              rel: "noreferrer",
+              style: {
+                padding: "8px 12px",
+                fontSize: 11,
+                fontWeight: 500,
+                color: TEXT_FAINT,
+                textAlign: "center",
+                textDecoration: "none",
+                background: SURFACE,
+                borderTop: `1px solid ${BORDER}`,
+                letterSpacing: "0.01em",
+                transition: "color 120ms ease"
+              },
+              children: [
+                BOLT,
+                " Powered by chatbotlite"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+exports.ChatWidget = ChatWidget;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map