@product7/product7-js 0.5.4 → 0.5.6

package/src/widgets/{web-chat → live-chat}/views/ChatView.js

@@ -15,14 +15,14 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'web-chat-view web-chat-chat-view';
+		this.element.className = 'live-chat-view live-chat-chat-view';
 
 		this._updateContent();
 
 		this._unsubscribe = this.state.subscribe((type, data) => {
 			if (type === 'connectionChange') {
 				const banner = this.element?.querySelector(
-					'.web-chat-connection-banner'
+					'.live-chat-connection-banner'
 				);
 				if (banner) {
 					banner.style.display = data.connected ? 'none' : 'flex';
@@ -88,50 +88,50 @@
 			: `<iconify-icon icon="ph:chats-circle-duotone" width="20" height="20"></iconify-icon>`;
 
 		this.element.innerHTML = `
-			<div class="web-chat-chat-header">
-				<button class="sdk-btn-icon web-chat-back-btn" aria-label="Back">
+			<div class="live-chat-chat-header">
+				<button class="sdk-btn-icon live-chat-back-btn" aria-label="Back">
 					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
 				</button>
-				<div class="web-chat-chat-header-avatar">
+				<div class="live-chat-chat-header-avatar">
 					${headerAvatarHtml}
 				</div>
-				<div class="web-chat-chat-header-info">
-					<span class="web-chat-chat-title">${this._escapeHtml(teamName)}</span>
-					<span class="web-chat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
+				<div class="live-chat-chat-header-info">
+					<span class="live-chat-chat-title">${this._escapeHtml(teamName)}</span>
+					<span class="live-chat-chat-subtitle">${isClosed ? 'Conversation resolved' : this.state.responseTime || 'Typically replies within minutes'}</span>
 				</div>
-				<div class="web-chat-chat-header-actions">
-					<button class="sdk-btn-icon sdk-close-btn web-chat-mobile-close-btn" aria-label="Close">
+				<div class="live-chat-chat-header-actions">
+					<button class="sdk-btn-icon sdk-close-btn live-chat-mobile-close-btn" aria-label="Close">
 						<iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 					</button>
 				</div>
 			</div>
 
-			<div class="web-chat-connection-banner" style="display:none;">
+			<div class="live-chat-connection-banner" style="display:none;">
 				<iconify-icon icon="ph:wifi-slash" width="14" height="14"></iconify-icon>
 				<span>Reconnecting…</span>
 			</div>
 
-			<div class="web-chat-chat-messages">
+			<div class="live-chat-chat-messages">
 				${messagesHtml}
 				${
 					isClosed
 						? `
-				<div class="web-chat-closed-banner">
+				<div class="live-chat-closed-banner">
 					<iconify-icon icon="ph:check-circle-duotone" width="18" height="18"></iconify-icon>
 					<span>This conversation has been resolved</span>
 				</div>
 				`
 						: ''
 				}
-				<div class="web-chat-typing-indicator">
-					<div class="web-chat-typing-dots">
+				<div class="live-chat-typing-indicator">
+					<div class="live-chat-typing-dots">
 						<span></span><span></span><span></span>
 					</div>
-					<span class="web-chat-typing-text"></span>
+					<span class="live-chat-typing-text"></span>
 				</div>
 			</div>
 
-			<div class="web-chat-scroll-pill" style="display:none;">
+			<div class="live-chat-scroll-pill" style="display:none;">
 				<iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>
 				<span>New message</span>
 			</div>
@@ -140,33 +140,33 @@
 				isClosed
 					? ''
 					: `
-			<div class="web-chat-compose-attachments-preview"></div>
+			<div class="live-chat-compose-attachments-preview"></div>
 
-			<div class="web-chat-chat-compose">
-				<div class="web-chat-compose-input-wrapper">
-					<textarea class="web-chat-compose-input" placeholder="${placeholder}" rows="1"></textarea>
+			<div class="live-chat-chat-compose">
+				<div class="live-chat-compose-input-wrapper">
+					<textarea class="live-chat-compose-input" placeholder="${placeholder}" rows="1"></textarea>
 				</div>
-				<div class="web-chat-compose-bottom">
-					<div class="web-chat-compose-actions">
-						<button class="sdk-btn-icon web-chat-compose-attach" aria-label="Attach file">
+				<div class="live-chat-compose-bottom">
+					<div class="live-chat-compose-actions">
+						<button class="sdk-btn-icon live-chat-compose-attach" aria-label="Attach file">
 							<iconify-icon icon="ph:paperclip-duotone" width="20" height="20"></iconify-icon>
 						</button>
-						<button class="sdk-btn-icon web-chat-emoji-btn" aria-label="Emoji">
+						<button class="sdk-btn-icon live-chat-emoji-btn" aria-label="Emoji">
 							<iconify-icon icon="ph:smiley-duotone" width="20" height="20"></iconify-icon>
 						</button>
 					</div>
-					<button class="web-chat-compose-send" aria-label="Send" disabled>
+					<button class="live-chat-compose-send" aria-label="Send" disabled>
 						<iconify-icon icon="ph:paper-plane-right" width="20" height="20"></iconify-icon>
 					</button>
 				</div>
-				<input type="file" class="web-chat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
+				<input type="file" class="live-chat-compose-file-input" multiple accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip" />
 			</div>
 			`
 			}
 		`;
 
 		this._typingIndicator = this.element.querySelector(
-			'.web-chat-typing-indicator'
+			'.live-chat-typing-indicator'
 		);
 		this._attachEvents();
 		this._scrollToBottom();
@@ -178,11 +178,11 @@
 		const logoUrl = this.options.logoUrl;
 
 		const logoHtml = logoUrl
-			? `<div class="web-chat-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
+			? `<div class="live-chat-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
 			: '';
 
 		return `
-			<div class="web-chat-chat-empty">
+			<div class="live-chat-chat-empty">
 				${logoHtml}
 				<h3>${isNewConversation ? 'Start a new conversation' : 'Start the conversation'}</h3>
 			</div>
@@ -194,12 +194,12 @@
 		return attachments
 			.map((att) => {
 				if (att.type === 'image') {
-					return `<img class="web-chat-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
+					return `<img class="live-chat-message-image" src="${this._escapeHtml(att.url)}" alt="${this._escapeHtml(att.name || 'image')}" data-url="${this._escapeHtml(att.url)}" />`;
 				}
-				return `<a class="web-chat-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
+				return `<a class="live-chat-message-file" href="${this._escapeHtml(att.url)}" data-url="${this._escapeHtml(att.url)}" data-name="${this._escapeHtml(att.name || 'file')}">
 				<iconify-icon icon="ph:file-duotone" width="18" height="18"></iconify-icon>
 				<span>${this._escapeHtml(att.name || 'file')}</span>
-				<iconify-icon icon="ph:download-simple" width="16" height="16" class="web-chat-file-download-icon"></iconify-icon>
+				<iconify-icon icon="ph:download-simple" width="16" height="16" class="live-chat-file-download-icon"></iconify-icon>
 			</a>`;
 			})
 			.join('');
@@ -212,8 +212,8 @@
 
 		const isOwn = message.isOwn;
 		const messageClass = isOwn
-			? 'web-chat-message-own'
-			: 'web-chat-message-received';
+			? 'live-chat-message-own'
+			: 'live-chat-message-received';
 		const timeStr = isLastInGroup
 			? this._formatMessageTime(message.timestamp)
 			: '';
@@ -221,25 +221,25 @@
 		const isOptimistic = message.isOptimistic;
 
 		const contentHtml = message.content
-			? `<div class="web-chat-message-content">${this._formatMessageContent(message.content)}</div>`
+			? `<div class="live-chat-message-content">${this._formatMessageContent(message.content)}</div>`
 			: '';
 		const bubbleHtml = contentHtml
-			? `<div class="web-chat-message-bubble">${contentHtml}</div>`
+			? `<div class="live-chat-message-bubble">${contentHtml}</div>`
 			: '';
 
 		if (isOwn) {
 			const sentIndicator = isLastInGroup
-				? `<div class="web-chat-message-meta web-chat-message-meta-own">
+				? `<div class="live-chat-message-meta live-chat-message-meta-own">
 						${
 							isOptimistic
-								? `<span class="web-chat-message-sent-status">Sending…</span>`
-								: `<span class="web-chat-message-sent-status">Sent</span>`
+								? `<span class="live-chat-message-sent-status">Sending…</span>`
+								: `<span class="live-chat-message-sent-status">Sent</span>`
 						}
 						${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
 					</div>`
 				: '';
 			return `
-				<div class="web-chat-message ${messageClass}${isOptimistic ? ' web-chat-message-optimistic' : ''}">
+				<div class="live-chat-message ${messageClass}${isOptimistic ? ' live-chat-message-optimistic' : ''}">
 					${bubbleHtml}
 					${attachmentsHtml}
 					${sentIndicator}
@@ -249,15 +249,15 @@
 
 		const avatarHtml = this._renderSenderAvatar(message.sender);
 		return `
-			<div class="web-chat-message ${messageClass}">
-				<div class="web-chat-message-row">
-					<div class="web-chat-message-avatar">${avatarHtml}</div>
-					<div class="web-chat-message-wrapper">
+			<div class="live-chat-message ${messageClass}">
+				<div class="live-chat-message-row">
+					<div class="live-chat-message-avatar">${avatarHtml}</div>
+					<div class="live-chat-message-wrapper">
 						${bubbleHtml}
 						${attachmentsHtml}
 					</div>
 				</div>
-				${timeStr ? `<div class="web-chat-message-meta"><span>${timeStr}</span></div>` : ''}
+				${timeStr ? `<div class="live-chat-message-meta"><span>${timeStr}</span></div>` : ''}
 			</div>
 		`;
 	}
@@ -286,11 +286,11 @@
 			const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
 
 			return `
-				<div class="web-chat-message-system-event">
-					<div class="web-chat-message-system-event-avatar">${logoHtml}</div>
-					<span class="web-chat-message-system-event-name">${this._escapeHtml(name)}</span>
-					<span class="web-chat-message-system-event-action">${this._escapeHtml(action)}</span>
-					${timeStr ? `<span class="web-chat-message-system-event-time">${timeStr}</span>` : ''}
+				<div class="live-chat-message-system-event">
+					<div class="live-chat-message-system-event-avatar">${logoHtml}</div>
+					<span class="live-chat-message-system-event-name">${this._escapeHtml(name)}</span>
+					<span class="live-chat-message-system-event-action">${this._escapeHtml(action)}</span>
+					${timeStr ? `<span class="live-chat-message-system-event-time">${timeStr}</span>` : ''}
 				</div>
 			`;
 		}
@@ -304,16 +304,16 @@
 		const timeStr = this._formatMessageTime(message.timestamp);
 
 		return `
-			<div class="web-chat-message web-chat-message-received">
-				<div class="web-chat-message-row">
-					<div class="web-chat-message-avatar">${avatarHtml}</div>
-					<div class="web-chat-message-wrapper">
-						<div class="web-chat-message-bubble">
-							<div class="web-chat-message-content">${this._formatMessageContent(content)}</div>
+			<div class="live-chat-message live-chat-message-received">
+				<div class="live-chat-message-row">
+					<div class="live-chat-message-avatar">${avatarHtml}</div>
+					<div class="live-chat-message-wrapper">
+						<div class="live-chat-message-bubble">
+							<div class="live-chat-message-content">${this._formatMessageContent(content)}</div>
 						</div>
 					</div>
 				</div>
-				${timeStr ? `<div class="web-chat-message-meta"><span>${timeStr}</span></div>` : ''}
+				${timeStr ? `<div class="live-chat-message-meta"><span>${timeStr}</span></div>` : ''}
 			</div>
 		`;
 	}
@@ -342,7 +342,7 @@
 			})
 			.join('');
 
-		return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
+		return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_formatMessageTime(timestamp) {
@@ -372,9 +372,9 @@
 
 	_appendMessage(message) {
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.live-chat-chat-messages'
 		);
-		const emptyState = messagesContainer.querySelector('.web-chat-chat-empty');
+		const emptyState = messagesContainer.querySelector('.live-chat-chat-empty');
 		if (emptyState) {
 			emptyState.remove();
 		}
@@ -394,14 +394,14 @@
 		if (isNearBottom) {
 			this._scrollToBottom();
 		} else if (!message.isOwn) {
-			const pill = this.element.querySelector('.web-chat-scroll-pill');
+			const pill = this.element.querySelector('.live-chat-scroll-pill');
 			if (pill) pill.style.display = 'flex';
 		}
 	}
 
 	_scrollToBottom() {
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.live-chat-chat-messages'
 		);
 		if (messagesContainer) {
 			setTimeout(() => {
@@ -412,9 +412,9 @@
 
 	_setupScrollPill() {
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.live-chat-chat-messages'
 		);
-		const pill = this.element.querySelector('.web-chat-scroll-pill');
+		const pill = this.element.querySelector('.live-chat-scroll-pill');
 		if (!messagesContainer || !pill) return;
 
 		pill.addEventListener('click', () => {
@@ -469,8 +469,8 @@
 	}
 
 	_updateSendButtonState() {
-		const input = this.element.querySelector('.web-chat-compose-input');
-		const sendBtn = this.element.querySelector('.web-chat-compose-send');
+		const input = this.element.querySelector('.live-chat-compose-input');
+		const sendBtn = this.element.querySelector('.live-chat-compose-send');
 		if (input && sendBtn) {
 			sendBtn.disabled =
 				!input.value.trim() && this._pendingAttachments.length === 0;
@@ -479,7 +479,7 @@
 
 	_renderAttachmentPreviews() {
 		const container = this.element.querySelector(
-			'.web-chat-compose-attachments-preview'
+			'.live-chat-compose-attachments-preview'
 		);
 		if (!container) return;
 
@@ -494,18 +494,18 @@
 			.map((att, i) => {
 				const isImage = att.type.startsWith('image');
 				const thumb = isImage
-					? `<img class="web-chat-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
-					: `<div class="web-chat-attachment-thumb web-chat-attachment-file-icon"><iconify-icon icon="ph:file-duotone" width="24" height="24"></iconify-icon></div>`;
+					? `<img class="live-chat-attachment-thumb" src="${att.preview}" alt="${this._escapeHtml(att.file.name)}" />`
+					: `<div class="live-chat-attachment-thumb live-chat-attachment-file-icon"><iconify-icon icon="ph:file-duotone" width="24" height="24"></iconify-icon></div>`;
 				return `
-				<div class="web-chat-attachment-preview" data-index="${i}">
+				<div class="live-chat-attachment-preview" data-index="${i}">
 					${thumb}
-					<button class="web-chat-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
+					<button class="live-chat-attachment-remove" data-index="${i}" aria-label="Remove">&times;</button>
 				</div>
 			`;
 			})
 			.join('');
 
-		container.querySelectorAll('.web-chat-attachment-remove').forEach((btn) => {
+		container.querySelectorAll('.live-chat-attachment-remove').forEach((btn) => {
 			btn.addEventListener('click', (e) => {
 				const idx = parseInt(e.currentTarget.dataset.index, 10);
 				this._pendingAttachments.splice(idx, 1);
@@ -517,13 +517,13 @@
 
 	_attachEvents() {
 		this.element
-			.querySelector('.web-chat-back-btn')
+			.querySelector('.live-chat-back-btn')
 			.addEventListener('click', () => {
 				this.state.setView('messages');
 			});
 
 		const mobileCloseBtn = this.element.querySelector(
-			'.web-chat-mobile-close-btn'
+			'.live-chat-mobile-close-btn'
 		);
 		if (mobileCloseBtn) {
 			mobileCloseBtn.addEventListener('click', () => {
@@ -531,8 +531,8 @@
 			});
 		}
 
-		const input = this.element.querySelector('.web-chat-compose-input');
-		const sendBtn = this.element.querySelector('.web-chat-compose-send');
+		const input = this.element.querySelector('.live-chat-compose-input');
+		const sendBtn = this.element.querySelector('.live-chat-compose-send');
 
 		if (input && sendBtn) {
 			input.addEventListener('input', () => {
@@ -557,7 +557,7 @@
 			});
 		}
 
-		const emojiBtn = this.element.querySelector('.web-chat-emoji-btn');
+		const emojiBtn = this.element.querySelector('.live-chat-emoji-btn');
 		if (emojiBtn) {
 			emojiBtn.addEventListener('click', (e) => {
 				e.stopPropagation();
@@ -565,9 +565,9 @@
 			});
 		}
 
-		const attachBtn = this.element.querySelector('.web-chat-compose-attach');
+		const attachBtn = this.element.querySelector('.live-chat-compose-attach');
 		const fileInput = this.element.querySelector(
-			'.web-chat-compose-file-input'
+			'.live-chat-compose-file-input'
 		);
 
 		if (attachBtn && fileInput) {
@@ -596,11 +596,11 @@
 		}
 
 		const messagesContainer = this.element.querySelector(
-			'.web-chat-chat-messages'
+			'.live-chat-chat-messages'
 		);
 		if (messagesContainer) {
 			messagesContainer.addEventListener('click', (e) => {
-				const fileLink = e.target.closest('.web-chat-message-file');
+				const fileLink = e.target.closest('.live-chat-message-file');
 				if (fileLink) {
 					e.preventDefault();
 					const url = fileLink.dataset.url;
@@ -609,7 +609,7 @@
 					return;
 				}
 
-				const img = e.target.closest('.web-chat-message-image');
+				const img = e.target.closest('.live-chat-message-image');
 				if (img) {
 					const url = img.dataset.url || img.src;
 					window.open(url, '_blank');
@@ -648,7 +648,7 @@
 	async _sendMessage() {
 		if (this._isConversationClosed) return;
 
-		const input = this.element.querySelector('.web-chat-compose-input');
+		const input = this.element.querySelector('.live-chat-compose-input');
 		const content = input.value.trim();
 		const hasAttachments = this._pendingAttachments.length > 0;
 
@@ -713,7 +713,7 @@
 
 	async _toggleEmojiPicker() {
 		const existing = this.element.querySelector(
-			'.web-chat-emoji-picker-container'
+			'.live-chat-emoji-picker-container'
 		);
 		if (existing) {
 			existing.remove();
@@ -732,12 +732,12 @@
 		}
 
 		const container = document.createElement('div');
-		container.className = 'web-chat-emoji-picker-container';
+		container.className = 'live-chat-emoji-picker-container';
 
 		const picker = document.createElement('emoji-picker');
 		container.appendChild(picker);
 
-		const compose = this.element.querySelector('.web-chat-chat-compose');
+		const compose = this.element.querySelector('.live-chat-chat-compose');
 		compose.parentNode.insertBefore(container, compose);
 		this._emojiPickerOpen = true;
 
@@ -754,7 +754,7 @@
 		this._emojiOutsideHandler = (e) => {
 			if (
 				!container.contains(e.target) &&
-				!e.target.closest('.web-chat-emoji-btn')
+				!e.target.closest('.live-chat-emoji-btn')
 			) {
 				container.remove();
 				this._emojiPickerOpen = false;
@@ -769,7 +769,7 @@
 	}
 
 	_insertEmoji(emoji) {
-		const input = this.element.querySelector('.web-chat-compose-input');
+		const input = this.element.querySelector('.live-chat-compose-input');
 		if (!input) return;
 		const start = input.selectionStart;
 		const end = input.selectionEnd;
@@ -813,7 +813,7 @@
 		if (this._typingIndicator) {
 			this._typingIndicator.style.display = 'flex';
 			const textEl = this._typingIndicator.querySelector(
-				'.web-chat-typing-text'
+				'.live-chat-typing-text'
 			);
 			if (textEl) {
 				textEl.textContent = `${userName || 'Support'} is typing...`;

package/src/widgets/{web-chat → live-chat}/views/ConversationsView.js

@@ -17,7 +17,7 @@
 
 	render() {
 		this.element = document.createElement('div');
-		this.element.className = 'web-chat-view web-chat-conversations-view';
+		this.element.className = 'live-chat-view live-chat-conversations-view';
 
 		this._updateContent();
 		this._attachEvents();
@@ -48,8 +48,8 @@
 		let conversationsHtml;
 		if (conversations.length === 0) {
 			conversationsHtml = `
-            <div class="web-chat-empty-state">
-                <div class="web-chat-empty-state-icon">
+            <div class="live-chat-empty-state">
+                <div class="live-chat-empty-state-icon">
                     <iconify-icon icon="ph:chat-circle-duotone" width="48" height="48"></iconify-icon>
                 </div>
                 <h3>No conversations yet</h3>
@@ -58,26 +58,26 @@
         `;
 		} else {
 			conversationsHtml = `
-            <div class="web-chat-conversations-list">
+            <div class="live-chat-conversations-list">
                 ${conversations.map((conv) => this._renderConversationItem(conv)).join('')}
             </div>
         `;
 		}
 
 		this.element.innerHTML = `
-        <div class="web-chat-conversations-header">
+        <div class="live-chat-conversations-header">
             <h2>Messages</h2>
-           <button class="sdk-close-btn web-chat-mobile-close-btn" aria-label="Close">
+           <button class="sdk-close-btn live-chat-mobile-close-btn" aria-label="Close">
   <iconify-icon icon="ph:x" width="18" height="18"></iconify-icon>
 </button>
         </div>
 
-        <div class="web-chat-conversations-body">
+        <div class="live-chat-conversations-body">
             ${conversationsHtml}
         </div>
 
-        <div class="web-chat-conversations-footer">
-            <button class="web-chat-new-message-btn">
+        <div class="live-chat-conversations-footer">
+            <button class="live-chat-new-message-btn">
                 <iconify-icon icon="ph:pencil-simple" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-secondary);"></iconify-icon>
                 <span style="flex: 1;">New conversation</span>
                 <iconify-icon icon="ph:caret-right" width="16" height="16" style="flex-shrink: 0; color: var(--msg-text-tertiary);"></iconify-icon>
@@ -98,19 +98,19 @@
 		);
 
 		return `
-			<div class="web-chat-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
-				<div class="web-chat-conversation-avatars">
+			<div class="live-chat-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
+				<div class="live-chat-conversation-avatars">
 					${avatarsHtml}
 				</div>
-				<div class="web-chat-conversation-content">
-					<div class="web-chat-conversation-header">
-						<span class="web-chat-conversation-title">${conversation.title || 'Chat with team'}</span>
-						<span class="web-chat-conversation-time">${timeAgo}</span>
+				<div class="live-chat-conversation-content">
+					<div class="live-chat-conversation-header">
+						<span class="live-chat-conversation-title">${conversation.title || 'Chat with team'}</span>
+						<span class="live-chat-conversation-time">${timeAgo}</span>
 					</div>
-					<div class="web-chat-conversation-preview">
-						${conversation.unread > 0 ? '<span class="web-chat-unread-dot"></span>' : ''}
-						${isClosed ? '<span class="web-chat-conversation-resolved-badge">Resolved</span>' : ''}
-						<span class="web-chat-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
+					<div class="live-chat-conversation-preview">
+						${conversation.unread > 0 ? '<span class="live-chat-unread-dot"></span>' : ''}
+						${isClosed ? '<span class="live-chat-conversation-resolved-badge">Resolved</span>' : ''}
+						<span class="live-chat-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
 					</div>
 				</div>
 			</div>
@@ -138,7 +138,7 @@
 			const color1 = this._getAvatarColor('S');
 			const color2 = this._getAvatarColor('T');
 			return `
-				<div class="web-chat-avatar-stack">
+				<div class="live-chat-avatar-stack">
 					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color1};">S</div>
 					<div class="sdk-avatar sdk-avatar-sm" style="background-color: ${color2};">T</div>
 				</div>
@@ -157,7 +157,7 @@
 			})
 			.join('');
 
-		return `<div class="web-chat-avatar-stack">${avatarItems}</div>`;
+		return `<div class="live-chat-avatar-stack">${avatarItems}</div>`;
 	}
 
 	_formatTimeAgo(timestamp) {
@@ -192,7 +192,7 @@
 		}
 
 		this.element
-			.querySelectorAll('.web-chat-conversation-item')
+			.querySelectorAll('.live-chat-conversation-item')
 			.forEach((item) => {
 				item.addEventListener('click', () => {
 					const convId = item.dataset.conversationId;
@@ -206,7 +206,7 @@
 				});
 			});
 
-		const newMsgBtn = this.element.querySelector('.web-chat-new-message-btn');
+		const newMsgBtn = this.element.querySelector('.live-chat-new-message-btn');
 		if (newMsgBtn) {
 			newMsgBtn.addEventListener('click', () => {
 				this._startNewConversation();