@product7/product7-js 0.2.9 → 0.3.1

package/dist/product7-js.js

@@ -2512,6 +2512,11 @@
   transition-duration: 100ms;
 }
 
+.sdk-btn-icon:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
 .sdk-input {
   width: 100%;
   height: 40px;
@@ -3388,7 +3393,7 @@
 .messenger-message {
   display: flex;
   gap: var(--spacing-2);
-  max-width: 85%;
+  max-width: 75%;
 }
 
 .messenger-message-system {
@@ -3409,11 +3414,11 @@
 }
 
 .messenger-message-system-text {
-  font-size: 0.6875rem;
-  color: var(--msg-text-tertiary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--msg-text-secondary);
   white-space: nowrap;
   padding: 0 var(--spacing-2);
-  letter-spacing: 0.01em;
 }
 
 /* Rich join/leave system event */
@@ -3422,8 +3427,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-4) 0;
+  gap: 4px;
+  padding: var(--spacing-3) 0;
   width: 100%;
   text-align: center;
 }
@@ -3432,39 +3437,43 @@
   width: 3rem;
   height: 3rem;
   border-radius: var(--radius-full);
-  border: 2px solid var(--msg-border);
+  border: 1px solid var(--msg-border);
+  background: var(--msg-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.125rem;
   font-weight: var(--font-weight-semibold);
-  color: #ffffff;
+  color: var(--msg-text);
   overflow: hidden;
   flex-shrink: 0;
+  margin-bottom: 4px;
 }
 
 .messenger-message-system-event-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+  width: 60%;
+  height: 60%;
+  object-fit: contain;
 }
 
 .messenger-message-system-event-name {
-  font-size: var(--font-size-sm);
+  font-size: 0.875rem;
   font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
   line-height: 1.3;
 }
 
 .messenger-message-system-event-action {
-  font-size: var(--font-size-xs);
-  color: var(--msg-text-tertiary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--msg-text-secondary);
   margin-top: -2px;
 }
 
 .messenger-message-system-event-time {
-  font-size: 0.6875rem;
-  color: var(--msg-text-muted);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--msg-text-tertiary);
 }
 
 .messenger-message-own {
@@ -3517,8 +3526,8 @@
 }
 
 .messenger-message-content {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
+  font-size: 0.875rem;
+  font-weight: 500;
   line-height: var(--line-height-relaxed);
 }
 
@@ -3551,6 +3560,14 @@
   justify-content: flex-end;
 }
 
+.messenger-message-sent-status {
+  color: var(--msg-text-muted);
+}
+
+.messenger-message-optimistic .messenger-message-bubble {
+  opacity: 0.7;
+}
+
 .messenger-message-image {
   max-width: 220px;
   max-height: 200px;
@@ -3608,6 +3625,48 @@
   font-weight: var(--font-weight-medium);
 }
 
+/* ========================================
+   SCROLL PILL & CONNECTION BANNER
+   ======================================== */
+
+.messenger-scroll-pill {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: 6px 14px;
+  background: var(--color-primary);
+  color: #ffffff;
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  box-shadow: var(--shadow-lg);
+  z-index: 10;
+  white-space: nowrap;
+}
+
+.messenger-connection-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: 6px var(--spacing-4);
+  background: #fef3c7;
+  color: #92400e;
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+.messenger-widget.theme-dark .messenger-connection-banner {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
+}
+
 /* ========================================
    CHAT HEADER
    ======================================== */
@@ -3624,18 +3683,20 @@
   width: 2.25rem;
   height: 2.25rem;
   border-radius: var(--radius-lg);
-  background: var(--color-neutral-100);
+  background: var(--msg-bg-surface);
+  border: 1px solid var(--msg-border);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   overflow: hidden;
+  padding: 4px;
 }
 
 .messenger-chat-header-avatar img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
 }
 
 .messenger-chat-header-avatar svg {
@@ -3695,6 +3756,24 @@
   margin-bottom: var(--spacing-4);
 }
 
+.messenger-chat-empty-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  margin-bottom: var(--spacing-4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--msg-bg-surface);
+}
+
+.messenger-chat-empty-logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 .messenger-chat-empty h3 {
   margin: 0 0 var(--spacing-2);
   font-size: var(--font-size-base);
@@ -3702,12 +3781,6 @@
   color: var(--msg-text);
 }
 
-.messenger-chat-empty p {
-  margin: 0;
-  font-size: var(--font-size-base);
-  color: var(--msg-text-secondary);
-  max-width: 240px;
-}
 
 /* ========================================
    COMPOSE AREA
@@ -3788,6 +3861,15 @@
   color: var(--msg-text-tertiary);
 }
 
+.messenger-compose-input:focus {
+  outline: none;
+}
+
+.messenger-chat-compose:focus-within {
+  border-color: var(--color-primary-border);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
 .messenger-compose-bottom {
   display: flex;
   align-items: center;
@@ -4264,6 +4346,7 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 
 .messenger-avatar-stack {
@@ -4629,6 +4712,10 @@
   margin-left: var(--spacing-4);
 }
 
+.messenger-home-avatars:empty {
+  display: none;
+}
+
 .messenger-home-welcome {
   display: flex;
   flex-direction: column;
@@ -4638,17 +4725,19 @@
 }
 
 .messenger-home-greeting {
-  font-size: 34px;
+  font-size: clamp(22px, 8vw, 34px);
   font-weight: var(--font-weight-bold);
   color: var(--msg-text);
   line-height: var(--line-height-tight);
+  word-break: break-word;
 }
 
 .messenger-home-question {
-  font-size: 28px;
+  font-size: clamp(18px, 6.5vw, 28px);
   font-weight: var(--font-weight-bold);
   color: var(--msg-text);
   line-height: var(--line-height-tight);
+  word-break: break-word;
 }
 
 .messenger-home-body {
@@ -4658,6 +4747,112 @@
   z-index: 2;
 }
 
+.messenger-home-recent-card {
+  background: var(--msg-bg);
+  border: 1px solid var(--msg-border);
+  border-radius: 10px;
+  padding: var(--spacing-3) var(--spacing-4);
+  margin-bottom: var(--spacing-2);
+  cursor: pointer;
+  transition: background var(--transition-base);
+  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+
+.messenger-home-recent-card:hover {
+  background: var(--msg-bg-hover);
+}
+
+.messenger-home-recent-card-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--msg-text-tertiary);
+  margin-bottom: var(--spacing-2);
+}
+
+.messenger-home-recent-card-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+.messenger-home-recent-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: #ffffff;
+  overflow: hidden;
+}
+
+.messenger-home-recent-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.messenger-home-recent-avatar-logo {
+  background: var(--msg-bg-surface);
+  border: 1px solid var(--msg-border);
+  padding: 4px;
+}
+
+.messenger-home-recent-avatar-logo img {
+  object-fit: contain;
+}
+
+.messenger-home-recent-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.messenger-home-recent-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+  margin-bottom: 2px;
+}
+
+.messenger-home-recent-card-name {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+}
+
+.messenger-home-recent-card-time {
+  font-size: var(--font-size-xs);
+  color: var(--msg-text-tertiary);
+  flex-shrink: 0;
+}
+
+.messenger-home-recent-card-preview {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.messenger-home-recent-card-message {
+  font-size: var(--font-size-sm);
+  color: var(--msg-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.messenger-home-recent-unread-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--color-primary);
+  flex-shrink: 0;
+}
+
 .messenger-home-message-btn {
   width: 100%;
   display: flex;
@@ -4678,13 +4873,11 @@
 }
 
 .messenger-home-message-btn:hover {
-  background: var(--msg-bg-elevated);
-  transform: translateX(4px);
-  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  background: var(--msg-bg-hover);
 }
 
 .messenger-home-message-btn:active {
-  transform: translateX(4px) translateY(1px);
+  transform: translateY(1px);
   transition-duration: 100ms;
 }
 
@@ -4702,14 +4895,21 @@
 .messenger-home-continue-info {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: 2px;
   text-align: left;
   flex: 1;
 }
 
 .messenger-home-continue-label {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-normal);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+  color: var(--msg-text);
+}
+
+.messenger-home-message-subtext {
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  color: var(--msg-text-secondary);
 }
 
 .messenger-home-continue-preview {
@@ -4852,6 +5052,8 @@
   height: 8px;
   border-radius: var(--radius-full);
   flex-shrink: 0;
+  align-self: center;
+  display: block;
 }
 
 .messenger-availability-online {
@@ -4908,7 +5110,7 @@
 
 .messenger-conversation-item {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--spacing-3);
   padding: 10px var(--spacing-4);
   cursor: pointer;
@@ -4926,31 +5128,40 @@
 
 .messenger-conversation-avatars {
   flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  align-self: stretch;
 }
 
 .messenger-conversation-content {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .messenger-conversation-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: var(--spacing-1);
+  margin-bottom: 2px;
   gap: var(--spacing-3);
 }
 
 .messenger-conversation-title {
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
   color: var(--msg-text);
-  line-height: var(--line-height-snug);
+  line-height: 1.4;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .messenger-conversation-time {
   font-size: var(--font-size-sm);
-  color: var(--msg-text-secondary);
+  color: var(--msg-text-tertiary);
   flex-shrink: 0;
 }
 
@@ -4961,18 +5172,18 @@
 }
 
 .messenger-conversation-message {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-normal);
-  color: var(--msg-text-tertiary);
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+  color: var(--msg-text-secondary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height-normal);
+  line-height: 1.4;
 }
 
 .messenger-conversation-item.unread .messenger-conversation-message {
   color: var(--msg-text);
-  font-weight: var(--font-weight-medium);
+  font-weight: 500;
 }
 
 .messenger-unread-dot {
@@ -4983,35 +5194,44 @@
   flex-shrink: 0;
 }
 
+.messenger-conversation-item.closed .messenger-conversation-title,
+.messenger-conversation-item.closed .messenger-conversation-message {
+  color: var(--msg-text-tertiary);
+}
+
+.messenger-conversation-resolved-badge {
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: var(--color-success-dark);
+  background: var(--color-success-light);
+  border-radius: var(--radius-full);
+  padding: 1px 7px;
+  flex-shrink: 0;
+}
+
 .messenger-conversations-footer {
-  padding: var(--spacing-4);
-  border-top: none;
+  border-top: 1px solid var(--msg-border);
 }
 
 .messenger-new-message-btn {
-  max-width: 220px;
-  margin: 0 auto;
+  width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
-  background: var(--msg-bg);
+  gap: var(--spacing-3);
+  padding: 12px var(--spacing-4);
+  background: transparent;
   border: none;
-  border-radius: var(--radius-xl);
   color: var(--msg-text);
-  font-size: var(--font-size-base);
+  font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
-  transition: all var(--transition-base);
+  transition: background var(--transition-base);
   font-family: inherit;
-  box-shadow: var(--msg-shadow-card);
+  text-align: left;
 }
 
 .messenger-new-message-btn:hover {
   background: var(--msg-bg-hover);
-  transform: translateX(4px);
-  box-shadow: var(--msg-shadow-card-hover);
 }
 
 .messenger-new-message-btn:active {
@@ -9271,13 +9491,19 @@
 			this._updateContent();
 
 			this._unsubscribe = this.state.subscribe((type, data) => {
+				if (type === 'connectionChange') {
+					const banner = this.element?.querySelector('.messenger-connection-banner');
+					if (banner) {
+						banner.style.display = data.connected ? 'none' : 'flex';
+					}
+					return;
+				}
 				if (
 					type === 'messageAdded' &&
 					data.conversationId === this.state.activeConversationId
 				) {
 					this._hideTypingIndicator();
 					this._appendMessage(data.message);
-					this._scrollToBottom();
 				} else if (
 					type === 'typingStarted' &&
 					data.conversationId === this.state.activeConversationId
@@ -9314,16 +9540,20 @@
 			const messagesHtml =
 				messages.length === 0
 					? this._renderEmptyState(isNewConversation)
-					: messages.map((msg) => this._renderMessage(msg)).join('');
+					: this._renderGroupedMessages(messages);
 
-			const title = isNewConversation
-				? 'New conversation'
-				: conversation?.title || 'Chat with team';
+			const defaultPlaceholder = this.options.composePlaceholder || 'Write a message...';
 			const placeholder = isNewConversation
-				? 'Start typing your message...'
+				? (this.options.composePlaceholder || 'Start typing your message...')
 				: isClosed
 					? 'Conversation closed'
-					: 'Write a message...';
+					: defaultPlaceholder;
+
+			const logoUrl = this.options.logoUrl;
+			const teamName = this.state.teamName || 'Support';
+			const headerAvatarHtml = logoUrl
+				? `<img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(teamName)}" />`
+				: `<iconify-icon icon="ph:chats-circle-duotone" width="20" height="20"></iconify-icon>`;
 
 			this.element.innerHTML = `
 			<div class="messenger-chat-header">
@@ -9331,11 +9561,11 @@
 					<iconify-icon icon="ph:arrow-left" width="20" height="20"></iconify-icon>
 				</button>
 				<div class="messenger-chat-header-avatar">
-					<iconify-icon icon="ph:lightbulb-duotone" width="20" height="20"></iconify-icon>
+					${headerAvatarHtml}
 				</div>
 				<div class="messenger-chat-header-info">
-					<span class="messenger-chat-title">${title}</span>
-					<span class="messenger-chat-subtitle">The team can also help</span>
+					<span class="messenger-chat-title">${this._escapeHtml(teamName)}</span>
+					<span class="messenger-chat-subtitle">${isClosed ? 'Conversation resolved' : (this.state.responseTime || 'Typically replies within minutes')}</span>
 				</div>
 				<div class="messenger-chat-header-actions">
 					<button class="sdk-btn-icon sdk-close-btn messenger-mobile-close-btn" aria-label="Close">
@@ -9344,6 +9574,11 @@
 				</div>
 			</div>
 
+			<div class="messenger-connection-banner" style="display:none;">
+				<iconify-icon icon="ph:wifi-slash" width="14" height="14"></iconify-icon>
+				<span>Reconnecting…</span>
+			</div>
+
 			<div class="messenger-chat-messages">
 				${messagesHtml}
 				${
@@ -9364,6 +9599,11 @@
 				</div>
 			</div>
 
+			<div class="messenger-scroll-pill" style="display:none;">
+				<iconify-icon icon="ph:arrow-down" width="14" height="14"></iconify-icon>
+				<span>New message</span>
+			</div>
+
 			${
 				isClosed
 					? ''
@@ -9399,23 +9639,20 @@
 			this._attachEvents();
 			this._scrollToBottom();
 			this._renderAttachmentPreviews();
+			this._setupScrollPill();
 		}
 
 		_renderEmptyState(isNewConversation = false) {
-			const avatarHtml = this._renderTeamAvatars();
-			const responseTime =
-				this.state.responseTime || 'We typically reply within a few minutes';
-			const isOnline = this.state.agentsOnline;
+			const logoUrl = this.options.logoUrl;
+
+			const logoHtml = logoUrl
+				? `<div class="messenger-chat-empty-logo"><img src="${this._escapeHtml(logoUrl)}" alt="${this._escapeHtml(this.state.teamName)}" /></div>`
+				: '';
 
 			return `
 			<div class="messenger-chat-empty">
-				<div class="messenger-chat-empty-avatars">${avatarHtml}</div>
+				${logoHtml}
 				<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>
 		`;
 		}
@@ -9436,7 +9673,7 @@
 				.join('');
 		}
 
-		_renderMessage(message) {
+		_renderMessage(message, isLastInGroup = true) {
 			if (message.isSystem) {
 				return this._renderSystemMessage(message);
 			}
@@ -9445,8 +9682,9 @@
 			const messageClass = isOwn
 				? 'messenger-message-own'
 				: 'messenger-message-received';
-			const timeStr = this._formatMessageTime(message.timestamp);
+			const timeStr = isLastInGroup ? this._formatMessageTime(message.timestamp) : '';
 			const attachmentsHtml = this._renderMessageAttachments(message.attachments);
+			const isOptimistic = message.isOptimistic;
 
 			const contentHtml = message.content
 				? `<div class="messenger-message-content">${this._formatMessageContent(message.content)}</div>`
@@ -9456,11 +9694,20 @@
 				: '';
 
 			if (isOwn) {
+				const sentIndicator = isLastInGroup
+					? `<div class="messenger-message-meta messenger-message-meta-own">
+						${isOptimistic
+							? `<span class="messenger-message-sent-status">Sending…</span>`
+							: `<span class="messenger-message-sent-status">Sent</span>`
+						}
+						${timeStr ? `<span>·</span><span>${timeStr}</span>` : ''}
+					</div>`
+					: '';
 				return `
-				<div class="messenger-message ${messageClass}">
+				<div class="messenger-message ${messageClass}${isOptimistic ? ' messenger-message-optimistic' : ''}">
 					${bubbleHtml}
 					${attachmentsHtml}
-					${timeStr ? `<div class="messenger-message-meta messenger-message-meta-own"><span>${timeStr}</span></div>` : ''}
+					${sentIndicator}
 				</div>
 			`;
 			}
@@ -9489,25 +9736,23 @@
 				content.includes('left the conversation');
 
 			if (isJoinLeave && message.sender) {
-				const name = message.sender.name || '';
-				const avatarUrl = message.sender.avatarUrl;
-				const initial = name.charAt(0).toUpperCase() || '?';
-				const colors = ['#5856d6', '#007aff', '#34c759', '#ff9500'];
-				const colorIndex = name.charCodeAt(0) % colors.length;
-				const avatarHtml = avatarUrl
-					? `<img src="${this._escapeHtml(avatarUrl)}" alt="${this._escapeHtml(name)}" />`
-					: initial;
-				const avatarStyle = avatarUrl
-					? ''
-					: `style="background: ${colors[colorIndex]};"`;
+				const rawName = message.sender.name || '';
+				const name = rawName
+					.split(' ')
+					.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+					.join(' ');
+				const logoUrl = this.options.logoUrl;
+				const logoHtml = logoUrl
+					? `<img src="${this._escapeHtml(logoUrl)}" alt="logo" />`
+					: name.charAt(0).toUpperCase();
 				const timeStr = this._formatMessageTime(message.timestamp);
 
-				// Split "Name joined the chat" → name part already in sender, extract action
-				const action = content.replace(name, '').trim();
+				const rawAction = content.replace(rawName, '').trim();
+				const action = rawAction.charAt(0).toUpperCase() + rawAction.slice(1);
 
 				return `
 				<div class="messenger-message-system-event">
-					<div class="messenger-message-system-event-avatar" ${avatarStyle}>${avatarHtml}</div>
+					<div class="messenger-message-system-event-avatar">${logoHtml}</div>
 					<span class="messenger-message-system-event-name">${this._escapeHtml(name)}</span>
 					<span class="messenger-message-system-event-action">${this._escapeHtml(action)}</span>
 					${timeStr ? `<span class="messenger-message-system-event-time">${timeStr}</span>` : ''}
@@ -9587,6 +9832,20 @@
 			const tempDiv = document.createElement('div');
 			tempDiv.innerHTML = messageHtml;
 			messagesContainer.appendChild(tempDiv.firstElementChild);
+
+			// Show scroll pill if user is scrolled up, otherwise scroll to bottom
+			const isNearBottom =
+				messagesContainer.scrollHeight -
+					messagesContainer.scrollTop -
+					messagesContainer.clientHeight <
+				80;
+
+			if (isNearBottom) {
+				this._scrollToBottom();
+			} else if (!message.isOwn) {
+				const pill = this.element.querySelector('.messenger-scroll-pill');
+				if (pill) pill.style.display = 'flex';
+			}
 		}
 
 		_scrollToBottom() {
@@ -9600,6 +9859,64 @@
 			}
 		}
 
+		_setupScrollPill() {
+			const messagesContainer = this.element.querySelector(
+				'.messenger-chat-messages'
+			);
+			const pill = this.element.querySelector('.messenger-scroll-pill');
+			if (!messagesContainer || !pill) return;
+
+			pill.addEventListener('click', () => {
+				this._scrollToBottom();
+				pill.style.display = 'none';
+			});
+
+			messagesContainer.addEventListener('scroll', () => {
+				const isNearBottom =
+					messagesContainer.scrollHeight -
+						messagesContainer.scrollTop -
+						messagesContainer.clientHeight <
+					80;
+				if (isNearBottom) {
+					pill.style.display = 'none';
+				}
+			});
+		}
+
+		_renderGroupedMessages(messages) {
+			const GROUP_TIME_GAP = 5 * 60 * 1000; // 5 minutes
+			let html = '';
+
+			messages.forEach((msg, index) => {
+				const isLast = index === messages.length - 1;
+				const nextMsg = messages[index + 1];
+				const currentTime = msg.timestamp ? new Date(msg.timestamp).getTime() : 0;
+				const nextTime = nextMsg?.timestamp
+					? new Date(nextMsg.timestamp).getTime()
+					: null;
+				const senderKey = msg.isSystem
+					? 'system'
+					: msg.isOwn
+						? 'own'
+						: msg.sender?.name || 'agent';
+				const nextSenderKey = nextMsg
+					? nextMsg.isSystem
+						? 'system'
+						: nextMsg.isOwn
+							? 'own'
+							: nextMsg.sender?.name || 'agent'
+					: null;
+
+				const timeGapAfter = nextTime && nextTime - currentTime > GROUP_TIME_GAP;
+				const senderChanges = nextMsg && senderKey !== nextSenderKey;
+				const isLastInGroup = isLast || timeGapAfter || senderChanges;
+
+				html += this._renderMessage(msg, isLastInGroup);
+			});
+
+			return html;
+		}
+
 		_updateSendButtonState() {
 			const input = this.element.querySelector('.messenger-compose-input');
 			const sendBtn = this.element.querySelector('.messenger-compose-send');
@@ -10059,8 +10376,9 @@
 
         <div class="messenger-conversations-footer">
             <button class="messenger-new-message-btn">
-                <span>Send us a message</span>
-                <iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>
+                <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>
             </button>
         </div>
     `;
@@ -10069,14 +10387,16 @@
 		}
 
 		_renderConversationItem(conversation) {
+			const isClosed = conversation.status === 'closed';
 			const unreadClass = conversation.unread > 0 ? 'unread' : '';
+			const closedClass = isClosed ? 'closed' : '';
 			const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
 			const avatarsHtml = this._renderConversationAvatars(
 				conversation.participants
 			);
 
 			return `
-			<div class="messenger-conversation-item ${unreadClass}" data-conversation-id="${conversation.id}">
+			<div class="messenger-conversation-item ${unreadClass} ${closedClass}" data-conversation-id="${conversation.id}">
 				<div class="messenger-conversation-avatars">
 					${avatarsHtml}
 				</div>
@@ -10087,6 +10407,7 @@
 					</div>
 					<div class="messenger-conversation-preview">
 						${conversation.unread > 0 ? '<span class="messenger-unread-dot"></span>' : ''}
+						${isClosed ? '<span class="messenger-conversation-resolved-badge">Resolved</span>' : ''}
 						<span class="messenger-conversation-message">${this._truncateMessage(conversation.lastMessage)}</span>
 					</div>
 				</div>
@@ -10124,7 +10445,7 @@
 
 			const avatarItems = avatars
 				.slice(0, 2)
-				.map((avatar, index) => {
+				.map((avatar) => {
 					if (typeof avatar === 'string' && avatar.startsWith('http')) {
 						return `<div class="sdk-avatar sdk-avatar-sm"><img src="${avatar}" alt="Team member" /></div>`;
 					}
@@ -10512,7 +10833,6 @@
 					<div class="messenger-home-welcome">
 						<span class="messenger-home-greeting">${this.state.greetingMessage}</span>
 						<span class="messenger-home-question">${this.state.welcomeMessage}</span>
-						${this._renderAvailabilityStatus()}
 					</div>
 				</div>
 
@@ -10576,24 +10896,20 @@
 			const sendIcon = `<iconify-icon icon="ph:paper-plane-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 			const caretIcon = `<iconify-icon icon="ph:caret-right" width="20" height="20" style="flex-shrink: 0;"></iconify-icon>`;
 
-			if (openConversation) {
-				return `
-				<button class="messenger-home-message-btn messenger-home-continue-btn" data-conversation-id="${openConversation.id}">
-					<div class="messenger-home-continue-info">
-						<span class="messenger-home-continue-label">Continue conversation</span>
-					</div>
-					${sendIcon}
-				</button>
-				<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
-					<span class="messenger-home-continue-label">Leave us feedback</span>
-					${caretIcon}
-				</button>
-			`;
-			}
+			const responseTime =
+				this.state.responseTime || 'We typically reply within a few minutes';
+
+			const recentCardHtml = openConversation
+				? this._renderRecentMessageCard(openConversation)
+				: '';
 
 			return `
+			${recentCardHtml}
 			<button class="messenger-home-message-btn">
-				<span>Start a conversation</span>
+				<div class="messenger-home-continue-info">
+					<span class="messenger-home-continue-label">Send us a message</span>
+					<span class="messenger-home-message-subtext">${responseTime}</span>
+				</div>
 				${sendIcon}
 			</button>
 			<button class="messenger-home-message-btn messenger-feedback-btn" data-action="feedback">
@@ -10603,6 +10919,55 @@
 		`;
 		}
 
+		_renderRecentMessageCard(conversation) {
+			const logoUrl = this.options.logoUrl;
+			const teamName = this.state.teamName || 'Support';
+			const logoHtml = logoUrl
+				? `<div class="messenger-home-recent-avatar messenger-home-recent-avatar-logo"><img src="${logoUrl}" alt="${teamName}" /></div>`
+				: `<div class="messenger-home-recent-avatar" style="background: var(--color-primary);">${teamName.charAt(0).toUpperCase()}</div>`;
+
+			const title = conversation.title || teamName;
+			const timeAgo = this._formatTimeAgo(conversation.lastMessageTime);
+			const preview = conversation.lastMessage
+				? conversation.lastMessage.substring(0, 48) + (conversation.lastMessage.length > 48 ? '...' : '')
+				: '';
+			const hasUnread = conversation.unread > 0;
+
+			return `
+			<div class="messenger-home-recent-card" data-conversation-id="${conversation.id}">
+				<div class="messenger-home-recent-card-label">Recent message</div>
+				<div class="messenger-home-recent-card-row">
+					${logoHtml}
+					<div class="messenger-home-recent-card-content">
+						<div class="messenger-home-recent-card-header">
+							<span class="messenger-home-recent-card-name">${title}</span>
+							<span class="messenger-home-recent-card-time">${timeAgo}</span>
+						</div>
+						<div class="messenger-home-recent-card-preview">
+							<span class="messenger-home-recent-card-message">${preview}</span>
+							${hasUnread ? '<span class="messenger-home-recent-unread-dot"></span>' : ''}
+						</div>
+					</div>
+				</div>
+			</div>
+		`;
+		}
+
+		_formatTimeAgo(timestamp) {
+			if (!timestamp) return '';
+			const date = new Date(timestamp);
+			const now = new Date();
+			const diffMs = now - date;
+			const diffMins = Math.floor(diffMs / 60000);
+			const diffHours = Math.floor(diffMs / 3600000);
+			const diffDays = Math.floor(diffMs / 86400000);
+			if (diffMins < 1) return 'now';
+			if (diffMins < 60) return `${diffMins}m`;
+			if (diffHours < 24) return `${diffHours}h`;
+			if (diffDays < 7) return `${diffDays}d`;
+			return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+		}
+
 		_renderFeaturedCard() {
 			if (!this.options.featuredContent) {
 				return '';
@@ -10680,22 +11045,26 @@
 		}
 
 		_attachEvents() {
+			const recentCard = this.element.querySelector('.messenger-home-recent-card');
+			if (recentCard) {
+				recentCard.addEventListener('click', () => {
+					const convId = recentCard.dataset.conversationId;
+					this.state.setActiveConversation(convId);
+					this.state.markAsRead(convId);
+					this.state.setView('chat');
+					if (this.options.onSelectConversation) {
+						this.options.onSelectConversation(convId);
+					}
+				});
+			}
+
 			const msgBtn = this.element.querySelector(
 				'.messenger-home-message-btn:not(.messenger-feedback-btn)'
 			);
 			if (msgBtn) {
 				msgBtn.addEventListener('click', () => {
-					const convId = msgBtn.dataset.conversationId;
-					if (convId) {
-						this.state.setActiveConversation(convId);
-						this.state.setView('chat');
-						if (this.options.onSelectConversation) {
-							this.options.onSelectConversation(convId);
-						}
-					} else {
-						this.state.setActiveConversation(null);
-						this.state.setView('chat');
-					}
+					this.state.setActiveConversation(null);
+					this.state.setView('chat');
 				});
 			}
 
@@ -10703,9 +11072,8 @@
 			if (feedbackBtn) {
 				feedbackBtn.addEventListener('click', () => {
 					if (this.options.onFeedbackClick) {
-						// Close the messenger panel first, then open the feedback modal
 						this.state.setOpen(false);
-						setTimeout(() => this.options.onFeedbackClick(), 200);
+						this.options.onFeedbackClick();
 					} else if (this.state.urls?.feedback) {
 						window.open(this.state.urls.feedback, '_blank');
 					}
@@ -10919,6 +11287,7 @@
 				changelogUrl: options.changelogUrl || null,
 				helpUrl: options.helpUrl || null,
 				roadmapUrl: options.roadmapUrl || null,
+				composePlaceholder: options.composePlaceholder || null,
 				onSendMessage: options.onSendMessage || null,
 				onFeedbackClick: options.onFeedbackClick || null,
 				onArticleClick: options.onArticleClick || null,
@@ -11351,6 +11720,12 @@
 			this._wsUnsubscribers.push(
 				this.wsService.on('disconnected', () => {
 					console.log('[MessengerWidget] WebSocket disconnected');
+					this.messengerState._notify('connectionChange', { connected: false });
+				})
+			);
+			this._wsUnsubscribers.push(
+				this.wsService.on('connected', () => {
+					this.messengerState._notify('connectionChange', { connected: true });
 				})
 			);