ChatPromptSubmit 组件PRO

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

用法

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

它扩展了 Button 组件，因此您可以传递任何属性，例如 color、variant、size 等。

<template>
  <UChatPrompt>
    <UChatPromptSubmit />
  </UChatPrompt>
</template>
您还可以将其用于 ChatPrompt 组件的 footer 插槽内部。

就绪 (Ready)

当其状态为 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>
您可以在 app.config.ts 中通过 ui.icons.arrowUp 键全局自定义此图标。
您可以在 vite.config.ts 中通过 ui.icons.arrowUp 键全局自定义此图标。

已提交 (Submitted)

当其状态为 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>
您可以在 app.config.ts 中通过 ui.icons.stop 键全局自定义此图标。
您可以在 vite.config.ts 中通过 ui.icons.stop 键全局自定义此图标。

流式传输中 (Streaming)

当其状态为 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>
您可以在 app.config.ts 中通过 ui.icons.stop 键全局自定义此图标。
您可以在 vite.config.ts 中通过 ui.icons.stop 键全局自定义此图标。

错误 (Error)

当其状态为 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>
您可以在 app.config.ts 中通过 ui.icons.reload 键全局自定义此图标。
您可以在 vite.config.ts 中通过 ui.icons.reload 键全局自定义此图标。

示例

这些聊天组件旨在与 Vercel AI SDK 的 useChat 可组合函数一起使用。
请查看 GitHub 上的 AI Chat template 源代码，了解实际示例。

在页面内

在页面内使用 ChatPromptSubmit 组件与 useChat 可组合函数一起显示聊天提示。

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

pages/[id].vue
<script setup lang="ts">
import { useChat } from '@ai-sdk/vue'

const { messages, input, handleSubmit, reload, stop, status, error } = useChat()
</script>

<template>
  <UDashboardPanel>
    <template #body>
      <UContainer>
        <UChatMessages :messages="messages" :status="status">
          <template #content="{ message }">
            <MDC :value="message.content" :cache-key="message.id" unwrap="p" />
          </template>
        </UChatMessages>
      </UContainer>
    </template>

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

API

属性

属性默认值类型
status

'ready'

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

streamingColor

'neutral'

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

streamingVariant

'subtle'

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

submittedColor

'neutral'

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

submittedVariant

'subtle'

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

errorColor

'error'

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

errorVariant

'soft'

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

icon

appConfig.ui.icons.arrowUp

string

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

label

string

color

'primary'

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

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

size

'md'

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

variant

'solid'

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

当状态为 ready 时，按钮的变体。

streamingIcon

appConfig.ui.icons.stop

string

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

submittedIcon

appConfig.ui.icons.stop

string

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

errorIcon

appConfig.ui.icons.reload

string

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

ui

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

插槽

插槽类型
前置

{}

默认

{}

后置

{}

事件

事件类型
停止

[]

重新加载

[]

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        chatPromptSubmit: {
          slots: {
            base: ''
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        chatPromptSubmit: {
          slots: {
            base: ''
          }
        }
      }
    })
  ]
})

ChatPrompt

一个增强的 Textarea，用于在 AI 聊天界面中提交提示词。

Checkbox

一个用于切换选中和未选中状态的输入元素。