Vinicunca

ChatPromptSubmit

ButtonGitHub
A Button for submitting chat prompts with automatic status handling.

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.

<template>
  <PChatPrompt>
    <PChatPromptSubmit />
  </PChatPrompt>
</template>
You can also use it inside the footer slot of the ChatPrompt component.

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>
  <PChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.arrowUp key.
You can customize this icon globally in your vite.config.ts under ui.icons.arrowUp key.

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"
The stop event is emitted when the user clicks on the Button.
<template>
  <PChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.stop key.
You can customize this icon globally in your vite.config.ts under ui.icons.stop key.

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"
The stop event is emitted when the user clicks on the Button.
<template>
  <PChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.stop key.
You can customize this icon globally in your vite.config.ts under ui.icons.stop key.

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"
The reload event is emitted when the user clicks on the Button.
<template>
  <PChatPromptSubmit
    error-color="error"
    error-variant="soft"
    error-icon="i-lucide-rotate-ccw"
    status="error"
  />
</template>
You can customize this icon globally in your app.config.ts under ui.icons.reload key.
You can customize this icon globally in your vite.config.ts under ui.icons.reload key.

Examples

Check the Chat overview page for installation instructions, server setup and usage examples.

API

Props

Prop Default Type
as
'button'
any

The element or component this component should render as when not a link.

status
"submitted" | "streaming" | "ready" | "error"
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'
"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

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'
"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

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'
"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

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'
"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"

The variant of the button when the status is error.

autofocus
false | true | "true" | "false"
disabled
boolean
name
string
type
'button'
"button" | "submit" | "reset"

The type of the button when not a link.

label
string
activeColor
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
activeVariant
"solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
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

avatar
AvatarProps

Display an avatar on the left side.

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.

loading
boolean

When true, the loading icon will be displayed.

loadingIcon
appConfig.ui.icons.loading
any

The icon when the loading prop is true.

ui
{ base?: SlotClass; } & { base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; }
This component also supports all native <button> HTML attributes.

Slots

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

Emits

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

Theme

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 'pohon-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.