@progress/kendo-react-conversational-ui/chat/utils/scroll.js

React Chat component allows the user to participate in chat sessions with users or chat bots. KendoReact Conversational UI components

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react");function A(n){const f=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const d=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(f,l,d.get?d:{enumerable:!0,get:()=>n[l]})}}return f.default=n,Object.freeze(f)}const c=A(m),x=50,B=250,b=50,N=100,j=({viewItemsWrapperRef:n,isKeyboardNavigationActiveRef:f,processedMessages:l,suggestions:d})=>{const a=c.useCallback(()=>{n.current&&(n.current.scrollTop=n.current.scrollHeight-n.current.clientHeight)},[n]),i=c.useCallback(()=>{if(!n.current)return!0;const t=n.current,{scrollTop:e,scrollHeight:r,clientHeight:o}=t,s=x+25;return r-e-o<s},[n]),S=c.useCallback(t=>t===0?16:t<=2?32*t:Math.min(50*t,200),[]),y=c.useCallback((t,e)=>{const r=S(t);setTimeout(()=>{!i()&&n.current&&e(t+1)},r)},[S,i,n]),T=c.useCallback(()=>{const t=(e=0)=>{e>5||requestAnimationFrame(()=>{a(),y(e,t)})};t()},[a,y]),C=c.useCallback(()=>{a(),setTimeout(()=>{!i()&&n.current&&a()},50)},[a,i,n]),g=c.useCallback(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{requestAnimationFrame(C)})})},[C]),O=c.useCallback(()=>{a(),setTimeout(()=>{!i()&&n.current&&T()},25)},[a,i,n,T]),u=c.useCallback((t=!1)=>{if(!n.current||f.current)return;i()&&(t?O():g())},[i,O,g,n,f]);c.useEffect(()=>{const t=window.setTimeout(()=>a(),B);return()=>{clearTimeout(t)}},[a]),c.useEffect(()=>{T()},[l.length,T]);const E=c.useRef(new Map);c.useEffect(()=>{const t=new Map;let e=!1;l.forEach(r=>{if(r.id!==void 0){const o=r.id,s=!!r.typing,h=E.current.get(o);t.set(o,s),h===!0&&s===!1&&(e=!0)}}),E.current=t,e&&T()},[l,T]),c.useEffect(()=>{const t=window.setTimeout(()=>{u()},b);return()=>{clearTimeout(t)}},[l,u]),c.useEffect(()=>{if(l.length>0){const t=l[l.length-1],e=(t==null?void 0:t.text)||"";(e.includes("```")||e.includes(`

`)||e.includes("<pre>")||e.includes("<code>")||e.includes("<table>")||e.length>500)&&u(!0)}},[l,u]),c.useEffect(()=>{if(d&&d.length>0){const t=window.setTimeout(()=>{u()},N);return()=>{clearTimeout(t)}}},[d,u]),c.useEffect(()=>{if(!n.current)return()=>{};let t;const e=new ResizeObserver(()=>{t&&clearTimeout(t),t=window.setTimeout(()=>{u()},b)}),r=n.current.querySelector(".k-message-list-content");return r&&e.observe(r),()=>{e.disconnect()}},[u,n]);const L=c.useCallback(t=>{var r;if(t.type!=="characterData"&&t.type!=="childList")return!1;const e=(r=t.target.textContent)!=null?r:"";return e.includes("```")||e.includes(`

`)||e.includes("<pre>")||e.includes("<code>")||e.includes("<table>")||t.addedNodes&&t.addedNodes.length>2},[]),k=c.useCallback(t=>{let e=!1,r=!1;return t.forEach(o=>{var s;(o.type==="childList"||o.type==="characterData"||o.type==="attributes"&&["class","style"].includes((s=o.attributeName)!=null?s:""))&&(e=!0,L(o)&&(r=!0))}),{shouldScroll:e,hasSignificantChange:r}},[L]),D=c.useCallback((t,e)=>{e.current&&clearTimeout(e.current),t?u(!0):e.current=window.setTimeout(()=>{u()},b)},[u]);c.useEffect(()=>{if(!n.current)return()=>{};const t={current:void 0};let e=0;const r=new MutationObserver(o=>{const s=Date.now();if(s-e<16)return;e=s;const{shouldScroll:h,hasSignificantChange:_}=k(o);h&&i()&&D(_,t)});return r.observe(n.current,{childList:!0,subtree:!0,characterData:!0,attributes:!0,attributeFilter:["class","style"]}),()=>{r.disconnect(),t.current&&clearTimeout(t.current)}},[i,k,D,n])};exports.useChatScroll=j;