Docs
Assistant Chat
Assistant Chat
Bespoke Assistant chat text area, with support for a commands Popover.
import { Box } from 'lucide-react'
import { useState } from 'react'
import { AssistantChatForm } from 'ui-patterns/AssistantChat'
export function AssistantChatDemo() {
const [value, setValueState] = useState('')
const [loading, setLoading] = useState(false)
function handleSubmit(event: React.FormEvent) {
// set loading for 3 seconds and then reset
setLoading(true)
setTimeout(() => {
setLoading(false)
}, 1500)
}
return (
<AssistantChatForm
icon={<Box strokeWidth={1.5} size={24} className="text-foreground-muted" />}
value={value}
loading={loading}
disabled={loading}
onValueChange={(e) => setValueState(e.target.value)}
onSubmit={async (event) => {
event.preventDefault()
handleSubmit(event)
}}
/>
)
}Usage
import { AssistantChatForm } from 'ui-patterns/AssistantChat'<AssistantChatForm
icon={<Box strokeWidth={1.5} size={24} className="text-foreground-muted" />}
value={value}
loading={loading}
disabled={loading}
onValueChange={(e) => setValueState(e.target.value)}
onSubmit={async (event) => {
event.preventDefault()
handleSubmit(event)
}}
/>Commands
The Assistant Chat support a commands Popover that can be used to display a list of available commands.
It requires a useState and a ref though for it to work correctly. This is so that the input is still in focus, and the user can still interact with the Popover with the keyboard.
const [commandsOpen, setCommandsOpen] = useState<boolean>(false)
const textAreaRef = createRef<HTMLTextAreaElement>()
<AssistantCommandPopover
open={commandsOpen}
setOpen={setCommandsOpen}
textAreaRef={textAreaRef}
>
<AssistantChatForm
commandsOpen={commandsOpen}
setCommandsOpen={setCommandsOpen}
/>
</AssistantCommandPopover>Press / to open commands