@product7/feedback-sdk 1.1.8 → 1.2.0

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

@@ -0,0 +1,191 @@
+/**
+ * HelpView - Help collections browse with Intercom-style design
+ */
+export class HelpView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-help-view';
+
+		this._updateContent();
+
+		// Subscribe to state changes
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (type === 'helpArticlesUpdate' || type === 'helpSearchChange') {
+				this._updateCollectionsList();
+			}
+		});
+
+		return this.element;
+	}
+
+	_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="messenger-close-btn" aria-label="Close">
+					<i class="ph ph-x" style="font-size: 20px;"></i>
+				</button>
+			</div>
+
+			<div class="messenger-help-search">
+				<div class="messenger-help-search-wrapper">
+					<input
+						type="text"
+						class="messenger-help-search-input"
+						placeholder="Search for help"
+						value="${searchQuery}"
+					/>
+					<i class="ph ph-magnifying-glass messenger-help-search-icon" style="font-size: 18px;"></i>
+				</div>
+			</div>
+
+			<div class="messenger-help-body">
+				<div class="messenger-help-collections-header">
+					${collectionCount} collections
+				</div>
+				<div class="messenger-help-collections"></div>
+			</div>
+		`;
+
+		this._updateCollectionsList();
+		this._attachEvents();
+	}
+
+	_updateCollectionsList() {
+		const collectionsContainer = this.element.querySelector(
+			'.messenger-help-collections'
+		);
+		const collections = this.state.helpArticles || [];
+		const searchQuery = (this.state.helpSearchQuery || '').toLowerCase();
+
+		// Filter collections by search
+		const filteredCollections = searchQuery
+			? collections.filter(
+					(c) =>
+						c.title.toLowerCase().includes(searchQuery) ||
+						(c.description && c.description.toLowerCase().includes(searchQuery))
+				)
+			: collections;
+
+		// Update collection count
+		const headerEl = this.element.querySelector(
+			'.messenger-help-collections-header'
+		);
+		if (headerEl) {
+			headerEl.textContent = `${filteredCollections.length} collections`;
+		}
+
+		if (filteredCollections.length === 0) {
+			collectionsContainer.innerHTML = this._renderEmptyState();
+			return;
+		}
+
+		collectionsContainer.innerHTML = filteredCollections
+			.map((collection) => this._renderCollectionItem(collection))
+			.join('');
+
+		// Attach click events
+		this._attachCollectionEvents();
+	}
+
+	_renderCollectionItem(collection) {
+		const articleCount = collection.articleCount || 0;
+		return `
+			<div class="messenger-help-collection" data-collection-id="${collection.id}">
+				<div class="messenger-help-collection-content">
+					<h3 class="messenger-help-collection-title">${collection.title}</h3>
+					<p class="messenger-help-collection-desc">${collection.description || ''}</p>
+					<span class="messenger-help-collection-count">${articleCount} articles</span>
+				</div>
+				<i class="ph ph-caret-right messenger-help-collection-arrow" style="font-size: 20px;"></i>
+			</div>
+		`;
+	}
+
+	_renderEmptyState() {
+		const isSearching = this.state.helpSearchQuery;
+
+		if (isSearching) {
+			return `
+				<div class="messenger-help-empty">
+					<div class="messenger-help-empty-icon">
+						<i class="ph ph-magnifying-glass" style="font-size: 48px;"></i>
+					</div>
+					<h3>No results found</h3>
+					<p>Try a different search term</p>
+				</div>
+			`;
+		}
+
+		return `
+			<div class="messenger-help-empty">
+				<div class="messenger-help-empty-icon">
+					<i class="ph ph-question" style="font-size: 48px;"></i>
+				</div>
+				<h3>Help collections</h3>
+				<p>No collections available yet</p>
+			</div>
+		`;
+	}
+
+	_attachEvents() {
+		// Close button
+		this.element
+			.querySelector('.messenger-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		// Search input
+		const searchInput = this.element.querySelector(
+			'.messenger-help-search-input'
+		);
+		let searchTimeout;
+		searchInput.addEventListener('input', (e) => {
+			clearTimeout(searchTimeout);
+			searchTimeout = setTimeout(() => {
+				this.state.setHelpSearchQuery(e.target.value);
+			}, 300);
+		});
+
+		this._attachCollectionEvents();
+	}
+
+	_attachCollectionEvents() {
+		this.element
+			.querySelectorAll('.messenger-help-collection')
+			.forEach((item) => {
+				item.addEventListener('click', () => {
+					const collectionId = item.dataset.collectionId;
+					const collection = this.state.helpArticles.find(
+						(c) => c.id === collectionId
+					);
+					if (collection && collection.url) {
+						window.open(collection.url, '_blank');
+					} else if (this.options.onArticleClick) {
+						this.options.onArticleClick(collection);
+					}
+				});
+			});
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

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

@@ -0,0 +1,224 @@
+/**
+ * HomeView - Welcome screen with team info and quick actions
+ */
+export class HomeView {
+	constructor(state, options = {}) {
+		this.state = state;
+		this.options = options;
+		this.element = null;
+		this._unsubscribe = null;
+	}
+
+	render() {
+		this.element = document.createElement('div');
+		this.element.className = 'messenger-view messenger-home-view';
+
+		this._updateContent();
+
+		// Subscribe to state changes to re-render when data loads
+		this._unsubscribe = this.state.subscribe((type) => {
+			if (type === 'homeChangelogUpdate' || type === 'conversationsUpdate') {
+				this._updateContent();
+			}
+		});
+
+		return this.element;
+	}
+
+	_updateContent() {
+		const avatarsHtml = this._renderAvatarStack();
+		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>
+					<div class="messenger-home-avatars">${avatarsHtml}</div>
+					<button class="messenger-close-btn" aria-label="Close">
+						<i class="ph ph-x" style="font-size: 20px;"></i>
+					</button>
+				</div>
+				<div class="messenger-home-welcome">
+					<span class="messenger-home-greeting">Hello there.</span>
+					<span class="messenger-home-question">${this.state.welcomeMessage}</span>
+				</div>
+			</div>
+
+			<div class="messenger-home-body">
+				<button class="messenger-home-message-btn">
+					<span>Send us a message</span>
+					<i class="ph ph-arrow-right" style="font-size: 16px;"></i>
+				</button>
+
+				${this._renderFeaturedCard()}
+
+				${recentChangelogHtml}
+			</div>
+		`;
+
+		this._attachEvents();
+	}
+
+	_renderAvatarStack() {
+		const avatars = this.state.teamAvatars;
+		if (!avatars || avatars.length === 0) {
+			// Default avatars with initials
+			return `
+				<div class="messenger-avatar-stack">
+					<div class="messenger-avatar" style="background: #5856d6;">S</div>
+					<div class="messenger-avatar" style="background: #007aff;">T</div>
+				</div>
+			`;
+		}
+
+		const avatarItems = avatars
+			.slice(0, 3)
+			.map((avatar, i) => {
+				if (typeof avatar === 'string' && avatar.startsWith('http')) {
+					return `<img class="messenger-avatar" src="${avatar}" alt="Team member" style="z-index: ${3 - i};" />`;
+				}
+				return `<div class="messenger-avatar" style="background: ${this._getAvatarColor(i)}; z-index: ${3 - i};">${avatar.charAt(0).toUpperCase()}</div>`;
+			})
+			.join('');
+
+		return `<div class="messenger-avatar-stack">${avatarItems}</div>`;
+	}
+
+	_getAvatarColor(index) {
+		const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500', '#ff3b30'];
+		return colors[index % colors.length];
+	}
+
+	_renderFeaturedCard() {
+		// Only show if there's featured content configured
+		if (!this.options.featuredContent) {
+			return '';
+		}
+
+		const { title, description, imageUrl, action } =
+			this.options.featuredContent;
+
+		return `
+			<div class="messenger-home-featured">
+				${imageUrl ? `<img src="${imageUrl}" alt="${title}" class="messenger-home-featured-image" onerror="this.style.display='none';" />` : ''}
+				<div class="messenger-home-featured-content">
+					<h3>${title}</h3>
+					<p>${description}</p>
+				</div>
+				${action ? `<button class="messenger-home-featured-btn" data-action="${action.type}" data-value="${action.value}">${action.label}</button>` : ''}
+			</div>
+		`;
+	}
+
+	_renderRecentChangelog() {
+		// Show recent changelog preview as cards with images
+		const changelogItems = this.state.homeChangelogItems;
+		if (changelogItems.length === 0) {
+			return '';
+		}
+
+		const changelogHtml = changelogItems
+			.map(
+				(item) => `
+			<div class="messenger-home-changelog-card" data-changelog-id="${item.id}">
+				${
+					item.coverImage
+						? `
+					<div class="messenger-home-changelog-cover">
+						<img src="${item.coverImage}" alt="${item.title}" onerror="this.style.display='none';" />
+						${item.coverText ? `<span class="messenger-home-changelog-cover-text">${item.coverText}</span>` : ''}
+					</div>
+				`
+						: ''
+				}
+				<div class="messenger-home-changelog-card-content">
+					<h4 class="messenger-home-changelog-card-title">${item.title}</h4>
+					<p class="messenger-home-changelog-card-desc">${item.description || ''}</p>
+				</div>
+			</div>
+		`
+			)
+			.join('');
+
+		return `
+			<div class="messenger-home-changelog-section">
+				${changelogHtml}
+			</div>
+		`;
+	}
+
+	_formatDate(dateString) {
+		if (!dateString) return '';
+		const date = new Date(dateString);
+		const now = new Date();
+		const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+
+		if (diffDays === 0) return 'Today';
+		if (diffDays === 1) return 'Yesterday';
+		if (diffDays < 7) return `${diffDays}d ago`;
+		return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+	}
+
+	_attachEvents() {
+		// Close button
+		this.element
+			.querySelector('.messenger-close-btn')
+			.addEventListener('click', () => {
+				this.state.setOpen(false);
+			});
+
+		// Send message button
+		this.element
+			.querySelector('.messenger-home-message-btn')
+			.addEventListener('click', () => {
+				this.state.setView('messages');
+			});
+
+		// Changelog items
+		this.element
+			.querySelectorAll('.messenger-home-changelog-item')
+			.forEach((item) => {
+				item.addEventListener('click', () => {
+					// Navigate to changelog view with specific item selected
+					this.state.setView('changelog');
+				});
+			});
+
+		// See all changelog
+		const seeAllBtn = this.element.querySelector(
+			'.messenger-home-changelog-all'
+		);
+		if (seeAllBtn) {
+			seeAllBtn.addEventListener('click', () => {
+				this.state.setView('changelog');
+			});
+		}
+
+		// Featured card action
+		const featuredBtn = this.element.querySelector(
+			'.messenger-home-featured-btn'
+		);
+		if (featuredBtn) {
+			featuredBtn.addEventListener('click', () => {
+				const action = featuredBtn.dataset.action;
+				const value = featuredBtn.dataset.value;
+				if (action === 'url') {
+					window.open(value, '_blank');
+				} else if (action === 'view') {
+					this.state.setView(value);
+				}
+			});
+		}
+	}
+
+	destroy() {
+		if (this._unsubscribe) {
+			this._unsubscribe();
+		}
+		if (this.element && this.element.parentNode) {
+			this.element.parentNode.removeChild(this.element);
+		}
+	}
+}

package/types/index.d.ts

@@ -1,73 +1,135 @@
 declare module '@product7/feedback-sdk' {
-	export interface FeedbackConfig {
-		workspace: string;
-		userContext?: UserContext;
-		debug?: boolean;
-		boardId?: string;
-		position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-		theme?: 'light' | 'dark';
-		apiUrl?: string;
-		autoShow?: boolean;
-	}
+    export interface FeedbackConfig {
+        workspace: string;
+        userContext?: UserContext;
+        debug?: boolean;
+        boardId?: string;
+        position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+        theme?: 'light' | 'dark';
+        apiUrl?: string;
+        autoShow?: boolean;
+    }
 
-	export interface UserContext {
-		user_id?: string;
-		email?: string;
-		name?: string;
-		custom_fields?: Record<string, any>;
-		company?: {
-			id?: string;
-			name?: string;
-			monthly_spend?: number;
-		};
-	}
+    export interface UserContext {
+        user_id?: string;
+        email?: string;
+        name?: string;
+        custom_fields?: Record<string, any>;
+        company?: {
+            id?: string;
+            name?: string;
+            monthly_spend?: number;
+        };
+    }
 
-	export interface ButtonWidget {
-		id: string;
-		type: 'button';
-		mount(container?: string | HTMLElement): this;
-		destroy(): void;
-		show(): this;
-		hide(): this;
-		openModal(): void;
-		closeModal(): void;
-	}
+    export interface ButtonWidget {
+        id: string;
+        type: 'button';
+        mount(container?: string | HTMLElement): this;
+        destroy(): void;
+        show(): this;
+        hide(): this;
+        openModal(): void;
+        closeModal(): void;
+    }
 
-	export class FeedbackSDK {
-		constructor(config: FeedbackConfig);
-		init(): Promise<{
-			initialized: boolean;
-			config?: any;
-			sessionToken?: string;
-			expiresIn?: number;
-		}>;
-		createWidget(
-			type: 'button',
-			options?: Partial<FeedbackConfig>
-		): ButtonWidget;
-		setUserContext(userContext: UserContext): void;
-		getUserContext(): UserContext | null;
-		destroy(): void;
-		readonly initialized: boolean;
-	}
+    export class FeedbackSDK {
+        constructor(config: FeedbackConfig);
+        init(): Promise<{
+            initialized: boolean;
+            config?: any;
+            sessionToken?: string;
+            expiresIn?: number;
+        }>;
+        createWidget(
+            type: 'button',
+            options?: Partial<FeedbackConfig>
+        ): ButtonWidget;
+        setUserContext(userContext: UserContext): void;
+        getUserContext(): UserContext | null;
+        destroy(): void;
+        readonly initialized: boolean;
+    }
 
-	interface FeedbackSDKExport {
-		FeedbackSDK: typeof FeedbackSDK;
-		ButtonWidget: any;
-		create: (config: FeedbackConfig) => FeedbackSDK;
-		initWithUser: (
-			config: Omit<FeedbackConfig, 'userContext'>,
-			userContext: UserContext
-		) => Promise<FeedbackSDK>;
-		getInstance: () => FeedbackSDK | null;
-		isReady: () => boolean;
-		setUserContext: (userContext: UserContext) => void;
-		onReady: (callback: (sdk: FeedbackSDK) => void) => void;
-		onError: (callback: (error: Error) => void) => void;
-		version: string;
-		instance: FeedbackSDK | null;
-	}
+    export type SurveyType = 'nps' | 'csat' | 'ces' | 'custom';
+    
+    export interface SurveyQuestion {
+        id?: string;
+        label: string;
+        type: 'select' | 'text';
+        placeholder?: string;
+        options?: Array<{ value: string; label: string }>;
+    }
 
-	const FeedbackSDKDefault: FeedbackSDKExport;
-	export default FeedbackSDKDefault;
-}
+    export interface SurveyWidgetResponse {
+        type: SurveyType;
+        score: number | null;
+        feedback: string;
+        customAnswers: Record<string, any>;
+        timestamp: string;
+    }
+
+    export interface SurveyWidgetOptions {
+        surveyId?: string | null;
+        surveyType?: SurveyType;
+        position?: 'bottom-right' | 'bottom-left' | 'center' | 'bottom';
+        title?: string | null;
+        description?: string | null;
+        lowLabel?: string | null;
+        highLabel?: string | null;
+        customQuestions?: SurveyQuestion[];
+        theme?: 'light' | 'dark';
+        onSubmit?: (response: SurveyWidgetResponse) => void;
+        onDismiss?: () => void;
+    }
+
+    export interface SurveyWidget {
+        show(): this;
+        hide(): this;
+        destroy(): void;
+        surveyOptions: SurveyWidgetOptions;
+        surveyState: {
+            score: number | null;
+            feedback: string;
+            customAnswers: Record<string, any>;
+            isVisible: boolean;
+        };
+    }
+
+    export interface SurveyConfig {
+        workspace: string;
+        userContext?: UserContext;
+        debug?: boolean;
+        apiUrl?: string;
+    }
+
+    export class SurveySDK {
+        constructor(config: SurveyConfig);
+        init(): Promise<{ initialized: boolean }>;
+        createWidget(type: 'survey', options: SurveyWidgetOptions): SurveyWidget;
+        setUserContext(userContext: UserContext): void;
+        getUserContext(): UserContext | null;
+        destroy(): void;
+        readonly initialized: boolean;
+    }
+
+    interface FeedbackSDKExport {
+        FeedbackSDK: typeof FeedbackSDK;
+        ButtonWidget: any;
+        create: (config: FeedbackConfig) => FeedbackSDK;
+        initWithUser: (
+            config: Omit<FeedbackConfig, 'userContext'>,
+            userContext: UserContext
+        ) => Promise<FeedbackSDK>;
+        getInstance: () => FeedbackSDK | null;
+        isReady: () => boolean;
+        setUserContext: (userContext: UserContext) => void;
+        onReady: (callback: (sdk: FeedbackSDK) => void) => void;
+        onError: (callback: (error: Error) => void) => void;
+        version: string;
+        instance: FeedbackSDK | null;
+    }
+
+    const FeedbackSDKDefault: FeedbackSDKExport;
+    export default FeedbackSDKDefault;
+}