@pluno/product-agent-web 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -64,6 +64,7 @@ export declare class PlunoProductAgent {
     private networkBatchTimer;
     private queuedNetworkEvents;
     private queuedClientEvents;
+    private retryAttemptsByClientMessageId;
     private state;
     private constructor();
     static init(options: ProductAgentInitOptions): Promise<PlunoProductAgent>;
@@ -79,6 +80,7 @@ export declare class PlunoProductAgent {
     private sendNow;
     private flushQueuedClientEvents;
     private handleServerEvent;
+    private retryAfterRetryableError;
     private executeToolCall;
     private enableNetworkCapture;
     private enqueueNetworkEvent;

package/dist/product-agent-sdk.js

@@ -1,9 +1,9 @@
 const O = "https://app.pluno.ai";
-const A = "pluno.productAgent.state.";
+const k = "pluno.productAgent.state.";
 class I {
   constructor(t) {
     this.options = t;
-    const s = W(t.clientId);
+    const s = v(t.clientId);
     s && (this.state = {
       ...this.state,
       ...s,
@@ -24,6 +24,7 @@ class I {
   networkBatchTimer = null;
   queuedNetworkEvents = [];
   queuedClientEvents = [];
+  retryAttemptsByClientMessageId = {};
   state = {
     status: "idle",
     user: null,
@@ -37,8 +38,8 @@ class I {
   static async init(t) {
     const s = new I({
       ...t,
-      backendUrl: H(t.backendUrl ?? O),
-      clientId: t.clientId ?? x()
+      backendUrl: U(t.backendUrl ?? O),
+      clientId: t.clientId ?? $()
     });
     try {
       s.enableNetworkCapture(), t.autoConnect !== !1 && await s.connect();
@@ -63,7 +64,7 @@ class I {
       return;
     if (this.setState({ status: (this.state.status === "closed", "connecting"), lastError: null }), this.token = this.options.token ?? await this.options.tokenProvider?.() ?? null, !this.token && !this.options.webSocketFactory)
       throw new Error("Product Agent requires a token or tokenProvider");
-    const t = U(this.options.backendUrl);
+    const t = B(this.options.backendUrl);
     this.socket = this.options.webSocketFactory?.(t) ?? new WebSocket(t), this.socket.addEventListener("open", () => {
       this.token && this.sendNow({ type: "auth.session", token: this.token, clientId: this.options.clientId }), this.flushQueuedClientEvents(), this.startHeartbeat(), this.setState({ status: "connected", lastError: null });
     }), this.socket.addEventListener("message", (s) => this.handleServerEvent(L(s.data))), this.socket.addEventListener("close", () => {
@@ -84,20 +85,21 @@ class I {
     const s = t.trim();
     if (!s)
       return;
-    const n = m(), r = {
-      id: `local-${Date.now()}`,
+    const n = m(), r = j(), o = {
+      id: `local-${r}`,
       role: "user",
       content: s,
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     };
     this.setState({
-      messages: [...this.state.messages, r],
+      messages: [...this.state.messages, o],
       assistantDraft: "",
       isThinking: !0,
       lastError: null
-    }), this.emit("message", r), this.send({
+    }), this.emit("message", o), this.send({
       type: "chat.user_message",
       sessionId: this.state.sessionId ?? void 0,
+      clientMessageId: r,
       content: s,
       page: n,
       model: this.options.model,
@@ -142,8 +144,8 @@ class I {
   handleServerEvent(t) {
     if (t.type === "auth.ok") {
       this.setState({
-        user: $(t.user),
-        starterPrompts: B(t, "starterPrompts"),
+        user: X(t.user),
+        starterPrompts: x(t, "starterPrompts"),
         status: "connected"
       });
       return;
@@ -151,7 +153,7 @@ class I {
     if (t.type === "conversation.state") {
       this.setState({
         sessionId: _(t.session, "id") ?? this.state.sessionId,
-        messages: j(t.items)
+        messages: z(t.items)
       });
       return;
     }
@@ -162,7 +164,7 @@ class I {
     if (t.type === "session.item") {
       const s = R(t.item);
       s && (this.setState({
-        messages: F(this.state.messages, s),
+        messages: J(this.state.messages, s),
         assistantDraft: s.role === "assistant" ? "" : this.state.assistantDraft
       }), this.emit("message", s));
       return;
@@ -182,15 +184,34 @@ class I {
       return;
     }
     if (t.type === "error") {
+      if (this.retryAfterRetryableError(t))
+        return;
       const s = new Error(typeof t.message == "string" ? t.message : "Product Agent error");
       this.setState({ status: "error", isThinking: !1, lastError: s.message }), this.emit("error", s);
     }
   }
+  retryAfterRetryableError(t) {
+    const s = typeof t.sessionId == "string" ? t.sessionId : this.state.sessionId, n = typeof t.clientMessageId == "string" ? t.clientMessageId : null;
+    if (!(t.retryable === !0 || t.code === "transient_model_error") || !s || !n)
+      return !1;
+    const o = this.retryAttemptsByClientMessageId[n] ?? 0;
+    if (o >= 1)
+      return !1;
+    this.retryAttemptsByClientMessageId[n] = o + 1;
+    const a = typeof t.retryAfterMs == "number" ? t.retryAfterMs : 2e3;
+    return this.setState({ status: "reconnecting", isThinking: !0, lastError: null }), window.setTimeout(() => {
+      this.setState({ status: "connected", isThinking: !0, lastError: null }), this.send({
+        type: "chat.retry_last_user_message",
+        sessionId: s,
+        clientMessageId: n
+      });
+    }, a), !0;
+  }
   async executeToolCall(t) {
     const s = typeof t.sessionId == "string" ? t.sessionId : null, n = typeof t.callId == "string" ? t.callId : null, r = t.rawInput;
-    if (!s || !n || !Y(r))
+    if (!s || !n || !Z(r))
       return;
-    const i = await P(r).catch((a) => ({
+    const o = await H(r).catch((a) => ({
       ok: !1,
       exception: {
         message: a instanceof Error ? a.message : String(a)
@@ -203,61 +224,61 @@ class I {
       toolName: "execute_code",
       summary: r.summary,
       rawInput: h(r),
-      rawOutput: h(i)
+      rawOutput: h(o)
     });
   }
   enableNetworkCapture() {
     if (this.networkCaptureCleanup)
       return;
     const t = window.fetch.bind(window), s = XMLHttpRequest.prototype.open, n = XMLHttpRequest.prototype.setRequestHeader, r = XMLHttpRequest.prototype.send;
-    window.fetch = async (i, a) => {
-      const o = Date.now(), c = new Date(o).toISOString(), u = i instanceof Request ? i : null, f = typeof i == "string" ? i : i instanceof URL ? i.toString() : u?.url ?? "", w = (a?.method ?? u?.method ?? "GET").toUpperCase(), E = k(new Headers(a?.headers ?? u?.headers ?? void 0)), T = await V(u, a);
+    window.fetch = async (o, a) => {
+      const i = Date.now(), c = new Date(i).toISOString(), u = o instanceof Request ? o : null, f = typeof o == "string" ? o : o instanceof URL ? o.toString() : u?.url ?? "", E = (a?.method ?? u?.method ?? "GET").toUpperCase(), w = A(new Headers(a?.headers ?? u?.headers ?? void 0)), T = await Q(u, a);
       try {
-        const l = await t(i, a);
+        const l = await t(o, a);
         return this.enqueueNetworkEvent({
           requestId: g("fetch"),
           url: f,
-          method: w,
-          requestHeaders: E,
+          method: E,
+          requestHeaders: w,
           requestBody: T,
           resourceType: "fetch",
           responseStatus: l.status,
-          responseHeaders: k(l.headers),
-          responseBody: await Z(l),
+          responseHeaders: A(l.headers),
+          responseBody: await tt(l),
           startedAt: c,
-          durationMs: Date.now() - o
+          durationMs: Date.now() - i
         }), l;
       } catch (l) {
         throw this.enqueueNetworkEvent({
           requestId: g("fetch"),
           url: f,
-          method: w,
-          requestHeaders: E,
+          method: E,
+          requestHeaders: w,
           requestBody: T,
           resourceType: "fetch",
           errorText: l instanceof Error ? l.message : String(l),
           startedAt: c,
-          durationMs: Date.now() - o
+          durationMs: Date.now() - i
         }), l;
       }
-    }, XMLHttpRequest.prototype.open = function(a, o, c, u, f) {
+    }, XMLHttpRequest.prototype.open = function(a, i, c, u, f) {
       return this.__plunoMeta = {
         requestId: g("xhr"),
         method: String(a ?? "GET").toUpperCase(),
-        url: typeof o == "string" ? o : o.toString(),
+        url: typeof i == "string" ? i : i.toString(),
         requestHeaders: {},
         startedAtMs: Date.now(),
         startedAt: (/* @__PURE__ */ new Date()).toISOString()
-      }, s.call(this, a, o, c ?? !0, u ?? void 0, f ?? void 0);
-    }, XMLHttpRequest.prototype.setRequestHeader = function(a, o) {
+      }, s.call(this, a, i, c ?? !0, u ?? void 0, f ?? void 0);
+    }, XMLHttpRequest.prototype.setRequestHeader = function(a, i) {
       const c = this.__plunoMeta;
       if (c) {
         const u = c.requestHeaders ?? {};
-        u[a] = o, c.requestHeaders = u;
+        u[a] = i, c.requestHeaders = u;
       }
-      return n.call(this, a, o);
+      return n.call(this, a, i);
     }, XMLHttpRequest.prototype.send = function(a) {
-      const o = window.__plunoProductAgentInstance, c = this.__plunoMeta ?? {
+      const i = window.__plunoProductAgentInstance, c = this.__plunoMeta ?? {
         requestId: g("xhr"),
         method: "GET",
         url: "",
@@ -268,7 +289,7 @@ class I {
       return c.requestBody = C(a), this.__plunoMeta = c, this.addEventListener(
         "loadend",
         function() {
-          !o || !this.__plunoMeta || o.enqueueNetworkEvent({
+          !i || !this.__plunoMeta || i.enqueueNetworkEvent({
             requestId: String(this.__plunoMeta.requestId),
             url: String(this.__plunoMeta.url ?? ""),
             method: String(this.__plunoMeta.method ?? "GET"),
@@ -276,8 +297,8 @@ class I {
             requestBody: typeof this.__plunoMeta.requestBody == "string" ? this.__plunoMeta.requestBody : void 0,
             resourceType: "xhr",
             responseStatus: this.status,
-            responseHeaders: tt(this.getAllResponseHeaders()),
-            responseBody: Q(this),
+            responseHeaders: st(this.getAllResponseHeaders()),
+            responseBody: et(this),
             errorText: this.status === 0 ? "XHR request failed or was aborted" : void 0,
             startedAt: String(this.__plunoMeta.startedAt),
             durationMs: Date.now() - Number(this.__plunoMeta.startedAtMs ?? Date.now())
@@ -317,21 +338,22 @@ class I {
     this.heartbeatTimer !== null && (window.clearInterval(this.heartbeatTimer), this.heartbeatTimer = null);
   }
   setState(t) {
-    this.state = { ...this.state, ...t }, J(this.options.clientId, this.state), this.emit("state", this.getState());
+    this.state = { ...this.state, ...t }, Y(this.options.clientId, this.state), this.emit("state", this.getState());
   }
   emit(t, s) {
     this.listeners[t]?.forEach((r) => r(s));
   }
 }
-async function P(e) {
+const P = 5e3;
+async function H(e) {
   const t = Object.getPrototypeOf(async function() {
-  }).constructor, s = e.timeoutMs ?? 15e3, n = Date.now(), r = [], i = {
+  }).constructor, s = P, n = Date.now(), r = [], o = {
     log: console.log,
     info: console.info,
     warn: console.warn,
     error: console.error
-  }, a = (o) => (...c) => {
-    r.push({ level: o, args: c }), i[o](...c);
+  }, a = (i) => (...c) => {
+    r.push({ level: i, args: c }), o[i](...c);
   };
   console.log = a("log"), console.info = a("info"), console.warn = a("warn"), console.error = a("error");
   try {
@@ -350,14 +372,14 @@ async function P(e) {
         origin: location.origin
       }
     };
-  } catch (o) {
+  } catch (i) {
     return {
       ok: !1,
       console: r,
       exception: {
-        name: o instanceof Error ? o.name : "Error",
-        message: o instanceof Error ? o.message : String(o),
-        stack: o instanceof Error ? o.stack : void 0
+        name: i instanceof Error ? i.name : "Error",
+        message: i instanceof Error ? i.message : String(i),
+        stack: i instanceof Error ? i.stack : void 0
       },
       metadata: {
         durationMs: Date.now() - n,
@@ -366,13 +388,13 @@ async function P(e) {
       }
     };
   } finally {
-    console.log = i.log, console.info = i.info, console.warn = i.warn, console.error = i.error;
+    console.log = o.log, console.info = o.info, console.warn = o.warn, console.error = o.error;
   }
 }
-function H(e) {
+function U(e) {
   return e.replace(/\/+$/, "");
 }
-function U(e) {
+function B(e) {
   const t = new URL("/api/product-agent/embed/ws", e);
   return t.protocol = t.protocol === "https:" ? "wss:" : "ws:", t.toString();
 }
@@ -391,20 +413,23 @@ function L(e) {
     return { type: "error", message: "Invalid server event" };
   }
 }
-function B(e, t) {
+function x(e, t) {
   if (!e || typeof e != "object")
     return [];
   const s = e[t];
   return Array.isArray(s) ? s.filter((n) => typeof n == "string" && n.trim().length > 0) : [];
 }
-function x() {
+function $() {
   const e = "pluno.productAgent.clientId", t = window.localStorage.getItem(e);
   if (t)
     return t;
   const s = crypto.randomUUID();
   return window.localStorage.setItem(e, s), s;
 }
-function $(e) {
+function j() {
+  return crypto.randomUUID();
+}
+function X(e) {
   if (!e || typeof e != "object")
     return null;
   const t = e, s = typeof t.id == "string" ? t.id : null;
@@ -415,7 +440,7 @@ function $(e) {
     avatarUrl: typeof t.avatarUrl == "string" ? t.avatarUrl : null
   } : null;
 }
-function j(e) {
+function z(e) {
   return Array.isArray(e) ? e.map(R).filter((t) => t !== null) : [];
 }
 function R(e) {
@@ -430,20 +455,20 @@ function R(e) {
     return {
       id: String(t.id ?? crypto.randomUUID()),
       role: r,
-      content: z(n.content),
+      content: W(n.content),
       createdAt: typeof t.createdAt == "string" ? t.createdAt : (/* @__PURE__ */ new Date()).toISOString()
     };
   }
   return n.type === "function_call" || n.type === "tool_call" || n.type === "web_search_call" ? {
     id: String(t.id ?? crypto.randomUUID()),
     role: "tool",
-    content: X(n),
+    content: F(n),
     createdAt: typeof t.createdAt == "string" ? t.createdAt : (/* @__PURE__ */ new Date()).toISOString(),
     dataType: String(n.type),
     loading: n.localExecutionStatus === "running"
   } : null;
 }
-function X(e) {
+function F(e) {
   if (e.type === "web_search_call") {
     const t = e.action;
     if (t && typeof t == "object") {
@@ -455,9 +480,9 @@ function X(e) {
     }
     return "Searching the web";
   }
-  return v(e);
+  return G(e);
 }
-function v(e) {
+function G(e) {
   if (typeof e.summary == "string" && e.summary.trim().length > 0)
     return e.summary;
   if (typeof e.arguments == "string")
@@ -470,7 +495,7 @@ function v(e) {
     }
   return typeof e.name == "string" && e.name.trim().length > 0 ? e.name : "Run tool";
 }
-function z(e) {
+function W(e) {
   return typeof e == "string" ? e : Array.isArray(e) ? e.map((t) => {
     if (!t || typeof t != "object")
       return "";
@@ -478,14 +503,14 @@ function z(e) {
     return typeof s.text == "string" ? s.text : typeof s.content == "string" ? s.content : "";
   }).filter(Boolean).join("") : "";
 }
-function F(e, t) {
-  const s = G(e, t), n = s.findIndex((i) => i.id === t.id);
+function J(e, t) {
+  const s = K(e, t), n = s.findIndex((o) => o.id === t.id);
   if (n === -1)
     return [...s, t];
   const r = [...s];
   return r[n] = t, r;
 }
-function G(e, t) {
+function K(e, t) {
   if (t.role !== "user")
     return e;
   const s = e.findIndex(
@@ -499,12 +524,12 @@ function G(e, t) {
 function _(e, t) {
   return e && typeof e == "object" && typeof e[t] == "string" ? e[t] : null;
 }
-function W(e) {
+function v(e) {
   try {
-    const t = window.localStorage.getItem(`${A}${e}`);
+    const t = window.localStorage.getItem(`${k}${e}`);
     if (!t)
       return null;
-    const s = JSON.parse(t), n = Array.isArray(s.messages) ? s.messages.map(K).filter((r) => !!r) : [];
+    const s = JSON.parse(t), n = Array.isArray(s.messages) ? s.messages.map(V).filter((r) => !!r) : [];
     return {
       sessionId: typeof s.sessionId == "string" ? s.sessionId : null,
       messages: n
@@ -513,10 +538,10 @@ function W(e) {
     return null;
   }
 }
-function J(e, t) {
+function Y(e, t) {
   try {
     window.localStorage.setItem(
-      `${A}${e}`,
+      `${k}${e}`,
       JSON.stringify({
         sessionId: t.sessionId,
         messages: t.messages.slice(-100)
@@ -526,7 +551,7 @@ function J(e, t) {
     return;
   }
 }
-function K(e) {
+function V(e) {
   if (!e || typeof e != "object")
     return null;
   const t = e;
@@ -539,16 +564,16 @@ function K(e) {
     loading: typeof t.loading == "boolean" ? t.loading : void 0
   };
 }
-function Y(e) {
+function Z(e) {
   return !!e && typeof e == "object" && typeof e.summary == "string" && typeof e.javascript == "string";
 }
-function k(e) {
+function A(e) {
   const t = {};
   return e?.forEach((s, n) => {
     t[n] = s;
   }), t;
 }
-async function V(e, t) {
+async function Q(e, t) {
   if (typeof t?.body < "u")
     return C(t.body);
   if (e)
@@ -558,14 +583,14 @@ async function V(e, t) {
       return;
     }
 }
-async function Z(e) {
+async function tt(e) {
   try {
     return p(await e.clone().text());
   } catch (t) {
     return { error: t instanceof Error ? t.message : "unavailable" };
   }
 }
-function Q(e) {
+function et(e) {
   try {
     return e.responseType === "" || e.responseType === "text" ? p(e.responseText ?? "") : e.responseType === "json" ? p(JSON.stringify(e.response)) : `[unsupported xhr responseType: ${e.responseType || "unknown"}]`;
   } catch (t) {
@@ -591,7 +616,7 @@ function C(e) {
     }
   }
 }
-function tt(e) {
+function st(e) {
   const t = {};
   for (const s of e.trim().split(/[\r\n]+/)) {
     const n = s.indexOf(":");
@@ -605,51 +630,51 @@ function p(e) {
 function g(e) {
   return `${e}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
 }
-const S = "[REDACTED_SECRET]", d = "[REDACTED_TOKEN]", et = "[REDACTED_SIGNED_URL]", st = 20, nt = /^(access_token|accessToken|refresh_token|refreshToken|id_token|idToken|authToken|token|api_key|apiKey|apikey|key|secret|signature|sig|password|passwd|pwd|code|state|session|jwt|csrf|csrfToken|xsrf|xsrfToken)$/i, N = /\bBearer\s+[A-Za-z0-9._~+/=-]{12,}/gi, D = /\bBasic\s+[A-Za-z0-9+/=-]{12,}/gi, M = /\beyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\b/g, b = /\b(access_token|accessToken|refresh_token|refreshToken|id_token|idToken|authToken|api_key|apiKey|apikey|client_secret|clientSecret|password|secret|token|jwt|csrf|csrfToken|xsrf|xsrfToken)\b\s*[:=]\s*["']?[^"',&\s}]+/gi, rt = /\bhttps?:\/\/[^\s"'<>]+(?:X-Amz-Signature|X-Goog-Signature|Signature|sig=)[^\s"'<>]*/gi, ot = /\bhttps?:\/\/[^\s"'<>]+/gi, it = /[),.;\]]+$/;
+const S = "[REDACTED_SECRET]", d = "[REDACTED_TOKEN]", nt = "[REDACTED_SIGNED_URL]", rt = 20, ot = /^(access_token|accessToken|refresh_token|refreshToken|id_token|idToken|authToken|token|api_key|apiKey|apikey|key|secret|signature|sig|password|passwd|pwd|code|state|session|jwt|csrf|csrfToken|xsrf|xsrfToken)$/i, M = /\bBearer\s+[A-Za-z0-9._~+/=-]{12,}/gi, N = /\bBasic\s+[A-Za-z0-9+/=-]{12,}/gi, D = /\beyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\b/g, b = /\b(access_token|accessToken|refresh_token|refreshToken|id_token|idToken|authToken|api_key|apiKey|apikey|client_secret|clientSecret|password|secret|token|jwt|csrf|csrfToken|xsrf|xsrfToken)\b\s*[:=]\s*["']?[^"',&\s}]+/gi, it = /\bhttps?:\/\/[^\s"'<>]+(?:X-Amz-Signature|X-Goog-Signature|Signature|sig=)[^\s"'<>]*/gi, at = /\bhttps?:\/\/[^\s"'<>]+/gi, ct = /[),.;\]]+$/;
 function h(e) {
   return y(e, 0, /* @__PURE__ */ new WeakSet());
 }
 function y(e, t, s) {
   if (typeof e == "string")
-    return ut(e);
+    return dt(e);
   if (e === null || typeof e != "object")
     return e;
-  if (t >= st)
+  if (t >= rt)
     return "[REDACTED_MAX_DEPTH]";
   if (s.has(e))
     return "[REDACTED_CIRCULAR]";
   if (s.add(e), Array.isArray(e))
     return e.map((r) => y(r, t + 1, s));
   const n = {};
-  for (const [r, i] of Object.entries(e))
-    at(r) ? n[r] = S : n[r] = r.toLowerCase() === "url" ? ct(i) : y(i, t + 1, s);
+  for (const [r, o] of Object.entries(e))
+    ut(r) ? n[r] = S : n[r] = r.toLowerCase() === "url" ? lt(o) : y(o, t + 1, s);
   return n;
 }
-function at(e) {
+function ut(e) {
   const t = e.replace(/[^a-z0-9]/gi, "").toLowerCase();
   return t.includes("authorization") || t.includes("cookie") || t.includes("password") || t.includes("passwd") || t === "pwd" || t.includes("secret") || t === "token" || t.endsWith("token") || t.includes("apikey") || t.includes("csrf") || t.includes("xsrf") || t === "jwt" || t === "session" || t === "signature" || t.includes("privatekey");
 }
-function ct(e) {
+function lt(e) {
   return typeof e == "string" ? q(e) : y(e, 0, /* @__PURE__ */ new WeakSet());
 }
 function q(e) {
   try {
     const t = new URL(e, location.href);
     for (const s of Array.from(t.searchParams.keys()))
-      nt.test(s) && t.searchParams.set(s, d);
+      ot.test(s) && t.searchParams.set(s, d);
     return t.username && (t.username = d), t.password && (t.password = d), t.toString();
   } catch {
-    return lt(e);
+    return pt(e);
   }
 }
-function ut(e) {
-  return e.replace(rt, et).replace(ot, dt).replace(N, `Bearer ${d}`).replace(D, `Basic ${d}`).replace(M, d).replace(b, (t, s) => `${s}: ${S}`);
+function dt(e) {
+  return e.replace(it, nt).replace(at, ht).replace(M, `Bearer ${d}`).replace(N, `Basic ${d}`).replace(D, d).replace(b, (t, s) => `${s}: ${S}`);
 }
-function lt(e) {
-  return e.replace(N, `Bearer ${d}`).replace(D, `Basic ${d}`).replace(M, d).replace(b, (t, s) => `${s}: ${S}`);
+function pt(e) {
+  return e.replace(M, `Bearer ${d}`).replace(N, `Basic ${d}`).replace(D, d).replace(b, (t, s) => `${s}: ${S}`);
 }
-function dt(e) {
-  const t = e.match(it)?.[0] ?? "", s = t ? e.slice(0, -t.length) : e;
+function ht(e) {
+  const t = e.match(ct)?.[0] ?? "", s = t ? e.slice(0, -t.length) : e;
   return `${q(s)}${t}`;
 }
 export {

package/dist/product-agent-widget.js

@@ -79,9 +79,9 @@ async function G(e = {}) {
     backendUrl: t.backendUrl,
     webSocketFactory: t.webSocketFactory
   }), E = J(t), S = new Set(E.openToolGroupKeys);
-  let x = null, z = !1;
+  let x = null, N = !1;
   const q = () => {
-    z || typeof document > "u" || (F(n, t.accentColor), o.isConnected || s.body?.appendChild(o));
+    N || typeof document > "u" || (F(n, t.accentColor), o.isConnected || s.body?.appendChild(o));
   }, P = new MutationObserver(q);
   P.observe(s.documentElement, { childList: !0, subtree: !0 });
   const v = () => {
@@ -125,19 +125,19 @@ async function G(e = {}) {
     }
   };
   return s.addEventListener("keydown", M), h.addEventListener("submit", (c) => {
-    c.preventDefault(), N(m, i);
+    c.preventDefault(), z(m, i);
   }), p.addEventListener("click", () => {
     if (m.getState().isThinking) {
       m.stop();
       return;
     }
-    N(m, i);
+    z(m, i);
   }), g.addEventListener("click", () => {
     m.startNewSession(), S.clear(), i.value = "", C(i), v(), i.focus();
   }), i.addEventListener("input", () => {
     C(i), v();
   }), i.addEventListener("keydown", (c) => {
-    c.key !== "Enter" || c.shiftKey || (c.preventDefault(), N(m, i));
+    c.key !== "Enter" || c.shiftKey || (c.preventDefault(), z(m, i));
   }), E.composerValue && (i.value = E.composerValue, C(i)), E.isOpen && k(i.value, !1), m.on(
     "state",
     (c) => $(_, p, g, c, S, v, (y) => {
@@ -148,11 +148,11 @@ async function G(e = {}) {
   }), {
     agent: m,
     destroy: () => {
-      z = !0, P.disconnect(), m.destroy(), s.removeEventListener("keydown", M), o.remove();
+      N = !0, P.disconnect(), m.destroy(), s.removeEventListener("keydown", M), o.remove();
     }
   };
 }
-function N(e, t) {
+function z(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 })));
 }
@@ -652,6 +652,14 @@ function F(e, t) {
       overflow-wrap: anywhere;
       word-break: break-word;
     }
+    .pluno-pa-widget__message::after {
+      content: "";
+      position: absolute;
+      bottom: -34px;
+      z-index: 2;
+      width: 40px;
+      height: 34px;
+    }
     .pluno-pa-widget__message--user {
       align-self: flex-end;
       max-width: 85%;
@@ -666,10 +674,10 @@ function F(e, t) {
     }
     .pluno-pa-widget__message-copy {
       position: absolute;
-      bottom: -24px;
+      bottom: -30px;
       z-index: 3;
-      width: 22px;
-      height: 22px;
+      width: 28px;
+      height: 28px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -684,14 +692,20 @@ function F(e, t) {
       transform: translateY(-2px);
       transition: opacity 120ms ease, transform 120ms ease, background 120ms ease, color 120ms ease;
     }
+    .pluno-pa-widget__message--user::after {
+      right: 0;
+    }
     .pluno-pa-widget__message--user .pluno-pa-widget__message-copy {
       right: 4px;
     }
+    .pluno-pa-widget__message--assistant::after {
+      left: 0;
+    }
     .pluno-pa-widget__message--assistant .pluno-pa-widget__message-copy {
       left: 2px;
     }
     .pluno-pa-widget__message:hover .pluno-pa-widget__message-copy,
-    .pluno-pa-widget__message:focus-within .pluno-pa-widget__message-copy {
+    .pluno-pa-widget__message-copy:focus-visible {
       opacity: 1;
       pointer-events: auto;
       transform: translateY(0);
@@ -932,10 +946,11 @@ function F(e, t) {
       padding: 0;
     }
     .pluno-pa-widget__empty-state--starter {
+      --pluno-pa-starter-edge-gap: 40px;
       margin: auto 0 0;
-      gap: 24px;
+      gap: var(--pluno-pa-starter-edge-gap);
       justify-items: start;
-      padding: 36px 4px 28px;
+      padding: 36px 4px calc(var(--pluno-pa-starter-edge-gap) - 12px);
       text-align: left;
     }
     .pluno-pa-widget__empty-state--starter .pluno-pa-widget__empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pluno/product-agent-web",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Browser SDK and default widget for embedding Pluno Product Agent into customer web apps.",
   "license": "Apache-2.0",
   "type": "module",