ChatPromptVerzenden

KnopGitHub
Een knop voor het verzenden van chatprompts met automatische statusafhandeling.

Gebruik

De ChatPromptSubmit-component wordt gebruikt in de ChatPrompt -component om de prompt in te dienen. Het verwerkt automatisch de verschillende status-waarden om de chat te besturen.

Het breidt de Button component uit, zodat u elke eigenschap zoals color, variant, size, enz. Kunt doorgeven.

<template>
  <UChatPrompt>
    <UChatPromptSubmit />
  </UChatPrompt>
</template>
U kunt het ook gebruiken in de footer-sleuf van de ChatPrompt component.

Klaar

Als de status ready is, gebruikt u de color, variant en icon rekwisieten om de knop aan te passen. Standaard:

  • color="primary"
  • variant="solid"
  • icon="i-lucide-arrow-up"
<template>
  <UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
U kunt dit pictogram globaal aanpassen in uw app.config.ts onder ui.icons.arrowUp-sleutel.
U kunt dit pictogram globaal aanpassen in uw vite.config.ts onder ui.icons.arrowUp-sleutel.

Ingezonden

Als de status submitted is, gebruikt u de submitted-color, submitted-variant en submitted-icon rekwisieten om de knop aan te passen. Standaard:

  • submittedColor="neutral"
  • submittedVariant="subtle"
  • submittedIcon="i-lucide-square"
De stop gebeurtenis wordt uitgezonden wanneer de gebruiker op de knop klikt.
<template>
  <UChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>
U kunt dit pictogram globaal aanpassen in uw app.config.ts onder ui.icons.stop-sleutel.
U kunt dit pictogram globaal aanpassen in uw vite.config.ts onder ui.icons.stop-sleutel.

Streamen

Als de status streaming is, gebruikt u de streaming-color, streaming-variant en streaming-icon rekwisieten om de knop aan te passen. Standaard:

  • streamingColor="neutral"
  • streamingVariant="subtle"
  • streamingIcon="i-lucide-square"
De stop-gebeurtenis wordt uitgezonden wanneer de gebruiker op de knop klikt.
<template>
  <UChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
U kunt dit pictogram globaal aanpassen in uw app.config.ts onder ui.icons.stop-sleutel.
U kunt dit pictogram globaal aanpassen in uw vite.config.ts onder ui.icons.stop-sleutel.

Fout

Als de status error is, gebruikt u de error-color, error-variant en error-icon rekwisieten om de knop aan te passen. Standaard:

  • errorColor="error"
  • errorVariant="soft"
  • errorIcon="i-lucide-rotate-ccw"
De reload-gebeurtenis wordt uitgezonden wanneer de gebruiker op de knop klikt.
<template>
  <UChatPromptSubmit
    error-color="error"
    error-variant="soft"
    error-icon="i-lucide-rotate-ccw"
    status="error"
  />
</template>
U kunt dit pictogram globaal aanpassen in uw app.config.ts onder ui.icons.reload-sleutel.
U kunt dit pictogram globaal aanpassen in uw vite.config.ts onder ui.icons.reload-sleutel.

Voorbeelden

Bekijk de Chat overzichtspagina voor installatie-instructies, serverinstellingen en gebruiksvoorbeelden.

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; }
Dit onderdeel ondersteunt ook alle native <button> HTML-kenmerken.

Slots

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

Uitzendt

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

Thema

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.