@product7/feedback-sdk 1.3.7 → 1.3.9

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

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

@@ -30,31 +30,30 @@ export class HomeView {
 		const recentChangelogHtml = this._renderRecentChangelog();
 
 		this.element.innerHTML = `
-			<div class="messenger-home-header">
-				<div class="messenger-home-header-top">
-					<div class="messenger-home-logo">
-						${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
+			<div class="messenger-home-scroll">
+				<div class="messenger-home-header">
+					<div class="messenger-home-header-top">
+						<div class="messenger-home-logo">
+							${this.options.logoUrl ? `<img src="${this.options.logoUrl}" alt="${this.state.teamName}" />` : ''}
+						</div>
+						<div class="messenger-home-avatars">${avatarsHtml}</div>
+						<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-home-welcome">
+						<span class="messenger-home-greeting">Hi there 👋</span>
+						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
 					</div>
-					<div class="messenger-home-avatars">${avatarsHtml}</div>
-					<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-home-welcome">
-					<span class="messenger-home-greeting">Hello there.</span>
-					<span class="messenger-home-question">${this.state.welcomeMessage}</span>
-					${this._renderAvailabilityStatus()}
 				</div>
-			</div>
-
-			<div class="messenger-home-body">
-				${this._renderMessageButton()}
 
-				${this._renderFeaturedCard()}
-
-				${recentChangelogHtml}
+				<div class="messenger-home-body">
+					${this._renderMessageButton()}
+					${this._renderFeaturedCard()}
+					${recentChangelogHtml}
+				</div>
 			</div>
 		`;
 
@@ -63,22 +62,24 @@ export class HomeView {
 
 	_renderAvatarStack() {
 		const avatars = this.state.teamAvatars;
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
+
 		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 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>
 			`;
 		}
 
 		const avatarItems = avatars
-			.slice(0, 3)
-			.map((avatar) => {
+			.slice(0, 4)
+			.map((avatar, index) => {
 				if (typeof avatar === 'string' && avatar.startsWith('http')) {
-					return `<div class="sdk-avatar sdk-avatar-md"><img src="${avatar}" alt="Team member" /></div>`;
+					return `<div class="sdk-avatar sdk-avatar-lg"><img src="${avatar}" alt="Team member" /></div>`;
 				}
-				return `<div class="sdk-avatar sdk-avatar-md">${avatar.charAt(0).toUpperCase()}</div>`;
+				return `<div class="sdk-avatar sdk-avatar-lg" style="background: ${colors[index % colors.length]};">${avatar.charAt(0).toUpperCase()}</div>`;
 			})
 			.join('');
 
@@ -112,28 +113,48 @@ export class HomeView {
 			(c) => c.status === 'open'
 		);
 
+		const sendIcon = `
+			<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>
+		`;
+
+		const caretIcon = `
+			<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"/>
+				<polyline points="96 48 176 128 96 208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+			</svg>
+		`;
+
 		if (openConversation) {
 			const preview = openConversation.lastMessage
-				? (openConversation.lastMessage.length > 40
+				? openConversation.lastMessage.length > 40
 					? openConversation.lastMessage.substring(0, 40) + '...'
-					: openConversation.lastMessage)
+					: openConversation.lastMessage
 				: 'Continue your conversation';
-
 			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>
-						<span class="messenger-home-continue-preview">${preview}</span>
 					</div>
-					<i class="ph ph-arrow-right"></i>
+					${sendIcon}
+				</button>
+				<button class="messenger-home-message-btn" data-action="feedback">
+					<span class="messenger-home-continue-label">Leave us feedback</span>
+					${caretIcon}
 				</button>
 			`;
 		}
-
 		return `
 			<button class="messenger-home-message-btn">
-				<span>Send us a message</span>
-				<i class="ph ph-arrow-right"></i>
+				<span>Start a conversation</span>
+				${sendIcon}
+			</button>
+			<button class="messenger-home-message-btn" data-action="feedback">
+				<span>Leave us feedback</span>
+				${caretIcon}
 			</button>
 		`;
 	}
@@ -213,20 +234,17 @@ export class HomeView {
 				this.state.setOpen(false);
 			});
 
-		// Send message / continue conversation button
 		const msgBtn = this.element.querySelector('.messenger-home-message-btn');
 		if (msgBtn) {
 			msgBtn.addEventListener('click', () => {
 				const convId = msgBtn.dataset.conversationId;
 				if (convId) {
-					// Continue existing open conversation
 					this.state.setActiveConversation(convId);
 					this.state.setView('chat');
 					if (this.options.onSelectConversation) {
 						this.options.onSelectConversation(convId);
 					}
 				} else {
-					// No open conversation — start new
 					this.state.setActiveConversation(null);
 					this.state.setView('chat');
 				}
@@ -274,4 +292,4 @@ export class HomeView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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

@@ -99,7 +99,6 @@ export class PreChatFormView {
 	}
 
 	_attachEvents() {
-		// Form validation
 		const form = this.element.querySelector('form');
 		const emailInput = this.element.querySelector('#messenger-prechat-email');
 		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
@@ -164,62 +163,59 @@ export class PreChatFormView {
 		}
 	}
 
-async _handleSubmit() {
-	const nameInput = this.element.querySelector('#messenger-prechat-name');
-	const emailInput = this.element.querySelector('#messenger-prechat-email');
-	const submitBtn = this.element.querySelector('.messenger-prechat-submit');
-	const submitText = submitBtn.querySelector('.messenger-prechat-submit-text');
-	const submitLoading = submitBtn.querySelector('.messenger-prechat-submit-loading');
-
-	const name = nameInput.value.trim();
-	const email = emailInput.value.trim();
-
-	this._isSubmitting = true;
-	submitBtn.disabled = true;
-	submitText.style.display = 'none';
-	submitLoading.style.display = 'inline-flex';
-
-	try {
-		// Call identification API
-		if (this.options.onIdentifyContact) {
-			await this.options.onIdentifyContact({ name, email });
-		}
+	async _handleSubmit() {
+		const nameInput = this.element.querySelector('#messenger-prechat-name');
+		const emailInput = this.element.querySelector('#messenger-prechat-email');
+		const submitBtn = this.element.querySelector('.messenger-prechat-submit');
+		const submitText = submitBtn.querySelector(
+			'.messenger-prechat-submit-text'
+		);
+		const submitLoading = submitBtn.querySelector(
+			'.messenger-prechat-submit-loading'
+		);
+
+		const name = nameInput.value.trim();
+		const email = emailInput.value.trim();
+
+		this._isSubmitting = true;
+		submitBtn.disabled = true;
+		submitText.style.display = 'none';
+		submitLoading.style.display = 'inline-flex';
+
+		try {
+			if (this.options.onIdentifyContact) {
+				await this.options.onIdentifyContact({ name, email });
+			}
 
-		// Update state
-		if (!this.state.userContext) {
-			this.state.userContext = {};
-		}
-		this.state.userContext.name = name;
-		this.state.userContext.email = email;
-		this.state.isIdentified = true;
+			this.state.setIdentified(true, { name, email });
 
-		this._isSubmitting = false;
+			this._isSubmitting = false;
 
-		// Process pending message if exists
-		const pendingMessage = this.state.pendingMessage;
-		if (pendingMessage && this.options.onStartConversation) {
-			this.state.pendingMessage = null;
-			this.state.setView('chat');
-			
-			// Start conversation with pending message
-			await this.options.onStartConversation(
-				pendingMessage.content,
-				pendingMessage.attachments
+			const pendingMessage = this.state.pendingMessage;
+			if (pendingMessage && this.options.onStartConversation) {
+				this.state.pendingMessage = null;
+				this.state.setView('chat');
+
+				await this.options.onStartConversation(
+					pendingMessage.content,
+					pendingMessage.attachments
+				);
+			} else {
+				this.state.setView('chat');
+			}
+		} catch (error) {
+			console.error('[PreChatFormView] Error submitting form:', error);
+			this._showError(
+				'messenger-email-error',
+				'Something went wrong. Please try again.'
 			);
-		} else {
-			// No pending message, just go to chat
-			this.state.setView('chat');
-		}
-	} catch (error) {
-		console.error('[PreChatFormView] Error submitting form:', error);
-		this._showError('messenger-email-error', 'Something went wrong. Please try again.');
 
-		this._isSubmitting = false;
-		submitBtn.disabled = false;
-		submitText.style.display = 'inline';
-		submitLoading.style.display = 'none';
+			this._isSubmitting = false;
+			submitBtn.disabled = false;
+			submitText.style.display = 'inline';
+			submitLoading.style.display = 'none';
+		}
 	}
-}
 
 	destroy() {
 		if (this.element && this.element.parentNode) {

package/src/styles/messenger-help.js

@@ -1,298 +0,0 @@
-export const messengerHelpStyles = `
-
-.messenger-help-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  position: relative;
-}
-
-.messenger-help-header h2 {
-  margin: 0;
-  font-size: 17px;
-  font-weight: 600;
-  color: white;
-}
-
-.messenger-help-header .messenger-close-btn {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.messenger-help-search {
-  padding: 0 16px 16px;
-}
-
-.messenger-help-search-wrapper {
-  display: flex;
-  align-items: center;
-  background: #2c2c2e;
-  border-radius: 12px;
-  padding: 14px 16px;
-  position: relative;
-}
-
-.messenger-help-search-icon {
-  position: absolute;
-  right: 16px;
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.messenger-help-search-input {
-  flex: 1;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: white;
-  font-size: 16px;
-  font-family: inherit;
-  padding-right: 32px;
-}
-
-.messenger-help-search-input::placeholder {
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.messenger-help-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0;
-}
-
-.messenger-help-collections-header {
-  font-size: 17px;
-  font-weight: 600;
-  color: white;
-  padding: 12px 16px 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.messenger-help-collections {
-  padding: 0;
-}
-
-.messenger-help-collection {
-  display: flex;
-  align-items: center;
-  padding: 10px 16px;
-  cursor: pointer;
-  transition: background 0.2s ease;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.messenger-help-collection:hover {
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.messenger-help-collection-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.messenger-help-collection-title {
-  margin: 0 0 2px;
-  font-size: 14px;
-  font-weight: 600;
-  color: white;
-}
-
-.messenger-help-collection-desc {
-  margin: 0 0 2px;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
-  line-height: 1.3;
-}
-
-.messenger-help-collection-count {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.messenger-help-collection-arrow {
-  color: rgba(255, 255, 255, 0.3);
-  flex-shrink: 0;
-  margin-left: 12px;
-}
-
-.messenger-help-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  text-align: center;
-  padding: 40px;
-}
-
-.messenger-help-empty-icon {
-  color: rgba(255, 255, 255, 0.3);
-  margin-bottom: 16px;
-}
-
-.messenger-help-empty h3 {
-  margin: 0 0 8px;
-  font-size: 18px;
-  font-weight: 600;
-  color: white;
-}
-
-.messenger-help-empty p {
-  margin: 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-
-.messenger-changelog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.messenger-changelog-header h2 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: white;
-}
-
-.messenger-changelog-subheader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.messenger-changelog-latest {
-  font-size: 12px;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.messenger-changelog-team {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.messenger-changelog-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.messenger-changelog-card {
-  background: #2c2c2e;
-  border-radius: 12px;
-  overflow: hidden;
-  margin-bottom: 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.messenger-changelog-card:hover {
-  background: #3c3c3e;
-  transform: translateY(-2px);
-}
-
-.messenger-changelog-cover {
-  height: 120px;
-  overflow: hidden;
-}
-
-.messenger-changelog-cover img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.messenger-changelog-content {
-  padding: 16px;
-}
-
-.messenger-changelog-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.messenger-changelog-tag {
-  font-size: 11px;
-  font-weight: 600;
-  color: white;
-  background: rgba(88, 86, 214, 0.3);
-  padding: 4px 10px;
-  border-radius: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.messenger-changelog-title {
-  margin: 0 0 8px;
-  font-size: 14px;
-  font-weight: 600;
-  color: white;
-  line-height: 1.3;
-}
-
-.messenger-changelog-description {
-  margin: 0 0 12px;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.6);
-  line-height: 1.4;
-}
-
-.messenger-changelog-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.messenger-changelog-date {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.messenger-changelog-arrow {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-.messenger-changelog-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  text-align: center;
-  padding: 40px;
-}
-
-.messenger-changelog-empty-icon {
-  color: rgba(255, 255, 255, 0.3);
-  margin-bottom: 16px;
-}
-
-.messenger-changelog-empty h3 {
-  margin: 0 0 8px;
-  font-size: 18px;
-  font-weight: 600;
-  color: white;
-}
-
-.messenger-changelog-empty p {
-  margin: 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.5);
-}
-`;