@product7/feedback-sdk 1.3.8 → 1.4.0

package/src/widgets/messenger/components/NavigationTabs.js

@@ -8,7 +8,7 @@ export class NavigationTabs {
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'messenger-nav';
+		this.element.className = 'messenger-panel-nav';
 
 		this._updateContent();
 		this._attachEvents();
@@ -68,7 +68,22 @@ export class NavigationTabs {
 			})
 			.join('');
 
-		this.element.innerHTML = tabsHtml;
+		this.element.innerHTML = `
+			<div class="messenger-nav-tabs">
+				${tabsHtml}
+			</div>
+			<div class="messenger-nav-footer">
+				<a href="https://product7.io" target="_blank" rel="noopener noreferrer" class="messenger-powered-by">
+					<svg width="12" height="14" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0615 5.28044C8.5161 4.42949 3.30825 11.1456 5.89967 17.6588C6.9321 20.2538 9.06268 22.2644 11.8777 23.1968C16.2682 24.6507 18.4038 22.3222 19.0483 23.9691C19.4055 24.8894 18.7282 25.3209 17.988 25.4938C10.9146 27.15 5.15304 22.7566 3.5869 17.5531C1.52205 10.6941 5.98684 4.6667 11.3483 3.41065C17.8801 1.88094 24.0325 6.19355 24.3926 12.7175C24.7448 19.0921 18.6217 24.5978 11.927 22.2036C10.8789 21.8285 8.8419 20.6682 8.46823 19.858C8.06026 18.9727 8.80261 18.1725 9.68285 18.3576C10.2223 18.4726 10.3116 18.8706 11.3161 19.5372C14.4549 21.6213 19.1276 20.6132 21.2046 17.0972C23.991 12.3817 21.0481 6.05351 15.06 5.27758L15.0615 5.28044Z" fill="#21244A"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2492 2.19833C11.944 1.71463 8.88819 3.07214 6.91479 4.49682C2.27067 7.85488 0.76169 14.5038 3.49672 19.8731C4.08535 21.0096 4.84379 22.0497 5.7459 22.9576L7.16343 24.2515C7.67214 24.9131 7.27203 25.7176 6.64115 25.9269C5.13502 26.4271 2.0499 21.8172 1.42044 20.5383C0.0872204 17.8297 -0.312889 14.9047 0.242977 11.503C1.66908 2.77063 11.221 -2.51652 19.7197 1.21021C27.7548 4.73331 30.2733 15.4555 23.9351 22.0773C23.3107 22.7296 21.6352 24.4823 20.6278 23.8907C20.0076 23.5263 19.8933 22.6446 20.5192 22.1238C21.0301 21.6986 21.4759 21.435 21.9896 20.9734C23.6665 19.4688 25.2562 16.8752 25.3477 13.5636C25.4427 10.2055 24.1266 7.5848 22.3904 5.74859C20.6392 3.89665 18.6751 2.69919 15.2456 2.19691L15.2492 2.19833Z" fill="#F69F06"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48332 27.2217C7.93817 26.265 8.89987 25.3776 10.1352 25.8641C15.5653 27.9926 18.3081 25.5269 19.0255 27.0823C19.2655 27.6039 19.0448 28.1619 18.7354 28.3863C17.9895 28.9257 14.82 28.9343 13.9262 28.8714C12.9071 28.8053 11.897 28.6377 10.9111 28.3713C10.0888 28.1348 8.88057 27.9247 8.48189 27.2281L8.48332 27.2217Z" fill="#21244A"/>
+						<path fill-rule="evenodd" clip-rule="evenodd" d="M15.8722 31.0607C15.7765 32.1381 14.579 32.0331 13.5766 31.9545C12.5742 31.8759 11.5203 31.8502 11.601 30.7013C11.6789 29.5882 12.8035 29.7532 13.8274 29.8332C14.4425 29.8811 15.9951 29.681 15.8722 31.0607Z" fill="#21244A"/>
+					</svg>
+					Powered by <strong>Product7</strong>
+				</a>
+			</div>
+		`;
 	}
 
 	_attachEvents() {
@@ -103,27 +118,33 @@ export class NavigationTabs {
 	}
 
 	_getHomeIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
-		<path d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"></path>
-	</svg>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
+			<path d="M40,216H216V120a8,8,0,0,0-2.34-5.66l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,40,120Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+		</svg>`;
 	}
 
 	_getMessagesIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
+			<circle cx="128" cy="128" r="12"/>
+			<circle cx="84" cy="128" r="12"/>
+			<circle cx="172" cy="128" r="12"/>
+			<path d="M79.93,211.11a96,96,0,1,0-35-35h0L32.42,213.46a8,8,0,0,0,10.12,10.12l37.39-12.47Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+		</svg>`;
 	}
 
 	_getHelpIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
-		<path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path>
-	</svg>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
+			<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+			<circle cx="128" cy="180" r="12"/>
+			<path d="M128,144v-8a28,28,0,1,0-28-28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+		</svg>`;
 	}
 
 	_getChangelogIcon() {
-		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
-		<path d="M228.54,86.66l-26.46,23.07A40,40,0,0,0,168,72.13L120.89,46.5a40,40,0,0,0-75.44-4l-22-19.2a8,8,0,0,0-10.5,12L35.44,54.77a40,40,0,0,0,50,61.07l47.1,25.64a40,40,0,0,0,75.41,4.07l26.46-23.07a8,8,0,0,0-10.5-12ZM56,96A24,24,0,1,1,77.25,82.75,24,24,0,0,1,56,96Zm144,64a24,24,0,1,1,24-24A24,24,0,0,1,200,160Z"></path>
-	</svg>`;
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 256">
+			<path d="M160,80V200.67a8,8,0,0,0,3.56,6.65l11,7.33a8,8,0,0,0,12.2-4.72L200,160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+			<path d="M40,200a8,8,0,0,0,13.15,6.12C105.55,162.16,160,160,160,160h40a40,40,0,0,0,0-80H160S105.55,77.84,53.15,33.89A8,8,0,0,0,40,40Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+		</svg>`;
 	}
 
 	destroy() {
@@ -134,4 +155,4 @@ export class NavigationTabs {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -22,30 +22,15 @@ export class ChangelogView {
 	}
 
 	_updateContent() {
-		const avatarsHtml = this._renderTeamAvatars();
-
 		this.element.innerHTML = `
-			<div class="messenger-changelog-header">
-				<h2>Changelog</h2>
-				<button class="sdk-close-btn" aria-label="Close">
-					<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" 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-changelog-header">
+            <h2>Latest Updates</h2>
+        </div>
 
-			<div class="messenger-changelog-subheader">
-				<span class="messenger-changelog-latest">Latest</span>
-				<div class="messenger-changelog-team">
-					<span>From ${this.state.teamName}</span>
-					${avatarsHtml}
-				</div>
-			</div>
-
-			<div class="messenger-changelog-body">
-				<div class="messenger-changelog-list"></div>
-			</div>
-		`;
+        <div class="messenger-changelog-body">
+            <div class="messenger-changelog-list"></div>
+        </div>
+    `;
 
 		this._updateChangelogList();
 		this._attachEvents();
@@ -96,9 +81,6 @@ export class ChangelogView {
 					${item.description ? `<p class="messenger-changelog-description">${this._truncateText(item.description, 100)}</p>` : ''}
 					<div class="messenger-changelog-meta">
 						<span class="messenger-changelog-date">${dateStr}</span>
-						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256" class="messenger-changelog-arrow">
-							<path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"></path>
-						</svg>
 					</div>
 				</div>
 			</div>
@@ -159,12 +141,6 @@ export class ChangelogView {
 	}
 
 	_attachEvents() {
-		this.element
-			.querySelector('.sdk-close-btn')
-			.addEventListener('click', () => {
-				this.state.setOpen(false);
-			});
-
 		this._attachChangelogEvents();
 	}
 
@@ -194,4 +170,4 @@ export class ChangelogView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -40,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();
 			}
 		});
@@ -60,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';
@@ -78,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">
@@ -90,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>
@@ -104,7 +109,10 @@ export class ChatView {
 				</div>
 			</div>
 
-			${isClosed ? '' : `
+			${
+				isClosed
+					? ''
+					: `
 			<div class="messenger-compose-attachments-preview"></div>
 
 			<div class="messenger-chat-compose">
@@ -121,10 +129,13 @@ export class ChatView {
 				</button>
 				<input type="file" class="messenger-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
 			</div>
-			`}
+			`
+			}
 		`;
 
-		this._typingIndicator = this.element.querySelector('.messenger-typing-indicator');
+		this._typingIndicator = this.element.querySelector(
+			'.messenger-typing-indicator'
+		);
 		this._attachEvents();
 		this._scrollToBottom();
 		this._renderAttachmentPreviews();
@@ -132,7 +143,8 @@ export class ChatView {
 
 	_renderEmptyState(isNewConversation = false) {
 		const avatarHtml = this._renderTeamAvatars();
-		const responseTime = this.state.responseTime || 'We typically reply within a few minutes';
+		const responseTime =
+			this.state.responseTime || 'We typically reply within a few minutes';
 		const isOnline = this.state.agentsOnline;
 
 		return `
@@ -150,26 +162,34 @@ 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) {
 		const isOwn = message.isOwn;
-		const messageClass = isOwn ? 'messenger-message-own' : 'messenger-message-received';
+		const messageClass = isOwn
+			? 'messenger-message-own'
+			: 'messenger-message-received';
 		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 `
@@ -184,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>
 		`;
 	}
@@ -203,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) {
@@ -258,7 +269,9 @@ export class ChatView {
 	}
 
 	_appendMessage(message) {
-		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
 		const emptyState = messagesContainer.querySelector('.messenger-chat-empty');
 		if (emptyState) {
 			emptyState.remove();
@@ -271,7 +284,9 @@ export class ChatView {
 	}
 
 	_scrollToBottom() {
-		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
 		if (messagesContainer) {
 			setTimeout(() => {
 				messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -283,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) {
@@ -298,27 +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('');
+			})
+			.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();
+		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() {
@@ -361,7 +383,9 @@ export class ChatView {
 		}
 
 		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', () => {
@@ -388,7 +412,9 @@ export class ChatView {
 			});
 		}
 
-		const messagesContainer = this.element.querySelector('.messenger-chat-messages');
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
 		if (messagesContainer) {
 			messagesContainer.addEventListener('click', (e) => {
 				const fileLink = e.target.closest('.messenger-message-file');
@@ -429,12 +455,16 @@ export class ChatView {
 
 	_escapeHtml(text) {
 		if (!text) return '';
-		return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+		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;
@@ -466,7 +496,11 @@ 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
+				);
 			}
 		}
 
@@ -510,7 +544,9 @@ export class ChatView {
 	_showTypingIndicator(userName) {
 		if (this._typingIndicator) {
 			this._typingIndicator.style.display = 'flex';
-			const textEl = this._typingIndicator.querySelector('.messenger-typing-text');
+			const textEl = this._typingIndicator.querySelector(
+				'.messenger-typing-text'
+			);
 			if (textEl) {
 				textEl.textContent = `${userName || 'Support'} is typing...`;
 			}
@@ -536,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);
 		}
 	}
-}
+}