@helpai/elements 0.51.6 → 0.51.8

package/index.mjs

@@ -29,7 +29,7 @@ var BRAND = {
 };
 
 // src/core/version.ts
-var ELEMENTS_VERSION = true ? "0.51.6" : "0.0.0-dev";
+var ELEMENTS_VERSION = true ? "0.51.8" : "0.0.0-dev";
 var ELEMENTS_VERSION_PARAM = "_ev";
 
 // src/i18n/strings.ts
@@ -5956,13 +5956,16 @@ function MessageList({
     autoPinAtRef.current = performance.now();
     el.scrollTop = el.scrollHeight;
   };
-  const firstMessageId = messages.value[0]?.id;
-  useLayoutEffect2(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (messages.value.length === 0) return;
-    hasHydratedRef.current = true;
-    if (!messages.value.some((m) => m.role === "user")) return;
+  const pinBottomSoon = (el, frames) => {
+    pinBottom(el);
+    let left = frames;
+    const tick = () => {
+      pinBottom(el);
+      if (--left > 0) requestAnimationFrame(tick);
+    };
+    if (frames > 0) requestAnimationFrame(tick);
+  };
+  const pinBottomThroughLayout = (el, ms) => {
     const pinNow = () => pinBottom(el);
     pinNow();
     const resizeObs = new ResizeObserver(pinNow);
@@ -5972,12 +5975,21 @@ function MessageList({
     const timerId = setTimeout(() => {
       resizeObs.disconnect();
       mutationObs.disconnect();
-    }, 300);
+    }, ms);
     return () => {
       resizeObs.disconnect();
       mutationObs.disconnect();
       clearTimeout(timerId);
     };
+  };
+  const firstMessageId = messages.value[0]?.id;
+  useLayoutEffect2(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (messages.value.length === 0) return;
+    hasHydratedRef.current = true;
+    if (!messages.value.some((m) => m.role === "user")) return;
+    return pinBottomThroughLayout(el, 300);
   }, [firstMessageId]);
   const prevLengthRef = useRef5(0);
   useEffect7(() => {
@@ -5989,7 +6001,7 @@ function MessageList({
     if (!hasHydratedRef.current) return;
     if (list.slice(prevLength).some((m) => m.role === "user")) {
       detachedRef.current = false;
-      pinBottom(el);
+      pinBottomSoon(el, 3);
       return;
     }
     if (!list.some((m) => m.role === "user")) return;
@@ -6018,12 +6030,17 @@ function MessageList({
     return () => obs.disconnect();
   }, [messages.value]);
   const activeFormId = form?.form.id;
+  const inlineForm = !!form && (formMarkers ?? []).some((m) => m.formId === form.form.id);
   useLayoutEffect2(() => {
     const el = ref.current;
     if (!el || !activeFormId || detachedRef.current) return;
     if (!messages.value.some((m) => m.role === "user")) return;
-    pinBottom(el);
-  }, [activeFormId]);
+    if (inlineForm) {
+      el.querySelector(`[data-testid="${TID.formGate}"]`)?.scrollIntoView({ block: "nearest" });
+    } else {
+      pinBottom(el);
+    }
+  }, [activeFormId, inlineForm]);
   useEffect7(() => {
     const el = ref.current;
     if (!el) return;
@@ -6096,15 +6113,29 @@ function MessageList({
   const pendingMarkers = [...formMarkers ?? []].toSorted(
     (a, b) => (a.createdAt ?? Infinity) - (b.createdAt ?? Infinity)
   );
-  const markerRow = (marker) => /* @__PURE__ */ jsx19(
-    FormDoneMarker,
-    {
-      marker,
-      strings,
-      onFill: !form && onFillForm ? () => onFillForm(marker.formId) : void 0
-    },
-    marker.key
-  );
+  const markerRow = (marker) => {
+    if (form && marker.formId === form.form.id) {
+      return /* @__PURE__ */ jsx19(
+        FormGate,
+        {
+          form: form.form,
+          strings,
+          onSubmit: form.onSubmit,
+          onSkip: form.onSkip
+        },
+        `gate:${marker.formId}`
+      );
+    }
+    return /* @__PURE__ */ jsx19(
+      FormDoneMarker,
+      {
+        marker,
+        strings,
+        onFill: !form && onFillForm ? () => onFillForm(marker.formId) : void 0
+      },
+      marker.key
+    );
+  };
   const flushMarkersBefore = (createdAt) => {
     for (let next = pendingMarkers[0]; next?.createdAt !== void 0; next = pendingMarkers[0]) {
       if (createdAt !== void 0 && next.createdAt > createdAt) break;
@@ -6157,7 +6188,7 @@ function MessageList({
         children: [
           loading && messages.value.length === 0 ? /* @__PURE__ */ jsx19("div", { class: `${p18}-list-loading`, role: "status", children: strings.conversationLoading }) : null,
           rows,
-          form ? /* @__PURE__ */ jsx19(FormGate, { form: form.form, strings, onSubmit: form.onSubmit, onSkip: form.onSkip }) : null
+          form && !inlineForm ? /* @__PURE__ */ jsx19(FormGate, { form: form.form, strings, onSubmit: form.onSubmit, onSkip: form.onSkip }) : null
         ]
       }
     ),

package/package.json

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

package/web-component.mjs

@@ -1794,7 +1794,7 @@ function createAuth(opts) {
 }
 
 // src/core/version.ts
-var ELEMENTS_VERSION = true ? "0.51.6" : "0.0.0-dev";
+var ELEMENTS_VERSION = true ? "0.51.8" : "0.0.0-dev";
 var ELEMENTS_VERSION_PARAM = "_ev";
 
 // src/stream/types.ts
@@ -5915,13 +5915,16 @@ function MessageList({
     autoPinAtRef.current = performance.now();
     el.scrollTop = el.scrollHeight;
   };
-  const firstMessageId = messages.value[0]?.id;
-  useLayoutEffect2(() => {
-    const el = ref.current;
-    if (!el) return;
-    if (messages.value.length === 0) return;
-    hasHydratedRef.current = true;
-    if (!messages.value.some((m) => m.role === "user")) return;
+  const pinBottomSoon = (el, frames) => {
+    pinBottom(el);
+    let left = frames;
+    const tick = () => {
+      pinBottom(el);
+      if (--left > 0) requestAnimationFrame(tick);
+    };
+    if (frames > 0) requestAnimationFrame(tick);
+  };
+  const pinBottomThroughLayout = (el, ms) => {
     const pinNow = () => pinBottom(el);
     pinNow();
     const resizeObs = new ResizeObserver(pinNow);
@@ -5931,12 +5934,21 @@ function MessageList({
     const timerId = setTimeout(() => {
       resizeObs.disconnect();
       mutationObs.disconnect();
-    }, 300);
+    }, ms);
     return () => {
       resizeObs.disconnect();
       mutationObs.disconnect();
       clearTimeout(timerId);
     };
+  };
+  const firstMessageId = messages.value[0]?.id;
+  useLayoutEffect2(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (messages.value.length === 0) return;
+    hasHydratedRef.current = true;
+    if (!messages.value.some((m) => m.role === "user")) return;
+    return pinBottomThroughLayout(el, 300);
   }, [firstMessageId]);
   const prevLengthRef = useRef5(0);
   useEffect7(() => {
@@ -5948,7 +5960,7 @@ function MessageList({
     if (!hasHydratedRef.current) return;
     if (list.slice(prevLength).some((m) => m.role === "user")) {
       detachedRef.current = false;
-      pinBottom(el);
+      pinBottomSoon(el, 3);
       return;
     }
     if (!list.some((m) => m.role === "user")) return;
@@ -5977,12 +5989,17 @@ function MessageList({
     return () => obs.disconnect();
   }, [messages.value]);
   const activeFormId = form?.form.id;
+  const inlineForm = !!form && (formMarkers ?? []).some((m) => m.formId === form.form.id);
   useLayoutEffect2(() => {
     const el = ref.current;
     if (!el || !activeFormId || detachedRef.current) return;
     if (!messages.value.some((m) => m.role === "user")) return;
-    pinBottom(el);
-  }, [activeFormId]);
+    if (inlineForm) {
+      el.querySelector(`[data-testid="${TID.formGate}"]`)?.scrollIntoView({ block: "nearest" });
+    } else {
+      pinBottom(el);
+    }
+  }, [activeFormId, inlineForm]);
   useEffect7(() => {
     const el = ref.current;
     if (!el) return;
@@ -6055,15 +6072,29 @@ function MessageList({
   const pendingMarkers = [...formMarkers ?? []].toSorted(
     (a, b) => (a.createdAt ?? Infinity) - (b.createdAt ?? Infinity)
   );
-  const markerRow = (marker) => /* @__PURE__ */ jsx19(
-    FormDoneMarker,
-    {
-      marker,
-      strings,
-      onFill: !form && onFillForm ? () => onFillForm(marker.formId) : void 0
-    },
-    marker.key
-  );
+  const markerRow = (marker) => {
+    if (form && marker.formId === form.form.id) {
+      return /* @__PURE__ */ jsx19(
+        FormGate,
+        {
+          form: form.form,
+          strings,
+          onSubmit: form.onSubmit,
+          onSkip: form.onSkip
+        },
+        `gate:${marker.formId}`
+      );
+    }
+    return /* @__PURE__ */ jsx19(
+      FormDoneMarker,
+      {
+        marker,
+        strings,
+        onFill: !form && onFillForm ? () => onFillForm(marker.formId) : void 0
+      },
+      marker.key
+    );
+  };
   const flushMarkersBefore = (createdAt) => {
     for (let next = pendingMarkers[0]; next?.createdAt !== void 0; next = pendingMarkers[0]) {
       if (createdAt !== void 0 && next.createdAt > createdAt) break;
@@ -6116,7 +6147,7 @@ function MessageList({
         children: [
           loading && messages.value.length === 0 ? /* @__PURE__ */ jsx19("div", { class: `${p18}-list-loading`, role: "status", children: strings.conversationLoading }) : null,
           rows,
-          form ? /* @__PURE__ */ jsx19(FormGate, { form: form.form, strings, onSubmit: form.onSubmit, onSkip: form.onSkip }) : null
+          form && !inlineForm ? /* @__PURE__ */ jsx19(FormGate, { form: form.form, strings, onSubmit: form.onSubmit, onSkip: form.onSkip }) : null
         ]
       }
     ),