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
API
Props
Slots
Emits
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/chat-prompt-submit.ts
export default {
slots: {
base: 'rounded-full'
}
}