Conversation

TWIG component : Betclic/_chat/_common/_twig/_components/_conversation.twig
CSS components : Betclic/_chat/_common/_css/_components/_conversation/_avatar.scss
Betclic/_chat/_common/_css/_components/_conversation/_conversation.scss
Betclic/_chat/_common/_css/_components/_conversation/_messages.scss
Betclic/_chat/_common/_css/_components/_conversation/_preloader.scss
Betclic/_chat/_common/_css/_components/_conversation/_proposals.scss
Betclic/_chat/_common/_css/_components/_conversation/_speaker.scss

Default link

The is-active CSS classes are present on all chat_message components to play an animation on the message when it appears. This CSS class must be added to the component after being injected to properly play the animation.
The content can contain both plain text and HTML.

Bot

Contextual class on the chat_speaker component : is-bot

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

user

No contextual classes

Sint dolore qui amet amet exercitation culpa reprehenderit do cillum commodo pariatur Lorem.

Bot error

Contextual class on the chat_speaker component : is-bot
Contextual class on the chat_message component : is-error

Eu cupidatat laborum anim anim ullamco eu sit.

Bot writing

Contextual class on the chat_speaker component : is-bot
Contextual class on the chat_message component : is-writing

Bot pending

Contextual class on the chat_speaker component : is-pending

Lorem ipsum ?
dolor sit amet, consectetur adipiscing elit.

Bot history

Contextual class on the chat_speaker component : is-history

Today at 16:42

User proposal

chat_proposals component inside the chat_speaker component

Group link

Bot

Irure ad Lorem

Non irure irure veniam qui excepteur proident ex dolor non minim esse aliqua.

Ullamco incididunt elit nostrud non commodo ex aliqua officia aute qui.

user

Consectetur nostrud

Magna magna officia aliqua quis consequat aliqua ipsum id laborum adipisicing sint.

Veniam sunt adipisicing esse nostrud dolore fugiat deserunt velit dolor anim pariatur culpa sint.

User proposals

Complex content link

No CSS classes on HTML tags of the content to simplify the markdown extraction

Ordered list

Velit id non ad aute aliquip ipsum :

Consectetur nostrud fugiat quis velit duis ullamco proident.
Magna magna officia aliqua quis consequat aliqua ipsum id laborum adipisicing sint.
Veniam sunt adipisicing esse nostrud dolore fugiat deserunt velit dolor anim pariatur culpa sint.

Fugiat est sint proident laboris sunt ipsum aliquip magna aliquip voluptate.

Unordered list

Fugiat est sint proident laboris sunt ipsum aliquip magna aliquip voluptate.

Fugiat ut cupidatat :

Aliqua mollit in reprehenderit nisi consequat ea dolor.
Nulla cillum est nulla elit sit anim ullamco est consequat occaecat aute commodo fugiat eiusmod.
Sunt nulla proident officia et commodo eu do esse aute.
Irure ut nostrud nulla qui officia dolore commodo.

Highlighted text

Link

In eiusmod amet laborum nulla exercitation. Do Lorem officia consequat occaecat commodo sunt duis mollit eu sint.

Bold text

Irure eiusmod do commodo esse et qui excepteur laboris ullamco laborum est nisi eu.

Phone number

Irure eiusmod do commodo esse et qui 06 06 06 06 06 excepteur laboris ullamco laborum est nisi eu.