@helpai/elements 0.19.1 → 0.19.3

package/index.mjs

@@ -128,7 +128,7 @@ var STRINGS_EN = {
   formChooseAtMost: "Choose at most {max}",
   formOther: "Other",
   formOtherPlaceholder: "Type your answer\u2026",
-  inputRequired: "Input required",
+  inputRequired: "I need a bit more info",
   inputSubmit: "Submit",
   inputSkip: "Skip",
   inputSubmitted: "Answer submitted",
@@ -238,7 +238,7 @@ var STRINGS_FR = {
   formChooseAtMost: "Choisissez au plus {max}",
   formOther: "Autre",
   formOtherPlaceholder: "Saisissez votre r\xE9ponse\u2026",
-  inputRequired: "Saisie requise",
+  inputRequired: "J'ai besoin de quelques pr\xE9cisions",
   inputSubmit: "Envoyer",
   inputSkip: "Ignorer",
   inputSubmitted: "R\xE9ponse envoy\xE9e",
@@ -462,7 +462,7 @@ var DEFAULT_ATTACHMENTS = {
   maxCount: 10,
   accept: "*/*"
 };
-var DEFAULT_WELCOME = { animation: "typewriter", speed: 60 };
+var DEFAULT_WELCOME = { animation: "instant", speed: 60 };
 var DEFAULT_FEATURES = {
   files: true,
   voice: "local",
@@ -1985,9 +1985,10 @@ function partFromReactive(p33) {
 import { signal as signal2 } from "@preact/signals";
 
 // src/stream/constants.ts
-var ASK_USER_INPUT_TOOL = "tool:ask-user-input";
 function isAskUserInputTool(toolName) {
-  return toolName === ASK_USER_INPUT_TOOL;
+  if (!toolName) return false;
+  const name = toolName.startsWith("tool:") ? toolName.slice(5) : toolName;
+  return name === "ask-user-input" || name === "ask_user_input" || name === "request-user-input" || name === "request_user_input";
 }
 var TRIGGER = {
   submitMessage: "submit-message",
@@ -4363,6 +4364,9 @@ function hardenLink(a) {
 import { useComputed as useComputed2, useSignal } from "@preact/signals";
 import { Fragment, jsx as jsx13, jsxs as jsxs10 } from "preact/jsx-runtime";
 var p12 = BRAND.cssPrefix;
+function displayToolName(toolName) {
+  return (toolName.startsWith("tool:") ? toolName.slice(5) : toolName).replace(/[-_]+/g, " ");
+}
 function ToolApproval({ part, strings, active, onDecision }) {
   const approval = useComputed2(() => part.approvalSig.value);
   const input = useComputed2(() => part.inputSig.value);
@@ -4372,7 +4376,7 @@ function ToolApproval({ part, strings, active, onDecision }) {
     const ap = approval.value;
     return /* @__PURE__ */ jsxs10("div", { class: `${p12}-tool-approval ${p12}-tool-decided`, "data-testid": TID.toolDecision, children: [
       /* @__PURE__ */ jsx13("span", { class: `${p12}-tool-decided-label`, "data-approved": ap?.approved ? "true" : "false", children: ap?.approved ? strings.approved : strings.rejected }),
-      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: part.toolName }),
+      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: displayToolName(part.toolName) }),
       ap?.reason ? /* @__PURE__ */ jsx13("span", { class: `${p12}-tool-decided-value`, children: ap.reason }) : null
     ] });
   }
@@ -4380,7 +4384,7 @@ function ToolApproval({ part, strings, active, onDecision }) {
   return /* @__PURE__ */ jsxs10("div", { class: `${p12}-tool-approval`, "data-testid": TID.toolApproval, children: [
     /* @__PURE__ */ jsxs10("div", { class: `${p12}-tool-head`, children: [
       /* @__PURE__ */ jsx13("span", { class: `${p12}-tool-badge`, children: strings.approvalRequired }),
-      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: part.toolName })
+      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: displayToolName(part.toolName) })
     ] }),
     args ? /* @__PURE__ */ jsx13("pre", { class: `${p12}-tool-args`, children: args }) : null,
     active ? /* @__PURE__ */ jsxs10(Fragment, { children: [
@@ -4490,10 +4494,17 @@ function num(v) {
 // src/ui/tool-ask-input.tsx
 import { jsx as jsx14, jsxs as jsxs11 } from "preact/jsx-runtime";
 var p13 = BRAND.cssPrefix;
-function ToolAskInput({ part, strings, active, onSubmit }) {
+function ToolAskInput({ part, strings, active, onSubmit, onDecision }) {
   const state = useComputed3(() => part.stateSig.value);
+  const approval = useComputed3(() => part.approvalSig.value);
   const request = useComputed3(() => parseAskUserInput(part.inputSig.value));
-  const decided = state.value === "output" || state.value === "error";
+  const decided = state.value === "output" || state.value === "error" || approval.value?.approved !== void 0;
+  const viaApproval = approval.value !== void 0;
+  const resolve = (answer, accepted) => {
+    if (viaApproval) onDecision(part.toolCallId, accepted, answer);
+    else if (request.value.responseType === "confirmation") onSubmit(part.toolCallId, { confirmed: accepted });
+    else onSubmit(part.toolCallId, accepted ? { answer } : {});
+  };
   if (decided) {
     return /* @__PURE__ */ jsx14(DecidedSummary, { part, strings });
   }
@@ -4515,7 +4526,7 @@ function ToolAskInput({ part, strings, active, onSubmit }) {
         {
           type: "button",
           class: `${p13}-form-skip`,
-          onClick: () => onSubmit(part.toolCallId, { confirmed: false }),
+          onClick: () => resolve(void 0, false),
           "data-testid": TID.toolInputSkip,
           children: strings.reject
         }
@@ -4525,7 +4536,7 @@ function ToolAskInput({ part, strings, active, onSubmit }) {
         {
           type: "button",
           class: `${p13}-form-submit`,
-          onClick: () => onSubmit(part.toolCallId, { confirmed: true }),
+          onClick: () => resolve(void 0, true),
           "data-testid": TID.toolInputSubmit,
           children: strings.approve
         }
@@ -4536,9 +4547,9 @@ function ToolAskInput({ part, strings, active, onSubmit }) {
         fields: askInputToFields(req),
         strings,
         submitLabel: strings.inputSubmit,
-        onSubmit: (values) => onSubmit(part.toolCallId, values),
+        onSubmit: (values) => resolve(values.answer ?? Object.values(values).join(", "), true),
         skipLabel: req.required === false ? strings.inputSkip : void 0,
-        onSkip: req.required === false ? () => onSubmit(part.toolCallId, {}) : void 0,
+        onSkip: req.required === false ? () => resolve(void 0, false) : void 0,
         submitTestId: TID.toolInputSubmit,
         skipTestId: TID.toolInputSkip
       }
@@ -4553,10 +4564,12 @@ function Header({ strings, title }) {
 }
 function DecidedSummary({ part, strings }) {
   const output = useComputed3(() => part.outputSig.value);
-  const text = summarizeOutput(output.value) || strings.inputSubmitted;
+  const approval = useComputed3(() => part.approvalSig.value);
+  const answer = approval.value?.approved !== void 0 ? approval.value.reason ?? "" : summarizeOutput(output.value);
+  const skipped = approval.value?.approved === false;
   return /* @__PURE__ */ jsxs11("div", { class: `${p13}-tool-ask-input ${p13}-tool-decided`, "data-testid": TID.toolDecision, children: [
-    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-label`, children: strings.inputSubmitted }),
-    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-value`, children: text })
+    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-label`, children: skipped ? strings.inputSkip : strings.inputSubmitted }),
+    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-value`, children: skipped ? "" : answer || strings.inputSubmitted })
   ] });
 }
 function summarizeOutput(output) {
@@ -4686,12 +4699,21 @@ function ToolPartView({
   const state = useComputed4(() => part.stateSig.value);
   const hasApproval = useComputed4(() => part.approvalSig.value !== void 0);
   if (tool?.humanInLoop) {
+    if (isAskUserInputTool(part.toolName) || state.value === "awaiting-input") {
+      return /* @__PURE__ */ jsx16(
+        ToolAskInput,
+        {
+          part,
+          strings,
+          active: interactive,
+          onSubmit: tool.onResult,
+          onDecision: tool.onDecision
+        }
+      );
+    }
     if (hasApproval.value || state.value === "awaiting-approval") {
       return /* @__PURE__ */ jsx16(ToolApproval, { part, strings, active: interactive, onDecision: tool.onDecision });
     }
-    if (isAskUserInputTool(part.toolName) || state.value === "awaiting-input") {
-      return /* @__PURE__ */ jsx16(ToolAskInput, { part, strings, active: interactive, onSubmit: tool.onResult });
-    }
   }
   return showToolCalls ? /* @__PURE__ */ jsx16(ToolChip, { part, strings }) : null;
 }
@@ -4754,19 +4776,23 @@ function MessageList({
   const [showJump, setShowJump] = useState6(false);
   const [scrolling, setScrolling] = useState6(false);
   const hasHydratedRef = useRef5(false);
+  const detachedRef = useRef5(false);
+  const autoPinAtRef = useRef5(0);
+  const pinBottom = (el) => {
+    autoPinAtRef.current = performance.now();
+    el.scrollTop = el.scrollHeight;
+  };
   const firstMessageId = messages.value[0]?.id;
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     if (messages.value.length === 0) return;
     hasHydratedRef.current = true;
-    const pinBottom = () => {
-      el.scrollTop = el.scrollHeight;
-    };
-    pinBottom();
-    const resizeObs = new ResizeObserver(pinBottom);
+    const pinNow = () => pinBottom(el);
+    pinNow();
+    const resizeObs = new ResizeObserver(pinNow);
     resizeObs.observe(el);
-    const mutationObs = new MutationObserver(pinBottom);
+    const mutationObs = new MutationObserver(pinNow);
     mutationObs.observe(el, { childList: true, subtree: true, characterData: true });
     const timerId = setTimeout(() => {
       resizeObs.disconnect();
@@ -4782,8 +4808,14 @@ function MessageList({
     const el = ref.current;
     if (!el) return;
     if (!hasHydratedRef.current) return;
+    if (messages.value.at(-1)?.role === "user") {
+      detachedRef.current = false;
+      pinBottom(el);
+      return;
+    }
+    if (detachedRef.current) return;
     const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-    if (distanceFromBottom < STICK_THRESHOLD) el.scrollTop = el.scrollHeight;
+    if (distanceFromBottom < STICK_THRESHOLD) pinBottom(el);
   }, [messages.value.length]);
   useEffect8(() => {
     const el = ref.current;
@@ -4791,8 +4823,9 @@ function MessageList({
     const last = messages.value.at(-1);
     if (!last) return;
     const pinIfNear = () => {
+      if (detachedRef.current) return;
       const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
-      if (distance < STICK_THRESHOLD * 2) el.scrollTop = el.scrollHeight;
+      if (distance < STICK_THRESHOLD * 2) pinBottom(el);
     };
     if (last.status !== "streaming") {
       const rafId = requestAnimationFrame(pinIfNear);
@@ -4806,8 +4839,8 @@ function MessageList({
   const activeFormId = form?.form.id;
   useLayoutEffect(() => {
     const el = ref.current;
-    if (!el || !activeFormId) return;
-    el.scrollTop = el.scrollHeight;
+    if (!el || !activeFormId || detachedRef.current) return;
+    pinBottom(el);
   }, [activeFormId]);
   useEffect8(() => {
     const el = ref.current;
@@ -4816,6 +4849,9 @@ function MessageList({
     let idleTimer;
     const onScroll = () => {
       syncJump();
+      if (performance.now() - autoPinAtRef.current > 150) {
+        detachedRef.current = el.scrollHeight - el.scrollTop - el.clientHeight > 8;
+      }
       setScrolling(true);
       clearTimeout(idleTimer);
       idleTimer = setTimeout(() => setScrolling(false), DIVIDER_IDLE_MS);
@@ -4829,7 +4865,9 @@ function MessageList({
   }, []);
   const jumpToBottom = () => {
     const el = ref.current;
-    if (el) el.scrollTop = el.scrollHeight;
+    if (!el) return;
+    detachedRef.current = false;
+    pinBottom(el);
   };
   const rows = [];
   let prevDay = "";

package/package.json

@@ -80,5 +80,5 @@
   ],
   "type": "module",
   "types": "./index.d.ts",
-  "version": "0.19.1"
+  "version": "0.19.3"
 }

package/schema.json

@@ -911,7 +911,7 @@
           "type": "object",
           "properties": {
             "animation": {
-              "default": "typewriter",
+              "default": "instant",
               "description": "How welcome messages render — `typewriter` types each message in character-by-character; `instant` shows them whole.",
               "type": "string",
               "enum": [
@@ -932,14 +932,14 @@
             "speed"
           ],
           "additionalProperties": {},
-          "description": "How welcome messages render — typewriter effect with adjustable cps speed.",
+          "description": "How welcome messages render — instant by default; opt into a typewriter effect with adjustable cps speed.",
           "examples": [
             {
-              "animation": "typewriter",
-              "speed": 60
+              "animation": "instant"
             },
             {
-              "animation": "instant"
+              "animation": "typewriter",
+              "speed": 60
             }
           ]
         },
@@ -2665,7 +2665,7 @@
               "type": "object",
               "properties": {
                 "animation": {
-                  "default": "typewriter",
+                  "default": "instant",
                   "description": "How welcome messages render — `typewriter` types each message in character-by-character; `instant` shows them whole.",
                   "type": "string",
                   "enum": [
@@ -2686,14 +2686,14 @@
                 "speed"
               ],
               "additionalProperties": {},
-              "description": "How welcome messages render — typewriter effect with adjustable cps speed.",
+              "description": "How welcome messages render — instant by default; opt into a typewriter effect with adjustable cps speed.",
               "examples": [
                 {
-                  "animation": "typewriter",
-                  "speed": 60
+                  "animation": "instant"
                 },
                 {
-                  "animation": "instant"
+                  "animation": "typewriter",
+                  "speed": 60
                 }
               ]
             },

package/schema.mjs

@@ -345,12 +345,12 @@ var composerOptionsSchema = z10.object({
 import { z as z11 } from "zod";
 var welcomeAnimationSchema = z11.enum(["typewriter", "instant"]);
 var welcomeOptionsSchema = z11.object({
-  animation: welcomeAnimationSchema.default("typewriter").describe(
+  animation: welcomeAnimationSchema.default("instant").describe(
     "How welcome messages render \u2014 `typewriter` types each message in character-by-character; `instant` shows them whole."
   ),
   speed: z11.number().int().min(1).max(2e3).default(60).describe("Typewriter speed in characters per second. Only meaningful when `animation = typewriter`.")
-}).loose().describe("How welcome messages render \u2014 typewriter effect with adjustable cps speed.").meta({
-  examples: [{ animation: "typewriter", speed: 60 }, { animation: "instant" }]
+}).loose().describe("How welcome messages render \u2014 instant by default; opt into a typewriter effect with adjustable cps speed.").meta({
+  examples: [{ animation: "instant" }, { animation: "typewriter", speed: 60 }]
 });
 
 // src/schema/widget/footer.ts

package/web-component.mjs

@@ -128,7 +128,7 @@ var STRINGS_EN = {
   formChooseAtMost: "Choose at most {max}",
   formOther: "Other",
   formOtherPlaceholder: "Type your answer\u2026",
-  inputRequired: "Input required",
+  inputRequired: "I need a bit more info",
   inputSubmit: "Submit",
   inputSkip: "Skip",
   inputSubmitted: "Answer submitted",
@@ -238,7 +238,7 @@ var STRINGS_FR = {
   formChooseAtMost: "Choisissez au plus {max}",
   formOther: "Autre",
   formOtherPlaceholder: "Saisissez votre r\xE9ponse\u2026",
-  inputRequired: "Saisie requise",
+  inputRequired: "J'ai besoin de quelques pr\xE9cisions",
   inputSubmit: "Envoyer",
   inputSkip: "Ignorer",
   inputSubmitted: "R\xE9ponse envoy\xE9e",
@@ -447,7 +447,7 @@ var DEFAULT_ATTACHMENTS = {
   maxCount: 10,
   accept: "*/*"
 };
-var DEFAULT_WELCOME = { animation: "typewriter", speed: 60 };
+var DEFAULT_WELCOME = { animation: "instant", speed: 60 };
 var DEFAULT_FEATURES = {
   files: true,
   voice: "local",
@@ -2040,9 +2040,10 @@ function partFromReactive(p33) {
 import { signal as signal2 } from "@preact/signals";
 
 // src/stream/constants.ts
-var ASK_USER_INPUT_TOOL = "tool:ask-user-input";
 function isAskUserInputTool(toolName) {
-  return toolName === ASK_USER_INPUT_TOOL;
+  if (!toolName) return false;
+  const name = toolName.startsWith("tool:") ? toolName.slice(5) : toolName;
+  return name === "ask-user-input" || name === "ask_user_input" || name === "request-user-input" || name === "request_user_input";
 }
 var TRIGGER = {
   submitMessage: "submit-message",
@@ -4418,6 +4419,9 @@ function hardenLink(a) {
 import { useComputed as useComputed2, useSignal } from "@preact/signals";
 import { Fragment, jsx as jsx13, jsxs as jsxs10 } from "preact/jsx-runtime";
 var p12 = BRAND.cssPrefix;
+function displayToolName(toolName) {
+  return (toolName.startsWith("tool:") ? toolName.slice(5) : toolName).replace(/[-_]+/g, " ");
+}
 function ToolApproval({ part, strings, active, onDecision }) {
   const approval = useComputed2(() => part.approvalSig.value);
   const input = useComputed2(() => part.inputSig.value);
@@ -4427,7 +4431,7 @@ function ToolApproval({ part, strings, active, onDecision }) {
     const ap = approval.value;
     return /* @__PURE__ */ jsxs10("div", { class: `${p12}-tool-approval ${p12}-tool-decided`, "data-testid": TID.toolDecision, children: [
       /* @__PURE__ */ jsx13("span", { class: `${p12}-tool-decided-label`, "data-approved": ap?.approved ? "true" : "false", children: ap?.approved ? strings.approved : strings.rejected }),
-      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: part.toolName }),
+      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: displayToolName(part.toolName) }),
       ap?.reason ? /* @__PURE__ */ jsx13("span", { class: `${p12}-tool-decided-value`, children: ap.reason }) : null
     ] });
   }
@@ -4435,7 +4439,7 @@ function ToolApproval({ part, strings, active, onDecision }) {
   return /* @__PURE__ */ jsxs10("div", { class: `${p12}-tool-approval`, "data-testid": TID.toolApproval, children: [
     /* @__PURE__ */ jsxs10("div", { class: `${p12}-tool-head`, children: [
       /* @__PURE__ */ jsx13("span", { class: `${p12}-tool-badge`, children: strings.approvalRequired }),
-      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: part.toolName })
+      /* @__PURE__ */ jsx13("strong", { class: `${p12}-tool-title`, children: displayToolName(part.toolName) })
     ] }),
     args ? /* @__PURE__ */ jsx13("pre", { class: `${p12}-tool-args`, children: args }) : null,
     active ? /* @__PURE__ */ jsxs10(Fragment, { children: [
@@ -4545,10 +4549,17 @@ function num(v) {
 // src/ui/tool-ask-input.tsx
 import { jsx as jsx14, jsxs as jsxs11 } from "preact/jsx-runtime";
 var p13 = BRAND.cssPrefix;
-function ToolAskInput({ part, strings, active, onSubmit }) {
+function ToolAskInput({ part, strings, active, onSubmit, onDecision }) {
   const state = useComputed3(() => part.stateSig.value);
+  const approval = useComputed3(() => part.approvalSig.value);
   const request = useComputed3(() => parseAskUserInput(part.inputSig.value));
-  const decided = state.value === "output" || state.value === "error";
+  const decided = state.value === "output" || state.value === "error" || approval.value?.approved !== void 0;
+  const viaApproval = approval.value !== void 0;
+  const resolve = (answer, accepted) => {
+    if (viaApproval) onDecision(part.toolCallId, accepted, answer);
+    else if (request.value.responseType === "confirmation") onSubmit(part.toolCallId, { confirmed: accepted });
+    else onSubmit(part.toolCallId, accepted ? { answer } : {});
+  };
   if (decided) {
     return /* @__PURE__ */ jsx14(DecidedSummary, { part, strings });
   }
@@ -4570,7 +4581,7 @@ function ToolAskInput({ part, strings, active, onSubmit }) {
         {
           type: "button",
           class: `${p13}-form-skip`,
-          onClick: () => onSubmit(part.toolCallId, { confirmed: false }),
+          onClick: () => resolve(void 0, false),
           "data-testid": TID.toolInputSkip,
           children: strings.reject
         }
@@ -4580,7 +4591,7 @@ function ToolAskInput({ part, strings, active, onSubmit }) {
         {
           type: "button",
           class: `${p13}-form-submit`,
-          onClick: () => onSubmit(part.toolCallId, { confirmed: true }),
+          onClick: () => resolve(void 0, true),
           "data-testid": TID.toolInputSubmit,
           children: strings.approve
         }
@@ -4591,9 +4602,9 @@ function ToolAskInput({ part, strings, active, onSubmit }) {
         fields: askInputToFields(req),
         strings,
         submitLabel: strings.inputSubmit,
-        onSubmit: (values) => onSubmit(part.toolCallId, values),
+        onSubmit: (values) => resolve(values.answer ?? Object.values(values).join(", "), true),
         skipLabel: req.required === false ? strings.inputSkip : void 0,
-        onSkip: req.required === false ? () => onSubmit(part.toolCallId, {}) : void 0,
+        onSkip: req.required === false ? () => resolve(void 0, false) : void 0,
         submitTestId: TID.toolInputSubmit,
         skipTestId: TID.toolInputSkip
       }
@@ -4608,10 +4619,12 @@ function Header({ strings, title }) {
 }
 function DecidedSummary({ part, strings }) {
   const output = useComputed3(() => part.outputSig.value);
-  const text = summarizeOutput(output.value) || strings.inputSubmitted;
+  const approval = useComputed3(() => part.approvalSig.value);
+  const answer = approval.value?.approved !== void 0 ? approval.value.reason ?? "" : summarizeOutput(output.value);
+  const skipped = approval.value?.approved === false;
   return /* @__PURE__ */ jsxs11("div", { class: `${p13}-tool-ask-input ${p13}-tool-decided`, "data-testid": TID.toolDecision, children: [
-    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-label`, children: strings.inputSubmitted }),
-    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-value`, children: text })
+    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-label`, children: skipped ? strings.inputSkip : strings.inputSubmitted }),
+    /* @__PURE__ */ jsx14("span", { class: `${p13}-tool-decided-value`, children: skipped ? "" : answer || strings.inputSubmitted })
   ] });
 }
 function summarizeOutput(output) {
@@ -4741,12 +4754,21 @@ function ToolPartView({
   const state = useComputed4(() => part.stateSig.value);
   const hasApproval = useComputed4(() => part.approvalSig.value !== void 0);
   if (tool?.humanInLoop) {
+    if (isAskUserInputTool(part.toolName) || state.value === "awaiting-input") {
+      return /* @__PURE__ */ jsx16(
+        ToolAskInput,
+        {
+          part,
+          strings,
+          active: interactive,
+          onSubmit: tool.onResult,
+          onDecision: tool.onDecision
+        }
+      );
+    }
     if (hasApproval.value || state.value === "awaiting-approval") {
       return /* @__PURE__ */ jsx16(ToolApproval, { part, strings, active: interactive, onDecision: tool.onDecision });
     }
-    if (isAskUserInputTool(part.toolName) || state.value === "awaiting-input") {
-      return /* @__PURE__ */ jsx16(ToolAskInput, { part, strings, active: interactive, onSubmit: tool.onResult });
-    }
   }
   return showToolCalls ? /* @__PURE__ */ jsx16(ToolChip, { part, strings }) : null;
 }
@@ -4809,19 +4831,23 @@ function MessageList({
   const [showJump, setShowJump] = useState6(false);
   const [scrolling, setScrolling] = useState6(false);
   const hasHydratedRef = useRef5(false);
+  const detachedRef = useRef5(false);
+  const autoPinAtRef = useRef5(0);
+  const pinBottom = (el) => {
+    autoPinAtRef.current = performance.now();
+    el.scrollTop = el.scrollHeight;
+  };
   const firstMessageId = messages.value[0]?.id;
   useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
     if (messages.value.length === 0) return;
     hasHydratedRef.current = true;
-    const pinBottom = () => {
-      el.scrollTop = el.scrollHeight;
-    };
-    pinBottom();
-    const resizeObs = new ResizeObserver(pinBottom);
+    const pinNow = () => pinBottom(el);
+    pinNow();
+    const resizeObs = new ResizeObserver(pinNow);
     resizeObs.observe(el);
-    const mutationObs = new MutationObserver(pinBottom);
+    const mutationObs = new MutationObserver(pinNow);
     mutationObs.observe(el, { childList: true, subtree: true, characterData: true });
     const timerId = setTimeout(() => {
       resizeObs.disconnect();
@@ -4837,8 +4863,14 @@ function MessageList({
     const el = ref.current;
     if (!el) return;
     if (!hasHydratedRef.current) return;
+    if (messages.value.at(-1)?.role === "user") {
+      detachedRef.current = false;
+      pinBottom(el);
+      return;
+    }
+    if (detachedRef.current) return;
     const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-    if (distanceFromBottom < STICK_THRESHOLD) el.scrollTop = el.scrollHeight;
+    if (distanceFromBottom < STICK_THRESHOLD) pinBottom(el);
   }, [messages.value.length]);
   useEffect8(() => {
     const el = ref.current;
@@ -4846,8 +4878,9 @@ function MessageList({
     const last = messages.value.at(-1);
     if (!last) return;
     const pinIfNear = () => {
+      if (detachedRef.current) return;
       const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
-      if (distance < STICK_THRESHOLD * 2) el.scrollTop = el.scrollHeight;
+      if (distance < STICK_THRESHOLD * 2) pinBottom(el);
     };
     if (last.status !== "streaming") {
       const rafId = requestAnimationFrame(pinIfNear);
@@ -4861,8 +4894,8 @@ function MessageList({
   const activeFormId = form?.form.id;
   useLayoutEffect(() => {
     const el = ref.current;
-    if (!el || !activeFormId) return;
-    el.scrollTop = el.scrollHeight;
+    if (!el || !activeFormId || detachedRef.current) return;
+    pinBottom(el);
   }, [activeFormId]);
   useEffect8(() => {
     const el = ref.current;
@@ -4871,6 +4904,9 @@ function MessageList({
     let idleTimer;
     const onScroll = () => {
       syncJump();
+      if (performance.now() - autoPinAtRef.current > 150) {
+        detachedRef.current = el.scrollHeight - el.scrollTop - el.clientHeight > 8;
+      }
       setScrolling(true);
       clearTimeout(idleTimer);
       idleTimer = setTimeout(() => setScrolling(false), DIVIDER_IDLE_MS);
@@ -4884,7 +4920,9 @@ function MessageList({
   }, []);
   const jumpToBottom = () => {
     const el = ref.current;
-    if (el) el.scrollTop = el.scrollHeight;
+    if (!el) return;
+    detachedRef.current = false;
+    pinBottom(el);
   };
   const rows = [];
   let prevDay = "";