4f: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51:T285b,"use client" import * as React from "react" import { IconArrowUp, IconMessageCircle, IconRotateClockwise, IconSparkles, } from "@tabler/icons-react" import { Bubble, BubbleContent } from "@/components/ui/bubble" import { Button } from "@/components/ui/button" import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@/components/ui/empty" import { InputGroup, InputGroupAddon, InputGroupButton, } from "@/components/ui/input-group" import { Message, MessageAvatar, MessageContent } from "@/components/ui/message" import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, } from "@/components/ui/message-scroller" type Turn = { user: string; assistant: string } type Entry = { id: string; role: "user" | "assistant"; text: string } const script: Turn[] = [ { 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.", assistant: "That's the classic streaming scroll problem. Wrap your message list in a message scroller and turn on autoScroll. The viewport pins to the bottom as tokens arrive, so readers always see the latest text land in place, without the thread lurching around underneath them.\n\nThe important part is that it only follows while the reader is already at the bottom. The moment they scroll up to read something earlier, it backs off and their position is preserved. New text keeps arriving below, the button at the bottom shows there's more, and one tap brings them back to the live edge, where following picks up again.", }, { user: "Okay, but when someone sends a new message the view still feels jarring, like the whole conversation reloads from the top.", assistant: "That's what turn anchoring fixes. Mark each user message with scrollAnchor and a new question settles near the top of the viewport instead of snapping to the very bottom. The answer then has room to stream in below it, and you read it from its first word instead of chasing the end of the stream.\n\nIt also leaves a small peek of the previous exchange above the anchor, so the new turn still feels connected to what came before. Once the answer grows past the bottom of the view, following takes over from the anchor and keeps the newest text in sight.", }, { user: "And if they've scrolled up to re-read an older answer? I don't want to yank them back down.", assistant: "You won't. Scrolling away is a deliberate opt-out, so their place in the thread stays put even while new text keeps arriving below. Wheel, touch, keyboard and dragging the scrollbar all count, so it never fights the reader for control.\n\nWhile there's content they haven't reached, the jump button sits at the bottom of the viewport. If whole messages arrive while they're away, it counts them, so they know what they missed. One tap jumps back to the newest message and turns following back on.", }, { user: "Last one: does this work with assistive tech?", assistant: "Yes. The transcript is a labelled, focusable region, so keyboard users can reach it and scroll it with the arrow keys, Page Up and Page Down. Inside it, the content is a log with additions announced, so screen readers read new messages as they arrive.\n\nSet aria-busy while a reply streams and the announcement waits for the finished message instead of reading every word as it lands. The jump button is a real button with a spoken label, and it leaves the tab order whenever there's nothing to jump to.", }, ] export function MessageScrollerDemo() { const [entries, setEntries] = React.useState([]) const [streaming, setStreaming] = React.useState(false) const timers = React.useRef[]>([]) const turn = entries.filter((entry) => entry.role === "user").length const next = script[turn] React.useEffect(() => { const pending = timers.current return () => pending.forEach(clearTimeout) }, []) const send = () => { if (!next || streaming) { return } const id = `turn-${turn}` setStreaming(true) setEntries((current) => [ ...current, { id: `${id}-user`, role: "user", text: next.user }, ]) const words = next.assistant.split(" ") timers.current.push( setTimeout(() => { setEntries((current) => [ ...current, { id: `${id}-assistant`, role: "assistant", text: "" }, ]) words.forEach((_, index) => { timers.current.push( setTimeout( () => { setEntries((current) => current.map((entry) => entry.id === `${id}-assistant` ? { ...entry, text: words.slice(0, index + 1).join(" ") } : entry ) ) if (index === words.length - 1) { setStreaming(false) } }, 40 * (index + 1) ) ) }) }, 600) ) } const reset = () => { timers.current.forEach(clearTimeout) timers.current = [] setStreaming(false) setEntries([]) } return (

New chat

How can I help you today?

{entries.length === 0 ? ( Morning! Press send to start the conversation. ) : ( {entries.map((entry) => ( {entry.role === "user" ? ( {entry.text} ) : ( {entry.text ? (

{entry.text .split("\n\n") .map((paragraph, index) => (

{paragraph}

))}

) : ( "Thinking…" )} )} ))} )}

The prompt is read only. Press send to play the next turn.

) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/bubble.json","https://hextaui.com/r/button.json","https://hextaui.com/r/empty.json","https://hextaui.com/r/input-group.json","https://hextaui.com/r/message.json","https://hextaui.com/r/message-scroller.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/examples/message-scroller/demo.tsx","content":"$51","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]