@product7/feedback-sdk 1.3.8 → 1.3.9

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);
 		}
 	}
-}
+}

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

@@ -24,39 +24,29 @@ export class HelpView {
 	_updateContent() {
 		const searchQuery = this.state.helpSearchQuery || '';
 		const collections = this.state.helpArticles || [];
-		const collectionCount = collections.length;
 
 		this.element.innerHTML = `
-			<div class="messenger-help-header">
-				<h2>Help</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-help-search">
-				<div class="messenger-help-search-wrapper">
-					<input
-						type="text"
-						class="sdk-input messenger-help-search-input"
-						placeholder="Search for help"
-						value="${searchQuery}"
-					/>
-					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="#000000" viewBox="0 0 256 256" class="messenger-help-search-icon">
-						<path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"></path>
-					</svg>
-				</div>
-			</div>
-
-			<div class="messenger-help-body">
-				<div class="messenger-help-collections-header">
-					${collectionCount} collections
-				</div>
-				<div class="messenger-help-collections"></div>
-			</div>
-		`;
+        <div class="messenger-help-header">
+            <div class="messenger-help-header-top">
+                <h2>Help</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>
+            <input
+                type="text"
+                class="messenger-help-search-input"
+                placeholder="Search for help..."
+                value="${searchQuery}"
+            />
+        </div>
+
+        <div class="messenger-help-body">
+            <div class="messenger-help-collections"></div>
+        </div>
+    `;
 
 		this._updateCollectionsList();
 		this._attachEvents();
@@ -189,4 +179,4 @@ export class HelpView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}