.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: #EC4899;
background-color: #EC4899;
color: #fff;
margin-right: 0.50rem;
}
from django.shortcuts import render
def index(request):
user = {
"id": "123456",
"name": "Alice",
"email": "alice@example.com",
"photoUrl": "https://talkjs.com/images/avatar-7.jpg",
"welcomeMessage": "Hey there! How are you? :-)",
}
app_id = "abcdef123" # Replace with your own app ID
conversation_id = "conversation_1"
other = {
"id": "654321",
"name": "Sebastian",
"email": "sebastian@example.com",
"photoUrl": "https://talkjs.com/images/avatar-4.jpg",
"welcomeMessage": "Hey there! How can I help?",
}
context = {
"user": user,
"other": other,
"app_id": app_id,
"conversation_id": conversation_id,
}
return render(request, "talkjs/index.html", context)
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.