@product7/product7-js 0.2.6 → 0.2.9

package/dist/product7-js.js

@@ -2977,8 +2977,8 @@
   --msg-bg-elevated: #FFFFFF;
   --msg-bg-hover: #F9FAFB;
   --msg-bg-input: rgba(255, 255, 255, 0.7);
-  --msg-bg-bubble-own: #FFFFFF;
-  --msg-bg-bubble-received: #F3F4F6;
+  --msg-bg-bubble-own: #F3F4F6;
+  --msg-bg-bubble-received: rgba(21, 94, 239, 0.06);
   --msg-bg-header-gradient: linear-gradient(180deg, #e0e7ff 0%, #f0f4ff 35%, #FFFFFF 65%);
   --msg-bg-header-glow1: radial-gradient(circle, rgba(21, 94, 239, 0.08) 0%, transparent 70%);
   --msg-bg-header-glow2: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
@@ -2987,7 +2987,7 @@
   --msg-text-tertiary: #6B7280;
   --msg-text-muted: #9CA3AF;
   --msg-border: #E5E7EB;
-  --msg-border-bubble: #E5E7EB;
+  --msg-border-bubble: transparent;
   --msg-shadow-card: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
   --msg-shadow-card-hover: rgba(9, 30, 66, 0.3) 0px 2px 2px, rgba(9, 30, 66, 0.18) 0px 0px 1px 1px;
   
@@ -3391,6 +3391,82 @@
   max-width: 85%;
 }
 
+.messenger-message-system {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) 0;
+  width: 100%;
+}
+
+.messenger-message-system::before,
+.messenger-message-system::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--msg-border);
+}
+
+.messenger-message-system-text {
+  font-size: 0.6875rem;
+  color: var(--msg-text-tertiary);
+  white-space: nowrap;
+  padding: 0 var(--spacing-2);
+  letter-spacing: 0.01em;
+}
+
+/* Rich join/leave system event */
+.messenger-message-system-event {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4) 0;
+  width: 100%;
+  text-align: center;
+}
+
+.messenger-message-system-event-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-full);
+  border: 2px solid var(--msg-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-semibold);
+  color: #ffffff;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.messenger-message-system-event-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.messenger-message-system-event-name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  line-height: 1.3;
+}
+
+.messenger-message-system-event-action {
+  font-size: var(--font-size-xs);
+  color: var(--msg-text-tertiary);
+  margin-top: -2px;
+}
+
+.messenger-message-system-event-time {
+  font-size: 0.6875rem;
+  color: var(--msg-text-muted);
+}
+
 .messenger-message-own {
   align-self: flex-end;
   flex-direction: column;
@@ -3431,7 +3507,6 @@
 .messenger-message-own .messenger-message-bubble {
   background: var(--msg-bg-bubble-own);
   color: var(--msg-text);
-  border: 1px solid var(--msg-border-bubble);
   border-bottom-right-radius: 0.25rem;
 }
 
@@ -3443,7 +3518,7 @@
 
 .messenger-message-content {
   font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-relaxed);
 }
 
@@ -3468,10 +3543,14 @@
   gap: 0.375rem;
   font-size: var(--font-size-xs);
   color: var(--msg-text-tertiary);
-  margin-top: 0.375rem;
+  margin-top: 0.25rem;
   padding: 0 var(--spacing-1);
 }
 
+.messenger-message-meta-own {
+  justify-content: flex-end;
+}
+
 .messenger-message-image {
   max-width: 220px;
   max-height: 200px;
@@ -4257,8 +4336,8 @@
   --msg-bg-elevated: #232930;
   --msg-bg-hover: #232930;
   --msg-bg-input: #1a1e24;
-  --msg-bg-bubble-own: #2a3140;
-  --msg-bg-bubble-received: #1a1e24;
+  --msg-bg-bubble-own: #1e2330;
+  --msg-bg-bubble-received: rgba(21, 94, 239, 0.12);
   --msg-bg-header-gradient: linear-gradient(180deg, #1a1e2e 0%, #141720 50%, #0f1317 100%);
   --msg-bg-header-glow1: radial-gradient(circle, rgba(21, 94, 239, 0.07) 0%, transparent 70%);
   --msg-bg-header-glow2: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
@@ -8347,7 +8426,9 @@
 
 			this.agentsOnline = false;
 			this.onlineCount = 0;
-			this.responseTime = 'Usually replies within a few minutes';
+			this.onlineMessage = options.onlineMessage || "We're online now";
+			this.responseTime =
+				options.responseTime || 'We typically reply within a few minutes';
 
 			this.typingUsers = {};
 
@@ -9356,6 +9437,10 @@
 		}
 
 		_renderMessage(message) {
+			if (message.isSystem) {
+				return this._renderSystemMessage(message);
+			}
+
 			const isOwn = message.isOwn;
 			const messageClass = isOwn
 				? 'messenger-message-own'
@@ -9375,12 +9460,11 @@
 				<div class="messenger-message ${messageClass}">
 					${bubbleHtml}
 					${attachmentsHtml}
+					${timeStr ? `<div class="messenger-message-meta messenger-message-meta-own"><span>${timeStr}</span></div>` : ''}
 				</div>
 			`;
 			}
 
-			const senderName = message.sender?.name || 'Support';
-			const senderRole = message.sender?.role || 'Agent';
 			const avatarHtml = this._renderSenderAvatar(message.sender);
 			return `
 			<div class="messenger-message ${messageClass}">
@@ -9391,13 +9475,49 @@
 						${attachmentsHtml}
 					</div>
 				</div>
-				<div class="messenger-message-meta">
-					<span>${senderName}</span>
-					<span>·</span>
-					<span>${senderRole}</span>
-					<span>·</span>
-					<span>${timeStr}</span>
+				${timeStr ? `<div class="messenger-message-meta"><span>${timeStr}</span></div>` : ''}
+			</div>
+		`;
+		}
+
+		_renderSystemMessage(message) {
+			const content = message.content || '';
+			const isJoinLeave =
+				content.includes('joined the chat') ||
+				content.includes('left the chat') ||
+				content.includes('joined the conversation') ||
+				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 timeStr = this._formatMessageTime(message.timestamp);
+
+				// Split "Name joined the chat" → name part already in sender, extract action
+				const action = content.replace(name, '').trim();
+
+				return `
+				<div class="messenger-message-system-event">
+					<div class="messenger-message-system-event-avatar" ${avatarStyle}>${avatarHtml}</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>` : ''}
 				</div>
+			`;
+			}
+
+			return `
+			<div class="messenger-message-system">
+				<span class="messenger-message-system-text">${this._escapeHtml(content)}</span>
 			</div>
 		`;
 		}
@@ -9413,12 +9533,7 @@
 		_renderTeamAvatars() {
 			const avatars = this.state.teamAvatars;
 			if (!avatars || avatars.length === 0) {
-				return `
-				<div class="messenger-avatar-stack">
-					<div class="sdk-avatar sdk-avatar-md">S</div>
-					<div class="sdk-avatar sdk-avatar-md">T</div>
-				</div>
-			`;
+				return '';
 			}
 
 			const avatarItems = avatars
@@ -9437,11 +9552,17 @@
 		_formatMessageTime(timestamp) {
 			if (!timestamp) return '';
 			const date = new Date(timestamp);
-			return date.toLocaleTimeString('en-US', {
-				hour: 'numeric',
+			const datePart = date.toLocaleDateString('en-GB', {
+				day: '2-digit',
+				month: 'short',
+				year: 'numeric',
+			});
+			const timePart = date.toLocaleTimeString('en-GB', {
+				hour: '2-digit',
 				minute: '2-digit',
-				hour12: true,
+				hour12: false,
 			});
+			return `${datePart}, ${timePart}`;
 		}
 
 		_formatMessageContent(content) {
@@ -10391,6 +10512,7 @@
 					<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>
 
@@ -10410,12 +10532,7 @@
 			const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
 
 			if (!avatars || avatars.length === 0) {
-				return `
-				<div class="messenger-avatar-stack">
-					<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[0]};">S</div>
-					<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[1]};">T</div>
-				</div>
-			`;
+				return '';
 			}
 
 			const avatarItems = avatars
@@ -10433,14 +10550,12 @@
 
 		_renderAvailabilityStatus() {
 			const isOnline = this.state.agentsOnline;
-			const responseTime =
-				this.state.responseTime || 'We typically reply within a few minutes';
 
 			if (isOnline) {
 				return `
 				<div class="messenger-home-availability">
 					<span class="messenger-availability-dot messenger-availability-online"></span>
-					<span class="messenger-availability-text">We're online now</span>
+					<span class="messenger-availability-text">${this.state.onlineMessage}</span>
 				</div>
 			`;
 			}
@@ -10448,7 +10563,7 @@
 			return `
 			<div class="messenger-home-availability">
 				<span class="messenger-availability-dot messenger-availability-away"></span>
-				<span class="messenger-availability-text">${responseTime}</span>
+				<span class="messenger-availability-text">${this.state.responseTime}</span>
 			</div>
 		`;
 		}
@@ -10791,6 +10906,9 @@
 				teamAvatars: options.teamAvatars || [],
 				greetingMessage: options.greetingMessage || 'Hi there 👋',
 				welcomeMessage: options.welcomeMessage || 'How can we help?',
+				onlineMessage: options.onlineMessage || "We're online now",
+				responseTime:
+					options.responseTime || 'We typically reply within a few minutes',
 				enableHelp: options.enableHelp !== false,
 				enableChangelog: resolvedEnableChangelog,
 				autoLoadData: options.autoLoadData !== false,
@@ -10812,6 +10930,8 @@
 				teamAvatars: this.messengerOptions.teamAvatars,
 				greetingMessage: this.messengerOptions.greetingMessage,
 				welcomeMessage: this.messengerOptions.welcomeMessage,
+				onlineMessage: this.messengerOptions.onlineMessage,
+				responseTime: this.messengerOptions.responseTime,
 				enableHelp: this.messengerOptions.enableHelp,
 				enableChangelog: this.messengerOptions.enableChangelog,
 				metadata: this.sdk?.apiService?.getMetadata() || null,
@@ -11133,6 +11253,7 @@
 				id: message.id,
 				content: message.content,
 				isOwn: message.sender_type === 'customer',
+				isSystem: message.sender_type === 'system',
 				timestamp: message.created_at,
 				attachments: attachments.length > 0 ? attachments : undefined,
 				sender: {
@@ -11318,7 +11439,9 @@
 			if (data.availability && typeof data.availability === 'object') {
 				const availability = data.availability;
 				this.messengerState.agentsOnline = Boolean(
-					availability.agentsOnline ?? availability.agents_online
+					availability.agentsOnline ??
+						availability.agents_online ??
+						availability.is_online
 				);
 				this.messengerState.onlineCount =
 					availability.onlineCount ?? availability.online_count ?? 0;
@@ -11446,6 +11569,7 @@
 							id: msg.id,
 							content: msg.content,
 							isOwn: msg.sender_type === 'customer',
+							isSystem: msg.sender_type === 'system',
 							timestamp: msg.created_at,
 							attachments:
 								attachments && attachments.length > 0 ? attachments : undefined,
@@ -11496,14 +11620,25 @@
 
 					this.messengerState.addConversation(newConversation);
 
-					this.messengerState.setMessages(conv.id, [
+					const initialMessages = [
 						{
 							id: 'msg_' + Date.now(),
 							content: message,
 							isOwn: true,
 							timestamp: new Date().toISOString(),
 						},
-					]);
+					];
+
+					initialMessages.push({
+						id: 'system_rt_' + Date.now(),
+						content: this.messengerState.agentsOnline
+							? 'One of our customer support agents will be with you shortly.'
+							: this.messengerState.responseTime,
+						isSystem: true,
+						timestamp: new Date().toISOString(),
+					});
+
+					this.messengerState.setMessages(conv.id, initialMessages);
 
 					this.messengerState.setActiveConversation(conv.id);
 					this.messengerState.setView('chat');
@@ -11529,7 +11664,8 @@
 			try {
 				const response = await this.apiService.checkAgentsOnline();
 				if (response.status && response.data) {
-					this.messengerState.agentsOnline = response.data.agents_online;
+					this.messengerState.agentsOnline =
+						response.data.agents_online ?? response.data.is_online ?? false;
 					this.messengerState.onlineCount = response.data.online_count || 0;
 					this.messengerState.responseTime = response.data.response_time || '';