@pathscale/ui 1.3.0 → 1.4.0

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

@@ -0,0 +1,70 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./LiveChat.css";
+import type { IComponentBaseProps } from "../types";
+import type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";
+export interface LiveChatPanelProps extends IComponentBaseProps {
+    /**
+     * Callback when the panel close button is clicked
+     */
+    onClose: () => void;
+    /**
+     * Title shown in the header
+     * @default "Chat with us"
+     */
+    title?: string;
+    /**
+     * Placeholder text for the input field
+     * @default "Message support..."
+     */
+    placeholder?: string;
+    /**
+     * Label for the close button (for accessibility)
+     * @default "Close chat"
+     */
+    closeLabel?: string;
+    /**
+     * Label for the send button
+     * @default "Send"
+     */
+    sendLabel?: string;
+    /**
+     * Empty state message when there are no messages
+     * @default "No messages yet. Start a conversation!"
+     */
+    emptyMessage?: string;
+    /**
+     * Enable mock mode with demo messages
+     * @default false
+     */
+    mockMode?: boolean;
+    /**
+     * Initial messages to display (only used if mockMode is false)
+     */
+    messages?: ChatMessage[];
+    /**
+     * Callback when a message is sent
+     * Should return the message ID and timestamp from the server
+     */
+    onSendMessage?: (payload: SendMessagePayload) => Promise<SendMessageResponse>;
+    /**
+     * 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: __LayoutComponent<LiveChatPanelProps>;
+export default LiveChatPanel;

package/dist/components/live-chat/LiveChatPanel.generated.js

@@ -0,0 +1,360 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./LiveChat.css";
+import { For, Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import button_0 from "../button/index.js";
+import input from "../input/index.js";
+import { CLASSES, componentRecipe } from "./LiveChat.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<div><div><div><svg xmlns=http://www.w3.org/2000/svg><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"></path></svg><h3></h3></div><button><svg xmlns=http://www.w3.org/2000/svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div></div><div>'), _tmpl$3 = /*#__PURE__*/ template("<div><div></div><div><div><p></p></div><span>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
+const getMockMessages = ()=>{
+    const salesMessages = [
+        {
+            messageId: "sales-1",
+            content: "Hi! I'm interested in your product. Can you tell me more?",
+            sender: "user",
+            timestamp: Date.now() - 3600000
+        },
+        {
+            messageId: "sales-2",
+            content: "Hello! Thanks for your interest. We offer flexible pricing plans starting at $49/month. Would you like to schedule a demo?",
+            sender: "agent",
+            timestamp: Date.now() - 3500000
+        },
+        {
+            messageId: "sales-3",
+            content: "That sounds great! What features are included in the basic plan?",
+            sender: "user",
+            timestamp: Date.now() - 3400000
+        }
+    ];
+    const supportMessages = [
+        {
+            messageId: "support-1",
+            content: "I'm having trouble connecting. It keeps showing 'Connection Failed'.",
+            sender: "user",
+            timestamp: Date.now() - 7200000
+        },
+        {
+            messageId: "support-2",
+            content: "I'm sorry to hear that. Let me help you troubleshoot. Can you tell me which browser you're using?",
+            sender: "agent",
+            timestamp: Date.now() - 7100000
+        },
+        {
+            messageId: "support-3",
+            content: "I'm using Chrome version 121 on Windows 11",
+            sender: "user",
+            timestamp: Date.now() - 7000000
+        },
+        {
+            messageId: "support-4",
+            content: "Thanks for that info. Let's try clearing your browser cache first. Can you go to Settings > Privacy and security > Clear browsing data?",
+            sender: "agent",
+            timestamp: Date.now() - 6900000
+        }
+    ];
+    return [
+        ...salesMessages,
+        ...supportMessages
+    ].sort((a, b)=>a.timestamp - b.timestamp);
+};
+const formatTime = (timestamp)=>new Intl.DateTimeFormat("en-US", {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true
+    }).format(new Date(timestamp));
+const __solidLayoutLiveChatPanel = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "onClose",
+        "title",
+        "placeholder",
+        "closeLabel",
+        "sendLabel",
+        "emptyMessage",
+        "mockMode",
+        "messages",
+        "onSendMessage",
+        "isSending",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [internalMessages, setInternalMessages] = createSignal([]);
+    const [inputValue, setInputValue] = createSignal("");
+    const [sending, setSending] = createSignal(false);
+    let scrollContainer;
+    let previousMessageCount = 0;
+    let previousLastMessageId;
+    let hasObservedMessages = false;
+    let scrollRafId;
+    let scrollRafNestedId;
+    createEffect(()=>{
+        if (local.mockMode) setInternalMessages(getMockMessages());
+        else if (local.messages) setInternalMessages(local.messages);
+    });
+    createEffect(()=>{
+        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 ("u" < typeof window) return;
+        if (null != scrollRafId) {
+            window.cancelAnimationFrame(scrollRafId);
+            scrollRafId = void 0;
+        }
+        if (null != scrollRafNestedId) {
+            window.cancelAnimationFrame(scrollRafNestedId);
+            scrollRafNestedId = void 0;
+        }
+    };
+    const scheduleScrollToBottom = ()=>{
+        if ("u" < typeof window) return void scrollToBottom();
+        clearScheduledScroll();
+        scrollRafId = window.requestAnimationFrame(()=>{
+            scrollRafNestedId = window.requestAnimationFrame(()=>{
+                scrollToBottom();
+            });
+        });
+    };
+    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();
+    });
+    onCleanup(()=>{
+        clearScheduledScroll();
+    });
+    const handleSend = async ()=>{
+        const content = inputValue().trim();
+        if (!content || isSending()) return;
+        if (local.mockMode) {
+            const userMessage = {
+                messageId: `user-${Date.now()}`,
+                content,
+                sender: "user",
+                timestamp: Date.now()
+            };
+            setInternalMessages((prev)=>[
+                    ...prev,
+                    userMessage
+                ]);
+            setInputValue("");
+            setTimeout(()=>{
+                const agentMessage = {
+                    messageId: `agent-${Date.now()}`,
+                    content: "Thanks for your message! This is a demo response.",
+                    sender: "agent",
+                    timestamp: Date.now()
+                };
+                setInternalMessages((prev)=>[
+                        ...prev,
+                        agentMessage
+                    ]);
+            }, 1000);
+        } else if (local.onSendMessage) {
+            setSending(true);
+            try {
+                const response = await local.onSendMessage({
+                    message: content
+                });
+                const userMessage = {
+                    messageId: response.messageId,
+                    content,
+                    sender: "user",
+                    timestamp: response.timestamp
+                };
+                setInternalMessages((prev)=>[
+                        ...prev,
+                        userMessage
+                    ]);
+                setInputValue("");
+            } catch (error) {
+                console.error("[LiveChatPanel] Failed to send message:", error);
+            } finally{
+                setSending(false);
+            }
+        }
+    };
+    const handleKeyPress = (e)=>{
+        if ("Enter" === e.key && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    const classes = ()=>twMerge(CLASSES.panel.base, local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$2.nextSibling, _el$0 = _el$8.nextSibling;
+        spread(_el$, mergeProps(others, ()=>({
+                class: classes()
+            }), {
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.panel.header
+            })), false, true);
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.panel.headerTitleWrap
+            })), false, true);
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.panel.headerIcon
+            }), {
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor"
+        }), true, true);
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.panel.headerTitle
+            })), false, true);
+        insert(_el$5, ()=>local.title ?? "Chat with us");
+        spread(_el$6, mergeProps({
+            get onClick () {
+                return local.onClose;
+            }
+        }, ()=>({
+                class: CLASSES.panel.closeButton
+            }), {
+            get ["aria-label"] () {
+                return local.closeLabel ?? "Close chat";
+            }
+        }), false, true);
+        spread(_el$7, mergeProps(()=>({
+                class: CLASSES.panel.closeIcon
+            }), {
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor"
+        }), true, true);
+        use((element)=>{
+            scrollContainer = element;
+        }, _el$8);
+        spread(_el$8, mergeProps(()=>({
+                class: CLASSES.panel.messages
+            })), false, true);
+        insert(_el$8, createComponent(For, {
+            get each () {
+                return internalMessages();
+            },
+            children: (message)=>{
+                const isUser = "user" === message.sender;
+                return (()=>{
+                    var _el$1 = _tmpl$3(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$12.nextSibling;
+                    spread(_el$1, mergeProps(()=>({
+                            class: twMerge(CLASSES.panel.row, isUser ? CLASSES.panel.rowUser : CLASSES.panel.rowAgent)
+                        })), false, true);
+                    spread(_el$10, mergeProps(()=>({
+                            class: twMerge(CLASSES.panel.avatar, isUser ? CLASSES.panel.avatarUser : CLASSES.panel.avatarAgent)
+                        })), false, true);
+                    insert(_el$10, isUser ? "U" : "A");
+                    spread(_el$11, mergeProps(()=>({
+                            class: twMerge(CLASSES.panel.messageColumn, isUser ? CLASSES.panel.messageColumnUser : CLASSES.panel.messageColumnAgent)
+                        })), false, true);
+                    spread(_el$12, mergeProps(()=>({
+                            class: twMerge(CLASSES.panel.messageBubble, isUser ? CLASSES.panel.messageBubbleUser : CLASSES.panel.messageBubbleAgent)
+                        })), false, true);
+                    spread(_el$13, mergeProps(()=>({
+                            class: CLASSES.panel.messageText
+                        })), false, true);
+                    insert(_el$13, ()=>message.content);
+                    spread(_el$14, mergeProps(()=>({
+                            class: CLASSES.panel.timestamp
+                        })), false, true);
+                    insert(_el$14, ()=>formatTime(message.timestamp));
+                    return _el$1;
+                })();
+            }
+        }), null);
+        insert(_el$8, createComponent(Show, {
+            get when () {
+                return 0 === internalMessages().length;
+            },
+            get children () {
+                var _el$9 = _tmpl$();
+                spread(_el$9, mergeProps(()=>({
+                        class: CLASSES.panel.empty
+                    })), false, true);
+                insert(_el$9, ()=>local.emptyMessage ?? "No messages yet. Start a conversation!");
+                return _el$9;
+            }
+        }), null);
+        spread(_el$0, mergeProps(()=>({
+                class: CLASSES.panel.inputArea
+            })), false, true);
+        insert(_el$0, createComponent(input, mergeProps({
+            type: "text",
+            get value () {
+                return inputValue();
+            },
+            onInput: (e)=>setInputValue(e.currentTarget.value),
+            onKeyPress: handleKeyPress,
+            get placeholder () {
+                return local.placeholder ?? "Message support...";
+            },
+            get disabled () {
+                return isSending();
+            }
+        }, ()=>({
+                class: CLASSES.panel.input
+            }))), null);
+        insert(_el$0, createComponent(button_0, mergeProps({
+            onClick: handleSend,
+            get isDisabled () {
+                return !inputValue().trim() || isSending();
+            }
+        }, ()=>({
+                class: CLASSES.panel.sendButton
+            }), {
+            variant: "primary",
+            get children () {
+                return createComponent(Show, {
+                    get when () {
+                        return !isSending();
+                    },
+                    get fallback () {
+                        return (()=>{
+                            var _el$15 = _tmpl$4();
+                            spread(_el$15, mergeProps(()=>({
+                                    class: CLASSES.panel.spinner
+                                })), false, false);
+                            return _el$15;
+                        })();
+                    },
+                    get children () {
+                        return local.sendLabel ?? "Send";
+                    }
+                });
+            }
+        })), null);
+        return _el$;
+    })();
+};
+const LiveChatPanel = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutLiveChatPanel,
+    embedded: true
+});
+const LiveChatPanel_generated = LiveChatPanel;
+export default LiveChatPanel_generated;

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

@@ -1,5 +1,5 @@
-export { default as LiveChatBubble } from "./LiveChatBubble";
-export type { LiveChatBubbleProps } from "./LiveChatBubble";
-export { default as LiveChatPanel } from "./LiveChatPanel";
-export type { LiveChatPanelProps } from "./LiveChatPanel";
+export { default as LiveChatBubble } from "./LiveChatBubble.generated";
+export type { LiveChatBubbleProps } from "./LiveChatBubble.generated";
+export { default as LiveChatPanel } from "./LiveChatPanel.generated";
+export type { LiveChatPanelProps } from "./LiveChatPanel.generated";
 export type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";

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

@@ -1,2 +1,2 @@
-export { default as LiveChatBubble } from "./LiveChatBubble.js";
-export { default as LiveChatPanel } from "./LiveChatPanel.js";
+export { default as LiveChatBubble } from "./LiveChatBubble.generated.js";
+export { default as LiveChatPanel } from "./LiveChatPanel.generated.js";

package/dist/components/menu/Menu.generated.d.ts

@@ -0,0 +1,35 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Menu.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import { type MenuSelectionMode } from "./context";
+import MenuItem, { MenuItemIndicator, MenuItemRoot } from "./MenuItem.generated";
+import MenuSection, { MenuSectionRoot } from "./MenuSection.generated";
+export type MenuRootProps<T = unknown> = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+    children?: JSX.Element | ((item: T) => JSX.Element);
+    items?: readonly T[];
+    renderEmptyState?: () => JSX.Element;
+    selectionMode?: MenuSelectionMode;
+    selectedKeys?: Iterable<string | number>;
+    defaultSelectedKeys?: Iterable<string | number>;
+    disabledKeys?: Iterable<string | number>;
+    disallowEmptySelection?: boolean;
+    onSelectionChange?: (keys: Set<string>) => void;
+    onAction?: (key: string) => void;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+declare const MenuRoot: __LayoutComponent<MenuRootProps>;
+declare const Menu: __LayoutComponent<MenuRootProps<unknown>> & {
+    Root: __LayoutComponent<MenuRootProps<unknown>>;
+    Item: __LayoutComponent<import("./MenuItem.generated").MenuItemRootProps> & {
+        Root: __LayoutComponent<import("./MenuItem.generated").MenuItemRootProps>;
+        Indicator: __LayoutComponent<import("./MenuItem.generated").MenuItemIndicatorProps>;
+        SubmenuIndicator: __LayoutComponent<import("./MenuItem.generated").MenuItemSubmenuIndicatorProps>;
+    };
+    ItemIndicator: __LayoutComponent<import("./MenuItem.generated").MenuItemIndicatorProps>;
+    Section: __LayoutComponent<import("./MenuSection.generated").MenuSectionRootProps>;
+};
+export default Menu;
+export { Menu, MenuRoot, MenuItem, MenuItemRoot, MenuItemIndicator, MenuSection, MenuSectionRoot };
+export type { MenuRootProps as MenuProps, MenuSelectionMode };