ViteHub is still experimental. Expect bugs and breaking changes.
Chat Prompt
Compose Nuxt UI's prompt behavior with attachments and an AI SDK status-aware submit control.
AgentChatPrompt retains Nuxt UI's autoresize, IME handling, Enter behavior, Escape blur, error state, and submit button states. ViteHub adds an attachment row and one submit payload.
Preview
ChatPromptExample.vue
<script setup lang="ts">
import type { FileUIPart } from "ai";
import { ref } from "vue";
const input = ref("Check the failed invocation and explain the cause.");
const files = ref<FileUIPart[]>([
{
type: "file",
filename: "invocation.log",
mediaType: "text/plain",
url: "data:text/plain,Agent%20invocation%20failed",
},
]);
const submitted = ref("");
</script>
<template>
<div class="space-y-3">
<AgentChatPrompt
v-model="input"
v-model:files="files"
accept="text/plain"
placeholder="Ask the Agent…"
status="ready"
@submit="submitted = $event.text"
/>
<p v-if="submitted" class="text-xs text-muted">
Submitted: {{ submitted }}
</p>
</div>
</template>
<AgentChatPrompt
v-model="input"
v-model:files="files"
accept="image/*,.pdf"
:status
@submit="({ text, files }) => sendMessage({ text, files })"
@reload="reload"
@stop="stop"
/>
Events
| Event | Payload |
|---|---|
update:modelValue | Current prompt text. |
update:files | Current FileUIPart[]. |
submit | { text, files }. Empty text is accepted when files exist. |
reload | No payload. Connect it to the AI SDK reload() helper. |
stop | No payload. Connect it to the AI SDK stop() helper. |
Use #files, #actions, and #submit to replace each built-in section without rebuilding keyboard behavior. The composer, attachment picker, and status-aware submit action have default accessible names; pass aria-label to override the composer name.