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:T143b,@@directive("'use client'") @unboxed type anchorRole = | @as("user") UserAnchor | @as("assistant") AssistantAnchor let scriptedMessages: array = [ { id: "anchor-1-user", role: User, text: "Can you show me how anchoring behaves when a new prompt starts the turn?", }, { id: "anchor-1-assistant", role: Assistant, text: "Append the user prompt first, then append the assistant response. With User selected, the prompt settles near the top and the assistant response fills in below it.", }, {id: "anchor-2-user", role: User, text: "What changes when assistant messages are the anchor?"}, { id: "anchor-2-assistant", role: Assistant, text: "Now each assistant response is the item `MessageScroller` keeps in view. This is useful when the reply is the moment you want readers to land on after each turn.", }, {id: "anchor-3-user", role: User, text: "Can I switch roles and keep adding turns?"}, { id: "anchor-3-assistant", role: Assistant, text: "Yes. The next appended message with the selected role becomes the anchor, so you can compare user and assistant anchoring without resetting the demo.", }, ] @react.componentWithProps(Demo.Props.t) let make = ({}: Demo.Props.t) => { let (anchorRole, setAnchorRole) = React.useState(() => UserAnchor) let (messageIndex, setMessageIndex) = React.useState(() => 0) let messages = scriptedMessages->Array.slice(~start=0, ~end=messageIndex) let nextMessage = scriptedMessages->Array.get(messageIndex)

{"Anchoring Turns"->React.string} {"Choose which role settles near the top edge."->React.string} {if messages->Array.length == 0 { {"No anchored messages yet"->React.string} {"Send the first message to see the selected role anchor."->React.string} } else { {messages ->Array.map(message => message.role == User | AssistantAnchor => message.role == Assistant }} /> ) ->React.array} }} string)]} onValueChange={(keys, _) => switch keys->Array.get(0) { | Some("assistant") => setAnchorRole(_ => AssistantAnchor) setMessageIndex(_ => 0) | Some("user") => setAnchorRole(_ => UserAnchor) setMessageIndex(_ => 0) | _ => () }} > {"User"->React.string} {"Assistant"->React.string}

{"Toggle the anchor role, then send messages to compare where turns settle."->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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@rescript-shadcn","registryDependencies":["@rescript-shadcn/Button","@rescript-shadcn/Card","@rescript-shadcn/Demo","@rescript-shadcn/Empty","@rescript-shadcn/Icons","@rescript-shadcn/MessageScroller","@rescript-shadcn/MessageScrollerExample","@rescript-shadcn/ToggleGroup"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/examples/MessageScrollerAnchoring.res","content":"$53","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]