Docs
Sender
Sender
A input component for chat.
Force as loading
Set to disabled
Installation
pnpm dlx shadcn@latest add https://ui.aoian.chat/r/sender
Usage
import {
Sender,
SenderButton,
SenderContent,
SenderOperation,
SenderOperationBar,
SenderOperationBarExtra,
SenderSearchToggle,
SenderTextArea,
} from "@/components/aoian-ui/sender/sender" <Sender>
<SenderContent>
<SenderTextArea />
<SenderOperation>
<SenderOperationBarExtra>
<SenderSearchToggle>
Search
</SenderSearchToggle>
</SenderOperationBarExtra>
<SenderOperationBar>
<SenderButton />
</SenderOperationBar>
</SenderOperation>
</SenderContent>
</Sender>Examples
Horizontal effect
For the horizontal effect, we will set the property vertical to false.
Submit type
Control the newline and submit mode through submitType.
Header
Display a custom header above the input area.
Custom actions
Add a custom button inside the SenderOperationBar.
Custom actions
Add a custom button inside the SenderOperationBar.
Props
Sender
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Input value |
loading | boolean | - | Whether it is loading |
readOnly | boolean | false | Whether to make the input box read-only |
disabled | boolean | false | Whether to disable |
vertical | boolean | true | Enable vertical display |
submitType | enter | shiftEnter | enter | Submit type |
onSubmit | (message: string) => void | - | Callback when click send button |
onAbort | () => void | - | Callback when click bort button |
onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | - | Callback when input value changes |
onFocus | React.FocusEventHandler<HTMLTextAreaElement> | - | Callback when input focus |
onBlur | React.FocusEventHandler<HTMLTextAreaElement> | - | Callback when input blur |
onKeyDown | React.KeyboardEventHandler<HTMLTextAreaElement> | - | key press event |
placeholder | string | - | input placeholder |