51: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"] 52: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"] 53:Tf7e,@@directive("'use client'") type position = MessageScroller.DefaultScrollPosition.t let messages: array = [ {id: "open-1", role: User, text: "This is the first message the user sent in the conversation."}, { id: "open-2", role: Assistant, text: "Workspace creation rose 8%, but first invite completion only rose 2%.", }, {id: "open-3", role: User, text: "This is the last message the user sent in the conversation."}, { id: "open-4", role: Assistant, text: "Start with the invite step. Teams are creating workspaces but waiting to add collaborators.\n\nRecommended follow-up:\n\n1. Compare invite drop-off by account size.\n2. Check whether users who skip invites still return within 24 hours.\n3. Review the empty-state copy on the first project screen.\n4. Segment activation by template, since template users may not need invites right away.\n\nIf that pattern holds, the next experiment should make collaboration useful earlier instead of prompting for invites harder.", }, ] module Scroller = { @react.component let make = (~position: position, ~positionKey: int) => { let {scrollToEnd, scrollToMessage, scrollToStart} = MessageScroller.useMessageScroller() React.useEffect(() => { switch position { | Start => scrollToStart(Some({behavior: Auto}))->ignore | End => scrollToEnd(Some({behavior: Auto}))->ignore | LastAnchor => scrollToMessage("open-3", Some({align: Start, behavior: Auto, scrollMargin: 64.}))->ignore } None }, [positionKey]) } } @react.componentWithProps(Demo.Props.t) let make = ({}: Demo.Props.t) => { let (positionKey, setPositionKey) = React.useState(() => 0) let (position, setPosition) = React.useState(() => MessageScroller.DefaultScrollPosition.LastAnchor )

{"Opening Position"->React.string} {"Choose where a saved transcript opens."->React.string} string)} onValueChange={(value, _) => { let next = switch value { | "start" => Some(MessageScroller.DefaultScrollPosition.Start) | "end" => Some(MessageScroller.DefaultScrollPosition.End) | "last-anchor" => Some(MessageScroller.DefaultScrollPosition.LastAnchor) | _ => None } next->Option.forEach(position => { setPosition(_ => position) setPositionKey(key => key + 1) }) }} className="w-full" > {"start"->React.string} {"end"->React.string} {"last-anchor"->React.string}

{"Toggle the defaultScrollPosition to see where the transcript starts when you open the thread"->React.string}

} 50:["$","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":[null,["$","$L51",null,{"namespace":"@rescript-shadcn","registryDependencies":["@rescript-shadcn/Card","@rescript-shadcn/Demo","@rescript-shadcn/MessageScroller","@rescript-shadcn/MessageScrollerExample","@rescript-shadcn/Tabs"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/examples/MessageScrollerOpeningPosition.res","content":"$53","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]