Vue ChatMessage Component

Usage

The ChatMessage component renders an <article> element for a user or assistant chat message.

Hello! Tell me more about building AI chatbots with Bitrix24 UI.

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.

<template>
  <B24ChatMessage
    :parts="{
      '0': {
        type: 'text',
        id: '1',
        text: 'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'
      }
    }"
    role="user"
    id="1"
  />
</template>

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.

side

Hello! Tell me more about building AI chatbots with Bitrix24 UI.

<template>
  <B24ChatMessage
    side="right"
    :parts="{
      '0': {
        type: 'text',
        id: '1',
        text: 'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'
      }
    }"
    role="user"
    id="1"
  />
</template>

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.

variant

Hello! Tell me more about building AI chatbots with Bitrix24 UI.

<template>
  <B24ChatMessage
    variant="message"
    :parts="{
      '0': {
        type: 'text',
        id: '1',
        text: 'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'
      }
    }"
    role="user"
    id="1"
  />
</template>

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.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24ChatMessage
    :icon="RocketIcon"
    variant="message"
    side="right"
    :parts="{
      '0': {
        type: 'text',
        id: '1',
        text: 'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'
      }
    }"
    role="user"
    id="1"
  />
</template>

Avatar

Use the avatar prop to display an Avatar component next to the message.

avatar.src

Hello! Tell me more about building AI chatbots with Bitrix24 UI.

<template>
  <B24ChatMessage
    :avatar="{
      src: 'https://github.com/bitrix24.png'
    }"
    variant="message"
    side="right"
    :parts="{
      '0': {
        type: 'text',
        id: '1',
        text: 'Hello! Tell me more about building AI chatbots with Bitrix24 UI.'
      }
    }"
    role="user"
    id="1"
  />
</template>

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.

<script setup lang="ts">
import RobotIcon from '@bitrix24/b24icons-vue/outline/RobotIcon'
</script>

<template>
  <B24ChatMessage
    id="1"
    :avatar="{
      icon: RobotIcon
    }"
    :parts="[
      {
        type: 'text',
        text: '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.'
      }
    ]"
    role="assistant"
  />
</template>

Actions

Use the actions prop to display actions below the message that will be displayed when hovering over the message.

<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt'

const actions = ref<ButtonProps[]>([
  {
    label: 'Copy to clipboard'
  }
])
</script>

<template>
  <B24ChatMessage
    :actions="actions"
    :parts="{
      '0': {
        type: 'text',
        id: '1',
        text: '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.'
      }
    }"
    role="user"
    id="1"
  />
</template>

API

Props

Prop	Default	Type
`as`	`'article'`	`any` The element or component this component should render as.
`id`		`string` A unique identifier for the message.
`role`		`"system" \| "user" \| "assistant"` The role of the message.
`parts`		`UIMessagePart<UIDataTypes, UITools>[]` The parts of the message. Use this for rendering the message in the UI. System messages should be avoided (set the system prompt on the server instead). They can have text parts. User messages can have text parts and file parts. Assistant messages can have text, reasoning, tool invocation, and file parts.
`icon`		`IconComponent`
`avatar`		`AvatarProps & { [key: string]: any; }`
`variant`	`'message'`	`"message" \| "event" \| "system"`
`side`	`'left'`	`"left" \| "right"`
`actions`		`(Omit<ButtonProps, "onClick"> & { onClick?: ((e: MouseEvent, message: UIMessage<unknown, UIDataTypes, UITools>) => void) \| undefined; })[]` Display a list of actions under the message. The `label` will be used in a tooltip. `{ size: 'sm', color: 'air-secondary-no-accent' }`
`compact`	`false`	`boolean` Render the message in a compact style. This is done automatically when used inside a `UChatPalette`.
`metadata`		`unknown` The metadata of the message.
`b24ui`		`{ root?: ClassNameValue; container?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; content?: ClassNameValue; actions?: ClassNameValue; }`

Slots

Slot	Type
`leading`	`{ avatar: (AvatarProps & { [key: string]: any; }) \| undefined; b24ui: object; }`
`content`	`ChatMessageProps`
`actions`	`{ actions: (Omit<ButtonProps, "onClick"> & { onClick?: ((e: MouseEvent, message: UIMessage<unknown, UIDataTypes, UITools>) => void) \| undefined; })[] \| undefined; }`

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-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content-secondary)'
          },
          event: {
            content: 'bg-(--ui-color-design-tinted-na-bg) border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)'
          },
          system: {
            content: 'bg-(--ui-color-copilot-bg-content-1) border-(--ui-color-design-outline-copilot-stroke) text-(--ui-color-design-outline-copilot-content)'
          }
        },
        side: {
          left: {
            container: 'rtl:justify-end'
          },
          right: {
            container: 'ltr:justify-end ms-auto max-w-[85%]'
          }
        },
        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: 'ps-[14px] pe-[10px] py-[8px] rounded-md min-h-[42px]',
            leading: 'mt-2'
          }
        },
        {
          variant: [
            'message',
            'event',
            'system'
          ],
          compact: true,
          class: {
            content: 'ps-[14px] pe-[10px] py-[8px] rounded-sm min-h-[32px]',
            leading: 'mt-1'
          }
        },
        {
          variant: 'system',
          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-(--ui-color-design-outline-bg) border-(--ui-color-design-outline-stroke) border-(length:--ui-design-outline-stroke-weight-alt) text-(--ui-color-design-outline-content-secondary)'
              },
              event: {
                content: 'bg-(--ui-color-design-tinted-na-bg) border-(--ui-color-design-tinted-na-stroke) border-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)'
              },
              system: {
                content: 'bg-(--ui-color-copilot-bg-content-1) border-(--ui-color-design-outline-copilot-stroke) text-(--ui-color-design-outline-copilot-content)'
              }
            },
            side: {
              left: {
                container: 'rtl:justify-end'
              },
              right: {
                container: 'ltr:justify-end ms-auto max-w-[85%]'
              }
            },
            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: 'ps-[14px] pe-[10px] py-[8px] rounded-md min-h-[42px]',
                leading: 'mt-2'
              }
            },
            {
              variant: [
                'message',
                'event',
                'system'
              ],
              compact: true,
              class: {
                content: 'ps-[14px] pe-[10px] py-[8px] rounded-sm min-h-[32px]',
                leading: 'mt-1'
              }
            },
            {
              variant: 'system',
              side: 'left',
              class: {
                content: 'w-full'
              }
            }
          ],
          defaultVariants: {
            variant: 'message'
          }
        }
      }
    })
  ]
})

DashboardToolbar

A secondary action bar positioned beneath the main navigation in dashboards.

ChatMessages

A chat messages list component designed for seamless integration with the Vercel AI SDK.