聊天提示提交

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

用法

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"

color

variant

图标

<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 属性来自定义按钮。默认为

submittedColor="neutral"
submittedVariant="subtle"
submittedIcon="i-lucide-square"

当用户点击按钮时，会触发 stop 事件。

submittedColor

submittedVariant

submittedIcon

<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 属性来自定义按钮。默认为

streamingColor="neutral"
streamingVariant="subtle"
streamingIcon="i-lucide-square"

当用户点击按钮时，会触发 stop 事件。

streamingColor

streamingVariant

streamingIcon

<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 属性来自定义按钮。默认为

errorColor="error"
errorVariant="soft"
errorIcon="i-lucide-rotate-ccw"

当用户点击按钮时，会触发 reload 事件。

errorColor

errorVariant

errorIcon

<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 聊天模板源代码，了解实际示例。

在页面内

将 ChatPromptSubmit 组件与 AI SDK v5 中的 Chat 类一起使用，以在页面中显示聊天提示。

传递 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(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>

API

属性

属性	默认值	类型
`status`	`'ready'`	`"error" \| "submitted" \| "streaming" \| "ready"`
`图标`	`appConfig.ui.icons.arrowUp`	`字符串 \| 对象` 当状态为 `ready` 时，按钮中显示的图标。
`color`	`'主要'`	当状态为 `ready` 时，按钮的颜色。
`variant`	`'solid'`	当状态为 `ready` 时，按钮的样式。
`streamingIcon`		`字符串 \| 对象` 当状态为 `streaming` 时，按钮中显示的图标。
`streamingColor`		当状态为 `streaming` 时，按钮的颜色。
`streamingVariant`		当状态为 `streaming` 时，按钮的样式。
`submittedIcon`	`appConfig.ui.icons.stop`	`字符串 \| 对象` 当状态为 `submitted` 时，按钮中显示的图标。
`submittedColor`	`'neutral'`	当状态为 `submitted` 时，按钮的颜色。
`submittedVariant`	`'subtle'`	当状态为 `submitted` 时，按钮的样式。
`errorIcon`	`appConfig.ui.icons.reload`	`字符串 \| 对象` 当状态为 `error` 时，按钮中显示的图标。
`errorColor`	`'error'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"` 当状态为 `error` 时，按钮的颜色。
`errorVariant`	`'soft'`	`"solid" \| "outline" \| "soft" \| "subtle" \| "ghost" \| "link"` 当状态为 `error` 时，按钮的样式。
`label`		`string`
`尺寸`	`'md'`	`"md" \| "xs \| "sm" \| "lg" \| "xl"`
`ui`		`{ base?: ClassNameValue; } & { base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }`

插槽

插槽	类型
`前置`	`{ ui: object; }`
`default`	`{ ui: object; }`
`尾部`	`{ ui: object; }`

事件

事件	类型
`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 聊天界面中提交提示。

ContentNavigation

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