@realtimexsco/live-chat 1.2.0 → 1.3.0

package/dist/styles.css

@@ -155,17 +155,222 @@
 .animate-progress {
   animation: progress 1.5s infinite linear;
 }
+/* Chat panel design tokens & utilities */
 
-/* Chat panel utilities (synced from live-chat-frontend) */
-.chat-shell {
+@property --chat-surface {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --chat-canvas {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f0f2f5;
+}
+
+@property --chat-main-bg {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f8f9fb;
+}
+
+@property --chat-text {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #0f172a;
+}
+
+@property --chat-muted {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #64748b;
+}
+
+@property --chat-input-bg {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f4f6f8;
+}
+
+@property --chat-incoming-bubble {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #eef0f3;
+}
+
+@property --chat-incoming-text {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #1e293b;
+}
+
+@property --chat-elevated {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #f8fafc;
+}
+
+@property --chat-elevated-icon {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --chat-hover-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgba(15, 23, 42, 0.04);
+}
+
+@property --chat-search-bg {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #ffffff;
+}
+
+@property --chat-danger-text {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #dc2626;
+}
+
+@property --chat-warning-text {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: #d97706;
+}
+
+@property --chat-border-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgba(15, 23, 42, 0.07);
+}
+
+.chat-shell,
+.chat-theme-scope {
   --chat-surface: #ffffff;
-  --chat-canvas: #f4f5f7;
-  --chat-border: rgba(15, 23, 42, 0.08);
-  --chat-muted: #64748b;
-  --chat-text: #0f172a;
+  --chat-canvas: #eef1f5;
+  --chat-main-bg: #f7f8fb;
+  --chat-border-color: rgba(15, 23, 42, 0.08);
+  --chat-border: var(--chat-border-color);
+  --chat-muted: #6b7280;
+  --chat-text: #111827;
+  --chat-text-secondary: #4b5563;
+  --chat-hover-color: rgba(17, 24, 39, 0.045);
+  --chat-hover: var(--chat-hover-color);
+  --chat-selected: color-mix(in srgb, var(--chat-theme) 10%, transparent);
+  --chat-incoming-bubble: #ffffff;
+  --chat-incoming-text: #1f2937;
+  --chat-input-bg: #f5f6f8;
+  --chat-scrollbar: rgba(17, 24, 39, 0.16);
+  --chat-online: #16a34a;
+  --chat-unread-badge: #f97316;
+  --chat-date-pill-bg: rgba(255, 255, 255, 0.82);
+  --chat-shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
+  --chat-empty-icon-bg: #f9fafb;
+  --chat-toolbar-bg: rgba(255, 255, 255, 0.96);
+  --chat-elevated: #f9fafb;
+  --chat-elevated-icon: #ffffff;
+  --chat-search-bg: #ffffff;
+  --chat-danger-text: #dc2626;
+  --chat-warning-text: #b45309;
+  --chat-message-pattern: radial-gradient(circle at 1px 1px, rgba(17, 24, 39, 0.055) 1px, transparent 0);
+  color-scheme: light;
+  --background: var(--chat-surface);
+  --foreground: var(--chat-text);
+  --muted-foreground: var(--chat-muted);
+  --border: var(--chat-border);
+  --input: var(--chat-input-bg);
+  --accent: var(--chat-hover);
+  --accent-foreground: var(--chat-text);
+  --popover: var(--chat-surface);
+  --popover-foreground: var(--chat-text);
+  --card: var(--chat-surface);
+  --card-foreground: var(--chat-text);
+  --secondary: var(--chat-input-bg);
+  --secondary-foreground: var(--chat-text);
 }
 
-.chat-shell h1 {
+.chat-theme-shell:not(.chat-theme-no-transition),
+.chat-theme-scope:not(.chat-theme-no-transition),
+.chat-shell:not(.chat-theme-no-transition) {
+  transition:
+    --chat-surface 0.4s ease,
+    --chat-canvas 0.4s ease,
+    --chat-main-bg 0.4s ease,
+    --chat-text 0.4s ease,
+    --chat-muted 0.4s ease,
+    --chat-input-bg 0.4s ease,
+    --chat-incoming-bubble 0.4s ease,
+    --chat-incoming-text 0.4s ease,
+    --chat-elevated 0.4s ease,
+    --chat-elevated-icon 0.4s ease,
+    --chat-search-bg 0.4s ease,
+    --chat-danger-text 0.4s ease,
+    --chat-warning-text 0.4s ease,
+    --chat-hover-color 0.4s ease,
+    --chat-border-color 0.4s ease,
+    background-color 0.4s ease,
+    color 0.4s ease,
+    border-color 0.4s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-theme-shell:not(.chat-theme-no-transition),
+  .chat-theme-scope:not(.chat-theme-no-transition),
+  .chat-shell:not(.chat-theme-no-transition) {
+    transition: none;
+  }
+}
+
+.chat-shell.dark,
+.chat-theme-scope.dark {
+  --chat-surface: #17191f;
+  --chat-canvas: #0d0f14;
+  --chat-main-bg: #11141a;
+  --chat-border-color: rgba(255, 255, 255, 0.1);
+  --chat-border: var(--chat-border-color);
+  --chat-muted: #9ca3af;
+  --chat-text: #f8fafc;
+  --chat-text-secondary: #d1d5db;
+  --chat-hover-color: rgba(255, 255, 255, 0.06);
+  --chat-hover: var(--chat-hover-color);
+  --chat-selected: color-mix(in srgb, var(--chat-theme) 20%, transparent);
+  --chat-incoming-bubble: #20242c;
+  --chat-incoming-text: #f1f5f9;
+  --chat-input-bg: #20242b;
+  --chat-scrollbar: rgba(255, 255, 255, 0.16);
+  --chat-online: #22c55e;
+  --chat-unread-badge: #fb923c;
+  --chat-date-pill-bg: rgba(23, 25, 31, 0.84);
+  --chat-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
+  --chat-empty-icon-bg: #20242b;
+  --chat-toolbar-bg: rgba(23, 25, 31, 0.96);
+  --chat-elevated: #20242c;
+  --chat-elevated-icon: #17191f;
+  --chat-search-bg: #20242b;
+  --chat-danger-text: #f87171;
+  --chat-warning-text: #fbbf24;
+  --chat-message-pattern: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 0);
+  color-scheme: dark;
+  --background: var(--chat-surface);
+  --foreground: var(--chat-text);
+  --muted-foreground: var(--chat-muted);
+  --border: var(--chat-border);
+  --input: var(--chat-input-bg);
+  --accent: var(--chat-hover);
+  --accent-foreground: var(--chat-text);
+  --popover: var(--chat-surface);
+  --popover-foreground: var(--chat-text);
+  --card: var(--chat-surface);
+  --card-foreground: var(--chat-text);
+  --secondary: var(--chat-input-bg);
+  --secondary-foreground: var(--chat-text);
+}
+
+.chat-shell h1,
+.chat-theme-scope h1 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-weight: 600;
@@ -175,11 +380,12 @@
 
 .chat-message-scroll {
   scrollbar-width: thin;
-  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
+  scrollbar-color: var(--chat-scrollbar) transparent;
+  scrollbar-gutter: stable;
 }
 
 .chat-message-scroll::-webkit-scrollbar {
-  width: 6px;
+  width: 5px;
 }
 
 .chat-message-scroll::-webkit-scrollbar-track {
@@ -187,10 +393,371 @@
 }
 
 .chat-message-scroll::-webkit-scrollbar-thumb {
-  background: rgba(15, 23, 42, 0.12);
+  background: var(--chat-scrollbar);
   border-radius: 999px;
 }
 
 .chat-message-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(15, 23, 42, 0.22);
+  background: color-mix(in srgb, var(--chat-scrollbar) 80%, var(--chat-text) 20%);
+}
+
+.chat-sidebar-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--chat-scrollbar) transparent;
+}
+
+.chat-sidebar-scroll [data-slot="scroll-area-scrollbar"][data-orientation="vertical"] {
+  width: 8px;
+  padding: 8px 4px;
+  border-left: none;
+}
+
+.chat-sidebar-scroll [data-slot="scroll-area-thumb"] {
+  background: var(--chat-scrollbar);
+  border-radius: 999px;
+}
+
+.chat-sidebar-scroll [data-slot="scroll-area-viewport"] > div {
+  padding-right: 6px;
+}
+
+.chat-sidebar-scroll::-webkit-scrollbar {
+  width: 4px;
+}
+
+.chat-sidebar-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-sidebar-scroll::-webkit-scrollbar-thumb {
+  background: var(--chat-scrollbar);
+  border-radius: 999px;
+}
+
+@keyframes chat-typing-dot {
+  0%, 60%, 100% { opacity: 0.35; }
+  30% { opacity: 1; }
+}
+
+.chat-typing-dots span {
+  animation: chat-typing-dot 1.4s infinite;
+}
+
+.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
+.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+.chat-date-divider {
+  position: sticky;
+  top: 0.375rem;
+  z-index: 20;
+  display: flex;
+  justify-content: center;
+  padding: 0.25rem 0;
+  margin-bottom: 0.5rem;
+  pointer-events: none;
+}
+
+.chat-date-divider-pill {
+  border-radius: 9999px;
+  border: 1px solid var(--chat-border);
+  background: var(--chat-date-pill-bg);
+  padding: 0.2rem 0.65rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.25;
+  color: var(--chat-muted);
+  box-shadow: 0 6px 18px color-mix(in srgb, var(--chat-text) 8%, transparent);
+  backdrop-filter: blur(14px);
+}
+
+@keyframes chat-message-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-message-enter {
+  animation: chat-message-enter 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-message-enter {
+    animation: none;
+  }
+}
+
+.chat-message-canvas {
+  background-color: var(--chat-main-bg);
+  background-image: var(--chat-message-pattern);
+  background-size: 22px 22px;
+}
+
+@keyframes chat-saved-empty-float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+@keyframes chat-saved-empty-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.04); }
+}
+
+@keyframes chat-saved-empty-ring {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--chat-theme) 18%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 12px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+.chat-saved-empty {
+  animation: chat-saved-empty-fade-in 0.45s ease-out both;
+}
+
+@keyframes chat-saved-empty-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-saved-empty-icon-wrap {
+  position: relative;
+  display: flex;
+  width: 3.5rem;
+  height: 3.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--chat-input-bg);
+  animation: chat-saved-empty-pulse 2.5s ease-in-out infinite;
+}
+
+.chat-saved-empty-icon-wrap::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  animation: chat-saved-empty-ring 2.5s ease-out infinite;
+}
+
+.chat-saved-empty-icon {
+  position: relative;
+  z-index: 1;
+  color: var(--chat-muted);
+  animation: chat-saved-empty-float 2.5s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chat-saved-empty,
+  .chat-saved-empty-icon-wrap,
+  .chat-saved-empty-icon,
+  .chat-saved-empty-icon-wrap::after {
+    animation: none;
+  }
+}
+
+/* Portaled overlay controls */
+.chat-theme-scope [data-slot="dialog-close"],
+.chat-theme-scope [data-slot="sheet-close"] {
+  color: var(--chat-muted);
+  opacity: 1;
+}
+
+.chat-theme-scope [data-slot="dialog-close"]:hover,
+.chat-theme-scope [data-slot="sheet-close"]:hover {
+  color: var(--chat-text);
+  background: var(--chat-hover);
+}
+
+.chat-shell input::placeholder,
+.chat-shell textarea::placeholder,
+.chat-theme-scope input::placeholder,
+.chat-theme-scope textarea::placeholder {
+  color: var(--chat-muted);
+  opacity: 0.85;
+}
+
+.chat-shell [data-slot="input"],
+.chat-theme-scope [data-slot="input"] {
+  background-color: var(--chat-input-bg);
+  color: var(--chat-text);
+  border-color: var(--chat-border);
+}
+
+.chat-shell [data-slot="textarea"],
+.chat-theme-scope [data-slot="textarea"] {
+  background-color: transparent;
+  color: var(--chat-text);
+}
+
+.chat-shell [data-slot="button"][data-variant="outline"],
+.chat-theme-scope [data-slot="button"][data-variant="outline"] {
+  background-color: var(--chat-surface);
+  border-color: var(--chat-border);
+  color: var(--chat-text);
+  box-shadow: none;
+}
+
+.chat-shell [data-slot="button"][data-variant="outline"]:hover,
+.chat-theme-scope [data-slot="button"][data-variant="outline"]:hover {
+  background-color: var(--chat-hover);
+  color: var(--chat-text);
+}
+
+.chat-theme-scope select,
+.chat-theme-scope select option {
+  background-color: var(--chat-input-bg);
+  color: var(--chat-text);
+}
+
+.chat-theme-scope select option:checked {
+  background-color: var(--chat-selected);
+  color: var(--chat-text);
+}
+
+/* Custom audio player progress */
+.chat-audio-progress {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--chat-theme) 0%,
+    var(--chat-theme) var(--chat-audio-progress, 0%),
+    color-mix(in srgb, var(--chat-border) 70%, transparent) var(--chat-audio-progress, 0%),
+    color-mix(in srgb, var(--chat-border) 70%, transparent) 100%
+  );
+  outline: none;
+  cursor: pointer;
+}
+
+.chat-audio-progress::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--chat-theme);
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-border) 50%, transparent);
+  cursor: pointer;
+}
+
+.chat-audio-progress::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--chat-theme);
+  border: 2px solid white;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--chat-border) 50%, transparent);
+  cursor: pointer;
+}
+
+.chat-audio-progress:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* Audio player on theme-colored sent bubbles */
+.chat-audio-player-on-dark .chat-audio-progress {
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0.95) 0%,
+    rgba(255, 255, 255, 0.95) var(--chat-audio-progress, 0%),
+    rgba(255, 255, 255, 0.28) var(--chat-audio-progress, 0%),
+    rgba(255, 255, 255, 0.28) 100%
+  );
+}
+
+.chat-audio-player-on-dark .chat-audio-progress::-webkit-slider-thumb {
+  background: #ffffff;
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+.chat-audio-player-on-dark .chat-audio-progress::-moz-range-thumb {
+  background: #ffffff;
+  border: 2px solid rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
+}
+
+/* Native media controls follow chat color scheme */
+.chat-attachment-video video {
+  width: 100%;
+  border-radius: 0.5rem;
+  color-scheme: light;
+}
+
+.chat-shell.dark .chat-attachment-video video,
+.chat-theme-scope.dark .chat-attachment-video video {
+  color-scheme: dark;
+}
+
+.chat-theme-scope.dark .chat-audio-progress,
+.chat-shell.dark .chat-audio-progress {
+  background: linear-gradient(
+    to right,
+    var(--chat-theme) 0%,
+    var(--chat-theme) var(--chat-audio-progress, 0%),
+    color-mix(in srgb, var(--chat-border) 55%, transparent) var(--chat-audio-progress, 0%),
+    color-mix(in srgb, var(--chat-border) 55%, transparent) 100%
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/* Layout containment — keeps chat inside host pages (admin templates, etc.)   */
+/* -------------------------------------------------------------------------- */
+
+.chat-package-viewport,
+.chat-container-root,
+.chat-shell,
+.chat-message-canvas {
+  max-height: 100%;
+}
+
+.chat-package-viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.chat-container-root {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  width: 100%;
+}
+
+.chat-shell {
+  min-height: 0;
+}
+
+.chat-message-scroll {
+  min-height: 0;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+.chat-sidebar-scroll {
+  min-height: 0;
+  overscroll-behavior: contain;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realtimexsco/live-chat",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -76,8 +76,10 @@
   },
   "scripts": {
     "build": "tsup && copyfiles -u 1 src/styles.css dist",
+    "postbuild": "node -e \"require('fs').accessSync('dist/index.d.ts')\"",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
+    "sync": "node scripts/sync-from-frontend.mjs && node scripts/fix-package-imports.mjs && node scripts/sync-logged-user.mjs",
     "release": "semantic-release"
   },
   "publishConfig": {