@product7/feedback-sdk 1.3.7 → 1.3.9

package/src/widgets/messenger/views/ChatView.js

@@ -8,8 +8,7 @@ export class ChatView {
 		this._isTyping = false;
 		this._typingIndicator = null;
 		this._isConversationClosed = false;
-		this._showEmailOverlayFlag = false;
-		this._pendingAttachments = []; 
+		this._pendingAttachments = [];
 	}
 
 	render() {
@@ -41,7 +40,10 @@ export class ChatView {
 				data.conversationId === this.state.activeConversationId
 			) {
 				this._updateContent();
-			} else if (type === 'messagesUpdate' && data.conversationId === this.state.activeConversationId) {
+			} else if (
+				type === 'messagesUpdate' &&
+				data.conversationId === this.state.activeConversationId
+			) {
 				this._updateContent();
 			}
 		});
@@ -61,7 +63,6 @@ export class ChatView {
 				? this._renderEmptyState(isNewConversation)
 				: messages.map((msg) => this._renderMessage(msg)).join('');
 
-		const avatarHtml = this._renderConversationAvatar(conversation);
 		const title = isNewConversation
 			? 'New conversation'
 			: conversation?.title || 'Chat with team';
@@ -71,8 +72,6 @@ export class ChatView {
 				? 'Conversation closed'
 				: 'Write a message...';
 
-		const existingName = this.state.userContext?.name || '';
-
 		this.element.innerHTML = `
 			<div class="messenger-chat-header">
 				<button class="sdk-btn-icon messenger-back-btn" aria-label="Back">
@@ -81,7 +80,6 @@ export class ChatView {
 					</svg>
 				</button>
 				<div class="messenger-chat-header-info">
-					${avatarHtml}
 					<span class="messenger-chat-title">${title}</span>
 				</div>
 				<button class="sdk-close-btn" aria-label="Close">
@@ -93,12 +91,16 @@ export class ChatView {
 
 			<div class="messenger-chat-messages">
 				${messagesHtml}
-				${isClosed ? `
+				${
+					isClosed
+						? `
 				<div class="messenger-closed-banner">
 					<i class="ph ph-check-circle"></i>
 					<span>This conversation has been resolved</span>
 				</div>
-				` : ''}
+				`
+						: ''
+				}
 				<div class="messenger-typing-indicator">
 					<div class="messenger-typing-dots">
 						<span></span><span></span><span></span>
@@ -107,7 +109,10 @@ export class ChatView {
 				</div>
 			</div>
 
-			${isClosed ? '' : `
+			${
+				isClosed
+					? ''
+					: `
 			<div class="messenger-compose-attachments-preview"></div>
 
 			<div class="messenger-chat-compose">
@@ -124,28 +129,8 @@ export class ChatView {
 				</button>
 				<input type="file" class="messenger-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
 			</div>
-			`}
-
-			<div class="messenger-email-overlay">
-				<div class="sdk-card messenger-email-card">
-					<div class="sdk-card-header">
-						<h4>What is your email address?</h4>
-						<p>Enter your email to know when we reply:</p>
-					</div>
-					<div class="sdk-card-body">
-						<div class="sdk-form-group">
-							<input type="text" class="sdk-input messenger-email-name" placeholder="Name (optional)" value="${this._escapeHtml(existingName)}" autocomplete="name" />
-						</div>
-						<div class="sdk-form-group">
-							<input type="email" class="sdk-input messenger-email-input" placeholder="Enter your email address..." autocomplete="email" />
-						</div>
-					</div>
-					<div class="sdk-card-footer messenger-email-actions">
-						<button class="sdk-btn sdk-btn-primary sdk-btn-block messenger-email-submit" disabled>Set my email</button>
-						<button class="sdk-btn sdk-btn-secondary sdk-btn-block messenger-email-skip">Skip</button>
-					</div>
-				</div>
-			</div>
+			`
+			}
 		`;
 
 		this._typingIndicator = this.element.querySelector(
@@ -154,11 +139,6 @@ export class ChatView {
 		this._attachEvents();
 		this._scrollToBottom();
 		this._renderAttachmentPreviews();
-
-		// Show email overlay after first message sent without email
-		if (this._showEmailOverlayFlag) {
-			this._showEmailOverlay();
-		}
 	}
 
 	_renderEmptyState(isNewConversation = false) {
@@ -182,16 +162,18 @@ export class ChatView {
 
 	_renderMessageAttachments(attachments) {
 		if (!attachments || attachments.length === 0) return '';
-		return attachments.map((att) => {
-			if (att.type === 'image') {
-				return `<img class="messenger-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
-			}
-			return `<a class="messenger-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
+		return attachments
+			.map((att) => {
+				if (att.type === 'image') {
+					return `<img class="messenger-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
+				}
+				return `<a class="messenger-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
 				<i class="ph ph-file"></i>
 				<span>${this._escapeHtml(att.name || 'file')}</span>
 				<i class="ph ph-download-simple messenger-file-download-icon"></i>
 			</a>`;
-		}).join('');
+			})
+			.join('');
 	}
 
 	_renderMessage(message) {
@@ -202,9 +184,12 @@ export class ChatView {
 		const timeStr = this._formatMessageTime(message.timestamp);
 		const attachmentsHtml = this._renderMessageAttachments(message.attachments);
 
-		const contentHtml = message.content ? `<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>` : '';
-
-		const bubbleHtml = contentHtml ? `<div class="messenger-message-bubble">${contentHtml}</div>` : '';
+		const contentHtml = message.content
+			? `<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>`
+			: '';
+		const bubbleHtml = contentHtml
+			? `<div class="messenger-message-bubble">${contentHtml}</div>`
+			: '';
 
 		if (isOwn) {
 			return `
@@ -219,13 +204,15 @@ export class ChatView {
 		const avatarHtml = this._renderSenderAvatar(message.sender);
 		return `
 			<div class="messenger-message ${messageClass}">
-				<div class="messenger-message-avatar">${avatarHtml}</div>
-				<div class="messenger-message-wrapper">
-					<div class="messenger-message-sender">${message.sender?.name || 'Support'}</div>
-					${bubbleHtml}
-					${attachmentsHtml}
-					<div class="messenger-message-time">${timeStr}</div>
+				<div class="messenger-message-sender">${message.sender?.name || 'Support'}</div>
+				<div class="messenger-message-row">
+					<div class="messenger-message-avatar">${avatarHtml}</div>
+					<div class="messenger-message-wrapper">
+						${bubbleHtml}
+						${attachmentsHtml}
+					</div>
 				</div>
+				<div class="messenger-message-time">${timeStr}</div>
 			</div>
 		`;
 	}
@@ -238,17 +225,6 @@ export class ChatView {
 		return `<div class="sdk-avatar sdk-avatar-sm">${initial}</div>`;
 	}
 
-	_renderConversationAvatar(conversation) {
-		if (!conversation?.participants?.length) {
-			return `<div class="sdk-avatar sdk-avatar-sm">S</div>`;
-		}
-		const p = conversation.participants[0];
-		if (p.avatarUrl) {
-			return `<div class="sdk-avatar sdk-avatar-sm"><img src="${p.avatarUrl}" alt="${p.name}" /></div>`;
-		}
-		return `<div class="sdk-avatar sdk-avatar-sm">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
-	}
-
 	_renderTeamAvatars() {
 		const avatars = this.state.teamAvatars;
 		if (!avatars || avatars.length === 0) {
@@ -322,12 +298,15 @@ export class ChatView {
 		const input = this.element.querySelector('.messenger-compose-input');
 		const sendBtn = this.element.querySelector('.messenger-compose-send');
 		if (input && sendBtn) {
-			sendBtn.disabled = !input.value.trim() && this._pendingAttachments.length === 0;
+			sendBtn.disabled =
+				!input.value.trim() && this._pendingAttachments.length === 0;
 		}
 	}
 
 	_renderAttachmentPreviews() {
-		const container = this.element.querySelector('.messenger-compose-attachments-preview');
+		const container = this.element.querySelector(
+			'.messenger-compose-attachments-preview'
+		);
 		if (!container) return;
 
 		if (this._pendingAttachments.length === 0) {
@@ -337,28 +316,31 @@ export class ChatView {
 		}
 
 		container.style.display = 'flex';
-		container.innerHTML = this._pendingAttachments.map((att, i) => {
-			const isImage = att.type.startsWith('image');
-			const thumb = isImage
-				? `<img class="messenger-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
-				: `<div class="messenger-attachment-thumb messenger-attachment-file-icon"><i class="ph ph-file"></i></div>`;
-			return `
+		container.innerHTML = this._pendingAttachments
+			.map((att, i) => {
+				const isImage = att.type.startsWith('image');
+				const thumb = isImage
+					? `<img class="messenger-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
+					: `<div class="messenger-attachment-thumb messenger-attachment-file-icon"><i class="ph ph-file"></i></div>`;
+				return `
 				<div class="messenger-attachment-preview" data-index="${i}">
 					${thumb}
 					<button class="messenger-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
 				</div>
 			`;
-		}).join('');
-
-		// Attach remove button events
-		container.querySelectorAll('.messenger-attachment-remove').forEach((btn) => {
-			btn.addEventListener('click', (e) => {
-				const idx = parseInt(e.currentTarget.dataset.index, 10);
-				this._pendingAttachments.splice(idx, 1);
-				this._renderAttachmentPreviews();
-				this._updateSendButtonState();
+			})
+			.join('');
+
+		container
+			.querySelectorAll('.messenger-attachment-remove')
+			.forEach((btn) => {
+				btn.addEventListener('click', (e) => {
+					const idx = parseInt(e.currentTarget.dataset.index, 10);
+					this._pendingAttachments.splice(idx, 1);
+					this._renderAttachmentPreviews();
+					this._updateSendButtonState();
+				});
 			});
-		});
 	}
 
 	_attachEvents() {
@@ -374,20 +356,15 @@ export class ChatView {
 				this.state.setOpen(false);
 			});
 
-		// Compose input (not rendered when conversation is closed)
 		const input = this.element.querySelector('.messenger-compose-input');
 		const sendBtn = this.element.querySelector('.messenger-compose-send');
 
 		if (input && sendBtn) {
 			input.addEventListener('input', () => {
-				// Auto-resize textarea
 				input.style.height = 'auto';
 				input.style.height = Math.min(input.scrollHeight, 120) + 'px';
-
-				// Enable/disable send button
 				this._updateSendButtonState();
 
-				// Send typing indicator
 				if (input.value.trim()) {
 					this._startTyping();
 				}
@@ -405,9 +382,10 @@ export class ChatView {
 			});
 		}
 
-		// Attach button + file input
 		const attachBtn = this.element.querySelector('.messenger-compose-attach');
-		const fileInput = this.element.querySelector('.messenger-compose-file-input');
+		const fileInput = this.element.querySelector(
+			'.messenger-compose-file-input'
+		);
 
 		if (attachBtn && fileInput) {
 			attachBtn.addEventListener('click', () => {
@@ -434,42 +412,11 @@ export class ChatView {
 			});
 		}
 
-		// Email overlay events
-		const emailInput = this.element.querySelector('.messenger-email-input');
-		const emailSubmit = this.element.querySelector('.messenger-email-submit');
-		const emailSkip = this.element.querySelector('.messenger-email-skip');
-
-		if (emailInput) {
-			emailInput.addEventListener('input', () => {
-				const isValid = this._isValidEmail(emailInput.value.trim());
-				emailSubmit.disabled = !isValid;
-			});
-
-			emailInput.addEventListener('keydown', (e) => {
-				if (e.key === 'Enter' && !emailSubmit.disabled) {
-					e.preventDefault();
-					this._handleEmailSubmit();
-				}
-			});
-		}
-
-		if (emailSubmit) {
-			emailSubmit.addEventListener('click', () => {
-				this._handleEmailSubmit();
-			});
-		}
-
-		if (emailSkip) {
-			emailSkip.addEventListener('click', () => {
-				this._hideEmailOverlay();
-			});
-		}
-
-		// Delegated events for attachment clicks
-		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
 		if (messagesContainer) {
 			messagesContainer.addEventListener('click', (e) => {
-				// File click -> download
 				const fileLink = e.target.closest('.messenger-message-file');
 				if (fileLink) {
 					e.preventDefault();
@@ -479,7 +426,6 @@ export class ChatView {
 					return;
 				}
 
-				// Image click -> open in new tab
 				const img = e.target.closest('.messenger-message-image');
 				if (img) {
 					const url = img.dataset.url || img.src;
@@ -503,82 +449,22 @@ export class ChatView {
 			document.body.removeChild(a);
 			URL.revokeObjectURL(blobUrl);
 		} catch {
-			// Fallback: open in new tab
 			window.open(url, '_blank');
 		}
 	}
 
 	_escapeHtml(text) {
 		if (!text) return '';
-		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-	}
-
-	_isValidEmail(email) {
-		return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-	}
-
-	_showEmailOverlay() {
-		const overlay = this.element.querySelector('.messenger-email-overlay');
-		if (overlay) {
-			overlay.style.display = 'flex';
-			const emailInput = overlay.querySelector('.messenger-email-input');
-			if (emailInput) {
-				setTimeout(() => emailInput.focus(), 100);
-			}
-		}
-	}
-
-	_startPendingConversation() {
-		if (this._pendingMessage && this.options.onStartConversation) {
-			this.options.onStartConversation(this._pendingMessage, this._pendingAttachmentsForSend || []);
-			this._pendingMessage = null;
-			this._pendingAttachmentsForSend = null;
-		}
-	}
-
-	_hideEmailOverlay() {
-		this._showEmailOverlayFlag = false;
-		const overlay = this.element.querySelector('.messenger-email-overlay');
-		if (overlay) {
-			overlay.style.display = 'none';
-		}
-	}
-
-	async _handleEmailSubmit() {
-		const nameInput = this.element.querySelector('.messenger-email-name');
-		const emailInput = this.element.querySelector('.messenger-email-input');
-		const submitBtn = this.element.querySelector('.messenger-email-submit');
-
-		const name = nameInput?.value.trim() || '';
-		const email = emailInput?.value.trim();
-
-		if (!email || !this._isValidEmail(email)) return;
-
-		submitBtn.disabled = true;
-		submitBtn.textContent = 'Saving...';
-
-		try {
-			if (this.options.onIdentifyContact) {
-				await this.options.onIdentifyContact({ name, email });
-			}
-
-			if (!this.state.userContext) {
-				this.state.userContext = {};
-			}
-			this.state.userContext.name = name;
-			this.state.userContext.email = email;
-
-			this._hideEmailOverlay();
-			this._startPendingConversation();
-		} catch (error) {
-			console.error('[ChatView] Failed to save email:', error);
-			submitBtn.disabled = false;
-			submitBtn.textContent = 'Set my email';
-		}
+		return text
+			.replace(/&/g, '&amp;')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
 	}
 
 	async _sendMessage() {
 		if (this._isConversationClosed) return;
+
 		const input = this.element.querySelector('.messenger-compose-input');
 		const content = input.value.trim();
 		const hasAttachments = this._pendingAttachments.length > 0;
@@ -587,37 +473,12 @@ export class ChatView {
 
 		this._stopTyping();
 
-		// Collect attachments to upload
 		const attachmentsToSend = [...this._pendingAttachments];
-
 		const isNewConversation = !this.state.activeConversationId;
-		const needsContactInfo = !this.state.userContext?.email;
 
 		if (isNewConversation) {
-			// Show user's message in chat immediately
-			const localMessage = {
-				id: 'msg_' + Date.now(),
-				content: content,
-				isOwn: true,
-				timestamp: new Date().toISOString(),
-				attachments: attachmentsToSend.map((a) => ({
-					url: a.preview,
-					type: a.type.startsWith('image') ? 'image' : 'file',
-					name: a.file.name,
-				})),
-			};
-			this._appendMessage(localMessage);
-			this._scrollToBottom();
-
-			if (needsContactInfo) {
-				this._pendingMessage = content;
-				this._pendingAttachmentsForSend = attachmentsToSend;
-				this._showEmailOverlayFlag = true;
-				setTimeout(() => this._showEmailOverlay(), 300);
-			} else {
-				if (this.options.onStartConversation) {
-					this.options.onStartConversation(content, attachmentsToSend);
-				}
+			if (this.options.onStartConversation) {
+				this.options.onStartConversation(content, attachmentsToSend);
 			}
 		} else {
 			const message = {
@@ -635,11 +496,14 @@ export class ChatView {
 			this.state.addMessage(this.state.activeConversationId, message);
 
 			if (this.options.onSendMessage) {
-				this.options.onSendMessage(this.state.activeConversationId, message, attachmentsToSend);
+				this.options.onSendMessage(
+					this.state.activeConversationId,
+					message,
+					attachmentsToSend
+				);
 			}
 		}
 
-		// Clear input and attachments
 		input.value = '';
 		input.style.height = 'auto';
 		this._pendingAttachments = [];
@@ -708,4 +572,4 @@ export class ChatView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

package/src/widgets/messenger/views/ConversationsView.js

@@ -4,6 +4,15 @@ export class ConversationsView {
 		this.options = options;
 		this.element = null;
 		this._unsubscribe = null;
+		this.avatarColors = [
+			'#155EEF',
+			'#8b5cf6',
+			'#10b981',
+			'#f59e0b',
+			'#ef4444',
+			'#ec4899',
+			'#06b6d4',
+		];
 	}
 
 	render() {
@@ -27,55 +36,61 @@ export class ConversationsView {
 		return this.element;
 	}
 
+	_getAvatarColor(name) {
+		// Generate consistent color based on name
+		const charCode = (name || 'S').charCodeAt(0);
+		return this.avatarColors[charCode % this.avatarColors.length];
+	}
+
 	_updateContent() {
 		const conversations = this.state.conversations;
-		const avatarsHtml = this._renderAvatarStack();
 
 		let conversationsHtml;
 		if (conversations.length === 0) {
 			conversationsHtml = `
-				<div class="messenger-empty-state">
-					<div class="messenger-empty-state-icon">
-						<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256">
-							<path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,224V64H216Z"></path>
-						</svg>
-					</div>
-					<h3>No conversations yet</h3>
-					<p>Start a new conversation with our team</p>
-				</div>
-			`;
+            <div class="messenger-empty-state">
+                <div class="messenger-empty-state-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 256 256">
+                        <path d="M216,48H40A16,16,0,0,0,24,64V224a15.85,15.85,0,0,0,9.24,14.5A16.13,16.13,0,0,0,40,240a15.89,15.89,0,0,0,10.25-3.78.69.69,0,0,0,.13-.11L82.5,208H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,224h0ZM216,192H82.5a16,16,0,0,0-10.3,3.75l-.12.11L40,224V64H216Z"></path>
+                    </svg>
+                </div>
+                <h3>No conversations yet</h3>
+                <p>Start a new conversation with our team</p>
+            </div>
+        `;
 		} else {
 			conversationsHtml = `
-				<div class="messenger-conversations-list">
-					${conversations.map((conv) => this._renderConversationItem(conv)).join('')}
-				</div>
-			`;
+            <div class="messenger-conversations-list">
+                ${conversations.map((conv) => this._renderConversationItem(conv)).join('')}
+            </div>
+        `;
 		}
 
 		this.element.innerHTML = `
-			<div class="messenger-conversations-header">
-				<h2>Messages</h2>
-				<button class="sdk-close-btn" aria-label="Close">
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
-						<path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
-					</svg>
-				</button>
-			</div>
-
-			<div class="messenger-conversations-body">
-				${conversationsHtml}
-			</div>
-
-			<div class="messenger-conversations-footer">
-				<button class="messenger-new-message-btn">
-					<div class="messenger-new-message-avatars">${avatarsHtml}</div>
-					<span>Send us a message</span>
-					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000000" viewBox="0 0 256 256">
-						<path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
-					</svg>
-				</button>
-			</div>
-		`;
+        <div class="messenger-conversations-header">
+            <h2>Messages</h2>
+            <button class="sdk-close-btn" aria-label="Close">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#000000" viewBox="0 0 256 256">
+                    <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
+                </svg>
+            </button>
+        </div>
+
+        <div class="messenger-conversations-body">
+            ${conversationsHtml}
+        </div>
+
+        <div class="messenger-conversations-footer">
+            <button class="messenger-new-message-btn">
+                <span>Send us a message</span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" style="flex-shrink: 0;">
+                    <rect width="256" height="256" fill="none"/>
+                    <line x1="144" y1="128" x2="80" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+                    <path d="M48.49,221.28A8,8,0,0,0,59.93,231l168-96.09a8,8,0,0,0,0-14l-168-95.85a8,8,0,0,0-11.44,9.67L80,128Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+                </svg>
+            </button>
+        </div>
+    `;
 
 		this._attachEvents();
 	}
@@ -108,34 +123,41 @@ export class ConversationsView {
 
 	_renderConversationAvatars(participants) {
 		if (!participants || participants.length === 0) {
-			return `<div class="sdk-avatar sdk-avatar-md">S</div>`;
+			const color = this._getAvatarColor('S');
+			return `<div class="sdk-avatar sdk-avatar-md" style="background-color: ${color};">S</div>`;
 		}
 
 		const p = participants[0];
 		if (p.avatarUrl) {
 			return `<div class="sdk-avatar sdk-avatar-md"><img src="${p.avatarUrl}" alt="${p.name}" /></div>`;
 		}
-		return `<div class="sdk-avatar sdk-avatar-md">${(p.name || 'S').charAt(0).toUpperCase()}</div>`;
+		const initial = (p.name || 'S').charAt(0).toUpperCase();
+		const color = this._getAvatarColor(p.name);
+		return `<div class="sdk-avatar sdk-avatar-md" style="background-color: ${color};">${initial}</div>`;
 	}
 
 	_renderAvatarStack() {
 		const avatars = this.state.teamAvatars;
 		if (!avatars || avatars.length === 0) {
+			const color1 = this._getAvatarColor('S');
+			const color2 = this._getAvatarColor('T');
 			return `
 				<div class="messenger-avatar-stack">
-					<div class="sdk-avatar sdk-avatar-sm">S</div>
-					<div class="sdk-avatar sdk-avatar-sm">T</div>
+					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color1};">S</div>
+					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color2};">T</div>
 				</div>
 			`;
 		}
 
 		const avatarItems = avatars
 			.slice(0, 2)
-			.map((avatar) => {
+			.map((avatar, index) => {
 				if (typeof avatar === 'string' && avatar.startsWith('http')) {
 					return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
 				}
-				return `<div class="sdk-avatar sdk-avatar-sm">${avatar.charAt(0).toUpperCase()}</div>`;
+				const initial = avatar.charAt(0).toUpperCase();
+				const color = this._getAvatarColor(avatar);
+				return `<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color};">${initial}</div>`;
 			})
 			.join('');
 
@@ -227,4 +249,4 @@ export class ConversationsView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}