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:T12d2,"use client" import { useState } from "react" // shadcn import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card" import { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerProvider, MessageScrollerViewport, } from "@/components/ui/message-scroller" import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" // project imports import { MessageAnimated } from "@/components/message-animated" type SavedThreadMessage = { id: string role: "assistant" | "user" text: string scrollAnchor?: boolean } const savedThreadMessages: SavedThreadMessage[] = [ { id: "position-1", role: "assistant", text: "This is the first message the user sent in the conversation.", }, { id: "position-2", role: "user", text: "Workspace creation rose 8%, but first invite completion only rose 2%.", }, { id: "position-3", role: "assistant", text: "This is the last message the user sent in the conversation.", }, { id: "position-4", role: "user", scrollAnchor: true, text: "Start with the invite step. Teams are creating workspaces but waiting to add collaborators. We should compare invite adoption across account size, check whether users who skip invites still return within 24 hours, and review the empty-state copy on the first project screen.", }, { id: "position-5", role: "assistant", text: "If that pattern holds, the next experiment should make collaboration useful earlier instead of prompting for invites harder. Choosing last-anchor keeps the latest user prompt visible with the reply starting below it.", }, { id: "position-6", role: "user", text: "Also check how layout changes behave when images load or markdown expands. The saved thread should still open in the right place and let me scroll through the transcript naturally.", }, ] const positions = [ { value: "start", label: "start" }, { value: "end", label: "end" }, { value: "last-anchor", label: "last-anchor" }, ] as const type PositionValue = (typeof positions)[number]["value"] // ------------------------------ | MESSAGE SCROLLER - POSITION | ------------------------------ // export function MessageScrollerPosition() { const [demoKey, setDemoKey] = useState(0) const [position, setPosition] = useState("start") return (

Opening Position Choose where a saved transcript opens. {savedThreadMessages.map((message) => ( ))} { const nextValue = value[0] if ( nextValue === "start" || nextValue === "end" || nextValue === "last-anchor" ) { setPosition(nextValue) setDemoKey((key) => key + 1) } }} className="grid w-full grid-cols-3 gap-1 border bg-muted p-1" > {positions.map((option) => ( {option.label} ))}

) } 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/card","@uiable/message-scroller","@uiable/toggle-group"]}]]}],["$","$L52",null,{"sourceUrl":"https://uiable.com/r/message-scroller-position.json","proxyUrl":"https://shadcnregistry.com/r/uiable/message-scroller-position","itemId":"@uiable/message-scroller-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-position.tsx","content":"$54","type":"registry:component","target":"@components/uiable/message-scroller/message-scroller-position.tsx"}]}]]}],"$L55"]}]

Message Scroller Position

Installation

Files

@components

Styles