@product7/product7-js 0.2.9 → 0.3.1

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

@@ -20,13 +20,19 @@ export class ChatView {
 		this._updateContent();
 
 		this._unsubscribe = this.state.subscribe((type, data) => {
+			if (type === 'connectionChange') {
+				const banner = this.element?.querySelector('.messenger-connection-banner');
+				if (banner) {
+					banner.style.display = data.connected ? 'none' : 'flex';
+				}
+				return;
+			}
 			if (
 				type === 'messageAdded' &&
 				data.conversationId === this.state.activeConversationId
 			) {
 				this._hideTypingIndicator();
 				this._appendMessage(data.message);
-				this._scrollToBottom();
 			} else if (
 				type === 'typingStarted' &&
 				data.conversationId === this.state.activeConversationId
@@ -63,16 +69,20 @@ export class ChatView {
 		const messagesHtml =
 			messages.length === 0
 				? this._renderEmptyState(isNewConversation)
-				: messages.map((msg) => this._renderMessage(msg)).join('');
+				: this._renderGroupedMessages(messages);
 
-		const title = isNewConversation
-			? 'New conversation'
-			: conversation?.title || 'Chat with team';
+		const defaultPlaceholder = this.options.composePlaceholder || 'Write a message...';
 		const placeholder = isNewConversation
-			? 'Start typing your message...'
+			? (this.options.composePlaceholder || 'Start typing your message...')
 			: isClosed
 				? 'Conversation closed'
-				: 'Write a message...';
+				: defaultPlaceholder;
+
+		const logoUrl = this.options.logoUrl;
+		const teamName = this.state.teamName || 'Support';
+		const headerAvatarHtml = logoUrl
+			? `<img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(teamName)}" />`
+			: `<iconify-icon icon="ph:chats-circle-duotone" width="20" height="20"></iconify-icon>`;
 
 		this.element.innerHTML = `
 			<div class="messenger-chat-header">
@@ -80,11 +90,11 @@ export class ChatView {
 					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
 				</button>
 				<div class="messenger-chat-header-avatar">
-					<iconify-icon icon="ph:lightbulb-duotone" width="20" height="20"></iconify-icon>
+					${headerAvatarHtml}
 				</div>
 				<div class="messenger-chat-header-info">
-					<span class="messenger-chat-title">${title}</span>
-					<span class="messenger-chat-subtitle">The team can also help</span>
+					<span class="messenger-chat-title">${this._escapeHtml(teamName)}</span>
+					<span class="messenger-chat-subtitle">${isClosed ? 'Conversation resolved' : (this.state.responseTime || 'Typically replies within minutes')}</span>
 				</div>
 				<div class="messenger-chat-header-actions">
 					<button class="sdk-btn-icon sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
@@ -93,6 +103,11 @@ export class ChatView {
 				</div>
 			</div>
 
+			<div class="messenger-connection-banner" style="display:none;">
+				<iconify-icon icon="ph:wifi-slash" width="14" height="14"></iconify-icon>
+				<span>Reconnecting…</span>
+			</div>
+
 			<div class="messenger-chat-messages">
 				${messagesHtml}
 				${
@@ -113,6 +128,11 @@ export class ChatView {
 				</div>
 			</div>
 
+			<div class="messenger-scroll-pill" style="display:none;">
+				<iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>
+				<span>New message</span>
+			</div>
+
 			${
 				isClosed
 					? ''
@@ -148,23 +168,20 @@ export class ChatView {
 		this._attachEvents();
 		this._scrollToBottom();
 		this._renderAttachmentPreviews();
+		this._setupScrollPill();
 	}
 
 	_renderEmptyState(isNewConversation = false) {
-		const avatarHtml = this._renderTeamAvatars();
-		const responseTime =
-			this.state.responseTime || 'We typically reply within a few minutes';
-		const isOnline = this.state.agentsOnline;
+		const logoUrl = this.options.logoUrl;
+
+		const logoHtml = logoUrl
+			? `<div class="messenger-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
+			: '';
 
 		return `
 			<div class="messenger-chat-empty">
-				<div class="messenger-chat-empty-avatars">${avatarHtml}</div>
+				${logoHtml}
 				<h3>${isNewConversation ? 'Start a new conversation' : 'Start the conversation'}</h3>
-				<p>Send us a message and we'll get back to you as soon as possible.</p>
-				<div class="messenger-chat-availability">
-					<span class="messenger-availability-dot ${isOnline ? 'messenger-availability-online' : 'messenger-availability-away'}"></span>
-					<span>${isOnline ? "We're online now" : responseTime}</span>
-				</div>
 			</div>
 		`;
 	}
@@ -185,7 +202,7 @@ export class ChatView {
 			.join('');
 	}
 
-	_renderMessage(message) {
+	_renderMessage(message, isLastInGroup = true) {
 		if (message.isSystem) {
 			return this._renderSystemMessage(message);
 		}
@@ -194,8 +211,9 @@ export class ChatView {
 		const messageClass = isOwn
 			? 'messenger-message-own'
 			: 'messenger-message-received';
-		const timeStr = this._formatMessageTime(message.timestamp);
+		const timeStr = isLastInGroup ? this._formatMessageTime(message.timestamp) : '';
 		const attachmentsHtml = this._renderMessageAttachments(message.attachments);
+		const isOptimistic = message.isOptimistic;
 
 		const contentHtml = message.content
 			? `<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>`
@@ -205,11 +223,20 @@ export class ChatView {
 			: '';
 
 		if (isOwn) {
+			const sentIndicator = isLastInGroup
+				? `<div class="messenger-message-meta messenger-message-meta-own">
+						${isOptimistic
+							? `<span class="messenger-message-sent-status">Sending…</span>`
+							: `<span class="messenger-message-sent-status">Sent</span>`
+						}
+						${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
+					</div>`
+				: '';
 			return `
-				<div class="messenger-message ${messageClass}">
+				<div class="messenger-message ${messageClass}${isOptimistic ? ' messenger-message-optimistic' : ''}">
 					${bubbleHtml}
 					${attachmentsHtml}
-					${timeStr ? `<div class="messenger-message-meta messenger-message-meta-own"><span>${timeStr}</span></div>` : ''}
+					${sentIndicator}
 				</div>
 			`;
 		}
@@ -238,25 +265,23 @@ export class ChatView {
 			content.includes('left the conversation');
 
 		if (isJoinLeave && message.sender) {
-			const name = message.sender.name || '';
-			const avatarUrl = message.sender.avatarUrl;
-			const initial = name.charAt(0).toUpperCase() || '?';
-			const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
-			const colorIndex = name.charCodeAt(0) % colors.length;
-			const avatarHtml = avatarUrl
-				? `<img src="${this._escapeHtml(avatarUrl)}" alt="${this._escapeHtml(name)}" />`
-				: initial;
-			const avatarStyle = avatarUrl
-				? ''
-				: `style="background: ${colors[colorIndex]};"`;
+			const rawName = message.sender.name || '';
+			const name = rawName
+				.split(' ')
+				.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+				.join(' ');
+			const logoUrl = this.options.logoUrl;
+			const logoHtml = logoUrl
+				? `<img src="${this._escapeHtml(logoUrl)}" alt="logo" />`
+				: name.charAt(0).toUpperCase();
 			const timeStr = this._formatMessageTime(message.timestamp);
 
-			// Split "Name joined the chat" → name part already in sender, extract action
-			const action = content.replace(name, '').trim();
+			const rawAction = content.replace(rawName, '').trim();
+			const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
 
 			return `
 				<div class="messenger-message-system-event">
-					<div class="messenger-message-system-event-avatar" ${avatarStyle}>${avatarHtml}</div>
+					<div class="messenger-message-system-event-avatar">${logoHtml}</div>
 					<span class="messenger-message-system-event-name">${this._escapeHtml(name)}</span>
 					<span class="messenger-message-system-event-action">${this._escapeHtml(action)}</span>
 					${timeStr ? `<span class="messenger-message-system-event-time">${timeStr}</span>` : ''}
@@ -336,6 +361,20 @@ export class ChatView {
 		const tempDiv = document.createElement('div');
 		tempDiv.innerHTML = messageHtml;
 		messagesContainer.appendChild(tempDiv.firstElementChild);
+
+		// Show scroll pill if user is scrolled up, otherwise scroll to bottom
+		const isNearBottom =
+			messagesContainer.scrollHeight -
+				messagesContainer.scrollTop -
+				messagesContainer.clientHeight <
+			80;
+
+		if (isNearBottom) {
+			this._scrollToBottom();
+		} else if (!message.isOwn) {
+			const pill = this.element.querySelector('.messenger-scroll-pill');
+			if (pill) pill.style.display = 'flex';
+		}
 	}
 
 	_scrollToBottom() {
@@ -349,6 +388,64 @@ export class ChatView {
 		}
 	}
 
+	_setupScrollPill() {
+		const messagesContainer = this.element.querySelector(
+			'.messenger-chat-messages'
+		);
+		const pill = this.element.querySelector('.messenger-scroll-pill');
+		if (!messagesContainer || !pill) return;
+
+		pill.addEventListener('click', () => {
+			this._scrollToBottom();
+			pill.style.display = 'none';
+		});
+
+		messagesContainer.addEventListener('scroll', () => {
+			const isNearBottom =
+				messagesContainer.scrollHeight -
+					messagesContainer.scrollTop -
+					messagesContainer.clientHeight <
+				80;
+			if (isNearBottom) {
+				pill.style.display = 'none';
+			}
+		});
+	}
+
+	_renderGroupedMessages(messages) {
+		const GROUP_TIME_GAP = 5 * 60 * 1000; // 5 minutes
+		let html = '';
+
+		messages.forEach((msg, index) => {
+			const isLast = index === messages.length - 1;
+			const nextMsg = messages[index + 1];
+			const currentTime = msg.timestamp ? new Date(msg.timestamp).getTime() : 0;
+			const nextTime = nextMsg?.timestamp
+				? new Date(nextMsg.timestamp).getTime()
+				: null;
+			const senderKey = msg.isSystem
+				? 'system'
+				: msg.isOwn
+					? 'own'
+					: msg.sender?.name || 'agent';
+			const nextSenderKey = nextMsg
+				? nextMsg.isSystem
+					? 'system'
+					: nextMsg.isOwn
+						? 'own'
+						: nextMsg.sender?.name || 'agent'
+				: null;
+
+			const timeGapAfter = nextTime && nextTime - currentTime > GROUP_TIME_GAP;
+			const senderChanges = nextMsg && senderKey !== nextSenderKey;
+			const isLastInGroup = isLast || timeGapAfter || senderChanges;
+
+			html += this._renderMessage(msg, isLastInGroup);
+		});
+
+		return html;
+	}
+
 	_updateSendButtonState() {
 		const input = this.element.querySelector('.messenger-compose-input');
 		const sendBtn = this.element.querySelector('.messenger-compose-send');

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

@@ -78,8 +78,9 @@ export class ConversationsView {
 
         <div class="messenger-conversations-footer">
             <button class="messenger-new-message-btn">
-                <span>Send us a message</span>
-                <iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>
+                <iconify-icon icon="ph:pencil-simple" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-secondary);"></iconify-icon>
+                <span style="flex: 1;">New conversation</span>
+                <iconify-icon icon="ph:caret-right" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-tertiary);"></iconify-icon>
             </button>
         </div>
     `;
@@ -88,14 +89,16 @@ export class ConversationsView {
 	}
 
 	_renderConversationItem(conversation) {
+		const isClosed = conversation.status === 'closed';
 		const unreadClass = conversation.unread > 0 ? 'unread' : '';
+		const closedClass = isClosed ? 'closed' : '';
 		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
 		const avatarsHtml = this._renderConversationAvatars(
 			conversation.participants
 		);
 
 		return `
-			<div class="messenger-conversation-item ${unreadClass}" data-conversation-id="${conversation.id}">
+			<div class="messenger-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
 				<div class="messenger-conversation-avatars">
 					${avatarsHtml}
 				</div>
@@ -106,6 +109,7 @@ export class ConversationsView {
 					</div>
 					<div class="messenger-conversation-preview">
 						${conversation.unread > 0 ? '<span class="messenger-unread-dot"></span>' : ''}
+						${isClosed ? '<span class="messenger-conversation-resolved-badge">Resolved</span>' : ''}
 						<span class="messenger-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
 					</div>
 				</div>
@@ -143,7 +147,7 @@ export class ConversationsView {
 
 		const avatarItems = avatars
 			.slice(0, 2)
-			.map((avatar, index) => {
+			.map((avatar) => {
 				if (typeof avatar === 'string' && avatar.startsWith('http')) {
 					return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
 				}

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

@@ -41,7 +41,6 @@ export class HomeView {
 					<div class="messenger-home-welcome">
 						<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
 						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
-						${this._renderAvailabilityStatus()}
 					</div>
 				</div>
 
@@ -105,24 +104,20 @@ export class HomeView {
 		const sendIcon = `<iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 		const caretIcon = `<iconify-icon icon="ph:caret-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 
-		if (openConversation) {
-			return `
-				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
-					<div class="messenger-home-continue-info">
-						<span class="messenger-home-continue-label">Continue conversation</span>
-					</div>
-					${sendIcon}
-				</button>
-				<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
-					<span class="messenger-home-continue-label">Leave us feedback</span>
-					${caretIcon}
-				</button>
-			`;
-		}
+		const responseTime =
+			this.state.responseTime || 'We typically reply within a few minutes';
+
+		const recentCardHtml = openConversation
+			? this._renderRecentMessageCard(openConversation)
+			: '';
 
 		return `
+			${recentCardHtml}
 			<button class="messenger-home-message-btn">
-				<span>Start a conversation</span>
+				<div class="messenger-home-continue-info">
+					<span class="messenger-home-continue-label">Send us a message</span>
+					<span class="messenger-home-message-subtext">${responseTime}</span>
+				</div>
 				${sendIcon}
 			</button>
 			<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
@@ -132,6 +127,55 @@ export class HomeView {
 		`;
 	}
 
+	_renderRecentMessageCard(conversation) {
+		const logoUrl = this.options.logoUrl;
+		const teamName = this.state.teamName || 'Support';
+		const logoHtml = logoUrl
+			? `<div class="messenger-home-recent-avatar messenger-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
+			: `<div class="messenger-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
+
+		const title = conversation.title || teamName;
+		const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
+		const preview = conversation.lastMessage
+			? conversation.lastMessage.substring(0, 48) + (conversation.lastMessage.length > 48 ? '...' : '')
+			: '';
+		const hasUnread = conversation.unread > 0;
+
+		return `
+			<div class="messenger-home-recent-card" data-conversation-id="${conversation.id}">
+				<div class="messenger-home-recent-card-label">Recent message</div>
+				<div class="messenger-home-recent-card-row">
+					${logoHtml}
+					<div class="messenger-home-recent-card-content">
+						<div class="messenger-home-recent-card-header">
+							<span class="messenger-home-recent-card-name">${title}</span>
+							<span class="messenger-home-recent-card-time">${timeAgo}</span>
+						</div>
+						<div class="messenger-home-recent-card-preview">
+							<span class="messenger-home-recent-card-message">${preview}</span>
+							${hasUnread ? '<span class="messenger-home-recent-unread-dot"></span>' : ''}
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_formatTimeAgo(timestamp) {
+		if (!timestamp) return '';
+		const date = new Date(timestamp);
+		const now = new Date();
+		const diffMs = now - date;
+		const diffMins = Math.floor(diffMs / 60000);
+		const diffHours = Math.floor(diffMs / 3600000);
+		const diffDays = Math.floor(diffMs / 86400000);
+		if (diffMins < 1) return 'now';
+		if (diffMins < 60) return `${diffMins}m`;
+		if (diffHours < 24) return `${diffHours}h`;
+		if (diffDays < 7) return `${diffDays}d`;
+		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
 	_renderFeaturedCard() {
 		if (!this.options.featuredContent) {
 			return '';
@@ -209,22 +253,26 @@ export class HomeView {
 	}
 
 	_attachEvents() {
+		const recentCard = this.element.querySelector('.messenger-home-recent-card');
+		if (recentCard) {
+			recentCard.addEventListener('click', () => {
+				const convId = recentCard.dataset.conversationId;
+				this.state.setActiveConversation(convId);
+				this.state.markAsRead(convId);
+				this.state.setView('chat');
+				if (this.options.onSelectConversation) {
+					this.options.onSelectConversation(convId);
+				}
+			});
+		}
+
 		const msgBtn = this.element.querySelector(
 			'.messenger-home-message-btn:not(.messenger-feedback-btn)'
 		);
 		if (msgBtn) {
 			msgBtn.addEventListener('click', () => {
-				const convId = msgBtn.dataset.conversationId;
-				if (convId) {
-					this.state.setActiveConversation(convId);
-					this.state.setView('chat');
-					if (this.options.onSelectConversation) {
-						this.options.onSelectConversation(convId);
-					}
-				} else {
-					this.state.setActiveConversation(null);
-					this.state.setView('chat');
-				}
+				this.state.setActiveConversation(null);
+				this.state.setView('chat');
 			});
 		}
 
@@ -232,9 +280,8 @@ export class HomeView {
 		if (feedbackBtn) {
 			feedbackBtn.addEventListener('click', () => {
 				if (this.options.onFeedbackClick) {
-					// Close the messenger panel first, then open the feedback modal
 					this.state.setOpen(false);
-					setTimeout(() => this.options.onFeedbackClick(), 200);
+					this.options.onFeedbackClick();
 				} else if (this.state.urls?.feedback) {
 					window.open(this.state.urls.feedback, '_blank');
 				}