ChatPromptSubmit

Usage 2.2+

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>

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"

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

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

<template>
  <B24ChatPromptSubmit error-color="air-primary-alert" 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 '@bitrix24/b24ui-nux/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>
  <B24Card>
    <B24Container>
      <B24ChatMessages :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>
      </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

Slots

Emits

Theme

export default defineAppConfig({
  b24ui: {
    chatPromptSubmit: {
      slots: {
        base: 'rounded-full'
      }
    }
  }
})

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