联系我们

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

用法

在ChatNot组件中使用ChatNotSubmit组件来提交提示。它自动处理不同的status值以控制聊天。

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

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

Ready

当其状态为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"
stop事件在用户单击Button时发出。
<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. Button为：

  • streamingColor="neutral"
  • streamingVariant="subtle"
  • streamingIcon="i-lucide-square"
stop事件在用户单击Button时发出。
<template>
  <UChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
你可以在你的ui.icons.stop键下的app.config.ts中全局自定义这个图标。
你可以在你的vite.config.ts中的ui.icons.stop键下全局自定义这个图标。

Error

当其状态为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键下全局自定义这个图标。

示例

查看Chat概述页面以获取安装说明、服务器设置和使用示例。

API

Props

Prop Default Type
as
'button'
any

The element or component this component should render as when not a link.

status
'ready'
"error" | "ready" | "submitted" | "streaming"
icon
appConfig.ui.icons.arrowUp
any

The icon displayed in the button when the status is ready. Set to false to hide the icon.

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

The color of the button when the status is ready.

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

The variant of the button when the status is ready.

streamingIcon
appConfig.ui.icons.stop
any

The icon displayed in the button when the status is streaming.

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

The color of the button when the status is streaming.

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

The variant of the button when the status is streaming.

submittedIcon
appConfig.ui.icons.stop
any

The icon displayed in the button when the status is submitted.

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

The color of the button when the status is submitted.

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

The variant of the button when the status is submitted.

errorIcon
appConfig.ui.icons.reload
any

The icon displayed in the button when the status is error.

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

The color of the button when the status is error.

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

The variant of the button when the status is error.

autofocus
false | true | "true" | "false"
avatar
AvatarProps

Display an avatar on the left side.

loading
boolean

When true, the loading icon will be displayed.

loadingIcon
appConfig.ui.icons.loading
any

The icon when the loading prop is true.

disabled
boolean
name
string
label
string
size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
leading
boolean

When true, the icon will be displayed on the left side.

leadingIcon
any

Display an icon on the left side.

trailing
boolean

When true, the icon will be displayed on the right side.

trailingIcon
any

Display an icon on the right side.

type
'button'
"reset" | "submit" | "button"

The type of the button when not a link.

activeColor
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
activeVariant
"link" | "outline" | "soft" | "subtle" | "ghost" | "solid"
square
boolean

Render the button with equal padding on all sides.

block
boolean

Render the button full width.

loadingAuto
boolean

Set loading state automatically based on the @click promise state

ui
{ base?: SlotClass; } & { base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; }
此组件还支持所有原生<button> HTML属性。

Slots

Slot Type
leading
{ ui: object; }
default
{ ui: object; }
trailing
{ ui: object; }

Emits

Event Type
stop
[event: MouseEvent]
reload
[event: MouseEvent]

Theme

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: ''
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

ChatPrompt

An enhanced Textarea for submitting prompts in AI chat interfaces.

ChatReasoning

Display a collapsible AI reasoning or thinking process.