聊天提示提交

ButtonGitHub
一个用于提交聊天提示并自动处理状态的按钮。

用法

ChatPromptSubmit 组件用于 ChatPrompt 组件内部，用于提交 prompt。它会自动处理不同的 status 值来控制聊天。

它继承自 Button 组件，因此你可以传递任何属性，例如 color、variant、size 等。

<template>
  <UChatPrompt>
    <UChatPromptSubmit />
  </UChatPrompt>
</template>
您也可以在 ChatPrompt 组件的 footer 插槽中使用它。

就绪

当其状态为 ready 时，使用 color、variant 和 icon 属性来自定义 Button。默认值为：

  • color="primary"
  • variant="solid"
  • icon="i-lucide-arrow-up"
<template>
  <UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
您可以在 app.config.ts 文件中，通过 ui.icons.arrowUp 键全局自定义此图标。
您可以在 vite.config.ts 文件中，通过 ui.icons.arrowUp 键全局自定义此图标。

已提交

当其状态为 submitted 时，使用 submitted-color、submitted-variant 和 submitted-icon 属性来自定义 Button。默认值为：

  • submittedColor="neutral"
  • submittedVariant="subtle"
  • submittedIcon="i-lucide-square"
当用户点击 Button 时，会触发 stop 事件。
<template>
  <UChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>
您可以在 app.config.ts 文件中，通过 ui.icons.stop 键全局自定义此图标。
您可以在 vite.config.ts 文件中，通过 ui.icons.stop 键全局自定义此图标。

流式传输

当其状态为 streaming 时，使用 streaming-color、streaming-variant 和 streaming-icon 属性来自定义 Button。默认值为：

  • streamingColor="neutral"
  • streamingVariant="subtle"
  • streamingIcon="i-lucide-square"
当用户点击 Button 时，会触发 stop 事件。
<template>
  <UChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
您可以在 app.config.ts 文件中，通过 ui.icons.stop 键全局自定义此图标。
您可以在 vite.config.ts 文件中，通过 ui.icons.stop 键全局自定义此图标。

错误

当其状态为 error 时，使用 error-color、error-variant 和 error-icon 属性来自定义 Button。默认值为：

  • errorColor="error"
  • errorVariant="soft"
  • errorIcon="i-lucide-rotate-ccw"
当用户点击 Button 时，会触发 reload 事件。
<template>
  <UChatPromptSubmit
    error-color="error"
    error-variant="soft"
    error-icon="i-lucide-rotate-ccw"
    status="error"
  />
</template>
您可以在 app.config.ts 文件中，通过 ui.icons.reload 键全局自定义此图标。
您可以在 vite.config.ts 文件中，通过 ui.icons.reload 键全局自定义此图标。

示例

这些聊天组件旨在与 Vercel AI SDK 的 AI SDK v5 配合使用。
请查看 GitHub 上的 AI 聊天模板源代码，了解实际示例。

在页面内

使用 AI SDK v5 的 Chat 类和 ChatPromptSubmit 组件，在页面中显示聊天 prompt。

通过传递 status 属性并监听 stop 和 reload 事件来控制聊天。

pages/[id].vue
<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('Chat error:', error)
  }
})

const handleSubmit = (e: Event) => {
  e.preventDefault()
  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" unwrap="p" />
          </template>
        </UChatMessages>
      </UContainer>
    </template>

    <template #footer>
      <UContainer>
        <UChatPrompt v-model="input" :error="chat.error" @submit="handleSubmit">
          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
        </UChatPrompt>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>

API

属性

属性默认值类型
status

'ready'

"error" | "streaming" | "submitted" | "ready"

图标

appConfig.ui.icons.arrowUp

字符串 | 对象

当状态为 ready 时，按钮中显示的图标。

color

'主要'

"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"

当状态为 ready 时，按钮的颜色。

variant

'solid'

"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

当状态为 ready 时，按钮的样式。

streamingIcon

appConfig.ui.icons.stop

字符串 | 对象

当状态为 streaming 时，按钮中显示的图标。

streamingColor

'neutral'

"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"

当状态为 streaming 时，按钮的颜色。

streamingVariant

'subtle'

"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

当状态为 streaming 时，按钮的样式。

submittedIcon

appConfig.ui.icons.stop

字符串 | 对象

当状态为 submitted 时，按钮中显示的图标。

submittedColor

'neutral'

"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"

当状态为 submitted 时，按钮的颜色。

submittedVariant

'subtle'

"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

当状态为 submitted 时，按钮的样式。

errorIcon

appConfig.ui.icons.reload

字符串 | 对象

当状态为 error 时，按钮中显示的图标。

errorColor

'error'

"primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"

当状态为 error 时，按钮的颜色。

errorVariant

'soft'

"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

当状态为 error 时，按钮的样式。

尺寸

'md'

"xs" | "sm" | "md" | "lg" | "xl"

label

string

ui

{ base?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

插槽

插槽类型
前置

{}

default

{}

尾部

{}

事件

事件类型
stop

[]

reload

[]

主题

app.config.ts
export default defineAppConfig({
  ui: {
    chatPromptSubmit: {
      slots: {
        base: ''
      }
    }
  }
})
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: {
        chatPromptSubmit: {
          slots: {
            base: ''
          }
        }
      }
    })
  ]
})

更新日志

61b60— 功能：允许传递组件而不是名称 (#4766)

de782— feat!: 升级 ai-sdk 到 v5 (#4698)

5cb65— 特性：导入 @nuxt/ui-pro 组件

ChatPrompt

用于 AI 聊天界面中提交 prompt 的增强型 Textarea。

ContentNavigation

用于组织页面链接的手风琴式导航组件。