ChatPrompt

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

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

Usage 2.2+

The ChatPrompt component renders a <form> element and extends the Textarea component so you can pass any property such as icon, placeholder, autofocus, etc.

The ChatPrompt handles the following events:

The form is submitted when the user presses ↵ or when the user clicks on the submit button.
The textarea is blurred when Esc is pressed and emits a close event.

Variant

Use the variant prop to change the style of the prompt. Defaults to outline.

variant

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

Examples

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

Within a page

Use the ChatPrompt component with the Chat class from AI SDK v5 to display a chat prompt within a page.

Pass the input prop alongside the error prop to disable the textarea when an error occurs.

pages/[id].vue

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

You can also use it as a starting point for a chat interface.

pages/index.vue

<script setup lang="ts">
import { Chat } from '@ai-sdk/vue'

const input = ref('')

const chat = new Chat()

async function onSubmit() {
  chat.sendMessage({ text: input.value })

  // Navigate to chat page after first message
  if (chat.messages.length === 1) {
    await navigateTo('/chat')
  }
}
</script>

<template>
  <B24Card>
    <B24Container>
      <h1>How can I help you today?</h1>

      <B24ChatPrompt v-model="input" @submit="onSubmit">
        <B24ChatPromptSubmit :status="chat.status" />
      </B24ChatPrompt>
    </B24Container>
  </B24Card>
</template>

API

Props

Prop	Default	Type
`as`	`'form'`	`any` The element or component this component should render as.
`placeholder`	`t('chatPrompt.placeholder')`	`string` The placeholder text for the textarea.
`variant`	`'outline'`	`"outline" \| "tinted" \| "filled" \| "plain"`
`error`		`Error`
`icon`		`IconComponent` Display an icon on the left side.
`avatar`		`AvatarProps` Display an avatar on the left side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`autofocus`	`true`	`boolean`
`disabled`		`boolean`
`rows`	`1`	`number`
`autofocusDelay`		`number`
`autoresize`	`true`	`boolean`
`autoresizeDelay`		`number`
`maxrows`		`number`
`modelValue`	`''`	`string`
`b24ui`		`{ root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; base?: ClassNameValue; } & { root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; }`

This component also supports all native <textarea> HTML attributes.

Slots

Slot	Type
`header`	`{}`
`footer`	`{}`
`leading`	{ b24ui: { root: (props?: Record<string, any> \| undefined) => string; base: (props?: Record<string, any> \| undefined) => string; leading: (props?: Record<string, any> \| undefined) => string; leadingIcon: (props?: Record<string, any> \| undefined) => string; leadingAvatar: (props?: Record<string, any> \| undefined) => string; leadingAvatarSize: (props?: Record<string, any> \| undefined) => string; trailing: (props?: Record<string, any> \| undefined) => string; trailingIcon: (props?: Record<string, any> \| undefined) => string; tag: (props?: Record<string, any> \| undefined) => string; }; }
`default`	{ b24ui: { root: (props?: Record<string, any> \| undefined) => string; base: (props?: Record<string, any> \| undefined) => string; leading: (props?: Record<string, any> \| undefined) => string; leadingIcon: (props?: Record<string, any> \| undefined) => string; leadingAvatar: (props?: Record<string, any> \| undefined) => string; leadingAvatarSize: (props?: Record<string, any> \| undefined) => string; trailing: (props?: Record<string, any> \| undefined) => string; trailingIcon: (props?: Record<string, any> \| undefined) => string; tag: (props?: Record<string, any> \| undefined) => string; }; }
`trailing`	{ b24ui: { root: (props?: Record<string, any> \| undefined) => string; base: (props?: Record<string, any> \| undefined) => string; leading: (props?: Record<string, any> \| undefined) => string; leadingIcon: (props?: Record<string, any> \| undefined) => string; leadingAvatar: (props?: Record<string, any> \| undefined) => string; leadingAvatarSize: (props?: Record<string, any> \| undefined) => string; trailing: (props?: Record<string, any> \| undefined) => string; trailingIcon: (props?: Record<string, any> \| undefined) => string; tag: (props?: Record<string, any> \| undefined) => string; }; }

Emits

Event	Type
`close`	`[event: Event]`
`submit`	`[event: Event]`
`update:modelValue`	`[value: string]`

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
`textareaRef`	`Ref<HTMLTextAreaElement \| null>`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    chatPrompt: {
      slots: {
        root: 'relative flex flex-col items-stretch gap-[2px] ps-[12px] pe-[8px] py-[8px] w-full rounded-lg',
        header: 'flex items-center gap-[8px]',
        body: 'py-[4px] items-start',
        footer: 'flex items-center justify-end gap-[8px]',
        base: 'pt-[1px] pb-[0px] text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs)'
      },
      variants: {
        variant: {
          outline: {
            root: 'bg-(--ui-color-design-outline-bg) ring ring-(--ui-color-design-outline-stroke) ring-1 text-(--ui-color-design-outline-content)'
          },
          tinted: {
            root: 'bg-(--ui-color-design-tinted-na-bg) ring ring-(--ui-color-design-tinted-na-stroke) ring-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)'
          },
          filled: {
            root: 'bg-(--ui-color-design-filled-na-bg) ring ring-(--ui-color-design-filled-na-stroke) ring-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)'
          },
          plain: {
            root: 'bg-(--ui-color-design-plain-bg) ring ring-(--ui-color-design-plain-stroke) ring-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)'
          }
        }
      },
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})

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: {
        chatPrompt: {
          slots: {
            root: 'relative flex flex-col items-stretch gap-[2px] ps-[12px] pe-[8px] py-[8px] w-full rounded-lg',
            header: 'flex items-center gap-[8px]',
            body: 'py-[4px] items-start',
            footer: 'flex items-center justify-end gap-[8px]',
            base: 'pt-[1px] pb-[0px] text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs)'
          },
          variants: {
            variant: {
              outline: {
                root: 'bg-(--ui-color-design-outline-bg) ring ring-(--ui-color-design-outline-stroke) ring-1 text-(--ui-color-design-outline-content)'
              },
              tinted: {
                root: 'bg-(--ui-color-design-tinted-na-bg) ring ring-(--ui-color-design-tinted-na-stroke) ring-(length:--ui-design-tinted-na-stroke-weight) text-(--ui-color-design-tinted-na-content)'
              },
              filled: {
                root: 'bg-(--ui-color-design-filled-na-bg) ring ring-(--ui-color-design-filled-na-stroke) ring-(length:--ui-design-filled-na-stroke-weight) text-(--ui-color-design-filled-na-content)'
              },
              plain: {
                root: 'bg-(--ui-color-design-plain-bg) ring ring-(--ui-color-design-plain-stroke) ring-(length:--ui-design-plain-stroke-weight) text-(--ui-color-design-plain-content)'
              }
            }
          },
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

ChatPalette

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

ChatPromptSubmit

A chat prompt submission button with automatic status handling.