<main class=space-y-6>${messages.map(msg => `<div class="flex bg-gray-800 items-start p-6 rounded-lg shadow-lg slide-in space-x-4"><img alt="User avatar image"class="h-10 rounded-full w-10"height=40 src=${msg.author.displayAvatarURL()} width=40><div class=flex-grow><div class="flex items-center space-x-2"><span class="font-bold text-white">${msg.author.username} </span><span class="text-gray-400 text-sm">${msg.createdAt.toLocaleString()}</span></div><div class=mt-2>${msg.content || ''}</div>${msg.embeds.map(embed => `<div class="mt-4 bg-gray-700 border-blue-500 border-l-4 p-4 rounded-lg">${embed.title ? `<h3 class=font-bold>${embed.title}</h3>` : ''} ${embed.description ? `<p class=mt-2>${embed.description}</p>` : ''} ${embed.fields ? embed.fields.map(field => `<div class=mt-4><strong>${field.name}</strong><p>${field.value}</div>`).join('') : ''}</div>`).join('')} ${msg.components.map(component => component.components.map(button => `<div class="mt-4 space-x-2"><a class="text-white bg-blue-500 duration-300 ease-in-out hover:bg-blue-600 inline-block pulse px-4 py-2 rounded transition"href=#>${button.label}</a></div>`).join('') ).join('')}</div></div>`).reverse().join('')}</main>