@@directive("'use client'") @@jsxConfig({version: 4, mode: "automatic", module_: "BaseUi.BaseUiJsxDOM"}) let chat = AiChat.createAiSdk()->AiChat.script let initialMessages = chat->AiChat.get(0) let transport = chat->AiChat.transport({delayMs: 20}) @react.componentWithProps(Demo.Props.t) let make = ({}: Demo.Props.t) => { let {messages, sendMessage, setMessages, status} = AiChat.useAiSdk({ messages: initialMessages, transport, }) let nextMessage = chat->AiChat.next(messages)->Nullable.toOption let isBusy = status == #submitted || status == #streaming

{"New Chat"->React.string} {"How can I help you today?"->React.string} setMessages(initialMessages)} />} >

{"Reset"->React.string}

{if messages->Array.length == 0 { {"Morning, shadcn!"->React.string} {"What are we working on today? Press send to start a new conversation"->React.string} } else { {messages ->Array.map(message => ) ->React.array} }}

{ event->ReactEvent.Form.preventDefault if !isBusy { nextMessage->Option.forEach(message => sendMessage(message)->ignore) } }} className="w-full" > string)} placeholder="No messages queued. Reset the conversation." value={nextMessage->Option.map(AiChat.messageText)->Option.getOr("")} readOnly=true /> } > {"Add Photos & Files"->React.string} {"Create Image"->React.string} {"Deep Research"->React.string} {"Web Search"->React.string} Option.isNone || isBusy} className="ml-auto" > {"Send"->React.string}

{"Demo is read only. Press send to send messages."->React.string}

}