@product7/product7-js 0.1.6 → 0.1.7

package/package.json

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

package/src/styles/messenger-components.js

@@ -253,6 +253,49 @@ export const messengerComponentsStyles = `
    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;

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

@@ -9,6 +9,8 @@ export class ChatView {
 		this._typingIndicator = null;
 		this._isConversationClosed = false;
 		this._pendingAttachments = [];
+		this._emojiPickerOpen = false;
+		this._emojiOutsideHandler = null;
 	}
 
 	render() {
@@ -129,7 +131,7 @@ export class ChatView {
 						<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>
@@ -398,6 +400,14 @@ export class ChatView {
 			});
 		}
 
+		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'
@@ -528,6 +538,85 @@ export class ChatView {
 		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) {
@@ -585,6 +674,9 @@ export class ChatView {
 			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);
 		}