@pathscale/ui 0.1.1 → 1.2.0

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

@@ -0,0 +1,106 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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">');
+const LiveChatBubble = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "position",
+        "aria-label",
+        "unreadCount",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
+        "panelProps",
+        "onOpen",
+        "onClose",
+        "children",
+        "class",
+        "className",
+        "style"
+    ]);
+    const [isOpen, setIsOpen] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [internalUnread, setInternalUnread] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.unreadCount ?? 0);
+    const unreadCount = ()=>local.unreadCount ?? internalUnread();
+    const toggleChat = ()=>{
+        const newState = !isOpen();
+        setIsOpen(newState);
+        if (newState) {
+            setInternalUnread(0);
+            local.onOpen?.();
+        } else local.onClose?.();
+    };
+    const handleClose = ()=>{
+        setIsOpen(false);
+        local.onClose?.();
+    };
+    const positionClasses = ()=>{
+        const pos = local.position ?? "bottom-right";
+        return "bottom-left" === pos ? "left-4" : "right-4";
+    };
+    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));
+    return [
+        (()=>{
+            var _el$ = _tmpl$2(), _el$3 = _el$.firstChild;
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+                onClick: toggleChat,
+                get ["class"] () {
+                    return buttonClasses();
+                },
+                get style () {
+                    return local.style;
+                },
+                get ["aria-label"] () {
+                    return local["aria-label"] ?? "Open chat";
+                }
+            }), false, true);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children ?? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                    get when () {
+                        return !isOpen();
+                    },
+                    get fallback () {
+                        return _tmpl$4();
+                    },
+                    get children () {
+                        return _tmpl$3();
+                    }
+                }), _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, {
+                get when () {
+                    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>unreadCount() > 0)() && !isOpen();
+                },
+                get children () {
+                    var _el$2 = _tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (()=>{
+                        var _c$ = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.memo)(()=>unreadCount() > 9);
+                        return ()=>_c$() ? "9+" : unreadCount();
+                    })());
+                    return _el$2;
+                }
+            }), _el$3);
+            return _el$;
+        })(),
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+            get when () {
+                return isOpen();
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__["default"], (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
+                }));
+            }
+        })
+    ];
+};
+const live_chat_LiveChatBubble = LiveChatBubble;
+export { live_chat_LiveChatBubble as default };

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

@@ -0,0 +1,69 @@
+import { type Component } from "solid-js";
+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: Component<LiveChatPanelProps>;
+export default LiveChatPanel;

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

@@ -0,0 +1,359 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+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__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__ from "../flex/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__ from "../input/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"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$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<h3 class="font-semibold text-lg">'), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><div class="flex-shrink-0 bg-primary text-primary-content px-4 py-4 flex items-center justify-between"><button class="hover:bg-primary/90 rounded-lg p-1 transition-colors"><svg xmlns=http://www.w3.org/2000/svg class="w-5 h-5"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"></path></svg></button></div><div class="flex-1 overflow-y-auto px-4 py-4 space-y-4"></div><div class="flex-shrink-0 border-t border-base-300 bg-base-100 p-3">'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div><p class="text-sm leading-relaxed whitespace-pre-wrap break-words">'), _tmpl$6 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-xs text-base-content/50 mt-1 px-1">'), _tmpl$7 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="w-4 h-4 border-2 border-primary-content/30 border-t-primary-content rounded-full animate-spin inline-block">');
+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 LiveChatPanel_LiveChatPanel = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "onClose",
+        "title",
+        "placeholder",
+        "closeLabel",
+        "sendLabel",
+        "emptyMessage",
+        "mockMode",
+        "messages",
+        "onSendMessage",
+        "isSending",
+        "autoScrollOnNewMessage",
+        "autoScrollBehavior",
+        "stickToBottomThreshold",
+        "class",
+        "className",
+        "style"
+    ]);
+    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);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.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 ("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;
+        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 = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(`fixed inset-0
+      sm:inset-auto
+      sm:bottom-20 sm:right-4
+      md:bottom-24 md:right-6
+      z-51
+      w-full h-full
+      sm:w-96 md:w-[400px]
+      sm:h-[70vh]
+      md:h-[75vh]
+      lg:h-[80vh]
+      sm:max-h-[800px]
+      sm:min-h-[420px]
+      bg-base-100
+      sm:rounded-2xl
+      shadow-2xl
+      flex flex-col
+      overflow-hidden`, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$5 = _el$2.firstChild, _el$6 = _el$2.nextSibling, _el$7 = _el$6.nextSibling;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+            align: "center",
+            gap: "sm",
+            get children () {
+                return [
+                    _tmpl$(),
+                    (()=>{
+                        var _el$4 = _tmpl$2();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.title ?? "Chat with us");
+                        return _el$4;
+                    })()
+                ];
+            }
+        }), _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();
+            },
+            children: (message)=>{
+                const isUser = "user" === message.sender;
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                    direction: isUser ? "row-reverse" : "row",
+                    gap: "sm",
+                    class: "w-full",
+                    get children () {
+                        return [
+                            (()=>{
+                                var _el$8 = _tmpl$4();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$8, `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${isUser ? "bg-primary text-primary-content" : "bg-base-300 text-base-content"}`);
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, isUser ? "U" : "A");
+                                return _el$8;
+                            })(),
+                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                                direction: "col",
+                                align: isUser ? "end" : "start",
+                                class: "max-w-[75%]",
+                                get children () {
+                                    return [
+                                        (()=>{
+                                            var _el$9 = _tmpl$5(), _el$0 = _el$9.firstChild;
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$9, `px-3 py-2 rounded-2xl ${isUser ? "bg-primary text-primary-content rounded-tr-sm" : "bg-base-200 text-base-content rounded-tl-sm"}`);
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$0, ()=>message.content);
+                                            return _el$9;
+                                        })(),
+                                        (()=>{
+                                            var _el$1 = _tmpl$6();
+                                            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, ()=>formatTime(message.timestamp));
+                                            return _el$1;
+                                        })()
+                                    ];
+                                }
+                            })
+                        ];
+                    }
+                });
+            }
+        }), null);
+        (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__.Show, {
+            get when () {
+                return 0 === internalMessages().length;
+            },
+            get children () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+                    justify: "center",
+                    align: "center",
+                    class: "h-full text-base-content/50 text-sm",
+                    get children () {
+                        return local.emptyMessage ?? "No messages yet. Start a conversation!";
+                    }
+                });
+            }
+        }), null);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__flex_index_js_d26fd801__["default"], {
+            gap: "sm",
+            get children () {
+                return [
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__input_index_js_00da0e74__["default"], {
+                        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: "flex-1"
+                    }),
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+                        onClick: handleSend,
+                        get isDisabled () {
+                            return !inputValue().trim() || isSending();
+                        },
+                        class: "px-4 py-2",
+                        variant: "primary",
+                        get children () {
+                            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                                get when () {
+                                    return !isSending();
+                                },
+                                get fallback () {
+                                    return _tmpl$7();
+                                },
+                                get children () {
+                                    return local.sendLabel ?? "Send";
+                                }
+                            });
+                        }
+                    })
+                ];
+            }
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$5, "aria-label", local.closeLabel ?? "Close chat"));
+        return _el$;
+    })();
+};
+const LiveChatPanel = LiveChatPanel_LiveChatPanel;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { LiveChatPanel as default };

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

@@ -0,0 +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 type { ChatMessage, SendMessagePayload, SendMessageResponse } from "./types";

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

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__LiveChatBubble_js_61e05a4d__ from "./LiveChatBubble.js";
+import * as __WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__ from "./LiveChatPanel.js";
+var __webpack_exports__LiveChatBubble = __WEBPACK_EXTERNAL_MODULE__LiveChatBubble_js_61e05a4d__["default"];
+var __webpack_exports__LiveChatPanel = __WEBPACK_EXTERNAL_MODULE__LiveChatPanel_js_aa84e738__["default"];
+export { __webpack_exports__LiveChatBubble as LiveChatBubble, __webpack_exports__LiveChatPanel as LiveChatPanel };

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

@@ -0,0 +1,13 @@
+export interface ChatMessage {
+    messageId: string;
+    content: string;
+    sender: "user" | "agent";
+    timestamp: number;
+}
+export interface SendMessagePayload {
+    message: string;
+}
+export interface SendMessageResponse {
+    messageId: string;
+    timestamp: number;
+}