Bubble Chat Testimonials Block for React

Edit REPLIES at the top of the file: each has the quote, the person's name, role and initials, and a time that is written as a relative label such as "5 min ago". The channel name is CHANNEL, and the reply count in the header is the length of the list, so it stays true when you add or remove a message.

The helper isMine decides it from the position: every second message is on the end side, outlined. Return false for everything to keep the whole thread on the start side, as a plain group chat, or return true for the one customer you want to stand out. No bubble uses your primary colour, which stays on the Shine Button.

The chat's frame is Guides extend="sm" marks="corners" around a bg-card panel, so its four hairlines run a little past the corners with a plus on each. The divider is the header column's border-s, with a Guides marks="start" putting a plus where it meets the page's top rule. The grid takes back the column's padding so the divider runs rule to rule. All of it is decorative and takes your theme's colours.

The thread is an ordered list named after the channel. Each message is a figure: the name, role and time are the figcaption and the words are a blockquote, so they are read in the order they were written, whatever side they sit on. The initials avatars are hidden because the name is right beside them.

Yes, map your messages into the Reply shape in a server component and pass them in place of REPLIES. Only share messages people agreed to publish, and keep the time label relative so the section never shows a stale date.

The header and its buttons come first, so the Shine Button is on the first screen, and the chat window follows at the full width of the page column. The bubbles take at most 80 percent of it, so a long message wraps inside its bubble instead of overflowing, and the name, role and time wrap onto a second line when they do not fit, at 320 pixels and up.

The messages fade up in turn using CSS transitions, with no script, so the block renders on the server. With reduced motion every message is simply there from the first paint.

Both are links (href="#"): point them at your customer stories and a product demo. Each button renders the link it's given with render, with nativeButton={false}.