After conducting a sample chat, I am puzzled by the fact that the links or interactive buttons are not working within the content of the div.
var ChatCompMap = new Map();
function ChatComponent(c, ident, userimg, username) {
let id = c + '_' + ident;
if (!ChatCompMap.has(id))
ChatCompMap.set(id, {
chat: c,
user: ident
});
else
return;
let chatdiv = document.getElementById(c);
if (!chatdiv.classList.contains("chat")) {
/* Required Components */
var el = document.createElement('style');
el.innerHTML = '';
document.head.appendChild(el);
el = document.createElement('link');
el.setAttribute("rel", "stylesheet");
el.setAttribute("crossorigin", "anonymous");
el.setAttribute("href", "https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@latest/img-lightbox.min.css");
document.head.appendChild(el);
el = document.createElement('script');
el.setAttribute("src", "https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@latest/img-lightbox.min.js");
el.onload = function(e) {
imgLightbox("img-lightbox-link");
}
document.head.appendChild(el);
chatdiv.classList.add("chat");
}
let nchatcontainer = document.createElement("div");
nchatcontainer.setAttribute("id", ident);
nchatcontainer.setAttribute("class", "chat-container");
let nchatuserbar = document.createElement("div");
nchatuserbar.setAttribute("class", "user-bar");
let nchatconv = document.createElement("div");
nchatconv.setAttribute("class", "conversation");
let nchatconvcont = document.createElement("div");
nchatconvcont.setAttribute("class", "conversation-container");
let nchatavatar = document.createElement("div");
nchatavatar.setAttribute("class", "avatar");
let nchatname = document.createElement("div");
nchatname.setAttribute("class", "name");
nchatconv.append(nchatconvcont);
nchatuserbar.append(nchatavatar);
nchatuserbar.append(nchatname);
nchatcontainer.append(nchatuserbar);
nchatcontainer.append(nchatconv);
chatdiv.append(nchatcontainer);
let url = null;
if (!userimg)
userimg = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
url = userimg;
if (!username)
username = "User #" + ChatCompMap.size.toString();
let img = document.createElement("img");
img.src = url;
let slct = '#' + c + ' > #' + ident + ' > div.user-bar > div.avatar';
let slctn = '#' + c + ' > #' + ident + ' > div.user-bar > div.name';
let obj = document.querySelector(slct);
obj.append(img);
obj = document.querySelector(slctn);
obj.innerHTML = username;
}
// The rest of the Javascript functions remain the same
// The CSS styling also remains unchanged
// The HTML structure and content is identical
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<script>
var avatar = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=userimage@1@4@7FD66E9B1F9F486D8C95";
var nphoto = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=dataimage_jpeg@1@4@C661281C60B847759EEB";
var nvideo = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=datavideo_mp4@1@4@4F5D6E742634422DAF2B";
var nlocation = "location@1@4@314123992DA4406CAA7F";
var ndocument = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=04contrachequeintranetperbras_pdf@1@4@7168A9C3138745E99F3C";
var naudio = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=dataaudio_ogg@1@4@16CC8FAD9C8A469A8125";
var latlon = "-10.9498287,-37.0654272";
</script>
<div id="chat"></div>
</body>
</html>