Chat

A conversation log with message bubbles.

Assistant · 09:41

Hi! How can I help you today?

You · 09:42

Build me a UI library.

Assistant · 09:42

On it — here's a starting point…

import { BuiChat, BuiChatMessage } from 'ng-blatui';

<div buiChat>
  <bui-chat-message role="assistant" name="Bot">Hi! How can I help?</bui-chat-message>
  <bui-chat-message role="user" name="You">Build me a UI library.</bui-chat-message>
</div>

Typing

You · 11:20

Can you summarize the meeting notes?

Assistant

<bui-chat-message role="assistant" name="Assistant" [typing]="true" />

With avatars

Bot · 14:01

Welcome back!

Sofia · 14:02

Thanks 👋

<bui-chat-message role="assistant" name="Bot" avatar="/bot.png" time="14:01">Welcome back!</bui-chat-message>

API reference

[buiChat]

Inputs

Prop	Type	Default	Description
`ariaLabel`	`string`	`'Conversation'`	Accessible label announced for the conversation log region.

bui-chat-message

Inputs

Prop	Type	Default	Description
`role`	`string`	`'assistant'`	Author role; `'user'` aligns the bubble to the end with primary styling, else assistant-styled.
`name`	`string`	`''`	Display name shown above the bubble; also seeds the fallback initials avatar.
`time`	`string`	`''`	Optional timestamp text shown beside the name.
`avatar`	`string`	`''`	Avatar image URL; when empty, initials (or an emoji) are shown instead.
`typing`	`boolean`	`false`	When true, shows an animated typing indicator instead of the message content.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.