@product7/feedback-sdk 1.3.8 → 1.3.9

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

@@ -167,8 +167,12 @@ export class PreChatFormView {
 		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 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();
@@ -191,7 +195,7 @@ export class PreChatFormView {
 			if (pendingMessage && this.options.onStartConversation) {
 				this.state.pendingMessage = null;
 				this.state.setView('chat');
-				
+
 				await this.options.onStartConversation(
 					pendingMessage.content,
 					pendingMessage.attachments
@@ -201,7 +205,10 @@ export class PreChatFormView {
 			}
 		} catch (error) {
 			console.error('[PreChatFormView] Error submitting form:', error);
-			this._showError('messenger-email-error', 'Something went wrong. Please try again.');
+			this._showError(
+				'messenger-email-error',
+				'Something went wrong. Please try again.'
+			);
 
 			this._isSubmitting = false;
 			submitBtn.disabled = false;
@@ -215,4 +222,4 @@ export class PreChatFormView {
 			this.element.parentNode.removeChild(this.element);
 		}
 	}
-}
+}

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