@product7/product7-js 0.1.7 → 0.1.8

package/package.json

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

package/src/styles/messenger-core.js

@@ -154,7 +154,14 @@ export const messengerCoreStyles = `
   margin-left: 0;
 }
 
+.messenger-mobile-close-btn {
+  display: none;
+}
+
 @media (max-width: 480px) {
+  .messenger-mobile-close-btn {
+    display: flex;
+  }
   .messenger-panel {
     width: 100%;
     height: 100%;

package/src/styles/messenger-views.js

@@ -777,42 +777,35 @@ export const messengerViewsStyles = `
 .messenger-changelog-list {
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-5);
 }
 
 .messenger-changelog-card {
   display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5);
-  border-bottom: 1px solid var(--msg-border);
+  flex-direction: column;
+  border: 1px solid var(--msg-border);
+  border-radius: 10px;
+  overflow: hidden;
   cursor: pointer;
-  transition: background var(--transition-base);
-}
-
-.messenger-changelog-card:last-child {
-  border-bottom: none;
+  transition: box-shadow var(--transition-base), transform var(--transition-base);
 }
 
 .messenger-changelog-card:hover {
-  background: var(--msg-bg-hover);
-}
-
-.messenger-changelog-card:hover .messenger-changelog-arrow {
-  color: var(--color-primary);
-  transform: translateX(3px);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-1px);
 }
 
 .messenger-changelog-card:active {
-  transform: translateY(1px);
+  transform: translateY(0);
   transition-duration: 100ms;
 }
 
 .messenger-changelog-content {
-  flex: 1;
-  min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  gap: var(--spacing-1);
+  padding: var(--spacing-3) var(--spacing-4);
 }
 
 .messenger-changelog-meta {
@@ -850,9 +843,6 @@ export const messengerViewsStyles = `
   font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
   line-height: var(--line-height-snug);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .messenger-changelog-description {
@@ -867,24 +857,15 @@ export const messengerViewsStyles = `
 }
 
 .messenger-changelog-thumb {
-  width: 64px;
-  height: 64px;
-  flex-shrink: 0;
-  border-radius: 8px;
+  width: 100%;
   overflow: hidden;
-  border: 1px solid var(--msg-border);
+  border-bottom: 1px solid var(--msg-border);
 }
 
 .messenger-changelog-thumb img {
   width: 100%;
-  height: 100%;
+  height: 180px;
   display: block;
   object-fit: cover;
 }
-
-.messenger-changelog-arrow {
-  flex-shrink: 0;
-  color: var(--msg-text-tertiary);
-  transition: all var(--transition-base);
-}
 `;

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

@@ -29,8 +29,8 @@ export class ChangelogView {
 			<div class="messenger-changelog-header">
 				<div class="messenger-changelog-header-top">
 					<h2>Latest Updates</h2>
-					<button class="sdk-close-btn messenger-changelog-close-btn" aria-label="Close">
-						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					<button class="sdk-close-btn messenger-changelog-close-btn messenger-mobile-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
@@ -70,30 +70,13 @@ export class ChangelogView {
 	}
 
 	_renderChangelogCard(item) {
-		const dateStr = this._formatDate(item.publishedAt || item.date);
-		const labelsHtml =
-			item.labels && item.labels.length > 0
-				? item.labels
-						.map((label) => {
-							const bg = label.color || '#E5E7EB';
-							const color = this._getContrastColor(bg);
-							return `<span class="messenger-changelog-tag" style="background:${bg};color:${color};">${label.name}</span>`;
-						})
-						.join('')
-				: '';
-
 		return `
 			<div class="messenger-changelog-card" data-changelog-id="${item.id}">
+				${item.coverImage ? `<div class="messenger-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.parentElement.style.display='none';" /></div>` : ''}
 				<div class="messenger-changelog-content">
-					<div class="messenger-changelog-meta">
-						${dateStr ? `<span class="messenger-changelog-date">${dateStr}</span>` : ''}
-						${labelsHtml}
-					</div>
 					<h3 class="messenger-changelog-title">${item.title}</h3>
 					${item.description ? `<p class="messenger-changelog-description">${this._stripHtml(item.description)}</p>` : ''}
 				</div>
-				${item.coverImage ? `<div class="messenger-changelog-thumb"><img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" /></div>` : ''}
-				<iconify-icon icon="ph:caret-right" class="messenger-changelog-arrow" width="16" height="16"></iconify-icon>
 			</div>
 		`;
 	}
@@ -136,11 +119,12 @@ export class ChangelogView {
 	}
 
 	_attachEvents() {
-		this.element
-			.querySelector('.messenger-changelog-close-btn')
-			.addEventListener('click', () => {
+		const mobileCloseBtn = this.element.querySelector('.messenger-changelog-close-btn');
+		if (mobileCloseBtn) {
+			mobileCloseBtn.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
+		}
 
 		this._attachChangelogEvents();
 	}

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

@@ -87,11 +87,8 @@ export class ChatView {
 					<span class="messenger-chat-subtitle">The team can also help</span>
 				</div>
 				<div class="messenger-chat-header-actions">
-					<button class="sdk-btn-icon" aria-label="More options">
-						<iconify-icon icon="ph:dots-three-outline-duotone" width="20" height="20"></iconify-icon>
-					</button>
-					<button class="sdk-close-btn" aria-label="Close">
-						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					<button class="sdk-btn-icon sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
@@ -368,11 +365,12 @@ export class ChatView {
 				this.state.setView('messages');
 			});
 
-		this.element
-			.querySelector('.sdk-close-btn')
-			.addEventListener('click', () => {
+		const mobileCloseBtn = this.element.querySelector('.messenger-mobile-close-btn');
+		if (mobileCloseBtn) {
+			mobileCloseBtn.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
+		}
 
 		const input = this.element.querySelector('.messenger-compose-input');
 		const sendBtn = this.element.querySelector('.messenger-compose-send');

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

@@ -28,8 +28,8 @@ export class HelpView {
 			<div class="messenger-help-header">
 				<div class="messenger-help-header-top">
 					<h2>Help</h2>
-					<button class="sdk-close-btn messenger-help-close-btn" aria-label="Close">
-						<iconify-icon icon="ph:x-duotone" width="18" height="18"></iconify-icon>
+					<button class="sdk-close-btn messenger-help-close-btn messenger-mobile-close-btn" aria-label="Close">
+						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 				<div class="messenger-help-search-wrap">
@@ -196,11 +196,12 @@ export class HelpView {
 	}
 
 	_attachEvents() {
-		this.element
-			.querySelector('.messenger-help-close-btn')
-			.addEventListener('click', () => {
+		const mobileCloseBtn = this.element.querySelector('.messenger-help-close-btn');
+		if (mobileCloseBtn) {
+			mobileCloseBtn.addEventListener('click', () => {
 				this.state.setOpen(false);
 			});
+		}
 
 		const searchInput = this.element.querySelector(
 			'.messenger-help-search-input'

package/types/index.d.ts

@@ -45,6 +45,7 @@ declare module '@product7/product7-js' {
 		label?: string;
 		text?: string;
 		customStyles?: Record<string, string>;
+		trigger?: boolean | string | Element;
 	}
 
 	export interface WidgetConfigMap {