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>
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"
{
"wait": "Loading client-side content..."
}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"
stop event is emitted when the user clicks on the Button.{
"wait": "Loading client-side content..."
}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"
stop event is emitted when the user clicks on the Button.{
"wait": "Loading client-side content..."
}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"
reload event is emitted when the user clicks on the Button.{
"wait": "Loading client-side content..."
}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'
}
}
}
})
]
})