@product7/feedback-sdk 1.3.7 → 1.3.9

package/src/styles/messenger.js

@@ -1,558 +1,17 @@
-export const messengerStyles = `
-.messenger-widget {
-  font-family: inherit;
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-relaxed);
-}
-
-.messenger-launcher {
-  position: fixed;
-  z-index: var(--z-modal);
-}
-
-.messenger-launcher-bottom-right {
-  bottom: var(--spacing-5);
-  right: var(--spacing-5);
-}
-
-.messenger-launcher-bottom-left {
-  bottom: var(--spacing-5);
-  left: var(--spacing-5);
-}
-
-.messenger-launcher-btn {
-  width: 60px;
-  height: 60px;
-  border-radius: var(--radius-full);
-  border: none;
-  background: var(--color-primary);
-  color: var(--color-white);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: var(--shadow-lg);
-  transition: all var(--transition-slow);
-  position: relative;
-}
-
-.messenger-launcher-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-xl);
-}
-
-.messenger-launcher-btn:active {
-  transform: scale(0.95);
-}
-
-.messenger-launcher-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  min-width: 20px;
-  height: 20px;
-  background: var(--color-error);
-  color: var(--color-white);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
-  border: 2px solid var(--color-white);
-}
-
-.messenger-panel {
-  position: fixed;
-  z-index: var(--z-popover);
-  width: 400px;
-  height: 680px;
-  max-height: calc(100vh - 100px);
-  display: none;
-  opacity: 0;
-  transform: translateY(20px) scale(0.95);
-  transition: all var(--transition-slow);
-}
-
-.messenger-panel.open {
-  display: block;
-  opacity: 1;
-  transform: translateY(0) scale(1);
-}
-
-.messenger-panel-bottom-right {
-  bottom: 90px;
-  right: var(--spacing-5);
-}
-
-.messenger-panel-bottom-left {
-  bottom: 90px;
-  left: var(--spacing-5);
-}
-
-.messenger-panel-content {
-  background: var(--color-white);
-  height: 100%;
-  border-radius: var(--radius-2xl);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--shadow-2xl);
-  border: 1px solid var(--color-border);
-}
-
-.messenger-panel-views {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.messenger-view {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.messenger-avatar {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  border: 2px solid var(--color-white);
-  background: var(--color-primary);
-  color: var(--color-white);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.messenger-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.messenger-avatar-stack .messenger-avatar {
-  margin-left: -8px;
-}
-
-.messenger-avatar-stack .messenger-avatar:first-child {
-  margin-left: 0;
-}
-
-.messenger-home-view {
-  background: linear-gradient(180deg, var(--color-neutral-50) 0%, var(--color-white) 40%);
-}
-
-.messenger-home-header {
-  padding: var(--spacing-5);
-  background: linear-gradient(180deg, var(--color-primary-light) 0%, transparent 100%);
-}
-
-.messenger-home-header-top {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-6);
-}
-
-.messenger-home-logo {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.messenger-home-logo img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.messenger-home-avatars {
-  flex: 1;
-  display: flex;
-  justify-content: flex-end;
-  margin-right: var(--spacing-3);
-}
-
-.messenger-home-welcome {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-}
-
-.messenger-home-greeting {
-  font-size: var(--font-size-md);
-  color: var(--color-text-secondary);
-}
-
-.messenger-home-question {
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-}
-
-.messenger-home-body {
-  flex: 1;
-  padding: var(--spacing-5);
-  overflow-y: auto;
-}
-
-.messenger-home-message-btn {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-4) var(--spacing-5);
-  background: var(--color-white);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-3xl);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-medium);
-  cursor: pointer;
-  transition: all var(--transition-base);
-  margin-bottom: var(--spacing-5);
-}
-
-.messenger-home-message-btn:hover {
-  background: var(--color-neutral-50);
-  border-color: var(--color-neutral-300);
-  transform: translateX(4px);
-}
-
-.messenger-conversations-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-5);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.messenger-conversations-header h2 {
-  margin: 0;
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-}
-
-.messenger-conversations-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--spacing-1) var(--spacing-3) var(--spacing-3);
-}
-
-.messenger-conversation-item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-3);
-  padding: 10px var(--spacing-4);
-  border-radius: var(--radius-xl);
-  cursor: pointer;
-  transition: background var(--transition-base);
-}
-
-.messenger-conversation-item:hover {
-  background: var(--color-neutral-50);
-}
-
-.messenger-conversation-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.messenger-conversation-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-1);
-  gap: var(--spacing-3);
-}
-
-.messenger-conversation-title {
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-  line-height: var(--line-height-snug);
-}
-
-.messenger-conversation-time {
-  font-size: var(--font-size-sm);
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-.messenger-conversation-message {
-  font-size: var(--font-size-base);
-  color: var(--color-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: var(--line-height-normal);
-}
-
-.messenger-conversation-item.unread .messenger-conversation-message {
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-medium);
-}
-
-.messenger-unread-dot {
-  width: 8px;
-  height: 8px;
-  background: var(--color-primary);
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-  margin-right: var(--spacing-2);
-}
-
-.messenger-chat-header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.messenger-chat-title {
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-primary);
-}
-
-.messenger-chat-messages {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--spacing-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-}
-
-.messenger-message {
-  display: flex;
-  gap: var(--spacing-2);
-  max-width: 85%;
-}
-
-.messenger-message-own {
-  align-self: flex-end;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.messenger-message-received {
-  align-self: flex-start;
-}
-
-.messenger-message-bubble {
-  padding: var(--spacing-3) var(--spacing-4);
-  border-radius: var(--radius-2xl);
-  word-wrap: break-word;
-}
-
-.messenger-message-own .messenger-message-bubble {
-  background: var(--color-primary);
-  color: var(--color-white);
-  border-bottom-right-radius: var(--spacing-1);
-}
-
-.messenger-message-received .messenger-message-bubble {
-  background: var(--color-neutral-100);
-  color: var(--color-text-primary);
-  border-bottom-left-radius: var(--spacing-1);
-}
-
-.messenger-message-content {
-  font-size: var(--font-size-md);
-  line-height: var(--line-height-normal);
-}
-
-.messenger-message-time {
-  font-size: var(--font-size-xs);
-  color: var(--color-text-tertiary);
-  margin-top: var(--spacing-1);
-  padding: 0 var(--spacing-1);
-}
-
-.messenger-chat-compose {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  padding: var(--spacing-3) var(--spacing-4);
-  border-top: 1px solid var(--color-border);
-  background: var(--color-white);
-}
-
-.messenger-compose-input-wrapper {
-  flex: 1;
-  background: var(--color-neutral-100);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-2) var(--spacing-4);
-}
-
-.messenger-compose-input {
-  width: 100%;
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-md);
-  line-height: var(--line-height-normal);
-  resize: none;
-  max-height: 120px;
-  font-family: inherit;
-}
-
-.messenger-compose-input::placeholder {
-  color: var(--color-text-tertiary);
-}
-
-.messenger-compose-send {
-  width: 40px;
-  height: 40px;
-  background: var(--color-primary);
-  border: none;
-  border-radius: var(--radius-full);
-  color: var(--color-white);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all var(--transition-base);
-  flex-shrink: 0;
-}
-
-.messenger-compose-send:hover:not(:disabled) {
-  background: var(--color-primary-hover);
-  transform: scale(1.05);
-}
-
-.messenger-compose-send:disabled {
-  background: var(--color-neutral-300);
-  cursor: not-allowed;
-}
-
-.messenger-panel-nav {
-  border-top: 1px solid var(--color-border);
-  background: var(--color-white);
-}
-
-.messenger-nav {
-  display: flex;
-  padding: var(--spacing-1) var(--spacing-2);
-  gap: var(--spacing-1);
-}
-
-.messenger-nav-tab {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-1);
-  padding: var(--spacing-2) var(--spacing-1);
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-base);
-  position: relative;
-}
-
-.messenger-nav-tab:hover {
-  background: var(--color-neutral-50);
-}
-
-.messenger-nav-icon {
-  color: var(--color-text-secondary);
-  transition: color var(--transition-base);
-}
-
-.messenger-nav-label {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-secondary);
-  transition: color var(--transition-base);
-}
-
-.messenger-nav-tab.active .messenger-nav-icon,
-.messenger-nav-tab.active .messenger-nav-label {
-  color: var(--color-primary);
-}
-
-.messenger-nav-badge {
-  position: absolute;
-  top: var(--spacing-1);
-  right: calc(50% - 16px);
-  min-width: 16px;
-  height: 16px;
-  background: var(--color-error);
-  color: var(--color-white);
-  font-size: 10px;
-  font-weight: var(--font-weight-semibold);
-  border-radius: var(--radius-full);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--spacing-1);
-}
-
-.messenger-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  text-align: center;
-  padding: var(--spacing-10);
-}
-
-.messenger-empty-state-icon {
-  color: var(--color-neutral-300);
-  margin-bottom: var(--spacing-4);
-}
-
-.messenger-empty-state h3 {
-  margin: 0 0 var(--spacing-2);
-  font-size: var(--font-size-xl);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-primary);
-}
-
-.messenger-empty-state p {
-  margin: 0;
-  font-size: var(--font-size-base);
-  color: var(--color-text-secondary);
-}
-
-@media (max-width: 480px) {
-  .messenger-panel {
-    width: 100%;
-    height: 100%;
-    max-height: 100%;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    border-radius: 0;
-  }
-
-  .messenger-panel-content {
-    border-radius: 0;
-  }
-
-  .messenger-launcher {
-    bottom: var(--spacing-4);
-    right: var(--spacing-4);
-  }
-
-  .messenger-launcher-bottom-left {
-    left: var(--spacing-4);
-  }
-}
-`;
+import { messengerComponentsStyles } from './messenger-components.js';
+import { messengerCoreStyles } from './messenger-core.js';
+import { messengerFeaturesStyles } from './messenger-features.js';
+import { messengerViewsStyles } from './messenger-views.js';
+
+export const messengerStyles =
+	messengerCoreStyles +
+	messengerViewsStyles +
+	messengerComponentsStyles +
+	messengerFeaturesStyles;
+
+export {
+	messengerComponentsStyles,
+	messengerCoreStyles,
+	messengerFeaturesStyles,
+	messengerViewsStyles,
+};

package/src/styles/styles.js

@@ -1,29 +1,26 @@
 import { baseStyles } from './base.js';
 import { changelogStyles } from './changelog.js';
+import { componentsStyles } from './components.js';
+import { designTokens } from './design-tokens.js';
 import { feedbackStyles } from './feedback.js';
-import { messengerCoreStyles } from './messenger-core.js';
-import { messengerViewsStyles } from './messenger-views.js';
-import { messengerHelpStyles } from './messenger-help.js';
-import { messengerFeaturesStyles } from './messenger-features.js';
-import { messengerThemesStyles } from './messenger-themes.js';
+import { messengerStyles } from './messenger.js';
+import { surveyStyles } from './survey.js';
 
-export const CSS_STYLES = 
-  baseStyles + 
-  feedbackStyles + 
-  changelogStyles +
-  messengerCoreStyles +
-  messengerViewsStyles +
-  messengerHelpStyles +
-  messengerFeaturesStyles +
-  messengerThemesStyles;
+export const CSS_STYLES =
+	designTokens +
+	baseStyles +
+	componentsStyles +
+	feedbackStyles +
+	changelogStyles +
+	surveyStyles +
+	messengerStyles;
 
-export { 
-  baseStyles, 
-  changelogStyles, 
-  feedbackStyles,
-  messengerCoreStyles,
-  messengerViewsStyles,
-  messengerHelpStyles,
-  messengerFeaturesStyles,
-  messengerThemesStyles
-};
+export {
+	baseStyles,
+	changelogStyles,
+	componentsStyles,
+	designTokens,
+	feedbackStyles,
+	messengerStyles,
+	surveyStyles,
+};