Bubble

Message bubble

One message in a conversation — chat, comments, an assistant's reply. Put bubbles in a Message for the avatar, name and time around them.

Basic

surface (default)

outline

plain — no box

accent, end, reactions

Long text clamped to two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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

<template>
  <div class="col" style="max-width: 480px">
    <BlessBubble>surface (default)</BlessBubble>
    <BlessBubble variant="outline">outline</BlessBubble>
    <BlessBubble variant="plain">plain — no box</BlessBubble>
    <BlessBubble
      variant="outline"
      align="end"
      :reactions="[
        { emoji: '👍', count: 3, active: true },
        { emoji: '🎉', count: 1 },
      ]"
    >
      accent, end, reactions
    </BlessBubble>
    <BlessBubble collapsible :lines="2">
      Long text clamped to two lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco.
    </BlessBubble>
  </div>
</template>

• align="end" for the viewer's own messages — variant="outline" sets them apart without colour; accent is for a message that is chosen (a pinned or selected one). collapsible clamps a long message to lines with a Show more toggle that says whether it's open.
• reactions are pressed-state buttons (@react).

Usage

import { BlessBubble } from "blessing-ui";

API

Props

Name	Type	Default	Description
variant	"accent" | "surface" | "outline" | "plain"	"surface"
align	"start" | "end"	"start"
collapsible	boolean	—	clamp to n lines with a show-more toggle
lines	number	4
reactions	BlessReaction[]	—
moreLabel	string	"Show more"
lessLabel	string	"Show less"

Events

Name	Payload	Description
react	[reaction: BlessReaction]

Slots

Name	Scope	Description
default	—