ChatPromptSubmit

Usage

The ChatPromptSubmit component is used inside the ChatPrompt component to submit the prompt. It automatically handles the different status values to control the chat.

It extends the Button component, so you can pass any property such as color, variant, size, etc.

Ready

When its status is ready, use the color, variant and icon props to customize the Button. Defaults to:

• color="primary"
• variant="solid"
• icon="i-lucide-arrow-up"

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

Submitted

When its status is submitted, use the submitted-color, submitted-variant and submitted-icon props to customize the Button. Defaults to:

• submittedColor="neutral"
• submittedVariant="subtle"
• submittedIcon="i-lucide-square"

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

Streaming

When its status is streaming, use the streaming-color, streaming-variant and streaming-icon props to customize the Button. Defaults to:

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

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

Error

When its status is error, use the error-color, error-variant and error-icon props to customize the Button. Defaults to:

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

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

Examples

Within a page

Use the ChatPromptSubmit component with the Chat class from AI SDK v5 to display a chat prompt within a page.

Pass the status prop and listen to the stop and reload events to control the chat.

<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@nuxt/ui/utils/ai'

const input = ref('')

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

function onSubmit() {
  chat.sendMessage({ text: input.value })

  input.value = ''
}
</script>

<template>
  <UDashboardPanel>
    <template #body>
      <UContainer>
        <UChatMessages :messages="chat.messages" :status="chat.status">
          <template #content="{ message }">
            <MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
          </template>
        </UChatMessages>
      </UContainer>
    </template>

    <template #footer>
      <UContainer class="pb-4 sm:pb-6">
        <UChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
          <UChatPromptSubmit :status="chat.status" @stop="chat.stop" @reload="chat.regenerate" />
        </UChatPrompt>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>

API

Props

Slots

Emits

Theme

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