5e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 5f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 60:T2074,@@directive("'use client'") // The adapters use different text fields; these demos render text and reasoning parts. type part = {@as("type") type_: string, text?: string, content?: string} type message = {id: string, role: MessageScrollerExample.role, parts: array} type chat<'transport> type aiSdkTransport type tanstackConnection type writer type writerContext = {writer: writer} type transportOptions = {delayMs: int} @module("@shadcn/helpers/ai-sdk") external createAiSdk: unit => chat = "createChat" @module("@shadcn/helpers/tanstack-ai") external createTanstack: unit => chat = "createChat" @send external user: (chat<'t>, string) => chat<'t> = "user" @send external assistant: (chat<'t>, string) => chat<'t> = "assistant" @send external assistantWith: (chat<'t>, writerContext => unit) => chat<'t> = "assistant" @send external sleep: (chat<'t>, int) => chat<'t> = "sleep" @send external text: (writer, string) => writer = "text" @send external reasoning: (writer, string) => writer = "reasoning" @send external writerSleep: (writer, int) => writer = "sleep" @send external get: (chat<'t>, int) => array = "get" @send external next: (chat<'t>, array) => nullable = "next" @send external transport: (chat<'t>, transportOptions) => 't = "transport" type status = [#submitted | #streaming | #ready | #error] type aiSdkOptions = {messages: array, transport: aiSdkTransport} type aiSdkState = { messages: array, status: status, sendMessage: message => promise, setMessages: array => unit, } @module("@ai-sdk/react") external useAiSdk: aiSdkOptions => aiSdkState = "useChat" type tanstackOptions = {initialMessages: array, connection: tanstackConnection} type tanstackState = { messages: array, status: status, append: message => promise, setMessages: array => unit, } @module("@tanstack/ai-react") external useTanstack: tanstackOptions => tanstackState = "useChat" let partText = part => part.text->Option.orElse(part.content)->Option.getOr("") let messageText = message => message.parts->Array.filter(p => p.type_ == "text")->Array.map(partText)->Array.join("") let script = chat => chat ->user( "I'm building a chat for our app and the scroll behavior is driving me nuts. Every time the AI streams a reply, the whole thread jumps around.", ) ->sleep(1000) ->assistantWith(({writer}) => { writer ->reasoning( "They are describing a streaming transcript that keeps taking control of the viewport. I should explain when auto-scroll follows and when it stops.", ) ->ignore writer->writerSleep(1000)->ignore writer ->text( "That's the classic streaming scroll problem. Wrap your message list in `MessageScroller` and turn on `autoScroll` — the viewport pins to the bottom as tokens arrive, so users always see the latest text land in place.\n\nThe important part: it only auto-scrolls while the reader is already at the bottom. The moment they scroll up to read something earlier, auto-scroll backs off and their position is preserved. You get smooth streaming without fighting the user's intent.", ) ->ignore }) ->user( "Okay, but when someone sends a new message the view still feels jarring — like the whole conversation reloads from the top.", ) ->sleep(1000) ->assistant( "MessageScrollerItem fixes that with turn anchoring. Set `scrollAnchor` on the turn that should settle near the top instead of blindly snapping to the document bottom.\n\nIt also leaves a small peek of the previous exchange visible above the anchor, so context isn't lost. The reply starts in view without that disorienting jump you get from a plain overflow container.", ) ->user( "And if they've scrolled up to re-read an older answer? I don't want to yank them back down.", ) ->sleep(1000) ->assistant( "You won't. Auto-scroll only runs when the viewport is already pinned to the bottom, so scrolling up is a deliberate opt-out — their place in the thread stays put even as new tokens keep arriving below.\n\nWhen there is content they haven't seen yet, `MessageScrollerButton` appears at the bottom of the viewport. One tap jumps them back to the newest message and re-engages auto-scroll. Same pattern as Slack or iMessage: quiet when you're caught up, helpful when you're not.", ) ->user("Last one — does this work with assistive tech?") ->sleep(1000) ->assistant( "`MessageScrollerContent` sets `role=\"log\"` and `aria-relevant=\"additions\"` by default, so screen readers announce new messages as they stream in.\n\nThe scroll button is a real `