ChatPromptSubmit

Bearbeiten

Die ChatPromptSubmit-Komponente wird in der Komponente ChatPrompt verwendet, um die Eingabeaufforderung zu senden.

Es erweitert die Komponente Button, so dass Sie jede Eigenschaft wie color, variant, size usw. übergeben können.

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

ready ist verfügbar

Wenn der Status ready ist, verwenden Sie die Props color, variant und icon, um die Schaltfläche anzupassen.

• color="primary" (nicht vorhanden)
• variant="solid" (nicht vorhanden)
• icon="i-lucide-arrow-up" (nicht vorhanden)

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

Eingereicht

Wenn der Status submitted ist, verwenden Sie die Props submitted-color, submitted-variant und submitted-icon, um die Schaltfläche anzupassen.

• submittedColor="neutral" (nicht vorhanden)
• submittedVariant="subtle"x077xx07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x07x007x07x07x007x07x007x07x007x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
• submittedIcon="i-lucide-square" (nicht vorhanden)

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

streaming (englisch)

Wenn der Status streaming ist, verwenden Sie die Props streaming-color, streaming-variant und streaming-icon, um die Schaltfläche anzupassen.

• streamingColor="neutral" (nicht)
• streamingVariant="subtle" (nicht)
• streamingIcon="i-lucide-square" (nicht)

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

Fehler

Wenn der Status error ist, verwenden Sie die Props error-color, error-variant und error-icon, um die Schaltfläche anzupassen.

• errorColor="error" (englisch)
• errorVariant="soft" (englisch)
• errorIcon="i-lucide-rotate-ccw" (englisch)

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

Beispiele

API

Props (englisch)

Slots (englisch)

Emits Bearbeiten

Theme Bearbeiten

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 (deutsch)