The ChatPromptSubmit component is used inside the ChatPrompt component to submit the prompt. It automatically handles the different status values to control the chat.
It extends the Button component, so you can pass any property such as color, variant, size, etc.
<template>
<UChatPrompt>
<UChatPromptSubmit />
</UChatPrompt>
</template>
footer slot of the ChatPrompt component.When its status is ready, use the color, variant and icon props to customize the Button. Defaults to:
color="primary"variant="solid"icon="i-lucide-arrow-up"<template>
<UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
When its status is submitted, use the submitted-color, submitted-variant and submitted-icon props to customize the Button. Defaults to:
submittedColor="neutral"submittedVariant="subtle"submittedIcon="i-lucide-square"stop event is emitted when the user clicks on the Button.<template>
<UChatPromptSubmit
submitted-color="neutral"
submitted-variant="subtle"
submitted-icon="i-lucide-square"
status="submitted"
/>
</template>
When its status is streaming, use the streaming-color, streaming-variant and streaming-icon props to customize the Button. Defaults to:
streamingColor="neutral"streamingVariant="subtle"streamingIcon="i-lucide-square"stop event is emitted when the user clicks on the Button.<template>
<UChatPromptSubmit
streaming-color="neutral"
streaming-variant="subtle"
streaming-icon="i-lucide-square"
status="streaming"
/>
</template>
When its status is error, use the error-color, error-variant and error-icon props to customize the Button. Defaults to:
errorColor="error"errorVariant="soft"errorIcon="i-lucide-rotate-ccw"reload event is emitted when the user clicks on the Button.<template>
<UChatPromptSubmit
error-color="error"
error-variant="soft"
error-icon="i-lucide-rotate-ccw"
status="error"
/>
</template>
Use the ChatPromptSubmit component with the Chat class from AI SDK v5 to display a chat prompt within a page.
Pass the status prop and listen to the stop and reload events to control the chat.
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@nuxt/ui/utils/ai'
const input = ref('')
const chat = new Chat({
onError(error) {
console.error(error)
}
})
function onSubmit() {
chat.sendMessage({ text: input.value })
input.value = ''
}
</script>
<template>
<UDashboardPanel>
<template #body>
<UContainer>
<UChatMessages :messages="chat.messages" :status="chat.status">
<template #content="{ message }">
<MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
</template>
</UChatMessages>
</UContainer>
</template>
<template #footer>
<UContainer class="pb-4 sm:pb-6">
<UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
<UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
</UChatPrompt>
</UContainer>
</template>
</UDashboardPanel>
</template>
| Prop | Default | Type |
|---|---|---|
as |
The element or component this component should render as when not a link. | |
status |
|
|
icon |
|
The icon displayed in the button when the status is |
color |
| The color of the button when the status is |
variant |
| The variant of the button when the status is |
streamingIcon |
The icon displayed in the button when the status is | |
streamingColor | The color of the button when the status is | |
streamingVariant | The variant of the button when the status is | |
submittedIcon |
|
The icon displayed in the button when the status is |
submittedColor |
| The color of the button when the status is |
submittedVariant |
| The variant of the button when the status is |
errorIcon |
|
The icon displayed in the button when the status is |
errorColor |
| The color of the button when the status is |
errorVariant |
| The variant of the button when the status is |
type |
|
The type of the button when not a link. |
to |
Route Location the link should navigate to when clicked on.
| |
target |
Where to display the linked URL, as the name for a browsing context. | |
trailingSlash |
An option to either add or remove trailing slashes in the | |
autofocus | ||
disabled |
| |
form |
| |
formaction |
| |
formenctype |
| |
formmethod |
| |
formnovalidate |
| |
formtarget |
| |
name |
| |
value |
| |
download |
| |
hreflang |
| |
media |
| |
ping |
| |
referrerpolicy |
| |
active |
Force the link to be active independent of the current route. | |
label |
| |
activeColor |
| |
activeVariant |
| |
size |
|
|
square |
Render the button with equal padding on all sides. | |
block |
Render the button full width. | |
loadingAuto |
Set loading state automatically based on the | |
avatar |
Display an avatar on the left side.
| |
leading |
When | |
leadingIcon |
Display an icon on the left side. | |
trailing |
When | |
trailingIcon |
Display an icon on the right side. | |
loading |
When | |
loadingIcon |
|
The icon when the |
ui |
|
| Slot | Type |
|---|---|
leading |
|
default |
|
trailing |
|
| Event | Type |
|---|---|
stop | |
reload |
|
export default defineAppConfig({
ui: {
chatPromptSubmit: {
slots: {
base: ''
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
chatPromptSubmit: {
slots: {
base: ''
}
}
}
})
]
})