ChatPromptSubmit

ButtonGitLab
Um Button para enviar prompts de chat com tratamento automático de status.

Uso

O componente ChatPromptSubmit é usado dentro do componente ChatPrompt para enviar o prompt. Ele trata automaticamente os diferentes valores de status para controlar o chat.

Ele estende o componente Button, então você pode passar qualquer propriedade como color, variant, size, etc.

<template>
  <NChatPrompt>
    <NChatPromptSubmit />
  </NChatPrompt>
</template>
Você também pode usá-lo dentro do slot footer do componente ChatPrompt.

Pronto

Quando o status dele é ready, use as props color, variant e icon para personalizar o Button. O padrão é:

  • color="primary"
  • variant="solid"
  • icon="i-lucide-arrow-up"
<template>
  <NChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.arrowUp.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.arrowUp.

Enviado

Quando o status dele é submitted, use as props submitted-color, submitted-variant e submitted-icon para personalizar o Button. O padrão é:

  • submittedColor="neutral"
  • submittedVariant="subtle"
  • submittedIcon="i-lucide-square"
O evento stop é emitido quando o usuário clica no Button.
<template>
  <NChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.stop.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.stop.

Streaming

Quando o status dele é streaming, use as props streaming-color, streaming-variant e streaming-icon para personalizar o Button. O padrão é:

  • streamingColor="neutral"
  • streamingVariant="subtle"
  • streamingIcon="i-lucide-square"
O evento stop é emitido quando o usuário clica no Button.
<template>
  <NChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.stop.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.stop.

Erro

Quando o status dele é error, use as props error-color, error-variant e error-icon para personalizar o Button. O padrão é:

  • errorColor="error"
  • errorVariant="soft"
  • errorIcon="i-lucide-rotate-ccw"
O evento reload é emitido quando o usuário clica no Button.
<template>
  <NChatPromptSubmit
    error-color="error"
    error-variant="soft"
    error-icon="i-lucide-rotate-ccw"
    status="error"
  />
</template>
Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.reload.
Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.reload.

Exemplos

Confira a página de visão geral do Chat para instruções de instalação, configuração do servidor e exemplos de uso.

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"
iconappConfig.ui.icons.arrowUpany

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

color'primary' "error" | "primary" | "secondary" | "accent" | "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.

streamingIconappConfig.ui.icons.stopany

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

streamingColor'neutral' "error" | "primary" | "secondary" | "accent" | "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.

submittedIconappConfig.ui.icons.stopany

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

submittedColor'neutral' "error" | "primary" | "secondary" | "accent" | "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.

errorIconappConfig.ui.icons.reloadany

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

errorColor'error' "error" | "primary" | "secondary" | "accent" | "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.

loadingboolean

When true, the loading icon will be displayed.

loadingIconappConfig.ui.icons.loadingany

The icon when the loading prop is true.

disabledboolean
name string
label string
size'md' "xs" | "sm" | "md" | "lg" | "xl"
leadingboolean

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

leadingIconany

Display an icon on the left side.

trailingboolean

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

trailingIconany

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" | "accent" | "success" | "info" | "warning" | "neutral"
activeVariant "link" | "outline" | "soft" | "subtle" | "ghost" | "solid"
squareboolean

Render the button with equal padding on all sides.

blockboolean

Render the button full width.

loadingAutoboolean

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; }
Este componente também suporta todos os atributos HTML nativos de <button>.

Slots

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

Emits

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

Tema

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 '@nitro/ui/vite'

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

Changelog

No recent changes

ChatPrompt

Um Textarea aprimorado para enviar prompts em interfaces de chat de IA.

ChatReasoning

Exiba um processo de raciocínio ou pensamento da IA de forma recolhível.