Bubble

Ready

Chat message bubble.

How did the session go today?

09:41

Three sets of twelve at 22.5 kg.

09:43

Installation

$ npx @oratiq-js/ui add bubble

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Bubble, BubbleGroup, BubbleTimestamp } from "@/components/ui/bubble";

Conversation

How did the session go today?

Did you hit the target volume?

09:41

Yeah — three sets of twelve at 22.5 kg.

Sending the log now…

09:43

This one failed to send.

Two directions at once

Bubbles use logical margins, so "mine" hugs the end edge in both LTR and RTL. Each bubble also carries dir="auto", so an Arabic message inside an English thread lays itself out correctly — real conversations are mixed-language, and the container's direction is the wrong answer for individual messages.

View source on GitHub → components/ui/bubble.tsx