“Hey, jumping on a call in five. Can you pull up the latest Figma file?”
Voice bubble with waveform and duration on top and a quoted italic transcript below the divider.
The import and the props worth knowing about, in one place.
import { Chat27 } from "@/components/beste/piece/chat27";
<Chat27
transcript="Hey, jumping on a call in five. Can you pull up the latest Figma file?"
duration="0:09"
bars={[
45,
70,
55,
80,
35,
65,
90,
48,
72,
58
]}
role="received"
/>Voice note bubble with a fine waveform that swells to full height near the end, taking the accent color bar by bar as the playhead and timer advance.
Standard chat bubble with a subtle italic edited caption beneath.
Chat bubble with an avatar and timestamp. Role flips alignment and color.