Hello! Tell me more about building AI chatbots with Bitrix24 UI.
We are still updating this page. Some data may be missing here — we will complete it shortly.
Usage 2.2+
The ChatMessage component renders an <article> element for a user or assistant chat message.
Use the
ChatMessages component to display a list of chat messages.Parts
Use the parts prop to display the message content using the AI SDK v5 format.
Hello! Tell me more about building AI chatbots with Bitrix24 UI.
{
"wait": "Loading client-side content..."
}The
parts prop is the recommended format for AI SDK v5. Each part has a type (e.g., 'text') and corresponding content.Side
Use the side prop to display the message on the left or right.
Hello! Tell me more about building AI chatbots with Bitrix24 UI.
{
"wait": "Loading client-side content..."
}When using the
ChatMessages component, the side prop is set to left for assistant messages and right for user messages.Variant
Use the variant prop to change style of the message.
Hello! Tell me more about building AI chatbots with Bitrix24 UI.
{
"wait": "Loading client-side content..."
}When using the
ChatMessages component, the variant prop is set to message for assistant messages and message for user messages.Icon
Use the icon prop to display an Icon component next to the message.
Hello! Tell me more about building AI chatbots with Bitrix24 UI.
{
"wait": "Loading client-side content..."
}Avatar
Use the avatar prop to display an Avatar component next to the message.
Hello! Tell me more about building AI chatbots with Bitrix24 UI.
{
"wait": "Loading client-side content..."
}You can also use the avatar.icon prop to display an icon as the avatar.
Bitrix24 UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.
Actions
Use the actions prop to display actions below the message that will be displayed when hovering over the message.
Bitrix24 UI offers several features for building AI chatbots including the ChatMessage, ChatMessages, and ChatPrompt components. Best practices include using the Chat class from AI SDK v5, implementing proper message styling with variants, and utilizing the built-in actions for message interactions. The components are fully customizable with theming support and responsive design.
{
"wait": "Loading client-side content..."
}API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
chatMessage: {
slots: {
root: 'group/message relative w-full',
container: 'relative flex items-start',
leading: 'inline-flex items-center justify-center min-h-6',
leadingIcon: 'shrink-0 text-(--ui-color-design-plain-content-icon-secondary)',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
content: 'relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0',
actions: 'opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center transition-opacity'
},
variants: {
variant: {
message: {
content: 'bg-inverted text-inverted'
},
event: {
content: 'bg-default ring ring-default'
},
system: {
content: 'bg-elevated/50'
}
},
side: {
left: {
container: 'rtl:justify-end'
},
right: {
container: 'ltr:justify-end ms-auto max-w-[75%]'
}
},
leading: {
true: ''
},
actions: {
true: ''
},
compact: {
true: {
root: 'scroll-mt-3',
container: 'gap-1.5 pb-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs'
},
false: {
root: 'scroll-mt-4 sm:scroll-mt-6',
container: 'gap-3 pb-8',
leadingIcon: 'size-8',
leadingAvatarSize: 'md'
}
}
},
compoundVariants: [
{
compact: true,
actions: true,
class: {
container: 'pb-8'
}
},
{
leading: true,
compact: false,
side: 'left',
class: {
actions: 'left-11'
}
},
{
leading: true,
compact: true,
side: 'left',
class: {
actions: 'left-6.5'
}
},
{
variant: [
'message',
'event',
'system'
],
compact: false,
class: {
content: 'px-4 py-3 rounded-lg min-h-12',
leading: 'mt-2'
}
},
{
variant: [
'message',
'event',
'system'
],
compact: true,
class: {
content: 'px-2 py-1 rounded-lg min-h-8',
leading: 'mt-1'
}
},
{
variant: 'message',
side: 'left',
class: {
content: 'w-full'
}
}
],
defaultVariants: {
variant: 'message'
}
}
}
})
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: {
chatMessage: {
slots: {
root: 'group/message relative w-full',
container: 'relative flex items-start',
leading: 'inline-flex items-center justify-center min-h-6',
leadingIcon: 'shrink-0 text-(--ui-color-design-plain-content-icon-secondary)',
leadingAvatar: 'shrink-0',
leadingAvatarSize: '',
content: 'relative text-pretty min-w-0 *:first:mt-0 *:last:mb-0',
actions: 'opacity-0 group-hover/message:opacity-100 absolute bottom-0 flex items-center transition-opacity'
},
variants: {
variant: {
message: {
content: 'bg-inverted text-inverted'
},
event: {
content: 'bg-default ring ring-default'
},
system: {
content: 'bg-elevated/50'
}
},
side: {
left: {
container: 'rtl:justify-end'
},
right: {
container: 'ltr:justify-end ms-auto max-w-[75%]'
}
},
leading: {
true: ''
},
actions: {
true: ''
},
compact: {
true: {
root: 'scroll-mt-3',
container: 'gap-1.5 pb-3',
leadingIcon: 'size-5',
leadingAvatarSize: '2xs'
},
false: {
root: 'scroll-mt-4 sm:scroll-mt-6',
container: 'gap-3 pb-8',
leadingIcon: 'size-8',
leadingAvatarSize: 'md'
}
}
},
compoundVariants: [
{
compact: true,
actions: true,
class: {
container: 'pb-8'
}
},
{
leading: true,
compact: false,
side: 'left',
class: {
actions: 'left-11'
}
},
{
leading: true,
compact: true,
side: 'left',
class: {
actions: 'left-6.5'
}
},
{
variant: [
'message',
'event',
'system'
],
compact: false,
class: {
content: 'px-4 py-3 rounded-lg min-h-12',
leading: 'mt-2'
}
},
{
variant: [
'message',
'event',
'system'
],
compact: true,
class: {
content: 'px-2 py-1 rounded-lg min-h-8',
leading: 'mt-1'
}
},
{
variant: 'message',
side: 'left',
class: {
content: 'w-full'
}
}
],
defaultVariants: {
variant: 'message'
}
}
}
})
]
})