.message {
white-space: normal;
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
border-style: solid;
word-wrap: break-word;
position: relative;
display: inline-block;
max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
border-color: #F2F2F2;
background-color: #F2F2F2;
color: #171717;
}
.has-avatar-spacer .message {
max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}
.by-me .message {
border-color: #171717;
background-color: #171717;
color: #fff;
margin-right: 0.50rem;
}
<script>
(async function () {
await Talk.ready;
const alice = new Talk.User(<?= json_encode([
"id" => $user['id'],
"name" => $user['name'],
"email" => $user['email'],
"photoUrl" => $user['photoUrl'],
"welcomeMessage" => "Hey there! How are you? :-)",
]) ?>);
const session = new Talk.Session({
appId: "<?= $app_id ?>",
me: alice,
});
const inbox = session.createInbox();
inbox.mount(document.getElementById('talkjs-container'));
})();
</script>
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.