@product7/feedback-sdk 1.2.5 → 1.2.6

package/dist/feedback-sdk.js

@@ -139,6 +139,124 @@
 		},
 	];
 
+	// Mock conversations for development
+	const MOCK_CONVERSATIONS = [
+		{
+			id: 'conv_1',
+			subject: 'Question about pricing',
+			status: 'open',
+			last_message_at: new Date(Date.now() - 49 * 60 * 1000).toISOString(),
+			created_at: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
+			unread: 1,
+			assigned_user: {
+				id: 'user_1',
+				name: 'Sarah',
+				avatar: null,
+			},
+		},
+		{
+			id: 'conv_2',
+			subject: 'Feature request',
+			status: 'open',
+			last_message_at: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(),
+			created_at: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
+			unread: 0,
+			assigned_user: {
+				id: 'user_2',
+				name: 'Tom',
+				avatar: null,
+			},
+		},
+	];
+
+	// Mock messages for development
+	const MOCK_MESSAGES = {
+		conv_1: [
+			{
+				id: 'msg_1',
+				content: "Hi there! 👋 I'm Sarah. How can I help you today?",
+				sender_type: 'agent',
+				sender_name: 'Sarah',
+				sender_avatar: null,
+				created_at: new Date(Date.now() - 50 * 60 * 1000).toISOString(),
+			},
+			{
+				id: 'msg_2',
+				content: 'Hi! I have a question about your enterprise pricing.',
+				sender_type: 'customer',
+				created_at: new Date(Date.now() - 49 * 60 * 1000).toISOString(),
+			},
+		],
+		conv_2: [
+			{
+				id: 'msg_3',
+				content: "Hello! I'm Tom from the product team.",
+				sender_type: 'agent',
+				sender_name: 'Tom',
+				sender_avatar: null,
+				created_at: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+			},
+			{
+				id: 'msg_4',
+				content: 'I would love to see a dark mode feature!',
+				sender_type: 'customer',
+				created_at: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000 - 30 * 60 * 1000).toISOString(),
+			},
+			{
+				id: 'msg_5',
+				content: "Great suggestion! That feature will be available next week. I'll let you know when it's ready.",
+				sender_type: 'agent',
+				sender_name: 'Tom',
+				sender_avatar: null,
+				created_at: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(),
+			},
+		],
+	};
+
+	// Mock help collections for development
+	const MOCK_HELP_COLLECTIONS = [
+		{
+			id: 'collection_1',
+			title: 'Product Overview',
+			description: 'See how your AI-first customer service solution works.',
+			articleCount: 24,
+			icon: 'ph-book-open',
+			url: '#',
+		},
+		{
+			id: 'collection_2',
+			title: 'Getting Started',
+			description: 'Everything you need to know to get started with Product7.',
+			articleCount: 30,
+			icon: 'ph-rocket',
+			url: '#',
+		},
+		{
+			id: 'collection_3',
+			title: 'AI Agent',
+			description: 'Resolving customer questions instantly and accurately—from live chat to email.',
+			articleCount: 82,
+			icon: 'ph-robot',
+			url: '#',
+		},
+		{
+			id: 'collection_4',
+			title: 'Channels',
+			description: 'Enabling the channels you use to communicate with customers, all from the Inbox.',
+			articleCount: 45,
+			icon: 'ph-chat-circle',
+			url: '#',
+		},
+		{
+			id: 'collection_5',
+			title: 'Billing & Payments',
+			description: 'Manage your subscription, invoices, and payment methods.',
+			articleCount: 12,
+			icon: 'ph-credit-card',
+			url: '#',
+		},
+	];
+
 	// Mock surveys for development
 	const MOCK_SURVEYS = [
 		{
@@ -560,6 +678,424 @@
 			}
 		}
 
+		// ==========================================
+		// MESSENGER / CHAT ENDPOINTS
+		// ==========================================
+
+		/**
+		 * Get messenger settings
+		 * @returns {Promise<Object>} Messenger settings
+		 */
+		async getMessengerSettings() {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return {
+					status: true,
+					data: {
+						enabled: true,
+						greeting_message: 'Hi there! How can we help you today?',
+						team_name: 'Support Team',
+						response_time: 'Usually replies within a few minutes',
+					},
+				};
+			}
+
+			return this._makeRequest('/widget/messenger/settings', {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Check if agents are online
+		 * @returns {Promise<Object>} Agent availability status
+		 */
+		async checkAgentsOnline() {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return {
+					status: true,
+					data: {
+						agents_online: true,
+						online_count: 2,
+						response_time: 'Usually replies within a few minutes',
+					},
+				};
+			}
+
+			return this._makeRequest('/widget/messenger/agents/online', {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Get all conversations for the current contact
+		 * @param {Object} options - Query options
+		 * @param {number} options.page - Page number
+		 * @param {number} options.limit - Items per page
+		 * @returns {Promise<Object>} Conversations list
+		 */
+		async getConversations(options = {}) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 300));
+				return {
+					status: true,
+					data: MOCK_CONVERSATIONS,
+					meta: { total: MOCK_CONVERSATIONS.length, page: 1, limit: 20 },
+				};
+			}
+
+			const params = new URLSearchParams();
+			if (options.page) params.append('page', options.page);
+			if (options.limit) params.append('limit', options.limit);
+
+			const endpoint = `/widget/messenger/conversations${params.toString() ? '?' + params.toString() : ''}`;
+			return this._makeRequest(endpoint, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Get a single conversation with messages
+		 * @param {string} conversationId - Conversation ID
+		 * @returns {Promise<Object>} Conversation with messages
+		 */
+		async getConversation(conversationId) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				const conv = MOCK_CONVERSATIONS.find((c) => c.id === conversationId);
+				return {
+					status: true,
+					data: {
+						...conv,
+						messages: MOCK_MESSAGES[conversationId] || [],
+					},
+				};
+			}
+
+			return this._makeRequest(`/widget/messenger/conversations/${conversationId}`, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Get messages for a conversation
+		 * @param {string} conversationId - Conversation ID
+		 * @param {Object} options - Query options
+		 * @returns {Promise<Object>} Messages list
+		 */
+		async getMessages(conversationId, options = {}) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				return {
+					status: true,
+					data: MOCK_MESSAGES[conversationId] || [],
+				};
+			}
+
+			const params = new URLSearchParams();
+			if (options.page) params.append('page', options.page);
+			if (options.limit) params.append('limit', options.limit);
+
+			const endpoint = `/widget/messenger/conversations/${conversationId}/messages${params.toString() ? '?' + params.toString() : ''}`;
+			return this._makeRequest(endpoint, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Start a new conversation
+		 * @param {Object} data - Conversation data
+		 * @param {string} data.message - Initial message content
+		 * @param {string} data.subject - Optional subject
+		 * @returns {Promise<Object>} Created conversation
+		 */
+		async startConversation(data) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 300));
+				const newConv = {
+					id: 'conv_' + Date.now(),
+					subject: data.subject || 'New conversation',
+					status: 'open',
+					last_message_at: new Date().toISOString(),
+					created_at: new Date().toISOString(),
+					messages: [
+						{
+							id: 'msg_' + Date.now(),
+							content: data.message,
+							sender_type: 'customer',
+							created_at: new Date().toISOString(),
+						},
+					],
+				};
+				MOCK_CONVERSATIONS.unshift(newConv);
+				MOCK_MESSAGES[newConv.id] = newConv.messages;
+				return { status: true, data: newConv };
+			}
+
+			return this._makeRequest('/widget/messenger/conversations', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify({
+					message: data.message,
+					subject: data.subject || '',
+				}),
+			});
+		}
+
+		/**
+		 * Send a message in a conversation
+		 * @param {string} conversationId - Conversation ID
+		 * @param {Object} data - Message data
+		 * @param {string} data.content - Message content
+		 * @returns {Promise<Object>} Sent message
+		 */
+		async sendMessage(conversationId, data) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				const newMessage = {
+					id: 'msg_' + Date.now(),
+					content: data.content,
+					sender_type: 'customer',
+					created_at: new Date().toISOString(),
+				};
+				if (!MOCK_MESSAGES[conversationId]) {
+					MOCK_MESSAGES[conversationId] = [];
+				}
+				MOCK_MESSAGES[conversationId].push(newMessage);
+				return { status: true, data: newMessage };
+			}
+
+			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/messages`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify({ content: data.content }),
+			});
+		}
+
+		/**
+		 * Send typing indicator
+		 * @param {string} conversationId - Conversation ID
+		 * @param {boolean} isTyping - Whether user is typing
+		 * @returns {Promise<Object>} Response
+		 */
+		async sendTypingIndicator(conversationId, isTyping) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return { status: true };
+			}
+
+			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/typing`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify({ is_typing: isTyping }),
+			});
+		}
+
+		/**
+		 * Mark conversation as read
+		 * @param {string} conversationId - Conversation ID
+		 * @returns {Promise<Object>} Response
+		 */
+		async markConversationAsRead(conversationId) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return { status: true };
+			}
+
+			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/read`, {
+				method: 'POST',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Get unread count
+		 * @returns {Promise<Object>} Unread count data
+		 */
+		async getUnreadCount() {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				const count = MOCK_CONVERSATIONS.reduce((sum, c) => sum + (c.unread || 0), 0);
+				return {
+					status: true,
+					data: { unread_count: count, unread_conversations: count > 0 ? 1 : 0 },
+				};
+			}
+
+			return this._makeRequest('/widget/messenger/unread', {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Submit conversation rating
+		 * @param {string} conversationId - Conversation ID
+		 * @param {Object} data - Rating data
+		 * @param {number} data.rating - Rating (1-5 or thumbs up/down)
+		 * @param {string} data.comment - Optional comment
+		 * @returns {Promise<Object>} Response
+		 */
+		async submitRating(conversationId, data) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return { status: true, message: 'Thank you for your feedback!' };
+			}
+
+			return this._makeRequest(`/widget/messenger/conversations/${conversationId}/rate`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify({
+					rating: data.rating,
+					comment: data.comment || '',
+				}),
+			});
+		}
+
+		/**
+		 * Identify contact (for logged-in users)
+		 * @param {Object} data - Contact data
+		 * @param {string} data.email - Email address
+		 * @param {string} data.name - Name
+		 * @returns {Promise<Object>} Response
+		 */
+		async identifyContact(data) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				return { status: true, message: 'Contact identified' };
+			}
+
+			return this._makeRequest('/widget/messenger/identify', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${this.sessionToken}`,
+				},
+				body: JSON.stringify(data),
+			});
+		}
+
+		// ==========================================
+		// HELP ARTICLES ENDPOINTS
+		// ==========================================
+
+		/**
+		 * Get help collections
+		 * @param {Object} options - Query options
+		 * @returns {Promise<Object>} Collections list
+		 */
+		async getHelpCollections(options = {}) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				return { status: true, data: MOCK_HELP_COLLECTIONS };
+			}
+
+			const params = new URLSearchParams();
+			if (options.limit) params.append('limit', options.limit);
+
+			const endpoint = `/widget/help/collections${params.toString() ? '?' + params.toString() : ''}`;
+			return this._makeRequest(endpoint, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		/**
+		 * Search help articles
+		 * @param {string} query - Search query
+		 * @param {Object} options - Query options
+		 * @returns {Promise<Object>} Search results
+		 */
+		async searchHelpArticles(query, options = {}) {
+			if (!this.isSessionValid()) {
+				await this.init();
+			}
+
+			if (this.mock) {
+				await new Promise((resolve) => setTimeout(resolve, 200));
+				const filtered = MOCK_HELP_COLLECTIONS.filter(
+					(c) =>
+						c.title.toLowerCase().includes(query.toLowerCase()) ||
+						c.description.toLowerCase().includes(query.toLowerCase())
+				);
+				return { status: true, data: filtered };
+			}
+
+			const params = new URLSearchParams({ q: query });
+			if (options.limit) params.append('limit', options.limit);
+
+			return this._makeRequest(`/widget/help/search?${params.toString()}`, {
+				method: 'GET',
+				headers: { Authorization: `Bearer ${this.sessionToken}` },
+			});
+		}
+
+		// ==========================================
+		// CHANGELOG ENDPOINTS
+		// ==========================================
+
 		/**
 		 * Get published changelogs
 		 * @param {Object} options - Optional query parameters
@@ -1013,6 +1549,9 @@
 	});
 
 	class BaseWidget {
+		static STORAGE_KEY = 'feedback_submitted';
+		static DEFAULT_COOLDOWN_DAYS = 30; // Don't show for 30 days after submission
+
 		constructor(options = {}) {
 			this.id = options.id;
 			this.sdk = options.sdk;
@@ -1031,6 +1570,8 @@
 				autoShow: false,
 				showBackdrop: true,
 				customStyles: {},
+				suppressAfterSubmission: true, // Don't show widget again after submission
+				suppressionDays: BaseWidget.DEFAULT_COOLDOWN_DAYS,
 				...options,
 			};
 
@@ -1057,6 +1598,15 @@
 		mount(container) {
 			if (this.mounted || this.destroyed) return this;
 
+			// Check if feedback was recently submitted and should be suppressed
+			if (this.options.suppressAfterSubmission && this._hasRecentlySubmitted()) {
+				this.sdk.eventBus.emit('widget:suppressed', {
+					widget: this,
+					reason: 'recently_submitted'
+				});
+				return this;
+			}
+
 			if (typeof container === 'string') {
 				container = document.querySelector(container);
 			}
@@ -1202,6 +1752,9 @@
 
 				const response = await this.apiService.submitFeedback(payload);
 
+				// Track that feedback was submitted
+				this._trackSubmission();
+
 				this._showSuccessMessage();
 				this.closePanel();
 
@@ -1243,6 +1796,85 @@
 		onMount() {}
 		onDestroy() {}
 
+		/**
+		 * Track that feedback was submitted to localStorage
+		 */
+		_trackSubmission() {
+			try {
+				const workspace = this.sdk.config.workspace;
+				const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
+				const data = {
+					submittedAt: Date.now(),
+					boardId: this.options.boardId,
+				};
+				localStorage.setItem(storageKey, JSON.stringify(data));
+			} catch (e) {
+				// localStorage may not be available
+				console.warn('Failed to track feedback submission:', e);
+			}
+		}
+
+		/**
+		 * Check if feedback was recently submitted (within cooldown period)
+		 * Uses backend tracking (preferred) with localStorage as fallback
+		 * @returns {boolean} true if feedback was submitted within the cooldown period
+		 */
+		_hasRecentlySubmitted() {
+			const cooldownMs = this.options.suppressionDays * 24 * 60 * 60 * 1000;
+			const now = Date.now();
+
+			// Check backend tracking first (from init response)
+			if (this.sdk.config.last_feedback_at) {
+				try {
+					const backendTimestamp = new Date(this.sdk.config.last_feedback_at).getTime();
+					if ((now - backendTimestamp) < cooldownMs) {
+						return true;
+					}
+				} catch (e) {
+					// Invalid date format, continue to localStorage check
+				}
+			}
+
+			// Fallback to localStorage
+			try {
+				const workspace = this.sdk.config.workspace;
+				const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
+				const stored = localStorage.getItem(storageKey);
+
+				if (!stored) return false;
+
+				const data = JSON.parse(stored);
+				const submittedAt = data.submittedAt;
+
+				return (now - submittedAt) < cooldownMs;
+			} catch (e) {
+				// localStorage may not be available or data is corrupted
+				return false;
+			}
+		}
+
+		/**
+		 * Clear the submission tracking (allow showing the widget again)
+		 */
+		clearSubmissionTracking() {
+			try {
+				const workspace = this.sdk.config.workspace;
+				const storageKey = `${BaseWidget.STORAGE_KEY}_${workspace}`;
+				localStorage.removeItem(storageKey);
+			} catch (e) {
+				console.warn('Failed to clear submission tracking:', e);
+			}
+		}
+
+		/**
+		 * Check if the widget should be shown based on submission history
+		 * @returns {boolean} true if the widget should be shown
+		 */
+		shouldShow() {
+			if (!this.options.suppressAfterSubmission) return true;
+			return !this._hasRecentlySubmitted();
+		}
+
 		_render() {
 			throw new Error('_render() must be implemented by concrete widget');
 		}
@@ -2372,6 +3004,18 @@
 			this.enableHelp = options.enableHelp !== false;
 			this.enableChangelog = options.enableChangelog !== false;
 
+			// Agent availability
+			this.agentsOnline = false;
+			this.onlineCount = 0;
+			this.responseTime = 'Usually replies within a few minutes';
+
+			// Typing indicators
+			this.typingUsers = {}; // { conversationId: { userName, timestamp } }
+
+			// Loading states
+			this.isLoading = false;
+			this.isLoadingMessages = false;
+
 			// Listeners
 			this._listeners = new Set();
 		}
@@ -3154,6 +3798,9 @@
 			this.options = options;
 			this.element = null;
 			this._unsubscribe = null;
+			this._typingTimeout = null;
+			this._isTyping = false;
+			this._typingIndicator = null;
 		}
 
 		render() {
@@ -3168,8 +3815,21 @@
 					type === 'messageAdded' &&
 					data.conversationId === this.state.activeConversationId
 				) {
+					this._hideTypingIndicator();
 					this._appendMessage(data.message);
 					this._scrollToBottom();
+				} else if (
+					type === 'typingStarted' &&
+					data.conversationId === this.state.activeConversationId
+				) {
+					this._showTypingIndicator(data.userName);
+				} else if (
+					type === 'typingStopped' &&
+					data.conversationId === this.state.activeConversationId
+				) {
+					this._hideTypingIndicator();
+				} else if (type === 'messagesUpdate' && data.conversationId === this.state.activeConversationId) {
+					this._updateContent();
 				}
 			});
 
@@ -3179,13 +3839,20 @@
 		_updateContent() {
 			const conversation = this.state.getActiveConversation();
 			const messages = this.state.getActiveMessages();
+			const isNewConversation = !this.state.activeConversationId;
 
 			const messagesHtml =
 				messages.length === 0
-					? this._renderEmptyState()
+					? this._renderEmptyState(isNewConversation)
 					: messages.map((msg) => this._renderMessage(msg)).join('');
 
 			const avatarHtml = this._renderConversationAvatar(conversation);
+			const title = isNewConversation
+				? 'New conversation'
+				: conversation?.title || 'Chat with team';
+			const placeholder = isNewConversation
+				? 'Start typing your message...'
+				: 'Write a message...';
 
 			this.element.innerHTML = `
 			<div class="messenger-chat-header">
@@ -3194,7 +3861,7 @@
 				</button>
 				<div class="messenger-chat-header-info">
 					${avatarHtml}
-					<span class="messenger-chat-title">${conversation?.title || 'Chat with team'}</span>
+					<span class="messenger-chat-title">${title}</span>
 				</div>
 				<button class="messenger-close-btn" aria-label="Close">
 					<i class="ph ph-x" style="font-size: 20px;"></i>
@@ -3203,11 +3870,17 @@
 
 			<div class="messenger-chat-messages">
 				${messagesHtml}
+				<div class="messenger-typing-indicator" style="display: none;">
+					<div class="messenger-typing-dots">
+						<span></span><span></span><span></span>
+					</div>
+					<span class="messenger-typing-text"></span>
+				</div>
 			</div>
 
 			<div class="messenger-chat-compose">
 				<div class="messenger-compose-input-wrapper">
-					<textarea class="messenger-compose-input" placeholder="Write a message..." rows="1"></textarea>
+					<textarea class="messenger-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
 				<button class="messenger-compose-send" aria-label="Send" disabled>
 					<i class="ph ph-paper-plane-tilt" style="font-size: 20px;"></i>
@@ -3215,17 +3888,25 @@
 			</div>
 		`;
 
+			this._typingIndicator = this.element.querySelector('.messenger-typing-indicator');
 			this._attachEvents();
 			this._scrollToBottom();
 		}
 
-		_renderEmptyState() {
+		_renderEmptyState(isNewConversation = false) {
 			const avatarHtml = this._renderTeamAvatars();
+			const responseTime = this.state.responseTime || 'We typically reply within a few minutes';
+			const isOnline = this.state.agentsOnline;
+
 			return `
 			<div class="messenger-chat-empty">
 				<div class="messenger-chat-empty-avatars">${avatarHtml}</div>
-				<h3>Start the conversation</h3>
+				<h3>${isNewConversation ? 'Start a new conversation' : 'Start the conversation'}</h3>
 				<p>Send us a message and we'll get back to you as soon as possible.</p>
+				<div class="messenger-chat-availability">
+					<span class="messenger-availability-dot ${isOnline ? 'messenger-availability-online' : 'messenger-availability-away'}"></span>
+					<span>${isOnline ? "We're online now" : responseTime}</span>
+				</div>
 			</div>
 		`;
 		}
@@ -3379,6 +4060,11 @@
 
 				// Enable/disable send button
 				sendBtn.disabled = !input.value.trim();
+
+				// Send typing indicator
+				if (input.value.trim()) {
+					this._startTyping();
+				}
 			});
 
 			input.addEventListener('keydown', (e) => {
@@ -3399,24 +4085,83 @@
 
 			if (!content) return;
 
-			// Add message to state
-			const message = {
-				id: 'msg_' + Date.now(),
-				content: content,
-				isOwn: true,
-				timestamp: new Date().toISOString(),
-			};
+			// Stop typing indicator
+			this._stopTyping();
+
+			const isNewConversation = !this.state.activeConversationId;
 
-			this.state.addMessage(this.state.activeConversationId, message);
+			if (isNewConversation) {
+				// Start a new conversation
+				if (this.options.onStartConversation) {
+					this.options.onStartConversation(content);
+				}
+			} else {
+				// Add message to existing conversation
+				const message = {
+					id: 'msg_' + Date.now(),
+					content: content,
+					isOwn: true,
+					timestamp: new Date().toISOString(),
+				};
+
+				this.state.addMessage(this.state.activeConversationId, message);
+
+				// Emit event for API integration
+				if (this.options.onSendMessage) {
+					this.options.onSendMessage(this.state.activeConversationId, message);
+				}
+			}
 
 			// Clear input
 			input.value = '';
 			input.style.height = 'auto';
 			this.element.querySelector('.messenger-compose-send').disabled = true;
+		}
+
+		_startTyping() {
+			if (!this._isTyping && this.state.activeConversationId) {
+				this._isTyping = true;
+				if (this.options.onTyping) {
+					this.options.onTyping(this.state.activeConversationId, true);
+				}
+			}
+
+			// Reset typing timeout
+			if (this._typingTimeout) {
+				clearTimeout(this._typingTimeout);
+			}
+			this._typingTimeout = setTimeout(() => {
+				this._stopTyping();
+			}, 3000);
+		}
+
+		_stopTyping() {
+			if (this._isTyping && this.state.activeConversationId) {
+				this._isTyping = false;
+				if (this.options.onTyping) {
+					this.options.onTyping(this.state.activeConversationId, false);
+				}
+			}
+			if (this._typingTimeout) {
+				clearTimeout(this._typingTimeout);
+				this._typingTimeout = null;
+			}
+		}
+
+		_showTypingIndicator(userName) {
+			if (this._typingIndicator) {
+				this._typingIndicator.style.display = 'flex';
+				const textEl = this._typingIndicator.querySelector('.messenger-typing-text');
+				if (textEl) {
+					textEl.textContent = `${userName || 'Support'} is typing...`;
+				}
+				this._scrollToBottom();
+			}
+		}
 
-			// Emit event for API integration
-			if (this.options.onSendMessage) {
-				this.options.onSendMessage(this.state.activeConversationId, message);
+		_hideTypingIndicator() {
+			if (this._typingIndicator) {
+				this._typingIndicator.style.display = 'none';
 			}
 		}
 
@@ -3424,6 +4169,10 @@
 			if (this._unsubscribe) {
 				this._unsubscribe();
 			}
+			if (this._typingTimeout) {
+				clearTimeout(this._typingTimeout);
+			}
+			this._stopTyping();
 			if (this.element && this.element.parentNode) {
 				this.element.parentNode.removeChild(this.element);
 			}
@@ -3617,6 +4366,11 @@
 						this.state.setActiveConversation(convId);
 						this.state.markAsRead(convId);
 						this.state.setView('chat');
+
+						// Notify widget to fetch messages
+						if (this.options.onSelectConversation) {
+							this.options.onSelectConversation(convId);
+						}
 					});
 				});
 
@@ -3630,18 +4384,14 @@
 		}
 
 		_startNewConversation() {
-			// Create a new conversation and navigate to chat
-			const newConv = {
-				id: 'conv_' + Date.now(),
-				title: 'New conversation',
-				participants: [],
-				lastMessage: null,
-				lastMessageTime: new Date().toISOString(),
-				unread: 0,
-			};
-			this.state.addConversation(newConv);
-			this.state.setActiveConversation(newConv.id);
+			// Set view to chat with no active conversation (new conversation mode)
+			this.state.setActiveConversation(null);
 			this.state.setView('chat');
+
+			// Notify widget to handle new conversation flow
+			if (this.options.onStartNewConversation) {
+				this.options.onStartNewConversation();
+			}
 		}
 
 		destroy() {
@@ -3865,7 +4615,7 @@
 
 			// Subscribe to state changes to re-render when data loads
 			this._unsubscribe = this.state.subscribe((type) => {
-				if (type === 'homeChangelogUpdate' || type === 'conversationsUpdate') {
+				if (type === 'homeChangelogUpdate' || type === 'conversationsUpdate' || type === 'availabilityUpdate') {
 					this._updateContent();
 				}
 			});
@@ -3891,6 +4641,7 @@
 				<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>
 
@@ -3939,6 +4690,27 @@
 			return colors[index % colors.length];
 		}
 
+		_renderAvailabilityStatus() {
+			const isOnline = this.state.agentsOnline;
+			const responseTime = this.state.responseTime || 'We typically reply within a few minutes';
+
+			if (isOnline) {
+				return `
+				<div class="messenger-home-availability">
+					<span class="messenger-availability-dot messenger-availability-online"></span>
+					<span class="messenger-availability-text">We're online now</span>
+				</div>
+			`;
+			}
+
+			return `
+			<div class="messenger-home-availability">
+				<span class="messenger-availability-dot messenger-availability-away"></span>
+				<span class="messenger-availability-text">${responseTime}</span>
+			</div>
+		`;
+		}
+
 		_renderFeaturedCard() {
 			// Only show if there's featured content configured
 			if (!this.options.featuredContent) {
@@ -4061,12 +4833,286 @@
 			}
 		}
 
-		destroy() {
-			if (this._unsubscribe) {
-				this._unsubscribe();
-			}
-			if (this.element && this.element.parentNode) {
-				this.element.parentNode.removeChild(this.element);
+		destroy() {
+			if (this._unsubscribe) {
+				this._unsubscribe();
+			}
+			if (this.element && this.element.parentNode) {
+				this.element.parentNode.removeChild(this.element);
+			}
+		}
+	}
+
+	/**
+	 * WebSocketService - Real-time communication for messenger widget
+	 */
+
+	class WebSocketService {
+		constructor(config = {}) {
+			this.baseURL = config.baseURL || '';
+			this.workspace = config.workspace || '';
+			this.sessionToken = config.sessionToken || null;
+			this.mock = config.mock || false;
+
+			this.ws = null;
+			this.reconnectAttempts = 0;
+			this.maxReconnectAttempts = 5;
+			this.reconnectDelay = 1000;
+			this.pingInterval = null;
+			this.isConnected = false;
+
+			// Event listeners
+			this._listeners = new Map();
+
+			// Bind methods
+			this._onOpen = this._onOpen.bind(this);
+			this._onMessage = this._onMessage.bind(this);
+			this._onClose = this._onClose.bind(this);
+			this._onError = this._onError.bind(this);
+		}
+
+		/**
+		 * Connect to WebSocket server
+		 */
+		connect(sessionToken = null) {
+			if (sessionToken) {
+				this.sessionToken = sessionToken;
+			}
+
+			if (!this.sessionToken) {
+				console.warn('[WebSocket] No session token provided');
+				return;
+			}
+
+			// Mock mode - simulate connection
+			if (this.mock) {
+				this.isConnected = true;
+				this._emit('connected', {});
+				this._startMockResponses();
+				return;
+			}
+
+			// Build WebSocket URL
+			const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+			let wsURL = this.baseURL.replace(/^https?:/, wsProtocol);
+			wsURL = wsURL.replace('/api/v1', '');
+			wsURL = `${wsURL}/api/v1/widget/messenger/ws?token=${encodeURIComponent(this.sessionToken)}`;
+
+			try {
+				this.ws = new WebSocket(wsURL);
+				this.ws.onopen = this._onOpen;
+				this.ws.onmessage = this._onMessage;
+				this.ws.onclose = this._onClose;
+				this.ws.onerror = this._onError;
+			} catch (error) {
+				console.error('[WebSocket] Connection error:', error);
+				this._scheduleReconnect();
+			}
+		}
+
+		/**
+		 * Disconnect from WebSocket server
+		 */
+		disconnect() {
+			this.isConnected = false;
+			this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnection
+
+			if (this.pingInterval) {
+				clearInterval(this.pingInterval);
+				this.pingInterval = null;
+			}
+
+			if (this.ws) {
+				this.ws.close();
+				this.ws = null;
+			}
+
+			if (this._mockInterval) {
+				clearInterval(this._mockInterval);
+				this._mockInterval = null;
+			}
+		}
+
+		/**
+		 * Subscribe to events
+		 * @param {string} event - Event name
+		 * @param {Function} callback - Event handler
+		 * @returns {Function} Unsubscribe function
+		 */
+		on(event, callback) {
+			if (!this._listeners.has(event)) {
+				this._listeners.set(event, new Set());
+			}
+			this._listeners.get(event).add(callback);
+			return () => this._listeners.get(event).delete(callback);
+		}
+
+		/**
+		 * Remove event listener
+		 */
+		off(event, callback) {
+			if (this._listeners.has(event)) {
+				this._listeners.get(event).delete(callback);
+			}
+		}
+
+		/**
+		 * Send message through WebSocket
+		 */
+		send(type, payload = {}) {
+			if (!this.isConnected) {
+				console.warn('[WebSocket] Not connected, cannot send message');
+				return;
+			}
+
+			if (this.mock) {
+				// Mock mode - just log
+				console.log('[WebSocket Mock] Sending:', type, payload);
+				return;
+			}
+
+			if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+				this.ws.send(JSON.stringify({ type, payload }));
+			}
+		}
+
+		// Private methods
+
+		_onOpen() {
+			console.log('[WebSocket] Connected');
+			this.isConnected = true;
+			this.reconnectAttempts = 0;
+			this._emit('connected', {});
+
+			// Start ping interval to keep connection alive
+			this.pingInterval = setInterval(() => {
+				this.send('ping', {});
+			}, 30000);
+		}
+
+		_onMessage(event) {
+			try {
+				const data = JSON.parse(event.data);
+				const { type, payload } = data;
+
+				// Handle different event types
+				switch (type) {
+					case 'message:new':
+						this._emit('message', payload);
+						break;
+					case 'typing:started':
+						this._emit('typing_started', payload);
+						break;
+					case 'typing:stopped':
+						this._emit('typing_stopped', payload);
+						break;
+					case 'conversation:updated':
+						this._emit('conversation_updated', payload);
+						break;
+					case 'conversation:closed':
+						this._emit('conversation_closed', payload);
+						break;
+					case 'availability:changed':
+						this._emit('availability_changed', payload);
+						break;
+					case 'pong':
+						// Ping response, ignore
+						break;
+					default:
+						console.log('[WebSocket] Unknown event:', type, payload);
+				}
+			} catch (error) {
+				console.error('[WebSocket] Failed to parse message:', error);
+			}
+		}
+
+		_onClose(event) {
+			console.log('[WebSocket] Disconnected:', event.code, event.reason);
+			this.isConnected = false;
+
+			if (this.pingInterval) {
+				clearInterval(this.pingInterval);
+				this.pingInterval = null;
+			}
+
+			this._emit('disconnected', { code: event.code, reason: event.reason });
+			this._scheduleReconnect();
+		}
+
+		_onError(error) {
+			console.error('[WebSocket] Error:', error);
+			this._emit('error', { error });
+		}
+
+		_scheduleReconnect() {
+			if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+				console.log('[WebSocket] Max reconnect attempts reached');
+				this._emit('reconnect_failed', {});
+				return;
+			}
+
+			this.reconnectAttempts++;
+			const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+			console.log(`[WebSocket] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
+
+			setTimeout(() => {
+				this.connect();
+			}, delay);
+		}
+
+		_emit(event, data) {
+			if (this._listeners.has(event)) {
+				this._listeners.get(event).forEach((callback) => {
+					try {
+						callback(data);
+					} catch (error) {
+						console.error(`[WebSocket] Error in ${event} handler:`, error);
+					}
+				});
+			}
+		}
+
+		// Mock support for development
+		_startMockResponses() {
+			// Simulate agent typing and responses
+			this._mockInterval = setInterval(() => {
+				// Randomly emit typing or message events for demo
+				const random = Math.random();
+				if (random < 0.1) {
+					this._emit('typing_started', {
+						conversation_id: 'conv_1',
+						user_id: 'agent_1',
+						user_name: 'Sarah',
+						is_agent: true,
+					});
+
+					// Stop typing after 2 seconds
+					setTimeout(() => {
+						this._emit('typing_stopped', {
+							conversation_id: 'conv_1',
+							user_id: 'agent_1',
+						});
+					}, 2000);
+				}
+			}, 10000);
+		}
+
+		/**
+		 * Simulate receiving a message (for mock mode)
+		 */
+		simulateMessage(conversationId, message) {
+			if (this.mock) {
+				this._emit('message', {
+					conversation_id: conversationId,
+					message: {
+						id: 'msg_' + Date.now(),
+						content: message.content,
+						sender_type: message.sender_type || 'agent',
+						sender_name: message.sender_name || 'Support',
+						sender_avatar: message.sender_avatar || null,
+						created_at: new Date().toISOString(),
+					},
+				});
 			}
 		}
 	}
@@ -4108,9 +5154,14 @@
 
 			this.launcher = null;
 			this.panel = null;
+			this.wsService = null;
+			this._wsUnsubscribers = [];
 
 			// Bind methods
 			this._handleOpenChange = this._handleOpenChange.bind(this);
+			this._handleWebSocketMessage = this._handleWebSocketMessage.bind(this);
+			this._handleTypingStarted = this._handleTypingStarted.bind(this);
+			this._handleTypingStopped = this._handleTypingStopped.bind(this);
 		}
 
 		_render() {
@@ -4126,16 +5177,23 @@
 			});
 			container.appendChild(this.launcher.render());
 
-			// Create panel
+			// Create panel with all callbacks
 			this.panel = new MessengerPanel(this.messengerState, {
 				position: this.messengerOptions.position,
 				theme: this.messengerOptions.theme,
 				primaryColor: this.messengerOptions.primaryColor,
 				logoUrl: this.messengerOptions.logoUrl,
 				featuredContent: this.messengerOptions.featuredContent,
+				// Chat callbacks
 				onSendMessage:
 					this.messengerOptions.onSendMessage ||
 					this._handleSendMessage.bind(this),
+				onStartConversation: this._handleStartConversation.bind(this),
+				onTyping: this.sendTypingIndicator.bind(this),
+				// Conversation list callbacks
+				onSelectConversation: this._handleSelectConversation.bind(this),
+				onStartNewConversation: this._handleNewConversationClick.bind(this),
+				// Article/changelog callbacks
 				onArticleClick: this.messengerOptions.onArticleClick,
 				onChangelogClick: this.messengerOptions.onChangelogClick,
 			});
@@ -4173,30 +5231,179 @@
 			}
 		}
 
+		/**
+		 * Handle starting a new conversation
+		 */
+		async _handleStartConversation(messageContent) {
+			try {
+				await this.startNewConversation(messageContent);
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to start conversation:', error);
+			}
+		}
+
+		/**
+		 * Handle selecting a conversation from the list
+		 */
+		async _handleSelectConversation(conversationId) {
+			try {
+				await this.fetchMessages(conversationId);
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to fetch messages:', error);
+			}
+		}
+
+		/**
+		 * Handle clicking "new conversation" button
+		 */
+		_handleNewConversationClick() {
+			// View is already changed by ConversationsView
+			// This is for any additional setup needed
+		}
+
 		async _handleSendMessage(conversationId, message) {
-			// Default message handler - can be overridden
+			// Emit event for external listeners
 			this.sdk.eventBus.emit('messenger:messageSent', {
 				widget: this,
 				conversationId,
 				message,
 			});
 
-			// In mock mode, simulate a response
-			if (this.apiService?.mock) {
-				setTimeout(() => {
-					const response = {
-						id: 'msg_' + Date.now(),
-						content: "Thanks for your message! We'll get back to you soon.",
-						isOwn: false,
-						timestamp: new Date().toISOString(),
-						sender: {
-							name: 'Support Team',
-							avatarUrl: null,
-						},
-					};
-					this.messengerState.addMessage(conversationId, response);
-				}, 1500);
+			try {
+				// Send message through API
+				const response = await this.apiService.sendMessage(conversationId, {
+					content: message.content,
+				});
+
+				if (response.status && response.data) {
+					// Update the message ID with server-assigned ID
+					// Message is already added to state optimistically in ChatView
+					console.log('[MessengerWidget] Message sent:', response.data.id);
+				}
+
+				// In mock mode, simulate an agent response after a delay
+				if (this.apiService?.mock) {
+					setTimeout(() => {
+						const mockResponse = {
+							id: 'msg_' + Date.now(),
+							content: "Thanks for your message! We'll get back to you soon.",
+							isOwn: false,
+							timestamp: new Date().toISOString(),
+							sender: {
+								name: 'Support Team',
+								avatarUrl: null,
+							},
+						};
+						this.messengerState.addMessage(conversationId, mockResponse);
+					}, 1500);
+				}
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to send message:', error);
+				// Could add error handling UI here
+			}
+		}
+
+		/**
+		 * Handle incoming WebSocket message
+		 */
+		_handleWebSocketMessage(data) {
+			const { conversation_id, message } = data;
+
+			// Transform message to local format
+			const localMessage = {
+				id: message.id,
+				content: message.content,
+				isOwn: message.sender_type === 'customer',
+				timestamp: message.created_at,
+				sender: {
+					name: message.sender_name || 'Support',
+					avatarUrl: message.sender_avatar || null,
+				},
+			};
+
+			// Add message to state
+			this.messengerState.addMessage(conversation_id, localMessage);
+
+			// Update unread count if panel is closed or viewing different conversation
+			if (!this.messengerState.isOpen || this.messengerState.activeConversationId !== conversation_id) {
+				this._updateUnreadCount();
+			}
+		}
+
+		/**
+		 * Handle typing started event
+		 */
+		_handleTypingStarted(data) {
+			if (data.is_agent) {
+				this.messengerState._notify('typingStarted', {
+					conversationId: data.conversation_id,
+					userName: data.user_name,
+				});
+			}
+		}
+
+		/**
+		 * Handle typing stopped event
+		 */
+		_handleTypingStopped(data) {
+			this.messengerState._notify('typingStopped', {
+				conversationId: data.conversation_id,
+			});
+		}
+
+		/**
+		 * Update unread count from API
+		 */
+		async _updateUnreadCount() {
+			try {
+				const response = await this.apiService.getUnreadCount();
+				if (response.status && response.data) {
+					this.messengerState.unreadCount = response.data.unread_count || 0;
+					this.messengerState._notify('unreadCountChange', { count: this.messengerState.unreadCount });
+				}
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to get unread count:', error);
+			}
+		}
+
+		/**
+		 * Initialize WebSocket connection
+		 */
+		_initWebSocket() {
+			if (this.wsService) {
+				this.wsService.disconnect();
 			}
+
+			this.wsService = new WebSocketService({
+				baseURL: this.apiService.baseURL,
+				workspace: this.apiService.workspace,
+				sessionToken: this.apiService.sessionToken,
+				mock: this.apiService.mock,
+			});
+
+			// Subscribe to WebSocket events
+			this._wsUnsubscribers.push(
+				this.wsService.on('message', this._handleWebSocketMessage)
+			);
+			this._wsUnsubscribers.push(
+				this.wsService.on('typing_started', this._handleTypingStarted)
+			);
+			this._wsUnsubscribers.push(
+				this.wsService.on('typing_stopped', this._handleTypingStopped)
+			);
+			this._wsUnsubscribers.push(
+				this.wsService.on('connected', () => {
+					console.log('[MessengerWidget] WebSocket connected');
+				})
+			);
+			this._wsUnsubscribers.push(
+				this.wsService.on('disconnected', () => {
+					console.log('[MessengerWidget] WebSocket disconnected');
+				})
+			);
+
+			// Connect
+			this.wsService.connect();
 		}
 
 		/**
@@ -4320,82 +5527,159 @@
 		}
 
 		async _fetchConversations() {
-			// Mock data for now
-			if (this.apiService?.mock) {
-				return [
-					{
-						id: 'conv_1',
-						title: 'Chat with Sarah',
-						participants: [{ name: 'Sarah', avatarUrl: null }],
-						lastMessage: "Sarah: Hi 👋 I'm Sarah. How can I help today?",
-						lastMessageTime: new Date(Date.now() - 49 * 60 * 1000).toISOString(),
-						unread: 1,
-					},
-					{
-						id: 'conv_2',
-						title: 'Chat with Tom',
-						participants: [{ name: 'Tom', avatarUrl: null }],
-						lastMessage: 'Tom: The feature will be available next week.',
-						lastMessageTime: new Date(
-							Date.now() - 6 * 24 * 60 * 60 * 1000
-						).toISOString(),
-						unread: 0,
-					},
-				];
+			try {
+				const response = await this.apiService.getConversations();
+				if (response.status && response.data) {
+					// Transform API response to local format
+					return response.data.map((conv) => ({
+						id: conv.id,
+						title: conv.subject || `Chat with ${conv.assigned_user?.name || 'Support'}`,
+						participants: conv.assigned_user
+							? [{ name: conv.assigned_user.name, avatarUrl: conv.assigned_user.avatar }]
+							: [{ name: 'Support', avatarUrl: null }],
+						lastMessage: conv.preview || conv.snippet || '',
+						lastMessageTime: conv.last_message_at,
+						unread: conv.unread || 0,
+						status: conv.status,
+					}));
+				}
+				return [];
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to fetch conversations:', error);
+				return [];
 			}
-
-			// TODO: Implement API call
-			return [];
 		}
 
 		async _fetchHelpArticles() {
-			// Mock data for collections
-			if (this.apiService?.mock) {
-				return [
-					{
-						id: 'collection_1',
-						title: 'Product Overview',
-						description: 'See how your AI-first customer service solution works.',
-						articleCount: 24,
-						url: '#',
-					},
-					{
-						id: 'collection_2',
-						title: 'Getting Started',
-						description:
-							'Everything you need to know to get started with Product7.',
-						articleCount: 30,
-						url: '#',
-					},
-					{
-						id: 'collection_3',
-						title: 'AI Agent',
-						description:
-							'Resolving customer questions instantly and accurately—from live chat to email.',
-						articleCount: 82,
-						url: '#',
-					},
-					{
-						id: 'collection_4',
-						title: 'Channels',
-						description:
-							'Enabling the channels you use to communicate with customers, all from the Inbox.',
-						articleCount: 45,
-						url: '#',
-					},
-					{
-						id: 'collection_5',
-						title: 'Billing & Payments',
-						description:
-							'Manage your subscription, invoices, and payment methods.',
-						articleCount: 12,
-						url: '#',
-					},
-				];
+			try {
+				const response = await this.apiService.getHelpCollections();
+				if (response.status && response.data) {
+					// Transform API response to local format
+					return response.data.map((collection) => ({
+						id: collection.id,
+						title: collection.title || collection.name,
+						description: collection.description || '',
+						articleCount: collection.article_count || collection.articleCount || 0,
+						icon: collection.icon || 'ph-book-open',
+						url: collection.url || `#/help/${collection.slug || collection.id}`,
+					}));
+				}
+				return [];
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to fetch help articles:', error);
+				return [];
+			}
+		}
+
+		/**
+		 * Fetch messages for a conversation
+		 */
+		async fetchMessages(conversationId) {
+			try {
+				const response = await this.apiService.getConversation(conversationId);
+				if (response.status && response.data) {
+					const messages = (response.data.messages || []).map((msg) => ({
+						id: msg.id,
+						content: msg.content,
+						isOwn: msg.sender_type === 'customer',
+						timestamp: msg.created_at,
+						sender: {
+							name: msg.sender_name || (msg.sender_type === 'customer' ? 'You' : 'Support'),
+							avatarUrl: msg.sender_avatar || null,
+						},
+					}));
+					this.messengerState.setMessages(conversationId, messages);
+
+					// Mark as read
+					await this.apiService.markConversationAsRead(conversationId);
+					this.messengerState.markAsRead(conversationId);
+
+					return messages;
+				}
+				return [];
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to fetch messages:', error);
+				return [];
+			}
+		}
+
+		/**
+		 * Start a new conversation
+		 */
+		async startNewConversation(message, subject = '') {
+			try {
+				const response = await this.apiService.startConversation({
+					message,
+					subject,
+				});
+
+				if (response.status && response.data) {
+					const conv = response.data;
+					const newConversation = {
+						id: conv.id,
+						title: conv.subject || 'New conversation',
+						participants: [{ name: 'Support', avatarUrl: null }],
+						lastMessage: message,
+						lastMessageTime: conv.created_at || new Date().toISOString(),
+						unread: 0,
+						status: 'open',
+					};
+
+					// Add to state
+					this.messengerState.addConversation(newConversation);
+
+					// Set initial message in messages cache
+					this.messengerState.setMessages(conv.id, [
+						{
+							id: 'msg_' + Date.now(),
+							content: message,
+							isOwn: true,
+							timestamp: new Date().toISOString(),
+						},
+					]);
+
+					// Navigate to chat
+					this.messengerState.setActiveConversation(conv.id);
+					this.messengerState.setView('chat');
+
+					return conv;
+				}
+				return null;
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to start conversation:', error);
+				return null;
 			}
+		}
+
+		/**
+		 * Send typing indicator
+		 */
+		async sendTypingIndicator(conversationId, isTyping) {
+			try {
+				await this.apiService.sendTypingIndicator(conversationId, isTyping);
+			} catch (error) {
+				// Silently fail - typing indicators are not critical
+			}
+		}
 
-			// TODO: Implement API call
-			return [];
+		/**
+		 * Check agent availability
+		 */
+		async checkAgentAvailability() {
+			try {
+				const response = await this.apiService.checkAgentsOnline();
+				if (response.status && response.data) {
+					this.messengerState.agentsOnline = response.data.agents_online;
+					this.messengerState.onlineCount = response.data.online_count || 0;
+					this.messengerState.responseTime = response.data.response_time || '';
+					this.messengerState._notify('availabilityUpdate', response.data);
+					return response.data;
+				}
+				return { agents_online: false, online_count: 0 };
+			} catch (error) {
+				console.error('[MessengerWidget] Failed to check availability:', error);
+				return { agents_online: false, online_count: 0 };
+			}
 		}
 
 		async _fetchChangelog() {
@@ -4478,19 +5762,64 @@
 				};
 			}
 
-			// TODO: Implement API call for changelogs
-			return { homeItems: [], changelogItems: [] };
+			// Fetch changelogs from API
+			const response = await this.apiService.getChangelogs({ limit: 20 });
+			const changelogs = response.data || [];
+
+			// Map API response to expected format
+			const mappedItems = changelogs.map((item) => ({
+				id: item.id,
+				title: item.title,
+				description: item.excerpt || item.description || '',
+				tags: item.labels ? item.labels.map((label) => label.name) : [],
+				coverImage: item.cover_image || null,
+				coverText: null,
+				publishedAt: item.published_at,
+				url: item.slug ? `/changelog/${item.slug}` : '#',
+			}));
+
+			return {
+				homeItems: mappedItems.slice(0, 3),
+				changelogItems: mappedItems,
+			};
 		}
 
 		onMount() {
 			// Load initial data after mounting
 			this.loadInitialData();
+
+			// Initialize WebSocket for real-time updates
+			if (this.apiService?.sessionToken) {
+				this._initWebSocket();
+			}
+
+			// Check agent availability
+			this.checkAgentAvailability();
+
+			// Periodically check availability (every 60 seconds)
+			this._availabilityInterval = setInterval(() => {
+				this.checkAgentAvailability();
+			}, 60000);
 		}
 
 		onDestroy() {
 			if (this._stateUnsubscribe) {
 				this._stateUnsubscribe();
 			}
+
+			// Clean up WebSocket
+			if (this.wsService) {
+				this.wsService.disconnect();
+			}
+
+			// Clean up WebSocket event listeners
+			this._wsUnsubscribers.forEach((unsub) => unsub());
+			this._wsUnsubscribers = [];
+
+			// Clean up availability interval
+			if (this._availabilityInterval) {
+				clearInterval(this._availabilityInterval);
+			}
 		}
 
 		destroy() {
@@ -4500,6 +5829,7 @@
 			if (this.panel) {
 				this.panel.destroy();
 			}
+			this.onDestroy();
 			super.destroy();
 		}
 	}
@@ -5586,6 +6916,54 @@
 			this.eventBus.emit('sdk:destroyed');
 		}
 
+		/**
+		 * Check if feedback was recently submitted for this workspace
+		 * Uses backend tracking (preferred) with localStorage as fallback
+		 * @param {number} cooldownDays - Days to consider as "recently" (default: 30)
+		 * @returns {boolean} true if feedback was submitted within the cooldown period
+		 */
+		hasFeedbackBeenSubmitted(cooldownDays = 30) {
+			const cooldownMs = cooldownDays * 24 * 60 * 60 * 1000;
+			const now = Date.now();
+
+			// Check backend tracking first (from init response)
+			if (this.config.last_feedback_at) {
+				try {
+					const backendTimestamp = new Date(this.config.last_feedback_at).getTime();
+					if ((now - backendTimestamp) < cooldownMs) {
+						return true;
+					}
+				} catch (e) {
+					// Invalid date format, continue to localStorage check
+				}
+			}
+
+			// Fallback to localStorage
+			try {
+				const storageKey = `feedback_submitted_${this.config.workspace}`;
+				const stored = localStorage.getItem(storageKey);
+				if (!stored) return false;
+
+				const data = JSON.parse(stored);
+				return (now - data.submittedAt) < cooldownMs;
+			} catch (e) {
+				return false;
+			}
+		}
+
+		/**
+		 * Clear the feedback submission tracking (allow showing widgets again)
+		 */
+		clearFeedbackSubmissionTracking() {
+			try {
+				const storageKey = `feedback_submitted_${this.config.workspace}`;
+				localStorage.removeItem(storageKey);
+				this.eventBus.emit('feedback:trackingCleared');
+			} catch (e) {
+				console.warn('Failed to clear feedback tracking:', e);
+			}
+		}
+
 		_detectEnvironment() {
 			if (typeof window === 'undefined') {
 				return 'production';
@@ -7328,6 +8706,106 @@
   }
 }
 
+/* ========================================
+   Availability Status
+   ======================================== */
+
+.messenger-home-availability,
+.messenger-chat-availability {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.theme-light .messenger-home-availability,
+.theme-light .messenger-chat-availability {
+  color: #6b7280;
+}
+
+.messenger-availability-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.messenger-availability-online {
+  background: #22c55e;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
+}
+
+.messenger-availability-away {
+  background: #9ca3af;
+}
+
+.messenger-availability-text {
+  opacity: 0.9;
+}
+
+/* ========================================
+   Typing Indicator
+   ======================================== */
+
+.messenger-typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin: 4px 0;
+}
+
+.messenger-typing-dots {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: #374151;
+  padding: 8px 12px;
+  border-radius: 16px;
+}
+
+.theme-light .messenger-typing-dots {
+  background: #e5e7eb;
+}
+
+.messenger-typing-dots span {
+  width: 6px;
+  height: 6px;
+  background: #9ca3af;
+  border-radius: 50%;
+  animation: messenger-typing-bounce 1.4s infinite ease-in-out;
+}
+
+.messenger-typing-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.messenger-typing-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+.messenger-typing-dots span:nth-child(3) {
+  animation-delay: 0s;
+}
+
+.messenger-typing-text {
+  font-size: 12px;
+  color: #9ca3af;
+}
+
+@keyframes messenger-typing-bounce {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
 /* ========================================
    Animations
    ======================================== */
@@ -8286,8 +9764,8 @@
 
 .changelog-popup-title {
   margin: 0 0 16px;
-  font-size: 28px;
-  font-weight: 700;
+  font-size: 18px;
+  font-weight: 600;
   line-height: 1.3;
   color: #111827;
 }