@pathscale/ui 1.1.37 → 1.1.39

package/dist/components/live-chat/LiveChat.css

@@ -0,0 +1,324 @@
+@layer components {
+  .live-chat-bubble {
+    position: fixed;
+    bottom: 1.25rem;
+    z-index: 50;
+    width: 3rem;
+    height: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    border: 0;
+    background: var(--color-primary);
+    color: var(--color-primary-content);
+    box-shadow: 0 10px 20px color-mix(in oklab, var(--color-base-content) 16%, transparent);
+    transition:
+      transform 200ms ease,
+      box-shadow 200ms ease,
+      opacity 200ms ease;
+  }
+
+  .live-chat-bubble:hover {
+    box-shadow: 0 14px 28px color-mix(in oklab, var(--color-base-content) 22%, transparent);
+  }
+
+  .live-chat-bubble:active {
+    transform: scale(0.95);
+  }
+
+  .live-chat-bubble:focus-visible {
+    outline: 2px solid color-mix(in oklab, var(--color-primary) 72%, transparent);
+    outline-offset: 2px;
+  }
+
+  .live-chat-bubble--right {
+    right: 1rem;
+  }
+
+  .live-chat-bubble--left {
+    left: 1rem;
+  }
+
+  .live-chat-bubble__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .live-chat-bubble__badge {
+    position: absolute;
+    top: -0.25rem;
+    right: -0.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--color-error);
+    color: var(--color-error-content);
+    font-size: 0.75rem;
+    font-weight: 700;
+    animation: live-chat-pulse 1s ease-in-out infinite;
+  }
+
+  .live-chat-bubble__ping {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    background: var(--color-primary);
+    opacity: 0.2;
+    animation: live-chat-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+    transition: opacity 200ms ease;
+  }
+
+  .live-chat-bubble:hover .live-chat-bubble__ping {
+    opacity: 0;
+  }
+
+  .live-chat-panel {
+    position: fixed;
+    inset: 0;
+    z-index: 51;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--color-base-100);
+    box-shadow: 0 30px 70px color-mix(in oklab, var(--color-base-content) 18%, transparent);
+  }
+
+  .live-chat-panel__header {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    background: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .live-chat-panel__header-title-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .live-chat-panel__header-icon,
+  .live-chat-panel__close-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .live-chat-panel__header-title {
+    font-weight: 600;
+    font-size: 1.125rem;
+  }
+
+  .live-chat-panel__close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+    transition: background-color 150ms ease;
+  }
+
+  .live-chat-panel__close-button:hover {
+    background: color-mix(in oklab, var(--color-primary-content) 10%, transparent);
+  }
+
+  .live-chat-panel__messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .live-chat-panel__row {
+    width: 100%;
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .live-chat-panel__row--user {
+    flex-direction: row-reverse;
+  }
+
+  .live-chat-panel__row--agent {
+    flex-direction: row;
+  }
+
+  .live-chat-panel__avatar {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .live-chat-panel__avatar--user {
+    background: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  .live-chat-panel__avatar--agent {
+    background: var(--color-base-300);
+    color: var(--color-base-content);
+  }
+
+  .live-chat-panel__message-column {
+    max-width: 75%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .live-chat-panel__message-column--user {
+    align-items: flex-end;
+  }
+
+  .live-chat-panel__message-column--agent {
+    align-items: flex-start;
+  }
+
+  .live-chat-panel__message-bubble {
+    padding: 0.5rem 0.75rem;
+    border-radius: 1rem;
+  }
+
+  .live-chat-panel__message-bubble--user {
+    background: var(--color-primary);
+    color: var(--color-primary-content);
+    border-top-right-radius: 0.125rem;
+  }
+
+  .live-chat-panel__message-bubble--agent {
+    background: var(--color-base-200);
+    color: var(--color-base-content);
+    border-top-left-radius: 0.125rem;
+  }
+
+  .live-chat-panel__message-text {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .live-chat-panel__timestamp {
+    margin-top: 0.25rem;
+    padding-inline: 0.25rem;
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    font-size: 0.75rem;
+  }
+
+  .live-chat-panel__empty {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    font-size: 0.875rem;
+  }
+
+  .live-chat-panel__input-area {
+    flex-shrink: 0;
+    border-top: 1px solid var(--color-base-300);
+    background: var(--color-base-100);
+    padding: 0.75rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .live-chat-panel__input {
+    flex: 1;
+  }
+
+  .live-chat-panel__send-button {
+    padding: 0.5rem 1rem;
+  }
+
+  .live-chat-panel__spinner {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 9999px;
+    display: inline-block;
+    border: 2px solid color-mix(in oklab, var(--color-primary-content) 30%, transparent);
+    border-top-color: var(--color-primary-content);
+    animation: live-chat-spin 0.7s linear infinite;
+  }
+
+  @media (min-width: 640px) {
+    .live-chat-bubble {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+
+    .live-chat-bubble--right {
+      right: 1rem;
+    }
+
+    .live-chat-bubble--left {
+      left: 1rem;
+    }
+
+    .live-chat-bubble__icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+
+    .live-chat-panel {
+      inset: auto;
+      bottom: 5rem;
+      right: 1rem;
+      width: 24rem;
+      height: 70vh;
+      max-height: 50rem;
+      min-height: 26.25rem;
+      border-radius: 1rem;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .live-chat-panel {
+      bottom: 6rem;
+      right: 1.5rem;
+      width: 25rem;
+      height: 75vh;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .live-chat-panel {
+      height: 80vh;
+    }
+  }
+
+  @keyframes live-chat-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes live-chat-ping {
+    75%,
+    100% {
+      transform: scale(1.7);
+      opacity: 0;
+    }
+  }
+
+  @keyframes live-chat-pulse {
+    50% {
+      opacity: 0.8;
+    }
+  }
+}

package/dist/components/live-chat/LiveChatBubble.d.ts

@@ -1,3 +1,4 @@
+import "./LiveChat.css";
 import { type Component, type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { LiveChatPanelProps } from "./LiveChatPanel";

package/dist/components/live-chat/LiveChatBubble.js

@@ -1,9 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./LiveChat.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
 import * as __WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__ from "./LiveChatPanel.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="absolute -top-1 -right-1 w-5 h-5 bg-error text-error-content text-xs font-bold rounded-full flex items-center justify-center animate-pulse">'), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<button><span class="pointer-events-none absolute inset-0 rounded-full bg-primary animate-ping opacity-20 group-hover:opacity-0 transition-opacity">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5 sm:w-6 sm:h-6"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5 sm:w-6 sm:h-6"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">');
+import * as __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__ from "./LiveChat.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button><span>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12">');
 const LiveChatBubble = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "position",
@@ -37,9 +38,9 @@ const LiveChatBubble = (props)=>{
     };
     const positionClasses = ()=>{
         const pos = local.position ?? "bottom-right";
-        return "bottom-left" === pos ? "left-4" : "right-4";
+        return "bottom-left" === pos ? __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.position.left : __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.position.right;
     };
-    const buttonClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("fixed bottom-5 z-50 w-12 h-12 sm:w-14 sm:h-14 bg-primary text-primary-content rounded-full shadow-lg hover:shadow-xl active:scale-95 transition-all duration-200 flex items-center justify-center group", positionClasses(), (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    const buttonClasses = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.base, positionClasses(), local.class, local.className);
     return [
         (()=>{
             var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
@@ -60,10 +61,16 @@ const LiveChatBubble = (props)=>{
                         return !isOpen();
                     },
                     get fallback () {
-                        return _tmpl$4();
+                        return (()=>{
+                            var _el$5 = _tmpl$4();
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "class", __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.icon));
+                            return _el$5;
+                        })();
                     },
                     get children () {
-                        return _tmpl$3();
+                        var _el$4 = _tmpl$3();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$4, "class", __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.icon));
+                        return _el$4;
                     }
                 }), _el$3);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
@@ -76,9 +83,11 @@ const LiveChatBubble = (props)=>{
                         var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>unreadCount() > 9);
                         return ()=>_c$() ? "9+" : unreadCount();
                     })());
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.badge));
                     return _el$2;
                 }
             }), _el$3);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, __WEBPACK_EXTERNAL_MODULE__LiveChat_classes_js_7c477472__.CLASSES.bubble.ping));
             return _el$;
         })(),
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {

package/dist/components/live-chat/LiveChatPanel.d.ts

@@ -1,3 +1,4 @@
+import "./LiveChat.css";
 import { type Component } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 import type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";