@pluno/product-agent-web 0.1.0

package/dist/product-agent-widget.js

@@ -0,0 +1,901 @@
+import { PlunoProductAgent as $ } from "./product-agent-sdk.js";
+const y = {
+  launcherLabel: "Ask AI...",
+  accentColor: "#18181b",
+  colorScheme: "light",
+  position: "bottom-right"
+};
+async function I(e = {}) {
+  const o = {
+    launcherLabel: e.launcherLabel ?? y.launcherLabel,
+    accentColor: e.accentColor ?? y.accentColor,
+    colorScheme: e.colorScheme ?? y.colorScheme,
+    position: e.position ?? y.position,
+    token: e.token,
+    tokenProvider: e.tokenProvider,
+    tokenEndpoint: e.tokenEndpoint,
+    backendUrl: e.backendUrl,
+    webSocketFactory: e.webSocketFactory
+  }, n = document.createElement("div");
+  n.className = `pluno-pa-widget pluno-pa-widget--${o.position}`, n.innerHTML = `
+    <form class="pluno-pa-widget__launcher">
+      <input class="pluno-pa-widget__launcher-input" type="text" placeholder="${A(o.launcherLabel)}" aria-label="${A(o.launcherLabel)}" />
+    </form>
+    <button type="button" class="pluno-pa-widget__close" aria-label="Close" hidden>
+      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </button>
+    <section class="pluno-pa-widget__panel" hidden>
+      <div class="pluno-pa-widget__timeline-wrap">
+        <main class="pluno-pa-widget__timeline">
+          <div class="pluno-pa-widget__empty">What can I help you with?</div>
+        </main>
+        <button type="button" class="pluno-pa-widget__new-chat" aria-label="New chat" title="New chat" hidden>
+          <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+            <path d="M18.4 2.6a2.1 2.1 0 0 1 3 3L12 15l-4 1 1-4Z" />
+          </svg>
+        </button>
+      </div>
+      <form class="pluno-pa-widget__composer">
+        <div class="pluno-pa-widget__composer-inner">
+          <textarea class="pluno-pa-widget__input" rows="1" placeholder="What can I help you with?"></textarea>
+          <button type="button" class="pluno-pa-widget__send" aria-label="Send">
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <line x1="12" y1="19" x2="12" y2="5" />
+              <polyline points="5 12 12 5 19 12" />
+            </svg>
+          </button>
+        </div>
+      </form>
+    </section>
+  `, document.body.appendChild(n), n.classList.add(`pluno-pa-widget--${o.colorScheme}`), B(o.accentColor);
+  const t = n.querySelector(".pluno-pa-widget__launcher"), r = n.querySelector(".pluno-pa-widget__launcher-input"), g = n.querySelector(".pluno-pa-widget__panel"), l = n.querySelector(".pluno-pa-widget__close"), c = n.querySelector(".pluno-pa-widget__composer"), a = n.querySelector(".pluno-pa-widget__input"), i = n.querySelector(".pluno-pa-widget__send"), s = n.querySelector(".pluno-pa-widget__new-chat"), h = n.querySelector(".pluno-pa-widget__timeline");
+  if (!t || !r || !g || !l || !c || !a || !i || !s || !h)
+    throw new Error("Failed to mount Product Agent widget");
+  const p = o.token || o.webSocketFactory ? void 0 : o.tokenProvider ?? (async () => {
+    if (!o.tokenEndpoint)
+      throw new Error("Product Agent widget requires token or tokenEndpoint");
+    const d = await fetch(o.tokenEndpoint, {
+      method: "POST",
+      credentials: "include",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ origin: location.origin, url: location.href })
+    });
+    if (!d.ok)
+      throw new Error("Failed to load Product Agent token");
+    const k = await d.json();
+    if (!k.token)
+      throw new Error("Product Agent token endpoint did not return a token");
+    return k.token;
+  }), u = await $.init({
+    token: o.token,
+    tokenProvider: p,
+    backendUrl: o.backendUrl,
+    webSocketFactory: o.webSocketFactory
+  }), m = F(o), v = new Set(m.openToolGroupKeys);
+  let f = null;
+  const b = () => {
+    H(o, {
+      isOpen: n.classList.contains("pluno-pa-widget--open"),
+      composerValue: a.value,
+      openToolGroupKeys: [...v]
+    });
+  }, _ = (d = "", k = !0) => {
+    if (f !== null && (window.clearTimeout(f), f = null), g.hidden = !1, l.hidden = !1, n.classList.remove("pluno-pa-widget--closing"), !k) {
+      n.classList.add("pluno-pa-widget--open"), t.hidden = !0, d && (a.value = d, x(a)), a.focus(), a.setSelectionRange(a.value.length, a.value.length), b();
+      return;
+    }
+    window.requestAnimationFrame(() => {
+      n.classList.add("pluno-pa-widget--open"), d && (a.value = d, x(a)), a.focus(), a.setSelectionRange(a.value.length, a.value.length), b(), f = window.setTimeout(() => {
+        t.hidden = !0;
+      }, 220);
+    });
+  }, S = () => {
+    f !== null && (window.clearTimeout(f), f = null), t.hidden = !1, n.classList.add("pluno-pa-widget--closing"), n.classList.remove("pluno-pa-widget--open"), b(), f = window.setTimeout(() => {
+      g.hidden = !0, l.hidden = !0, n.classList.remove("pluno-pa-widget--closing");
+    }, 220);
+  };
+  t.addEventListener("submit", (d) => {
+    d.preventDefault(), _(r.value), r.value = "";
+  }), r.addEventListener("focus", () => {
+    _(r.value), r.value = "";
+  }), r.addEventListener("input", () => {
+    if (!r.value)
+      return;
+    const d = r.value;
+    _(d), r.value = "";
+  }), l.addEventListener("click", S);
+  const L = (d) => {
+    if (!(!d.metaKey || d.key.toLowerCase() !== "k")) {
+      if (d.preventDefault(), g.hidden || !n.classList.contains("pluno-pa-widget--open")) {
+        _();
+        return;
+      }
+      S();
+    }
+  };
+  return document.addEventListener("keydown", L), c.addEventListener("submit", (d) => {
+    d.preventDefault(), E(u, a);
+  }), i.addEventListener("click", () => {
+    if (u.getState().isThinking) {
+      u.stop();
+      return;
+    }
+    E(u, a);
+  }), s.addEventListener("click", () => {
+    u.startNewSession(), v.clear(), a.value = "", x(a), b(), a.focus();
+  }), a.addEventListener("input", () => {
+    x(a), b();
+  }), a.addEventListener("keydown", (d) => {
+    d.key !== "Enter" || d.shiftKey || (d.preventDefault(), E(u, a));
+  }), m.composerValue && (a.value = m.composerValue, x(a)), m.isOpen && _(a.value, !1), u.on(
+    "state",
+    (d) => T(h, i, s, d, v, b)
+  ), T(h, i, s, u.getState(), v, b), {
+    agent: u,
+    destroy: () => {
+      u.destroy(), document.removeEventListener("keydown", L), n.remove();
+    }
+  };
+}
+function E(e, o) {
+  const n = o.value.trim();
+  n && (o.value = "", o.style.height = "", o.style.overflowY = "hidden", e.sendMessage(n), o.dispatchEvent(new Event("input", { bubbles: !0 })));
+}
+function x(e) {
+  e.style.height = "0px";
+  const o = Math.min(e.scrollHeight, 140);
+  e.style.height = `${o}px`, e.style.overflowY = e.scrollHeight > 140 ? "auto" : "hidden";
+}
+function T(e, o, n, t, r, g) {
+  const l = [...t.messages];
+  e.innerHTML = "", O(o, t.isThinking);
+  const c = l.length > 0 || !!t.assistantDraft;
+  if (n.hidden = !c, l.length === 0 && !t.assistantDraft && !t.lastError) {
+    e.innerHTML = '<div class="pluno-pa-widget__empty">What can I help you with?</div>';
+    return;
+  }
+  let a = null, i = null, s = [];
+  const h = () => {
+    if (s.length === 0)
+      return;
+    const p = W(s, r, g);
+    e.appendChild(p), a = null, i = p, s = [];
+  };
+  for (let p = 0; p < l.length; p += 1) {
+    const u = l[p];
+    if (u.role === "tool") {
+      s.push(u);
+      continue;
+    }
+    if (u.role === "system")
+      continue;
+    h();
+    const m = document.createElement("div");
+    m.className = `pluno-pa-widget__message pluno-pa-widget__message--${u.role}`, u.role === "assistant" ? N(m, u.content) : m.textContent = u.content, e.appendChild(m), a = m, i = null;
+  }
+  if (h(), t.assistantDraft) {
+    const p = document.createElement("div");
+    p.className = "pluno-pa-widget__message pluno-pa-widget__message--assistant", N(p, t.assistantDraft), e.appendChild(p), a = p, i = null;
+  }
+  if (t.isThinking && !t.assistantDraft) {
+    const p = document.createElement("div");
+    p.className = "pluno-pa-widget__status", p.textContent = "Thinking...", e.appendChild(p), a = null, i = p;
+  }
+  if (t.lastError) {
+    const p = document.createElement("div");
+    p.className = "pluno-pa-widget__error", p.textContent = t.lastError, e.appendChild(p), a = p, i = null;
+  }
+  a?.classList.add("pluno-pa-widget__message--bottom-reserve"), i?.classList.add("pluno-pa-widget__bottom-reserve-compact"), e.scrollTop = e.scrollHeight;
+}
+function W(e, o, n) {
+  const t = document.createElement("article");
+  t.className = "pluno-pa-widget__tool-group", t.title = new Date(e[e.length - 1].createdAt).toLocaleString();
+  const r = document.createElement("details"), g = M(e);
+  r.open = o.has(g), r.addEventListener("toggle", () => {
+    r.open ? o.add(g) : o.delete(g), n();
+  });
+  const l = document.createElement("summary");
+  l.className = "pluno-pa-widget__tool-summary", e.some((i) => i.loading) && l.appendChild(z());
+  const a = document.createElement("span");
+  if (a.textContent = e[e.length - 1].content || "Run tool", l.appendChild(a), r.appendChild(l), e.length > 0) {
+    const i = document.createElement("div");
+    i.className = "pluno-pa-widget__tool-lines";
+    for (const s of e) {
+      const h = document.createElement("div");
+      h.className = "pluno-pa-widget__tool-line", s.loading && h.appendChild(z());
+      const p = document.createElement("span");
+      p.textContent = s.content || "Run tool", h.appendChild(p), i.appendChild(h);
+    }
+    r.appendChild(i);
+  }
+  return t.appendChild(r), t;
+}
+function M(e) {
+  return `tools:${e.map((o) => o.id).join("|")}`;
+}
+function z() {
+  const e = document.createElement("span");
+  return e.className = "pluno-pa-widget__spinner", e.setAttribute("aria-hidden", "true"), e;
+}
+function O(e, o) {
+  e.setAttribute("aria-label", o ? "Stop" : "Send"), e.classList.toggle("pluno-pa-widget__send--stop", o), e.innerHTML = o ? '<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>' : '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="19" x2="12" y2="5" /><polyline points="5 12 12 5 19 12" /></svg>';
+}
+function N(e, o) {
+  const n = o.replace(/\r\n/g, `
+`).split(`
+`);
+  let t = 0;
+  for (; t < n.length; ) {
+    const r = n[t];
+    if (!r.trim()) {
+      t += 1;
+      continue;
+    }
+    if (r.match(/^```(\w+)?\s*$/)) {
+      const i = [];
+      for (t += 1; t < n.length && !/^```\s*$/.test(n[t]); )
+        i.push(n[t]), t += 1;
+      t += t < n.length ? 1 : 0;
+      const s = document.createElement("pre"), h = document.createElement("code");
+      h.textContent = i.join(`
+`), s.appendChild(h), e.appendChild(s);
+      continue;
+    }
+    const l = r.match(/^(#{1,3})\s+(.+)$/);
+    if (l) {
+      const i = document.createElement(`h${l[1].length + 2}`);
+      C(i, l[2]), e.appendChild(i), t += 1;
+      continue;
+    }
+    if (/^\s*[-*+]\s+/.test(r)) {
+      const i = document.createElement("ul");
+      for (; t < n.length && /^\s*[-*+]\s+/.test(n[t]); ) {
+        const s = document.createElement("li");
+        C(s, n[t].replace(/^\s*[-*+]\s+/, "")), i.appendChild(s), t += 1;
+      }
+      e.appendChild(i);
+      continue;
+    }
+    if (/^\s*\d+\.\s+/.test(r)) {
+      const i = document.createElement("ol");
+      for (; t < n.length && /^\s*\d+\.\s+/.test(n[t]); ) {
+        const s = document.createElement("li");
+        C(s, n[t].replace(/^\s*\d+\.\s+/, "")), i.appendChild(s), t += 1;
+      }
+      e.appendChild(i);
+      continue;
+    }
+    const c = [r];
+    for (t += 1; t < n.length && n[t].trim() && !/^```/.test(n[t]) && !/^(#{1,3})\s+/.test(n[t]) && !/^\s*[-*+]\s+/.test(n[t]) && !/^\s*\d+\.\s+/.test(n[t]); )
+      c.push(n[t]), t += 1;
+    const a = document.createElement("p");
+    c.forEach((i, s) => {
+      s > 0 && a.appendChild(document.createElement("br")), C(a, i);
+    }), e.appendChild(a);
+  }
+}
+function C(e, o) {
+  const n = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\(([^)\s]+)\))/g;
+  let t = 0;
+  for (const r of o.matchAll(n)) {
+    const g = r.index ?? 0;
+    g > t && e.appendChild(document.createTextNode(o.slice(t, g)));
+    const l = r[0];
+    if (l.startsWith("`")) {
+      const c = document.createElement("code");
+      c.textContent = l.slice(1, -1), e.appendChild(c);
+    } else if (l.startsWith("**")) {
+      const c = document.createElement("strong");
+      c.textContent = l.slice(2, -2), e.appendChild(c);
+    } else if (l.startsWith("*")) {
+      const c = document.createElement("em");
+      c.textContent = l.slice(1, -1), e.appendChild(c);
+    } else {
+      const c = l.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/);
+      if (c && j(c[2])) {
+        const a = document.createElement("a");
+        a.href = c[2], a.target = "_top", a.rel = "noreferrer", a.textContent = c[1], e.appendChild(a);
+      } else
+        e.appendChild(document.createTextNode(l));
+    }
+    t = g + l.length;
+  }
+  t < o.length && e.appendChild(document.createTextNode(o.slice(t)));
+}
+function j(e) {
+  if (e.startsWith("/") || e.startsWith("#"))
+    return !0;
+  try {
+    const o = new URL(e);
+    return ["http:", "https:", "mailto:"].includes(o.protocol);
+  } catch {
+    return !1;
+  }
+}
+function B(e) {
+  if (document.getElementById("pluno-pa-widget-styles"))
+    return;
+  const o = document.createElement("style");
+  o.id = "pluno-pa-widget-styles", o.textContent = `
+    .pluno-pa-widget {
+      --pluno-pa-accent: ${e};
+      --pluno-pa-bg: #fafaf9;
+      --pluno-pa-surface: #f4f4f2;
+      --pluno-pa-bubble: #eeeded;
+      --pluno-pa-text: #18181b;
+      --pluno-pa-muted: #5c5c63;
+      --pluno-pa-faint: #8e8e95;
+      --pluno-pa-divider: rgba(24, 24, 27, 0.08);
+      --pluno-pa-launcher-hairline: rgba(24, 24, 27, 0.06);
+      --pluno-pa-launcher-width: min(175px, calc(100vw - 36px));
+      --pluno-pa-accent-soft: rgba(24, 24, 27, 0.12);
+      --pluno-pa-accent-contrast: #fafafa;
+      position: fixed;
+      z-index: 2147483645;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif;
+      font-size: 14px;
+      color: var(--pluno-pa-text);
+      width: var(--pluno-pa-launcher-width);
+      height: 41px;
+      transition:
+        width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        height 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+    .pluno-pa-widget--dark {
+      --pluno-pa-bg: #0f0f10;
+      --pluno-pa-surface: #18181a;
+      --pluno-pa-bubble: #232326;
+      --pluno-pa-text: #f5f5f4;
+      --pluno-pa-muted: #a1a1a6;
+      --pluno-pa-faint: #6b6b72;
+      --pluno-pa-divider: rgba(245, 245, 244, 0.12);
+      --pluno-pa-launcher-hairline: rgba(245, 245, 244, 0.1);
+      --pluno-pa-accent-soft: rgba(245, 245, 244, 0.22);
+      --pluno-pa-accent-contrast: #18181b;
+    }
+    .pluno-pa-widget * {
+      box-sizing: border-box;
+    }
+    .pluno-pa-widget [hidden] {
+      display: none !important;
+    }
+    .pluno-pa-widget--bottom-right { right: 26px; bottom: 24px; }
+    .pluno-pa-widget--bottom-left { left: 26px; bottom: 24px; }
+    .pluno-pa-widget--open,
+    .pluno-pa-widget--closing {
+      width: min(420px, calc(100vw - 28px));
+      height: min(680px, calc(100vh - 28px));
+    }
+    .pluno-pa-widget__launcher {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: var(--pluno-pa-launcher-width);
+      height: 41px;
+      border: 0;
+      border-radius: 21px;
+      background: var(--pluno-pa-surface);
+      margin: 0;
+      box-shadow:
+        0 10px 30px rgba(24, 24, 27, 0.18),
+        inset 0 0 0 1px var(--pluno-pa-launcher-hairline);
+      transform-origin: bottom right;
+      transition:
+        opacity 160ms ease,
+        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
+        box-shadow 150ms ease,
+        background 150ms ease;
+    }
+    .pluno-pa-widget__launcher-input {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      outline: none;
+      background: transparent;
+      color: var(--pluno-pa-text);
+      padding: 0 12px 0 18px;
+      font: inherit;
+      font-size: 15px;
+      line-height: 41px;
+    }
+    .pluno-pa-widget__launcher-input::placeholder {
+      color: var(--pluno-pa-faint);
+    }
+    .pluno-pa-widget--bottom-left .pluno-pa-widget__launcher {
+      left: 0;
+      right: auto;
+      transform-origin: bottom left;
+    }
+    .pluno-pa-widget__launcher:hover {
+      box-shadow:
+        0 12px 32px rgba(24, 24, 27, 0.16),
+        inset 0 0 0 1px color-mix(in srgb, var(--pluno-pa-accent) 55%, transparent);
+    }
+    .pluno-pa-widget__launcher:focus-within {
+      box-shadow:
+        0 12px 32px rgba(24, 24, 27, 0.16),
+        inset 0 0 0 1px var(--pluno-pa-launcher-hairline);
+    }
+    .pluno-pa-widget--open .pluno-pa-widget__launcher {
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(-8px) scale(0.96);
+    }
+    .pluno-pa-widget__panel {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+      background: var(--pluno-pa-bg);
+      border: 1px solid var(--pluno-pa-divider);
+      border-radius: 14px;
+      box-shadow: 0 18px 54px rgba(24, 24, 27, 0.18);
+      overflow: hidden;
+      opacity: 0;
+      transform: translateY(14px) scale(0.96);
+      transform-origin: bottom right;
+      transition:
+        opacity 180ms ease,
+        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+    .pluno-pa-widget--bottom-left .pluno-pa-widget__panel {
+      left: 0;
+      right: auto;
+      transform-origin: bottom left;
+    }
+    .pluno-pa-widget--open .pluno-pa-widget__panel {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    .pluno-pa-widget__close {
+      position: absolute;
+      top: -42px;
+      right: 0;
+      z-index: 2;
+      width: 32px;
+      height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--pluno-pa-divider);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--pluno-pa-bg) 92%, transparent);
+      color: var(--pluno-pa-muted);
+      cursor: pointer;
+      padding: 0;
+      opacity: 0;
+      transform: translateY(8px) scale(0.96);
+      transition:
+        opacity 150ms ease,
+        background 120ms ease,
+        color 120ms ease,
+        transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+    .pluno-pa-widget--open .pluno-pa-widget__close {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    .pluno-pa-widget__close:hover {
+      background: var(--pluno-pa-surface);
+      color: var(--pluno-pa-text);
+    }
+    .pluno-pa-widget__close:active {
+      transform: scale(0.96);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .pluno-pa-widget__launcher,
+      .pluno-pa-widget__panel,
+      .pluno-pa-widget__close,
+      .pluno-pa-widget {
+        transition: none;
+      }
+    }
+    .pluno-pa-widget__timeline-wrap {
+      flex: 1 1 0;
+      min-height: 0;
+      position: relative;
+    }
+    .pluno-pa-widget__timeline-wrap::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 18px;
+      pointer-events: none;
+      z-index: 1;
+      background: linear-gradient(
+        to bottom,
+        var(--pluno-pa-bg) 0%,
+        color-mix(in srgb, var(--pluno-pa-bg) 72%, transparent) 42%,
+        transparent 100%
+      );
+    }
+    .pluno-pa-widget__timeline {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+      overflow: auto;
+      padding: 22px 14px 12px;
+      min-height: 0;
+      scrollbar-color: var(--pluno-pa-divider) transparent;
+      scrollbar-width: thin;
+    }
+    .pluno-pa-widget__new-chat {
+      position: absolute;
+      right: 14px;
+      bottom: 14px;
+      z-index: 2;
+      width: 36px;
+      height: 36px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--pluno-pa-divider);
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--pluno-pa-bg) 92%, transparent);
+      color: var(--pluno-pa-text);
+      box-shadow: 0 6px 14px rgba(24, 24, 27, 0.08);
+      cursor: pointer;
+      padding: 0;
+      transition:
+        background 120ms ease,
+        transform 120ms ease,
+        box-shadow 120ms ease;
+    }
+    .pluno-pa-widget__new-chat:hover:not(:disabled) {
+      background: var(--pluno-pa-surface);
+      box-shadow: 0 8px 18px rgba(24, 24, 27, 0.1);
+    }
+    .pluno-pa-widget__new-chat:active:not(:disabled) {
+      transform: scale(0.96);
+    }
+    .pluno-pa-widget__timeline::-webkit-scrollbar,
+    .pluno-pa-widget__message--assistant pre::-webkit-scrollbar,
+    .pluno-pa-widget__input::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    .pluno-pa-widget__timeline::-webkit-scrollbar-track,
+    .pluno-pa-widget__message--assistant pre::-webkit-scrollbar-track,
+    .pluno-pa-widget__input::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .pluno-pa-widget__timeline::-webkit-scrollbar-thumb,
+    .pluno-pa-widget__message--assistant pre::-webkit-scrollbar-thumb,
+    .pluno-pa-widget__input::-webkit-scrollbar-thumb {
+      background: var(--pluno-pa-divider);
+      border-radius: 999px;
+    }
+    .pluno-pa-widget__timeline::-webkit-scrollbar-corner,
+    .pluno-pa-widget__message--assistant pre::-webkit-scrollbar-corner,
+    .pluno-pa-widget__input::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+    .pluno-pa-widget__message {
+      min-width: 0;
+      color: var(--pluno-pa-text);
+      font-size: 14px;
+      line-height: 1.55;
+      white-space: pre-wrap;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    .pluno-pa-widget__message--user {
+      align-self: flex-end;
+      max-width: 85%;
+      margin-left: auto;
+      background: var(--pluno-pa-bubble);
+      border-radius: 16px 16px 4px 16px;
+      padding: 8px 12px;
+    }
+    .pluno-pa-widget__message--assistant {
+      align-self: stretch;
+      padding: 0 2px;
+    }
+    .pluno-pa-widget__message--bottom-reserve {
+      margin-bottom: 46px;
+    }
+    .pluno-pa-widget__bottom-reserve-compact {
+      margin-bottom: 28px;
+    }
+    .pluno-pa-widget__message--assistant > :first-child {
+      margin-top: 0;
+    }
+    .pluno-pa-widget__message--assistant > :last-child {
+      margin-bottom: 0;
+    }
+    .pluno-pa-widget__message--assistant p,
+    .pluno-pa-widget__message--assistant ul,
+    .pluno-pa-widget__message--assistant ol,
+    .pluno-pa-widget__message--assistant pre,
+    .pluno-pa-widget__message--assistant h3,
+    .pluno-pa-widget__message--assistant h4,
+    .pluno-pa-widget__message--assistant h5 {
+      margin: 0 0 10px;
+      color: inherit;
+    }
+    .pluno-pa-widget__message--assistant h3,
+    .pluno-pa-widget__message--assistant h4,
+    .pluno-pa-widget__message--assistant h5 {
+      font-size: 14px;
+      line-height: 1.35;
+      font-weight: 650;
+    }
+    .pluno-pa-widget__message--assistant ul,
+    .pluno-pa-widget__message--assistant ol {
+      padding-left: 20px;
+    }
+    .pluno-pa-widget__message--assistant code {
+      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+      font-size: 12px;
+      background: rgba(24, 24, 27, 0.05);
+      padding: 1px 5px;
+      border-radius: 4px;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    .pluno-pa-widget__message--assistant pre {
+      background: var(--pluno-pa-bubble);
+      color: var(--pluno-pa-text);
+      padding: 12px;
+      border-radius: 8px;
+      overflow-x: auto;
+      font-size: 12px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      scrollbar-color: var(--pluno-pa-divider) transparent;
+      scrollbar-width: thin;
+    }
+    .pluno-pa-widget__message--assistant pre code {
+      background: transparent;
+      padding: 0;
+      white-space: pre-wrap;
+    }
+    .pluno-pa-widget__message--assistant a {
+      color: var(--pluno-pa-accent);
+      text-decoration: none;
+      border-bottom: 1px solid color-mix(in srgb, var(--pluno-pa-accent) 30%, transparent);
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    .pluno-pa-widget__message--assistant a:hover {
+      border-bottom-color: var(--pluno-pa-accent);
+    }
+    .pluno-pa-widget__tool-group {
+      font-size: 12px;
+      color: var(--pluno-pa-muted);
+      line-height: 1.35;
+    }
+    .pluno-pa-widget__tool-group details {
+      padding: 0;
+    }
+    .pluno-pa-widget__tool-summary {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      list-style: none;
+      padding: 2px 0;
+      color: var(--pluno-pa-muted);
+    }
+    .pluno-pa-widget__tool-summary::-webkit-details-marker {
+      display: none;
+    }
+    .pluno-pa-widget__tool-summary::before {
+      content: "";
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-left: 4px solid var(--pluno-pa-faint);
+      border-top: 3px solid transparent;
+      border-bottom: 3px solid transparent;
+      transition: transform 150ms ease;
+    }
+    .pluno-pa-widget__tool-group details[open] .pluno-pa-widget__tool-summary::before {
+      transform: rotate(90deg);
+    }
+    .pluno-pa-widget__tool-lines {
+      margin: 6px 0 0 14px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding-left: 10px;
+      border-left: 1px solid var(--pluno-pa-divider);
+    }
+    .pluno-pa-widget__tool-line {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--pluno-pa-muted);
+      line-height: 1.35;
+    }
+    .pluno-pa-widget__spinner {
+      flex: 0 0 auto;
+      width: 10px;
+      height: 10px;
+      border-radius: 999px;
+      border: 1.5px solid var(--pluno-pa-accent-soft);
+      border-top-color: var(--pluno-pa-accent);
+      animation: pluno-pa-spin 0.8s linear infinite;
+    }
+    @keyframes pluno-pa-spin {
+      to { transform: rotate(360deg); }
+    }
+    .pluno-pa-widget__composer {
+      flex: 0 0 auto;
+      margin: 0;
+      padding: 10px 12px 12px;
+      background: var(--pluno-pa-bg);
+      border-top: 1px solid var(--pluno-pa-divider);
+    }
+    .pluno-pa-widget__composer-inner {
+      position: relative;
+      display: flex;
+      align-items: flex-end;
+      background: var(--pluno-pa-surface);
+      border: 1px solid var(--pluno-pa-divider);
+      border-radius: 14px;
+      padding: 8px 44px 8px 12px;
+      transition: border-color 150ms ease;
+    }
+    .pluno-pa-widget__composer-inner:focus-within {
+      border-color: var(--pluno-pa-accent);
+    }
+    .pluno-pa-widget__input {
+      flex: 1;
+      width: 100%;
+      resize: none;
+      min-height: 22px;
+      max-height: 160px;
+      border: 0;
+      outline: none;
+      background: transparent;
+      color: inherit;
+      padding: 3px 0;
+      font: inherit;
+      font-size: 14px;
+      line-height: 1.45;
+      overflow-y: hidden;
+      scrollbar-color: var(--pluno-pa-divider) transparent;
+      scrollbar-width: thin;
+    }
+    .pluno-pa-widget__input::placeholder {
+      color: var(--pluno-pa-faint);
+    }
+    .pluno-pa-widget__send {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      margin-top: -14px;
+      width: 28px;
+      height: 28px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      border-radius: 999px;
+      background: var(--pluno-pa-accent);
+      color: var(--pluno-pa-accent-contrast);
+      padding: 0;
+      cursor: pointer;
+      transition: filter 120ms ease, transform 120ms ease;
+    }
+    .pluno-pa-widget__send:hover:not(:disabled) {
+      filter: brightness(0.92);
+    }
+    .pluno-pa-widget__send:active:not(:disabled) {
+      transform: scale(0.96);
+    }
+    .pluno-pa-widget__send--stop svg {
+      width: 18px;
+      height: 18px;
+    }
+    .pluno-pa-widget__send:disabled {
+      background: var(--pluno-pa-surface);
+      color: var(--pluno-pa-faint);
+      cursor: not-allowed;
+    }
+    .pluno-pa-widget__empty,
+    .pluno-pa-widget__status,
+    .pluno-pa-widget__error {
+      color: var(--pluno-pa-faint);
+      font-size: 13px;
+      text-align: center;
+      margin: auto;
+      padding: 24px 0;
+    }
+    .pluno-pa-widget__status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      align-self: flex-start;
+      margin: 0;
+      color: var(--pluno-pa-muted);
+      font-size: 12px;
+      padding: 2px 0;
+      text-align: left;
+    }
+    .pluno-pa-widget__status::before {
+      content: "";
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: var(--pluno-pa-accent);
+      animation: pluno-pa-pulse 1.2s ease-in-out infinite;
+    }
+    @keyframes pluno-pa-pulse {
+      0%, 100% { opacity: 0.25; transform: scale(0.85); }
+      50% { opacity: 1; transform: scale(1); }
+    }
+    .pluno-pa-widget__error {
+      margin: 0 14px 8px;
+      padding: 6px 10px;
+      border-radius: 8px;
+      background: rgba(239, 68, 68, 0.14);
+      color: #ef4444;
+      font-size: 12px;
+      line-height: 1.4;
+      text-align: left;
+    }
+    .pluno-pa-widget__status.pluno-pa-widget__bottom-reserve-compact {
+      margin-bottom: 28px;
+    }
+    .pluno-pa-widget__error.pluno-pa-widget__message--bottom-reserve {
+      margin-bottom: 46px;
+    }
+  `, document.head.appendChild(o);
+}
+function A(e) {
+  const o = document.createElement("span");
+  return o.textContent = e, o.innerHTML;
+}
+function P(e) {
+  return `pluno.productAgent.widgetState.${location.origin}.${e.backendUrl ?? ""}.${e.tokenEndpoint ?? ""}.${e.position ?? ""}`;
+}
+function F(e) {
+  try {
+    const o = window.localStorage.getItem(P(e));
+    if (!o)
+      return { isOpen: !1, composerValue: "", openToolGroupKeys: [] };
+    const n = JSON.parse(o);
+    return {
+      isOpen: n.isOpen === !0,
+      composerValue: typeof n.composerValue == "string" ? n.composerValue : "",
+      openToolGroupKeys: Array.isArray(n.openToolGroupKeys) ? n.openToolGroupKeys.filter((t) => typeof t == "string") : []
+    };
+  } catch {
+    return { isOpen: !1, composerValue: "", openToolGroupKeys: [] };
+  }
+}
+function H(e, o) {
+  try {
+    window.localStorage.setItem(P(e), JSON.stringify(o));
+  } catch {
+    return;
+  }
+}
+const w = document.currentScript;
+w && w.dataset.plunoAutoMount !== "false" && I({
+  token: w?.dataset.plunoToken,
+  tokenEndpoint: w?.dataset.plunoTokenEndpoint,
+  backendUrl: w?.dataset.plunoBackendUrl,
+  launcherLabel: w?.dataset.plunoLauncherLabel,
+  accentColor: w?.dataset.plunoAccentColor,
+  colorScheme: w?.dataset.plunoColorScheme === "dark" ? "dark" : "light",
+  position: w?.dataset.plunoPosition === "bottom-left" ? "bottom-left" : "bottom-right"
+}).catch((e) => {
+  console.error("Failed to mount Pluno Product Agent widget", e);
+});
+export {
+  I as mountPlunoProductAgentWidget
+};