Chat Input

Нижняя панель чата в стиле Telegram с авто-ресайзом textarea, панелью действий, кнопкой отправки и опциональными действиями прикрепления/эмодзи/голоса.

Basic

Введите сообщение и нажмите Enter, чтобы отправить (Shift+Enter — перенос строки). Кликните по скрепке, чтобы открыть панель действий.

<script setup>
import { ref } from 'vue'
const msg = ref('')
</script>

<VxChatInput v-model="msg" @send="handleSend" />

Actions Panel

Кликните по иконке скрепки, чтобы открыть панель действий в стиле Telegram. В активном состоянии иконка поворачивается на 45 градусов. Стандартные действия: Photo, File, Location, Contact, Poll.

<script setup>
function onAction(key, item) {
  console.log('Action:', key, item)
}
</script>

<VxChatInput @action="onAction" />

Custom Actions

Передайте собственный массив элементов действий.

<VxChatInput
  :actions="[
    { key: 'camera', label: 'Camera', color: '#E91E63' },
    { key: 'gif', label: 'GIF', color: '#FF9800' },
    { key: 'sticker', label: 'Sticker', color: '#9C27B0' },
  ]"
  @action="onAction"
/>

Disable Actions Panel

Передайте :actions="false", чтобы кнопка скрепки испускала событие attach вместо открытия панели.

<VxChatInput :actions="false" @attach="openFilePicker" />

Variants

Три визуальных стиля: default, outline и ghost.

Default

Outline

Ghost

<VxChatInput variant="default" />
<VxChatInput variant="outline" />
<VxChatInput variant="ghost" />

Voice Button

Показывайте кнопку микрофона, когда поле пустое, через show-voice. При вводе текста микрофон превращается в кнопку отправки с анимацией поворота.

<VxChatInput show-voice @voice="startRecording" />

Reply Preview

Передайте объект reply-to, чтобы показать превью ответа над полем ввода. Появляется и исчезает с анимацией.

AliceHey, did you finish the design?

<script setup>
import { ref } from 'vue'

const replyTo = ref({ name: 'Alice', content: 'Hey, did you finish the design?' })
</script>

<VxChatInput
  :reply-to="replyTo"
  @cancel-reply="replyTo = null"
/>

Disabled

<VxChatInput disabled />

Custom Actions (Slots)

Используйте слоты prepend и append, чтобы полностью заменить стандартные кнопки действий.

<VxChatInput>
  <template #prepend>
    <button @click="openCamera">📷</button>
  </template>
  <template #append>
    <button @click="openGif">GIF</button>
  </template>
</VxChatInput>

API

Props

Prop	Type	Default	Description
model-value	string	''	Текстовое значение v-model
placeholder	string	'Type a message...'	Текст placeholder
variant	'default' | 'outline' | 'ghost'	'default'	Визуальный стиль
disabled	boolean	false	Отключить поле
show-attach	boolean	true	Показывать кнопку прикрепления/действий
show-emoji	boolean	true	Показывать кнопку эмодзи
show-voice	boolean	false	Показывать кнопку голоса/микрофона (когда поле пустое)
max-rows	number	5	Максимальное количество строк авто-роста
reply-to	{ name?: string; content?: string } | null	null	Превью ответа
actions	ChatInputAction[] | false	default 5 items	Элементы панели действий. Передайте false, чтобы отключить панель

Events

Event	Payload	Description
update:modelValue	string	Обновление v-model
send	string	Испускается при Enter или клике по кнопке отправки (обрезанный текст)
attach	—	Клик по кнопке прикрепления (только когда actions равно false)
emoji	—	Клик по кнопке эмодзи
voice	—	Клик по кнопке голоса
cancel-reply	—	Клик по кнопке закрытия ответа
action	key, item	Клик по элементу панели действий

Slots

Slot	Description
prepend	Заменить левые кнопки действий (по умолчанию: attach)
append	Заменить правые кнопки действий (по умолчанию: emoji)

Exposed

Method	Description
focus()	Программно установить фокус на textarea

ChatInputAction

interface ChatInputAction {
  key: string      // Уникальный ключ действия
  label: string    // Отображаемая подпись
  icon?: string    // Кастомная иконка (опционально)
  color?: string   // Цвет фона кружка
}