Chat & messages

Package name:

fastn-community.github.io/bling

License:

Open Source BSD

The chat message component is a UI component designed to display individual messages within a chat or messaging interface. It is commonly used in applications or websites that involve real-time communication, such as messaging platforms, chatbots, or customer support systems.

Example

John Doe

Hey Buddy!

uis nostrud exercitation ullaril mco labil oris nisi ut aliquip ex ea commo dorli consequa duis aute irure dolor lorii

Below is code:

-- message-left: Hi! 
username: John Doe
time: 12.36 pm

-- ftd.text: Hi!

Lang:

ftd

12.36 pm

Yo!

in voluptate velit esse cillum dolor er eu fugiat nulla pariatur. Excepte urla sint occaecat cupidatat nor proident,

Code Block in chat?

-- ftd.text: Yo!

Lang:

ftd

Sed ut perspiciatis unde omnis isa te natus error sit volupta tem.

12.36 pm

John Doe

🤘

12.37 pm

👍👍

12.37 pm

John Doe

Lorem ipsum dolor sit amet,

12.37 pm

sed do eiusmod tempor ut

12.38 pm

John Doe

Lorem ipsum

12.40 pm

sed do eiusmod

12.41 pm

How to use

Add bling dependency into your FASTN.ftd

-- fastn.dependency: fastn-community.github.io/bling

Lang:

ftd

import chat inside your .ftd file

-- import: fastn-community.github.io/bling/chat

Lang:

ftd

sample usage of -- message-left & -- message-right

-- message-left: Hi! 
username: John Doe
time: 12.36 pm

-- message-right: Hey! how are you doing? 
time: 12.36 pm

Lang:

ftd

Properties:

Below are details of all properties of triangular component.

title

type:

Caption (optional)

It's used to add title as a message to the message-left and message-right components.

avatar

type:

ftd.image-src (optional)

It's used to add user image to the message-left and message-right components.

round-avatar

type:

Boolean (optional, default: true)

If round-avatar property set as false then user image will be seen as square. By default it will be seen as rounded image.