dewee-webchat 0.0.0-stage → 0.1.0

package/dist/chunk-RGAYYTL7.js

@@ -0,0 +1,1265 @@
+import {
+  HEADER_GATEWAY_TOKEN,
+  HEADER_GATEWAY_URL
+} from "./chunk-MKTHKYLY.js";
+
+// src/widget/api-client.ts
+var ApiError = class extends Error {
+  constructor(message, status, code) {
+    super(message);
+    this.status = status;
+    this.code = code;
+  }
+  status;
+  code;
+};
+var store = {
+  get(k) {
+    try {
+      return localStorage.getItem(k);
+    } catch {
+      return null;
+    }
+  },
+  set(k, v) {
+    try {
+      localStorage.setItem(k, v);
+    } catch {
+    }
+  },
+  del(k) {
+    try {
+      localStorage.removeItem(k);
+    } catch {
+    }
+  }
+};
+var ApiClient = class {
+  constructor(o) {
+    this.o = o;
+  }
+  o;
+  session = null;
+  config = null;
+  sessionPromise = null;
+  url(action, qs) {
+    const base = this.o.endpoint.replace(/\/+$/, "");
+    const q = qs ? "?" + new URLSearchParams(qs).toString() : "";
+    return `${base}/${action}${q}`;
+  }
+  get storageKey() {
+    return `dewee-webchat:session:${this.o.endpoint}`;
+  }
+  headers(auth = false) {
+    const h = { "content-type": "application/json" };
+    if (this.o.gatewayUrl && this.o.gatewayToken) {
+      h[HEADER_GATEWAY_URL] = this.o.gatewayUrl;
+      h[HEADER_GATEWAY_TOKEN] = this.o.gatewayToken;
+    }
+    if (auth && this.session) h.authorization = `Bearer ${this.session.token}`;
+    return h;
+  }
+  async parse(res) {
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new ApiError(body?.error?.message || `HTTP ${res.status}`, res.status, body?.error?.code);
+    return body;
+  }
+  async getConfig(force = false) {
+    if (this.config && !force) return this.config;
+    this.config = await this.parse(await fetch(this.url("config"), { headers: this.headers() }));
+    return this.config;
+  }
+  /** Returns a valid visitor session, creating or refreshing it when needed. */
+  ensureSession() {
+    if (this.session && this.session.expiresAt - Date.now() > 864e5) return Promise.resolve(this.session);
+    if (!this.session) {
+      const saved = store.get(this.storageKey);
+      if (saved) {
+        try {
+          const s = JSON.parse(saved);
+          if (s.expiresAt - Date.now() > 864e5) return Promise.resolve(this.session = s);
+          this.session = s;
+        } catch {
+        }
+      }
+    }
+    return this.sessionPromise ??= this.createSession().finally(() => this.sessionPromise = null);
+  }
+  async createSession() {
+    const cfg = await this.getConfig();
+    const body = {};
+    if (this.session?.token) body.token = this.session.token;
+    if (cfg.turnstileSiteKey) {
+      if (!this.o.turnstile) throw new ApiError("Verification is required but no Turnstile handler is set", 403, "turnstile_required");
+      body.turnstileToken = await this.o.turnstile(cfg.turnstileSiteKey);
+    }
+    const s = await this.parse(
+      await fetch(this.url("session"), { method: "POST", headers: this.headers(), body: JSON.stringify(body) })
+    );
+    this.session = s;
+    store.set(this.storageKey, JSON.stringify(s));
+    return s;
+  }
+  forgetSession() {
+    this.session = null;
+    store.del(this.storageKey);
+  }
+  async history(agent, conversationId) {
+    await this.ensureSession();
+    const res = await fetch(this.url("history", { agent, conversationId }), { headers: this.headers(true) });
+    return (await this.parse(res)).messages;
+  }
+  /** Sends a message and calls `onEvent` for every streamed event. Resolves when the run ends. */
+  async chat(input, onEvent, signal) {
+    await this.ensureSession();
+    let res = await fetch(this.url("chat"), { method: "POST", headers: this.headers(true), body: JSON.stringify(input), signal });
+    if (res.status === 401) {
+      this.forgetSession();
+      await this.ensureSession();
+      res = await fetch(this.url("chat"), { method: "POST", headers: this.headers(true), body: JSON.stringify(input), signal });
+    }
+    if (!res.ok || !res.body) await this.parse(res);
+    const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
+    let buf = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += value;
+      let idx;
+      while ((idx = buf.indexOf("\n\n")) >= 0) {
+        const frame = buf.slice(0, idx);
+        buf = buf.slice(idx + 2);
+        const data = frame.split("\n").filter((l) => l.startsWith("data:")).map((l) => l.slice(5).trimStart()).join("\n");
+        if (!data) continue;
+        try {
+          onEvent(JSON.parse(data));
+        } catch {
+        }
+      }
+    }
+  }
+};
+
+// src/widget/i18n.ts
+var en = {
+  title: "Assistant",
+  greeting: "Hi there \u{1F44B}",
+  greetingBody: "Ask me anything. I can look things up and use tools to help you.",
+  placeholder: "Type a message\u2026",
+  send: "Send",
+  stop: "Stop",
+  newChat: "New conversation",
+  close: "Close chat",
+  open: "Open chat",
+  thinking: "Thinking\u2026",
+  thoughtFor: (s) => `Thought for ${s}s`,
+  reasoning: "Reasoning",
+  toolRunning: "running",
+  toolDone: "done",
+  toolError: "error",
+  args: "Arguments",
+  result: "Result",
+  online: "Online",
+  poweredBy: "Powered by",
+  errorGeneric: "Something went wrong. Please try again.",
+  stopped: "Stopped."
+};
+var vi = {
+  title: "Tr\u1EE3 l\xFD",
+  greeting: "Xin ch\xE0o \u{1F44B}",
+  greetingBody: "B\u1EA1n c\u1EA7n h\u1ECFi g\xEC c\u1EE9 nh\u1EAFn nh\xE9. M\xECnh c\xF3 th\u1EC3 tra c\u1EE9u v\xE0 d\xF9ng c\xF4ng c\u1EE5 \u0111\u1EC3 h\u1ED7 tr\u1EE3 b\u1EA1n.",
+  placeholder: "Nh\u1EADp tin nh\u1EAFn\u2026",
+  send: "G\u1EEDi",
+  stop: "D\u1EEBng",
+  newChat: "Cu\u1ED9c tr\xF2 chuy\u1EC7n m\u1EDBi",
+  close: "\u0110\xF3ng khung chat",
+  open: "M\u1EDF khung chat",
+  thinking: "\u0110ang suy ngh\u0129\u2026",
+  thoughtFor: (s) => `\u0110\xE3 suy ngh\u0129 ${s} gi\xE2y`,
+  reasoning: "Suy lu\u1EADn",
+  toolRunning: "\u0111ang ch\u1EA1y",
+  toolDone: "xong",
+  toolError: "l\u1ED7i",
+  args: "Tham s\u1ED1",
+  result: "K\u1EBFt qu\u1EA3",
+  online: "\u0110ang tr\u1EF1c tuy\u1EBFn",
+  poweredBy: "V\u1EADn h\xE0nh b\u1EDFi",
+  errorGeneric: "C\xF3 l\u1ED7i x\u1EA3y ra. B\u1EA1n th\u1EED l\u1EA1i gi\xFAp m\xECnh nh\xE9.",
+  stopped: "\u0110\xE3 d\u1EEBng."
+};
+function pickStrings(locale) {
+  const l = (locale || (typeof document !== "undefined" ? document.documentElement.lang : "") || (typeof navigator !== "undefined" ? navigator.language : "") || "en").toLowerCase();
+  return l.startsWith("vi") ? vi : en;
+}
+var icons = {
+  chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8.5 8.5 0 0 1-12.4 7.6L3 21l1.4-5.1A8.5 8.5 0 1 1 21 12Z"/><path d="M8.5 11h.01M12 11h.01M15.5 11h.01"/></svg>`,
+  close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>`,
+  down: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>`,
+  newChat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.4 3.6a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z"/></svg>`,
+  send: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7"/></svg>`,
+  stop: `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2.5"/></svg>`,
+  brain: `<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24A2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24A2.5 2.5 0 0 0 14.5 2Z"/></svg>`,
+  tool: `<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"/></svg>`
+};
+
+// src/widget/markdown.ts
+function el(doc, tag, cls) {
+  const e = doc.createElement(tag);
+  if (cls) e.className = cls;
+  return e;
+}
+function safeHref(url) {
+  const u = url.trim();
+  if (/^(https?:|mailto:|tel:)/i.test(u)) return u;
+  if (/^[/#?]/.test(u) && !u.startsWith("//")) return u;
+  return null;
+}
+var INLINE_SRC = /(`+)([\s\S]*?[^`])\1(?!`)|\*\*([^*]+?)\*\*|__([^_]+?)__|~~([^~]+?)~~|\*([^*\s][^*]*?)\*|(?<![\w])_([^_\s][^_]*?)_(?![\w])|\[([^\]]+)\]\(([^)\s]+)(?:\s+"[^"]*")?\)|(https?:\/\/[^\s<>()]+[^\s<>().,;:!?'"])/;
+function renderInline(doc, text, parent) {
+  const re = new RegExp(INLINE_SRC.source, "g");
+  let last = 0;
+  for (let m; m = re.exec(text); ) {
+    if (m.index > last) parent.appendChild(doc.createTextNode(text.slice(last, m.index)));
+    last = m.index + m[0].length;
+    if (m[2] !== void 0) {
+      const c = el(doc, "code");
+      c.textContent = m[2];
+      parent.appendChild(c);
+    } else if (m[3] !== void 0 || m[4] !== void 0) {
+      const s = el(doc, "strong");
+      renderInline(doc, m[3] ?? m[4], s);
+      parent.appendChild(s);
+    } else if (m[5] !== void 0) {
+      const s = el(doc, "del");
+      renderInline(doc, m[5], s);
+      parent.appendChild(s);
+    } else if (m[6] !== void 0 || m[7] !== void 0) {
+      const s = el(doc, "em");
+      renderInline(doc, m[6] ?? m[7], s);
+      parent.appendChild(s);
+    } else if (m[8] !== void 0) {
+      const href = safeHref(m[9]);
+      if (href) {
+        const a = el(doc, "a");
+        a.href = href;
+        a.target = "_blank";
+        a.rel = "noopener noreferrer nofollow";
+        renderInline(doc, m[8], a);
+        parent.appendChild(a);
+      } else parent.appendChild(doc.createTextNode(m[8]));
+    } else if (m[10] !== void 0) {
+      const a = el(doc, "a");
+      a.href = m[10];
+      a.target = "_blank";
+      a.rel = "noopener noreferrer nofollow";
+      a.textContent = m[10];
+      parent.appendChild(a);
+    }
+  }
+  if (last < text.length) parent.appendChild(doc.createTextNode(text.slice(last)));
+}
+var isTableSep = (l) => /^\s*\|?\s*:?-{2,}:?\s*(\|\s*:?-{2,}:?\s*)*\|?\s*$/.test(l);
+var splitRow = (l) => l.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
+function renderMarkdown(doc, src) {
+  const frag = doc.createDocumentFragment();
+  const lines = src.replace(/\r\n?/g, "\n").split("\n");
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+    const fence = line.match(/^\s*(```+|~~~+)\s*([\w+-]*)/);
+    if (fence) {
+      const body = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith(fence[1])) body.push(lines[i++]);
+      i++;
+      const pre = el(doc, "pre");
+      const code = el(doc, "code");
+      if (fence[2]) code.dataset.lang = fence[2];
+      code.textContent = body.join("\n");
+      pre.appendChild(code);
+      frag.appendChild(pre);
+      continue;
+    }
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) {
+      const tag = `h${Math.min(6, h[1].length + 2)}`;
+      const e = el(doc, tag);
+      renderInline(doc, h[2], e);
+      frag.appendChild(e);
+      i++;
+      continue;
+    }
+    if (/^\s*([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      frag.appendChild(el(doc, "hr"));
+      i++;
+      continue;
+    }
+    if (line.includes("|") && i + 1 < lines.length && isTableSep(lines[i + 1])) {
+      const wrap = el(doc, "div", "table");
+      const table = el(doc, "table");
+      const thead = el(doc, "thead");
+      const tr = el(doc, "tr");
+      for (const c of splitRow(line)) {
+        const th = el(doc, "th");
+        renderInline(doc, c, th);
+        tr.appendChild(th);
+      }
+      thead.appendChild(tr);
+      table.appendChild(thead);
+      const tbody = el(doc, "tbody");
+      i += 2;
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim()) {
+        const r = el(doc, "tr");
+        for (const c of splitRow(lines[i])) {
+          const td = el(doc, "td");
+          renderInline(doc, c, td);
+          r.appendChild(td);
+        }
+        tbody.appendChild(r);
+        i++;
+      }
+      table.appendChild(tbody);
+      wrap.appendChild(table);
+      frag.appendChild(wrap);
+      continue;
+    }
+    if (/^\s*>/.test(line)) {
+      const body = [];
+      while (i < lines.length && /^\s*>/.test(lines[i])) body.push(lines[i++].replace(/^\s*>\s?/, ""));
+      const q = el(doc, "blockquote");
+      q.appendChild(renderMarkdown(doc, body.join("\n")));
+      frag.appendChild(q);
+      continue;
+    }
+    const li = line.match(/^(\s*)([-*+]|\d+[.)])\s+(.*)$/);
+    if (li) {
+      const ordered = /\d/.test(li[2]);
+      const list = el(doc, ordered ? "ol" : "ul");
+      if (ordered && parseInt(li[2], 10) !== 1) list.setAttribute("start", String(parseInt(li[2], 10)));
+      const baseIndent = li[1].length;
+      while (i < lines.length) {
+        const m = lines[i].match(/^(\s*)([-*+]|\d+[.)])\s+(.*)$/);
+        if (!m || m[1].length < baseIndent || /\d/.test(m[2]) !== ordered) break;
+        if (m[1].length > baseIndent) {
+          const sub = [];
+          while (i < lines.length && (/^\s+/.test(lines[i]) && lines[i].match(/^(\s*)/)[1].length > baseIndent)) sub.push(lines[i++].slice(baseIndent + 2));
+          list.lastElementChild?.appendChild(renderMarkdown(doc, sub.join("\n")));
+          continue;
+        }
+        const item = el(doc, "li");
+        renderInline(doc, m[3], item);
+        list.appendChild(item);
+        i++;
+      }
+      frag.appendChild(list);
+      continue;
+    }
+    const para = [];
+    while (i < lines.length && lines[i].trim() && !/^\s*(```|~~~|#{1,6}\s|>|([-*+]|\d+[.)])\s)/.test(lines[i]) && !(lines[i].includes("|") && i + 1 < lines.length && isTableSep(lines[i + 1]))) para.push(lines[i++]);
+    if (!para.length) para.push(lines[i++]);
+    const p = el(doc, "p");
+    para.forEach((l, idx) => {
+      if (idx) p.appendChild(el(doc, "br"));
+      renderInline(doc, l, p);
+    });
+    frag.appendChild(p);
+  }
+  return frag;
+}
+
+// src/widget/styles.ts
+var styles = (
+  /* css */
+  `
+:host {
+  --dw-accent: #5446e8;
+  --dw-accent-contrast: #fff;
+  --dw-bg: #ffffff;
+  --dw-surface: #f5f4fb;
+  --dw-fg: #1b1f4b;
+  --dw-muted: #6b6f8f;
+  --dw-border: #e4e2f1;
+  --dw-radius: 18px;
+  --dw-font: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --dw-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
+  --dw-width: 400px;
+  --dw-height: 640px;
+  --dw-z: 2147483000;
+  --dw-shadow: 0 24px 64px -16px rgba(27, 31, 75, .28), 0 4px 16px -4px rgba(27, 31, 75, .12);
+  all: initial;
+  font-family: var(--dw-font);
+  color: var(--dw-fg);
+}
+:host([data-theme="dark"]) {
+  --dw-bg: #14152b;
+  --dw-surface: #1e2040;
+  --dw-fg: #ecebfa;
+  --dw-muted: #a2a4c6;
+  --dw-border: #2d2f55;
+  --dw-shadow: 0 24px 64px -12px rgba(0, 0, 0, .6);
+}
+* { box-sizing: border-box; }
+button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+
+/* ---------- launcher ---------- */
+.launcher {
+  position: fixed; bottom: 20px; right: 20px; z-index: var(--dw-z);
+  width: 58px; height: 58px; border-radius: 50%;
+  background: var(--dw-accent); color: var(--dw-accent-contrast);
+  display: grid; place-items: center;
+  box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--dw-accent) 60%, transparent);
+  transition: transform .2s cubic-bezier(.3,1.4,.6,1), box-shadow .2s;
+}
+.launcher:hover { transform: translateY(-2px) scale(1.04); }
+.launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--dw-accent) 45%, transparent); outline-offset: 3px; }
+.launcher svg { width: 26px; height: 26px; transition: transform .25s, opacity .2s; }
+.launcher img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
+:host([data-position="bottom-left"]) .launcher { right: auto; left: 20px; }
+.launcher .badge {
+  position: absolute; top: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%;
+  background: #ff5a7a; border: 2px solid var(--dw-bg); display: none;
+}
+:host([data-unread]) .launcher .badge { display: block; }
+
+/* ---------- panel ---------- */
+.panel {
+  position: fixed; bottom: 92px; right: 20px; z-index: var(--dw-z);
+  width: min(var(--dw-width), calc(100vw - 32px));
+  height: min(var(--dw-height), calc(100dvh - 120px));
+  background: var(--dw-bg); color: var(--dw-fg);
+  border: 1px solid var(--dw-border); border-radius: var(--dw-radius);
+  box-shadow: var(--dw-shadow);
+  display: flex; flex-direction: column; overflow: hidden;
+  transform-origin: bottom right;
+  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.1), visibility .2s;
+}
+:host([data-position="bottom-left"]) .panel { right: auto; left: 20px; transform-origin: bottom left; }
+:host(:not([data-open])) .panel { opacity: 0; transform: translateY(12px) scale(.96); visibility: hidden; pointer-events: none; }
+:host([data-mode="inline"]) .panel {
+  position: relative; inset: auto; width: 100%; height: 100%; min-height: 420px;
+  opacity: 1; transform: none; visibility: visible; pointer-events: auto; box-shadow: none;
+}
+:host([data-mode="inline"]) { display: block; height: var(--dw-height); }
+:host([data-mode="inline"]) .launcher, :host([data-mode="inline"]) .close { display: none; }
+@media (max-width: 520px) {
+  :host(:not([data-mode="inline"])) .panel { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
+  :host([data-open]:not([data-mode="inline"])) .launcher { display: none; }
+}
+
+/* ---------- header ---------- */
+.head {
+  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
+  border-bottom: 1px solid var(--dw-border);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--dw-accent) 7%, var(--dw-bg)), var(--dw-bg));
+}
+.avatar {
+  flex: none; width: 38px; height: 38px; border-radius: 12px;
+  background: var(--dw-accent); color: var(--dw-accent-contrast);
+  display: grid; place-items: center; font-weight: 700; font-size: 16px; overflow: hidden;
+}
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+.who { flex: 1; min-width: 0; }
+.title { font-weight: 650; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.subtitle { font-size: 12px; color: var(--dw-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
+.dot { width: 7px; height: 7px; border-radius: 50%; background: #22c58b; box-shadow: 0 0 0 3px color-mix(in srgb, #22c58b 22%, transparent); }
+.agent-select {
+  font: inherit; font-size: 12px; color: var(--dw-muted); background: transparent; border: 0;
+  padding: 0 14px 0 0; margin: 0; max-width: 170px; cursor: pointer; appearance: none; field-sizing: content; text-overflow: ellipsis;
+  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
+  background-position: right 4px top 55%, right 0 top 55%; background-size: 4px 4px; background-repeat: no-repeat;
+}
+.agent-select:focus-visible { outline: 2px solid var(--dw-accent); border-radius: 4px; }
+.icon-btn {
+  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--dw-muted);
+  transition: background .15s, color .15s;
+}
+.icon-btn:hover { background: var(--dw-surface); color: var(--dw-fg); }
+.icon-btn:focus-visible { outline: 2px solid var(--dw-accent); }
+.icon-btn svg { width: 18px; height: 18px; }
+
+/* ---------- log ---------- */
+.log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
+.log::-webkit-scrollbar { width: 8px; }
+.log::-webkit-scrollbar-thumb { background: var(--dw-border); border-radius: 8px; }
+.welcome { text-align: left; padding: 6px 2px 10px; animation: rise .35s ease both; }
+.welcome h2 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
+.welcome p { margin: 0; color: var(--dw-muted); font-size: 14px; line-height: 1.55; }
+.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
+.chip {
+  font-size: 13px; line-height: 1.3; padding: 8px 12px; border-radius: 999px;
+  border: 1px solid var(--dw-border); background: var(--dw-bg); text-align: left;
+  transition: border-color .15s, background .15s, transform .15s;
+}
+.chip:hover { border-color: var(--dw-accent); background: color-mix(in srgb, var(--dw-accent) 6%, var(--dw-bg)); transform: translateY(-1px); }
+
+.msg { display: flex; margin: 0 0 16px; animation: rise .25s ease both; }
+.msg.user { justify-content: flex-end; }
+.bubble { max-width: 86%; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
+.msg.user .bubble {
+  background: var(--dw-accent); color: var(--dw-accent-contrast);
+  padding: 9px 14px; border-radius: 18px 18px 6px 18px; white-space: pre-wrap;
+}
+.msg.assistant .bubble { max-width: 100%; width: 100%; }
+.msg.error .bubble {
+  color: #c2334f; background: color-mix(in srgb, #ff5a7a 9%, var(--dw-bg));
+  border: 1px solid color-mix(in srgb, #ff5a7a 30%, transparent); padding: 9px 12px; border-radius: 12px; font-size: 13.5px;
+}
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+/* markdown */
+.md > :first-child { margin-top: 0; }
+.md > :last-child { margin-bottom: 0; }
+.md p, .md ul, .md ol, .md blockquote, .md pre, .md .table { margin: 0 0 10px; }
+.md ul, .md ol { padding-left: 22px; }
+.md li { margin: 3px 0; }
+.md h3, .md h4, .md h5, .md h6 { margin: 14px 0 6px; font-size: 15px; line-height: 1.35; }
+.md a { color: var(--dw-accent); text-decoration: underline; text-underline-offset: 2px; }
+.md code { font-family: var(--dw-mono); font-size: .86em; background: var(--dw-surface); padding: 1.5px 5px; border-radius: 5px; }
+.md pre { background: #12132a; color: #e6e6f5; padding: 12px 14px; border-radius: 12px; overflow-x: auto; font-size: 12.5px; line-height: 1.55; }
+.md pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
+.md blockquote { border-left: 3px solid var(--dw-accent); padding: 2px 0 2px 12px; color: var(--dw-muted); }
+.md hr { border: 0; border-top: 1px solid var(--dw-border); margin: 14px 0; }
+.md .table { overflow-x: auto; border: 1px solid var(--dw-border); border-radius: 10px; }
+.md table { border-collapse: collapse; width: 100%; font-size: 13px; }
+.md th, .md td { padding: 7px 10px; border-bottom: 1px solid var(--dw-border); text-align: left; vertical-align: top; overflow-wrap: break-word; min-width: 4.5em; }
+.md th { background: var(--dw-surface); font-weight: 600; }
+.md tr:last-child td { border-bottom: 0; }
+.cursor::after { content: ""; display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px; background: var(--dw-accent); border-radius: 2px; animation: blink 1s steps(2) infinite; }
+@keyframes blink { 50% { opacity: 0; } }
+
+/* reasoning + tools */
+.trace { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
+details.thinking, details.tool {
+  border: 1px solid var(--dw-border); border-radius: 12px; background: var(--dw-surface); overflow: hidden;
+}
+details > summary {
+  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
+  padding: 7px 10px; font-size: 12.5px; color: var(--dw-muted); user-select: none;
+}
+details > summary::-webkit-details-marker { display: none; }
+details > summary:hover { color: var(--dw-fg); }
+details > summary .chev { margin-left: auto; transition: transform .2s; width: 14px; height: 14px; flex: none; }
+details[open] > summary .chev { transform: rotate(180deg); }
+details > summary svg.ic { width: 14px; height: 14px; flex: none; }
+.thinking-body {
+  padding: 2px 12px 10px; font-size: 12.5px; line-height: 1.55; color: var(--dw-muted);
+  white-space: pre-wrap; max-height: 220px; overflow-y: auto;
+}
+.tool-name { font-family: var(--dw-mono); font-size: 12px; color: var(--dw-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tool-state { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--dw-bg); border: 1px solid var(--dw-border); flex: none; }
+.tool[data-status="done"] .tool-state { color: #13a06f; border-color: color-mix(in srgb, #13a06f 35%, transparent); }
+.tool[data-status="error"] .tool-state { color: #c2334f; border-color: color-mix(in srgb, #c2334f 35%, transparent); }
+.tool-body { padding: 0 10px 10px; display: grid; gap: 6px; }
+.tool-body .label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dw-muted); }
+.tool-body pre {
+  margin: 0; font-family: var(--dw-mono); font-size: 11.5px; line-height: 1.5; background: var(--dw-bg);
+  border: 1px solid var(--dw-border); border-radius: 8px; padding: 8px; max-height: 180px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dw-accent) 25%, transparent); border-top-color: var(--dw-accent); animation: spin .7s linear infinite; flex: none; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.typing { display: inline-flex; gap: 4px; padding: 10px 2px; }
+.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--dw-muted); opacity: .4; animation: bounce 1.2s infinite; }
+.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
+@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
+
+/* ---------- composer ---------- */
+.composer { padding: 10px 12px 12px; border-top: 1px solid var(--dw-border); background: var(--dw-bg); }
+.box {
+  display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--dw-border); border-radius: 14px;
+  padding: 6px 6px 6px 12px; background: var(--dw-bg); transition: border-color .15s, box-shadow .15s;
+}
+.box:focus-within { border-color: var(--dw-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dw-accent) 16%, transparent); }
+textarea {
+  flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--dw-fg);
+  font: inherit; font-size: 14.5px; line-height: 1.5; max-height: 140px; padding: 6px 0; min-height: 34px;
+}
+textarea::placeholder { color: var(--dw-muted); }
+.send {
+  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
+  background: var(--dw-accent); color: var(--dw-accent-contrast); transition: opacity .15s, transform .15s;
+}
+.send:disabled { opacity: .35; cursor: default; }
+.send:not(:disabled):hover { transform: translateY(-1px); }
+.send svg { width: 17px; height: 17px; }
+.foot { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 11px; color: var(--dw-muted); }
+.foot a { color: inherit; text-decoration: none; font-weight: 600; }
+.foot a:hover { color: var(--dw-accent); }
+.challenge:empty { display: none; }
+.challenge { display: flex; justify-content: center; padding: 8px 0; }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
+`
+);
+
+// src/widget/element.ts
+var BOOL_ATTRS = ["show-reasoning", "show-tool-calls", "allow-agent-switch", "open", "persist", "hide-branding", "launcher-avatar"];
+var ATTRS = [
+  "endpoint",
+  "agent",
+  "title",
+  "subtitle",
+  "greeting",
+  "intro",
+  "placeholder",
+  "suggestions",
+  "avatar",
+  "position",
+  "mode",
+  "theme",
+  "accent-color",
+  "locale",
+  "gateway-url",
+  "gateway-token",
+  "width",
+  "height",
+  "z-index",
+  ...BOOL_ATTRS
+];
+var camel = (s) => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+var parseBool = (v) => v !== null && !/^(false|0|off|no)$/i.test(v);
+var randomConversationId = () => {
+  const b = crypto.getRandomValues(new Uint8Array(9));
+  return Array.from(b, (x) => "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_"[x & 63]).join("");
+};
+var prettyToolName = (n) => n.replace(/^mcp_[^_]+(?:_[^_]+)*?__/, "").replace(/_/g, " ");
+var store2 = {
+  get(k) {
+    try {
+      return localStorage.getItem(k);
+    } catch {
+      return null;
+    }
+  },
+  set(k, v) {
+    try {
+      localStorage.setItem(k, v);
+    } catch {
+    }
+  }
+};
+var turnstileScript = null;
+function loadTurnstile() {
+  return turnstileScript ??= new Promise((resolve, reject) => {
+    if (window.turnstile) return resolve();
+    const s = document.createElement("script");
+    s.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
+    s.async = true;
+    s.onload = () => resolve();
+    s.onerror = () => reject(new Error("Could not load Turnstile"));
+    document.head.appendChild(s);
+  });
+}
+var ElementBase = typeof HTMLElement === "undefined" ? class {
+} : HTMLElement;
+var DeweeChatElement = class extends ElementBase {
+  static get observedAttributes() {
+    return ATTRS;
+  }
+  root;
+  overrides = {};
+  api = null;
+  apiKey = "";
+  server = null;
+  agentId = "";
+  conversationId = "";
+  messages = [];
+  running = null;
+  activated = false;
+  strings = pickStrings();
+  mql = null;
+  els;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+  }
+  // ---------- public API ----------
+  /** Current effective configuration (attributes merged with `configure()` overrides). */
+  get config() {
+    const c = { endpoint: "/api/dewee" };
+    for (const a of ATTRS) {
+      const v = this.getAttribute(a);
+      if (v === null) continue;
+      if (BOOL_ATTRS.includes(a)) c[camel(a)] = parseBool(v);
+      else if (a === "suggestions") c.suggestions = v.trim().startsWith("[") ? safeJson(v, []) : v.split("|").map((s) => s.trim()).filter(Boolean);
+      else if (a === "z-index") c.zIndex = Number(v);
+      else c[camel(a)] = v;
+    }
+    return { ...c, ...this.overrides };
+  }
+  /** Updates configuration at runtime (wins over attributes). */
+  configure(partial) {
+    this.overrides = { ...this.overrides, ...partial };
+    if (this.els) this.applyConfig();
+  }
+  open() {
+    if (this.config.mode === "inline") return;
+    this.setAttribute("data-open", "");
+    this.removeAttribute("data-unread");
+    this.els.launcher.setAttribute("aria-expanded", "true");
+    this.activate();
+    setTimeout(() => this.els.input.focus(), 120);
+    this.emit("dewee:open");
+  }
+  close() {
+    if (this.config.mode === "inline") return;
+    this.removeAttribute("data-open");
+    this.els.launcher.setAttribute("aria-expanded", "false");
+    this.emit("dewee:close");
+  }
+  toggle() {
+    this.hasAttribute("data-open") ? this.close() : this.open();
+  }
+  /** Sends a message programmatically (opens the widget first). */
+  async send(text) {
+    const message = text.trim();
+    if (!message || this.running) return;
+    if (this.config.mode !== "inline" && !this.hasAttribute("data-open")) this.open();
+    await this.activate();
+    this.els.input.value = "";
+    this.autosize();
+    this.pushMessage({ role: "user", content: message });
+    const reply = { role: "assistant", content: "", status: "streaming", startedAt: Date.now() };
+    this.pushMessage(reply);
+    this.setRunning(new AbortController());
+    this.emit("dewee:send", { message, agent: this.agentId, conversationId: this.conversationId });
+    try {
+      await this.client().chat(
+        { message, agent: this.agentId, conversationId: this.conversationId },
+        (e) => this.onStreamEvent(reply, e),
+        this.running.signal
+      );
+      if (reply.status === "streaming") reply.status = "done";
+    } catch (e) {
+      if (e.name === "AbortError") {
+        reply.status = "done";
+        if (!reply.content) reply.content = `_${this.strings.stopped}_`;
+      } else {
+        reply.status = "error";
+        this.showError(reply, e);
+      }
+    } finally {
+      this.finishThinking(reply);
+      this.updateMessage(reply);
+      this.setRunning(null);
+      if (reply.status === "done") {
+        this.emit("dewee:reply", { content: reply.content, agent: this.agentId, conversationId: this.conversationId });
+        if (this.config.mode !== "inline" && !this.hasAttribute("data-open")) this.setAttribute("data-unread", "");
+      }
+    }
+  }
+  /** Stops the running reply. */
+  stop() {
+    this.running?.abort();
+  }
+  /** Starts a fresh conversation with the current agent. */
+  newConversation() {
+    this.stop();
+    this.conversationId = randomConversationId();
+    if (this.config.persist !== false) store2.set(this.convKey(), this.conversationId);
+    this.messages = [];
+    this.renderLog();
+    this.els.input.focus();
+  }
+  // ---------- lifecycle ----------
+  connectedCallback() {
+    if (!this.els) this.renderShell();
+    this.applyConfig();
+    if (this.config.mode === "inline" || this.config.open) {
+      if (this.config.mode !== "inline") this.open();
+      else this.activate();
+    }
+  }
+  disconnectedCallback() {
+    this.stop();
+    this.mql?.removeEventListener("change", this.onScheme);
+  }
+  attributeChangedCallback() {
+    if (this.els) this.applyConfig();
+  }
+  // ---------- internals ----------
+  emit(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+  client() {
+    const c = this.config;
+    const key = [c.endpoint, c.gatewayUrl, c.gatewayToken].join("|");
+    if (!this.api || key !== this.apiKey) {
+      this.apiKey = key;
+      this.api = new ApiClient({
+        endpoint: c.endpoint,
+        gatewayUrl: c.gatewayUrl,
+        gatewayToken: c.gatewayToken,
+        turnstile: (siteKey) => this.challenge(siteKey)
+      });
+    }
+    return this.api;
+  }
+  convKey() {
+    return `dewee-webchat:conv:${this.config.endpoint}:${this.config.gatewayUrl || ""}:${this.agentId}`;
+  }
+  onScheme = () => this.applyTheme();
+  applyTheme() {
+    const t = this.config.theme || "light";
+    const dark = t === "dark" || t === "auto" && !!this.mql?.matches;
+    this.setAttribute("data-theme", dark ? "dark" : "light");
+  }
+  applyConfig() {
+    const c = this.config;
+    this.strings = pickStrings(c.locale);
+    const s = this.strings;
+    this.setAttribute("data-position", c.position || "bottom-right");
+    this.setAttribute("data-mode", c.mode || "floating");
+    if (c.theme === "auto" && !this.mql) {
+      this.mql = matchMedia("(prefers-color-scheme: dark)");
+      this.mql.addEventListener("change", this.onScheme);
+    }
+    this.applyTheme();
+    const setVar = (k, v) => v !== void 0 && v !== "" ? this.style.setProperty(k, String(v)) : this.style.removeProperty(k);
+    setVar("--dw-accent", c.accentColor);
+    setVar("--dw-width", c.width);
+    setVar("--dw-height", c.height);
+    setVar("--dw-z", c.zIndex);
+    const e = this.els;
+    e.title.textContent = c.title || s.title;
+    e.avatar.replaceChildren();
+    if (c.avatar) {
+      const img = document.createElement("img");
+      img.src = c.avatar;
+      img.alt = "";
+      e.avatar.appendChild(img);
+    } else e.avatar.textContent = (c.title || s.title).trim().charAt(0).toUpperCase();
+    e.launcher.innerHTML = c.avatar && c.launcherAvatar ? "" : icons.chat;
+    if (c.avatar && c.launcherAvatar) {
+      const img = document.createElement("img");
+      img.src = c.avatar;
+      img.alt = "";
+      e.launcher.appendChild(img);
+    }
+    e.launcher.insertAdjacentHTML("beforeend", `<span class="badge"></span>`);
+    e.launcher.setAttribute("aria-label", s.open);
+    e.close.setAttribute("aria-label", s.close);
+    e.close.title = s.close;
+    e.newChat.setAttribute("aria-label", s.newChat);
+    e.newChat.title = s.newChat;
+    e.input.placeholder = c.placeholder || s.placeholder;
+    e.foot.hidden = !!c.hideBranding;
+    e.foot.querySelector(".by").textContent = s.poweredBy + " ";
+    this.renderSubtitle();
+    this.updateSendButton();
+    if (this.activated && this.api && this.apiKey !== [c.endpoint, c.gatewayUrl, c.gatewayToken].join("|")) {
+      this.activated = false;
+      this.server = null;
+      this.activate();
+    } else if (this.activated && c.agent && c.agent !== this.agentId && this.server) {
+      this.switchAgent(c.agent);
+    } else if (this.activated) {
+      this.renderLog();
+    }
+  }
+  renderShell() {
+    this.root.innerHTML = `
+      <style>${styles}</style>
+      <button class="launcher" part="launcher" aria-expanded="false" aria-haspopup="dialog"></button>
+      <section class="panel" part="panel" role="dialog" aria-label="Chat">
+        <header class="head" part="header">
+          <div class="avatar"></div>
+          <div class="who">
+            <div class="title"></div>
+            <div class="subtitle"><span class="dot"></span><span class="status"></span><select class="agent-select" hidden></select></div>
+          </div>
+          <button class="icon-btn new">${icons.newChat}</button>
+          <button class="icon-btn close">${icons.close}</button>
+        </header>
+        <div class="log" part="log" role="log" aria-live="polite"></div>
+        <div class="challenge"><slot name="challenge"></slot></div>
+        <form class="composer" part="composer">
+          <div class="box">
+            <textarea rows="1" maxlength="4000"></textarea>
+            <button class="send" type="submit"></button>
+          </div>
+          <div class="foot"><span><span class="by"></span><a href="https://dewee.sh" target="_blank" rel="noopener">dewee</a></span><span class="meta"></span></div>
+        </form>
+      </section>`;
+    const $ = (sel) => this.root.querySelector(sel);
+    this.els = {
+      launcher: $(".launcher"),
+      panel: $(".panel"),
+      log: $(".log"),
+      title: $(".title"),
+      subtitle: $(".subtitle"),
+      status: $(".status"),
+      avatar: $(".avatar"),
+      select: $(".agent-select"),
+      input: $("textarea"),
+      send: $(".send"),
+      newChat: $(".new"),
+      close: $(".close"),
+      foot: $(".foot")
+    };
+    const e = this.els;
+    e.launcher.addEventListener("click", () => this.toggle());
+    e.close.addEventListener("click", () => this.close());
+    e.log.addEventListener("scroll", () => {
+      this.following = this.nearBottom();
+    }, { passive: true });
+    e.newChat.addEventListener("click", () => this.newConversation());
+    e.select.addEventListener("change", () => this.switchAgent(e.select.value));
+    $("form").addEventListener("submit", (ev) => {
+      ev.preventDefault();
+      this.running ? this.stop() : this.send(e.input.value);
+    });
+    e.input.addEventListener("keydown", (ev) => {
+      if (ev.key === "Enter" && !ev.shiftKey && !ev.isComposing && ev.keyCode !== 229) {
+        ev.preventDefault();
+        if (!this.running) this.send(e.input.value);
+      }
+    });
+    e.input.addEventListener("input", () => {
+      this.autosize();
+      this.updateSendButton();
+    });
+    e.panel.addEventListener("keydown", (ev) => {
+      if (ev.key === "Escape") this.close();
+    });
+  }
+  autosize() {
+    const t = this.els.input;
+    t.style.height = "auto";
+    t.style.height = Math.min(t.scrollHeight, 140) + "px";
+  }
+  updateSendButton() {
+    const b = this.els.send;
+    b.innerHTML = this.running ? icons.stop : icons.send;
+    b.setAttribute("aria-label", this.running ? this.strings.stop : this.strings.send);
+    b.title = b.getAttribute("aria-label");
+    b.disabled = !this.running && !this.els.input.value.trim();
+  }
+  setRunning(ctrl) {
+    this.running = ctrl;
+    this.updateSendButton();
+  }
+  renderSubtitle() {
+    const e = this.els;
+    const c = this.config;
+    const agents = this.server?.agents ?? [];
+    const canSwitch = c.allowAgentSwitch !== false && !!this.server?.allowAgentSwitch && agents.length > 1;
+    e.select.hidden = !canSwitch;
+    e.status.hidden = canSwitch;
+    if (canSwitch) {
+      e.select.replaceChildren(...agents.map((a) => new Option(a.name || a.id, a.id, false, a.id === this.agentId)));
+      e.select.setAttribute("aria-label", "Agent");
+    }
+    const current = agents.find((a) => a.id === this.agentId);
+    e.status.textContent = c.subtitle || (current?.name && current.name !== c.title ? `${this.strings.online} \xB7 ${current.name}` : this.strings.online);
+  }
+  /** Loads backend config and the persisted conversation once. */
+  async activate() {
+    if (this.activated) return;
+    this.activated = true;
+    this.renderLog();
+    try {
+      this.server = await this.client().getConfig(true);
+      this.els.input.maxLength = this.server.maxMessageLength;
+      const wanted = this.config.agent;
+      const known = (id) => !!id && (this.server.agents.length === 0 || this.server.agents.some((a) => a.id === id));
+      this.agentId = known(wanted) ? wanted : this.server.defaultAgent || this.server.agents[0]?.id || wanted || "";
+      await this.loadConversation();
+    } catch (e) {
+      this.activated = false;
+      this.renderLog();
+      this.showError(null, e);
+    }
+    this.renderSubtitle();
+    this.emit("dewee:ready", { agent: this.agentId, config: this.server });
+  }
+  async switchAgent(id) {
+    if (id === this.agentId) return;
+    this.stop();
+    this.agentId = id;
+    this.renderSubtitle();
+    await this.loadConversation();
+  }
+  async loadConversation() {
+    const persist = this.config.persist !== false;
+    const saved = persist ? store2.get(this.convKey()) : null;
+    this.conversationId = saved || randomConversationId();
+    if (persist && !saved) store2.set(this.convKey(), this.conversationId);
+    this.messages = [];
+    this.renderLog();
+    if (!saved) return;
+    try {
+      const history = await this.client().history(this.agentId, this.conversationId);
+      this.messages = history.map((m) => ({ ...m, status: "done" }));
+      this.renderLog();
+    } catch {
+    }
+  }
+  renderLog() {
+    const log = this.els.log;
+    log.replaceChildren();
+    if (!this.messages.length) log.appendChild(this.renderWelcome());
+    for (const m of this.messages) log.appendChild(this.renderMessage(m));
+    log.scrollTop = log.scrollHeight;
+  }
+  renderWelcome() {
+    const c = this.config;
+    const s = this.strings;
+    const w = document.createElement("div");
+    w.className = "welcome";
+    const h = document.createElement("h2");
+    h.textContent = c.greeting || s.greeting;
+    const p = document.createElement("p");
+    p.textContent = c.intro || s.greetingBody;
+    w.append(h, p);
+    if (c.suggestions?.length) {
+      const list = document.createElement("div");
+      list.className = "suggestions";
+      for (const text of c.suggestions) {
+        const b = document.createElement("button");
+        b.className = "chip";
+        b.type = "button";
+        b.textContent = text;
+        b.addEventListener("click", () => this.send(text));
+        list.appendChild(b);
+      }
+      w.appendChild(list);
+    }
+    return w;
+  }
+  pushMessage(m) {
+    if (!this.messages.length) this.els.log.replaceChildren();
+    this.messages.push(m);
+    this.els.log.appendChild(this.renderMessage(m));
+    this.scrollToBottom(true);
+  }
+  renderMessage(m) {
+    const root = document.createElement("div");
+    root.className = `msg ${m.role}${m.status === "error" ? " error" : ""}`;
+    const bubble = document.createElement("div");
+    bubble.className = "bubble";
+    root.appendChild(bubble);
+    const trace = document.createElement("div");
+    trace.className = "trace";
+    const md = document.createElement("div");
+    md.className = m.role === "assistant" ? "md" : "";
+    if (m.role === "assistant") bubble.appendChild(trace);
+    bubble.appendChild(md);
+    m.view = { root, trace, md, tools: /* @__PURE__ */ new Map() };
+    this.updateMessage(m);
+    return root;
+  }
+  updateMessage(m) {
+    const v = m.view;
+    if (!v) return;
+    const c = this.config;
+    if (m.role === "user") {
+      v.md.textContent = m.content;
+      return;
+    }
+    v.root.classList.toggle("error", m.status === "error");
+    if (c.showReasoning !== false && m.thinking) {
+      if (!v.thinking) {
+        v.thinking = document.createElement("details");
+        v.thinking.className = "thinking";
+        v.thinking.innerHTML = `<summary></summary><div class="thinking-body"></div>`;
+        v.trace.prepend(v.thinking);
+      }
+      const streaming = m.status === "streaming" && !m.thinkingMs;
+      const label = streaming ? this.strings.thinking : m.thinkingMs ? this.strings.thoughtFor(Math.max(1, Math.round(m.thinkingMs / 1e3))) : this.strings.reasoning;
+      const summary = v.thinking.querySelector("summary");
+      summary.innerHTML = `${streaming ? '<span class="spin"></span>' : icons.brain}<span></span>${icons.down.replace("<svg", '<svg class="chev"')}`;
+      summary.querySelector("span:not(.spin)").textContent = label;
+      v.thinking.querySelector(".thinking-body").textContent = m.thinking;
+    } else if (v.thinking) {
+      v.thinking.remove();
+      v.thinking = void 0;
+    }
+    if (c.showToolCalls !== false) {
+      for (const t of m.toolCalls ?? []) this.renderTool(v, t);
+    } else {
+      v.tools.forEach((d) => d.remove());
+      v.tools.clear();
+    }
+    v.trace.hidden = !v.trace.childElementCount;
+    const typing = m.status === "streaming" && !m.content;
+    if (typing) {
+      v.md.innerHTML = `<span class="typing" aria-label="${this.strings.thinking}"><i></i><i></i><i></i></span>`;
+    } else {
+      v.md.replaceChildren(renderMarkdown(document, m.content));
+      v.md.classList.toggle("cursor", m.status === "streaming");
+    }
+  }
+  renderTool(v, t) {
+    let d = v.tools.get(t.id);
+    if (!d) {
+      d = document.createElement("details");
+      d.className = "tool";
+      d.innerHTML = `<summary><span class="lead"></span><span class="tool-name"></span><span class="tool-state"></span>${icons.down.replace("<svg", '<svg class="chev"')}</summary><div class="tool-body"></div>`;
+      v.tools.set(t.id, d);
+      v.trace.appendChild(d);
+    }
+    d.dataset.status = t.status;
+    d.querySelector(".lead").innerHTML = t.status === "running" ? '<span class="spin"></span>' : icons.tool;
+    const name = d.querySelector(".tool-name");
+    name.textContent = prettyToolName(t.name);
+    name.setAttribute("title", t.name);
+    d.querySelector(".tool-state").textContent = t.status === "running" ? this.strings.toolRunning : t.status === "error" ? this.strings.toolError : this.strings.toolDone;
+    const body = d.querySelector(".tool-body");
+    body.replaceChildren();
+    const block = (label, value) => {
+      if (value === void 0 || value === null || value === "") return;
+      const l = document.createElement("div");
+      l.className = "label";
+      l.textContent = label;
+      const pre = document.createElement("pre");
+      pre.textContent = typeof value === "string" ? tryPretty(value) : JSON.stringify(value, null, 2);
+      body.append(l, pre);
+    };
+    block(this.strings.args, t.arguments);
+    block(this.strings.result, t.result);
+  }
+  onStreamEvent(m, e) {
+    switch (e.type) {
+      case "start":
+        if (e.conversationId && e.conversationId !== this.conversationId) {
+          this.conversationId = e.conversationId;
+          if (this.config.persist !== false) store2.set(this.convKey(), e.conversationId);
+        }
+        break;
+      case "thinking":
+        m.thinking = (m.thinking || "") + e.text;
+        break;
+      case "delta":
+        this.finishThinking(m);
+        m.content += e.text;
+        break;
+      case "tool_call":
+        this.finishThinking(m);
+        (m.toolCalls ??= []).push({ id: e.id, name: e.name, arguments: e.arguments, status: "running" });
+        break;
+      case "tool_result": {
+        const t = m.toolCalls?.find((x) => x.id === e.id) ?? (m.toolCalls ??= [])[m.toolCalls.push({ id: e.id, name: e.name, status: "running" }) - 1];
+        t.status = e.isError ? "error" : "done";
+        t.result = e.result;
+        t.isError = e.isError;
+        break;
+      }
+      case "done":
+        this.finishThinking(m);
+        if (e.content && e.content.length >= m.content.length) m.content = e.content;
+        m.status = "done";
+        break;
+      case "error":
+        m.status = "error";
+        this.showError(m, new ApiError(e.message, 500, e.code));
+        break;
+    }
+    this.scheduleUpdate(m);
+  }
+  pendingFrame = 0;
+  following = true;
+  scheduleUpdate(m) {
+    if (this.pendingFrame) return;
+    this.pendingFrame = requestAnimationFrame(() => {
+      this.pendingFrame = 0;
+      this.updateMessage(m);
+      if (this.following) this.scrollToBottom(true);
+    });
+  }
+  finishThinking(m) {
+    if (m.thinking && !m.thinkingMs && m.startedAt) m.thinkingMs = Date.now() - m.startedAt;
+  }
+  nearBottom() {
+    const l = this.els.log;
+    return l.scrollHeight - l.scrollTop - l.clientHeight < 96;
+  }
+  scrollToBottom(force = false) {
+    const l = this.els.log;
+    if (force || this.nearBottom()) {
+      l.scrollTop = l.scrollHeight;
+      this.following = true;
+    }
+  }
+  showError(m, err) {
+    const text = err.message || this.strings.errorGeneric;
+    this.emit("dewee:error", { message: text, code: err.code });
+    if (m) {
+      m.content = m.content ? `${m.content}
+
+> \u26A0\uFE0F ${text}` : `\u26A0\uFE0F ${text}`;
+      m.status = "error";
+      this.updateMessage(m);
+      return;
+    }
+    const div = document.createElement("div");
+    div.className = "msg error";
+    div.innerHTML = `<div class="bubble"></div>`;
+    div.firstElementChild.textContent = `\u26A0\uFE0F ${text}`;
+    this.els.log.appendChild(div);
+  }
+  /** Renders a Turnstile challenge in light DOM (slotted) and resolves with its token. */
+  async challenge(siteKey) {
+    await loadTurnstile();
+    const holder = document.createElement("div");
+    holder.slot = "challenge";
+    this.appendChild(holder);
+    try {
+      return await new Promise((resolve, reject) => {
+        window.turnstile.render(holder, {
+          sitekey: siteKey,
+          appearance: "interaction-only",
+          theme: this.getAttribute("data-theme") === "dark" ? "dark" : "light",
+          callback: resolve,
+          "error-callback": () => reject(new ApiError("Verification failed", 403, "turnstile_failed"))
+        });
+      });
+    } finally {
+      holder.remove();
+    }
+  }
+};
+function safeJson(s, fallback) {
+  try {
+    return JSON.parse(s);
+  } catch {
+    return fallback;
+  }
+}
+function tryPretty(s) {
+  const t = s.trim();
+  if (!/^[[{]/.test(t)) return s;
+  try {
+    return JSON.stringify(JSON.parse(t), null, 2);
+  } catch {
+    return s;
+  }
+}
+
+// src/index.ts
+function defineDeweeChat(tag = "dewee-chat") {
+  if (typeof window === "undefined" || !window.customElements) return;
+  if (!customElements.get(tag)) customElements.define(tag, class extends DeweeChatElement {
+  });
+}
+function mount(config = {}, target) {
+  defineDeweeChat();
+  const el2 = document.createElement("dewee-chat");
+  el2.configure(config);
+  const parent = typeof target === "string" ? document.querySelector(target) : target;
+  (parent ?? document.body).appendChild(el2);
+  return el2;
+}
+defineDeweeChat();
+
+export {
+  ApiError,
+  ApiClient,
+  renderMarkdown,
+  DeweeChatElement,
+  defineDeweeChat,
+  mount
+};