Chat Message

Suhbat interfeyslari va xabar almashish UI larini yaratish uchun yagona suhbat xabari pufakchasi.

Basic

Qabul qilingan (chap) va yuborilgan (o'ng) xabarlar.

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

avatar URL berilmaganda, name yoki avatar-text ning birinchi harfini ko'rsatadi.

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

Avatarlarni yashirish uchun :show-avatar="false" dan foydalaning.

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

Uchta vizual uslub: default, outline va 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

Yuborilgan xabarlar yetkazib berish holatini ko'rsatishi mumkin: sending, sent, delivered, read yoki 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)

loading propi bilan yozish indikatorini ko'rsating.

Are you there?3:00 PM

M

Alice

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

File Attachment

Yuklash/yuklab olish holatlari bilan fayl xabarlarini ko'rsating.

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

Pufakcha ichida boy mazmun uchun standart slot dan foydalaning.

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

Pufakcha ostidagi reaksiyalar, amallar yoki boshqa qo'shimcha mazmun uchun footer slotidan foydalaning.

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	O'ngga tekislash (yuborilgan xabar)
avatar	string	''	Avatar rasm URL
avatar-text	string	''	Avatar zahira matni
name	string	''	Jo'natuvchi nomi
time	string	''	Vaqt belgisi
content	string	''	Xabar matni (yoki standart slot dan foydalaning)
status	'sending' | 'sent' | 'delivered' | 'read' | 'error'	—	Yetkazib berish holati (yuborilgan xabarlarda ko'rsatiladi)
variant	'default' | 'outline' | 'ghost'	'default'	Vizual uslub
show-avatar	boolean	true	Avatarni ko'rsatish
loading	boolean	false	Yozish nuqtalarini ko'rsatish
grouped	boolean	—	Oldingi xabar bilan majburiy guruhlash (prev-time/prev-sent orqali avtomatik aniqlanadi)
prev-time	string	—	Oldingi xabar vaqti (bir xil vaqt va bir xil jo'natuvchi bo'lsa avtomatik guruhlanadi)
prev-sent	boolean	—	Oldingi xabarning yuborilgan holati (avtomatik guruhlash uchun prev-time bilan ishlatiladi)
file	ChatMessageFile	—	Fayl biriktirmasi { name, size?, status?, progress?, url? }
menu	ChatMessageMenuItem[] | false	default items	Kontekst menyu elementlari (o'ng tugma). O'chirish uchun false ni uzating
next-time	string	—	Keyingi xabar vaqti (guruh pozitsiyasini aniqlash uchun ishlatiladi)
next-sent	boolean	—	Keyingi xabarning yuborilgan holati (guruh pozitsiyasi uchun ishlatiladi)

Events

Event	Description
retry	Xatolik holatida qayta urinish bosilganda chiqariladi
action	Kontekst menyu amali bosilganda chiqariladi (payload: key, item)
download	idle/done holatidagi fayl bosilganda chiqariladi

Slots

Slot	Description
default	Moslashtirilgan pufakcha mazmuni
avatar	Moslashtirilgan avatar
footer	Pufakcha ostidagi mazmun (reaksiyalar, amallar)