v2.5.3

ChatPrompt

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

Usage

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.

<template>
  <B24ChatPrompt variant="tinted" />
</template>

Examples

Check the Chat overview page for installation instructions, server setup and usage examples.

As a starting point

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>
  <B24DashboardPanel>
    <template #body>
      <B24Container>
        <h1>How can I help you today?</h1>
  
        <B24ChatPrompt v-model="input" @submit="onSubmit">
          <B24ChatPromptSubmit :status="chat.status" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24DashboardPanel>
</template>

Speech Recognition

Use composable useSpeechRecognition to provide speech recognition using the Web Speech API.

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

const input = ref('')

const appLocale = useLocale()

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

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

  stop()
  input.value = ''
}

const {
  isAvailable,
  isListening,
  start,
  stop
} = useSpeechRecognition({
  lang: appLocale.locale.value.locale,
  continuous: true,
  interimResults: true
}, {
  onStart: () => {
    if (input.value === '') {
      return
    }

    input.value += ' '
  },
  onResult: (result) => {
    input.value += result.text
  }
})

const startDictation = async () => {
  await start()
}

const stopDictation = async () => {
  await stop()
}
</script>

<template>
  <B24Card class="w-full">
    <template #footer>
      <B24Container class="pb-4 sm:pb-6">
        <B24ChatPrompt v-model="input" :autofocus="false" :error="chat.error" @submit="onSubmit">
          <template v-if="isAvailable">
            <B24Button
              v-if="!isListening"
              :icon="MicrophoneOnIcon"
              color="air-tertiary-no-accent"
              size="sm"
              class="shrink-0"
              @click="startDictation"
            />
            <B24Button
              v-if="isListening"
              :icon="StopLIcon"
              color="air-secondary"
              size="sm"
              class="shrink-0 rounded-lg"
              @click="stopDictation"
            />
          </template>
          <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24Card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Chat } from '@ai-sdk/vue'
import MicrophoneOnIcon from '@bitrix24/b24icons-vue/outline/MicrophoneOnIcon'
import StopLIcon from '@bitrix24/b24icons-vue/outline/StopLIcon'

const input = ref('')

const appLocale = useLocale()

const chat = new Chat({
  onError(error) {
    console.error(error)
  }
})

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

  stop()
  input.value = ''
}

const {
  isAvailable,
  isListening,
  start,
  stop
} = useSpeechRecognition({
  lang: appLocale.locale.value.locale,
  continuous: true,
  interimResults: true
}, {
  onStart: () => {
    if (input.value === '') {
      return
    }

    input.value += ' '
  },
  onResult: (result) => {
    input.value += result.text
  }
})

const startDictation = async () => {
  await start()
}

const stopDictation = async () => {
  await stop()
}
</script>

<template>
  <B24Card class="w-full">
    <template #footer>
      <B24Container class="pb-4 sm:pb-6">
        <B24ChatPrompt v-model="input" :autofocus="false" :error="chat.error" @submit="onSubmit">
          <template v-if="isAvailable">
            <B24Button
              v-if="!isListening"
              :icon="MicrophoneOnIcon"
              color="air-tertiary-no-accent"
              size="sm"
              class="shrink-0"
              @click="startDictation"
            />
            <B24Button
              v-if="isListening"
              :icon="StopLIcon"
              color="air-secondary"
              size="sm"
              class="shrink-0 rounded-lg"
              @click="stopDictation"
            />
          </template>
          <B24ChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
        </B24ChatPrompt>
      </B24Container>
    </template>
  </B24Card>
</template>

API

Props

Prop Default Type
as'form'any

The element or component this component should render as.

placeholdert('chatPrompt.placeholder') string

The placeholder text for the textarea.

variant'outline' "outline" | "tinted" | "filled" | "plain"
error Error
iconIconComponent

Display an icon on the left side.

avatar AvatarProps

Display an avatar on the left side.

loadingboolean

When true, the loading icon will be displayed.

autofocustrueboolean
disabledboolean
rows1 number
autofocusDelay number
autoresizetrueboolean
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:

NameType
textareaRefRef<HTMLTextAreaElement | null>

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/chat-prompt.ts
export default {
  slots: {
    root: 'relative flex flex-col items-stretch gap-[2px] ps-[12px] pe-2 py-2 w-full rounded-lg',
    header: 'flex items-center gap-2',
    body: 'py-[4px] items-start',
    footer: 'flex items-center justify-end gap-2',
    base: 'pt-[1px] pb-[0px]'
  },
  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.