@product7/product7-js 0.3.9 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@product7/product7-js",
-	"version": "0.3.9",
+	"version": "0.4.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

@@ -48,7 +48,7 @@ export const designTokens = `
   --msg-bg-hover: #F9FAFB;
   --msg-bg-input: rgba(255, 255, 255, 0.7);
   --msg-bg-bubble-own: #F3F4F6;
-  --msg-bg-bubble-received: rgba(21, 94, 239, 0.06);
+  --msg-bg-bubble-received: #155EEF;
   --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%);

package/src/styles/messenger-components.js

@@ -129,13 +129,13 @@ export const messengerComponentsStyles = `
 
 .messenger-message-own .messenger-message-bubble {
   background: var(--msg-bg-bubble-own);
-  color: var(--msg-text);
+  color: #111827;
   border-bottom-right-radius: 0.25rem;
 }
 
 .messenger-message-received .messenger-message-bubble {
   background: var(--msg-bg-bubble-received);
-  color: var(--msg-text);
+  color: #ffffff;
   border-bottom-left-radius: 0.25rem;
 }
 

package/src/styles/messenger-core.js

@@ -205,7 +205,7 @@ export const messengerCoreStyles = `
   --msg-bg-hover: #232930;
   --msg-bg-input: #1a1e24;
   --msg-bg-bubble-own: #1e2330;
-  --msg-bg-bubble-received: rgba(21, 94, 239, 0.12);
+  --msg-bg-bubble-received: #1D4ED8;
   --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/utils/NotificationSound.js

@@ -0,0 +1,141 @@
+/**
+ * NotificationSound — plays a soft ping when a new agent message arrives.
+ *
+ * Default: the bundled notification-sound.mp3 (inlined as base64 at build time).
+ * Falls back to a Web Audio API synthetic chime if the file was not bundled.
+ * Override: pass `soundUrl` (MP3/OGG/WAV URL or base64 data URI) to use a different file.
+ */
+import BUNDLED_SOUND from 'virtual:notification-sound';
+
+export class NotificationSound {
+	constructor({ soundUrl = BUNDLED_SOUND, volume = 0.4 } = {}) {
+		this._soundUrl = soundUrl;
+		this._volume = Math.min(1, Math.max(0, volume));
+		this._enabled = true;
+		this._audioCtx = null;
+		this._audioBuffer = null;
+		this._loadPromise = null;
+
+		if (soundUrl) {
+			this._loadPromise = this._loadAudioFile(soundUrl);
+		}
+	}
+
+	setEnabled(enabled) {
+		this._enabled = Boolean(enabled);
+	}
+
+	setVolume(volume) {
+		this._volume = Math.min(1, Math.max(0, volume));
+	}
+
+	async play() {
+		if (!this._enabled) return;
+		if (typeof window === 'undefined') return;
+
+		try {
+			if (this._soundUrl) {
+				await this._playFile();
+			} else {
+				this._playSynthetic();
+			}
+		} catch {
+			/* autoplay policy or context suspended — silent fail */
+		}
+	}
+
+	// ── Private ────────────────────────────────────────────────────────────────
+
+	_getAudioContext() {
+		if (!this._audioCtx || this._audioCtx.state === 'closed') {
+			const AudioContext = window.AudioContext || window.webkitAudioContext;
+			if (!AudioContext) return null;
+			this._audioCtx = new AudioContext();
+		}
+		return this._audioCtx;
+	}
+
+	/**
+	 * Synthetic two-tone chime via Web Audio API — no file required.
+	 *  • First tone:  880 Hz, 0–80 ms
+	 *  • Second tone: 1100 Hz, 60–160 ms
+	 * Sounds like a gentle message ping.
+	 */
+	_playSynthetic() {
+		const ctx = this._getAudioContext();
+		if (!ctx) return;
+
+		if (ctx.state === 'suspended') {
+			ctx.resume().catch(() => {});
+		}
+
+		const now = ctx.currentTime;
+		const vol = this._volume;
+
+		const tones = [
+			{ freq: 880, start: 0, end: 0.08 },
+			{ freq: 1100, start: 0.06, end: 0.16 },
+		];
+
+		tones.forEach(({ freq, start, end }) => {
+			const osc = ctx.createOscillator();
+			const gain = ctx.createGain();
+
+			osc.type = 'sine';
+			osc.frequency.value = freq;
+
+			gain.gain.setValueAtTime(0, now + start);
+			gain.gain.linearRampToValueAtTime(vol, now + start + 0.01);
+			gain.gain.linearRampToValueAtTime(0, now + end);
+
+			osc.connect(gain);
+			gain.connect(ctx.destination);
+
+			osc.start(now + start);
+			osc.stop(now + end + 0.01);
+		});
+	}
+
+	async _loadAudioFile(url) {
+		try {
+			const ctx = this._getAudioContext();
+			if (!ctx) return;
+
+			const response = await fetch(url);
+			const arrayBuffer = await response.arrayBuffer();
+			this._audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+		} catch {
+			/* failed to load — fall back to synthetic */
+			this._soundUrl = null;
+		}
+	}
+
+	async _playFile() {
+		if (this._loadPromise) {
+			await this._loadPromise;
+			this._loadPromise = null;
+		}
+
+		if (!this._audioBuffer) {
+			this._playSynthetic();
+			return;
+		}
+
+		const ctx = this._getAudioContext();
+		if (!ctx) return;
+
+		if (ctx.state === 'suspended') {
+			await ctx.resume();
+		}
+
+		const source = ctx.createBufferSource();
+		const gain = ctx.createGain();
+
+		source.buffer = this._audioBuffer;
+		gain.gain.value = this._volume;
+
+		source.connect(gain);
+		gain.connect(ctx.destination);
+		source.start();
+	}
+}

package/src/widgets/MessengerWidget.js

@@ -1,3 +1,4 @@
+import { NotificationSound } from '../utils/NotificationSound.js';
 import { WebSocketService } from '../core/WebSocketService.js';
 import {
 	applyMessengerCustomStyles,
@@ -94,6 +95,19 @@ export class MessengerWidget extends BaseWidget {
 		this._wsUnsubscribers = [];
 		this._feedbackWidget = null;
 
+		const notificationSoundOption = options.notificationSound !== undefined
+			? options.notificationSound
+			: true;
+
+		this._notificationSound = new NotificationSound({
+			soundUrl: typeof notificationSoundOption === 'string' ? notificationSoundOption : null,
+			volume: options.notificationVolume ?? 0.4,
+		});
+
+		if (notificationSoundOption === false) {
+			this._notificationSound.setEnabled(false);
+		}
+
 		this._handleOpenChange = this._handleOpenChange.bind(this);
 		this._handleWebSocketMessage = this._handleWebSocketMessage.bind(this);
 		this._handleTypingStarted = this._handleTypingStarted.bind(this);
@@ -418,6 +432,18 @@ export class MessengerWidget extends BaseWidget {
 			optimisticMatchWindowMs: 30000,
 		});
 
+		const isOwnMessage = message.sender_type === 'customer';
+
+		if (!isOwnMessage) {
+			const panelOpenOnThisConversation =
+				this.messengerState.isOpen &&
+				this.messengerState.activeConversationId === conversation_id;
+
+			if (!panelOpenOnThisConversation) {
+				this._notificationSound.play();
+			}
+		}
+
 		if (
 			!this.messengerState.isOpen ||
 			this.messengerState.activeConversationId !== conversation_id

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

@@ -295,9 +295,25 @@ export class ChatView {
 			`;
 		}
 
+		// Render automated/bot messages as a proper received chat bubble
+		const teamName = this.state.teamName || 'Support';
+		const logoUrl = this.options.logoUrl;
+		const avatarHtml = logoUrl
+			? `<div class="sdk-avatar sdk-avatar-sm"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(teamName)}" /></div>`
+			: `<div class="sdk-avatar sdk-avatar-sm">${teamName.charAt(0).toUpperCase()}</div>`;
+		const timeStr = this._formatMessageTime(message.timestamp);
+
 		return `
-			<div class="messenger-message-system">
-				<span class="messenger-message-system-text">${this._escapeHtml(content)}</span>
+			<div class="messenger-message messenger-message-received">
+				<div class="messenger-message-row">
+					<div class="messenger-message-avatar">${avatarHtml}</div>
+					<div class="messenger-message-wrapper">
+						<div class="messenger-message-bubble">
+							<div class="messenger-message-content">${this._formatMessageContent(content)}</div>
+						</div>
+					</div>
+				</div>
+				${timeStr ? `<div class="messenger-message-meta"><span>${timeStr}</span></div>` : ''}
 			</div>
 		`;
 	}