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:T14f2,@@directive("'use client'") @unboxed type turn = | @as("idle") Idle | @as("marker") Marker | @as("message") Message type chatMessage = { id: string, sender: string, role: MessageScrollerExample.role, text: string, scrollAnchor: bool, } let currentUser = "Grace" let initialMessages: array = [ { id: "group-1", sender: "Grace", role: User, text: "@mary, the astrophage line keeps matching Venus energy output. Can you check my math?", scrollAnchor: false, }, { id: "group-2", sender: "Mary (Agent)", role: Assistant, text: "Yes. Confirmed. The curve points to a microorganism harvesting stellar energy and breeding near carbon dioxide. If @rocky agrees, this is the clue we need.", scrollAnchor: false, }, { id: "group-3", sender: "Grace", role: User, text: "ping @rocky", scrollAnchor: true, }, ] let rockyMessage: chatMessage = { id: "group-5", sender: "Rocky", role: User, text: "Amaze. Astrophage eats light, makes heat, goes to carbon dioxide. Rocky has fuel model. Grace is smart.", scrollAnchor: false, } module ChatMessage = { @react.component let make = (~item: chatMessage) => { let isCurrentUser = item.sender == currentUser let variant = isCurrentUser ? Bubble.Variant.Muted : item.role == Assistant ? Ghost : Tinted {isCurrentUser ? React.null : {item.sender->React.string} } {item.text->React.string} } } module JoinMarker = { @react.component let make = () => {"Rocky has joined the chat"->React.string} } @react.componentWithProps(Demo.Props.t) let make = ({}: Demo.Props.t) => { let (demoKey, setDemoKey) = React.useState(() => 0) let (rockyTurn, setRockyTurn) = React.useState(() => Idle) let buttonLabel = rockyTurn == Idle ? "Add Rocky" : "Send Message as Rocky" let isComplete = rockyTurn == Message

{"Group Chat"->React.string} {"A group chat with several participants and an assistant. The Marker is marked as a turn."->React.string} { setRockyTurn(_ => Idle) setDemoKey(key => key + 1) }} />} >

{"Reset"->React.string}

Int.toString}> {initialMessages ->Array.map(item => ) ->React.array} {rockyTurn == Idle ? React.null : } {rockyTurn == Message ? : React.null}

{( rockyTurn == Idle ? "This will create a marker and make it the anchor" : "Now send Rocky's reply into the conversation" )->React.string}

{"When a user joins, a marker is created. scrollAnchor on the marker marks it as the next turn"->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/Bubble","@rescript-shadcn/Button","@rescript-shadcn/Card","@rescript-shadcn/Demo","@rescript-shadcn/Icons","@rescript-shadcn/Marker","@rescript-shadcn/Message","@rescript-shadcn/MessageScroller","@rescript-shadcn/MessageScrollerExample","@rescript-shadcn/Tooltip"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/base/examples/MessageScrollerGroupChat.res","content":"$53","type":"registry:example"}],"className":"h-[70svh] min-h-80"}]]}]