Chat Message

Одиночный пузырь сообщения чата для построения интерфейсов чатов и мессенджеров.

Basic

Полученные (слева) и отправленные (справа) сообщения.

Alice

Hey! How's the project going?10:00 AM

Going great! Almost done with the components.

Just finishing up the chat message component.10:02 AM

Alice

Awesome, can't wait to see it!10:03 AM

I'll share a preview tonight.10:04 AM

<VxChatMessage
  name="Alice"
  content="Hey! How's the project going?"
  time="10:00 AM"
  avatar="avatar.jpg"
/>
<!-- Auto-grouped: same time + same sender = grouped -->
<VxChatMessage sent content="Going great!" time="10:02 AM" prev-time="10:00 AM" :prev-sent="false" />
<VxChatMessage sent content="Just finishing up." time="10:02 AM" status="read" prev-time="10:02 AM" :prev-sent="true" />

Avatar Fallback

Если URL avatar не задан, отображается первая буква из name или avatar-text.

B

Bob

Did you push the latest changes?11:00 AM

Yes, just now.11:01 AM

M

B

Bob

Perfect, I'll pull and test.11:02 AM

<VxChatMessage name="Bob" content="Message here" />
<VxChatMessage sent content="Reply" avatar-text="Me" />

No Avatar

Скройте аватары через :show-avatar="false".

Support

How can I help you today?9:00 AM

I have a question about billing.9:01 AM

<VxChatMessage :show-avatar="false" content="Message" />

Variants

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

Default

A

Alice

Default received style

Default sent style

M

Outline

A

Alice

Outline received style

Outline sent style

M

Ghost

A

Alice

Ghost received style

Ghost sent style

M

<VxChatMessage content="Default" />
<VxChatMessage content="Outline" variant="outline" />
<VxChatMessage content="Ghost" variant="ghost" />

Status

Отправленные сообщения могут показывать статус доставки: sending, sent, delivered, read или error.

Sending...1:00 PM

M

Message sent1:01 PM

M

Message delivered1:02 PM

M

Message read1:03 PM

M

Failed to send1:04 PM

M

<VxChatMessage sent content="Sending..." status="sending" />
<VxChatMessage sent content="Delivered" status="delivered" />
<VxChatMessage sent content="Read" status="read" />
<VxChatMessage sent content="Failed" status="error" />

Loading (Typing)

Показывайте индикатор набора через prop loading.

Are you there?3:00 PM

M

Alice

<VxChatMessage name="Alice" avatar="avatar.jpg" loading />

File Attachment

Отображайте сообщения с файлами с состояниями загрузки/скачивания.

Alice

project-spec.pdf2.4 MB

2:00 PM

design-v3.fig14.2 MB

Here's the latest design2:01 PM

M

screenshot.pngUploading · 64%...

2:01 PM

M

Alice

meeting-notes.docxDownloading · 32%...

2:02 PM

Alice

backup-archive.zip89 MB

2:03 PM

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

const file = reactive({
  name: 'archive.zip',
  size: '89 MB',
  status: 'idle',  // 'idle' | 'downloading' | 'uploading' | 'done'
  progress: 0
})

function onDownload(f) {
  f.status = 'downloading'
  f.progress = 0
  const timer = setInterval(() => {
    f.progress = Math.min(f.progress + 10, 100)
    if (f.progress >= 100) {
      clearInterval(timer)
      f.status = 'done'
    }
  }, 200)
}
</script>

<VxChatMessage :file="file" @download="onDownload" />

Slot Content

Используйте слот по умолчанию для насыщенного содержимого внутри пузыря.

B

Bot

project-spec.pdf

2.4 MB

4:00 PM

Thanks! I'll review it now 👍 4:02 PM

M

<VxChatMessage name="Bot" avatar-text="B">
  <div>Custom rich content here</div>
</VxChatMessage>

<VxChatMessage sent>
  Thanks! I'll review it now 👍
</VxChatMessage>

Footer Slot

Используйте слот footer для реакций, действий или любого дополнительного содержимого под пузырём.

This new design is fire!5:00 PM

🔥 3👍 2

M

<VxChatMessage sent content="This new design is fire!">
  <template #footer>
    <div style="display: flex; gap: 4px;">
      <span>🔥 3</span>
      <span>👍 2</span>
    </div>
  </template>
</VxChatMessage>

API

Props

Prop	Type	Default	Description
sent	boolean	false	Выравнивание вправо (отправленное сообщение)
avatar	string	''	URL изображения аватара
avatar-text	string	''	Запасной текст для аватара
name	string	''	Имя отправителя
time	string	''	Временная метка
content	string	''	Текст сообщения (или используйте слот по умолчанию)
status	'sending' | 'sent' | 'delivered' | 'read' | 'error'	—	Статус доставки (отображается на отправленных сообщениях)
variant	'default' | 'outline' | 'ghost'	'default'	Визуальный стиль
show-avatar	boolean	true	Показывать аватар
loading	boolean	false	Показывать точки набора
grouped	boolean	—	Принудительно группировать с предыдущим сообщением (определяется автоматически через prev-time/prev-sent)
prev-time	string	—	Время предыдущего сообщения (авто-группировка при том же времени и отправителе)
prev-sent	boolean	—	Статус отправки предыдущего сообщения (используется с prev-time для авто-группировки)
file	ChatMessageFile	—	Файловое вложение { name, size?, status?, progress?, url? }
menu	ChatMessageMenuItem[] | false	default items	Элементы контекстного меню (правый клик). Передайте false, чтобы отключить
next-time	string	—	Время следующего сообщения (используется для определения позиции в группе)
next-sent	boolean	—	Статус отправки следующего сообщения (используется для позиции в группе)

Events

Event	Description
retry	Испускается при клике на "повторить" в статусе ошибки
action	Испускается при клике на действие контекстного меню (payload: key, item)
download	Испускается при клике на файл со статусом idle/done

Slots

Slot	Description
default	Кастомное содержимое пузыря
avatar	Кастомный аватар
footer	Содержимое под пузырём (реакции, действия)