ChatPromptSubmit 组件用于 ChatPrompt 组件内部，用于提交提示词。它会自动处理不同的 status 值来控制聊天。
它继承自 Button 组件，因此你可以传递任何属性，例如 color、variant、size 等。
<template>
<UChatPrompt>
<UChatPromptSubmit />
</UChatPrompt>
</template>
ChatPrompt 组件的 footer 插槽中使用它。当其状态为 ready 时，使用 color、variant 和 icon 属性来自定义按钮。默认为
color="primary"variant="solid"icon="i-lucide-arrow-up"<template>
<UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
当其状态为 submitted 时，使用 submitted-color、submitted-variant 和 submitted-icon 属性来自定义按钮。默认为
submittedColor="neutral"submittedVariant="subtle"submittedIcon="i-lucide-square"stop 事件。<template>
<UChatPromptSubmit
submitted-color="neutral"
submitted-variant="subtle"
submitted-icon="i-lucide-square"
status="submitted"
/>
</template>
当其状态为 streaming 时，使用 streaming-color、streaming-variant 和 streaming-icon 属性来自定义按钮。默认为
streamingColor="neutral"streamingVariant="subtle"streamingIcon="i-lucide-square"stop 事件。<template>
<UChatPromptSubmit
streaming-color="neutral"
streaming-variant="subtle"
streaming-icon="i-lucide-square"
status="streaming"
/>
</template>
当其状态为 error 时，使用 error-color、error-variant 和 error-icon 属性来自定义按钮。默认为
errorColor="error"errorVariant="soft"errorIcon="i-lucide-rotate-ccw"reload 事件。<template>
<UChatPromptSubmit
error-color="error"
error-variant="soft"
error-icon="i-lucide-rotate-ccw"
status="error"
/>
</template>
将 ChatPromptSubmit 组件与 AI SDK v5 的 Chat 类一起使用，以在页面中显示聊天提示。
传递 status 属性并监听 stop 和 reload 事件来控制聊天。
<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>
| 属性 | 默认值 | 类型 |
|---|---|---|
as | 'button' | any此组件在不是链接时应呈现的元素或组件。 |
status | 'ready' | "error" | "submitted" | "streaming" | "ready" |
图标 | appConfig.ui.icons.arrowUp | any当状态为 |
color | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"当状态为 |
variant | 'solid' | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"当状态为 |
streamingIcon | appConfig.ui.icons.stop | any当状态为 |
streamingColor | 'neutral' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"当状态为 |
streamingVariant | 'subtle' | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"当状态为 |
submittedIcon | appConfig.ui.icons.stop | any当状态为 |
submittedColor | 'neutral' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"当状态为 |
submittedVariant | 'subtle' | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"当状态为 |
errorIcon | appConfig.ui.icons.reload | any当状态为 |
errorColor | 'error' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"当状态为 |
errorVariant | 'soft' | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"当状态为 |
type | 'button' | "reset" | "submit" | "button"当不是链接时，按钮的类型。 |
autofocus | false | true | "true" | "false" | |
disabled | boolean | |
name | string | |
label | string | |
activeColor | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | |
activeVariant | "solid" | "outline" | "soft" | "subtle" | "ghost" | "link" | |
尺寸 | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
正方形 | boolean以四边等距内边距渲染按钮。 | |
block | boolean渲染全宽按钮。 | |
loadingAuto | boolean根据 | |
avatar | AvatarProps在左侧显示头像。
| |
前置 | boolean当为 | |
leadingIcon | any在左侧显示图标。 | |
尾部 | boolean当为 | |
trailingIcon | any在右侧显示图标。 | |
loading | boolean当为 | |
loadingIcon | appConfig.ui.icons.loading | any当 |
ui | { base?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }
|
| 插槽 | 类型 |
|---|---|
前置 | { ui: object; } |
default | { ui: object; } |
尾部 | { ui: object; } |
| 事件 | 类型 |
|---|---|
stop | [event: MouseEvent] |
reload | [event: MouseEvent] |
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: ''
}
}
}
})
]
})