@pathscale/ui 0.0.133 → 0.0.135

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

@@ -8655,7 +8655,7 @@ const Tooltip = (props)=>{
         "className",
         "style"
     ]);
-    const classes = ()=>twMerge("tooltip", "[&::before]:!z-[9999]", "[&::after]:!z-[9999]", local.class, local.className, clsx({
+    const classes = ()=>twMerge("tooltip", "!z-[9999]", "relative", "[&::before]:!z-[9999]", "[&::after]:!z-[9999]", local.class, local.className, clsx({
             "tooltip-open": local.open,
             "tooltip-primary": "primary" === local.color,
             "tooltip-secondary": "secondary" === local.color,
@@ -9397,7 +9397,7 @@ const DropdownDetails = Object.assign(Details, {
     Toggle: DropdownToggle_Summary
 });
 var DropdownItem_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li role=menuitem>"), DropdownItem_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>"), DropdownItem_tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
-const DropdownItem = (props)=>{
+const DropdownItem_DropdownItem = (props)=>{
     const dropdownContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(DropdownContext);
     const defaultProps = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.mergeProps)({
         closeOnClick: true
@@ -9439,7 +9439,7 @@ const DropdownItem = (props)=>{
         return _el$;
     })();
 };
-const dropdown_DropdownItem = DropdownItem;
+const DropdownItem = DropdownItem_DropdownItem;
 var DropdownMenu_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<ul>");
 const DropdownMenu = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -9641,7 +9641,7 @@ const dropdown_Dropdown = Object.assign(Dropdown, {
     Details: DropdownDetails,
     Toggle: dropdown_DropdownToggle,
     Menu: dropdown_DropdownMenu,
-    Item: dropdown_DropdownItem
+    Item: DropdownItem
 });
 const dropdown = dropdown_Dropdown;
 var FileInput_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
@@ -12012,6 +12012,9 @@ const LiveChatPanel_LiveChatPanel = (props)=>{
         "messages",
         "onSendMessage",
         "isSending",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
         "class",
         "className",
         "style"
@@ -12019,6 +12022,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 +12036,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 +12181,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 +12299,9 @@ const LiveChatBubble = (props)=>{
         "position",
         "aria-label",
         "unreadCount",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
         "panelProps",
         "onOpen",
         "onClose",
@@ -12316,6 +12377,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
                 }));
             }

package/package.json

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