用法
ChatPrompt 组件渲染一个 <form> 元素并扩展了 Textarea 组件，因此您可以传递任何属性，例如 icon、placeholder、autofocus 等。
ChatPrompt 处理以下事件
- 当用户按下 ↵ 或点击提交按钮时，表单会提交。
- 当按下 Esc 时，文本区域会失去焦点并发出
close事件。
变体
使用 variant 属性更改提示的样式。默认为 outline。
<template>
<UChatPrompt variant="soft" />
</template>
示例
在页面内
将 ChatPrompt 组件与 AI SDK v5 中的 Chat 类一起使用，以在页面中显示聊天提示。
当发生错误时，传入 input 属性和 error 属性以禁用文本区域。
pages/[id].vue
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
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 }">
<template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
<MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
<p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
</template>
</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>
您也可以将其用作聊天界面的起点。
pages/index.vue
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
const input = ref('')
const chat = new Chat()
async function onSubmit() {
chat.sendMessage({ text: input.value })
// Navigate to chat page after first message
if (chat.messages.length === 1) {
await navigateTo('/chat')
}
}
</script>
<template>
<UDashboardPanel>
<template #body>
<UContainer>
<h1>How can I help you today?</h1>
<UChatPrompt v-model="input" @submit="onSubmit">
<UChatPromptSubmit :status="chat.status" />
</UChatPrompt>
</UContainer>
</template>
</UDashboardPanel>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'form' | any此组件应渲染为的元素或组件。 |
placeholder | t('chatPrompt.placeholder') | string文本区域的占位符文本。 |
variant | 'outline' | "outline" | "soft" | "subtle" | "naked" |
error | 错误
| |
autofocus | true | boolean |
disabled | boolean | |
图标 | any根据 | |
avatar | AvatarProps在左侧显示头像。
| |
loading | boolean当为 | |
loadingIcon | appConfig.ui.icons.loading | any当 |
rows | 1 | number |
autofocusDelay | number | |
autoresize | true | boolean |
autoresizeDelay | number | |
maxrows | number | |
modelValue | '' | string |
ui | { root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; base?: ClassNameValue; } & { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; }
|
插槽
| 插槽 | 类型 |
|---|---|
页头 | {} |
页脚 | {} |
前置 | { ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
default | { ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
尾部 | { ui: { root: (props?: Record<string, any> | undefined) => string; base: (props?: Record<string, any> | undefined) => string; leading: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailing: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; } |
事件
| 事件 | 类型 |
|---|---|
close | [事件: Event] |
submit | [事件: Event] |
update:modelValue | [value: string] |
可访问属性
通过模板引用访问组件时，您可以使用以下内容：
| 名称 | 类型 |
|---|---|
textareaRef | Ref<HTMLTextAreaElement | null> |
主题
app.config.ts
export default defineAppConfig({
ui: {
chatPrompt: {
slots: {
root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
header: 'flex items-center gap-1.5',
body: 'items-start',
footer: 'flex items-center justify-between gap-1.5',
base: ''
},
variants: {
variant: {
outline: {
root: 'bg-default/75 ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
},
naked: {
root: ''
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
chatPrompt: {
slots: {
root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
header: 'flex items-center gap-1.5',
body: 'items-start',
footer: 'flex items-center justify-between gap-1.5',
base: ''
},
variants: {
variant: {
outline: {
root: 'bg-default/75 ring ring-default'
},
soft: {
root: 'bg-elevated/50'
},
subtle: {
root: 'bg-elevated/50 ring ring-default'
},
naked: {
root: ''
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})