Chat Message

A single chat message bubble for building chat interfaces and messaging UIs.

Basic

Received (left) and sent (right) messages.

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

When no avatar URL is provided, shows the first letter of name or 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

Hide avatars with :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

Three visual styles: default, outline, and 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

Sent messages can show delivery status: sending, sent, delivered, read, or 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)

Show a typing indicator with the loading prop.

Are you there?3:00 PM

M

Alice

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

File Attachment

Show file messages with upload/download states.

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

Use the default slot for rich content inside the bubble.

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

Use the footer slot for reactions, actions, or any extra content below the bubble.

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	Align to right (sent message)
avatar	string	''	Avatar image URL
avatar-text	string	''	Avatar fallback text
name	string	''	Sender name
time	string	''	Timestamp
content	string	''	Message text (or use default slot)
status	'sending' | 'sent' | 'delivered' | 'read' | 'error'	—	Delivery status (shown on sent messages)
variant	'default' | 'outline' | 'ghost'	'default'	Visual style
show-avatar	boolean	true	Show avatar
loading	boolean	false	Show typing dots
grouped	boolean	—	Force group with previous message (auto-detected via prev-time/prev-sent)
prev-time	string	—	Previous message time (auto-groups if same time + same sender)
prev-sent	boolean	—	Previous message sent state (used with prev-time for auto-grouping)
file	ChatMessageFile	—	File attachment { name, size?, status?, progress?, url? }
menu	ChatMessageMenuItem[] | false	default items	Context menu items (right-click). Pass false to disable
next-time	string	—	Next message time (used for group position detection)
next-sent	boolean	—	Next message sent state (used for group position)

Events

Event	Description
retry	Emitted when retry is clicked on error status
action	Emitted when a context menu action is clicked (payload: key, item)
download	Emitted when a file with idle/done status is clicked

Slots

Slot	Description
default	Custom bubble content
avatar	Custom avatar
footer	Content below the bubble (reactions, actions)