@product7/product7-js 0.1.6 → 0.1.8

package/dist/product7-js.js

@@ -3880,6 +3880,49 @@
    COMPOSE AREA
    ======================================== */
 
+/* ========================================
+   EMOJI PICKER
+   ======================================== */
+
+.messenger-emoji-picker-container {
+  padding: 0 var(--spacing-3) var(--spacing-2);
+}
+
+.messenger-emoji-picker-container emoji-picker {
+  width: 100%;
+  height: 320px;
+  border-radius: var(--radius-xl);
+  border: 1px solid var(--msg-border);
+  box-shadow: var(--shadow-lg);
+
+  --background: var(--msg-bg);
+  --border-color: var(--msg-border);
+  --border-radius: 12px;
+  --category-font-color: var(--msg-text-secondary);
+  --category-font-size: 0.7rem;
+  --emoji-size: 1.35rem;
+  --emoji-padding: 0.3rem;
+  --input-border-color: var(--msg-border);
+  --input-border-radius: 8px;
+  --input-font-color: var(--msg-text);
+  --input-font-size: 0.8rem;
+  --input-placeholder-color: var(--msg-text-tertiary);
+  --input-padding: 0.375rem 0.625rem;
+  --outline-color: var(--color-primary);
+  --num-columns: 8;
+  --indicator-color: var(--color-primary);
+  --hover-background: var(--msg-bg-hover);
+}
+
+.messenger-widget.theme-dark .messenger-emoji-picker-container emoji-picker {
+  --background: var(--msg-bg);
+  --border-color: var(--msg-border);
+  --category-font-color: var(--msg-text-secondary);
+  --input-font-color: var(--msg-text);
+  --input-placeholder-color: var(--msg-text-tertiary);
+  --hover-background: var(--msg-bg-hover);
+}
+
 .messenger-chat-compose {
   display: flex;
   flex-direction: column;
@@ -4411,7 +4454,14 @@
   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%;
@@ -5438,42 +5488,35 @@
 .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 {
@@ -5511,9 +5554,6 @@
   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 {
@@ -5528,26 +5568,17 @@
 }
 
 .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);
-}
 `;
 
 	const messengerStyles =
@@ -8983,8 +9014,8 @@
 			<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>
@@ -9024,30 +9055,13 @@
 		}
 
 		_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>
 		`;
 		}
@@ -9090,11 +9104,12 @@
 		}
 
 		_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();
 		}
@@ -9138,6 +9153,8 @@
 			this._typingIndicator = null;
 			this._isConversationClosed = false;
 			this._pendingAttachments = [];
+			this._emojiPickerOpen = false;
+			this._emojiOutsideHandler = null;
 		}
 
 		render() {
@@ -9214,11 +9231,8 @@
 					<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>
@@ -9258,7 +9272,7 @@
 						<button class="sdk-btn-icon messenger-compose-attach" aria-label="Attach file">
 							<iconify-icon icon="ph:paperclip-duotone" width="20" height="20"></iconify-icon>
 						</button>
-						<button class="sdk-btn-icon" aria-label="Emoji">
+						<button class="sdk-btn-icon messenger-emoji-btn" aria-label="Emoji">
 							<iconify-icon icon="ph:smiley-duotone" width="20" height="20"></iconify-icon>
 						</button>
 					</div>
@@ -9495,11 +9509,12 @@
 					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');
@@ -9527,6 +9542,14 @@
 				});
 			}
 
+			const emojiBtn = this.element.querySelector('.messenger-emoji-btn');
+			if (emojiBtn) {
+				emojiBtn.addEventListener('click', (e) => {
+					e.stopPropagation();
+					this._toggleEmojiPicker();
+				});
+			}
+
 			const attachBtn = this.element.querySelector('.messenger-compose-attach');
 			const fileInput = this.element.querySelector(
 				'.messenger-compose-file-input'
@@ -9657,6 +9680,85 @@
 			this._updateSendButtonState();
 		}
 
+		_loadEmojiPicker() {
+			if (document.querySelector('#product7-emoji-picker-script')) {
+				return Promise.resolve();
+			}
+			return new Promise((resolve, reject) => {
+				const script = document.createElement('script');
+				script.id = 'product7-emoji-picker-script';
+				script.type = 'module';
+				script.src =
+					'https://cdn.jsdelivr.net/npm/emoji-picker-element@1/index.js';
+				script.onload = resolve;
+				script.onerror = reject;
+				document.head.appendChild(script);
+			});
+		}
+
+		async _toggleEmojiPicker() {
+			const existing = this.element.querySelector(
+				'.messenger-emoji-picker-container'
+			);
+			if (existing) {
+				existing.remove();
+				this._emojiPickerOpen = false;
+				if (this._emojiOutsideHandler) {
+					document.removeEventListener('click', this._emojiOutsideHandler);
+					this._emojiOutsideHandler = null;
+				}
+				return;
+			}
+
+			try {
+				await this._loadEmojiPicker();
+			} catch {
+				return;
+			}
+
+			const container = document.createElement('div');
+			container.className = 'messenger-emoji-picker-container';
+
+			const picker = document.createElement('emoji-picker');
+			container.appendChild(picker);
+
+			const compose = this.element.querySelector('.messenger-chat-compose');
+			compose.parentNode.insertBefore(container, compose);
+			this._emojiPickerOpen = true;
+
+			picker.addEventListener('emoji-click', (e) => {
+				this._insertEmoji(e.detail.unicode);
+				container.remove();
+				this._emojiPickerOpen = false;
+				if (this._emojiOutsideHandler) {
+					document.removeEventListener('click', this._emojiOutsideHandler);
+					this._emojiOutsideHandler = null;
+				}
+			});
+
+			this._emojiOutsideHandler = (e) => {
+				if (!container.contains(e.target) && !e.target.closest('.messenger-emoji-btn')) {
+					container.remove();
+					this._emojiPickerOpen = false;
+					document.removeEventListener('click', this._emojiOutsideHandler);
+					this._emojiOutsideHandler = null;
+				}
+			};
+			setTimeout(() => document.addEventListener('click', this._emojiOutsideHandler), 0);
+		}
+
+		_insertEmoji(emoji) {
+			const input = this.element.querySelector('.messenger-compose-input');
+			if (!input) return;
+			const start = input.selectionStart;
+			const end = input.selectionEnd;
+			input.value =
+				input.value.slice(0, start) + emoji + input.value.slice(end);
+			input.selectionStart = input.selectionEnd = start + emoji.length;
+			input.focus();
+			input.dispatchEvent(new Event('input'));
+		}
+
 		_startTyping() {
 			if (this._isConversationClosed) return;
 			if (!this._isTyping && this.state.activeConversationId) {
@@ -9714,6 +9816,9 @@
 				clearTimeout(this._typingTimeout);
 			}
 			this._stopTyping();
+			if (this._emojiOutsideHandler) {
+				document.removeEventListener('click', this._emojiOutsideHandler);
+			}
 			if (this.element && this.element.parentNode) {
 				this.element.parentNode.removeChild(this.element);
 			}
@@ -9995,8 +10100,8 @@
 			<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">
@@ -10163,11 +10268,12 @@
 		}
 
 		_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'