chatbotlite 0.3.1 → 0.5.0

package/dist/react/index.cjs

@@ -5,8 +5,60 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/ChatWidget.tsx
 
+// src/core/tools.ts
+var MARKER_RE = /\[SKILL:(\w+)((?:\s+\w+=(?:"[^"]*"|[\w./@*+,:-]+))*)\s*\]/g;
+var ARG_RE = /(\w+)=("([^"]*)"|([\w./@*+,:-]+))/g;
+function coerce(value) {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
+  return value;
+}
+function parseToolMarkers(text) {
+  const markers = [];
+  let m;
+  MARKER_RE.lastIndex = 0;
+  while ((m = MARKER_RE.exec(text)) !== null) {
+    const name = m[1];
+    const argsRaw = m[2] ?? "";
+    const args = {};
+    let a;
+    ARG_RE.lastIndex = 0;
+    while ((a = ARG_RE.exec(argsRaw)) !== null) {
+      const key = a[1];
+      const value = a[3] ?? a[4] ?? "";
+      args[key] = coerce(value);
+    }
+    markers.push({ name, args, raw: m[0] });
+  }
+  return markers;
+}
+function stripToolMarkers(text) {
+  return text.replace(MARKER_RE, "").replace(/\s+\n/g, "\n").trim();
+}
+function buildToolsPromptAddendum(enabledTools) {
+  if (enabledTools.length === 0) return "";
+  const examples = {
+    uploadForReview: '[SKILL:uploadForReview purpose="T4 slip" accept="image/*,application/pdf" maxMb=10] \u2014 collect a document for human review (bytes go to webhook, you never see content)',
+    scheduleCallback: '[SKILL:scheduleCallback durationMin=15 timezone="America/Vancouver"] \u2014 let the user pick a callback time slot',
+    requestPayment: '[SKILL:requestPayment amount=4250 currency="cad" reason="initial deposit"] \u2014 collect payment via inline card'
+  };
+  const lines = enabledTools.filter((t) => examples[t]).map((t) => `- ${examples[t]}`);
+  if (lines.length === 0) return "";
+  return [
+    "",
+    "## Available tools",
+    "When you need one of these workflows, emit the marker INLINE in your reply.",
+    "Write a short message first, THEN the marker. The marker will be replaced by an interactive card.",
+    "Pause the conversation after emitting \u2014 wait for the tool result before continuing.",
+    "",
+    ...lines
+  ].join("\n");
+}
+
 // src/core/prompts.ts
-function buildSystemPrompt(knowledge) {
+function buildSystemPrompt(knowledge, enabledTools = []) {
+  const toolsAddendum = buildToolsPromptAddendum(enabledTools);
   return [
     "You are an AI assistant on a business website. Use ONLY the knowledge below to answer.",
     "",
@@ -19,33 +71,23 @@ function buildSystemPrompt(knowledge) {
     "- For anything not covered in the knowledge above, say the owner will follow up \u2014 do NOT guess.",
     '- 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."',
     `- If wrong number or asked to stop, say: "Sorry about that. We won't text again."`,
-    "- Match the caller's language automatically."
-  ].join("\n");
+    "- Match the caller's language automatically.",
+    toolsAddendum
+  ].filter(Boolean).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",
+  // fake booking
   "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"
+  // fake confirmation
+  "reservation confirmed",
+  "someone is on the way",
+  // false dispatch
+  "i guarantee"
+  // legal liability
 ];
 function checkForbiddenPhrases(reply) {
   const lower = reply.toLowerCase();
@@ -70,6 +112,33 @@ function stripForbidden(reply) {
   return trimmed;
 }
 
+// src/core/judges.ts
+async function runJudge(config, apiKey, endpointUrl, content, fetcher) {
+  const res = await fetcher(`${endpointUrl}/chat/completions`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      model: config.model,
+      messages: [
+        { role: "system", content: config.prompt },
+        { role: "user", content }
+      ],
+      temperature: 0,
+      max_tokens: 10
+    })
+  });
+  if (!res.ok) {
+    return { decision: "PASS", raw: `judge HTTP ${res.status} \u2014 fail-open` };
+  }
+  const data = await res.json();
+  const raw = (data.choices?.[0]?.message?.content ?? "").trim().toUpperCase();
+  const decision = raw.startsWith("BLOCK") ? "BLOCK" : "PASS";
+  return { decision, raw };
+}
+
 // src/client/types.ts
 var PROVIDER_NAMES = /* @__PURE__ */ new Set([
   "openai",
@@ -90,22 +159,34 @@ function isKnownProvider(name) {
 
 // src/client/providers.ts
 var PROVIDER_ENDPOINTS = {
-  openai: { baseUrl: "https://api.openai.com/v1", defaultModel: "gpt-4o-mini" },
+  openai: { baseUrl: "https://api.openai.com/v1", defaultModel: "gpt-4o-mini", visionModel: "gpt-4o" },
   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" },
+  groq: { baseUrl: "https://api.groq.com/openai/v1", defaultModel: "llama-3.3-70b-versatile", visionModel: "llama-3.2-90b-vision-preview" },
+  gemini: { baseUrl: "https://generativelanguage.googleapis.com/v1beta/openai", defaultModel: "gemini-2.5-flash", visionModel: "gemini-2.5-flash" },
+  anthropic: { baseUrl: "https://api.anthropic.com/v1", defaultModel: "claude-haiku-4-5", visionModel: "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" }
+  openrouter: { baseUrl: "https://openrouter.ai/api/v1", defaultModel: "deepseek/deepseek-chat", visionModel: "openai/gpt-4o" },
+  moonshot: { baseUrl: "https://api.moonshot.ai/v1", defaultModel: "moonshot-v1-32k", visionModel: "moonshot-v1-32k-vision-preview" }
 };
 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);
 }
+async function fileToDataUrl(file) {
+  const buf = new Uint8Array(await file.arrayBuffer());
+  const base64 = bufferToBase64(buf);
+  const mime = file.type || "application/octet-stream";
+  return `data:${mime};base64,${base64}`;
+}
+function bufferToBase64(buf) {
+  let bin = "";
+  for (let i = 0; i < buf.length; i++) bin += String.fromCharCode(buf[i]);
+  if (typeof btoa === "function") return btoa(bin);
+  return globalThis.Buffer.from(bin, "binary").toString("base64");
+}
 
 // src/client/chatbot.ts
 var ChatBot = class {
@@ -114,18 +195,258 @@ var ChatBot = class {
   fetcher;
   timeoutMs;
   cachedSystemPrompt;
+  guards;
+  knowledge;
   constructor(init) {
     if (!init.knowledge || typeof init.knowledge !== "string" || init.knowledge.trim().length === 0) {
       throw new Error("chatbotlite: knowledge is required (a non-empty markdown string).");
     }
+    this.knowledge = init.knowledge;
     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(init.knowledge);
+    this.guards = init.guards ?? {};
+  }
+  /** Build system prompt for given opts — uses cached if no enabledTools, else rebuilds. */
+  resolveSystemPrompt(opts) {
+    if (opts.systemPrompt) return opts.systemPrompt;
+    if (opts.enabledTools && opts.enabledTools.length > 0) {
+      return buildSystemPrompt(this.knowledge, opts.enabledTools);
+    }
+    return this.cachedSystemPrompt;
+  }
+  /** Run an LLM judge against content. Fail-open on errors. */
+  async judge(config, content) {
+    const endpoint = PROVIDER_ENDPOINTS[config.provider];
+    const key = this.keys[config.provider];
+    if (!key) {
+      return { decision: "PASS", raw: `judge provider ${config.provider} has no key \u2014 fail-open` };
+    }
+    const model = config.model ?? endpoint.defaultModel;
+    return runJudge(
+      { provider: config.provider, model, prompt: config.prompt },
+      key,
+      endpoint.baseUrl,
+      content,
+      this.fetcher
+    );
+  }
+  /**
+   * Stream a reply as SSE events. Returns a ReadableStream that yields tokens
+   * progressively. Designed to plug into Next.js/Hono/Express route handlers:
+   *
+   * ```ts
+   * export async function POST(req: Request) {
+   *   const { message, transcript } = await req.json();
+   *   const stream = await bot.replyStream(message, { history: transcript });
+   *   return new Response(stream, {
+   *     headers: { "Content-Type": "text/event-stream" }
+   *   });
+   * }
+   * ```
+   *
+   * Events emitted (one per `data:` line, SSE format):
+   *   event: token   data: "<text fragment>"
+   *   event: done    data: {"reply":"...","usedProvider":"...","usedModel":"...","attempts":[...]}
+   *   event: error   data: {"message":"...","attempts":[...]}
+   */
+  async replyStream(message, opts = {}) {
+    const systemPrompt = this.resolveSystemPrompt(opts);
+    const messages = [
+      { role: "system", content: systemPrompt },
+      ...opts.history ?? [],
+      { role: "user", content: message }
+    ];
+    const steps = this.steps;
+    const fetcher = this.fetcher;
+    const keys = this.keys;
+    const timeoutMs = this.timeoutMs;
+    const encoder = new TextEncoder();
+    const sse = (event, data) => encoder.encode(`event: ${event}
+data: ${data}
+
+`);
+    return new ReadableStream({
+      async start(controller) {
+        const attempts = [];
+        let lastError;
+        let assembled = "";
+        for (const step of steps) {
+          const t0 = Date.now();
+          const endpoint = PROVIDER_ENDPOINTS[step.provider];
+          const key = keys[step.provider];
+          if (!key) {
+            attempts.push({ provider: step.provider, model: step.model, status: "error", error: "missing key", latencyMs: 0 });
+            continue;
+          }
+          const abortCtrl = new AbortController();
+          const timer = setTimeout(() => abortCtrl.abort(), timeoutMs);
+          try {
+            const res = await 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, stream: true }),
+              signal: abortCtrl.signal
+            });
+            if (!res.ok) {
+              const body = await res.text();
+              throw new Error(`${res.status}: ${body.slice(0, 200)}`);
+            }
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            let sseBuffer = "";
+            while (true) {
+              const { done, value } = await reader.read();
+              if (done) break;
+              sseBuffer += decoder.decode(value, { stream: true });
+              const lines = sseBuffer.split("\n");
+              sseBuffer = lines.pop() ?? "";
+              for (const line of lines) {
+                const trimmed = line.trim();
+                if (!trimmed.startsWith("data:")) continue;
+                const payload = trimmed.slice(5).trim();
+                if (payload === "[DONE]") continue;
+                try {
+                  const obj = JSON.parse(payload);
+                  const delta = obj.choices?.[0]?.delta?.content ?? obj.choices?.[0]?.delta?.reasoning_content ?? "";
+                  if (delta) {
+                    assembled += delta;
+                    controller.enqueue(sse("token", JSON.stringify(delta)));
+                  }
+                } catch {
+                }
+              }
+            }
+            attempts.push({ provider: step.provider, model: step.model, status: "ok", latencyMs: Date.now() - t0 });
+            const guard = checkForbiddenPhrases(assembled);
+            const finalReply = guard.ok ? assembled : stripForbidden(assembled);
+            controller.enqueue(sse("done", JSON.stringify({
+              reply: finalReply,
+              usedProvider: step.provider,
+              usedModel: step.model,
+              guardWarnings: guard.violations,
+              attempts
+            })));
+            controller.close();
+            return;
+          } 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 });
+            assembled = "";
+            if (!isRetryableError(err)) {
+              controller.enqueue(sse("error", JSON.stringify({ message: `${step.label} failed (non-retryable): ${errMsg}`, attempts })));
+              controller.close();
+              return;
+            }
+          } finally {
+            clearTimeout(timer);
+          }
+        }
+        const summary = attempts.map((a) => `${a.provider}/${a.model}:${a.error ?? "ok"}`).join(" \u2192 ");
+        controller.enqueue(sse("error", JSON.stringify({
+          message: `all chain steps failed. Trace: ${summary}. Last error: ${lastError instanceof Error ? lastError.message : String(lastError)}`,
+          attempts
+        })));
+        controller.close();
+      }
+    });
+  }
+  /**
+   * Reply to a message with optional image attachments. Routes through vision-capable
+   * providers only — chain steps without `visionModel` are skipped (logged in attempts).
+   *
+   * Images are inlined as data: URLs. Keep total payload modest (<10MB).
+   */
+  async replyWithMedia(message, opts = {}) {
+    const images = opts.images ?? [];
+    if (images.length === 0) {
+      return this.reply(message, opts);
+    }
+    const dataUrls = await Promise.all(images.map(fileToDataUrl));
+    const systemPrompt = this.resolveSystemPrompt(opts);
+    const userContent = [];
+    if (message) userContent.push({ type: "text", text: message });
+    for (const url of dataUrls) userContent.push({ type: "image_url", image_url: { url } });
+    const messages = [
+      { role: "system", content: systemPrompt },
+      ...opts.history ?? [],
+      { role: "user", content: userContent }
+    ];
+    const attempts = [];
+    let lastError;
+    for (const step of this.steps) {
+      const endpoint = PROVIDER_ENDPOINTS[step.provider];
+      if (!endpoint.visionModel) {
+        attempts.push({ provider: step.provider, model: step.model, status: "error", error: "no vision support", latencyMs: 0 });
+        continue;
+      }
+      const t0 = Date.now();
+      const visionStep = { provider: step.provider, model: endpoint.visionModel, label: `${step.provider}/${endpoint.visionModel}` };
+      try {
+        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: visionStep.model, messages, temperature: 0.3, max_tokens: 400 }),
+            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 reply = (data.choices?.[0]?.message?.content ?? "").trim();
+          if (!reply) throw new Error("empty vision reply");
+          attempts.push({ provider: visionStep.provider, model: visionStep.model, status: "ok", latencyMs: Date.now() - t0 });
+          const guard = checkForbiddenPhrases(reply);
+          const finalReply = guard.ok ? reply : stripForbidden(reply);
+          return {
+            reply: finalReply,
+            usedProvider: visionStep.provider,
+            usedModel: visionStep.model,
+            ...data.usage ? { usage: data.usage } : {},
+            guardWarnings: guard.violations,
+            attempts
+          };
+        } finally {
+          clearTimeout(timer);
+        }
+      } catch (err) {
+        lastError = err;
+        const errMsg = err instanceof Error ? err.message : String(err);
+        attempts.push({ provider: visionStep.provider, model: visionStep.model, status: "error", error: errMsg, latencyMs: Date.now() - t0 });
+        if (!isRetryableError(err)) {
+          throw new Error(`chatbotlite: ${visionStep.label} vision failed (non-retryable). ${errMsg}`);
+        }
+      }
+    }
+    const summary = attempts.map((a) => `${a.provider}/${a.model}:${a.error ?? "ok"}`).join(" \u2192 ");
+    throw new Error(`chatbotlite: no vision-capable provider succeeded. Trace: ${summary}. Last error: ${lastError instanceof Error ? lastError.message : String(lastError)}`);
   }
   async reply(message, opts = {}) {
-    const systemPrompt = opts.systemPrompt ?? this.cachedSystemPrompt;
+    let inputVerdict;
+    if (this.guards.inputJudge) {
+      inputVerdict = await this.judge(this.guards.inputJudge, message);
+      if (inputVerdict.decision === "BLOCK") {
+        return {
+          reply: "I can't process that request. Please ask in a different way.",
+          usedProvider: this.steps[0].provider,
+          usedModel: this.steps[0].model,
+          guardWarnings: [],
+          judges: { input: inputVerdict },
+          attempts: [],
+          blockedByInputJudge: true
+        };
+      }
+    }
+    const systemPrompt = this.resolveSystemPrompt(opts);
     const messages = [
       { role: "system", content: systemPrompt },
       ...opts.history ?? [],
@@ -139,13 +460,21 @@ var ChatBot = class {
         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);
+        let finalReply = guard.ok ? result.reply : stripForbidden(result.reply);
+        let outputVerdict;
+        if (this.guards.outputJudge) {
+          outputVerdict = await this.judge(this.guards.outputJudge, finalReply);
+          if (outputVerdict.decision === "BLOCK") {
+            finalReply = "Let me check with the owner and get back to you on that.";
+          }
+        }
         return {
           reply: finalReply,
           usedProvider: step.provider,
           usedModel: step.model,
           ...result.usage ? { usage: result.usage } : {},
           guardWarnings: guard.violations,
+          ...inputVerdict || outputVerdict ? { judges: { ...inputVerdict ? { input: inputVerdict } : {}, ...outputVerdict ? { output: outputVerdict } : {} } } : {},
           attempts
         };
       } catch (err) {
@@ -230,6 +559,458 @@ function normalizeChainEntry(entry, keys) {
   }
   return { provider, model, label: `${provider}/${model}` };
 }
+var CLOUD_ICON = "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12";
+function UploadForReview(props) {
+  const {
+    purpose = "Files",
+    accept = "*",
+    maxMb = 10,
+    primary,
+    onPrimary,
+    border,
+    surface,
+    surfaceMuted,
+    textBody,
+    textMuted,
+    onSubmit,
+    onCancel,
+    submitting = false,
+    submitted = false
+  } = props;
+  const inputRef = react.useRef(null);
+  const [files, setFiles] = react.useState([]);
+  const [drag, setDrag] = react.useState(false);
+  function add(picked) {
+    const arr = Array.from(picked).filter((f) => f.size <= maxMb * 1024 * 1024);
+    setFiles((p) => [...p, ...arr]);
+  }
+  function remove(i) {
+    setFiles((p) => p.filter((_, j) => j !== i));
+  }
+  if (submitted) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "12px 16px",
+      borderRadius: 14,
+      background: surface,
+      border: `1px solid ${border}`,
+      boxShadow: "0 1px 2px rgba(15,23,42,0.04)",
+      color: textBody,
+      fontSize: 13
+    }, children: [
+      "\u2713 ",
+      files.length || 1,
+      " file",
+      files.length === 1 ? "" : "s",
+      " submitted for review."
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    padding: 16,
+    borderRadius: 14,
+    background: surface,
+    border: `1px solid ${border}`,
+    boxShadow: "0 2px 8px -2px rgba(15,23,42,0.08)"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, marginBottom: 12, fontSize: 13, fontWeight: 600, color: textBody }, children: [
+      "Upload your ",
+      purpose
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        onClick: () => inputRef.current?.click(),
+        onDragOver: (e) => {
+          e.preventDefault();
+          setDrag(true);
+        },
+        onDragLeave: () => setDrag(false),
+        onDrop: (e) => {
+          e.preventDefault();
+          setDrag(false);
+          if (e.dataTransfer.files) add(e.dataTransfer.files);
+        },
+        style: {
+          border: `1.5px dashed ${drag ? primary : border}`,
+          borderRadius: 12,
+          padding: "20px 12px",
+          textAlign: "center",
+          cursor: "pointer",
+          background: drag ? `${primary}0a` : surfaceMuted,
+          transition: "border-color 120ms ease, background 120ms ease"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", stroke: primary, strokeWidth: "1.5", style: { display: "block", margin: "0 auto 6px" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: CLOUD_ICON, strokeLinecap: "round", strokeLinejoin: "round" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, fontSize: 13, fontWeight: 500, color: textBody }, children: [
+            "Drop file",
+            maxMb > 0 ? "s" : "",
+            " here or click to browse"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: "4px 0 0", fontSize: 11, color: textMuted }, children: [
+            accept === "*" ? "Any file" : accept,
+            " \xB7 max ",
+            maxMb,
+            "MB"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              multiple: true,
+              accept,
+              style: { display: "none" },
+              onChange: (e) => {
+                if (e.target.files) add(e.target.files);
+                e.target.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 10 }, children: files.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 8px 4px 10px",
+          borderRadius: 8,
+          background: surfaceMuted,
+          border: `1px solid ${border}`,
+          fontSize: 12,
+          color: textBody,
+          maxWidth: 220
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+            "\u{1F4C4} ",
+            f.name
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => remove(i),
+              "aria-label": `Remove ${f.name}`,
+              style: { background: "transparent", border: "none", cursor: "pointer", color: textMuted, fontSize: 14, lineHeight: 1, padding: 0 },
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      `${f.name}-${i}`
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+      onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onCancel,
+          disabled: submitting,
+          style: {
+            padding: "8px 14px",
+            borderRadius: 10,
+            background: "transparent",
+            color: textMuted,
+            border: `1px solid ${border}`,
+            fontSize: 13,
+            cursor: submitting ? "default" : "pointer"
+          },
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => void onSubmit(files),
+          disabled: submitting || files.length === 0,
+          style: {
+            flex: 1,
+            padding: "9px 16px",
+            borderRadius: 10,
+            background: primary,
+            color: onPrimary,
+            border: "none",
+            fontSize: 13,
+            fontWeight: 600,
+            cursor: submitting || files.length === 0 ? "default" : "pointer",
+            opacity: submitting || files.length === 0 ? 0.4 : 1
+          },
+          children: submitting ? "Submitting\u2026" : "Submit"
+        }
+      )
+    ] })
+  ] });
+}
+function ScheduleCallback(props) {
+  const {
+    durationMin = 15,
+    timezone = "UTC",
+    primary,
+    onPrimary,
+    border,
+    surface,
+    surfaceMuted,
+    textBody,
+    textMuted,
+    getAvailableSlots,
+    onConfirm,
+    submitting = false,
+    submitted = false,
+    submittedSlot
+  } = props;
+  const [slots, setSlots] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [selected, setSelected] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    getAvailableSlots({ durationMin, timezone }).then((s) => {
+      if (cancelled) return;
+      setSlots(s);
+      setLoading(false);
+    }).catch(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [durationMin, timezone, getAvailableSlots]);
+  if (submitted && submittedSlot) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "12px 16px",
+      borderRadius: 14,
+      background: surface,
+      border: `1px solid ${border}`,
+      fontSize: 13,
+      color: textBody
+    }, children: [
+      "\u2713 Booked for ",
+      formatSlot(submittedSlot)
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    padding: 16,
+    borderRadius: 14,
+    background: surface,
+    border: `1px solid ${border}`,
+    boxShadow: "0 2px 8px -2px rgba(15,23,42,0.08)"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0, marginBottom: 12, fontSize: 13, fontWeight: 600, color: textBody }, children: [
+      "Pick a ",
+      durationMin,
+      "-minute slot"
+    ] }),
+    loading ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 12, color: textMuted }, children: "Loading availability\u2026" }) : slots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 12, color: textMuted }, children: "No slots available \u2014 the owner will follow up." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }, children: slots.map((slot) => {
+      const isSel = selected === slot;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setSelected(slot),
+          style: {
+            padding: "8px 10px",
+            borderRadius: 10,
+            fontSize: 12,
+            fontWeight: isSel ? 600 : 500,
+            cursor: "pointer",
+            background: isSel ? `${primary}0d` : surfaceMuted,
+            color: textBody,
+            border: `1px solid ${isSel ? primary : border}`,
+            transition: "border-color 120ms ease, background 120ms ease"
+          },
+          children: formatSlot(slot)
+        },
+        slot
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => {
+          if (selected) void onConfirm(selected);
+        },
+        disabled: !selected || submitting,
+        style: {
+          width: "100%",
+          marginTop: 12,
+          padding: "9px 16px",
+          borderRadius: 10,
+          background: primary,
+          color: onPrimary,
+          border: "none",
+          fontSize: 13,
+          fontWeight: 600,
+          cursor: selected && !submitting ? "pointer" : "default",
+          opacity: selected && !submitting ? 1 : 0.4
+        },
+        children: submitting ? "Booking\u2026" : "Confirm"
+      }
+    )
+  ] });
+}
+function formatSlot(iso) {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString(void 0, {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit"
+    });
+  } catch {
+    return iso;
+  }
+}
+function formatAmount(amountMinor, currency = "USD") {
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency.toUpperCase(),
+      minimumFractionDigits: 2
+    }).format(amountMinor / 100);
+  } catch {
+    return `${currency.toUpperCase()} ${(amountMinor / 100).toFixed(2)}`;
+  }
+}
+function RequestPayment(props) {
+  const {
+    amount,
+    currency = "USD",
+    reason,
+    primary,
+    border,
+    surface,
+    textBody,
+    textMuted,
+    showInterac = true,
+    stripeLink,
+    onPick,
+    submitting = false,
+    submitted = false,
+    submittedMethod
+  } = props;
+  const formatted = formatAmount(amount, currency);
+  if (submitted) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+      padding: "12px 16px",
+      borderRadius: 14,
+      background: surface,
+      border: `1px solid ${border}`,
+      fontSize: 13,
+      color: textBody
+    }, children: [
+      "\u2713 ",
+      submittedMethod === "interac" ? "Interac request sent \u2014 instructions to follow" : "Payment opened",
+      " \xB7 ",
+      formatted
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    padding: 16,
+    borderRadius: 14,
+    background: surface,
+    border: `1px solid ${border}`,
+    boxShadow: "0 2px 8px -2px rgba(15,23,42,0.08)"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13, fontWeight: 600, color: textBody }, children: reason || "Payment required" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "2px 0 0", fontSize: 20, fontWeight: 700, color: textBody, letterSpacing: "-0.01em" }, children: formatted })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      showInterac && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => void onPick("interac"),
+          disabled: submitting,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: 12,
+            borderRadius: 12,
+            background: surface,
+            border: `1px solid ${border}`,
+            cursor: submitting ? "default" : "pointer",
+            opacity: submitting ? 0.5 : 1,
+            textAlign: "left",
+            transition: "border-color 120ms ease"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.borderColor = primary;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.borderColor = border;
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              background: "#FFBE2E1f",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 18,
+              fontWeight: 700,
+              color: "#B8860B",
+              flexShrink: 0
+            }, children: "$" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13, fontWeight: 600, color: textBody }, children: "Interac e-Transfer" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "2px 0 0", fontSize: 11, color: textMuted }, children: "Instant, no fees" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => {
+            if (stripeLink) window.open(stripeLink, "_blank", "noopener");
+            void onPick("stripe");
+          },
+          disabled: submitting,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: 12,
+            borderRadius: 12,
+            background: surface,
+            border: `1px solid ${border}`,
+            cursor: submitting ? "default" : "pointer",
+            opacity: submitting ? 0.5 : 1,
+            textAlign: "left",
+            transition: "border-color 120ms ease"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.borderColor = primary;
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.borderColor = border;
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              background: "#635BFF1a",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0
+            }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#635BFF", fontSize: 14, fontWeight: 700 }, children: "\u{1F4B3}" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: 13, fontWeight: 600, color: textBody }, children: "Pay by card" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "2px 0 0", fontSize: 11, color: textMuted }, children: "Visa \xB7 Mastercard \xB7 Amex" })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
 var BOLT = "\u26A1";
 var DEFAULT_PRIMARY = "#0f172a";
 var DEFAULT_ON_PRIMARY = "#ffffff";
@@ -246,7 +1027,9 @@ var KEYFRAMES = `
 @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); }
+@keyframes chatbotlite-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
+@keyframes chatbotlite-pulse { 0%, 100% { box-shadow: 0 12px 28px -8px rgba(15,23,42,0.32), 0 4px 8px -2px rgba(15,23,42,0.12); } 50% { box-shadow: 0 14px 32px -8px rgba(15,23,42,0.36), 0 6px 12px -2px rgba(15,23,42,0.16); } }
+.chatbotlite-launcher { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1); animation: chatbotlite-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1), chatbotlite-pulse 3.6s ease-in-out 1.2s 2; }
 .chatbotlite-launcher:hover { transform: translateY(-2px) scale(1.04); }
 .chatbotlite-launcher:active { transform: translateY(0) scale(0.98); }
 .chatbotlite-close { transition: background 120ms ease; }
@@ -257,6 +1040,9 @@ var KEYFRAMES = `
 .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-cursor { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: text-bottom; margin-left: 1px; animation: chatbotlite-cursor 1s steps(1) infinite; }
+.chatbotlite-attach-btn:hover:not(:disabled), .chatbotlite-voice-btn:hover:not(:disabled) { background: ${BORDER}; }
+.chatbotlite-attach-btn:active:not(:disabled), .chatbotlite-voice-btn:active:not(:disabled) { transform: scale(0.96); }
 .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; }
@@ -283,14 +1069,105 @@ function ChatWidget(props) {
   const resolvedGreeting = greeting ?? "Hi! How can we help?";
   const primary = themeOverrides?.primary ?? DEFAULT_PRIMARY;
   const onPrimary = themeOverrides?.onPrimary ?? DEFAULT_ON_PRIMARY;
+  const attachCfg = props.attach;
+  const attachEnabled = attachCfg?.enabled === true;
+  const acceptAttr = attachCfg?.accept?.join(",");
+  const maxSizeMb = attachCfg?.maxSizeMb ?? 10;
+  const maxFiles = attachCfg?.maxFiles ?? 5;
+  const voiceCfg = props.voice;
+  const voiceEnabled = voiceCfg?.enabled === true;
+  const voiceLang = voiceCfg?.lang ?? "en-US";
+  const speechSupported = typeof window !== "undefined" && (Boolean(window.SpeechRecognition) || Boolean(window.webkitSpeechRecognition));
   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 [files, setFiles] = react.useState([]);
   const scrollRef = react.useRef(null);
   const inputRef = react.useRef(null);
+  const fileInputRef = react.useRef(null);
+  const [pendingTools, setPendingTools] = react.useState([]);
+  const tools = props.tools ?? {};
+  const [voiceListening, setVoiceListening] = react.useState(false);
+  const recognitionRef = react.useRef(null);
+  async function continueAfterTool(toolName, result) {
+    const ctxMsg = `[Tool ${toolName} result: ${JSON.stringify(result)}]`;
+    setSending(true);
+    const assistantId = `a${Date.now()}`;
+    setMessages((prev) => [...prev, { id: assistantId, role: "assistant", content: "", ts: Date.now() }]);
+    const appendToken = (tok) => {
+      setMessages(
+        (prev) => prev.map((m) => m.id === assistantId ? { ...m, content: m.content + tok } : m)
+      );
+    };
+    try {
+      const history = messages.filter((m) => m.role !== "system").map((m) => ({ role: m.role, content: m.content }));
+      const reply = isEndpointMode ? await fetchReplyFromEndpoint(ctxMsg, history, [], appendToken) : (await bot.reply(ctxMsg, { history })).reply;
+      const markers = parseToolMarkers(reply);
+      const cleanReply = stripToolMarkers(reply);
+      setMessages(
+        (prev) => prev.map((m) => m.id === assistantId ? { ...m, content: cleanReply } : m)
+      );
+      if (markers.length > 0) {
+        setPendingTools((prev) => [
+          ...prev,
+          ...markers.map((marker) => ({ messageId: assistantId, marker, status: "pending" }))
+        ]);
+      }
+    } catch (err) {
+      const errMsg = err instanceof Error ? err.message : String(err);
+      setMessages(
+        (prev) => prev.map(
+          (m) => m.id === assistantId ? { ...m, content: `Sorry \u2014 something went wrong. (${errMsg})` } : m
+        )
+      );
+    } finally {
+      setSending(false);
+    }
+  }
+  async function handleToolSubmit(toolName, idx, result) {
+    setPendingTools(
+      (prev) => prev.map((p, i) => i === idx ? { ...p, status: "submitted", result } : p)
+    );
+    await continueAfterTool(toolName, result);
+  }
+  function toggleVoice() {
+    if (!speechSupported) return;
+    if (voiceListening) {
+      recognitionRef.current?.stop();
+      return;
+    }
+    const Ctor = window.SpeechRecognition ?? window.webkitSpeechRecognition;
+    if (!Ctor) return;
+    const rec = new Ctor();
+    rec.lang = voiceLang;
+    rec.continuous = false;
+    rec.interimResults = true;
+    rec.onresult = (e) => {
+      let transcript = "";
+      for (let i = e.resultIndex; i < e.results.length; i++) {
+        transcript += e.results[i][0].transcript;
+      }
+      setInput(transcript);
+    };
+    rec.onend = () => setVoiceListening(false);
+    rec.onerror = () => setVoiceListening(false);
+    recognitionRef.current = rec;
+    setVoiceListening(true);
+    rec.start();
+  }
+  function addFiles(picked) {
+    const arr = Array.from(picked).filter((f) => f.size <= maxSizeMb * 1024 * 1024);
+    setFiles((prev) => {
+      const combined = [...prev, ...arr];
+      return combined.slice(0, maxFiles);
+    });
+  }
+  function removeFile(idx) {
+    setFiles((prev) => prev.filter((_, i) => i !== idx));
+  }
   react.useEffect(() => {
     ensureStyles();
   }, []);
@@ -311,13 +1188,71 @@ function ChatWidget(props) {
     }
     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 })
-    });
+  async function fetchReplyFromEndpoint(text, history, attachedFiles, onToken) {
+    const enabledTools = Object.keys(tools);
+    let body;
+    const headers = { Accept: "text/event-stream, application/json" };
+    if (attachedFiles.length > 0) {
+      const form = new FormData();
+      form.append("message", text);
+      form.append("transcript", JSON.stringify(history));
+      form.append("enabledTools", JSON.stringify(enabledTools));
+      for (const f of attachedFiles) form.append("attachments", f, f.name);
+      body = form;
+    } else {
+      headers["Content-Type"] = "application/json";
+      body = JSON.stringify({ message: text, transcript: history, enabledTools });
+    }
+    const res = await fetch(props.endpoint, { method: "POST", headers, body });
     if (!res.ok) throw new Error(`Endpoint ${res.status}: ${await res.text().catch(() => "")}`);
+    const contentType = res.headers.get("Content-Type") ?? "";
+    if (contentType.includes("text/event-stream") && res.body) {
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let assembled = "";
+      let lastError = null;
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const events = buffer.split("\n\n");
+        buffer = events.pop() ?? "";
+        for (const evt of events) {
+          const lines = evt.split("\n");
+          let evtName = "message";
+          let data2 = "";
+          for (const line of lines) {
+            if (line.startsWith("event:")) evtName = line.slice(6).trim();
+            else if (line.startsWith("data:")) data2 = line.slice(5).trim();
+          }
+          if (!data2) continue;
+          if (evtName === "token") {
+            try {
+              const tok = JSON.parse(data2);
+              assembled += tok;
+              onToken(tok);
+            } catch {
+            }
+          } else if (evtName === "done") {
+            try {
+              const obj = JSON.parse(data2);
+              if (obj.reply) return obj.reply;
+            } catch {
+            }
+          } else if (evtName === "error") {
+            try {
+              const obj = JSON.parse(data2);
+              lastError = obj.message ?? "stream error";
+            } catch {
+              lastError = "stream error";
+            }
+          }
+        }
+      }
+      if (lastError) throw new Error(lastError);
+      return assembled;
+    }
     const data = await res.json();
     if (data.error) throw new Error(data.error);
     if (!data.reply) throw new Error("Endpoint returned no reply.");
@@ -325,18 +1260,42 @@ function ChatWidget(props) {
   }
   async function send() {
     const text = input.trim();
-    if (!text || sending) return;
+    const attached = files;
+    if (!text && attached.length === 0 || sending) return;
     setInput("");
-    const userMsg = { id: `u${Date.now()}`, role: "user", content: text, ts: Date.now() };
+    setFiles([]);
+    const userContent = attached.length > 0 ? `${text}${text ? "\n" : ""}\u{1F4CE} ${attached.map((f) => f.name).join(", ")}` : text;
+    const userMsg = { id: `u${Date.now()}`, role: "user", content: userContent, ts: Date.now() };
     setMessages((prev) => [...prev, userMsg]);
     setSending(true);
+    const assistantId = `a${Date.now()}`;
+    setMessages((prev) => [...prev, { id: assistantId, role: "assistant", content: "", ts: Date.now() }]);
+    const appendToken = (tok) => {
+      setMessages(
+        (prev) => prev.map((m) => m.id === assistantId ? { ...m, content: m.content + tok } : m)
+      );
+    };
     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() }]);
+      const reply = isEndpointMode ? await fetchReplyFromEndpoint(text, history, attached, appendToken) : (await bot.reply(text, { history })).reply;
+      const markers = parseToolMarkers(reply);
+      const cleanReply = stripToolMarkers(reply);
+      setMessages(
+        (prev) => prev.map((m) => m.id === assistantId ? { ...m, content: cleanReply } : m)
+      );
+      if (markers.length > 0) {
+        setPendingTools((prev) => [
+          ...prev,
+          ...markers.map((marker) => ({ messageId: assistantId, marker, status: "pending" }))
+        ]);
+      }
     } 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() }]);
+      setMessages(
+        (prev) => prev.map(
+          (m) => m.id === assistantId ? { ...m, content: `Sorry \u2014 something went wrong. (${errMsg})` } : m
+        )
+      );
     } finally {
       setSending(false);
     }
@@ -450,29 +1409,122 @@ function ChatWidget(props) {
                 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
-                )),
+                messages.map((m) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, alignItems: m.role === "user" ? "flex-end" : "stretch" }, children: [
+                  m.content && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "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,
+                        sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatbotlite-cursor", "aria-hidden": "true" })
+                      ]
+                    }
+                  ),
+                  pendingTools.map((pt, originalIdx) => ({ pt, originalIdx })).filter(({ pt }) => pt.messageId === m.id).map(({ pt, originalIdx }) => {
+                    const toolCommonStyle = { className: "chatbotlite-msg", style: { alignSelf: "stretch" } };
+                    const palette = {
+                      primary,
+                      onPrimary,
+                      border: BORDER,
+                      surface: SURFACE,
+                      surfaceMuted: SURFACE_MUTED,
+                      textBody: TEXT_BODY,
+                      textMuted: TEXT_MUTED
+                    };
+                    if (pt.marker.name === "uploadForReview" && tools.uploadForReview) {
+                      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...toolCommonStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        UploadForReview,
+                        {
+                          ...palette,
+                          purpose: String(pt.marker.args.purpose ?? "files"),
+                          accept: String(pt.marker.args.accept ?? "*"),
+                          maxMb: Number(pt.marker.args.maxMb ?? 10),
+                          submitting: pt.status === "submitting",
+                          submitted: pt.status === "submitted",
+                          onSubmit: async (files2) => {
+                            setPendingTools(
+                              (prev) => prev.map((p, i) => i === originalIdx ? { ...p, status: "submitting" } : p)
+                            );
+                            try {
+                              const result = await tools.uploadForReview.handler({
+                                files: files2,
+                                purpose: String(pt.marker.args.purpose ?? "files")
+                              });
+                              await handleToolSubmit("uploadForReview", originalIdx, result);
+                            } catch (err) {
+                              setPendingTools(
+                                (prev) => prev.map((p, i) => i === originalIdx ? { ...p, status: "pending" } : p)
+                              );
+                              throw err;
+                            }
+                          }
+                        }
+                      ) }, `tool-${originalIdx}`);
+                    }
+                    if (pt.marker.name === "scheduleCallback" && tools.scheduleCallback) {
+                      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...toolCommonStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        ScheduleCallback,
+                        {
+                          ...palette,
+                          durationMin: Number(pt.marker.args.durationMin ?? 15),
+                          timezone: String(pt.marker.args.timezone ?? "UTC"),
+                          submitting: pt.status === "submitting",
+                          submitted: pt.status === "submitted",
+                          ...pt.result?.confirmedAt ? { submittedSlot: String(pt.result.confirmedAt) } : {},
+                          getAvailableSlots: tools.scheduleCallback.getAvailableSlots,
+                          onConfirm: async (slot) => {
+                            setPendingTools(
+                              (prev) => prev.map((p, i) => i === originalIdx ? { ...p, status: "submitting" } : p)
+                            );
+                            const result = await tools.scheduleCallback.onConfirm({ slot });
+                            await handleToolSubmit("scheduleCallback", originalIdx, result);
+                          }
+                        }
+                      ) }, `tool-${originalIdx}`);
+                    }
+                    if (pt.marker.name === "requestPayment" && tools.requestPayment) {
+                      return /* @__PURE__ */ jsxRuntime.jsx("div", { ...toolCommonStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        RequestPayment,
+                        {
+                          ...palette,
+                          amount: Number(pt.marker.args.amount ?? 0),
+                          currency: String(pt.marker.args.currency ?? "USD"),
+                          ...pt.marker.args.reason ? { reason: String(pt.marker.args.reason) } : {},
+                          showInterac: tools.requestPayment.showInterac ?? true,
+                          ...tools.requestPayment.stripeLink ? { stripeLink: tools.requestPayment.stripeLink } : {},
+                          submitting: pt.status === "submitting",
+                          submitted: pt.status === "submitted",
+                          ...pt.result?.method ? { submittedMethod: pt.result.method } : {},
+                          onPick: async (method) => {
+                            setPendingTools(
+                              (prev) => prev.map((p, i) => i === originalIdx ? { ...p, status: "submitting" } : p)
+                            );
+                            const amount = Number(pt.marker.args.amount ?? 0);
+                            const currency = String(pt.marker.args.currency ?? "USD");
+                            const result = await tools.requestPayment.onPick({ method, amount, currency });
+                            await handleToolSubmit("requestPayment", originalIdx, { ...result, method });
+                          }
+                        }
+                      ) }, `tool-${originalIdx}`);
+                    }
+                    return null;
+                  })
+                ] }, m.id)),
                 sending && /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -497,66 +1549,169 @@ function ChatWidget(props) {
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
             display: "flex",
+            flexDirection: "column",
             padding: 12,
             gap: 8,
             background: SURFACE,
             borderTop: `1px solid ${BORDER}`
           }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
+            files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: files.map((f, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
               {
-                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}`,
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "4px 8px 4px 10px",
+                  borderRadius: 8,
                   background: SURFACE_MUTED,
-                  fontSize: 14,
-                  fontFamily: FONT_STACK,
+                  border: `1px solid ${BORDER}`,
+                  fontSize: 12,
                   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)"
+                  maxWidth: 200
                 },
-                children: "Send"
-              }
-            )
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                    "\u{1F4CE} ",
+                    f.name
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => removeFile(i),
+                      "aria-label": `Remove ${f.name}`,
+                      style: {
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: TEXT_MUTED,
+                        fontSize: 14,
+                        lineHeight: 1,
+                        padding: 0
+                      },
+                      children: "\xD7"
+                    }
+                  )
+                ]
+              },
+              `${f.name}-${i}`
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+              attachEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    type: "file",
+                    multiple: true,
+                    accept: acceptAttr,
+                    style: { display: "none" },
+                    onChange: (e) => {
+                      if (e.target.files) addFiles(e.target.files);
+                      e.target.value = "";
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    className: "chatbotlite-attach-btn",
+                    onClick: () => fileInputRef.current?.click(),
+                    disabled: sending || files.length >= maxFiles,
+                    "aria-label": "Attach file",
+                    style: {
+                      width: 40,
+                      height: 40,
+                      borderRadius: 10,
+                      background: SURFACE_MUTED,
+                      border: `1px solid ${BORDER}`,
+                      cursor: sending || files.length >= maxFiles ? "default" : "pointer",
+                      opacity: sending || files.length >= maxFiles ? 0.4 : 1,
+                      fontSize: 16,
+                      transition: "background 120ms ease, transform 80ms ease"
+                    },
+                    children: "\u{1F4CE}"
+                  }
+                )
+              ] }),
+              voiceEnabled && speechSupported && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: "chatbotlite-voice-btn",
+                  onClick: toggleVoice,
+                  disabled: sending,
+                  "aria-label": voiceListening ? "Stop recording" : "Start voice input",
+                  style: {
+                    width: 40,
+                    height: 40,
+                    borderRadius: 10,
+                    background: voiceListening ? primary : SURFACE_MUTED,
+                    color: voiceListening ? onPrimary : TEXT_BODY,
+                    border: `1px solid ${voiceListening ? primary : BORDER}`,
+                    cursor: sending ? "default" : "pointer",
+                    opacity: sending ? 0.4 : 1,
+                    fontSize: 16,
+                    transition: "background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease"
+                  },
+                  children: "\u{1F399}\uFE0F"
+                }
+              ),
+              /* @__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() && files.length === 0,
+                  "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() && files.length === 0 ? "default" : "pointer",
+                    opacity: sending || !input.trim() && files.length === 0 ? 0.4 : 1,
+                    boxShadow: "0 2px 6px -1px rgba(15,23,42,0.18)"
+                  },
+                  children: "Send"
+                }
+              )
+            ] })
           ] }),
           showBranding && /* @__PURE__ */ jsxRuntime.jsxs(
             "a",