@realtimexsco/live-chat 1.3.3 → 1.4.0

package/dist/styles.css

@@ -446,28 +446,105 @@
 .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;
+.chat-date-divider-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in srgb, var(--chat-text) 10%, var(--chat-border));
+  background: color-mix(in srgb, var(--chat-surface) 92%, transparent);
+  padding: 0.45rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 600;
+  line-height: 1.1;
+  color: var(--chat-text);
+  box-shadow: 0 10px 30px color-mix(in srgb, var(--chat-text) 10%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.chat-date-divider-pill--interactive {
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.chat-date-divider-pill--interactive:hover,
+.chat-date-divider-pill--interactive[data-state="open"] {
+  border-color: color-mix(in srgb, var(--chat-text) 16%, var(--chat-border));
+  background: color-mix(in srgb, var(--chat-surface) 86%, var(--chat-text));
+  box-shadow: 0 12px 34px color-mix(in srgb, var(--chat-text) 14%, transparent);
+}
+
+.chat-date-divider-chevron {
+  width: 1rem;
+  height: 1rem;
+  opacity: 0.8;
+  flex-shrink: 0;
+  transition: transform 0.15s ease;
+}
+
+.chat-date-divider-pill--interactive[data-state="open"] .chat-date-divider-chevron {
+  transform: rotate(180deg);
+}
+
+/* shadcn calendar inside chat popover */
+.chat-theme-scope [data-slot="calendar"] {
+  --primary: var(--chat-theme);
+  --primary-foreground: #ffffff;
+  --accent: var(--chat-hover);
+  --accent-foreground: var(--chat-text);
+  --muted-foreground: var(--chat-muted);
+}
+
+.chat-jump-calendar .rdp-button_previous:disabled,
+.chat-jump-calendar .rdp-button_next:disabled {
+  opacity: 0.28;
   pointer-events: none;
+  cursor: default;
 }
 
-.chat-date-divider-pill {
+.chat-jump-calendar .rdp-disabled .rdp-day_button,
+.chat-jump-calendar .rdp-day_button:disabled {
+  opacity: 0.32;
+  pointer-events: none;
+  cursor: default;
+  color: var(--chat-muted);
+}
+
+.chat-scroll-to-bottom {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  z-index: 30;
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
   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;
+  background: var(--chat-surface);
   color: var(--chat-muted);
-  box-shadow: 0 6px 18px color-mix(in srgb, var(--chat-text) 8%, transparent);
-  backdrop-filter: blur(14px);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--chat-text) 12%, transparent);
+  transform: translateX(-50%);
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+  animation: chat-scroll-to-bottom-in 0.2s ease-out;
+}
+
+.chat-scroll-to-bottom:hover {
+  color: var(--chat-text);
+  border-color: color-mix(in srgb, var(--chat-text) 18%, var(--chat-border));
+  box-shadow: 0 10px 28px color-mix(in srgb, var(--chat-text) 16%, transparent);
+}
+
+@keyframes chat-scroll-to-bottom-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
 }
 
 @keyframes chat-message-enter {
@@ -718,46 +795,3 @@
     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.3.3",
+  "version": "1.4.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -50,12 +50,14 @@
     "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "emoji-picker-react": "^4.18.0",
     "lucide-react": "^0.574.0",
     "radix-ui": "^1.4.3",
+    "react-day-picker": "^10.0.1",
     "socket.io-client": "^4.8.3",
     "tailwind-merge": "^3.4.1",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "date-fns": "^4.4.0",
+    "emoji-picker-react": "^4.18.0"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",