ChatMessages

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

We are still updating this page. Some data may be missing here — we will complete it shortly.

Usage 2.2+

The ChatMessages component displays a list of ChatMessage components using either the default slot or the messages prop.

<template>
  <B24ChatMessages>
    <B24ChatMessage
      v-for="(message, index) in messages"
      :key="index"
      v-bind="message"
    />
  </B24ChatMessages>
</template>

This component is purpose-built for AI chatbots with features like:

Initial scroll to the bottom upon loading (shouldScrollToBottom).
Continuous scrolling down as new messages arrive (shouldAutoScroll).
An "Auto scroll" button appears when scrolled up, allowing users to jump back to the latest messages (autoScroll).
A loading indicator displays while the assistant is processing (status).
Submitted messages are scrolled to the top of the viewport and the height of the last user message is dynamically adjusted.

Messages

Use the messages prop to display a list of chat messages.

Hello, how are you?

I am doing well, thank you for asking! How can I assist you today?

What is the current weather in Tokyo?

Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies.

{
  "wait": "Loading client-side content..."
}

Status

Use the status prop to display a visual indicator when the assistant is processing.

Hello, how are you?

{
  "wait": "Loading client-side content..."
}

Here's the detail of the different statuses from the AI SDK v5 Chat class:

submitted: The message has been sent to the API and we're awaiting the start of the response stream.
streaming: The response is actively streaming in from the API, receiving chunks of data.
ready: The full response has been received and processed; a new user message can be submitted.
error: An error occurred during the API request, preventing successful completion.

User

Use the user prop to change the ChatMessage props for user messages. Defaults to:

side: 'right'
variant: 'message'

user.side

user.variant

Hello, how are you?

I am doing well, thank you for asking! How can I assist you today?

What is the current weather in Tokyo?

Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies.

{
  "wait": "Loading client-side content..."
}

Assistant

Use the assistant prop to change the ChatMessage props for assistant messages. Defaults to:

side: 'left'
variant: 'message'

assistant.side

assistant.variant

Hello, how are you?

I am doing well, thank you for asking! How can I assist you today?

What is the current weather in Tokyo?

Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies.

{
  "wait": "Loading client-side content..."
}

Auto Scroll

Use the auto-scroll prop to customize or hide the auto scroll button (with false value) displayed when scrolling to the top of the chat. Defaults to:

color: 'air-secondary-no-accent'

You can pass any property from the Button component to customize it.

Hello, how are you?

I am doing well, thank you for asking! How can I assist you today?

What is the current weather in Tokyo?

Based on the latest data, Tokyo is currently experiencing sunny weather with temperatures around 24°C (75°F). It's a beautiful day with clear skies. The forecast for the rest of the week shows a slight chance of rain on Thursday, with temperatures gradually rising to 28°C by the weekend. Humidity levels are moderate at around 65%, and wind speeds are light at 8 km/h from the southeast. Air quality is good with an index of 42. The UV index is high at 7, so it's recommended to wear sunscreen if you're planning to spend time outdoors. Sunrise was at 5:24 AM and sunset will be at 6:48 PM, giving Tokyo approximately 13 hours and 24 minutes of daylight today. The moon is currently in its waxing gibbous phase.

Can you recommend some popular tourist attractions in Kyoto?

Kyoto is known for its beautiful temples, traditional tea houses, and gardens. Some popular attractions include Kinkaku-ji (Golden Pavilion) with its stunning gold leaf exterior reflecting in the mirror pond, Fushimi Inari Shrine with its thousands of vermilion torii gates winding up the mountainside, Arashiyama Bamboo Grove where towering stalks create an otherworldly atmosphere, Kiyomizu-dera Temple perched on a hillside offering panoramic views of the city, and the historic Gion district where you might spot geisha hurrying to evening appointments through narrow stone-paved streets lined with traditional wooden machiya houses.

{
  "wait": "Loading client-side content..."
}

Auto Scroll Icon

Use the auto-scroll-icon prop to customize the auto scroll button Icon.

Hello, how are you?

I am doing well, thank you for asking! How can I assist you today?

What is the current weather in Tokyo?

Can you recommend some popular tourist attractions in Kyoto?

{
  "wait": "Loading client-side content..."
}

Should Auto Scroll

Use the should-auto-scroll prop to enable/disable continuous auto scroll while messages are streaming. Defaults to false.

<template>
  <B24ChatMessages :messages="messages" should-auto-scroll />
</template>

Should Scroll To Bottom

Use the should-scroll-to-bottom prop to enable/disable bottom auto scroll when the component is mounted. Defaults to true.

<template>
  <B24ChatMessages :messages="messages" :should-scroll-to-bottom="false" />
</template>

Examples

These chat components are designed to be used with the AI SDK v5 from Vercel AI SDK.

Within a page

Use the ChatMessages component with the Chat class from AI SDK v5 to display a list of chat messages within a page.

Pass the messages prop alongside the status prop that will be used for the auto scroll and the indicator display.

pages/[id].vue

<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'
import { getTextFromMessage } from '@bitrix24/b24ui-nuxt/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>

In this example, we use the MDC component from @nuxtjs/mdc to render the content of the message. The getTextFromMessage utility extracts the text content from the AI SDK V5 message parts. As Bitrix24 UI provides pre-styled prose components, your content will be automatically styled.

With indicator slot

You can customize the loading indicator that appears when the status is submitted.

Hello! Can you help me with something?

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`messages`		`UIMessage<unknown, UIDataTypes, UITools>[]`
`status`		`"error" \| "submitted" \| "streaming" \| "ready"`
`shouldAutoScroll`	`false`	`boolean` Whether to automatically scroll to the bottom when a message is streaming.
`shouldScrollToBottom`	`true`	`boolean` Whether to scroll to the bottom on mounted.
`autoScroll`	`true`	`boolean \| Partial<ButtonProps>` Display an auto scroll button. `{ size: 'md', color: 'air-secondary-no-accent' }`
`autoScrollIcon`	`icons.arrowDown`	`IconComponent` The icon displayed in the auto scroll button.
`user`		`Pick<ChatMessageProps, "b24ui" \| "icon" \| "avatar" \| "variant" \| "side" \| "actions">` The `user` messages props. `{ side: 'right', variant: 'message' }`
`assistant`		`Pick<ChatMessageProps, "b24ui" \| "icon" \| "avatar" \| "variant" \| "side" \| "actions">` The `assistant` messages props. `{ side: 'left', variant: 'message' }`
`compact`	`false`	`boolean` Render the messages in a compact style. This is done automatically when used inside a `UChatPalette`.
`spacingOffset`	`0`	`number` The spacing offset for the last message in px. Can be useful when the prompt is sticky for example.
`b24ui`		`{ root?: ClassNameValue; indicator?: ClassNameValue; viewport?: ClassNameValue; autoScroll?: ClassNameValue; }`

Slots

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

You can use all the slots of the ChatMessage component inside ChatMessages, they are automatically forwarded allowing you to customize individual messages when using the messages prop.

<script setup lang="ts">
import { getTextFromMessage } from '@bitrix24/b24ui-nuxt/utils/ai'
</script>

<template>
  <B24ChatMessages :messages="messages" :status="status">
    <template #content="{ message }">
      <MDC :value="getTextFromMessage(message)" :cache-key="message.id" class="*:first:mt-0 *:last:mb-0" />
    </template>
  </B24ChatMessages>
</template>

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    chatMessages: {
      slots: {
        root: 'w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)',
        indicator: 'h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-base-7) [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]',
        viewport: 'absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
        autoScroll: 'rounded-full absolute right-1/2 translate-x-1/2 bottom-0'
      },
      variants: {
        compact: {
          true: '',
          false: ''
        }
      }
    }
  }
})

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: {
        chatMessages: {
          slots: {
            root: 'w-full flex flex-col gap-1 flex-1 px-2.5 [&>article]:last-of-type:min-h-(--last-message-height)',
            indicator: 'h-6 flex items-center gap-1 py-3 *:size-2 *:rounded-full *:bg-(--ui-color-base-7) [&>*:nth-child(1)]:animate-[bounce_1s_infinite] [&>*:nth-child(2)]:animate-[bounce_1s_0.15s_infinite] [&>*:nth-child(3)]:animate-[bounce_1s_0.3s_infinite]',
            viewport: 'absolute inset-x-0 top-[86%] data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]',
            autoScroll: 'rounded-full absolute right-1/2 translate-x-1/2 bottom-0'
          },
          variants: {
            compact: {
              true: '',
              false: ''
            }
          }
        }
      }
    })
  ]
})

ChatMessage

A chat message component with icon, avatar, and action buttons.

ChatPalette

A chat interface component designed to be displayed in a modal overlay.