@runtypelabs/persona 3.21.2 → 3.21.3

package/dist/theme-editor.cjs

@@ -10562,12 +10562,7 @@ var createSendButton = (config) => {
     if (useIcon) {
       if (sendIcon && stopIcon) {
         const next = mode === "stop" ? stopIcon : sendIcon;
-        const prev = mode === "stop" ? sendIcon : stopIcon;
-        if (prev.parentNode === button) {
-          button.replaceChild(next, prev);
-        } else {
-          button.appendChild(next);
-        }
+        button.replaceChildren(next);
       }
     } else {
       button.textContent = mode === "stop" ? stopLabel : sendLabel;

package/dist/theme-editor.js

@@ -10565,12 +10565,7 @@ var createSendButton = (config) => {
     if (useIcon) {
       if (sendIcon && stopIcon) {
         const next = mode === "stop" ? stopIcon : sendIcon;
-        const prev = mode === "stop" ? sendIcon : stopIcon;
-        if (prev.parentNode === button) {
-          button.replaceChild(next, prev);
-        } else {
-          button.appendChild(next);
-        }
+        button.replaceChildren(next);
       }
     } else {
       button.textContent = mode === "stop" ? stopLabel : sendLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "3.21.2",
+  "version": "3.21.3",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/composer-parts.test.ts

@@ -69,6 +69,40 @@ describe("createSendButton", () => {
     send.setMode("send");
     expect(send.button.textContent).toBe("Send");
   });
+
+  describe("icon mode", () => {
+    const iconConfig: AgentWidgetConfig = {
+      ...baseConfig,
+      sendButton: { useIcon: true, iconName: "send", stopIconName: "square" },
+    };
+    const iconCount = (btn: HTMLElement) => btn.querySelectorAll("svg").length;
+
+    it("keeps exactly one icon across a send→stop→send cycle", () => {
+      const send = createSendButton(iconConfig);
+      expect(iconCount(send.button)).toBe(1);
+      send.setMode("stop");
+      expect(iconCount(send.button)).toBe(1);
+      send.setMode("send");
+      expect(iconCount(send.button)).toBe(1);
+    });
+
+    it("does not stack a stale icon when an external re-render swapped the live icon node", () => {
+      const send = createSendButton(iconConfig);
+      // Simulate a DOM morph/re-render (e.g. a host calling controller.update())
+      // that replaces the live icon child with a clone. This detaches the
+      // captured `sendIcon` reference, so `sendIcon.parentNode !== button`.
+      // The old replaceChild/appendChild fallback then left BOTH icons mounted,
+      // producing the doubled send-arrow after the first send→stop→send cycle.
+      const live = send.button.firstElementChild as SVGElement;
+      send.button.replaceChildren(live.cloneNode(true));
+      expect(iconCount(send.button)).toBe(1);
+
+      send.setMode("stop");
+      expect(iconCount(send.button)).toBe(1);
+      send.setMode("send");
+      expect(iconCount(send.button)).toBe(1);
+    });
+  });
 });
 
 describe("createMicButton", () => {

package/src/components/composer-parts.ts

@@ -218,12 +218,15 @@ export const createSendButton = (config?: AgentWidgetConfig): SendButtonParts =>
     if (useIcon) {
       if (sendIcon && stopIcon) {
         const next = mode === "stop" ? stopIcon : sendIcon;
-        const prev = mode === "stop" ? sendIcon : stopIcon;
-        if (prev.parentNode === button) {
-          button.replaceChild(next, prev);
-        } else {
-          button.appendChild(next);
-        }
+        // Replace whatever icon is currently mounted — the button only ever
+        // holds the single active icon. We use replaceChildren(next) rather
+        // than replaceChild(next, prev) against a captured `prev` reference:
+        // an external re-render/morph can swap the live icon child out from
+        // under us, detaching our captured node so `prev.parentNode !== button`.
+        // The old appendChild fallback then left BOTH icons mounted, which is
+        // how the send button ended up showing two stacked arrows after the
+        // first send→stop→send cycle.
+        button.replaceChildren(next);
       }
     } else {
       button.textContent = mode === "stop" ? stopLabel : sendLabel;