@helpai/elements 0.19.2 → 0.19.3

package/index.d.ts

@@ -1,4 +1,4 @@
-export { A as Asset, B as BlocksConfig, C as ConnectionConfig, a as ConnectionConfigPartial, L as Link, S as ServerConfig, b as SiteConfig, c as StartConversationResponse, W as WidgetConfig, d as WidgetConfigPartial, e as WidgetSettings, f as WidgetSettingsPartial } from './deployment-H2uevlHy.js';
+export { A as Asset, B as BlocksConfig, C as ConnectionConfig, a as ConnectionConfigPartial, L as Link, S as ServerConfig, b as SiteConfig, c as StartConversationResponse, W as WidgetConfig, d as WidgetConfigPartial, e as WidgetSettings, f as WidgetSettingsPartial } from './deployment-BvNoqfIC.js';
 import 'zod';
 
 /**

package/index.mjs

@@ -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",
@@ -4776,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();
@@ -4804,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;
@@ -4813,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);
@@ -4828,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;
@@ -4838,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);
@@ -4851,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.2"
+  "version": "0.19.3"
 }

package/schema.d.ts

@@ -1,4 +1,4 @@
-export { A as Asset, B as BlocksConfig, C as ConnectionConfig, a as ConnectionConfigPartial, E as Endpoints, L as Link, P as PAGE_AREA_SUGGESTIONS, g as PageContext, S as ServerConfig, b as SiteConfig, c as StartConversationResponse, U as UserContext, W as WidgetConfig, d as WidgetConfigPartial, e as WidgetSettings, f as WidgetSettingsPartial, h as assetSchema, i as blocksConfigSchema, j as connectionConfigPartialSchema, k as connectionConfigSchema, l as cssColorSchema, m as cssLengthSchema, n as endpointsSchema, o as linkSchema, p as localeSchema, q as pageContextSchema, s as serverConfigSchema, r as siteConfigSchema, t as startConversationResponseSchema, u as userContextSchema, v as uuid7Schema, w as widgetConfigPartialSchema, x as widgetConfigSchema, y as widgetSettingsPartialSchema, z as widgetSettingsSchema } from './deployment-H2uevlHy.js';
+export { A as Asset, B as BlocksConfig, C as ConnectionConfig, a as ConnectionConfigPartial, E as Endpoints, L as Link, P as PAGE_AREA_SUGGESTIONS, g as PageContext, S as ServerConfig, b as SiteConfig, c as StartConversationResponse, U as UserContext, W as WidgetConfig, d as WidgetConfigPartial, e as WidgetSettings, f as WidgetSettingsPartial, h as assetSchema, i as blocksConfigSchema, j as connectionConfigPartialSchema, k as connectionConfigSchema, l as cssColorSchema, m as cssLengthSchema, n as endpointsSchema, o as linkSchema, p as localeSchema, q as pageContextSchema, s as serverConfigSchema, r as siteConfigSchema, t as startConversationResponseSchema, u as userContextSchema, v as uuid7Schema, w as widgetConfigPartialSchema, x as widgetConfigSchema, y as widgetSettingsPartialSchema, z as widgetSettingsSchema } from './deployment-BvNoqfIC.js';
 import { z } from 'zod';
 
 /**
@@ -56,9 +56,9 @@ declare const presentationSchema: z.ZodObject<{
         inset: z.ZodOptional<z.ZodString>;
         initialSize: z.ZodDefault<z.ZodEnum<{
             fullscreen: "fullscreen";
-            normal: "normal";
             expanded: "expanded";
             auto: "auto";
+            normal: "normal";
         }>>;
         autoSizeBreakpoint: z.ZodDefault<z.ZodNumber>;
     }, z.core.$loose>>;
@@ -148,9 +148,9 @@ declare const launcherSizeSchema: z.ZodEnum<{
 }>;
 type LauncherSize = z.infer<typeof launcherSizeSchema>;
 declare const calloutShapeSchema: z.ZodEnum<{
+    callout: "callout";
     pill: "pill";
     bubble: "bubble";
-    callout: "callout";
 }>;
 type CalloutShape = z.infer<typeof calloutShapeSchema>;
 declare const calloutPositionSchema: z.ZodEnum<{
@@ -162,9 +162,9 @@ type CalloutPosition = z.infer<typeof calloutPositionSchema>;
 declare const launcherCalloutSchema: z.ZodObject<{
     text: z.ZodDefault<z.ZodString>;
     shape: z.ZodDefault<z.ZodEnum<{
+        callout: "callout";
         pill: "pill";
         bubble: "bubble";
-        callout: "callout";
     }>>;
     position: z.ZodDefault<z.ZodEnum<{
         auto: "auto";
@@ -195,9 +195,9 @@ declare const launcherOptionsSchema: z.ZodObject<{
     callout: z.ZodOptional<z.ZodObject<{
         text: z.ZodDefault<z.ZodString>;
         shape: z.ZodDefault<z.ZodEnum<{
+            callout: "callout";
             pill: "pill";
             bubble: "bubble";
-            callout: "callout";
         }>>;
         position: z.ZodDefault<z.ZodEnum<{
             auto: "auto";
@@ -240,9 +240,9 @@ type LauncherOptions = z.infer<typeof launcherOptionsSchema>;
 
 declare const initialSizeSchema: z.ZodEnum<{
     fullscreen: "fullscreen";
-    normal: "normal";
     expanded: "expanded";
     auto: "auto";
+    normal: "normal";
 }>;
 declare const resizeOptionsSchema: z.ZodObject<{
     enabled: z.ZodDefault<z.ZodBoolean>;
@@ -269,9 +269,9 @@ declare const sizeOptionsSchema: z.ZodObject<{
     inset: z.ZodOptional<z.ZodString>;
     initialSize: z.ZodDefault<z.ZodEnum<{
         fullscreen: "fullscreen";
-        normal: "normal";
         expanded: "expanded";
         auto: "auto";
+        normal: "normal";
     }>>;
     autoSizeBreakpoint: z.ZodDefault<z.ZodNumber>;
 }, z.core.$loose>;
@@ -323,43 +323,43 @@ type FeatureFlags = z.infer<typeof featureFlagsSchema>;
  */
 
 declare const actionNameSchema: z.ZodEnum<{
+    close: "close";
     expand: "expand";
     fullscreen: "fullscreen";
     popOut: "popOut";
-    close: "close";
-    language: "language";
+    clear: "clear";
     theme: "theme";
+    language: "language";
     textSize: "textSize";
     history: "history";
-    clear: "clear";
     sound: "sound";
 }>;
 type ActionName = z.infer<typeof actionNameSchema>;
 declare const headerActionsSchema: z.ZodArray<z.ZodEnum<{
+    close: "close";
     expand: "expand";
     fullscreen: "fullscreen";
     popOut: "popOut";
-    close: "close";
-    language: "language";
+    clear: "clear";
     theme: "theme";
+    language: "language";
     textSize: "textSize";
     history: "history";
-    clear: "clear";
     sound: "sound";
 }>>;
 type HeaderActions = z.infer<typeof headerActionsSchema>;
 /** Section wrapper — `actions` list wrapped under `header` in the dashboard form. */
 declare const headerSchema: z.ZodObject<{
     actions: z.ZodOptional<z.ZodArray<z.ZodEnum<{
+        close: "close";
         expand: "expand";
         fullscreen: "fullscreen";
         popOut: "popOut";
-        close: "close";
-        language: "language";
+        clear: "clear";
         theme: "theme";
+        language: "language";
         textSize: "textSize";
         history: "history";
-        clear: "clear";
         sound: "sound";
     }>>>;
 }, z.core.$loose>;
@@ -375,33 +375,33 @@ type HeaderOptions = z.infer<typeof headerSchema>;
  */
 
 declare const feedbackEventSchema: z.ZodEnum<{
+    voiceStart: "voiceStart";
+    voiceStop: "voiceStop";
     error: "error";
     messageReceived: "messageReceived";
     messageSent: "messageSent";
-    voiceStart: "voiceStart";
-    voiceStop: "voiceStop";
 }>;
 type FeedbackEvent = z.infer<typeof feedbackEventSchema>;
 declare const soundOptionsSchema: z.ZodObject<{
     enabled: z.ZodDefault<z.ZodBoolean>;
     volume: z.ZodDefault<z.ZodNumber>;
     events: z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+        voiceStart: "voiceStart";
+        voiceStop: "voiceStop";
         error: "error";
         messageReceived: "messageReceived";
         messageSent: "messageSent";
-        voiceStart: "voiceStart";
-        voiceStop: "voiceStop";
     }> & z.core.$partial, z.ZodUnion<readonly [z.ZodBoolean, z.ZodString]>>>;
 }, z.core.$loose>;
 type SoundOptions = z.infer<typeof soundOptionsSchema>;
 declare const hapticsOptionsSchema: z.ZodObject<{
     enabled: z.ZodDefault<z.ZodBoolean>;
     events: z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+        voiceStart: "voiceStart";
+        voiceStop: "voiceStop";
         error: "error";
         messageReceived: "messageReceived";
         messageSent: "messageSent";
-        voiceStart: "voiceStart";
-        voiceStop: "voiceStop";
     }> & z.core.$partial, z.ZodUnion<readonly [z.ZodBoolean, z.ZodNumber, z.ZodArray<z.ZodNumber>]>>>;
 }, z.core.$loose>;
 type HapticsOptions = z.infer<typeof hapticsOptionsSchema>;
@@ -410,21 +410,21 @@ declare const feedbackSchema: z.ZodObject<{
         enabled: z.ZodDefault<z.ZodBoolean>;
         volume: z.ZodDefault<z.ZodNumber>;
         events: z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+            voiceStart: "voiceStart";
+            voiceStop: "voiceStop";
             error: "error";
             messageReceived: "messageReceived";
             messageSent: "messageSent";
-            voiceStart: "voiceStart";
-            voiceStop: "voiceStop";
         }> & z.core.$partial, z.ZodUnion<readonly [z.ZodBoolean, z.ZodString]>>>;
     }, z.core.$loose>>;
     haptics: z.ZodOptional<z.ZodObject<{
         enabled: z.ZodDefault<z.ZodBoolean>;
         events: z.ZodOptional<z.ZodRecord<z.ZodEnum<{
+            voiceStart: "voiceStart";
+            voiceStop: "voiceStop";
             error: "error";
             messageReceived: "messageReceived";
             messageSent: "messageSent";
-            voiceStart: "voiceStart";
-            voiceStop: "voiceStop";
         }> & z.core.$partial, z.ZodUnion<readonly [z.ZodBoolean, z.ZodNumber, z.ZodArray<z.ZodNumber>]>>>;
     }, z.core.$loose>>;
 }, z.core.$loose>;
@@ -565,16 +565,16 @@ type FooterOptions = z.infer<typeof footerSchema>;
 
 declare const fieldTypeSchema: z.ZodEnum<{
     number: "number";
+    select: "select";
+    textarea: "textarea";
+    time: "time";
     text: "text";
+    checkbox: "checkbox";
+    radio: "radio";
     url: "url";
     email: "email";
     tel: "tel";
     date: "date";
-    time: "time";
-    textarea: "textarea";
-    select: "select";
-    radio: "radio";
-    checkbox: "checkbox";
     multiselect: "multiselect";
 }>;
 type FieldType = z.infer<typeof fieldTypeSchema>;
@@ -599,16 +599,16 @@ declare const formFieldSchema: z.ZodObject<{
     label: z.ZodString;
     type: z.ZodEnum<{
         number: "number";
+        select: "select";
+        textarea: "textarea";
+        time: "time";
         text: "text";
+        checkbox: "checkbox";
+        radio: "radio";
         url: "url";
         email: "email";
         tel: "tel";
         date: "date";
-        time: "time";
-        textarea: "textarea";
-        select: "select";
-        radio: "radio";
-        checkbox: "checkbox";
         multiselect: "multiselect";
     }>;
     placeholder: z.ZodOptional<z.ZodString>;
@@ -659,16 +659,16 @@ declare const formDefSchema: z.ZodObject<{
         label: z.ZodString;
         type: z.ZodEnum<{
             number: "number";
+            select: "select";
+            textarea: "textarea";
+            time: "time";
             text: "text";
+            checkbox: "checkbox";
+            radio: "radio";
             url: "url";
             email: "email";
             tel: "tel";
             date: "date";
-            time: "time";
-            textarea: "textarea";
-            select: "select";
-            radio: "radio";
-            checkbox: "checkbox";
             multiselect: "multiselect";
         }>;
         placeholder: z.ZodOptional<z.ZodString>;
@@ -717,16 +717,16 @@ declare const formsSchema: z.ZodArray<z.ZodObject<{
         label: z.ZodString;
         type: z.ZodEnum<{
             number: "number";
+            select: "select";
+            textarea: "textarea";
+            time: "time";
             text: "text";
+            checkbox: "checkbox";
+            radio: "radio";
             url: "url";
             email: "email";
             tel: "tel";
             date: "date";
-            time: "time";
-            textarea: "textarea";
-            select: "select";
-            radio: "radio";
-            checkbox: "checkbox";
             multiselect: "multiselect";
         }>;
         placeholder: z.ZodOptional<z.ZodString>;
@@ -798,18 +798,18 @@ type I18nOptions = z.infer<typeof i18nSchema>;
  */
 
 declare const moduleLayoutSchema: z.ZodEnum<{
+    home: "home";
     chat: "chat";
     help: "help";
-    home: "home";
     news: "news";
 }>;
 type ModuleLayout = z.infer<typeof moduleLayoutSchema>;
 declare const moduleSchema: z.ZodObject<{
     label: z.ZodString;
     layout: z.ZodEnum<{
+        home: "home";
         chat: "chat";
         help: "help";
-        home: "home";
         news: "news";
     }>;
     contentTags: z.ZodOptional<z.ZodArray<z.ZodString>>;
@@ -835,9 +835,9 @@ type ModuleOptions = z.infer<typeof moduleSchema>;
 declare const modulesSchema: z.ZodArray<z.ZodObject<{
     label: z.ZodString;
     layout: z.ZodEnum<{
+        home: "home";
         chat: "chat";
         help: "help";
-        home: "home";
         news: "news";
     }>;
     contentTags: z.ZodOptional<z.ZodArray<z.ZodString>>;

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

@@ -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",
@@ -4831,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();
@@ -4859,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;
@@ -4868,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);
@@ -4883,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;
@@ -4893,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);
@@ -4906,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 = "";