@product7/product7-js 0.3.0 → 0.3.1

package/package.json

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

package/src/styles/components.js

@@ -136,6 +136,11 @@ export const componentsStyles = `
   transition-duration: 100ms;
 }
 
+.sdk-btn-icon:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
 .sdk-input {
   width: 100%;
   height: 40px;

package/src/styles/messenger-components.js

@@ -7,7 +7,7 @@ export const messengerComponentsStyles = `
 .messenger-message {
   display: flex;
   gap: var(--spacing-2);
-  max-width: 85%;
+  max-width: 75%;
 }
 
 .messenger-message-system {
@@ -28,11 +28,11 @@ export const messengerComponentsStyles = `
 }
 
 .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 */
@@ -41,8 +41,8 @@ export const messengerComponentsStyles = `
   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;
 }
@@ -51,21 +51,23 @@ export const messengerComponentsStyles = `
   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 {
@@ -172,6 +174,14 @@ export const messengerComponentsStyles = `
   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;
@@ -229,6 +239,48 @@ export const messengerComponentsStyles = `
   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
    ======================================== */
@@ -245,18 +297,20 @@ export const messengerComponentsStyles = `
   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 {
@@ -316,6 +370,24 @@ export const messengerComponentsStyles = `
   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);
@@ -323,12 +395,6 @@ export const messengerComponentsStyles = `
   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
@@ -409,6 +475,15 @@ export const messengerComponentsStyles = `
   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;

package/src/styles/messenger-core.js

@@ -131,6 +131,7 @@ export const messengerCoreStyles = `
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 
 .messenger-avatar-stack {

package/src/styles/messenger-views.js

@@ -85,6 +85,10 @@ export const messengerViewsStyles = `
   margin-left: var(--spacing-4);
 }
 
+.messenger-home-avatars:empty {
+  display: none;
+}
+
 .messenger-home-welcome {
   display: flex;
   flex-direction: column;
@@ -94,17 +98,19 @@ export const messengerViewsStyles = `
 }
 
 .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 {
@@ -114,6 +120,112 @@ export const messengerViewsStyles = `
   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;
@@ -134,13 +246,11 @@ export const messengerViewsStyles = `
 }
 
 .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;
 }
 
@@ -158,14 +268,21 @@ export const messengerViewsStyles = `
 .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 {
@@ -308,6 +425,8 @@ export const messengerViewsStyles = `
   height: 8px;
   border-radius: var(--radius-full);
   flex-shrink: 0;
+  align-self: center;
+  display: block;
 }
 
 .messenger-availability-online {
@@ -364,7 +483,7 @@ export const messengerViewsStyles = `
 
 .messenger-conversation-item {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: var(--spacing-3);
   padding: 10px var(--spacing-4);
   cursor: pointer;
@@ -382,31 +501,40 @@ export const messengerViewsStyles = `
 
 .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;
 }
 
@@ -417,18 +545,18 @@ export const messengerViewsStyles = `
 }
 
 .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 {
@@ -439,35 +567,44 @@ export const messengerViewsStyles = `
   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 {

package/src/widgets/MessengerWidget.js

@@ -61,6 +61,7 @@ export class MessengerWidget extends BaseWidget {
 			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,
@@ -493,6 +494,12 @@ export class MessengerWidget extends BaseWidget {
 		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 });
 			})
 		);