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>