@runtypelabs/persona 3.15.1 → 3.17.0

package/dist/theme-editor.cjs

@@ -80,6 +80,7 @@ __export(theme_editor_exports, {
   buildPreviewConfigWithMessages: () => buildPreviewConfigWithMessages,
   buildShellCss: () => buildShellCss,
   buildSrcdoc: () => buildSrcdoc,
+  buildTranscriptStreamFrames: () => buildTranscriptStreamFrames,
   convertFromPx: () => convertFromPx,
   convertToPx: () => convertToPx,
   createPreviewMessages: () => createPreviewMessages,
@@ -99,6 +100,7 @@ __export(theme_editor_exports, {
   normalizeColorValue: () => normalizeColorValue,
   paletteColorPath: () => paletteColorPath,
   parseCssValue: () => parseCssValue,
+  presetStreamsText: () => presetStreamsText,
   resolveRoleAssignment: () => resolveRoleAssignment,
   resolveThemeColorPath: () => resolveThemeColorPath,
   scopeSection: () => scopeSection,
@@ -154,6 +156,12 @@ var DEFAULT_WIDGET_CONFIG = {
     agentIconSize: "40px",
     headerIconSize: "40px",
     closeButtonSize: "32px",
+    // Zero out browser-default <button> padding so the icon gets the full
+    // 32x32 content box, matching clearChat.paddingX/Y below. Without this,
+    // UA stylesheets add ~1-2px vertical and ~6px horizontal padding that
+    // eats into the border-box width and shrinks the rendered icon.
+    closeButtonPaddingX: "0px",
+    closeButtonPaddingY: "0px",
     callToActionIconName: "arrow-up-right",
     callToActionIconText: "",
     callToActionIconSize: "32px",
@@ -241,6 +249,12 @@ var DEFAULT_WIDGET_CONFIG = {
       previewMaxLines: 3,
       expandable: true,
       loadingAnimation: "none"
+    },
+    streamAnimation: {
+      type: "none",
+      placeholder: "none",
+      speed: 120,
+      duration: 1800
     }
   },
   suggestionChips: [
@@ -343,11 +357,13 @@ function mergeWithDefaults(config) {
       ...config.voiceRecognition
     },
     features: (() => {
-      var _a2, _b2, _c2, _d2;
+      var _a2, _b2, _c2, _d2, _e2, _f2;
       const da = (_a2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _a2.artifacts;
       const ca = (_b2 = config.features) == null ? void 0 : _b2.artifacts;
       const dsb = (_c2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _c2.scrollToBottom;
       const csb = (_d2 = config.features) == null ? void 0 : _d2.scrollToBottom;
+      const dsa = (_e2 = DEFAULT_WIDGET_CONFIG.features) == null ? void 0 : _e2.streamAnimation;
+      const csa = (_f2 = config.features) == null ? void 0 : _f2.streamAnimation;
       const mergedArtifacts = da === void 0 && ca === void 0 ? void 0 : {
         ...da,
         ...ca,
@@ -360,11 +376,16 @@ function mergeWithDefaults(config) {
         ...dsb,
         ...csb
       };
+      const mergedStreamAnimation = dsa === void 0 && csa === void 0 ? void 0 : {
+        ...dsa,
+        ...csa
+      };
       return {
         ...DEFAULT_WIDGET_CONFIG.features,
         ...config.features,
         ...mergedScrollToBottom !== void 0 ? { scrollToBottom: mergedScrollToBottom } : {},
-        ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {}
+        ...mergedArtifacts !== void 0 ? { artifacts: mergedArtifacts } : {},
+        ...mergedStreamAnimation !== void 0 ? { streamAnimation: mergedStreamAnimation } : {}
       };
     })(),
     suggestionChips: (_e = config.suggestionChips) != null ? _e : DEFAULT_WIDGET_CONFIG.suggestionChips,
@@ -2667,6 +2688,91 @@ var featuresSectionDef = {
     { id: "feat-scroll-bottom-label", label: "Scroll To Bottom Label", description: "Leave empty for icon-only mode", type: "text", path: "features.scrollToBottom.label", defaultValue: "" }
   ]
 };
+var streamAnimationSectionDef = {
+  id: "stream-animation",
+  title: "Stream Animation",
+  description: "Control how assistant text appears while streaming.",
+  collapsed: true,
+  fields: [
+    {
+      id: "stream-anim-type",
+      label: "Animation",
+      description: "Reveal effect applied to each assistant reply as it streams.",
+      type: "select",
+      path: "features.streamAnimation.type",
+      defaultValue: "none",
+      options: [
+        { value: "none", label: "None" },
+        { value: "typewriter", label: "Typewriter" },
+        { value: "word-fade", label: "Word fade" },
+        { value: "letter-rise", label: "Letter rise" },
+        { value: "glyph-cycle", label: "Glyph cycle" },
+        { value: "wipe", label: "Wipe" },
+        { value: "pop-bubble", label: "Pop bubble" }
+      ]
+    },
+    {
+      id: "stream-anim-placeholder",
+      label: "Pre-first-token Placeholder",
+      description: "What to show before the first token arrives.",
+      type: "select",
+      path: "features.streamAnimation.placeholder",
+      defaultValue: "none",
+      options: [
+        { value: "none", label: "Typing indicator (default)" },
+        { value: "skeleton", label: "Skeleton shimmer" }
+      ]
+    },
+    {
+      id: "stream-anim-buffer",
+      label: "Content Buffering",
+      description: "Trim in-progress units so only complete words/lines reveal.",
+      type: "select",
+      path: "features.streamAnimation.buffer",
+      defaultValue: "none",
+      options: [
+        { value: "none", label: "None \u2014 stream every character" },
+        { value: "word", label: "Word \u2014 hold until whitespace" },
+        { value: "line", label: "Line \u2014 hold until newline" }
+      ]
+    },
+    {
+      id: "stream-anim-speed",
+      label: "Per-unit Duration (ms)",
+      description: "Animation length for each character or word.",
+      type: "select",
+      path: "features.streamAnimation.speed",
+      defaultValue: 120,
+      options: [
+        { value: "40", label: "40ms \u2014 snappy" },
+        { value: "80", label: "80ms" },
+        { value: "120", label: "120ms (default)" },
+        { value: "200", label: "200ms" },
+        { value: "320", label: "320ms" },
+        { value: "480", label: "480ms \u2014 slow" }
+      ],
+      formatValue: (v) => String(v != null ? v : 120),
+      parseValue: (v) => Number(v)
+    },
+    {
+      id: "stream-anim-duration",
+      label: "Container Duration (ms)",
+      description: "Length of container-level effects (pop-bubble, custom plugins).",
+      type: "select",
+      path: "features.streamAnimation.duration",
+      defaultValue: 1800,
+      options: [
+        { value: "600", label: "600ms" },
+        { value: "1200", label: "1200ms" },
+        { value: "1800", label: "1800ms (default)" },
+        { value: "2400", label: "2400ms" },
+        { value: "3600", label: "3600ms \u2014 slow" }
+      ],
+      formatValue: (v) => String(v != null ? v : 1800),
+      parseValue: (v) => Number(v)
+    }
+  ]
+};
 var attachmentsSectionDef = {
   id: "attachments-config",
   title: "Attachments",
@@ -2750,7 +2856,7 @@ var CONFIGURE_SUB_GROUPS = [
   { label: "Content", sections: [copySectionDef, suggestionsSectionDef] },
   { label: "Layout", sections: [generalLayoutSectionDef, headerLayoutSectionDef, messagesLayoutSectionDef, messageActionsSectionDef] },
   { label: "Widget", sections: [launcherBasicsSectionDef, launcherAdvancedSectionDef, sendButtonSectionDef, closeButtonSectionDef, clearChatSectionDef, statusIndicatorSectionDef] },
-  { label: "Features", sections: [featuresSectionDef, attachmentsSectionDef, artifactsSectionDef, artifactCustomizationSectionDef] },
+  { label: "Features", sections: [featuresSectionDef, streamAnimationSectionDef, attachmentsSectionDef, artifactsSectionDef, artifactCustomizationSectionDef] },
   { label: "Developer", collapsedByDefault: true, sections: [apiIntegrationSectionDef, debugSectionDef, markdownSectionDef] }
 ];
 var CONFIGURE_SECTIONS = CONFIGURE_SUB_GROUPS.flatMap((g) => g.sections);
@@ -4456,6 +4562,8 @@ var AgentWidgetClient = class {
     let didSplitByPartId = false;
     const reasoningMessages = /* @__PURE__ */ new Map();
     const toolMessages = /* @__PURE__ */ new Map();
+    const nestedStepMessages = /* @__PURE__ */ new Map();
+    const nestedPartIdByStep = /* @__PURE__ */ new Map();
     const reasoningContext = {
       lastId: null,
       byStep: /* @__PURE__ */ new Map()
@@ -4464,6 +4572,31 @@ var AgentWidgetClient = class {
       lastId: null,
       byCall: /* @__PURE__ */ new Map()
     };
+    const getNestedStepKey = (toolId, stepId, partId = "") => `${toolId}::${stepId}::${partId}`;
+    const getNestedStepPrefix = (toolId, stepId) => `${toolId}::${stepId}::`;
+    const ensureNestedStepMessage = (toolId, stepId, partId, executionId) => {
+      const key = getNestedStepKey(toolId, stepId, partId);
+      const existing = nestedStepMessages.get(key);
+      if (existing) return existing;
+      const idSuffix = partId ? `-${partId}` : "";
+      const message = {
+        id: `nested-${toolId}-${stepId}${idSuffix}`,
+        role: "assistant",
+        content: "",
+        createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+        streaming: true,
+        sequence: nextSequence(),
+        ...partId ? { partId } : {},
+        agentMetadata: {
+          executionId,
+          parentToolId: toolId,
+          parentStepId: stepId
+        }
+      };
+      nestedStepMessages.set(key, message);
+      emitMessage(message);
+      return message;
+    };
     const normalizeKey = (value) => {
       if (value === null || value === void 0) return null;
       try {
@@ -4773,7 +4906,7 @@ var AgentWidgetClient = class {
     const agentIterationMessages = /* @__PURE__ */ new Map();
     const iterationDisplay = (_a = this.config.iterationDisplay) != null ? _a : "separate";
     drainReadyQueue = () => {
-      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb;
+      var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab, _bb, _cb, _db, _eb, _fb, _gb, _hb, _ib, _jb, _kb, _lb, _mb, _nb, _ob, _pb, _qb, _rb, _sb, _tb, _ub, _vb;
       for (let i = 0; i < seqReadyQueue.length; i++) {
         const payloadType = seqReadyQueue[i].payloadType;
         const payload = seqReadyQueue[i].payload;
@@ -4946,6 +5079,9 @@ var AgentWidgetClient = class {
             toolContext.byCall.delete(callKey);
           }
         } else if (payloadType === "text_start") {
+          if ((_X = payload.toolContext) == null ? void 0 : _X.toolId) {
+            continue;
+          }
           const incomingPartId = payload.partId;
           if (incomingPartId !== void 0 && partIdState.current !== null && incomingPartId !== partIdState.current) {
             const prev = assistantMessage;
@@ -4961,6 +5097,9 @@ var AgentWidgetClient = class {
             partIdState.current = incomingPartId;
           }
         } else if (payloadType === "text_end") {
+          if ((_Y = payload.toolContext) == null ? void 0 : _Y.toolId) {
+            continue;
+          }
           const prev = assistantMessage;
           if (prev) {
             prev.streaming = false;
@@ -4975,6 +5114,48 @@ var AgentWidgetClient = class {
           if (stepType === "tool" || executionType === "context") {
             continue;
           }
+          const nestedToolCtx = payload.toolContext;
+          if (nestedToolCtx == null ? void 0 : nestedToolCtx.toolId) {
+            const nestedStepId = String(
+              (__ = (_Z = payload.id) != null ? _Z : nestedToolCtx.stepId) != null ? __ : `step-${nextSequence()}`
+            );
+            const incomingPartId2 = payload.partId !== void 0 && payload.partId !== null ? String(payload.partId) : "";
+            const stepScopeKey = `${nestedToolCtx.toolId}::${nestedStepId}`;
+            const prevPartId = nestedPartIdByStep.get(stepScopeKey);
+            if (incomingPartId2 !== "" && prevPartId !== void 0 && prevPartId !== "" && prevPartId !== incomingPartId2) {
+              const prev = nestedStepMessages.get(
+                getNestedStepKey(
+                  nestedToolCtx.toolId,
+                  nestedStepId,
+                  prevPartId
+                )
+              );
+              if (prev && prev.streaming !== false) {
+                prev.streaming = false;
+                emitMessage(prev);
+              }
+            }
+            if (incomingPartId2 !== "") {
+              nestedPartIdByStep.set(stepScopeKey, incomingPartId2);
+            }
+            const nestedMsg = ensureNestedStepMessage(
+              nestedToolCtx.toolId,
+              nestedStepId,
+              incomingPartId2,
+              nestedToolCtx.executionId
+            );
+            const nestedChunk = (_ca = (_ba = (_aa = (_$ = payload.text) != null ? _$ : payload.delta) != null ? _aa : payload.content) != null ? _ba : payload.chunk) != null ? _ca : "";
+            if (nestedChunk) {
+              nestedMsg.content += String(nestedChunk);
+              nestedMsg.streaming = true;
+              emitMessage(nestedMsg);
+            }
+            if (payload.isComplete) {
+              nestedMsg.streaming = false;
+              emitMessage(nestedMsg);
+            }
+            continue;
+          }
           const incomingPartId = payload.partId;
           if (incomingPartId !== void 0 && partIdState.current !== null && incomingPartId !== partIdState.current) {
             const prev = assistantMessage;
@@ -4989,18 +5170,18 @@ var AgentWidgetClient = class {
           if (incomingPartId !== void 0) {
             partIdState.current = incomingPartId;
           }
-          const assistant = incomingPartId !== void 0 ? (_X = assistantMessagesByPartId.get(incomingPartId)) != null ? _X : ensureAssistantMessage() : ensureAssistantMessage();
+          const assistant = incomingPartId !== void 0 ? (_da = assistantMessagesByPartId.get(incomingPartId)) != null ? _da : ensureAssistantMessage() : ensureAssistantMessage();
           if (incomingPartId !== void 0) {
             if (!assistant.partId) {
               assistant.partId = incomingPartId;
             }
             assistantMessagesByPartId.set(incomingPartId, assistant);
           }
-          const chunk = (_$ = (__ = (_Z = (_Y = payload.text) != null ? _Y : payload.delta) != null ? _Z : payload.content) != null ? __ : payload.chunk) != null ? _$ : "";
+          const chunk = (_ha = (_ga = (_fa = (_ea = payload.text) != null ? _ea : payload.delta) != null ? _fa : payload.content) != null ? _ga : payload.chunk) != null ? _ha : "";
           if (chunk) {
             const chunkSeq = typeof payload.seq === "number" ? payload.seq : void 0;
             const chunkBufferKey = incomingPartId != null ? incomingPartId : assistant.id;
-            const accumulatedRaw = chunkSeq !== void 0 ? insertOrderedChunk(chunkBufferKey, chunkSeq, String(chunk)) : ((_aa = rawContentBuffers.get(assistant.id)) != null ? _aa : "") + chunk;
+            const accumulatedRaw = chunkSeq !== void 0 ? insertOrderedChunk(chunkBufferKey, chunkSeq, String(chunk)) : ((_ia = rawContentBuffers.get(assistant.id)) != null ? _ia : "") + chunk;
             assistant.rawContent = accumulatedRaw;
             if (!streamParsers.has(assistant.id)) {
               streamParsers.set(assistant.id, this.createStreamParser());
@@ -5046,7 +5227,7 @@ var AgentWidgetClient = class {
                 emitMessage(assistant);
               });
             } else {
-              const text = typeof parsedResult === "string" ? parsedResult : (_ba = parsedResult == null ? void 0 : parsedResult.text) != null ? _ba : null;
+              const text = typeof parsedResult === "string" ? parsedResult : (_ja = parsedResult == null ? void 0 : parsedResult.text) != null ? _ja : null;
               if (text !== null && text.trim() !== "") {
                 assistant.content = text;
                 emitMessage(assistant);
@@ -5060,7 +5241,7 @@ var AgentWidgetClient = class {
             }
           }
           if (payload.isComplete) {
-            const finalContent = (_da = (_ca = payload.result) == null ? void 0 : _ca.response) != null ? _da : assistant.content;
+            const finalContent = (_la = (_ka = payload.result) == null ? void 0 : _ka.response) != null ? _la : assistant.content;
             if (finalContent) {
               const rawBuffer = rawContentBuffers.get(assistant.id);
               const contentToProcess = rawBuffer != null ? rawBuffer : ensureStringContent(finalContent);
@@ -5092,7 +5273,7 @@ var AgentWidgetClient = class {
                       }
                     });
                   } else {
-                    extractedText = typeof parsedResult === "string" ? parsedResult : (_ea = parsedResult == null ? void 0 : parsedResult.text) != null ? _ea : null;
+                    extractedText = typeof parsedResult === "string" ? parsedResult : (_ma = parsedResult == null ? void 0 : parsedResult.text) != null ? _ma : null;
                   }
                 }
               }
@@ -5104,7 +5285,7 @@ var AgentWidgetClient = class {
                 }
                 const parserToClose = streamParsers.get(assistant.id);
                 if (parserToClose) {
-                  const closeResult = (_fa = parserToClose.close) == null ? void 0 : _fa.call(parserToClose);
+                  const closeResult = (_na = parserToClose.close) == null ? void 0 : _na.call(parserToClose);
                   if (closeResult instanceof Promise) {
                     closeResult.catch(() => {
                     });
@@ -5123,9 +5304,33 @@ var AgentWidgetClient = class {
           if (stepType === "tool" || executionType === "context") {
             continue;
           }
+          const nestedCompleteCtx = payload.toolContext;
+          if (nestedCompleteCtx == null ? void 0 : nestedCompleteCtx.toolId) {
+            const nestedStepId = String(
+              (_pa = (_oa = payload.id) != null ? _oa : nestedCompleteCtx.stepId) != null ? _pa : ""
+            );
+            if (nestedStepId) {
+              const prefix = getNestedStepPrefix(
+                nestedCompleteCtx.toolId,
+                nestedStepId
+              );
+              for (const [key, msg] of nestedStepMessages) {
+                if (key.startsWith(prefix) && msg.streaming !== false) {
+                  msg.streaming = false;
+                  emitMessage(msg);
+                }
+              }
+              nestedPartIdByStep.delete(
+                `${nestedCompleteCtx.toolId}::${nestedStepId}`
+              );
+            }
+            continue;
+          }
+          const stepStopReason = payload.stopReason;
           if (didSplitByPartId) {
             if (assistantMessage !== null) {
               const msg = assistantMessage;
+              if (stepStopReason) msg.stopReason = stepStopReason;
               streamParsers.delete(msg.id);
               rawContentBuffers.delete(msg.id);
               if (msg.streaming !== false) {
@@ -5133,9 +5338,10 @@ var AgentWidgetClient = class {
                 emitMessage(msg);
               }
             }
-            const splitFinalContent = (_ga = payload.result) == null ? void 0 : _ga.response;
+            const splitFinalContent = (_qa = payload.result) == null ? void 0 : _qa.response;
             const sealedForReconcile = lastSealedTextSegment;
             if (sealedForReconcile) {
+              if (stepStopReason) sealedForReconcile.stopReason = stepStopReason;
               if (splitFinalContent !== void 0 && splitFinalContent !== null) {
                 reconcileSealedAssistantWithFinalResponse(sealedForReconcile, splitFinalContent);
               } else {
@@ -5146,8 +5352,9 @@ var AgentWidgetClient = class {
             lastSealedTextSegment = null;
             continue;
           }
-          const finalContent = (_ha = payload.result) == null ? void 0 : _ha.response;
+          const finalContent = (_ra = payload.result) == null ? void 0 : _ra.response;
           const assistant = ensureAssistantMessage();
+          if (stepStopReason) assistant.stopReason = stepStopReason;
           if (finalContent !== void 0 && finalContent !== null) {
             const parser = streamParsers.get(assistant.id);
             let hasExtractedText = false;
@@ -5198,7 +5405,7 @@ var AgentWidgetClient = class {
                       }
                     });
                   } else {
-                    const text = typeof parsedResult === "string" ? parsedResult : (_ia = parsedResult == null ? void 0 : parsedResult.text) != null ? _ia : null;
+                    const text = typeof parsedResult === "string" ? parsedResult : (_sa = parsedResult == null ? void 0 : parsedResult.text) != null ? _sa : null;
                     if (text !== null && text.trim() !== "") {
                       assistant.content = text;
                       hasExtractedText = true;
@@ -5222,7 +5429,7 @@ var AgentWidgetClient = class {
                 assistant.content = ensureStringContent(finalContent);
               }
               if (parser) {
-                const closeResult = (_ja = parser.close) == null ? void 0 : _ja.call(parser);
+                const closeResult = (_ta = parser.close) == null ? void 0 : _ta.call(parser);
                 if (closeResult instanceof Promise) {
                   closeResult.catch(() => {
                   });
@@ -5240,7 +5447,7 @@ var AgentWidgetClient = class {
             emitMessage(assistant);
           }
         } else if (payloadType === "flow_complete") {
-          const finalContent = (_ka = payload.result) == null ? void 0 : _ka.response;
+          const finalContent = (_ua = payload.result) == null ? void 0 : _ua.response;
           if (didSplitByPartId) {
             if (assistantMessage !== null) {
               const msg = assistantMessage;
@@ -5307,11 +5514,11 @@ var AgentWidgetClient = class {
         } else if (payloadType === "agent_start") {
           agentExecution = {
             executionId: payload.executionId,
-            agentId: (_la = payload.agentId) != null ? _la : "virtual",
-            agentName: (_ma = payload.agentName) != null ? _ma : "",
+            agentId: (_va = payload.agentId) != null ? _va : "virtual",
+            agentName: (_wa = payload.agentName) != null ? _wa : "",
             status: "running",
             currentIteration: 0,
-            maxTurns: (_na = payload.maxTurns) != null ? _na : 1,
+            maxTurns: (_xa = payload.maxTurns) != null ? _xa : 1,
             startedAt: resolveTimestamp(payload.startedAt)
           };
         } else if (payloadType === "agent_iteration_start") {
@@ -5331,7 +5538,7 @@ var AgentWidgetClient = class {
         } else if (payloadType === "agent_turn_delta") {
           if (payload.contentType === "text") {
             const assistant = ensureAssistantMessage();
-            assistant.content += (_oa = payload.delta) != null ? _oa : "";
+            assistant.content += (_ya = payload.delta) != null ? _ya : "";
             assistant.agentMetadata = {
               executionId: payload.executionId,
               iteration: payload.iteration,
@@ -5340,14 +5547,14 @@ var AgentWidgetClient = class {
             };
             emitMessage(assistant);
           } else if (payload.contentType === "thinking") {
-            const reasoningId = (_pa = payload.turnId) != null ? _pa : `agent-think-${payload.iteration}`;
+            const reasoningId = (_za = payload.turnId) != null ? _za : `agent-think-${payload.iteration}`;
             const reasoningMessage = ensureReasoningMessage(reasoningId);
-            reasoningMessage.reasoning = (_qa = reasoningMessage.reasoning) != null ? _qa : {
+            reasoningMessage.reasoning = (_Aa = reasoningMessage.reasoning) != null ? _Aa : {
               id: reasoningId,
               status: "streaming",
               chunks: []
             };
-            reasoningMessage.reasoning.chunks.push((_ra = payload.delta) != null ? _ra : "");
+            reasoningMessage.reasoning.chunks.push((_Ba = payload.delta) != null ? _Ba : "");
             reasoningMessage.agentMetadata = {
               executionId: payload.executionId,
               iteration: payload.iteration,
@@ -5355,12 +5562,12 @@ var AgentWidgetClient = class {
             };
             emitMessage(reasoningMessage);
           } else if (payload.contentType === "tool_input") {
-            const toolId = (_sa = payload.toolCallId) != null ? _sa : toolContext.lastId;
+            const toolId = (_Ca = payload.toolCallId) != null ? _Ca : toolContext.lastId;
             if (toolId) {
               const toolMessage = toolMessages.get(toolId);
               if (toolMessage == null ? void 0 : toolMessage.toolCall) {
-                toolMessage.toolCall.chunks = (_ta = toolMessage.toolCall.chunks) != null ? _ta : [];
-                toolMessage.toolCall.chunks.push((_ua = payload.delta) != null ? _ua : "");
+                toolMessage.toolCall.chunks = (_Da = toolMessage.toolCall.chunks) != null ? _Da : [];
+                toolMessage.toolCall.chunks.push((_Ea = payload.delta) != null ? _Ea : "");
                 emitMessage(toolMessage);
               }
             }
@@ -5372,20 +5579,29 @@ var AgentWidgetClient = class {
             if (reasoningMessage == null ? void 0 : reasoningMessage.reasoning) {
               reasoningMessage.reasoning.status = "complete";
               reasoningMessage.reasoning.completedAt = resolveTimestamp(payload.completedAt);
-              const start = (_va = reasoningMessage.reasoning.startedAt) != null ? _va : Date.now();
+              const start = (_Fa = reasoningMessage.reasoning.startedAt) != null ? _Fa : Date.now();
               reasoningMessage.reasoning.durationMs = Math.max(
                 0,
-                ((_wa = reasoningMessage.reasoning.completedAt) != null ? _wa : Date.now()) - start
+                ((_Ga = reasoningMessage.reasoning.completedAt) != null ? _Ga : Date.now()) - start
               );
               reasoningMessage.streaming = false;
               emitMessage(reasoningMessage);
             }
           }
+          const turnStopReason = payload.stopReason;
+          if (turnStopReason && assistantMessage !== null) {
+            const turnId = payload.turnId;
+            const matchesTurn = !turnId || ((_Ha = assistantMessage.agentMetadata) == null ? void 0 : _Ha.turnId) === turnId;
+            if (matchesTurn) {
+              assistantMessage.stopReason = turnStopReason;
+              emitMessage(assistantMessage);
+            }
+          }
         } else if (payloadType === "agent_tool_start") {
-          const toolId = (_xa = payload.toolCallId) != null ? _xa : `agent-tool-${nextSequence()}`;
+          const toolId = (_Ia = payload.toolCallId) != null ? _Ia : `agent-tool-${nextSequence()}`;
           trackToolId(getToolCallKey(payload), toolId);
           const toolMessage = ensureToolMessage(toolId);
-          const tool = (_ya = toolMessage.toolCall) != null ? _ya : {
+          const tool = (_Ja = toolMessage.toolCall) != null ? _Ja : {
             id: toolId,
             status: "pending",
             name: void 0,
@@ -5397,12 +5613,12 @@ var AgentWidgetClient = class {
             completedAt: void 0,
             durationMs: void 0
           };
-          tool.name = (_Aa = (_za = payload.toolName) != null ? _za : payload.name) != null ? _Aa : tool.name;
+          tool.name = (_La = (_Ka = payload.toolName) != null ? _Ka : payload.name) != null ? _La : tool.name;
           tool.status = "running";
           if (payload.parameters !== void 0) {
             tool.args = payload.parameters;
           }
-          tool.startedAt = resolveTimestamp((_Ba = payload.startedAt) != null ? _Ba : payload.timestamp);
+          tool.startedAt = resolveTimestamp((_Ma = payload.startedAt) != null ? _Ma : payload.timestamp);
           toolMessage.toolCall = tool;
           toolMessage.streaming = true;
           toolMessage.agentMetadata = {
@@ -5411,21 +5627,21 @@ var AgentWidgetClient = class {
           };
           emitMessage(toolMessage);
         } else if (payloadType === "agent_tool_delta") {
-          const toolId = (_Ca = payload.toolCallId) != null ? _Ca : toolContext.lastId;
+          const toolId = (_Na = payload.toolCallId) != null ? _Na : toolContext.lastId;
           if (toolId) {
-            const toolMessage = (_Da = toolMessages.get(toolId)) != null ? _Da : ensureToolMessage(toolId);
+            const toolMessage = (_Oa = toolMessages.get(toolId)) != null ? _Oa : ensureToolMessage(toolId);
             if (toolMessage.toolCall) {
-              toolMessage.toolCall.chunks = (_Ea = toolMessage.toolCall.chunks) != null ? _Ea : [];
-              toolMessage.toolCall.chunks.push((_Fa = payload.delta) != null ? _Fa : "");
+              toolMessage.toolCall.chunks = (_Pa = toolMessage.toolCall.chunks) != null ? _Pa : [];
+              toolMessage.toolCall.chunks.push((_Qa = payload.delta) != null ? _Qa : "");
               toolMessage.toolCall.status = "running";
               toolMessage.streaming = true;
               emitMessage(toolMessage);
             }
           }
         } else if (payloadType === "agent_tool_complete") {
-          const toolId = (_Ga = payload.toolCallId) != null ? _Ga : toolContext.lastId;
+          const toolId = (_Ra = payload.toolCallId) != null ? _Ra : toolContext.lastId;
           if (toolId) {
-            const toolMessage = (_Ha = toolMessages.get(toolId)) != null ? _Ha : ensureToolMessage(toolId);
+            const toolMessage = (_Sa = toolMessages.get(toolId)) != null ? _Sa : ensureToolMessage(toolId);
             if (toolMessage.toolCall) {
               toolMessage.toolCall.status = "complete";
               if (payload.result !== void 0) {
@@ -5434,7 +5650,7 @@ var AgentWidgetClient = class {
               if (typeof payload.executionTime === "number") {
                 toolMessage.toolCall.durationMs = payload.executionTime;
               }
-              toolMessage.toolCall.completedAt = resolveTimestamp((_Ia = payload.completedAt) != null ? _Ia : payload.timestamp);
+              toolMessage.toolCall.completedAt = resolveTimestamp((_Ta = payload.completedAt) != null ? _Ta : payload.timestamp);
               toolMessage.streaming = false;
               emitMessage(toolMessage);
               const callKey = getToolCallKey(payload);
@@ -5449,7 +5665,7 @@ var AgentWidgetClient = class {
           const reflectionMessage = {
             id: reflectionId,
             role: "assistant",
-            content: (_Ja = payload.reflection) != null ? _Ja : "",
+            content: (_Ua = payload.reflection) != null ? _Ua : "",
             createdAt: (/* @__PURE__ */ new Date()).toISOString(),
             streaming: false,
             variant: "reasoning",
@@ -5457,7 +5673,7 @@ var AgentWidgetClient = class {
             reasoning: {
               id: reflectionId,
               status: "complete",
-              chunks: [(_Ka = payload.reflection) != null ? _Ka : ""]
+              chunks: [(_Va = payload.reflection) != null ? _Va : ""]
             },
             agentMetadata: {
               executionId: payload.executionId,
@@ -5478,7 +5694,7 @@ var AgentWidgetClient = class {
           }
           onEvent({ type: "status", status: "idle" });
         } else if (payloadType === "agent_error") {
-          const errorMessage = typeof payload.error === "string" ? payload.error : (_Ma = (_La = payload.error) == null ? void 0 : _La.message) != null ? _Ma : "Agent execution error";
+          const errorMessage = typeof payload.error === "string" ? payload.error : (_Xa = (_Wa = payload.error) == null ? void 0 : _Wa.message) != null ? _Xa : "Agent execution error";
           if (payload.recoverable) {
             if (typeof console !== "undefined") {
               console.warn("[AgentWidget] Recoverable agent error:", errorMessage);
@@ -5491,7 +5707,7 @@ var AgentWidgetClient = class {
           }
         } else if (payloadType === "agent_ping") {
         } else if (payloadType === "agent_approval_start") {
-          const approvalId = (_Na = payload.approvalId) != null ? _Na : `approval-${nextSequence()}`;
+          const approvalId = (_Ya = payload.approvalId) != null ? _Ya : `approval-${nextSequence()}`;
           const approvalMessage = {
             id: `approval-${approvalId}`,
             role: "assistant",
@@ -5503,17 +5719,17 @@ var AgentWidgetClient = class {
             approval: {
               id: approvalId,
               status: "pending",
-              agentId: (_Oa = agentExecution == null ? void 0 : agentExecution.agentId) != null ? _Oa : "virtual",
-              executionId: (_Qa = (_Pa = payload.executionId) != null ? _Pa : agentExecution == null ? void 0 : agentExecution.executionId) != null ? _Qa : "",
-              toolName: (_Ra = payload.toolName) != null ? _Ra : "",
+              agentId: (_Za = agentExecution == null ? void 0 : agentExecution.agentId) != null ? _Za : "virtual",
+              executionId: (_$a = (__a = payload.executionId) != null ? __a : agentExecution == null ? void 0 : agentExecution.executionId) != null ? _$a : "",
+              toolName: (_ab = payload.toolName) != null ? _ab : "",
               toolType: payload.toolType,
-              description: (_Ta = payload.description) != null ? _Ta : `Execute ${(_Sa = payload.toolName) != null ? _Sa : "tool"}`,
+              description: (_cb = payload.description) != null ? _cb : `Execute ${(_bb = payload.toolName) != null ? _bb : "tool"}`,
               parameters: payload.parameters
             }
           };
           emitMessage(approvalMessage);
         } else if (payloadType === "step_await" && payload.awaitReason === "approval_required") {
-          const approvalId = (_Ua = payload.approvalId) != null ? _Ua : `approval-${nextSequence()}`;
+          const approvalId = (_db = payload.approvalId) != null ? _db : `approval-${nextSequence()}`;
           const approvalMessage = {
             id: `approval-${approvalId}`,
             role: "assistant",
@@ -5525,11 +5741,11 @@ var AgentWidgetClient = class {
             approval: {
               id: approvalId,
               status: "pending",
-              agentId: (_Va = agentExecution == null ? void 0 : agentExecution.agentId) != null ? _Va : "virtual",
-              executionId: (_Xa = (_Wa = payload.executionId) != null ? _Wa : agentExecution == null ? void 0 : agentExecution.executionId) != null ? _Xa : "",
-              toolName: (_Ya = payload.toolName) != null ? _Ya : "",
+              agentId: (_eb = agentExecution == null ? void 0 : agentExecution.agentId) != null ? _eb : "virtual",
+              executionId: (_gb = (_fb = payload.executionId) != null ? _fb : agentExecution == null ? void 0 : agentExecution.executionId) != null ? _gb : "",
+              toolName: (_hb = payload.toolName) != null ? _hb : "",
               toolType: payload.toolType,
-              description: (__a = payload.description) != null ? __a : `Execute ${(_Za = payload.toolName) != null ? _Za : "tool"}`,
+              description: (_jb = payload.description) != null ? _jb : `Execute ${(_ib = payload.toolName) != null ? _ib : "tool"}`,
               parameters: payload.parameters
             }
           };
@@ -5548,11 +5764,11 @@ var AgentWidgetClient = class {
               sequence: nextSequence(),
               approval: {
                 id: approvalId,
-                status: (_$a = payload.decision) != null ? _$a : "approved",
-                agentId: (_ab = agentExecution == null ? void 0 : agentExecution.agentId) != null ? _ab : "virtual",
-                executionId: (_cb = (_bb = payload.executionId) != null ? _bb : agentExecution == null ? void 0 : agentExecution.executionId) != null ? _cb : "",
-                toolName: (_db = payload.toolName) != null ? _db : "",
-                description: (_eb = payload.description) != null ? _eb : "",
+                status: (_kb = payload.decision) != null ? _kb : "approved",
+                agentId: (_lb = agentExecution == null ? void 0 : agentExecution.agentId) != null ? _lb : "virtual",
+                executionId: (_nb = (_mb = payload.executionId) != null ? _mb : agentExecution == null ? void 0 : agentExecution.executionId) != null ? _nb : "",
+                toolName: (_ob = payload.toolName) != null ? _ob : "",
+                description: (_pb = payload.description) != null ? _pb : "",
                 resolvedAt: Date.now()
               }
             };
@@ -5590,7 +5806,7 @@ var AgentWidgetClient = class {
             }
           } else if (payloadType === "artifact_delta") {
             const deltaId = String(payload.id);
-            const deltaText = typeof payload.delta === "string" ? payload.delta : String((_fb = payload.delta) != null ? _fb : "");
+            const deltaText = typeof payload.delta === "string" ? payload.delta : String((_qb = payload.delta) != null ? _qb : "");
             onEvent({
               type: "artifact_delta",
               id: deltaId,
@@ -5613,7 +5829,7 @@ var AgentWidgetClient = class {
             if (refMsg) {
               refMsg.streaming = false;
               try {
-                const parsed = JSON.parse((_gb = refMsg.rawContent) != null ? _gb : "{}");
+                const parsed = JSON.parse((_rb = refMsg.rawContent) != null ? _rb : "{}");
                 if (parsed.props) {
                   parsed.props.status = "complete";
                   const acc = artifactContent.get(artCompleteId);
@@ -5634,7 +5850,7 @@ var AgentWidgetClient = class {
           if (!m || typeof m !== "object") {
             continue;
           }
-          const id = String((_hb = m.id) != null ? _hb : `msg-${nextSequence()}`);
+          const id = String((_sb = m.id) != null ? _sb : `msg-${nextSequence()}`);
           const roleRaw = m.role;
           const role = roleRaw === "user" ? "user" : roleRaw === "system" ? "system" : "assistant";
           const msg = {
@@ -5653,7 +5869,7 @@ var AgentWidgetClient = class {
           if (msg.rawContent) {
             try {
               const parsed = JSON.parse(msg.rawContent);
-              const refArtId = (_ib = parsed == null ? void 0 : parsed.props) == null ? void 0 : _ib.artifactId;
+              const refArtId = (_tb = parsed == null ? void 0 : parsed.props) == null ? void 0 : _tb.artifactId;
               if (typeof refArtId === "string") {
                 artifactIdsWithCards.add(refArtId);
               }
@@ -5669,7 +5885,7 @@ var AgentWidgetClient = class {
           if (payload.error instanceof Error) {
             resolvedError = payload.error;
           } else if (payloadType === "dispatch_error") {
-            const msg = (_jb = payload.message) != null ? _jb : payload.error;
+            const msg = (_ub = payload.message) != null ? _ub : payload.error;
             if (msg != null && msg !== "") {
               resolvedError = new Error(String(msg));
             }
@@ -5678,7 +5894,7 @@ var AgentWidgetClient = class {
             if (typeof e === "string" && e !== "") {
               resolvedError = new Error(e);
             } else if (e != null && typeof e === "object" && "message" in e) {
-              resolvedError = new Error(String((_kb = e.message) != null ? _kb : e));
+              resolvedError = new Error(String((_vb = e.message) != null ? _vb : e));
             }
           } else if (payloadType === "error" && payload.error != null && payload.error !== "") {
             resolvedError = new Error(String(payload.error));
@@ -7523,6 +7739,8 @@ var AgentWidgetSession = class _AgentWidgetSession {
     var _a;
     (_a = this.abortController) == null ? void 0 : _a.abort();
     this.abortController = null;
+    this.stopSpeaking();
+    this.stopVoicePlayback();
     this.setStreaming(false);
     this.setStatus("idle");
   }
@@ -8155,6 +8373,9 @@ var morphMessages = (container, newContent, options = {}) => {
           if (oldNode.classList.contains("persona-animate-typing")) {
             return false;
           }
+          if (oldNode.hasAttribute("data-preserve-runtime")) {
+            return false;
+          }
           if (oldNode.hasAttribute("data-preserve-animation")) {
             if (newNode instanceof HTMLElement && !newNode.hasAttribute("data-preserve-animation")) {
               return;
@@ -8176,7 +8397,7 @@ var morphMessages = (container, newContent, options = {}) => {
 
 // src/utils/message-fingerprint.ts
 function computeMessageFingerprint(message, configVersion) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
   return [
     message.id,
     message.role,
@@ -8194,6 +8415,7 @@ function computeMessageFingerprint(message, configVersion) {
     typeof ((_w = message.toolCall) == null ? void 0 : _w.args) === "string" ? message.toolCall.args.length : ((_x = message.toolCall) == null ? void 0 : _x.args) ? JSON.stringify(message.toolCall.args).length : 0,
     (_A = (_z = (_y = message.reasoning) == null ? void 0 : _y.chunks) == null ? void 0 : _z.length) != null ? _A : 0,
     (_C = (_B = message.contentParts) == null ? void 0 : _B.length) != null ? _C : 0,
+    (_D = message.stopReason) != null ? _D : "",
     configVersion
   ].join("\0");
 }
@@ -8294,6 +8516,241 @@ var statusCopy = {
 var DEFAULT_OVERLAY_Z_INDEX = 1e5;
 var PORTALED_OVERLAY_Z_INDEX = DEFAULT_OVERLAY_Z_INDEX + 1;
 
+// src/utils/stream-animation.ts
+var DEFAULT_STREAM_ANIMATION = {
+  type: "none",
+  placeholder: "none",
+  speed: 120,
+  duration: 1800,
+  buffer: "none"
+};
+var DEFAULT_SKIP_TAGS = ["pre", "code", "a", "script", "style"];
+var resolveStreamAnimation = (feature) => {
+  var _a, _b, _c, _d, _e;
+  return {
+    type: (_a = feature == null ? void 0 : feature.type) != null ? _a : DEFAULT_STREAM_ANIMATION.type,
+    placeholder: (_b = feature == null ? void 0 : feature.placeholder) != null ? _b : DEFAULT_STREAM_ANIMATION.placeholder,
+    speed: (_c = feature == null ? void 0 : feature.speed) != null ? _c : DEFAULT_STREAM_ANIMATION.speed,
+    duration: (_d = feature == null ? void 0 : feature.duration) != null ? _d : DEFAULT_STREAM_ANIMATION.duration,
+    buffer: (_e = feature == null ? void 0 : feature.buffer) != null ? _e : DEFAULT_STREAM_ANIMATION.buffer
+  };
+};
+var BUILTIN_PLUGINS = [
+  {
+    name: "typewriter",
+    containerClass: "persona-stream-typewriter",
+    wrap: "char",
+    useCaret: true
+  },
+  {
+    name: "pop-bubble",
+    bubbleClass: "persona-stream-pop",
+    wrap: "none"
+  },
+  {
+    name: "letter-rise",
+    containerClass: "persona-stream-letter-rise",
+    wrap: "char"
+  },
+  {
+    name: "word-fade",
+    containerClass: "persona-stream-word-fade",
+    wrap: "word"
+  }
+];
+var globalRegistry = /* @__PURE__ */ new Map();
+for (const plugin of BUILTIN_PLUGINS) globalRegistry.set(plugin.name, plugin);
+var resolveStreamAnimationPlugin = (type, overrides) => {
+  var _a, _b;
+  if (type === "none") return null;
+  if (overrides && Object.prototype.hasOwnProperty.call(overrides, type)) {
+    return (_a = overrides[type]) != null ? _a : null;
+  }
+  return (_b = globalRegistry.get(type)) != null ? _b : null;
+};
+var applyStreamBuffer = (content, buffer, plugin, message, streaming) => {
+  if (!streaming) return content;
+  if (plugin == null ? void 0 : plugin.bufferContent) return plugin.bufferContent(content, message);
+  if (!content) return content;
+  if (buffer === "word") {
+    const lastSpace = content.search(/\s(?=\S*$)/);
+    if (lastSpace < 0) return "";
+    return content.slice(0, lastSpace);
+  }
+  if (buffer === "line") {
+    const lastNewline = content.lastIndexOf("\n");
+    if (lastNewline < 0) return "";
+    return content.slice(0, lastNewline);
+  }
+  return content;
+};
+var makeCharSpan = (doc, ch, messageId, index) => {
+  const span = doc.createElement("span");
+  span.className = "persona-stream-char";
+  span.id = `stream-c-${messageId}-${index}`;
+  span.style.setProperty("--char-index", String(index));
+  span.textContent = ch;
+  return span;
+};
+var makeWordSpan = (doc, word, messageId, index) => {
+  const span = doc.createElement("span");
+  span.className = "persona-stream-word";
+  span.id = `stream-w-${messageId}-${index}`;
+  span.style.setProperty("--word-index", String(index));
+  span.textContent = word;
+  return span;
+};
+var WHITESPACE_RE = /\s/;
+var shouldSkipSubtree = (node, skipTags) => {
+  let current = node.parentNode;
+  while (current) {
+    if (current.nodeType === 1) {
+      const el = current;
+      if (skipTags.has(el.tagName.toLowerCase())) return true;
+    }
+    current = current.parentNode;
+  }
+  return false;
+};
+var wrapTextNodeChars = (textNode, messageId, counterRef) => {
+  var _a;
+  const doc = textNode.ownerDocument;
+  const parent = textNode.parentNode;
+  if (!doc || !parent) return;
+  const text = (_a = textNode.nodeValue) != null ? _a : "";
+  if (!text) return;
+  const fragment = doc.createDocumentFragment();
+  let i = 0;
+  while (i < text.length) {
+    if (WHITESPACE_RE.test(text[i])) {
+      let j = i;
+      while (j < text.length && WHITESPACE_RE.test(text[j])) j += 1;
+      fragment.appendChild(doc.createTextNode(text.slice(i, j)));
+      i = j;
+    } else {
+      const group = doc.createElement("span");
+      group.className = "persona-stream-word-group";
+      let j = i;
+      while (j < text.length && !WHITESPACE_RE.test(text[j])) {
+        group.appendChild(makeCharSpan(doc, text[j], messageId, counterRef.value));
+        counterRef.value += 1;
+        j += 1;
+      }
+      fragment.appendChild(group);
+      i = j;
+    }
+  }
+  parent.replaceChild(fragment, textNode);
+};
+var wrapTextNodeWords = (textNode, messageId, counterRef) => {
+  var _a;
+  const doc = textNode.ownerDocument;
+  const parent = textNode.parentNode;
+  if (!doc || !parent) return;
+  const text = (_a = textNode.nodeValue) != null ? _a : "";
+  if (!text) return;
+  const fragment = doc.createDocumentFragment();
+  const tokens = text.split(/(\s+)/);
+  for (const token of tokens) {
+    if (!token) continue;
+    if (/^\s+$/.test(token)) {
+      fragment.appendChild(doc.createTextNode(token));
+    } else {
+      fragment.appendChild(makeWordSpan(doc, token, messageId, counterRef.value));
+      counterRef.value += 1;
+    }
+  }
+  parent.replaceChild(fragment, textNode);
+};
+var wrapStreamAnimation = (html, mode, messageId, options) => {
+  var _a;
+  if (!html) return html;
+  if (typeof document === "undefined") return html;
+  const scratch = document.createElement("div");
+  scratch.innerHTML = html;
+  const skipTags = new Set(((_a = options == null ? void 0 : options.skipTags) != null ? _a : DEFAULT_SKIP_TAGS).map((t) => t.toLowerCase()));
+  const walker = document.createTreeWalker(scratch, NodeFilter.SHOW_TEXT, null);
+  const textNodes = [];
+  let node = walker.nextNode();
+  while (node) {
+    if (!shouldSkipSubtree(node, skipTags)) {
+      textNodes.push(node);
+    }
+    node = walker.nextNode();
+  }
+  const counterRef = { value: 0 };
+  const wrap = mode === "char" ? wrapTextNodeChars : wrapTextNodeWords;
+  for (const textNode of textNodes) {
+    wrap(textNode, messageId, counterRef);
+  }
+  return scratch.innerHTML;
+};
+var createStreamCaret = (doc = document) => {
+  const caret = doc.createElement("span");
+  caret.className = "persona-stream-caret";
+  caret.setAttribute("aria-hidden", "true");
+  caret.setAttribute("data-preserve-animation", "stream-caret");
+  return caret;
+};
+var createSkeletonPlaceholder = (doc = document) => {
+  const wrapper = doc.createElement("div");
+  wrapper.className = "persona-stream-skeleton";
+  wrapper.setAttribute("data-preserve-animation", "stream-skeleton");
+  wrapper.setAttribute("aria-hidden", "true");
+  const line = doc.createElement("div");
+  line.className = "persona-stream-skeleton-line";
+  wrapper.appendChild(line);
+  return wrapper;
+};
+var injectedStyleRoots = /* @__PURE__ */ new WeakMap();
+var injectPluginStyles = (plugin, root) => {
+  var _a;
+  if (!plugin.styles) return;
+  let names = injectedStyleRoots.get(root);
+  if (!names) {
+    names = /* @__PURE__ */ new Set();
+    injectedStyleRoots.set(root, names);
+  }
+  if (names.has(plugin.name)) {
+    const escaped = plugin.name.replace(/["\\]/g, "\\$&");
+    const existing = root.querySelector(
+      `style[data-persona-animation="${escaped}"]`
+    );
+    if (existing) return;
+    names.delete(plugin.name);
+  }
+  names.add(plugin.name);
+  const doc = root instanceof ShadowRoot ? root.ownerDocument : (_a = root.ownerDocument) != null ? _a : document;
+  const style = doc.createElement("style");
+  style.setAttribute("data-persona-animation", plugin.name);
+  style.textContent = plugin.styles;
+  root.appendChild(style);
+};
+var attachedCleanups = /* @__PURE__ */ new WeakMap();
+var attachPlugin = (plugin, root) => {
+  if (!plugin.onAttach) return;
+  let cleanups = attachedCleanups.get(root);
+  if (!cleanups) {
+    cleanups = /* @__PURE__ */ new Map();
+    attachedCleanups.set(root, cleanups);
+  }
+  if (cleanups.has(plugin.name)) return;
+  const cleanup = plugin.onAttach(root);
+  cleanups.set(plugin.name, cleanup);
+};
+var detachAllPlugins = (root) => {
+  const cleanups = attachedCleanups.get(root);
+  if (!cleanups) return;
+  for (const cleanup of cleanups.values()) {
+    if (typeof cleanup === "function") cleanup();
+  }
+  cleanups.clear();
+};
+var ensurePluginActive = (plugin, root) => {
+  injectPluginStyles(plugin, root);
+  attachPlugin(plugin, root);
+};
+
 // src/utils/overlay-host-stacking.ts
 function syncOverlayHostStacking(host, zIndex = DEFAULT_OVERLAY_Z_INDEX) {
   const originalPosition = host.style.position;
@@ -8654,6 +9111,7 @@ var buildHeader = (context) => {
     clearChatButton.style.color = clearChatIconColor || HEADER_THEME_CSS.actionIconColor;
     const iconSvg = renderLucideIcon(clearChatIconName, "20px", "currentColor", 1);
     if (iconSvg) {
+      iconSvg.style.display = "block";
       clearChatButton.appendChild(iconSvg);
     }
     if (clearChatBgColor) {
@@ -8737,7 +9195,7 @@ var buildHeader = (context) => {
   }
   const closeButtonWrapper = createElement(
     "div",
-    closeButtonPlacement === "top-right" ? "persona-absolute persona-top-4 persona-right-4 persona-z-50" : clearChatEnabled && clearChatPlacement === "inline" ? "" : "persona-ml-auto"
+    closeButtonPlacement === "top-right" ? "persona-absolute persona-top-4 persona-right-4 persona-z-50" : clearChatEnabled && clearChatPlacement === "inline" ? "persona-relative persona-inline-flex persona-items-center persona-justify-center" : "persona-relative persona-ml-auto persona-inline-flex persona-items-center persona-justify-center"
   );
   const closeButton = createElement(
     "button",
@@ -8753,8 +9211,9 @@ var buildHeader = (context) => {
   const closeButtonIconName = (_E = launcher.closeButtonIconName) != null ? _E : "x";
   const closeButtonIconText = (_F = launcher.closeButtonIconText) != null ? _F : "\xD7";
   closeButton.style.color = launcher.closeButtonColor || HEADER_THEME_CSS.actionIconColor;
-  const closeIconSvg = renderLucideIcon(closeButtonIconName, "20px", "currentColor", 1);
+  const closeIconSvg = renderLucideIcon(closeButtonIconName, "28px", "currentColor", 1);
   if (closeIconSvg) {
+    closeIconSvg.style.display = "block";
     closeButton.appendChild(closeIconSvg);
   } else {
     closeButton.textContent = closeButtonIconText;
@@ -9282,7 +9741,7 @@ var buildMinimalHeader = (context) => {
   closeButton.style.display = showClose ? "" : "none";
   closeButton.style.color = launcher.closeButtonColor || HEADER_THEME_CSS.actionIconColor;
   const closeButtonIconName = (_i = launcher.closeButtonIconName) != null ? _i : "x";
-  const closeIconSvg = renderLucideIcon(closeButtonIconName, "20px", "currentColor", 2);
+  const closeIconSvg = renderLucideIcon(closeButtonIconName, "28px", "currentColor", 1);
   if (closeIconSvg) {
     closeButton.appendChild(closeIconSvg);
   } else {
@@ -9377,7 +9836,7 @@ var buildHeaderWithLayout = (config, layoutConfig, context) => {
 
 // src/components/composer-builder.ts
 var buildComposer = (context) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E;
   const { config } = context;
   const footer = createElement(
     "div",
@@ -9433,9 +9892,13 @@ var buildComposer = (context) => {
   const useIcon = (_d = sendButtonConfig.useIcon) != null ? _d : false;
   const iconText = (_e = sendButtonConfig.iconText) != null ? _e : "\u2191";
   const iconName = sendButtonConfig.iconName;
-  const tooltipText = (_f = sendButtonConfig.tooltipText) != null ? _f : "Send message";
-  const showTooltip = (_g = sendButtonConfig.showTooltip) != null ? _g : false;
-  const buttonSize = (_h = sendButtonConfig.size) != null ? _h : "40px";
+  const stopIconName = (_f = sendButtonConfig.stopIconName) != null ? _f : "square";
+  const tooltipText = (_g = sendButtonConfig.tooltipText) != null ? _g : "Send message";
+  const stopTooltipText = (_h = sendButtonConfig.stopTooltipText) != null ? _h : "Stop generating";
+  const sendLabel = (_j = (_i = config == null ? void 0 : config.copy) == null ? void 0 : _i.sendButtonLabel) != null ? _j : "Send";
+  const stopLabel = (_l = (_k = config == null ? void 0 : config.copy) == null ? void 0 : _k.stopButtonLabel) != null ? _l : "Stop";
+  const showTooltip = (_m = sendButtonConfig.showTooltip) != null ? _m : false;
+  const buttonSize = (_n = sendButtonConfig.size) != null ? _n : "40px";
   const backgroundColor = sendButtonConfig.backgroundColor;
   const textColor = sendButtonConfig.textColor;
   const sendButtonWrapper = createElement("div", "persona-send-button-wrapper");
@@ -9445,6 +9908,8 @@ var buildComposer = (context) => {
   );
   sendButton.type = "submit";
   sendButton.setAttribute("data-persona-composer-submit", "");
+  let sendIcon = null;
+  let stopIcon = null;
   if (useIcon) {
     sendButton.style.width = buttonSize;
     sendButton.style.height = buttonSize;
@@ -9458,25 +9923,26 @@ var buildComposer = (context) => {
     } else {
       sendButton.style.color = "var(--persona-button-primary-fg, #ffffff)";
     }
+    const iconSize = parseFloat(buttonSize) || 24;
+    const iconColor = (textColor == null ? void 0 : textColor.trim()) || "currentColor";
     if (iconName) {
-      const iconSize = parseFloat(buttonSize) || 24;
-      const iconColor = (textColor == null ? void 0 : textColor.trim()) || "currentColor";
-      const iconSvg = renderLucideIcon(iconName, iconSize, iconColor, 2);
-      if (iconSvg) {
-        sendButton.appendChild(iconSvg);
+      sendIcon = renderLucideIcon(iconName, iconSize, iconColor, 2);
+      if (sendIcon) {
+        sendButton.appendChild(sendIcon);
       } else {
         sendButton.textContent = iconText;
       }
     } else {
       sendButton.textContent = iconText;
     }
+    stopIcon = renderLucideIcon(stopIconName, iconSize, iconColor, 2);
     if (backgroundColor) {
       sendButton.style.backgroundColor = backgroundColor;
     } else {
       sendButton.classList.add("persona-bg-persona-primary");
     }
   } else {
-    sendButton.textContent = (_j = (_i = config == null ? void 0 : config.copy) == null ? void 0 : _i.sendButtonLabel) != null ? _j : "Send";
+    sendButton.textContent = sendLabel;
     if (textColor) {
       sendButton.style.color = textColor;
     } else {
@@ -9504,18 +9970,43 @@ var buildComposer = (context) => {
     sendButton.style.paddingTop = "";
     sendButton.style.paddingBottom = "";
   }
+  let sendTooltip = null;
   if (showTooltip && tooltipText) {
-    const tooltip = createElement("div", "persona-send-button-tooltip");
-    tooltip.textContent = tooltipText;
-    sendButtonWrapper.appendChild(tooltip);
+    sendTooltip = createElement("div", "persona-send-button-tooltip");
+    sendTooltip.textContent = tooltipText;
+    sendButtonWrapper.appendChild(sendTooltip);
   }
+  sendButton.setAttribute("aria-label", tooltipText);
   sendButtonWrapper.appendChild(sendButton);
-  const voiceRecognitionConfig = (_k = config == null ? void 0 : config.voiceRecognition) != null ? _k : {};
+  let currentMode = "send";
+  const setSendButtonMode = (mode) => {
+    if (mode === currentMode) return;
+    currentMode = mode;
+    const label = mode === "stop" ? stopTooltipText : tooltipText;
+    sendButton.setAttribute("aria-label", label);
+    if (sendTooltip) {
+      sendTooltip.textContent = label;
+    }
+    if (useIcon) {
+      if (sendIcon && stopIcon) {
+        const next = mode === "stop" ? stopIcon : sendIcon;
+        const prev = mode === "stop" ? sendIcon : stopIcon;
+        if (prev.parentNode === sendButton) {
+          sendButton.replaceChild(next, prev);
+        } else {
+          sendButton.appendChild(next);
+        }
+      }
+    } else {
+      sendButton.textContent = mode === "stop" ? stopLabel : sendLabel;
+    }
+  };
+  const voiceRecognitionConfig = (_o = config == null ? void 0 : config.voiceRecognition) != null ? _o : {};
   const voiceRecognitionEnabled = voiceRecognitionConfig.enabled === true;
   let micButton = null;
   let micButtonWrapper = null;
   const hasSpeechRecognition = typeof window !== "undefined" && (typeof window.webkitSpeechRecognition !== "undefined" || typeof window.SpeechRecognition !== "undefined");
-  const hasRuntypeProvider = ((_l = voiceRecognitionConfig.provider) == null ? void 0 : _l.type) === "runtype";
+  const hasRuntypeProvider = ((_p = voiceRecognitionConfig.provider) == null ? void 0 : _p.type) === "runtype";
   const hasVoiceInput = hasSpeechRecognition || hasRuntypeProvider;
   if (voiceRecognitionEnabled && hasVoiceInput) {
     micButtonWrapper = createElement("div", "persona-send-button-wrapper");
@@ -9526,11 +10017,11 @@ var buildComposer = (context) => {
     micButton.type = "button";
     micButton.setAttribute("data-persona-composer-mic", "");
     micButton.setAttribute("aria-label", "Start voice recognition");
-    const micIconName = (_m = voiceRecognitionConfig.iconName) != null ? _m : "mic";
-    const micIconSize = (_n = voiceRecognitionConfig.iconSize) != null ? _n : buttonSize;
+    const micIconName = (_q = voiceRecognitionConfig.iconName) != null ? _q : "mic";
+    const micIconSize = (_r = voiceRecognitionConfig.iconSize) != null ? _r : buttonSize;
     const micIconSizeNum = parseFloat(micIconSize) || 24;
-    const micBackgroundColor = (_o = voiceRecognitionConfig.backgroundColor) != null ? _o : backgroundColor;
-    const micIconColor = (_p = voiceRecognitionConfig.iconColor) != null ? _p : textColor;
+    const micBackgroundColor = (_s = voiceRecognitionConfig.backgroundColor) != null ? _s : backgroundColor;
+    const micIconColor = (_t = voiceRecognitionConfig.iconColor) != null ? _t : textColor;
     micButton.style.width = micIconSize;
     micButton.style.height = micIconSize;
     micButton.style.minWidth = micIconSize;
@@ -9573,15 +10064,15 @@ var buildComposer = (context) => {
       micButton.style.paddingBottom = voiceRecognitionConfig.paddingY;
     }
     micButtonWrapper.appendChild(micButton);
-    const micTooltipText = (_q = voiceRecognitionConfig.tooltipText) != null ? _q : "Start voice recognition";
-    const showMicTooltip = (_r = voiceRecognitionConfig.showTooltip) != null ? _r : false;
+    const micTooltipText = (_u = voiceRecognitionConfig.tooltipText) != null ? _u : "Start voice recognition";
+    const showMicTooltip = (_v = voiceRecognitionConfig.showTooltip) != null ? _v : false;
     if (showMicTooltip && micTooltipText) {
       const tooltip = createElement("div", "persona-send-button-tooltip");
       tooltip.textContent = micTooltipText;
       micButtonWrapper.appendChild(tooltip);
     }
   }
-  const attachmentsConfig = (_s = config == null ? void 0 : config.attachments) != null ? _s : {};
+  const attachmentsConfig = (_w = config == null ? void 0 : config.attachments) != null ? _w : {};
   const attachmentsEnabled = attachmentsConfig.enabled === true;
   let attachmentButton = null;
   let attachmentButtonWrapper = null;
@@ -9595,8 +10086,8 @@ var buildComposer = (context) => {
     attachmentPreviewsContainer.style.display = "none";
     attachmentInput = createElement("input");
     attachmentInput.type = "file";
-    attachmentInput.accept = ((_t = attachmentsConfig.allowedTypes) != null ? _t : ALL_SUPPORTED_MIME_TYPES).join(",");
-    attachmentInput.multiple = ((_u = attachmentsConfig.maxFiles) != null ? _u : 4) > 1;
+    attachmentInput.accept = ((_x = attachmentsConfig.allowedTypes) != null ? _x : ALL_SUPPORTED_MIME_TYPES).join(",");
+    attachmentInput.multiple = ((_y = attachmentsConfig.maxFiles) != null ? _y : 4) > 1;
     attachmentInput.style.display = "none";
     attachmentInput.setAttribute("aria-label", "Attach files");
     attachmentButtonWrapper = createElement("div", "persona-send-button-wrapper");
@@ -9605,8 +10096,8 @@ var buildComposer = (context) => {
       "persona-rounded-button persona-flex persona-items-center persona-justify-center disabled:persona-opacity-50 persona-cursor-pointer persona-attachment-button"
     );
     attachmentButton.type = "button";
-    attachmentButton.setAttribute("aria-label", (_v = attachmentsConfig.buttonTooltipText) != null ? _v : "Attach file");
-    const attachIconName = (_w = attachmentsConfig.buttonIconName) != null ? _w : "paperclip";
+    attachmentButton.setAttribute("aria-label", (_z = attachmentsConfig.buttonTooltipText) != null ? _z : "Attach file");
+    const attachIconName = (_A = attachmentsConfig.buttonIconName) != null ? _A : "paperclip";
     const attachIconSize = buttonSize;
     const buttonSizeNum = parseFloat(attachIconSize) || 40;
     const attachIconSizeNum = Math.round(buttonSizeNum * 0.6);
@@ -9643,7 +10134,7 @@ var buildComposer = (context) => {
       attachmentInput == null ? void 0 : attachmentInput.click();
     });
     attachmentButtonWrapper.appendChild(attachmentButton);
-    const attachTooltipText = (_x = attachmentsConfig.buttonTooltipText) != null ? _x : "Attach file";
+    const attachTooltipText = (_B = attachmentsConfig.buttonTooltipText) != null ? _B : "Attach file";
     const tooltip = createElement("div", "persona-send-button-tooltip");
     tooltip.textContent = attachTooltipText;
     attachmentButtonWrapper.appendChild(tooltip);
@@ -9673,16 +10164,16 @@ var buildComposer = (context) => {
   rightActions.append(sendButtonWrapper);
   actionsRow.append(leftActions, rightActions);
   composerForm.append(actionsRow);
-  const statusConfig = (_y = config == null ? void 0 : config.statusIndicator) != null ? _y : {};
+  const statusConfig = (_C = config == null ? void 0 : config.statusIndicator) != null ? _C : {};
   const alignClass = statusConfig.align === "left" ? "persona-text-left" : statusConfig.align === "center" ? "persona-text-center" : "persona-text-right";
   const statusText = createElement(
     "div",
     `persona-mt-2 ${alignClass} persona-text-xs persona-text-persona-muted`
   );
   statusText.setAttribute("data-persona-composer-status", "");
-  const isVisible = (_z = statusConfig.visible) != null ? _z : true;
+  const isVisible = (_D = statusConfig.visible) != null ? _D : true;
   statusText.style.display = isVisible ? "" : "none";
-  const idleLabel = (_A = statusConfig.idleText) != null ? _A : "Online";
+  const idleLabel = (_E = statusConfig.idleText) != null ? _E : "Online";
   if (statusConfig.idleLink) {
     const link = createElement("a");
     link.href = statusConfig.idleLink;
@@ -9714,7 +10205,8 @@ var buildComposer = (context) => {
     // Actions row layout elements
     actionsRow,
     leftActions,
-    rightActions
+    rightActions,
+    setSendButtonMode
   };
 };
 
@@ -9862,11 +10354,48 @@ var buildPanel = (config, showClose = true) => {
     // Actions row layout elements
     actionsRow: composerElements.actionsRow,
     leftActions: composerElements.leftActions,
-    rightActions: composerElements.rightActions
+    rightActions: composerElements.rightActions,
+    setSendButtonMode: composerElements.setSendButtonMode
   };
 };
 
 // src/components/message-bubble.ts
+var getDefaultStopReasonNoticeCopy = (stopReason) => {
+  switch (stopReason) {
+    case "max_tool_calls":
+      return "Stopped after calling a tool. Send a follow-up to continue.";
+    case "length":
+      return "Response cut off as max tokens reached. Ask for more to continue.";
+    case "content_filter":
+      return "The provider filtered this response.";
+    case "error":
+      return "Something went wrong generating this response.";
+    case "end_turn":
+    case "unknown":
+    default:
+      return null;
+  }
+};
+var resolveStopReasonNoticeText = (stopReason, overrides) => {
+  if (!stopReason) return null;
+  const fallback = getDefaultStopReasonNoticeCopy(stopReason);
+  if (fallback === null) return null;
+  const override = overrides == null ? void 0 : overrides[stopReason];
+  const text = override !== void 0 ? override : fallback;
+  if (!text) return null;
+  return text;
+};
+var createStopReasonNotice = (stopReason, text) => {
+  const notice = createElement(
+    "div",
+    "persona-message-stop-reason persona-text-xs persona-mt-2 persona-italic"
+  );
+  notice.setAttribute("data-stop-reason", stopReason);
+  notice.setAttribute("role", "note");
+  notice.style.opacity = "0.75";
+  notice.textContent = text;
+  return notice;
+};
 var isSafeImageSrc = (src) => {
   const lower = src.toLowerCase();
   if (lower.startsWith("data:image/svg+xml")) return false;
@@ -10169,7 +10698,7 @@ var createMessageActions = (message, actionsConfig, _callbacks) => {
   return container;
 };
 var createStandardBubble = (message, transform, layoutConfig, actionsConfig, actionCallbacks, options) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
   const config = layoutConfig != null ? layoutConfig : {};
   const layout = (_a = config.layout) != null ? _a : "bubble";
   const avatarConfig = config.avatar;
@@ -10194,22 +10723,73 @@ var createStandardBubble = (message, transform, layoutConfig, actionsConfig, act
   const messageContentText = (_g = (_f = message.content) == null ? void 0 : _f.trim()) != null ? _g : "";
   const isImageOnlyFallbackMessage = imageParts.length > 0 && messageContentText === IMAGE_ONLY_MESSAGE_FALLBACK_TEXT;
   const shouldHideTextUntilPreviewFails = isImageOnlyFallbackMessage;
+  const streamAnimation = resolveStreamAnimation(
+    (_i = (_h = options == null ? void 0 : options.widgetConfig) == null ? void 0 : _h.features) == null ? void 0 : _i.streamAnimation
+  );
+  const streamPluginOverrides = (_l = (_k = (_j = options == null ? void 0 : options.widgetConfig) == null ? void 0 : _j.features) == null ? void 0 : _k.streamAnimation) == null ? void 0 : _l.plugins;
+  const streamPlugin = message.role === "assistant" && streamAnimation.type !== "none" ? resolveStreamAnimationPlugin(streamAnimation.type, streamPluginOverrides) : null;
+  const pluginStillAnimating = message.role === "assistant" && ((_m = streamPlugin == null ? void 0 : streamPlugin.isAnimating) == null ? void 0 : _m.call(streamPlugin, message)) === true;
+  const streamAnimationActive = message.role === "assistant" && streamPlugin !== null && (Boolean(message.streaming) || pluginStillAnimating);
+  if (streamAnimationActive && (streamPlugin == null ? void 0 : streamPlugin.bubbleClass)) {
+    bubble.classList.add(streamPlugin.bubbleClass);
+  }
   const contentDiv = document.createElement("div");
   contentDiv.classList.add("persona-message-content");
+  if (streamAnimationActive && streamPlugin) {
+    if (streamPlugin.containerClass) {
+      contentDiv.classList.add(streamPlugin.containerClass);
+    }
+    contentDiv.style.setProperty("--persona-stream-step", `${streamAnimation.speed}ms`);
+    contentDiv.style.setProperty("--persona-stream-duration", `${streamAnimation.duration}ms`);
+  }
+  const bufferedContent = streamAnimationActive ? applyStreamBuffer(
+    (_n = message.content) != null ? _n : "",
+    streamAnimation.buffer,
+    streamPlugin,
+    message,
+    Boolean(message.streaming)
+  ) : (_o = message.content) != null ? _o : "";
   const transformedContent = transform({
-    text: message.content,
+    text: bufferedContent,
     message,
     streaming: Boolean(message.streaming),
     raw: message.rawContent
   });
+  let animatedContent = transformedContent;
+  if (streamAnimationActive && (streamPlugin == null ? void 0 : streamPlugin.wrap) === "char") {
+    animatedContent = wrapStreamAnimation(transformedContent, "char", message.id, {
+      skipTags: streamPlugin.skipTags
+    });
+  } else if (streamAnimationActive && (streamPlugin == null ? void 0 : streamPlugin.wrap) === "word") {
+    animatedContent = wrapStreamAnimation(transformedContent, "word", message.id, {
+      skipTags: streamPlugin.skipTags
+    });
+  }
   let textContentDiv = null;
   if (shouldHideTextUntilPreviewFails) {
     textContentDiv = document.createElement("div");
-    textContentDiv.innerHTML = transformedContent;
+    textContentDiv.innerHTML = animatedContent;
     textContentDiv.style.display = "none";
     contentDiv.appendChild(textContentDiv);
   } else {
-    contentDiv.innerHTML = transformedContent;
+    contentDiv.innerHTML = animatedContent;
+  }
+  if (streamAnimationActive && (streamPlugin == null ? void 0 : streamPlugin.useCaret) && !shouldHideTextUntilPreviewFails && messageContentText) {
+    const caret = createStreamCaret();
+    const spans = contentDiv.querySelectorAll(
+      ".persona-stream-char, .persona-stream-word"
+    );
+    const lastSpan = spans[spans.length - 1];
+    if (lastSpan == null ? void 0 : lastSpan.parentNode) {
+      lastSpan.parentNode.insertBefore(caret, lastSpan.nextSibling);
+    } else {
+      const lastChild = contentDiv.lastElementChild;
+      if (lastChild) {
+        lastChild.appendChild(caret);
+      } else {
+        contentDiv.appendChild(caret);
+      }
+    }
   }
   if (showTimestamp && timestampPosition === "inline" && message.createdAt) {
     const timestamp = createTimestamp(message, timestampConfig);
@@ -10238,18 +10818,37 @@ var createStandardBubble = (message, transform, layoutConfig, actionsConfig, act
     timestamp.classList.add("persona-mt-1");
     bubble.appendChild(timestamp);
   }
+  const stopReasonNoticeText = message.role === "assistant" ? resolveStopReasonNoticeText(
+    message.stopReason,
+    (_q = (_p = options == null ? void 0 : options.widgetConfig) == null ? void 0 : _p.copy) == null ? void 0 : _q.stopReasonNotice
+  ) : null;
   if (message.streaming && message.role === "assistant") {
-    if (!message.content || !message.content.trim()) {
-      const indicator = renderLoadingIndicatorWithFallback(
-        "inline",
-        options == null ? void 0 : options.loadingIndicatorRenderer,
-        options == null ? void 0 : options.widgetConfig
-      );
-      if (indicator) {
-        bubble.appendChild(indicator);
+    const hasVisibleContent = Boolean(bufferedContent && bufferedContent.trim());
+    const skeletonEnabled = streamAnimation.placeholder === "skeleton";
+    const trailSkeleton = skeletonEnabled && streamAnimation.buffer === "line" && hasVisibleContent;
+    if (!hasVisibleContent) {
+      if (skeletonEnabled) {
+        bubble.appendChild(createSkeletonPlaceholder());
+      } else {
+        const indicator = renderLoadingIndicatorWithFallback(
+          "inline",
+          options == null ? void 0 : options.loadingIndicatorRenderer,
+          options == null ? void 0 : options.widgetConfig
+        );
+        if (indicator) {
+          bubble.appendChild(indicator);
+        }
       }
+    } else if (trailSkeleton) {
+      bubble.appendChild(createSkeletonPlaceholder());
     }
   }
+  if (stopReasonNoticeText && message.stopReason && !message.streaming) {
+    if (!messageContentText) {
+      contentDiv.style.display = "none";
+    }
+    bubble.appendChild(createStopReasonNotice(message.stopReason, stopReasonNoticeText));
+  }
   const shouldShowActions = message.role === "assistant" && !message.streaming && message.content && message.content.trim() && (actionsConfig == null ? void 0 : actionsConfig.enabled) !== false;
   if (shouldShowActions && actionsConfig) {
     const actions = createMessageActions(message, actionsConfig, actionCallbacks);
@@ -13920,7 +14519,7 @@ function buildDropOverlay(dropCfg) {
   return overlay;
 }
 var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O;
   if (mount == null) {
     throw new Error(
       'createAgentExperience: mount must be a non-null HTMLElement (e.g. pass document.getElementById("my-root") after the node exists).'
@@ -14132,6 +14731,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     leftActions,
     rightActions
   } = panelElements;
+  let setSendButtonMode = panelElements.setSendButtonMode;
   let micButton = panelElements.micButton;
   let micButtonWrapper = panelElements.micButtonWrapper;
   let attachmentButton = panelElements.attachmentButton;
@@ -14964,12 +15564,24 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const panelBorder = resolvePanelChrome(panelPartial == null ? void 0 : panelPartial.border, defaultPanelBorder);
     const panelShadow = resolvePanelChrome(panelPartial == null ? void 0 : panelPartial.shadow, defaultPanelShadow);
     const panelBorderRadius = resolvePanelChrome(panelPartial == null ? void 0 : panelPartial.borderRadius, defaultPanelBorderRadius);
+    const prevBodyScrollTop = body.scrollTop;
     mount.style.cssText = "";
     wrapper.style.cssText = "";
     panel.style.cssText = "";
     container.style.cssText = "";
     body.style.cssText = "";
     footer.style.cssText = "";
+    const restoreBodyScrollTop = () => {
+      var _a3;
+      if (prevBodyScrollTop <= 0) return;
+      const ownerWindow3 = (_a3 = body.ownerDocument.defaultView) != null ? _a3 : window;
+      ownerWindow3.requestAnimationFrame(() => {
+        if (body.scrollTop === prevBodyScrollTop) return;
+        const maxScrollTop = body.scrollHeight - body.clientHeight;
+        if (maxScrollTop <= 0) return;
+        body.scrollTop = Math.min(prevBodyScrollTop, maxScrollTop);
+      });
+    };
     if (shouldGoFullscreen) {
       wrapper.classList.remove(
         "persona-bottom-6",
@@ -15025,6 +15637,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       body.style.overflowY = "auto";
       footer.style.flexShrink = "0";
       wasMobileFullscreen = true;
+      restoreBodyScrollTop();
       return;
     }
     const launcherWidth = (_r2 = (_q2 = config == null ? void 0 : config.launcher) == null ? void 0 : _q2.width) != null ? _r2 : config == null ? void 0 : config.launcherWidth;
@@ -15167,6 +15780,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       const zIndexStyles = !sidebarMode ? `z-index: ${(_w2 = (_v2 = config.launcher) == null ? void 0 : _v2.zIndex) != null ? _w2 : DEFAULT_OVERLAY_Z_INDEX} !important;` : "";
       wrapper.style.cssText += maxHeightStyles + paddingStyles + zIndexStyles;
     }
+    restoreBodyScrollTop();
   };
   applyFullHeightStyles();
   applyThemeVariables(mount, config);
@@ -15230,6 +15844,17 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       cleanupThemeObserver = null;
     }
   });
+  const streamAnimationConfig = (_D = config.features) == null ? void 0 : _D.streamAnimation;
+  if ((streamAnimationConfig == null ? void 0 : streamAnimationConfig.type) && streamAnimationConfig.type !== "none") {
+    const plugin = resolveStreamAnimationPlugin(
+      streamAnimationConfig.type,
+      streamAnimationConfig.plugins
+    );
+    if (plugin) {
+      ensurePluginActive(plugin, mount);
+      destroyCallbacks.push(() => detachAllPlugins(mount));
+    }
+  }
   const suggestionsManager = createSuggestions(suggestions);
   let closeHandler = null;
   let session;
@@ -15251,7 +15876,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     lastUserMessageWasVoice: false,
     lastUserMessageId: null
   };
-  const voiceAutoResumeMode = (_E = (_D = config.voiceRecognition) == null ? void 0 : _D.autoResume) != null ? _E : false;
+  const voiceAutoResumeMode = (_F = (_E = config.voiceRecognition) == null ? void 0 : _E.autoResume) != null ? _F : false;
   const emitVoiceState = (source) => {
     eventBus.emit("voice:state", {
       active: voiceState.active,
@@ -15939,7 +16564,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     });
   };
   const setComposerDisabled = (disabled) => {
-    sendButton.disabled = disabled;
+    setSendButtonMode(disabled ? "stop" : "send");
     if (micButton) {
       micButton.disabled = disabled;
     }
@@ -15979,7 +16604,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
     const useIcon = (_i2 = (_h2 = config.sendButton) == null ? void 0 : _h2.useIcon) != null ? _i2 : false;
-    if (!useIcon) {
+    if (!useIcon && !(session == null ? void 0 : session.isStreaming())) {
       sendButton.textContent = (_k2 = (_j2 = config.copy) == null ? void 0 : _j2.sendButtonLabel) != null ? _k2 : "Send";
     }
     textarea.style.fontFamily = 'var(--persona-input-font-family, var(--persona-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif))';
@@ -16098,7 +16723,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   });
   sessionRef.current = session;
-  if (((_G = (_F = config.voiceRecognition) == null ? void 0 : _F.provider) == null ? void 0 : _G.type) === "runtype") {
+  if (((_H = (_G = config.voiceRecognition) == null ? void 0 : _G.provider) == null ? void 0 : _H.type) === "runtype") {
     try {
       session.setupVoice();
     } catch (err) {
@@ -16146,6 +16771,10 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   const handleSubmit = (event) => {
     var _a2;
     event.preventDefault();
+    if (session.isStreaming()) {
+      session.cancel();
+      return;
+    }
     const value = textarea.value.trim();
     const hasAttachments = (_a2 = attachmentManager == null ? void 0 : attachmentManager.hasAttachments()) != null ? _a2 : false;
     if (!value && !hasAttachments) return;
@@ -16700,7 +17329,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     }
   };
   recalcPanelHeight();
-  const ownerWindow = (_H = mount.ownerDocument.defaultView) != null ? _H : window;
+  const ownerWindow = (_I = mount.ownerDocument.defaultView) != null ? _I : window;
   ownerWindow.addEventListener("resize", recalcPanelHeight);
   destroyCallbacks.push(() => ownerWindow.removeEventListener("resize", recalcPanelHeight));
   if (typeof ResizeObserver !== "undefined") {
@@ -16711,15 +17340,19 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     destroyCallbacks.push(() => footerResizeObserver.disconnect());
   }
   lastScrollTop = body.scrollTop;
+  let lastScrollHeight = body.scrollHeight;
   const handleScroll = () => {
     const scrollTop = body.scrollTop;
+    const currentScrollHeight = body.scrollHeight;
+    const scrollHeightShrank = currentScrollHeight < lastScrollHeight;
+    lastScrollHeight = currentScrollHeight;
     const { action, nextLastScrollTop } = resolveFollowStateFromScroll({
       following: autoFollow.isFollowing(),
       currentScrollTop: scrollTop,
       lastScrollTop,
       nearBottom: isElementNearBottom(body, BOTTOM_THRESHOLD),
       userScrollThreshold: USER_SCROLL_THRESHOLD,
-      isAutoScrolling: isAutoScrolling || hasPendingAutoScroll,
+      isAutoScrolling: isAutoScrolling || hasPendingAutoScroll || scrollHeightShrank,
       pauseOnUpwardScroll: true,
       pauseWhenAwayFromBottom: false,
       resumeRequiresDownwardScroll: true
@@ -16919,7 +17552,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
   }
   const controller = {
     update(nextConfig) {
-      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab;
+      var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q2, _r2, _s2, _t2, _u2, _v2, _w2, _x2, _y2, _z2, _A2, _B2, _C2, _D2, _E2, _F2, _G2, _H2, _I2, _J2, _K2, _L2, _M2, _N2, _O2, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa, _Ba, _Ca, _Da, _Ea, _Fa, _Ga, _Ha, _Ia, _Ja, _Ka, _La, _Ma, _Na, _Oa, _Pa, _Qa, _Ra, _Sa, _Ta, _Ua, _Va, _Wa, _Xa, _Ya, _Za, __a, _$a, _ab;
       const previousToolCallConfig = config.toolCall;
       const previousMessageActions = config.messageActions;
       const previousLayoutMessages = (_a2 = config.layout) == null ? void 0 : _a2.messages;
@@ -17130,7 +17763,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
       const launcher = (_L2 = config.launcher) != null ? _L2 : {};
       const headerIconHidden = (_M2 = launcher.headerIconHidden) != null ? _M2 : false;
-      const layoutShowIcon = (_O = (_N2 = config.layout) == null ? void 0 : _N2.header) == null ? void 0 : _O.showIcon;
+      const layoutShowIcon = (_O2 = (_N2 = config.layout) == null ? void 0 : _N2.header) == null ? void 0 : _O2.showIcon;
       const shouldHideIcon = headerIconHidden || layoutShowIcon === false;
       const headerIconName = launcher.headerIconName;
       const headerIconSize = (_P = launcher.headerIconSize) != null ? _P : "48px";
@@ -17271,7 +17904,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
         const closeButtonIconName = (_ca = launcher.closeButtonIconName) != null ? _ca : "x";
         const closeButtonIconText = (_da = launcher.closeButtonIconText) != null ? _da : "\xD7";
         closeButton.innerHTML = "";
-        const iconSvg = renderLucideIcon(closeButtonIconName, "20px", "currentColor", 2);
+        const iconSvg = renderLucideIcon(closeButtonIconName, "28px", "currentColor", 1);
         if (iconSvg) {
           closeButton.appendChild(iconSvg);
         } else {
@@ -18201,7 +18834,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
       }
     }
   };
-  const shouldExposeDebugApi = ((_I = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _I : false) || Boolean(config.debug);
+  const shouldExposeDebugApi = ((_J = runtimeOptions == null ? void 0 : runtimeOptions.debugTools) != null ? _J : false) || Boolean(config.debug);
   if (shouldExposeDebugApi && typeof window !== "undefined") {
     const previousDebug = window.AgentWidgetBrowser;
     const debugApi = {
@@ -18304,9 +18937,9 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
     const voiceKey = `${persistConfig.keyPrefix}widget-voice`;
     const voiceModeKey = `${persistConfig.keyPrefix}widget-voice-mode`;
     if (storage) {
-      const wasOpen = ((_J = persistConfig.persist) == null ? void 0 : _J.openState) && storage.getItem(openKey) === "true";
-      const wasVoiceActive = ((_K = persistConfig.persist) == null ? void 0 : _K.voiceState) && storage.getItem(voiceKey) === "true";
-      const wasInVoiceMode = ((_L = persistConfig.persist) == null ? void 0 : _L.voiceState) && storage.getItem(voiceModeKey) === "true";
+      const wasOpen = ((_K = persistConfig.persist) == null ? void 0 : _K.openState) && storage.getItem(openKey) === "true";
+      const wasVoiceActive = ((_L = persistConfig.persist) == null ? void 0 : _L.voiceState) && storage.getItem(voiceKey) === "true";
+      const wasInVoiceMode = ((_M = persistConfig.persist) == null ? void 0 : _M.voiceState) && storage.getItem(voiceModeKey) === "true";
       if (wasOpen) {
         setTimeout(() => {
           controller.open();
@@ -18323,7 +18956,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           }, 100);
         }, 0);
       }
-      if ((_M = persistConfig.persist) == null ? void 0 : _M.openState) {
+      if ((_N = persistConfig.persist) == null ? void 0 : _N.openState) {
         eventBus.on("widget:opened", () => {
           storage.setItem(openKey, "true");
         });
@@ -18331,7 +18964,7 @@ var createAgentExperience = (mount, initialConfig, runtimeOptions) => {
           storage.setItem(openKey, "false");
         });
       }
-      if ((_N = persistConfig.persist) == null ? void 0 : _N.voiceState) {
+      if ((_O = persistConfig.persist) == null ? void 0 : _O.voiceState) {
         eventBus.on("voice:state", (event) => {
           storage.setItem(voiceKey, event.active ? "true" : "false");
         });
@@ -18905,6 +19538,9 @@ function buildSrcdoc(mountId, shellMode, docked, widgetCssPath) {
 var PREVIEW_TRANSCRIPT_PRESET_LABELS = {
   "user-message": "User message",
   "assistant-message": "Assistant message",
+  "assistant-code-block": "Assistant \u2014 code block",
+  "assistant-markdown-table": "Assistant \u2014 markdown table",
+  "assistant-image": "Assistant \u2014 image",
   "reasoning-streaming": "Reasoning (streaming)",
   "reasoning-complete": "Reasoning (complete)",
   "tool-running": "Tool call (running)",
@@ -18931,6 +19567,56 @@ function createPreviewTranscriptEntry(preset, index = 0) {
         content: "Absolutely. I can keep going and explain what happens next.",
         createdAt
       };
+    case "assistant-code-block":
+      return {
+        id: `preview-seq-assistant-code-${suffix}`,
+        role: "assistant",
+        content: [
+          "Here's how you'd wire up a streaming animation:",
+          "",
+          "```ts",
+          "import { createAgentExperience } from '@runtypelabs/persona';",
+          "",
+          "createAgentExperience(el, {",
+          "  features: {",
+          '    streamAnimation: { type: "letter-rise", speed: 120 },',
+          "  },",
+          "});",
+          "```",
+          "",
+          "Swap the `type` value to try the other presets."
+        ].join("\n"),
+        createdAt
+      };
+    case "assistant-markdown-table":
+      return {
+        id: `preview-seq-assistant-table-${suffix}`,
+        role: "assistant",
+        content: [
+          "Here are the built-in streaming animations at a glance:",
+          "",
+          "| Preset       | Wrap unit | Best for                    |",
+          "| ------------ | --------- | --------------------------- |",
+          "| Typewriter   | Character | Classic terminal feel       |",
+          "| Letter rise  | Character | Soft, staggered entrance    |",
+          "| Word fade    | Word      | Longer-form assistant replies |",
+          "| Pop bubble   | Bubble    | Short, punchy affirmations  |"
+        ].join("\n"),
+        createdAt
+      };
+    case "assistant-image":
+      return {
+        id: `preview-seq-assistant-image-${suffix}`,
+        role: "assistant",
+        content: [
+          "Here's the reference diagram you asked for \u2014 let me know if you'd like a different view:",
+          "",
+          "![Stream animation reference](https://placehold.co/320x200/png?text=Stream+Animation)",
+          "",
+          "The gradient shows how per-unit delays stagger across the reply."
+        ].join("\n"),
+        createdAt
+      };
     case "reasoning-streaming":
       return {
         id: `preview-seq-reasoning-stream-${suffix}`,
@@ -18998,6 +19684,38 @@ function createPreviewTranscriptEntry(preset, index = 0) {
 function appendPreviewTranscriptEntry(messages, preset) {
   return [...messages, createPreviewTranscriptEntry(preset, messages.length)];
 }
+function presetStreamsText(preset) {
+  return preset === "assistant-message" || preset === "assistant-code-block" || preset === "assistant-markdown-table" || preset === "assistant-image";
+}
+function buildTranscriptStreamFrames(preset, suffix, options) {
+  var _a, _b;
+  const completed = createPreviewTranscriptEntry(preset, suffix);
+  if (!presetStreamsText(preset) || typeof completed.content !== "string") {
+    return [{ message: completed, delayMs: 0, done: true }];
+  }
+  const chunkSize = Math.max(1, (_a = options == null ? void 0 : options.chunkSize) != null ? _a : 24);
+  const delayMs = Math.max(0, (_b = options == null ? void 0 : options.delayMs) != null ? _b : 42);
+  const fullText = completed.content;
+  const frames = [];
+  frames.push({
+    message: { ...completed, content: "", streaming: true },
+    delayMs: 0,
+    done: false
+  });
+  for (let i = chunkSize; i < fullText.length; i += chunkSize) {
+    frames.push({
+      message: { ...completed, content: fullText.slice(0, i), streaming: true },
+      delayMs,
+      done: false
+    });
+  }
+  frames.push({
+    message: { ...completed, content: fullText, streaming: false },
+    delayMs,
+    done: true
+  });
+  return frames;
+}
 var createAdvancedTranscriptPreviewMessages = () => [
   {
     id: "preview-adv-1",
@@ -19448,6 +20166,7 @@ function createThemePreview(container, initialOptions) {
   buildPreviewConfigWithMessages,
   buildShellCss,
   buildSrcdoc,
+  buildTranscriptStreamFrames,
   convertFromPx,
   convertToPx,
   createPreviewMessages,
@@ -19467,6 +20186,7 @@ function createThemePreview(container, initialOptions) {
   normalizeColorValue,
   paletteColorPath,
   parseCssValue,
+  presetStreamsText,
   resolveRoleAssignment,
   resolveThemeColorPath,
   scopeSection,