ChatPromptSubmit (ChatPromptSubmit)

단추Github (GitHub)
자동 상태 처리를 사용하여 채팅 프롬프트를 제출하는 단추입니다.

Usage

ChatPromptSubmit 구성 요소는 ChatPrompt 구성 요소 내에서 프롬프트를 제출하는 데 사용됩니다. 대화를 제어하기 위해 다른 status 값을 자동으로 처리합니다.

Button 구성 요소를 확장하므로 color, variant, size 등과 같은 속성을 전달할 수 있습니다.

<template>
  <UChatPrompt>
    <UChatPromptSubmit />
  </UChatPrompt>
</template>
또한 ChatPrompt 구성 요소의 footer 슬롯 내에서 사용할 수 있습니다.

Ready 지원

상태가 ready인 경우 color, variant 및 icon props를 사용하여 Button을 사용자 정의합니다. 기본값은 다음과 같습니다.

  • color="primary"
  • variant="solid"
  • icon="i-lucide-arrow-up"의 발음을 - icon="i-lucide-arrow-up"
<template>
  <UChatPromptSubmit color="primary" variant="solid" icon="i-lucide-arrow-up" />
</template>
ui.icons.arrowUp 키 아래의 app.config.ts 내에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.
ui.icons.arrowUp 키 아래의 vite.config.ts 내에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

Submitted 제출

상태가 submitted인 경우 submitted-color, submitted-variant 및 submitted-icon props를 사용하여 Button을 사용자 정의합니다. 기본값은 다음과 같습니다.

  • submittedColor="neutral" (- submittedColor="neutral")
  • submittedVariant="subtle" (- submittedVariant="subtle")
  • submittedIcon="i-lucide-square"의 발음을 - submittedIcon="i-lucide-square"
stop 이벤트는 사용자가 Button을 클릭할 때 발생합니다.
<template>
  <UChatPromptSubmit
    submitted-color="neutral"
    submitted-variant="subtle"
    submitted-icon="i-lucide-square"
    status="submitted"
  />
</template>
ui.icons.stop 키 아래의 app.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.
ui.icons.stop 키 아래의 vite.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

Streaming 파일

상태가 streaming인 경우 streaming-color, streaming-variant 및 streaming-icon 소품을 사용하여 Button을 사용자 정의합니다. 기본값은 다음과 같습니다.

  • streamingColor="neutral"
  • streamingVariant="subtle" - xph120{lang="ts-type"}
  • streamingIcon="i-lucide-square" (- streamingIcon="i-lucide-square")
stop 이벤트는 사용자가 Button을 클릭할 때 발생합니다.
<template>
  <UChatPromptSubmit
    streaming-color="neutral"
    streaming-variant="subtle"
    streaming-icon="i-lucide-square"
    status="streaming"
  />
</template>
ui.icons.stop 키 아래의 app.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.
ui.icons.stop 키 아래의 vite.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

Error 오류

상태가 error인 경우 error-color, error-variant 및 error-icon props를 사용하여 Button을 사용자 정의합니다. 기본값은 다음과 같습니다.

  • errorColor="error" (- errorColor="error")
  • errorVariant="soft" - {lang="ts-type"} (- errorVariant="soft") / - 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>
ui.icons.reload 키 아래의 app.config.ts에서 이 아이콘을 전역적으로 사용자 지정할 수 있습니다.
ui.icons.reload 키 아래의 vite.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

예제

Chat 개요 페이지에서 설치 지침, 서버 설정 및 사용법 예를 확인하십시오.

API 파일

Props (### 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 속성을 지원합니다.

Slots

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

Emits

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

테마

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: ''
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

ChatPrompt

An enhanced Textarea for submitting prompts in AI chat interfaces.

ChatReasoning

Display a collapsible AI reasoning or thinking process.