Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/chat-prompt.json"
Usage
<script setup lang="ts">
import { ChatPrompt } from '@/components/ui/chat-prompt'
const input = ref('')
</script>
<template>
<ChatPrompt v-model="input" @submit="handleSubmit" />
</template>Examples
Default
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | string | '' | Current input value (v-model). |
placeholder | string | 'Type your message here...' | Textarea placeholder text. |
disabled | boolean | false | Disable the prompt. |
autofocus | boolean | false | Auto-focus the textarea on mount. |
error | Error | null | — | Error state. |
class | string | — | Additional CSS classes. |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Emitted when the input value changes. |
submit | Event | Emitted when Enter is pressed (without Shift) or the form is submitted. |
Slots
| Slot | Description |
|---|---|
header | Content rendered above the textarea. |
footer | Content rendered below the textarea, typically for action buttons. |
Expose
| Name | Type | Description |
|---|---|---|
textareaRef | Ref<HTMLTextAreaElement> | Reference to the underlying textarea element. |