Index: openacs-4/packages/xowiki/www/ajax/chat-common.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xowiki/www/ajax/Attic/chat-common.js,v
diff -u -r1.3 -r1.4
--- openacs-4/packages/xowiki/www/ajax/chat-common.js	1 Oct 2018 14:10:29 -0000	1.3
+++ openacs-4/packages/xowiki/www/ajax/chat-common.js	9 Nov 2018 16:48:36 -0000	1.4
@@ -1,5 +1,16 @@
 // Common xowiki chat functions, mainly for data rendering.
 
+var previous_user_id = "";
+var current_color = "";
+
+// Simple function to create links
+function createLink(text) {
+    var linkRegex = /(https?:\/\/[^\s]+)/g;
+    return text.replace(linkRegex, function(url) {
+        return '<a class="xowiki-chat-message-url" href="' + url + '">' + url + '</a>';
+    })
+}
+
 function renderData(json) {
     if (json.type == "message") {
         renderMessage(json);
@@ -10,24 +21,68 @@
 
 function renderMessage(msg) {
     var messages = document.getElementById('xowiki-chat-messages');
-    p = document.createElement('p');
-    span = document.createElement('span');
-    span.innerHTML = msg.timestamp;
-    span.className = 'xowiki-chat-timestamp';
-    p.appendChild(span);
+    var user = msg.user.replace(/\\'/g, "\"");
+    var message = createLink(msg.message);
+    var user_id = msg.user_id;
+    var my_user = document.getElementById('my-user-id');
+    if (my_user == null) {
+        my_user_id = "";
+    } else {
+        my_user_id = my_user.innerText;
+    }
+    var color = msg.color;
 
+    // User block
+    user_block = document.createElement('div');
+    user_block.className = 'xowiki-chat-user-block';
+
+    // User link
+    a = document.createElement('a');
+    a.href = '/shared/community-member?user%5fid=' + user_id;
+    a.target = '_blank';
+    a.className = 'xowiki-chat-user-link';
+
+    // User name
     span = document.createElement('span');
-    var user = msg.user.replace(/\\'/g, "\"");
-    span.innerHTML = '&nbsp;' + user + ':&nbsp;';
+    span.innerHTML = user;
     span.className = 'xowiki-chat-user';
-    p.appendChild(span);
+    span.style = 'color:' + color;
+    a.appendChild(span);
+    user_block.appendChild(a);
+    previous_user_id = user_id;
+    current_color = color;
 
+    messages.appendChild(user_block);
+
+    message_block = document.createElement('div');
+    if (user_id != my_user_id) {
+        message_block.className = 'xowiki-chat-message-block';
+    } else {
+        message_block.className = 'xowiki-chat-message-block-me';
+    }
+
+    // Message body
     span = document.createElement('span');
-    span.innerHTML = msg.message;
-    span.className = 'xowiki-chat-message';
-    p.appendChild(span);
+    span.innerHTML = message;
+    if (user_id != my_user_id) {
+        span.className = 'xowiki-chat-message';
+    } else {
+        span.className = 'xowiki-chat-message-me';
+    }
+    message_block.appendChild(span);
 
-    messages.appendChild(p);
+    // Timestamp
+    span = document.createElement('span');
+    span.innerHTML = msg.timestamp;
+    if (user_id != my_user_id) {
+        span.className = 'xowiki-chat-timestamp';
+    } else {
+        span.className = 'xowiki-chat-timestamp-me';
+    }
+    message_block.appendChild(span);
+
+    messages.appendChild(message_block);
+
     messages.scrollTop = messages.scrollHeight;
 
     // IE will lose focus on message send
@@ -40,18 +95,35 @@
         users.removeChild(users.firstChild);
     }
     for (var i = 0; i < msg.message.length; i++) {
-        p = document.createElement('p');
+        var user = msg.message[i].user.replace(/\\'/g, "\"");
+        var user_id = msg.message[i].user_id;
+        var color = msg.message[i].color;
+
+        // User link
+        a = document.createElement('a');
+        a.href = '/shared/community-member?user%5fid=' + user_id;
+        a.target = '_blank';
+        a.className = 'xowiki-chat-user-link';
+
+        // User block
+        user_block = document.createElement('div');
+        user_block.className = 'xowiki-chat-user-block';
+        a.appendChild(user_block);
+
+        // User name
         span = document.createElement('span');
+        span.innerHTML = user;
+        span.className = 'xowiki-chat-user';
+        span.style = 'color:' + color;
+        user_block.appendChild(span);
+
+        // Timestamp
+        span = document.createElement('span');
         span.innerHTML = msg.message[i].timestamp;
         span.className = 'xowiki-chat-timestamp';
-        p.appendChild(span);
+        user_block.appendChild(span);
 
-        span = document.createElement('span');
-        var user = msg.message[i].user.replace(/\\'/g, "\"");
-        span.innerHTML = '&nbsp;' + user + '&nbsp;';
-        span.className = 'xowiki-chat-user';
-        p.appendChild(span);
-        users.appendChild(p);
+        users.appendChild(a);
     }
 }