@pathscale/ui 0.0.134 → 0.0.136

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

@@ -17,6 +17,21 @@ export interface LiveChatBubbleProps extends IComponentBaseProps {
      * @default 0
      */
     unreadCount?: number;
+    /**
+     * Auto-scroll to the latest message when new messages are appended
+     * @default true
+     */
+    autoScrollOnNewMessage?: boolean;
+    /**
+     * Auto-scroll behavior when moving to the latest message
+     * @default "instant"
+     */
+    autoScrollBehavior?: "instant" | "smooth";
+    /**
+     * Reserved for backward compatibility.
+     * Auto-scroll now always follows new messages when enabled.
+     */
+    stickToBottomThreshold?: number;
     /**
      * Props to pass to the LiveChatPanel when opened
      */

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

@@ -49,6 +49,21 @@ export interface LiveChatPanelProps extends IComponentBaseProps {
      * Whether a message is currently being sent
      */
     isSending?: boolean;
+    /**
+     * Auto-scroll to the latest message when new messages are appended
+     * @default true
+     */
+    autoScrollOnNewMessage?: boolean;
+    /**
+     * Auto-scroll behavior when moving to the latest message
+     * @default "instant"
+     */
+    autoScrollBehavior?: "instant" | "smooth";
+    /**
+     * Reserved for backward compatibility.
+     * Auto-scroll now always follows new messages when enabled.
+     */
+    stickToBottomThreshold?: number;
 }
 declare const LiveChatPanel: Component<LiveChatPanelProps>;
 export default LiveChatPanel;

package/dist/index.js

@@ -7229,6 +7229,18 @@ const toRgba = (rgb, alpha)=>{
     return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${alpha})`;
 };
 const COLORS = [
+    createColorItem("rgb(80,80,80)", 47.631, -27.5),
+    createColorItem("rgb(80,60,50)", 27.5, -47.631),
+    createColorItem("rgb(80,50,50)", 0, -55),
+    createColorItem("rgb(80,50,70)", -27.5, -47.631),
+    createColorItem("rgb(70,50,80)", -47.631, -27.5),
+    createColorItem("rgb(55,50,80)", -55, 0),
+    createColorItem("rgb(50,55,80)", -47.631, 27.5),
+    createColorItem("rgb(50,65,80)", -27.5, 47.631),
+    createColorItem("rgb(50,80,80)", 0, 55),
+    createColorItem("rgb(50,80,65)", 27.5, 47.631),
+    createColorItem("rgb(55,80,50)", 47.631, 27.5),
+    createColorItem("rgb(70,80,50)", 55, 0),
     createColorItem("rgb(245,245,61)", 34.641, -20),
     createColorItem("rgb(245,153,61)", 20, -34.641),
     createColorItem("rgb(245,61,61)", 0, -40),
@@ -7337,7 +7349,7 @@ const ColorWheelFlower = (props)=>{
         setHoveredIndex(null);
         if (void 0 !== pointerTimeout) clearTimeout(pointerTimeout);
     };
-    const containerClasses = ()=>twMerge("relative w-[140px] h-[140px] flex items-center justify-center", clsx({
+    const containerClasses = ()=>twMerge("relative w-[190px] h-[190px] flex items-center justify-center", clsx({
             "opacity-50 cursor-not-allowed": context.disabled()
         }), props.class, props.className);
     const outerRingBackground = ()=>{
@@ -12012,6 +12024,9 @@ const LiveChatPanel_LiveChatPanel = (props)=>{
         "messages",
         "onSendMessage",
         "isSending",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
         "class",
         "className",
         "style"
@@ -12019,6 +12034,12 @@ const LiveChatPanel_LiveChatPanel = (props)=>{
     const [internalMessages, setInternalMessages] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
     const [inputValue, setInputValue] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)("");
     const [sending, setSending] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    let scrollContainer;
+    let previousMessageCount = 0;
+    let previousLastMessageId;
+    let hasObservedMessages = false;
+    let scrollRafId;
+    let scrollRafNestedId;
     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
         if (local.mockMode) setInternalMessages(getMockMessages());
         else if (local.messages) setInternalMessages(local.messages);
@@ -12027,6 +12048,52 @@ const LiveChatPanel_LiveChatPanel = (props)=>{
         if (!local.mockMode && local.messages) setInternalMessages(local.messages);
     });
     const isSending = ()=>local.isSending ?? sending();
+    const autoScrollOnNewMessage = ()=>local.autoScrollOnNewMessage ?? true;
+    const autoScrollBehavior = ()=>local.autoScrollBehavior ?? "instant";
+    const scrollToBottom = ()=>{
+        if (!scrollContainer) return;
+        if ("smooth" === autoScrollBehavior()) return void scrollContainer.scrollTo({
+            top: scrollContainer.scrollHeight,
+            behavior: "smooth"
+        });
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    };
+    const clearScheduledScroll = ()=>{
+        if ("undefined" == typeof window) return;
+        if (null != scrollRafId) {
+            window.cancelAnimationFrame(scrollRafId);
+            scrollRafId = void 0;
+        }
+        if (null != scrollRafNestedId) {
+            window.cancelAnimationFrame(scrollRafNestedId);
+            scrollRafNestedId = void 0;
+        }
+    };
+    const scheduleScrollToBottom = ()=>{
+        if ("undefined" == typeof window) return void scrollToBottom();
+        clearScheduledScroll();
+        scrollRafId = window.requestAnimationFrame(()=>{
+            scrollRafNestedId = window.requestAnimationFrame(()=>{
+                scrollToBottom();
+            });
+        });
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const messages = internalMessages();
+        const nextMessageCount = messages.length;
+        const nextLastMessageId = messages[messages.length - 1]?.messageId;
+        const isInitialHydration = !hasObservedMessages && nextMessageCount > 0;
+        const hasAppendedMessage = hasObservedMessages ? nextMessageCount > previousMessageCount || nextMessageCount > 0 && nextLastMessageId !== previousLastMessageId : false;
+        previousMessageCount = nextMessageCount;
+        previousLastMessageId = nextLastMessageId;
+        hasObservedMessages = true;
+        if (!autoScrollOnNewMessage()) return;
+        if (!isInitialHydration && !hasAppendedMessage) return;
+        scheduleScrollToBottom();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        clearScheduledScroll();
+    });
     const handleSend = async ()=>{
         const content = inputValue().trim();
         if (!content || isSending()) return;
@@ -12126,6 +12193,9 @@ const LiveChatPanel_LiveChatPanel = (props)=>{
             }
         }), _el$5);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.addEventListener)(_el$5, "click", local.onClose, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((element)=>{
+            scrollContainer = element;
+        }, _el$6);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
             get each () {
                 return internalMessages();
@@ -12241,6 +12311,9 @@ const LiveChatBubble = (props)=>{
         "position",
         "aria-label",
         "unreadCount",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
         "panelProps",
         "onOpen",
         "onClose",
@@ -12316,6 +12389,15 @@ const LiveChatBubble = (props)=>{
             },
             get children () {
                 return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(LiveChatPanel, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>local.panelProps ?? {}, {
+                    get autoScrollOnNewMessage () {
+                        return local.panelProps?.autoScrollOnNewMessage ?? local.autoScrollOnNewMessage;
+                    },
+                    get autoScrollBehavior () {
+                        return local.panelProps?.autoScrollBehavior ?? local.autoScrollBehavior;
+                    },
+                    get stickToBottomThreshold () {
+                        return local.panelProps?.stickToBottomThreshold ?? local.stickToBottomThreshold;
+                    },
                     onClose: handleClose
                 }));
             }
@@ -16770,7 +16852,7 @@ function getDefaultHueShiftStore() {
     if (!defaultStore) defaultStore = createHueShiftStore("theme");
     return defaultStore;
 }
-var ThemeColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 mt-2 p-4 bg-base-100 rounded-lg shadow-xl border border-base-300 z-50">'), ThemeColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+var ThemeColorPicker_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div class="absolute right-0 mt-2 p-6 bg-base-100 rounded-lg shadow-xl border border-base-300 z-50">'), ThemeColorPicker_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 function hueToColorValue(hue, sat) {
     const h = hue ?? 0;
     const s = null === hue ? 0 : sat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.134",
+  "version": "0.0.136",
   "author": "pathscale",
   "repository": {
     "type": "git",