51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T18b1,"use client" import { useMemo } from "react" // shadcn import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerProvider, MessageScrollerViewport, useMessageScroller, useMessageScrollerVisibility, } from "@/components/ui/message-scroller" // project imports import { MessageAnimated } from "@/components/message-animated" type TranscriptMessage = { id: string role: "assistant" | "user" text: string scrollAnchor?: boolean } const transcriptMessages: TranscriptMessage[] = [ { id: "reader-1", role: "assistant", text: "Review the incident handoff and tell me what to read first.", }, { id: "reader-2", role: "user", scrollAnchor: true, text: "Start with the summary and the impact section. The regression affected the upload queue, but the recovery path completed for every queued job.", }, { id: "reader-3", role: "assistant", scrollAnchor: true, text: "The impact was limited to delayed processing and a short wave of customer confusion. No records were dropped.", }, { id: "reader-4", role: "user", scrollAnchor: true, text: "What actions are open? Keep the retry window enabled until the next deploy, then add a queue-depth alert as the long-term fix.", }, { id: "reader-5", role: "assistant", scrollAnchor: true, text: "The alert should fire on sustained queue growth, not a single short spike. I would also add a short owner note beside each follow-up item.", }, { id: "reader-6", role: "user", text: "Give me the follow-up checklist. After that, compare the queue recovery graph with the deploy timeline so the handoff shows exactly when processing returned to baseline.", }, ] const anchorLabels = { "reader-2": "Summary", "reader-3": "Impact", "reader-4": "Open actions", "reader-5": "Alert note", } as const function ReaderPosition() { const { currentAnchorId } = useMessageScrollerVisibility() const { scrollToMessage } = useMessageScroller() const anchors = useMemo( () => transcriptMessages.filter( (message) => message.scrollAnchor && Object.prototype.hasOwnProperty.call(anchorLabels, message.id) ), [] ) return (

Transcript Outline Track the current anchored turn. {transcriptMessages.map((message) => ( ))}

Open outline

} />

{anchors.map((anchor) => { const isActive = anchor.id === currentAnchorId return ( scrollToMessage(anchor.id, { behavior: "smooth" }) } className={`flex flex-col items-start gap-1 px-3 py-2 hover:bg-muted/60 ${ isActive ? "bg-muted/60 font-semibold" : "" }`} >

{ anchorLabels[ anchor.id as keyof typeof anchorLabels ] }

) })}

Open the outline to jump between anchored turns as you read.

) } // ------------------------------ | MESSAGE SCROLLER - READER POSITION | ------------------------------ // export function MessageScrollerReaderPosition() { return ( ) } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L51",null,{"registryDependencies":["@uiable/button","@uiable/card","@uiable/dropdown-menu","@uiable/message-scroller"]}]]}],["$","$L52",null,{"sourceUrl":"https://uiable.com/r/message-scroller-reader-position.json","proxyUrl":"https://shadcnregistry.com/r/uiable/message-scroller-reader-position","itemId":"@uiable/message-scroller-reader-position"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"src/components/uiable/message-scroller/message-scroller-reader-position.tsx","content":"$54","type":"registry:component","target":"@components/uiable/message-scroller/message-scroller-reader-position.tsx"}]}]]}],"$L55"]}]

Message Scroller Reader Position

Installation

Files

@components

Styles