Update.

src/snek/static/base.css

@@ -209,11 +209,16 @@ message-list {
 }
 
 .message {
+  .text {
   max-width: 100%;
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
-
+    img {
+      max-width: 90%;
+      border-radius: 20px;
+    }
+  }
   .avatar {
       opacity: 0;
   }
@@ -227,6 +232,16 @@ message-list {
   }
 }
 .message.switch-user {
+  .text {
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+    img{
+      max-width: 90%;
+      border-radius: 20px;
+    }
+  }
   .avatar {
       opacity: 1;
   }

src/snek/static/message-list.js

@@ -25,6 +25,34 @@ class MessageListElement extends HTMLElement {
             });
         
     }
+    timeAgo(date1, date2) {
+        const diffMs = Math.abs(date2 - date1); // Difference in milliseconds
+    
+        const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+        const hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+        if(days){
+            return `${days} days ago`
+        }
+        if(hours){
+            return `${hours} hours ago`
+        }
+        if (minutes)
+            return `${minutes} minutes ago`
+        
+        return `just now`
+    }
+    timeDescription(isoDate){
+        if(!isoDate.endsWith("Z"))
+            isoDate += "Z"
+        const date =  new Date(isoDate)
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+        let timeStr = `${hours}:${minutes}`
+        timeStr += ", " + this.timeAgo(new Date(isoDate), Date.now()) 
+        return timeStr
+    }
     createElement(message){
         const element = document.createElement("div")
         element.dataset.uid = message.uid
@@ -58,8 +86,9 @@ class MessageListElement extends HTMLElement {
             text.innerHTML = message.html
         const time = document.createElement("div")
         time.classList.add("time")
-        time.textContent = message.created_at
+        time.dataset.created_at = message.created_at
         messageContent.appendChild(author)
+        time.textContent = this.timeDescription(message.created_at)
         messageContent.appendChild(text)
         messageContent.appendChild(time)
         element.appendChild(avatar)
@@ -119,6 +148,15 @@ class MessageListElement extends HTMLElement {
         })
         this.dispatchEvent(new CustomEvent("rendered", {detail:this,bubbles:true}))
         
+        this.timeUpdateInterval = setInterval(()=>{
+            me.messages.forEach((message)=>{
+                const newText = me.timeDescription(message.created_at)
+                
+                if(newText != message.element.innerText){
+                message.element.querySelector(".time").innerText = newText
+                }
+            })
+        },30000)
         
     }
 }