ViteHub is still experimental. Expect bugs and breaking changes.
Chat Message
Render one AI SDK UI message through Nuxt UI and customizable part slots.
AgentChatMessage composes Nuxt UI's UChatMessage with AgentMessageParts.
Preview
ChatMessageExample.vue
<script setup lang="ts">
import type { UIMessage } from "ai";
const message: UIMessage = {
id: "assistant-message",
role: "assistant",
parts: [{
type: "text",
text: "I checked the current branch. The focused tests pass and the worktree is clean.",
}],
};
</script>
<template>
<AgentChatMessage :message="message">
<template #actions>
<UButton aria-label="Copy message" icon="i-lucide-copy" color="neutral" variant="ghost" />
</template>
</AgentChatMessage>
</template>
Usage
<AgentChatMessage :message="message" :streaming="status === 'streaming'">
<template #actions="{ message }">
<UButton icon="i-lucide-copy" variant="ghost" @click="copy(message)" />
</template>
</AgentChatMessage>
Slots
| Slot | Scope | Purpose |
|---|---|---|
default | { message } | Replace the complete message body. |
header | { message } | Add files or message metadata above the body. |
leading | { message } | Replace the avatar or role marker. |
actions | { message } | Add copy, retry, feedback, or application actions. |
| Part slots | { part, index } | Forwarded to AgentMessageParts. |
Use the ui prop to pass Nuxt UI slot classes to the underlying UChatMessage.