@kitn.ai/ui/dist/elements/scroll-button.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{f as g,g as h,o as v,p as E,c as a}from"./chunks/define-CNSKFZCd.js";import{c as y}from"./chunks/cn-CU7UAWzk.js";import{B as H}from"./chunks/button-DBDZebGr.js";import{c as b}from"./chunks/chevron-down-DcRg1aRU.js";const w=50;function k(r){let t=r.parentElement;for(;t&&t!==document.documentElement;){const n=getComputedStyle(t),l=n.overflow+n.overflowY;if(/auto|scroll/.test(l)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return null}g("kai-scroll-button",{for:void 0,variant:"outline",size:"icon"},(r,{element:t,dispatch:n})=>{const[l,c]=h(!0);let o=null,i=[];function s(){if(!o)return;const{scrollTop:e,scrollHeight:p,clientHeight:d}=o;c(p-e-d<w)}function u(){o&&(o.scrollTo({top:o.scrollHeight,behavior:"smooth"}),c(!0))}function f(e){o=e,e.addEventListener("scroll",s,{passive:!0}),s(),i.push(()=>e.removeEventListener("scroll",s))}function m(){i.forEach(e=>e()),i=[],o=null}return v(()=>{const e=r.for?document.getElementById(r.for):k(t);e&&f(e)}),E(m),a(H,{get variant(){return r.variant??"outline"},get size(){return r.size??"icon"},"aria-label":"Scroll to bottom",get class(){return y("rounded-full transition-all duration-150 ease-out",l()?"pointer-events-none translate-y-4 scale-95 opacity-0":"translate-y-0 scale-100 opacity-100")},onClick:()=>{u(),n("kai-scroll")},get children(){return a(b,{class:"h-5 w-5"})}})});