ChatPalette

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

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

Usage 2.2+

The ChatPalette component is a structured layout wrapper that organizes ChatMessages in a scrollable content area and ChatPrompt in a fixed bottom section, creating cohesive chatbot interfaces for modals, slideovers.

<template>
  <B24ChatPalette>
    <B24ChatMessages />

    <template #prompt>
      <B24ChatPrompt />
    </template>
  </B24ChatPalette>
</template>

Examples

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

You can use the ChatPalette component inside a Modal's content.

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

Within ContentSearch

You can use the ChatPalette component conditionally inside ContentSearch's content to display a chatbot interface when a user selects an item.

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

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`b24ui`		`{ root?: ClassNameValue; prompt?: ClassNameValue; close?: ClassNameValue; content?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{}`
`prompt`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    chatPalette: {
      slots: {
        root: 'relative flex-1 flex flex-col min-h-0 min-w-0',
        prompt: 'px-0 rounded-t-none border-t border-(--ui-color-divider-default)',
        close: '',
        content: 'overflow-y-auto flex-1 flex flex-col py-3'
      }
    }
  }
})

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: {
        chatPalette: {
          slots: {
            root: 'relative flex-1 flex flex-col min-h-0 min-w-0',
            prompt: 'px-0 rounded-t-none border-t border-(--ui-color-divider-default)',
            close: '',
            content: 'overflow-y-auto flex-1 flex flex-col py-3'
          }
        }
      }
    })
  ]
})

ChatMessages

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

ChatPrompt

An enhanced Textarea component optimized for prompt submission in AI chat interfaces.