Message

Avatar + header + content + footer row

A message with its sender around it — avatar, name, time — holding one or more Bubbles. Each is an article, so screen-reader users can jump between messages.

Basic

M

Megumi12:01

おはよう。今日の予定は？

T

Tomoya12:02

脚本の続き。第3話まで。

Tomoya

夜までには送る。

Delivered

<script setup lang="ts">
import { BlessBubble, BlessButton, BlessMessage } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: 560px">
    <BlessMessage name="Megumi" time="12:01">
      <BlessBubble>おはよう。今日の予定は？</BlessBubble>
      <template #actions><BlessButton size="sm" variant="ghost">↩</BlessButton></template>
    </BlessMessage>
    <BlessMessage name="Tomoya" time="12:02" align="end">
      <BlessBubble align="end" variant="outline">脚本の続き。第3話まで。</BlessBubble>
    </BlessMessage>
    <BlessMessage name="Tomoya" align="end" compact>
      <BlessBubble align="end" variant="outline">夜までには送る。</BlessBubble>
      <template #footer>Delivered</template>
    </BlessMessage>
  </div>
</template>

• align="end" for the viewer's own; compact drops the avatar and header for consecutive messages from the same sender.
• time is shown as written; add datetime so the <time> element carries the real timestamp.

Usage

import { BlessMessage } from "blessing-ui";

API

Props

Name	Type	Default	Description
name	string	—	sender name, shown in header and used for avatar initials
time	string	—	timestamp / meta text in header
datetime	string	—	machine-readable form of `time` for the <time> element
avatar	string	—
align	"start" | "end"	"start"	start = other party, end = self
compact	boolean	—	hide avatar column (consecutive messages in a group)

Slots

Name	Scope	Description
avatar	—
header	—
default	—
footer	—
actions	—