ChatPrompt 组件渲染一个 <form> 元素，并扩展了 Textarea 组件，因此您可以传递任何属性，例如 icon、placeholder、autofocus 等。
close 事件。使用 variant 属性更改提示的样式。默认为 outline。
<template>
<UChatPrompt variant="soft" />
</template>
将 ChatPrompt 组件与 AI SDK v5 的 Chat 类一起使用，以在页面中显示聊天提示。
当发生错误时，将 input 属性与 error 属性一起传递，以禁用文本区域。
<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>
您也可以将其用作聊天界面的起点。
<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>
| 属性 | 默认值 | 类型 |
|---|---|---|
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当 |
行数 | 1 | number |
autofocusDelay | number | |
自动调整大小 | true | boolean |
自动调整大小延迟 | number | |
最大行数 | 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> |
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: 'text-base/5'
},
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'
}
}
}
})
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: 'text-base/5'
},
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'
}
}
}
})
]
})