mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 15:19:08 +03:00
Ivan Vasilov
09a62662d8
* Switch all top-level imports for ui-patterns components to use specific components when importing. * Remove the @ui-patterns shorthand since it works exactly the same without the @. * More import fixes. * Fix the ui-patterns tests.
53 lines
1.3 KiB
Plaintext
53 lines
1.3 KiB
Plaintext
---
|
|
title: Assistant Chat
|
|
description: Bespoke Assistant chat text area, with support for a commands Popover.
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview name="assistant-chat-demo" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { AssistantChatForm } from 'ui-patterns/AssistantChat'
|
|
```
|
|
|
|
```tsx
|
|
<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.
|
|
|
|
```tsx
|
|
const [commandsOpen, setCommandsOpen] = useState<boolean>(false)
|
|
const textAreaRef = createRef<HTMLTextAreaElement>()
|
|
|
|
<AssistantCommandPopover
|
|
open={commandsOpen}
|
|
setOpen={setCommandsOpen}
|
|
textAreaRef={textAreaRef}
|
|
>
|
|
<AssistantChatForm
|
|
commandsOpen={commandsOpen}
|
|
setCommandsOpen={setCommandsOpen}
|
|
/>
|
|
</AssistantCommandPopover>
|
|
```
|
|
|
|
<ComponentPreview name="assistant-chat-commands" />
|