チャットプロンプト送信

ボタンサイトマップ
自動ステータス処理付きチャットプロンプトを送信するためのボタン。

使用法

ChatPromptSubmitコンポーネントは、ChatPromptコンポーネント内でプロンプトを送信するために使用されます。このコンポーネントは、チャットを制御するために異なるstatus値を自動的に処理します。

Buttonコンポーネントを拡張するため、color、variant、sizeなどの任意のプロパティを渡すことができます。

<template>
  <UChatPrompt>
    <UChatPromptSubmit />
  </UChatPrompt>
</template>
ChatPromptコンポーネントのfooterスロット内でも使用できます。

Ready

ステータスがreadyの場合、color、variant、iconのプロップを使用してButtonをカスタマイズします。デフォルトは

  • color="primary"
  • variant="solid"
  • icon="i-lucide-arrow-up"
<template>
  <UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
このアイコンはapp.config.tsのui.icons.arrowUpキーでグローバルにカスタマイズできます。
このアイコンはvite.config.tsのui.icons.arrowUpキーでグローバルにカスタマイズできます。

提出済み

ステータスがsubmittedの場合、submitted-color、submitted-variant、submitted-iconのプロップを使用してButtonをカスタマイズします。デフォルトは

  • submittedColor="neutral"
  • submittedVariant="subtle"
  • submittedIcon="i-lucide-square"
stopイベントは、ユーザーがButtonをクリックすると発行されます。
<template>
  <UChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>
このアイコンはapp.config.tsのui.icons.stopキーでグローバルにカスタマイズできます。
このアイコンはvite.config.tsのui.icons.stopキーでグローバルにカスタマイズできます。

ストリーミング

ステータスがstreamingの場合、streaming-color、streaming-variant、streaming-iconのプロップを使用してButtonをカスタマイズします。デフォルトは

  • streamingColor="neutral"
  • streamingVariant="subtle"
  • streamingIcon="i-lucide-square"
stopイベントは、ユーザーがButtonをクリックすると発行されます。
<template>
  <UChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
このアイコンはapp.config.tsのui.icons.stopキーでグローバルにカスタマイズできます。
このアイコンはvite.config.tsのui.icons.stopキーでグローバルにカスタマイズできます。

Error

ステータスがerrorの場合、error-color、error-variant、error-iconのプロップを使用してButtonをカスタマイズします。デフォルトは

  • errorColor="error"
  • errorVariant="soft"
  • errorIcon="i-lucide-rotate-ccw"
reloadイベントは、ユーザーがButtonをクリックすると発行されます。
<template>
  <UChatPromptSubmit
    error-color="error"
    error-variant="soft"
    error-icon="i-lucide-rotate-ccw"
    status="error"
  />
</template>
このアイコンはapp.config.tsのui.icons.reloadキーでグローバルにカスタマイズできます。
このアイコンはvite.config.tsのui.icons.reloadキーでグローバルにカスタマイズできます。

例

インストール手順、サーバーのセットアップ、使用例については、Chatの概要ページをご覧ください。

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

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

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

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

loading
boolean

When true, the loading icon will be displayed.

loadingIcon
appConfig.ui.icons.loading
any

The icon when the loading prop is true.

disabled
boolean
name
string
label
string
size
'md'
"xs" | "sm" | "md" | "lg" | "xl"
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.

type
'button'
"reset" | "submit" | "button"

The type of the button when not a link.

activeColor
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
activeVariant
"link" | "outline" | "soft" | "subtle" | "ghost" | "solid"
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

ui
{ base?: SlotClass; } & { base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; }
このコンポーネントはすべてのネイティブ<button> HTML属性もサポートします。

スロット

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

Emits

Event Type
stop
[event: MouseEvent]
reload
[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 '@nuxt/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.