.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>
const currentUser = new Talk.User({
id: 79302, // your own user id
name: "Nina Caldwell",
email: "nina.caldwell@example.com" // for offline email fallback
});
const session = new Talk.Session({
appId: "9352938974", // your TalkJS account id
me: currentUser // make Nina the active user
});
const other = new Talk.User({
id: "654321",
name: "Sebastian",
email: "sebastian@example.com"
});
const conversation = session.getOrCreateConversation(Talk.oneOnOneId(me, other));
conversation.setParticipant(me);
conversation.setParticipant(other);
const inbox = session.createInbox();
inbox.mount(document.getElementById("chat-container"));
</script>
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.