-
-
- ${contactsGeoCache[msg.sender] ? `
-
- ` : ''}
+ if (msg.is_own) {
+ // Own messages: right-aligned, no avatar
+ wrapper.innerHTML = `
+
+
+
${processMessageContent(msg.content)}
+
+
- ` : ''}
- `;
+ `;
+ } else {
+ // Other messages: left-aligned with avatar
+ const avatar = generateAvatar(msg.sender);
- return div;
+ wrapper.innerHTML = `
+
+ ${avatar.content}
+
+
+
+ ${escapeHtml(msg.sender)}
+ ${time}
+
+
+
${processMessageContent(msg.content)}
+ ${metaInfo ? `
${metaInfo}
` : ''}
+
+
+
+
+ ${contactsGeoCache[msg.sender] ? `
+
+ ` : ''}
+
+
+ `;
+ }
+
+ return wrapper;
}
/**
@@ -1407,6 +1429,78 @@ function escapeHtml(text) {
return div.innerHTML;
}
+// =============================================================================
+// Avatar Generation Functions
+// =============================================================================
+
+/**
+ * Generate a consistent color based on string hash
+ * @param {string} str - Input string (username)
+ * @returns {string} HSL color string
+ */
+function getAvatarColor(str) {
+ let hash = 0;
+ for (let i = 0; i < str.length; i++) {
+ hash = str.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ // Generate hue from hash (0-360), keep saturation and lightness fixed for readability
+ const hue = Math.abs(hash) % 360;
+ return `hsl(${hue}, 65%, 45%)`;
+}
+
+/**
+ * Extract first emoji from a string
+ * @param {string} str - Input string
+ * @returns {string|null} First emoji found or null
+ */
+function extractFirstEmoji(str) {
+ // Regex to match emojis (including compound emojis with ZWJ sequences)
+ const emojiRegex = /(\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(\u200D(\p{Emoji_Presentation}|\p{Emoji}\uFE0F))*/u;
+ const match = str.match(emojiRegex);
+ return match ? match[0] : null;
+}
+
+/**
+ * Get initials from a username
+ * @param {string} name - Username
+ * @returns {string} 1-2 character initials
+ */
+function getInitials(name) {
+ // Remove emojis first
+ const cleanName = name.replace(/(\p{Emoji_Presentation}|\p{Emoji}\uFE0F)(\u200D(\p{Emoji_Presentation}|\p{Emoji}\uFE0F))*/gu, '').trim();
+
+ if (!cleanName) return '?';
+
+ // Split by common separators (space, underscore, dash)
+ const parts = cleanName.split(/[\s_\-]+/).filter(p => p.length > 0);
+
+ if (parts.length >= 2) {
+ // Two or more words: use first letter of first two words
+ return (parts[0][0] + parts[1][0]).toUpperCase();
+ } else if (parts.length === 1) {
+ // Single word: use first letter only
+ return parts[0][0].toUpperCase();
+ }
+
+ return '?';
+}
+
+/**
+ * Generate avatar HTML for a username
+ * @param {string} name - Username
+ * @returns {object} { content: string, color: string }
+ */
+function generateAvatar(name) {
+ const emoji = extractFirstEmoji(name);
+ const color = getAvatarColor(name);
+
+ if (emoji) {
+ return { content: emoji, color: color, isEmoji: true };
+ } else {
+ return { content: getInitials(name), color: color, isEmoji: false };
+ }
+}
+
/**
* Load last seen timestamps from server
*/