@pluno/product-agent-web 0.1.9 → 0.1.11

package/dist/product-agent-widget.js

@@ -1,27 +1,214 @@
-import { PlunoProductAgent as I } from "./product-agent-sdk.js";
-const S = {
+import { PlunoProductAgent as se } from "./product-agent-sdk.js";
+const de = "#7c3aed";
+function ce(t) {
+  const e = ue(t);
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1254 1254" role="img" aria-label="Pluno">
+  <defs>
+    <linearGradient id="boltFill" x1="420" y1="180" x2="790" y2="1040" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="${e.top}"/>
+      <stop offset="0.36" stop-color="${e.middle}"/>
+      <stop offset="0.72" stop-color="${e.bottom}"/>
+      <stop offset="1" stop-color="${e.bottom}"/>
+    </linearGradient>
+    <linearGradient id="boltEdge" x1="470" y1="145" x2="900" y2="980" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="${e.edgeStart}"/>
+      <stop offset="0.32" stop-color="${e.edgeMiddle}"/>
+      <stop offset="0.78" stop-color="${e.edgeEnd}"/>
+      <stop offset="1" stop-color="${e.edgeEnd}"/>
+    </linearGradient>
+    <radialGradient id="boltGlow" cx="50%" cy="22%" r="82%">
+      <stop offset="0" stop-color="${e.glow}" stop-opacity="0.72"/>
+      <stop offset="0.5" stop-color="${e.middle}" stop-opacity="0.44"/>
+      <stop offset="1" stop-color="${e.bottom}" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="eyeWhite" cx="35%" cy="25%" r="70%">
+      <stop offset="0" stop-color="#ffffff"/>
+      <stop offset="0.72" stop-color="#ffffff"/>
+      <stop offset="1" stop-color="#e5e5e5"/>
+    </radialGradient>
+    <radialGradient id="pupil" cx="42%" cy="38%" r="65%">
+      <stop offset="0" stop-color="#2a1f10"/>
+      <stop offset="0.52" stop-color="#080604"/>
+      <stop offset="1" stop-color="#000000"/>
+    </radialGradient>
+    <filter id="softDropShadow" x="-18%" y="-12%" width="136%" height="136%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="12" stdDeviation="18" flood-color="${e.shadow}" flood-opacity="0.24"/>
+    </filter>
+    <filter id="innerDepth" x="-8%" y="-8%" width="116%" height="116%" color-interpolation-filters="sRGB">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"/>
+      <feOffset dx="-7" dy="-9" result="topLeft"/>
+      <feComposite in="topLeft" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="innerShadow"/>
+      <feColorMatrix in="innerShadow" type="matrix" values="1 0 0 0 1  0 1 0 0 1  0 0 1 0 1  0 0 0 0.42 0" result="innerLight"/>
+      <feBlend in="SourceGraphic" in2="innerLight" mode="screen"/>
+    </filter>
+    <filter id="eyeShadow" x="-24%" y="-20%" width="148%" height="148%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="5" flood-color="${e.shadow}" flood-opacity="0.3"/>
+    </filter>
+    <filter id="pupilGloss" x="-15%" y="-15%" width="130%" height="130%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.22"/>
+    </filter>
+    <clipPath id="boltClip">
+      <path d="M547 151 C516 151 493 169 485 199 L382 606 C373 641 396 666 431 666 L523 666 C552 666 568 684 563 713 L491 1028 C486 1054 510 1067 527 1044 L894 487 C915 455 894 432 856 432 L815 432 C784 432 773 411 789 382 L904 205 C922 171 901 145 859 145 Z"/>
+    </clipPath>
+  </defs>
+  <g filter="url(#softDropShadow)">
+    <path d="M547 151 C516 151 493 169 485 199 L382 606 C373 641 396 666 431 666 L523 666 C552 666 568 684 563 713 L491 1028 C486 1054 510 1067 527 1044 L894 487 C915 455 894 432 856 432 L815 432 C784 432 773 411 789 382 L904 205 C922 171 901 145 859 145 Z" fill="url(#boltEdge)"/>
+    <path d="M546 166 C522 166 505 180 499 204 L397 606 C390 630 406 646 432 646 L526 646 C568 646 590 672 581 712 L512 1001 C510 1010 518 1014 524 1006 L875 475 C886 458 878 449 855 449 L814 449 C764 449 745 415 769 374 L884 200 C894 181 883 161 858 161 Z" fill="url(#boltFill)" filter="url(#innerDepth)"/>
+    <path d="M546 166 C522 166 505 180 499 204 L397 606 C390 630 406 646 432 646 L526 646 C568 646 590 672 581 712 L512 1001 C510 1010 518 1014 524 1006 L875 475 C886 458 878 449 855 449 L814 449 C764 449 745 415 769 374 L884 200 C894 181 883 161 858 161 Z" fill="url(#boltGlow)" opacity="0.74"/>
+    <g clip-path="url(#boltClip)" opacity="0.42">
+      <path d="M523 181 C505 189 496 206 489 232 L400 594 C397 606 400 619 411 626" fill="none" stroke="${e.highlight}" stroke-width="22" stroke-linecap="round" opacity="0.65"/>
+      <path d="M556 685 L501 994" fill="none" stroke="${e.highlight}" stroke-width="20" stroke-linecap="round" opacity="0.55"/>
+      <path d="M858 160 C882 166 893 181 883 204" fill="none" stroke="${e.inner}" stroke-width="18" stroke-linecap="round" opacity="0.48"/>
+    </g>
+  </g>
+  <g filter="url(#eyeShadow)">
+    <g transform="rotate(-2 528 463)">
+      <ellipse cx="528" cy="463" rx="73" ry="80" fill="url(#eyeWhite)"/>
+      <ellipse cx="533" cy="473" rx="49" ry="57" fill="url(#pupil)" filter="url(#pupilGloss)"/>
+      <circle cx="557" cy="447" r="18" fill="#ffffff"/>
+    </g>
+    <g transform="rotate(2 717 462)">
+      <ellipse cx="717" cy="462" rx="73" ry="80" fill="url(#eyeWhite)"/>
+      <ellipse cx="712" cy="473" rx="49" ry="57" fill="url(#pupil)" filter="url(#pupilGloss)"/>
+      <circle cx="728" cy="447" r="18" fill="#ffffff"/>
+    </g>
+  </g>
+</svg>`;
+}
+function j(t) {
+  return `data:image/svg+xml,${encodeURIComponent(ce(t))}`;
+}
+function ue(t) {
+  const e = ge(t), o = me(ie(e));
+  return o > 0.86 ? {
+    top: "#ffffff",
+    middle: "#f6f6f6",
+    bottom: "#e7e7e7",
+    edgeStart: "#efefef",
+    edgeMiddle: "#d7d7d7",
+    edgeEnd: "#bfbfbf",
+    glow: "#ffffff",
+    highlight: "#ffffff",
+    inner: "#f4f4f4",
+    shadow: "#9d9d9d"
+  } : o < 0.05 ? {
+    top: "#3d3d3d",
+    middle: "#171717",
+    bottom: "#030303",
+    edgeStart: "#5b5b5b",
+    edgeMiddle: "#2f2f2f",
+    edgeEnd: "#0b0b0b",
+    glow: "#6a6a6a",
+    highlight: "#8a8a8a",
+    inner: "#4b4b4b",
+    shadow: "#000000"
+  } : {
+    top: y(e, 0.28, -0.03),
+    middle: y(e, 0.08, 0.04),
+    bottom: y(e, -0.1, 0.02),
+    edgeStart: y(e, 0.08, 0.08),
+    edgeMiddle: y(e, -0.08, 0.08),
+    edgeEnd: y(e, -0.18, 0.05),
+    glow: y(e, 0.32, -0.12),
+    highlight: y(e, 0.38, -0.18),
+    inner: y(e, 0.24, -0.1),
+    shadow: y(e, -0.25, -0.08)
+  };
+}
+function ge(t) {
+  const e = t.trim();
+  return /^#[0-9a-f]{6}$/i.test(e) ? e.toLowerCase() : /^#[0-9a-f]{3}$/i.test(e) ? `#${e.slice(1).split("").map((o) => o + o).join("").toLowerCase()}` : de;
+}
+function ie(t) {
+  return [
+    Number.parseInt(t.slice(1, 3), 16),
+    Number.parseInt(t.slice(3, 5), 16),
+    Number.parseInt(t.slice(5, 7), 16)
+  ];
+}
+function he([t, e, o]) {
+  const n = (a) => Math.max(0, Math.min(255, Math.round(a))).toString(16).padStart(2, "0");
+  return `#${n(t)}${n(e)}${n(o)}`;
+}
+function me([t, e, o]) {
+  const n = (a) => {
+    const i = a / 255;
+    return i <= 0.04045 ? i / 12.92 : ((i + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * n(t) + 0.7152 * n(e) + 0.0722 * n(o);
+}
+function y(t, e, o) {
+  const [n, a, i] = fe(ie(t));
+  return he(we(n, q(a + o), q(i + e)));
+}
+function fe([t, e, o]) {
+  const n = t / 255, a = e / 255, i = o / 255, l = Math.max(n, a, i), d = Math.min(n, a, i), g = (l + d) / 2;
+  if (l === d)
+    return [0, 0, g];
+  const p = l - d, c = g > 0.5 ? p / (2 - l - d) : p / (l + d);
+  return [(l === n ? (a - i) / p + (a < i ? 6 : 0) : l === a ? (i - n) / p + 2 : (n - a) / p + 4) / 6, c, g];
+}
+function we(t, e, o) {
+  if (e === 0)
+    return [o * 255, o * 255, o * 255];
+  const n = o < 0.5 ? o * (1 + e) : o + e - o * e, a = 2 * o - n;
+  return [
+    F(a, n, t + 1 / 3) * 255,
+    F(a, n, t) * 255,
+    F(a, n, t - 1 / 3) * 255
+  ];
+}
+function F(t, e, o) {
+  let n = o;
+  return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? t + (e - t) * 6 * n : n < 1 / 2 ? e : n < 2 / 3 ? t + (e - t) * (2 / 3 - n) * 6 : t;
+}
+function q(t) {
+  return Math.max(0, Math.min(1, t));
+}
+const _e = "product-agent:sdk-preview-socket-connect", be = "product-agent:sdk-preview-socket-send", xe = "product-agent:sdk-preview-socket-close", ve = "product-agent:sdk-preview-socket-open", ye = "product-agent:sdk-preview-socket-message", ke = "product-agent:sdk-preview-socket-error", Ce = "product-agent:sdk-preview-socket-closed", Y = "product-agent:sdk-preview-socket-id", Ee = "product-agent:preview-diagnostic", T = {
   launcherLabel: "Ask for anything...",
-  accentColor: "#18181b",
+  accentColor: "#7c3aed",
   colorScheme: "light",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", sans-serif',
   position: "bottom-right"
 };
-async function K(e = {}) {
-  const t = {
-    launcherLabel: e.launcherLabel ?? S.launcherLabel,
-    accentColor: e.accentColor ?? S.accentColor,
-    colorScheme: e.colorScheme ?? S.colorScheme,
-    position: e.position ?? S.position,
-    token: e.token,
-    tokenProvider: e.tokenProvider,
-    tokenEndpoint: e.tokenEndpoint,
+function Se(t) {
+  return (e) => new C(e, t);
+}
+async function Le(t = {}) {
+  const e = {
+    launcherLabel: t.launcherLabel ?? T.launcherLabel,
+    accentColor: t.accentColor ?? T.accentColor,
+    colorScheme: t.colorScheme ?? T.colorScheme,
+    fontFamily: t.fontFamily ?? T.fontFamily,
+    position: t.position ?? T.position,
+    token: t.token,
+    tokenProvider: t.tokenProvider,
+    tokenEndpoint: t.tokenEndpoint,
+    backendUrl: t.backendUrl,
+    initialStarterPrompts: t.initialStarterPrompts,
+    webSocketFactory: t.webSocketFactory
+  };
+  N("web-sdk.widget", "Mounting widget with merged options", {
+    accentColor: e.accentColor,
+    colorScheme: e.colorScheme,
+    fontFamily: e.fontFamily,
     backendUrl: e.backendUrl,
-    webSocketFactory: e.webSocketFactory
-  }, o = document.createElement("div");
+    hasToken: !!e.token,
+    hasTokenProvider: !!e.tokenProvider,
+    hasTokenEndpoint: !!e.tokenEndpoint,
+    hasWebSocketFactory: !!e.webSocketFactory,
+    initialStarterPromptCount: e.initialStarterPrompts?.length ?? 0
+  });
+  const o = document.createElement("div");
   o.className = "pluno-pa-widget-host";
   const n = o.attachShadow({ mode: "open" }), a = document.createElement("div");
-  a.className = `pluno-pa-widget pluno-pa-widget--${t.position}`, a.innerHTML = `
+  a.className = `pluno-pa-widget pluno-pa-widget--${e.position}`;
+  let i = j(e.accentColor);
+  a.innerHTML = `
     <form class="pluno-pa-widget__launcher">
-      <input class="pluno-pa-widget__launcher-input" type="text" placeholder="${B(t.launcherLabel)}" aria-label="${B(t.launcherLabel)}" />
+      <img class="pluno-pa-widget__character pluno-pa-widget__character--launcher" src="${M(i)}" alt="" aria-hidden="true" />
+      <input class="pluno-pa-widget__launcher-input" type="text" placeholder="${M(e.launcherLabel)}" aria-label="${M(e.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">
@@ -31,7 +218,10 @@ async function K(e = {}) {
     <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 do you want to do today?</div>
+          <div class="pluno-pa-widget__empty-state">
+            <img class="pluno-pa-widget__character pluno-pa-widget__character--empty" src="${M(i)}" alt="" aria-hidden="true" />
+            <div class="pluno-pa-widget__empty">Hey there, I'm Pluno 👋<br />What do you want to do today?</div>
+          </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">
@@ -50,216 +240,305 @@ async function K(e = {}) {
             </svg>
           </button>
         </div>
+        <a class="pluno-pa-widget__powered-by" href="https://pluno.ai" target="_blank" rel="noopener noreferrer">Powered by Pluno.ai</a>
       </form>
     </section>
   `, n.appendChild(a);
-  const w = await J(), s = w.ownerDocument;
-  w.appendChild(o), a.classList.add(`pluno-pa-widget--${t.colorScheme}`), U(n, t.accentColor);
-  const l = a.querySelector(".pluno-pa-widget__launcher"), d = a.querySelector(".pluno-pa-widget__launcher-input"), i = a.querySelector(".pluno-pa-widget__panel"), u = a.querySelector(".pluno-pa-widget__close"), h = a.querySelector(".pluno-pa-widget__composer"), r = a.querySelector(".pluno-pa-widget__input"), p = a.querySelector(".pluno-pa-widget__send"), g = a.querySelector(".pluno-pa-widget__new-chat"), f = a.querySelector(".pluno-pa-widget__timeline");
-  if (!l || !d || !i || !u || !h || !r || !p || !g || !f)
+  const l = await Me(), d = l.ownerDocument;
+  l.appendChild(o), a.classList.add(`pluno-pa-widget--${e.colorScheme}`), ne(n, e.accentColor), Z(a, i, {
+    accentColor: e.accentColor,
+    colorScheme: e.colorScheme,
+    fontFamily: e.fontFamily
+  }), N("web-sdk.widget", "Applied initial widget appearance", {
+    accentColor: e.accentColor,
+    colorScheme: e.colorScheme,
+    fontFamily: e.fontFamily,
+    cssAccent: a.style.getPropertyValue("--pluno-pa-accent")
+  });
+  const g = a.querySelector(".pluno-pa-widget__launcher"), p = a.querySelector(".pluno-pa-widget__launcher-input"), c = a.querySelector(".pluno-pa-widget__panel"), h = a.querySelector(".pluno-pa-widget__close"), b = a.querySelector(".pluno-pa-widget__composer"), s = a.querySelector(".pluno-pa-widget__input"), x = a.querySelector(".pluno-pa-widget__send"), u = a.querySelector(".pluno-pa-widget__new-chat"), m = a.querySelector(".pluno-pa-widget__timeline");
+  if (!g || !p || !c || !h || !b || !s || !x || !u || !m)
     throw new Error("Failed to mount Product Agent widget");
-  const _ = t.token || t.webSocketFactory ? void 0 : t.tokenProvider ?? (async () => {
-    if (!t.tokenEndpoint)
+  const v = e.token || e.webSocketFactory ? void 0 : e.tokenProvider ?? (async () => {
+    if (!e.tokenEndpoint)
       throw new Error("Product Agent widget requires token or tokenEndpoint");
-    const c = await fetch(t.tokenEndpoint, {
+    const r = await fetch(e.tokenEndpoint, {
       method: "POST",
       credentials: "include",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ origin: location.origin, url: location.href })
     });
-    if (!c.ok)
+    if (!r.ok)
       throw new Error("Failed to load Product Agent token");
-    const v = await c.json();
-    if (!v.token)
+    const k = await r.json();
+    if (!k.token)
       throw new Error("Product Agent token endpoint did not return a token");
-    return v.token;
-  }), m = await I.init({
-    token: t.token,
-    tokenProvider: _,
-    backendUrl: t.backendUrl,
-    webSocketFactory: t.webSocketFactory
-  }), C = Z(t), E = new Set(C.openToolGroupKeys);
-  let b = null, z = !1;
-  const q = () => {
-    z || typeof document > "u" || (U(n, t.accentColor), o.isConnected || s.body?.appendChild(o));
-  }, M = new MutationObserver(q);
-  M.observe(s.documentElement, { childList: !0, subtree: !0 });
-  const x = () => {
-    Q(t, {
+    return k.token;
+  }), f = await se.init({
+    token: e.token,
+    tokenProvider: v,
+    backendUrl: e.backendUrl,
+    initialStarterPrompts: e.initialStarterPrompts,
+    webSocketFactory: e.webSocketFactory
+  }), w = Oe(e), _ = new Set(w.openToolGroupKeys);
+  let E = null, R = !1;
+  const pe = () => {
+    R || typeof document > "u" || (ne(n, e.accentColor), o.isConnected || d.body?.appendChild(o));
+  }, U = new MutationObserver(pe);
+  U.observe(d.documentElement, { childList: !0, subtree: !0 });
+  const S = () => {
+    $e(e, {
       isOpen: a.classList.contains("pluno-pa-widget--open"),
-      composerValue: r.value,
-      openToolGroupKeys: [...E]
+      composerValue: s.value,
+      openToolGroupKeys: [..._]
     });
-  }, y = (c = "", v = !0) => {
-    if (b !== null && (window.clearTimeout(b), b = null), i.hidden = !1, u.hidden = !1, a.classList.remove("pluno-pa-widget--closing"), !v) {
-      a.classList.add("pluno-pa-widget--open"), l.hidden = !0, c && (r.value = c, k(r)), r.focus(), r.setSelectionRange(r.value.length, r.value.length), x();
+  }, L = (r = "", k = !0) => {
+    if (E !== null && (window.clearTimeout(E), E = null), c.hidden = !1, h.hidden = !1, a.classList.remove("pluno-pa-widget--closing"), !k) {
+      a.classList.add("pluno-pa-widget--open"), g.hidden = !0, r && (s.value = r, P(s)), s.focus(), s.setSelectionRange(s.value.length, s.value.length), S();
       return;
     }
     window.requestAnimationFrame(() => {
-      a.classList.add("pluno-pa-widget--open"), c && (r.value = c, k(r)), r.focus(), r.setSelectionRange(r.value.length, r.value.length), x(), b = window.setTimeout(() => {
-        l.hidden = !0;
+      a.classList.add("pluno-pa-widget--open"), r && (s.value = r, P(s)), s.focus(), s.setSelectionRange(s.value.length, s.value.length), S(), E = window.setTimeout(() => {
+        g.hidden = !0;
       }, 220);
     });
-  }, N = () => {
-    b !== null && (window.clearTimeout(b), b = null), l.hidden = !1, a.classList.add("pluno-pa-widget--closing"), a.classList.remove("pluno-pa-widget--open"), x(), b = window.setTimeout(() => {
-      i.hidden = !0, u.hidden = !0, a.classList.remove("pluno-pa-widget--closing");
+  }, V = () => {
+    E !== null && (window.clearTimeout(E), E = null), g.hidden = !1, a.classList.add("pluno-pa-widget--closing"), a.classList.remove("pluno-pa-widget--open"), S(), E = window.setTimeout(() => {
+      c.hidden = !0, h.hidden = !0, a.classList.remove("pluno-pa-widget--closing");
     }, 220);
   };
-  l.addEventListener("submit", (c) => {
-    c.preventDefault(), y(d.value), d.value = "";
-  }), d.addEventListener("focus", () => {
-    y(d.value), d.value = "";
-  }), d.addEventListener("input", () => {
-    if (!d.value)
+  g.addEventListener("submit", (r) => {
+    r.preventDefault(), L(p.value), p.value = "";
+  }), g.addEventListener("click", (r) => {
+    r.target !== p && (L(p.value), p.value = "");
+  }), p.addEventListener("focus", () => {
+    L(p.value), p.value = "";
+  }), p.addEventListener("input", () => {
+    if (!p.value)
       return;
-    const c = d.value;
-    y(c), d.value = "";
-  }), u.addEventListener("click", N);
-  const P = (c) => {
-    if (!(!c.metaKey || c.key.toLowerCase() !== "k")) {
-      if (c.preventDefault(), i.hidden || !a.classList.contains("pluno-pa-widget--open")) {
-        y();
+    const r = p.value;
+    L(r), p.value = "";
+  }), h.addEventListener("click", V);
+  const W = (r) => {
+    if (!(!r.metaKey || r.key.toLowerCase() !== "k")) {
+      if (r.preventDefault(), c.hidden || !a.classList.contains("pluno-pa-widget--open")) {
+        L();
         return;
       }
-      N();
+      V();
     }
   };
-  return s.addEventListener("keydown", P), h.addEventListener("submit", (c) => {
-    c.preventDefault(), T(m, r);
-  }), p.addEventListener("click", () => {
-    if (m.getState().isThinking) {
-      m.stop();
+  d.addEventListener("keydown", W), b.addEventListener("submit", (r) => {
+    r.preventDefault(), G(f, s);
+  }), x.addEventListener("click", () => {
+    if (f.getState().isThinking) {
+      f.stop();
       return;
     }
-    T(m, r);
-  }), g.addEventListener("click", () => {
-    m.startNewSession(), E.clear(), r.value = "", k(r), x(), r.focus();
-  }), r.addEventListener("input", () => {
-    k(r), x();
-  }), r.addEventListener("keydown", (c) => {
-    c.key !== "Enter" || c.shiftKey || (c.preventDefault(), T(m, r));
-  }), C.composerValue && (r.value = C.composerValue, k(r)), C.isOpen && y(r.value, !1), m.on(
-    "state",
-    (c) => A(f, p, g, c, E, x, (v) => {
-      m.sendMessage(v);
-    })
-  ), A(f, p, g, m.getState(), E, x, (c) => {
-    m.sendMessage(c);
+    G(f, s);
+  }), u.addEventListener("click", () => {
+    f.startNewSession(), _.clear(), s.value = "", P(s), S(), s.focus();
+  }), s.addEventListener("input", () => {
+    P(s), S();
+  }), s.addEventListener("keydown", (r) => {
+    r.key !== "Enter" || r.shiftKey || (r.preventDefault(), G(f, s));
+  }), a.addEventListener("click", (r) => {
+    (r.target instanceof Element ? r.target : null)?.closest("a[href]") && S();
+  }), w.composerValue && (s.value = w.composerValue, P(s)), w.isOpen && L(s.value, !1);
+  const B = () => i;
+  let $ = f.getState().appearance !== null;
+  return f.on("state", (r) => {
+    r.appearance ? ($ = !0, N("web-sdk.widget", "Agent state supplied appearance", {
+      appearance: r.appearance
+    }), D(r.appearance, "agent.state.appearance")) : $ && ($ = !1, N("web-sdk.widget", "Agent state cleared appearance; reverting to configured widget options", {
+      fallbackAccentColor: e.accentColor,
+      fallbackColorScheme: e.colorScheme,
+      fallbackFontFamily: e.fontFamily
+    }), D({}, "agent.state.appearance-cleared")), J(m, x, u, r, _, S, B, (k) => {
+      f.sendMessage(k);
+    });
+  }), J(m, x, u, f.getState(), _, S, B, (r) => {
+    f.sendMessage(r);
   }), {
-    agent: m,
+    agent: f,
+    updateAppearance: (r) => D(r, "widgetHandle.updateAppearance"),
     destroy: () => {
-      z = !0, M.disconnect(), m.destroy(), s.removeEventListener("keydown", P), o.remove();
+      R = !0, U.disconnect(), f.destroy(), d.removeEventListener("keydown", W), o.remove();
     }
   };
+  function D(r, k) {
+    const A = r.accentColor ?? e.accentColor, H = r.colorScheme ?? e.colorScheme, K = r.fontFamily ?? e.fontFamily;
+    i = j(A), Z(a, i, {
+      accentColor: A,
+      colorScheme: H,
+      fontFamily: K
+    }), N("web-sdk.widget", "Updated widget appearance", {
+      source: k,
+      inputAppearance: r,
+      appliedAccentColor: A,
+      appliedColorScheme: H,
+      appliedFontFamily: K,
+      cssAccent: a.style.getPropertyValue("--pluno-pa-accent")
+    });
+  }
 }
-function T(e, t) {
-  const o = t.value.trim();
-  o && (t.value = "", t.style.height = "22px", t.style.overflowY = "hidden", e.sendMessage(o), t.dispatchEvent(new Event("input", { bubbles: !0 })));
+function Z(t, e, o) {
+  t.classList.toggle("pluno-pa-widget--dark", o.colorScheme === "dark"), t.classList.toggle("pluno-pa-widget--light", o.colorScheme !== "dark"), t.style.setProperty("--pluno-pa-accent", o.accentColor), t.style.fontFamily = o.fontFamily;
+  const n = Array.from(t.querySelectorAll(".pluno-pa-widget__character"));
+  for (const a of n)
+    a.src = e;
 }
-function k(e) {
-  e.style.height = "0px";
-  const t = Math.max(22, Math.min(e.scrollHeight, 140));
-  e.style.height = `${t}px`, e.style.overflowY = e.scrollHeight > 140 ? "auto" : "hidden";
+function N(t, e, o) {
+  if (typeof window > "u")
+    return;
+  const n = window, a = {
+    at: (/* @__PURE__ */ new Date()).toISOString(),
+    source: t,
+    message: e,
+    details: o
+  }, i = n.__plunoProductAgentDiagnostics__ ?? [];
+  i.push(a), i.length > 120 && i.splice(0, i.length - 120), n.__plunoProductAgentDiagnostics__ = i, n.__PLUNO_PRODUCT_AGENT_DIAGNOSTICS__ = () => [...i], window.dispatchEvent(new CustomEvent(Ee, { detail: a }));
 }
-function A(e, t, o, n, a, w, s) {
-  const l = [...n.messages];
-  e.innerHTML = "", V(t, n.isThinking);
-  const d = l.length > 0 || !!n.assistantDraft;
-  if (o.hidden = !d, l.length === 0 && !n.assistantDraft && !n.lastError) {
-    const p = document.createElement("div");
-    p.className = n.starterPrompts.length > 0 ? "pluno-pa-widget__empty-state pluno-pa-widget__empty-state--starter" : "pluno-pa-widget__empty-state";
-    const g = document.createElement("div");
-    if (g.className = "pluno-pa-widget__empty", g.textContent = "What do you want to do today?", p.appendChild(g), n.starterPrompts.length > 0) {
-      const f = document.createElement("div");
-      f.className = "pluno-pa-widget__starter-prompts";
-      for (const _ of n.starterPrompts) {
-        const m = document.createElement("button");
-        m.type = "button", m.className = "pluno-pa-widget__starter-prompt", m.textContent = `"${_}"`, m.addEventListener("click", () => {
-          s(_);
-        }), f.appendChild(m);
-      }
-      p.appendChild(f);
-    }
-    e.appendChild(p);
+function G(t, e) {
+  const o = e.value.trim();
+  o && (e.value = "", e.style.height = "22px", e.style.overflowY = "hidden", t.sendMessage(o), e.dispatchEvent(new Event("input", { bubbles: !0 })));
+}
+function P(t) {
+  t.style.height = "0px";
+  const e = Math.max(22, Math.min(t.scrollHeight, 140));
+  t.style.height = `${e}px`, t.style.overflowY = t.scrollHeight > 140 ? "auto" : "hidden";
+}
+function J(t, e, o, n, a, i, l, d) {
+  const g = [...n.messages];
+  t.innerHTML = "", Ae(e, n.isThinking);
+  const p = g.length > 0 || !!n.assistantDraft || n.isThinking;
+  if (o.hidden = !p, g.length === 0 && !n.assistantDraft && !n.lastError && !n.isThinking) {
+    const u = document.createElement("div");
+    u.className = "pluno-pa-widget__empty-state pluno-pa-widget__empty-state--starter";
+    const m = document.createElement("img");
+    m.className = "pluno-pa-widget__character pluno-pa-widget__character--empty", m.src = l(), m.alt = "", m.setAttribute("aria-hidden", "true"), u.appendChild(m);
+    const v = document.createElement("div");
+    v.className = "pluno-pa-widget__empty", v.innerHTML = "Hey there, I'm Pluno 👋<br />What do you want to do today?", u.appendChild(v);
+    const f = document.createElement("div");
+    f.className = n.starterPrompts.length > 0 ? "pluno-pa-widget__starter-prompts" : "pluno-pa-widget__starter-prompts pluno-pa-widget__starter-prompts--empty", n.starterPrompts.length === 0 && f.setAttribute("aria-hidden", "true");
+    for (const w of n.starterPrompts) {
+      const _ = document.createElement("button");
+      _.type = "button", _.className = "pluno-pa-widget__starter-prompt", _.textContent = `"${w}"`, _.addEventListener("click", () => {
+        d(w);
+      }), f.appendChild(_);
+    }
+    u.appendChild(f), t.appendChild(u);
     return;
   }
-  let i = null, u = null, h = [];
-  const r = () => {
-    if (h.length === 0)
-      return;
-    const p = R(h, a, w);
-    e.appendChild(p), i = null, u = p, h = [];
+  let c = null, h = null, b = [];
+  const s = () => {
+    if (b.length === 0)
+      return !1;
+    const u = Te(b, a, i, l());
+    return t.appendChild(u), c = null, h = u, b = [], !0;
   };
-  for (let p = 0; p < l.length; p += 1) {
-    const g = l[p];
-    if (g.role === "tool") {
-      h.push(g);
+  for (let u = 0; u < g.length; u += 1) {
+    const m = g[u];
+    if (m.role === "tool") {
+      b.push(m);
       continue;
     }
-    if (g.role === "system")
+    if (m.role === "system")
       continue;
-    r();
-    const f = D(g.content), _ = document.createElement("div");
-    _.className = `pluno-pa-widget__message pluno-pa-widget__message--${g.role}`, g.role === "assistant" ? j(_, f) : _.textContent = f, _.appendChild($(f)), e.appendChild(_), i = _, u = null;
-  }
-  if (r(), n.assistantDraft) {
-    const p = D(n.assistantDraft), g = document.createElement("div");
-    g.className = "pluno-pa-widget__message pluno-pa-widget__message--assistant", j(g, p), g.appendChild($(p)), e.appendChild(g), i = g, u = null;
+    const v = s(), f = X(m.content);
+    if (m.role === "assistant" && !v) {
+      const _ = z(l());
+      t.appendChild(_), c = null, h = _;
+    }
+    const w = document.createElement("div");
+    w.className = `pluno-pa-widget__message pluno-pa-widget__message--${m.role}`, m.role === "assistant" ? te(w, f) : w.textContent = f, w.appendChild(Q(f)), t.appendChild(w), c = w, h = null;
   }
-  if (n.isThinking && !n.assistantDraft) {
-    const p = document.createElement("div");
-    p.className = "pluno-pa-widget__status", p.textContent = "Thinking...", e.appendChild(p), i = null, u = p;
+  const x = s();
+  if (n.assistantDraft) {
+    if (!x) {
+      const v = z(l());
+      t.appendChild(v), c = null, h = v;
+    }
+    const u = X(n.assistantDraft), m = document.createElement("div");
+    m.className = "pluno-pa-widget__message pluno-pa-widget__message--assistant", te(m, u), m.appendChild(Q(u)), t.appendChild(m), c = m, h = null;
   }
+  if (n.isThinking && !n.assistantDraft)
+    if (x) {
+      const u = re();
+      t.appendChild(u), c = null, h = u;
+    } else {
+      const u = Ne(l());
+      t.appendChild(u), c = null, h = u;
+    }
   if (n.lastError) {
-    const p = document.createElement("div");
-    p.className = "pluno-pa-widget__error", p.textContent = n.lastError, e.appendChild(p), i = p, u = null;
+    const u = document.createElement("div");
+    u.className = "pluno-pa-widget__error", u.textContent = n.lastError, t.appendChild(u), c = u, h = null;
   }
-  i?.classList.add("pluno-pa-widget__message--bottom-reserve"), u?.classList.add("pluno-pa-widget__bottom-reserve-compact"), e.scrollTop = e.scrollHeight;
+  c?.classList.add("pluno-pa-widget__message--bottom-reserve"), h?.classList.add("pluno-pa-widget__bottom-reserve-compact"), t.scrollTop = t.scrollHeight;
 }
-function $(e) {
-  const t = document.createElement("button");
-  return t.type = "button", t.className = "pluno-pa-widget__message-copy", t.setAttribute("aria-label", "Copy message"), t.title = "Copy message", t.innerHTML = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>', t.addEventListener("click", (o) => {
-    o.preventDefault(), o.stopPropagation(), navigator.clipboard.writeText(e);
-  }), t;
+function Q(t) {
+  const e = document.createElement("button");
+  return e.type = "button", e.className = "pluno-pa-widget__message-copy", e.setAttribute("aria-label", "Copy message"), e.title = "Copy message", e.innerHTML = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>', e.addEventListener("click", (o) => {
+    o.preventDefault(), o.stopPropagation(), navigator.clipboard.writeText(t);
+  }), e;
 }
-function D(e) {
-  return e.replace(/\uE200[^\uE201]*(?:\uE201|$)/g, "");
+function X(t) {
+  return t.replace(/\uE200[^\uE201]*(?:\uE201|$)/g, "");
 }
-function R(e, t, o) {
-  const n = document.createElement("article");
-  n.className = "pluno-pa-widget__tool-group", n.title = new Date(e[e.length - 1].createdAt).toLocaleString();
-  const a = document.createElement("details"), w = G(e);
-  a.open = t.has(w), a.addEventListener("toggle", () => {
-    a.open ? t.add(w) : t.delete(w), o();
+function Te(t, e, o, n) {
+  const a = document.createElement("article");
+  a.className = "pluno-pa-widget__tool-group", a.title = new Date(t[t.length - 1].createdAt).toLocaleString();
+  const i = document.createElement("img");
+  i.className = "pluno-pa-widget__character pluno-pa-widget__character--tool-group", i.src = n, i.alt = "", i.setAttribute("aria-hidden", "true"), a.appendChild(i);
+  const l = document.createElement("details"), d = Pe(t);
+  l.open = e.has(d), l.addEventListener("toggle", () => {
+    l.open ? e.add(d) : e.delete(d), o();
   });
-  const s = document.createElement("summary");
-  s.className = "pluno-pa-widget__tool-summary", e.some((i) => i.loading) && s.appendChild(O());
-  const d = document.createElement("span");
-  if (d.textContent = e[e.length - 1].content || "Run tool", s.appendChild(d), a.appendChild(s), e.length > 0) {
-    const i = document.createElement("div");
-    i.className = "pluno-pa-widget__tool-lines";
-    for (const u of e) {
-      const h = document.createElement("div");
-      h.className = "pluno-pa-widget__tool-line", u.loading && h.appendChild(O());
-      const r = document.createElement("span");
-      r.textContent = u.content || "Run tool", h.appendChild(r), i.appendChild(h);
-    }
-    a.appendChild(i);
+  const g = document.createElement("summary");
+  g.className = "pluno-pa-widget__tool-summary", t.some((h) => h.loading) && g.appendChild(ee());
+  const c = document.createElement("span");
+  if (c.className = "pluno-pa-widget__tool-summary-title", c.textContent = t[t.length - 1].content || "Run tool", g.appendChild(c), l.appendChild(g), t.length > 0) {
+    const h = document.createElement("div");
+    h.className = "pluno-pa-widget__tool-lines";
+    for (const b of t) {
+      const s = document.createElement("div");
+      s.className = "pluno-pa-widget__tool-line", b.loading && s.appendChild(ee());
+      const x = document.createElement("span");
+      x.textContent = b.content || "Run tool", s.appendChild(x), h.appendChild(s);
+    }
+    l.appendChild(h);
   }
-  return n.appendChild(a), n;
+  return a.appendChild(l), a;
+}
+function z(t) {
+  const e = document.createElement("article");
+  e.className = "pluno-pa-widget__tool-group pluno-pa-widget__assistant-marker";
+  const o = document.createElement("img");
+  return o.className = "pluno-pa-widget__character pluno-pa-widget__character--tool-group", o.src = t, o.alt = "", o.setAttribute("aria-hidden", "true"), e.appendChild(o), e;
 }
-function G(e) {
-  return `tools:${e.map((t) => t.id).join("|")}`;
+function Ne(t) {
+  const e = z(t);
+  return e.classList.add("pluno-pa-widget__thinking-marker"), e.appendChild(re()), e;
 }
-function O() {
+function re() {
+  const t = document.createElement("div");
+  t.className = "pluno-pa-widget__status";
   const e = document.createElement("span");
-  return e.className = "pluno-pa-widget__spinner", e.setAttribute("aria-hidden", "true"), e;
+  e.className = "pluno-pa-widget__thinking-dot", e.setAttribute("aria-hidden", "true"), t.appendChild(e);
+  const o = document.createElement("span");
+  return o.textContent = "Thinking...", t.appendChild(o), t;
 }
-function V(e, t) {
-  e.setAttribute("aria-label", t ? "Stop" : "Send"), e.classList.toggle("pluno-pa-widget__send--stop", t), e.innerHTML = t ? '<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 Pe(t) {
+  return `tools:${t.map((e) => e.id).join("|")}`;
 }
-function j(e, t) {
-  const o = t.replace(/\r\n/g, `
+function ee() {
+  const t = document.createElement("span");
+  return t.className = "pluno-pa-widget__spinner", t.setAttribute("aria-hidden", "true"), t;
+}
+function Ae(t, e) {
+  t.setAttribute("aria-label", e ? "Stop" : "Send"), t.classList.toggle("pluno-pa-widget__send--stop", e), t.innerHTML = e ? '<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 te(t, e) {
+  const o = e.replace(/\r\n/g, `
 `).split(`
 `);
   let n = 0;
@@ -270,90 +549,90 @@ function j(e, t) {
       continue;
     }
     if (a.match(/^```(\w+)?\s*$/)) {
-      const i = [];
+      const p = [];
       for (n += 1; n < o.length && !/^```\s*$/.test(o[n]); )
-        i.push(o[n]), n += 1;
+        p.push(o[n]), n += 1;
       n += n < o.length ? 1 : 0;
-      const u = document.createElement("pre"), h = document.createElement("code");
-      h.textContent = i.join(`
-`), u.appendChild(h), e.appendChild(u);
+      const c = document.createElement("pre"), h = document.createElement("code");
+      h.textContent = p.join(`
+`), c.appendChild(h), t.appendChild(c);
       continue;
     }
-    const s = a.match(/^(#{1,3})\s+(.+)$/);
-    if (s) {
-      const i = document.createElement(`h${s[1].length + 2}`);
-      L(i, s[2]), e.appendChild(i), n += 1;
+    const l = a.match(/^(#{1,3})\s+(.+)$/);
+    if (l) {
+      const p = document.createElement(`h${l[1].length + 2}`);
+      I(p, l[2]), t.appendChild(p), n += 1;
       continue;
     }
     if (/^\s*[-*+]\s+/.test(a)) {
-      const i = document.createElement("ul");
+      const p = document.createElement("ul");
       for (; n < o.length && /^\s*[-*+]\s+/.test(o[n]); ) {
-        const u = document.createElement("li");
-        L(u, o[n].replace(/^\s*[-*+]\s+/, "")), i.appendChild(u), n += 1;
+        const c = document.createElement("li");
+        I(c, o[n].replace(/^\s*[-*+]\s+/, "")), p.appendChild(c), n += 1;
       }
-      e.appendChild(i);
+      t.appendChild(p);
       continue;
     }
     if (/^\s*\d+\.\s+/.test(a)) {
-      const i = document.createElement("ol");
+      const p = document.createElement("ol");
       for (; n < o.length && /^\s*\d+\.\s+/.test(o[n]); ) {
-        const u = document.createElement("li");
-        L(u, o[n].replace(/^\s*\d+\.\s+/, "")), i.appendChild(u), n += 1;
+        const c = document.createElement("li");
+        I(c, o[n].replace(/^\s*\d+\.\s+/, "")), p.appendChild(c), n += 1;
       }
-      e.appendChild(i);
+      t.appendChild(p);
       continue;
     }
-    const l = [a];
+    const d = [a];
     for (n += 1; n < o.length && o[n].trim() && !/^```/.test(o[n]) && !/^(#{1,3})\s+/.test(o[n]) && !/^\s*[-*+]\s+/.test(o[n]) && !/^\s*\d+\.\s+/.test(o[n]); )
-      l.push(o[n]), n += 1;
-    const d = document.createElement("p");
-    l.forEach((i, u) => {
-      u > 0 && d.appendChild(document.createElement("br")), L(d, i);
-    }), e.appendChild(d);
+      d.push(o[n]), n += 1;
+    const g = document.createElement("p");
+    d.forEach((p, c) => {
+      c > 0 && g.appendChild(document.createElement("br")), I(g, p);
+    }), t.appendChild(g);
   }
 }
-function L(e, t) {
+function I(t, e) {
   const o = /(`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\(([^)\s]+)\))/g;
   let n = 0;
-  for (const a of t.matchAll(o)) {
-    const w = a.index ?? 0;
-    w > n && e.appendChild(document.createTextNode(t.slice(n, w)));
-    const s = a[0];
-    if (s.startsWith("`")) {
-      const l = document.createElement("code");
-      l.textContent = s.slice(1, -1), e.appendChild(l);
-    } else if (s.startsWith("**")) {
-      const l = document.createElement("strong");
-      l.textContent = s.slice(2, -2), e.appendChild(l);
-    } else if (s.startsWith("*")) {
-      const l = document.createElement("em");
-      l.textContent = s.slice(1, -1), e.appendChild(l);
+  for (const a of e.matchAll(o)) {
+    const i = a.index ?? 0;
+    i > n && t.appendChild(document.createTextNode(e.slice(n, i)));
+    const l = a[0];
+    if (l.startsWith("`")) {
+      const d = document.createElement("code");
+      d.textContent = l.slice(1, -1), t.appendChild(d);
+    } else if (l.startsWith("**")) {
+      const d = document.createElement("strong");
+      d.textContent = l.slice(2, -2), t.appendChild(d);
+    } else if (l.startsWith("*")) {
+      const d = document.createElement("em");
+      d.textContent = l.slice(1, -1), t.appendChild(d);
     } else {
-      const l = s.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/);
-      if (l && Y(l[2])) {
-        const d = document.createElement("a");
-        d.href = l[2], d.target = "_top", d.rel = "noreferrer", d.textContent = l[1], e.appendChild(d);
+      const d = l.match(/^\[([^\]]+)\]\(([^)\s]+)\)$/);
+      if (d && Ie(d[2])) {
+        const g = document.createElement("a");
+        g.href = d[2], g.target = "_top", g.rel = "noreferrer", g.textContent = d[1], t.appendChild(g);
       } else
-        e.appendChild(document.createTextNode(s));
+        t.appendChild(document.createTextNode(l));
     }
-    n = w + s.length;
+    n = i + l.length;
   }
-  n < t.length && e.appendChild(document.createTextNode(t.slice(n)));
+  n < e.length && t.appendChild(document.createTextNode(e.slice(n)));
 }
-function Y(e) {
-  if (e.startsWith("/") || e.startsWith("#"))
+function Ie(t) {
+  if (t.startsWith("/") || t.startsWith("#"))
     return !0;
   try {
-    const t = new URL(e);
-    return ["http:", "https:", "mailto:"].includes(t.protocol);
+    const e = new URL(t);
+    return ["http:", "https:", "mailto:"].includes(e.protocol);
   } catch {
     return !1;
   }
 }
-function U(e, t) {
-  if (e.getElementById("pluno-pa-widget-styles"))
+function ne(t, e) {
+  if (t.getElementById("pluno-pa-widget-styles"))
     return;
-  const o = e.ownerDocument.createElement("style");
+  const o = t.ownerDocument.createElement("style");
   o.id = "pluno-pa-widget-styles", o.textContent = `
     :host {
       all: initial;
@@ -386,7 +665,7 @@ function U(e, t) {
       flex: 0 0 auto;
     }
     .pluno-pa-widget {
-      --pluno-pa-accent: ${t};
+      --pluno-pa-accent: ${e};
       --pluno-pa-bg: #fafaf9;
       --pluno-pa-surface: #f4f4f2;
       --pluno-pa-bubble: #eeeded;
@@ -395,12 +674,12 @@ function U(e, t) {
       --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-launcher-width: min(190px, 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-family: ${T.fontFamily};
       font-size: 14px;
       color: var(--pluno-pa-text);
       width: var(--pluno-pa-launcher-width);
@@ -433,6 +712,8 @@ function U(e, t) {
     }
     .pluno-pa-widget__launcher {
       position: absolute;
+      display: flex;
+      align-items: center;
       right: 0;
       bottom: 0;
       width: var(--pluno-pa-launcher-width);
@@ -451,17 +732,31 @@ function U(e, t) {
         box-shadow 150ms ease,
         background 150ms ease;
     }
+    .pluno-pa-widget__character {
+      display: block;
+      flex: 0 0 auto;
+      user-select: none;
+    }
+    .pluno-pa-widget__character--launcher {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      width: 34px;
+      height: 34px;
+      transform: translateY(-50%);
+      pointer-events: none;
+    }
     .pluno-pa-widget__launcher-input {
       width: 100%;
-      height: 100%;
+      height: 22px;
       border: 0;
       outline: none;
       background: transparent;
       color: var(--pluno-pa-text);
-      padding: 0 12px 0 18px;
+      padding: 0 12px 0 44px;
       font: inherit;
       font-size: 15px;
-      line-height: 41px;
+      line-height: 22px;
     }
     .pluno-pa-widget__launcher-input::placeholder {
       color: var(--pluno-pa-faint);
@@ -788,12 +1083,26 @@ function U(e, t) {
       border-bottom-color: var(--pluno-pa-accent);
     }
     .pluno-pa-widget__tool-group {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
       font-size: 12px;
       color: var(--pluno-pa-muted);
       line-height: 1.35;
+      margin-bottom: -8px;
+    }
+    .pluno-pa-widget__character--tool-group {
+      width: 33px;
+      height: 33px;
+      margin-top: -7px;
+    }
+    .pluno-pa-widget__assistant-marker {
+      min-height: 19px;
     }
     .pluno-pa-widget__tool-group details {
+      min-width: 0;
       padding: 0;
+      max-width: 100%;
     }
     .pluno-pa-widget__tool-summary {
       display: inline-flex;
@@ -803,6 +1112,15 @@ function U(e, t) {
       list-style: none;
       padding: 2px 0;
       color: var(--pluno-pa-muted);
+      max-width: 100%;
+      min-width: 0;
+    }
+    .pluno-pa-widget__tool-summary-title {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .pluno-pa-widget__tool-summary::-webkit-details-marker {
       display: none;
@@ -851,7 +1169,7 @@ function U(e, t) {
     .pluno-pa-widget__composer {
       flex: 0 0 auto;
       margin: 0;
-      padding: 10px 12px 12px;
+      padding: 10px 12px 8px;
       background: var(--pluno-pa-bg);
       border-top: 1px solid var(--pluno-pa-divider);
     }
@@ -859,6 +1177,7 @@ function U(e, t) {
       position: relative;
       display: flex;
       align-items: flex-end;
+      gap: 8px;
       background: var(--pluno-pa-surface);
       border: 1px solid var(--pluno-pa-divider);
       border-radius: 14px;
@@ -878,10 +1197,10 @@ function U(e, t) {
       outline: none;
       background: transparent;
       color: inherit;
-      padding: 3px 0;
+      padding: 0;
       font: inherit;
       font-size: 14px;
-      line-height: 1.45;
+      line-height: 22px;
       height: 22px;
       overflow-y: hidden;
       scrollbar-color: var(--pluno-pa-divider) transparent;
@@ -923,6 +1242,20 @@ function U(e, t) {
       color: var(--pluno-pa-faint);
       cursor: not-allowed;
     }
+    .pluno-pa-widget__powered-by {
+      display: block;
+      width: fit-content;
+      margin: 8px auto 0;
+      color: var(--pluno-pa-faint);
+      font: inherit;
+      font-size: 11px;
+      line-height: 1.2;
+      text-decoration: none;
+      transition: color 120ms ease;
+    }
+    .pluno-pa-widget__powered-by:hover {
+      color: var(--pluno-pa-muted);
+    }
     .pluno-pa-widget__empty,
     .pluno-pa-widget__status,
     .pluno-pa-widget__error {
@@ -945,6 +1278,11 @@ function U(e, t) {
       margin: 0;
       padding: 0;
     }
+    .pluno-pa-widget__character--empty {
+      width: 88px;
+      height: 88px;
+      margin-bottom: -4px;
+    }
     .pluno-pa-widget__empty-state--starter {
       --pluno-pa-starter-edge-gap: 40px;
       margin: auto 0 0;
@@ -957,14 +1295,21 @@ function U(e, t) {
       color: var(--pluno-pa-text);
       font-size: 24px;
       font-weight: 500;
-      line-height: 1.18;
+      line-height: 1.34;
       text-align: left;
     }
+    .pluno-pa-widget__empty-state--starter .pluno-pa-widget__character--empty {
+      margin-bottom: -24px;
+    }
     .pluno-pa-widget__starter-prompts {
       display: grid;
       gap: 18px;
       width: min(100%, 320px);
     }
+    .pluno-pa-widget__starter-prompts--empty {
+      min-height: 96px;
+      pointer-events: none;
+    }
     .pluno-pa-widget__starter-prompt {
       border: 0;
       border-radius: 8px;
@@ -993,8 +1338,8 @@ function U(e, t) {
       padding: 2px 0;
       text-align: left;
     }
-    .pluno-pa-widget__status::before {
-      content: "";
+    .pluno-pa-widget__thinking-dot {
+      flex: 0 0 auto;
       width: 6px;
       height: 6px;
       border-radius: 999px;
@@ -1021,29 +1366,29 @@ function U(e, t) {
     .pluno-pa-widget__error.pluno-pa-widget__message--bottom-reserve {
       margin-bottom: 46px;
     }
-  `, e.appendChild(o);
+  `, t.appendChild(o);
 }
-async function J() {
-  return document.body ? document.body : await new Promise((e) => {
-    const t = new MutationObserver(() => {
-      document.body && (t.disconnect(), e(document.body));
+async function Me() {
+  return document.body ? document.body : await new Promise((t) => {
+    const e = new MutationObserver(() => {
+      document.body && (e.disconnect(), t(document.body));
     });
-    t.observe(document.documentElement, { childList: !0 });
+    e.observe(document.documentElement, { childList: !0 });
   });
 }
-function B(e) {
-  const t = document.createElement("span");
-  return t.textContent = e, t.innerHTML;
+function M(t) {
+  const e = document.createElement("span");
+  return e.textContent = t, e.innerHTML;
 }
-function F(e) {
-  return `pluno.productAgent.widgetState.${location.origin}.${e.backendUrl ?? ""}.${e.tokenEndpoint ?? ""}.${e.position ?? ""}`;
+function le(t) {
+  return `pluno.productAgent.widgetState.${location.origin}.${t.backendUrl ?? ""}.${t.tokenEndpoint ?? ""}.${t.position ?? ""}`;
 }
-function Z(e) {
+function Oe(t) {
   try {
-    const t = window.localStorage.getItem(F(e));
-    if (!t)
+    const e = window.localStorage.getItem(le(t));
+    if (!e)
       return { isOpen: !1, composerValue: "", openToolGroupKeys: [] };
-    const o = JSON.parse(t);
+    const o = JSON.parse(e);
     return {
       isOpen: o.isOpen === !0,
       composerValue: typeof o.composerValue == "string" ? o.composerValue : "",
@@ -1053,49 +1398,132 @@ function Z(e) {
     return { isOpen: !1, composerValue: "", openToolGroupKeys: [] };
   }
 }
-function Q(e, t) {
+function $e(t, e) {
   try {
-    window.localStorage.setItem(F(e), JSON.stringify(t));
+    window.localStorage.setItem(le(t), JSON.stringify(e));
   } catch {
     return;
   }
 }
-const W = /* @__PURE__ */ new WeakSet();
-function X(e) {
-  return Object.keys(e.dataset).some((t) => t.startsWith("pluno"));
+const oe = /* @__PURE__ */ new WeakSet();
+function De(t) {
+  return Object.keys(t.dataset).some((e) => e.startsWith("pluno"));
 }
-function H(e) {
-  const t = e.pathname.split("/");
-  return t[t.length - 1] ?? "";
+function ae(t) {
+  const e = t.pathname.split("/");
+  return e[e.length - 1] ?? "";
 }
-function ee(e, t) {
-  const o = new URL(e.src, document.baseURI);
-  return o.href === t.href || o.pathname === t.pathname ? !0 : H(o) === H(t);
+function Fe(t, e) {
+  const o = new URL(t.src, document.baseURI);
+  return o.href === e.href || o.pathname === e.pathname ? !0 : ae(o) === ae(e);
 }
-function te(e) {
-  const t = document.currentScript;
-  if (t instanceof HTMLScriptElement)
-    return [t];
-  const o = new URL(e, document.baseURI).href, n = new URL(o);
-  return [...document.querySelectorAll("script[type='module'][src]")].filter(
-    (a) => a instanceof HTMLScriptElement && X(a) && ee(a, n)
+class C extends EventTarget {
+  constructor(e, o) {
+    super(), this.channelId = o, this.url = e, this.addPreviewListener(ve, () => {
+      this.readyState = C.OPEN, this.dispatchEvent(new Event("open"));
+    }), this.addPreviewListener(ye, (n) => {
+      const a = n;
+      this.dispatchEvent(new MessageEvent("message", { data: a.detail?.data ?? "" }));
+    }), this.addPreviewListener(ke, () => {
+      this.readyState = C.CLOSED, this.dispatchEvent(new Event("error")), this.cleanup();
+    }), this.addPreviewListener(Ce, (n) => {
+      const a = n;
+      this.readyState = C.CLOSED, this.dispatchEvent(
+        new CloseEvent("close", {
+          code: a.detail?.code ?? 1e3,
+          reason: a.detail?.reason ?? "",
+          wasClean: a.detail?.wasClean ?? !0
+        })
+      ), this.cleanup();
+    }), window.dispatchEvent(
+      new CustomEvent(O(_e, this.channelId), {
+        detail: { socketId: this.socketId, url: e }
+      })
+    );
+  }
+  channelId;
+  static CONNECTING = 0;
+  static OPEN = 1;
+  static CLOSING = 2;
+  static CLOSED = 3;
+  url;
+  protocol = "";
+  extensions = "";
+  binaryType = "blob";
+  bufferedAmount = 0;
+  readyState = C.CONNECTING;
+  socketId = Ge();
+  listeners = /* @__PURE__ */ new Map();
+  send(e) {
+    if (this.readyState !== C.OPEN)
+      throw new DOMException("Product Agent preview websocket is not open", "InvalidStateError");
+    window.dispatchEvent(
+      new CustomEvent(O(be, this.channelId), {
+        detail: { socketId: this.socketId, data: typeof e == "string" ? e : String(e) }
+      })
+    );
+  }
+  close(e, o) {
+    this.readyState !== C.CLOSED && (this.readyState = C.CLOSING, window.dispatchEvent(
+      new CustomEvent(O(xe, this.channelId), {
+        detail: { socketId: this.socketId, code: e, reason: o }
+      })
+    ), this.cleanup());
+  }
+  addPreviewListener(e, o) {
+    const n = O(e, this.channelId), a = (i) => {
+      i.detail?.socketId === this.socketId && o(i);
+    };
+    this.listeners.set(n, a), window.addEventListener(n, a);
+  }
+  cleanup() {
+    for (const [e, o] of this.listeners.entries())
+      window.removeEventListener(e, o);
+    this.listeners.clear();
+  }
+}
+function Ge() {
+  const t = window.sessionStorage.getItem(Y);
+  if (t)
+    return t;
+  const e = crypto.randomUUID();
+  return window.sessionStorage.setItem(Y, e), e;
+}
+function O(t, e) {
+  return `${t}:${e}`;
+}
+function ze(t) {
+  const e = document.currentScript;
+  if (e instanceof HTMLScriptElement)
+    return [e];
+  const o = new URL(t, document.baseURI).href, n = new URL(o);
+  return Array.from(document.querySelectorAll("script[type='module'][src]")).filter(
+    (a) => a instanceof HTMLScriptElement && De(a) && Fe(a, n)
   );
 }
-function ne(e) {
-  for (const t of te(e))
-    W.has(t) || t.dataset.plunoAutoMount === "false" || (W.add(t), K({
-      token: t.dataset.plunoToken,
-      tokenEndpoint: t.dataset.plunoTokenEndpoint,
-      backendUrl: t.dataset.plunoBackendUrl,
-      launcherLabel: t.dataset.plunoLauncherLabel,
-      accentColor: t.dataset.plunoAccentColor,
-      colorScheme: t.dataset.plunoColorScheme === "dark" ? "dark" : "light",
-      position: t.dataset.plunoPosition === "bottom-left" ? "bottom-left" : "bottom-right"
-    }).catch((o) => {
-      console.error("Failed to mount Pluno Product Agent widget", o);
-    }));
+function Re(t) {
+  for (const e of ze(t)) {
+    if (oe.has(e) || e.dataset.plunoAutoMount === "false")
+      continue;
+    oe.add(e);
+    const o = e.dataset.plunoPreviewChannel;
+    Le({
+      token: e.dataset.plunoToken,
+      tokenEndpoint: e.dataset.plunoTokenEndpoint,
+      backendUrl: e.dataset.plunoBackendUrl,
+      webSocketFactory: o ? Se(o) : void 0,
+      launcherLabel: e.dataset.plunoLauncherLabel,
+      accentColor: e.dataset.plunoAccentColor,
+      colorScheme: e.dataset.plunoColorScheme === "dark" ? "dark" : "light",
+      fontFamily: e.dataset.plunoFontFamily,
+      position: e.dataset.plunoPosition === "bottom-left" ? "bottom-left" : "bottom-right"
+    }).catch((n) => {
+      console.error("Failed to mount Pluno Product Agent widget", n);
+    });
+  }
 }
-ne(import.meta.url);
+Re(import.meta.url);
 export {
-  K as mountPlunoProductAgentWidget
+  Se as createProductAgentPreviewBridgeWebSocketFactory,
+  Le as mountPlunoProductAgentWidget
 };