v2.4.1

ChatPromptSubmit

A chat prompt submission button with automatic status handling.
Button
GitHub
Nuxt UI

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, size, etc.

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

Ready

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

  • color="primary"
  • icon="ArrowTopLIcon"
<template>
  <B24ChatPromptSubmit color="air-primary" />
</template>

Submitted

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

  • submittedColor="air-secondary-no-accent"
  • submittedIcon="StopLIcon"
The stop event is emitted when the user clicks on the Button.
<template>
  <B24ChatPromptSubmit submitted-color="air-secondary-no-accent" status="submitted" />
</template>

Streaming

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

  • streamingColor="air-secondary-accent-2"
  • streamingIcon="StopLIcon"
The stop event is emitted when the user clicks on the Button.
<template>
  <B24ChatPromptSubmit streaming-color="air-secondary-accent-2" status="streaming" />
</template>

Error

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

  • errorColor="air-primary-alert"
  • errorIcon="RefreshIcon"
The reload event is emitted when the user clicks on the Button.
<template>
  <B24ChatPromptSubmit error-color="air-primary-alert" status="error" />
</template>

Examples

Check the ChatMessages documentation for server API setup and installation instructions.

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.

pages/[id].vue
<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')

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

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

  input.value = ''
}
</script>

<template>
  <B24Card>
    <B24Container>
      <B24ChatMessages :messages="chat.messages" :status="chat.status">
        <template #content="{ message }">
          <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
            <MDC v-if="part.type === 'text' && message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" class="*:first:mt-0 *:last:mb-0" />
            <p v-else-if="part.type === 'text' && message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
          </template>
        </template>
      </B24ChatMessages>
    </B24Container>

    <template #footer>
      <B24Container class="pb-4 sm:pb-6">
        <B24ChatPrompt v-model="input" :error="chat.error" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24Card>
</template>

API

Props

Prop Default Type
as'button'any

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

status'ready' "error" | "submitted" | "streaming" | "ready"
iconicons.imSendIconComponent

The icon displayed in the button when the status is ready.

color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"

The color of the button when the status is ready.

streamingIconicons.stopIconComponent

The icon displayed in the button when the status is streaming.

streamingColor'air-secondary-accent-2'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"

The color of the button when the status is streaming.

submittedIconicons.stopIconComponent

The icon displayed in the button when the status is submitted.

submittedColor'air-secondary-no-accent'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"

The color of the button when the status is submitted.

errorIconicons.reloadIconComponent

The icon displayed in the button when the status is error.

errorColor'air-primary-alert'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"

The color of the button when the status is error.

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

The type of the button when not a link.

avatar AvatarProps

Display an avatar on the left side.

loadingboolean

When true, the loading icon will be displayed.

autofocus false | true | "true" | "false"
disabledboolean
name string
isActionboolean

When true, uses special underlined styling.

label string
activeColor"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost" | "link"
size'md' "md" | "xs" | "sm" | "lg" | "xl" | "xss"
roundedfalseboolean

Rounds the corners of the button

blockfalseboolean

Render the button full width

loadingAutofalseboolean

Set loading state automatically based on the @click promise state

normalCasetrueboolean

Disable uppercase label

useWaitfalseboolean

Shows LoaderWaitIcon in loading mode

useClockfalseboolean

Shows LoaderClockIcon icon in loading mode

useDropdownfalseboolean

Shows icons.ChevronDownSIcon on the right side

b24ui { base?: ClassNameValue; } & { base?: ClassNameValue; baseLoading?: ClassNameValue; baseLoadingWaitIcon?: ClassNameValue; baseLoadingClockIcon?: ClassNameValue; baseLoadingSpinnerIcon?: ClassNameValue; baseLine?: ClassNameValue; label?: ClassNameValue; labelInner?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; safeList?: ClassNameValue; }
This component also supports all native <button> HTML attributes.

Slots

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

Emits

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

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    chatPromptSubmit: {
      slots: {
        base: 'rounded-full'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        chatPromptSubmit: {
          slots: {
            base: 'rounded-full'
          }
        }
      }
    })
  ]
})

ChatPrompt

An enhanced Textarea component optimized for prompt submission in AI chat interfaces.

Editor

A rich text editor built on TipTap supporting markdown, HTML, and JSON content formats.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24