@product7/product7-js 0.2.7 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.2.7",
+	"version": "0.3.0",
 	"description": "JavaScript SDK for integrating Product7 feedback widgets into any website",
 	"main": "dist/product7-js.js",
 	"module": "src/index.js",

package/src/styles/design-tokens.js

@@ -47,8 +47,8 @@ export const designTokens = `
   --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%);
@@ -57,7 +57,7 @@ export const designTokens = `
   --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;
   

package/src/styles/messenger-components.js

@@ -10,6 +10,84 @@ export const messengerComponentsStyles = `
   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: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+  line-height: 1.3;
+}
+
+.messenger-message-system-event-action {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--msg-text-secondary);
+  margin-top: -2px;
+}
+
+.messenger-message-system-event-time {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--msg-text-tertiary);
+}
+
 .messenger-message-own {
   align-self: flex-end;
   flex-direction: column;
@@ -50,7 +128,6 @@ export const messengerComponentsStyles = `
 .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;
 }
 
@@ -61,8 +138,8 @@ export const messengerComponentsStyles = `
 }
 
 .messenger-message-content {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
+  font-size: 0.875rem;
+  font-weight: 500;
   line-height: var(--line-height-relaxed);
 }
 
@@ -87,10 +164,14 @@ export const messengerComponentsStyles = `
   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;

package/src/styles/messenger-core.js

@@ -203,8 +203,8 @@ export const messengerCoreStyles = `
   --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%);

package/src/widgets/MessengerWidget.js

@@ -48,6 +48,9 @@ export class MessengerWidget extends BaseWidget {
 			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,
@@ -69,6 +72,8 @@ export class MessengerWidget extends BaseWidget {
 			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,
@@ -390,6 +395,7 @@ export class MessengerWidget extends BaseWidget {
 			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: {
@@ -575,7 +581,9 @@ export class MessengerWidget extends BaseWidget {
 		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;
@@ -703,6 +711,7 @@ export class MessengerWidget extends BaseWidget {
 						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,
@@ -753,14 +762,25 @@ export class MessengerWidget extends BaseWidget {
 
 				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');
@@ -786,7 +806,8 @@ export class MessengerWidget extends BaseWidget {
 		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 || '';
 

package/src/widgets/messenger/MessengerState.js

@@ -28,7 +28,9 @@ export class MessengerState {
 
 		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 = {};
 

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

@@ -186,6 +186,10 @@ export class ChatView {
 	}
 
 	_renderMessage(message) {
+		if (message.isSystem) {
+			return this._renderSystemMessage(message);
+		}
+
 		const isOwn = message.isOwn;
 		const messageClass = isOwn
 			? 'messenger-message-own'
@@ -205,12 +209,11 @@ export class ChatView {
 				<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}">
@@ -221,13 +224,53 @@ export class ChatView {
 						${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 rawName = message.sender.name || '';
+			const name = rawName
+				.split(' ')
+				.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+				.join(' ');
+			const avatarUrl = message.sender.avatarUrl;
+			const initial = name.charAt(0).toUpperCase() || '?';
+			const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
+			const colorIndex = rawName.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);
+
+			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>
+					<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>
 		`;
 	}
@@ -243,12 +286,7 @@ export class ChatView {
 	_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
@@ -267,11 +305,17 @@ export class ChatView {
 	_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) {

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

@@ -41,6 +41,7 @@ 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>
 
@@ -60,12 +61,7 @@ export class HomeView {
 		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
@@ -83,14 +79,12 @@ export class HomeView {
 
 	_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>
 			`;
 		}
@@ -98,7 +92,7 @@ export class HomeView {
 		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>
 		`;
 	}