.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;
}
package com.example.talkjsspringboot;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class ChatController {
User me = new User("example_user_1", "Alice", "https://talkjs.com/images/avatar-7.jpg", "alice@example.com", "Hi!", "default");
User other = new User("example_user_2", "Bob", "https://talkjs.com/images/avatar-5.jpg", "bob@example.com", "Hi!", "default");
@GetMapping("/chat")
public String chat(Model model) {
model.addAttribute("me", me);
model.addAttribute("other", other);
return "chat";
}
}
We were able to offload all messaging to TalkJS — hugely simplifying our development of an otherwise complex stack.