chatpromptsoumission

Utilisation

Le composant ChatPromptSubmit est utilisé à l'intérieur du composant ChatPrompt pour soumettre l'invite. Il gère automatiquement les différentes valeurs status pour contrôler le chat.

Il étend le composant Button, de sorte que vous pouvez passer n'importe quelle propriété telle que color, variant, size, etc.

<template>
  <UChatPrompt>
    <UChatPromptSubmit />
  </UChatPrompt>
</template>

prêt

Lorsque son statut est ready, utilisez les accessoires color, variant et icon pour personnaliser le bouton.

• xxcolor="primary"xx{lang="ts-type"}
• xvariant="solid"xx{lang="ts-type"}
• xicon="i-lucide-arrow-up"x{lang="ts-type"}

<template>
  <UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>

Répondre

Lorsque son statut est submitted, utilisez les accessoires submitted-color, submitted-variant et submitted-icon pour personnaliser le bouton.

• xsubmittedColor="neutral"xx{lang="ts-type"}
• xxsubmittedVariant="subtle"xxxph0777x
• xxsubmittedIcon="i-lucide-square"xx{lang="ts-type"}

<template>
  <UChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>

Streaming

Lorsque son statut est streaming, utilisez les accessoires streaming-color, streaming-variant et streaming-icon pour personnaliser le bouton.

• xstreamingColor="neutral"x{lang="ts-type"}
• xstreamingVariant="subtle"
• xstreamingIcon="i-lucide-square"x{lang="ts-type"}

<template>
  <UChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>

erreur

Lorsque son statut est error, utilisez les accessoires error-color, error-variant et error-icon pour personnaliser le bouton.

• errorColor="error"x{lang="ts-type"}
• xerrorVariant="soft"x{lang="ts-type"}
• xerrorIcon="i-lucide-rotate-ccw"x{lang="ts-type"}

<template>
  <UChatPromptSubmit
    error-color="error"
    error-variant="soft"
    error-icon="i-lucide-rotate-ccw"
    status="error"
  />
</template>

Exemples

API

Props

Slots

Emits

Thème

export default defineAppConfig({
  ui: {
    chatPromptSubmit: {
      slots: {
        base: ''
      }
    }
  }
})

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