.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>
let element;
onMount(async () => {
Talk.ready.then(() => {
// Synchronize user data and set up
const me = new Talk.User(oliver);
const other = new Talk.User(abby);
const session = new Talk.Session({ appId, me });
const conversationId = Talk.oneOnOneId(me, other);
const conversation = session.getOrCreateConversation(conversationId);
conversation.setParticipant(me);
conversation.setParticipant(other);
const chatbox = session.createChatbox();
chatbox.select(conversation);
chatbox.mount(element);
});
});
</script>
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.