@townco/ui 0.1.67 → 0.1.69

package/dist/gui/components/ChatLayout.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useMotionValue } from "framer-motion";
 import { ArrowDown } from "lucide-react";
 import * as React from "react";
+import { motionEasing } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "./resizable.js";
 import { Toaster } from "./Sonner.js";
 const ChatLayoutContext = React.createContext(undefined);
 const useChatLayoutContext = () => {
@@ -16,157 +17,232 @@ const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPa
     const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
     const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
     const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+    // Right panel state (derived from panelSize for backwards compatibility)
+    const [panelOpen, setPanelOpen] = React.useState(defaultPanelSize !== "hidden");
+    // Helper to toggle the right panel
+    const togglePanel = React.useCallback(() => {
+        setPanelSize((size) => (size === "hidden" ? "large" : "hidden"));
+        setPanelOpen((open) => !open);
+    }, []);
+    // Sync panelOpen with panelSize
+    React.useEffect(() => {
+        setPanelOpen(panelSize !== "hidden");
+    }, [panelSize]);
     return (_jsx(ChatLayoutContext.Provider, { value: {
             sidebarOpen,
             setSidebarOpen,
             panelSize,
-            setPanelSize,
+            setPanelSize: (size) => {
+                setPanelSize(size);
+                setPanelOpen(size !== "hidden");
+            },
             activeTab,
             setActiveTab,
-        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: _jsx(ResizablePanelGroup, { direction: "horizontal", className: "flex-1", children: children }) }) }));
+            panelOpen,
+            setPanelOpen,
+            togglePanel,
+        }, children: _jsx("div", { ref: ref, "data-panel-state": panelOpen ? "expanded" : "collapsed", className: cn("flex h-screen flex-row bg-background text-foreground overflow-hidden", className), ...props, children: children }) }));
 });
 ChatLayoutRoot.displayName = "ChatLayout.Root";
 const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn("relative z-10 border-b border-border bg-card shrink-0", className), ...props, children: children }));
 });
 ChatLayoutHeader.displayName = "ChatLayout.Header";
-const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx(ResizablePanel, { defaultSize: 70, minSize: 50, children: _jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden h-full", className), ...props, children: children }) }));
+const ChatLayoutMain = React.forwardRef(({ className, children }, ref) => {
+    return (_jsx(motion.div, { ref: ref, layout: true, transition: {
+            duration: 0.5,
+            ease: motionEasing.smooth,
+        }, className: cn("flex flex-1 flex-col overflow-hidden h-full min-w-0", className), children: children }));
 });
 ChatLayoutMain.displayName = "ChatLayout.Main";
 const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
     return (_jsxs("div", { ref: ref, className: cn("relative flex flex-1 flex-col overflow-hidden", className), ...props, children: [children, showToaster && _jsx(Toaster, {})] }));
 });
 ChatLayoutBody.displayName = "ChatLayout.Body";
-const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, ...props }, ref) => {
+const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, initialScrollToBottom = true, ...props }, ref) => {
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
     const scrollContainerRef = React.useRef(null);
-    const [isAtBottom, setIsAtBottom] = React.useState(true);
-    const isAtBottomRef = React.useRef(true);
-    const isUserScrollingRef = React.useRef(false);
-    const lastScrollHeightRef = React.useRef(0);
-    const lastMutationTimeRef = React.useRef(0);
-    const isSmoothScrollingRef = React.useRef(false); // Protect smooth scrolls from interruption
-    // Keep ref in sync with state
-    React.useEffect(() => {
-        isAtBottomRef.current = isAtBottom;
-    }, [isAtBottom]);
+    const wasAtBottomRef = React.useRef(true); // Track if user was at bottom before content update
+    const isAutoScrollingRef = React.useRef(false); // Track if we're programmatically scrolling
+    const hasInitialScrolledRef = React.useRef(false); // Track if initial scroll has happened
     // Merge refs
     React.useImperativeHandle(ref, () => scrollContainerRef.current);
-    // Check if at bottom
-    const checkIfAtBottom = React.useCallback(() => {
+    // Check if user is at bottom of scroll
+    const checkScrollPosition = React.useCallback(() => {
         const container = scrollContainerRef.current;
         if (!container)
-            return true;
+            return false;
         const { scrollTop, scrollHeight, clientHeight } = container;
-        return scrollTop + clientHeight >= scrollHeight - 100;
-    }, []);
-    // Scroll to bottom with protection for smooth scrolls
-    const scrollToBottom = React.useCallback((behavior = "smooth") => {
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBottom = distanceFromBottom < 100; // 100px threshold
+        setShowScrollButton(!isAtBottom && showScrollToBottom);
+        onScrollChange?.(isAtBottom);
+        return isAtBottom;
+    }, [onScrollChange, showScrollToBottom]);
+    // Handle scroll events
+    const handleScroll = React.useCallback(() => {
+        // If this is a programmatic scroll, don't update wasAtBottomRef
+        if (isAutoScrollingRef.current) {
+            return;
+        }
+        // This is a user-initiated scroll, update the position
+        const isAtBottom = checkScrollPosition();
+        wasAtBottomRef.current = isAtBottom;
+    }, [checkScrollPosition]);
+    // Scroll to bottom function
+    const scrollToBottom = React.useCallback((smooth = true) => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        // If we're doing a smooth scroll, don't interrupt with instant
-        if (isSmoothScrollingRef.current && behavior === "instant") {
-            return;
-        }
-        if (behavior === "smooth") {
-            isSmoothScrollingRef.current = true;
-            // Clear the smooth scroll protection after animation completes
-            setTimeout(() => {
-                isSmoothScrollingRef.current = false;
-            }, 500);
-        }
+        // Mark that we're about to programmatically scroll
+        isAutoScrollingRef.current = true;
+        wasAtBottomRef.current = true; // Set immediately for instant scrolls
         container.scrollTo({
             top: container.scrollHeight,
-            behavior,
+            behavior: smooth ? "smooth" : "auto",
         });
+        // Clear the flag after scroll completes
+        // For instant scrolling, clear immediately; for smooth, wait
+        setTimeout(() => {
+            isAutoScrollingRef.current = false;
+        }, smooth ? 300 : 0);
     }, []);
-    // Handle user scroll events
+    // Auto-scroll when content changes if user was at bottom
     React.useEffect(() => {
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        let scrollTimeout;
-        const handleScroll = () => {
-            // Mark as user scrolling
-            isUserScrollingRef.current = true;
-            clearTimeout(scrollTimeout);
-            // Update isAtBottom state
-            const atBottom = checkIfAtBottom();
-            setIsAtBottom(atBottom);
-            isAtBottomRef.current = atBottom;
-            onScrollChange?.(atBottom);
-            // Reset user scrolling flag after scroll ends
-            scrollTimeout = setTimeout(() => {
-                isUserScrollingRef.current = false;
-            }, 150);
-        };
-        container.addEventListener("scroll", handleScroll, { passive: true });
-        return () => {
-            container.removeEventListener("scroll", handleScroll);
-            clearTimeout(scrollTimeout);
+        // If user was at the bottom, scroll to new content
+        if (wasAtBottomRef.current && !isAutoScrollingRef.current) {
+            // Use requestAnimationFrame to ensure DOM has updated
+            requestAnimationFrame(() => {
+                scrollToBottom(false); // Use instant scroll for streaming to avoid jarring smooth animations
+            });
+        }
+        // Update scroll position state (but don't change wasAtBottomRef if we're auto-scrolling)
+        if (!isAutoScrollingRef.current) {
+            checkScrollPosition();
+        }
+    }, [children, scrollToBottom, checkScrollPosition]);
+    // Track last scroll height to detect when content stops loading
+    const lastScrollHeightRef = React.useRef(0);
+    const scrollStableCountRef = React.useRef(0);
+    // Scroll to bottom on initial mount and during session loading
+    // Keep scrolling until content stabilizes (no more changes)
+    React.useEffect(() => {
+        if (!initialScrollToBottom)
+            return;
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const scrollToBottomInstant = () => {
+            container.scrollTop = container.scrollHeight;
+            wasAtBottomRef.current = true;
         };
-    }, [checkIfAtBottom, onScrollChange]);
-    // Auto-scroll when content changes using MutationObserver + ResizeObserver
+        // Check if content has stabilized (scrollHeight hasn't changed)
+        const currentHeight = container.scrollHeight;
+        if (currentHeight === lastScrollHeightRef.current) {
+            scrollStableCountRef.current++;
+        }
+        else {
+            scrollStableCountRef.current = 0;
+            lastScrollHeightRef.current = currentHeight;
+        }
+        // If content is still loading (height changing) or we haven't scrolled yet,
+        // keep auto-scrolling. Stop after content is stable for a few renders.
+        if (scrollStableCountRef.current < 3) {
+            isAutoScrollingRef.current = true;
+            scrollToBottomInstant();
+            hasInitialScrolledRef.current = true;
+        }
+        else {
+            // Content is stable, stop auto-scrolling
+            isAutoScrollingRef.current = false;
+        }
+    }, [initialScrollToBottom, children]);
+    // Also use a timer-based approach as backup for session replay
+    // which may not trigger children changes
     React.useEffect(() => {
+        if (!initialScrollToBottom)
+            return;
         const container = scrollContainerRef.current;
         if (!container)
             return;
-        const scrollIfNeeded = () => {
-            // Only auto-scroll if user was at bottom and isn't actively scrolling
-            if (!isAtBottomRef.current || isUserScrollingRef.current) {
+        // Keep scrolling to bottom for the first 2 seconds of session load
+        // to catch async message replay
+        let cancelled = false;
+        const scrollInterval = setInterval(() => {
+            if (cancelled)
                 return;
+            if (container.scrollHeight > container.clientHeight) {
+                isAutoScrollingRef.current = true;
+                container.scrollTop = container.scrollHeight;
+                wasAtBottomRef.current = true;
+                hasInitialScrolledRef.current = true;
             }
-            const now = Date.now();
-            const timeSinceLastMutation = now - lastMutationTimeRef.current;
-            const currentScrollHeight = container.scrollHeight;
-            const heightDelta = currentScrollHeight - lastScrollHeightRef.current;
-            lastMutationTimeRef.current = now;
-            lastScrollHeightRef.current = currentScrollHeight;
-            // Detect if this is likely a new message (large height increase + time gap)
-            // vs streaming (small incremental changes)
-            const isLikelyNewMessage = heightDelta > 80 && timeSinceLastMutation > 150;
+        }, 100);
+        // Stop after 2 seconds
+        const timeout = setTimeout(() => {
+            clearInterval(scrollInterval);
+            isAutoScrollingRef.current = false;
+        }, 2000);
+        return () => {
+            cancelled = true;
+            clearInterval(scrollInterval);
+            clearTimeout(timeout);
+        };
+    }, [initialScrollToBottom]); // Only run once on mount
+    // Check scroll position on mount
+    React.useEffect(() => {
+        if (!isAutoScrollingRef.current) {
+            const isAtBottom = checkScrollPosition();
+            wasAtBottomRef.current = isAtBottom;
+        }
+    }, [checkScrollPosition]);
+    // Detect user interaction with scroll area (wheel, touch) - IMMEDIATELY break auto-scroll
+    const handleUserInteraction = React.useCallback(() => {
+        // Immediately mark that user is interacting
+        isAutoScrollingRef.current = false;
+        // For wheel/touch events, temporarily break auto-scroll
+        // The actual scroll event will update wasAtBottomRef properly
+        // This prevents the race condition where content updates before scroll completes
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        // Check current position BEFORE the scroll happens
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        // If user is not currently at the bottom, definitely break auto-scroll
+        if (distanceFromBottom >= 100) {
+            wasAtBottomRef.current = false;
+        }
+        // If they are at bottom, the scroll event will determine if they stay there
+    }, []);
+    // Handle keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        // If user presses arrow keys, page up/down, home/end - they're scrolling
+        const scrollKeys = [
+            "ArrowUp",
+            "ArrowDown",
+            "PageUp",
+            "PageDown",
+            "Home",
+            "End",
+        ];
+        if (scrollKeys.includes(e.key)) {
+            isAutoScrollingRef.current = false;
+            // Check position on next frame after the scroll happens
             requestAnimationFrame(() => {
-                if (isLikelyNewMessage) {
-                    scrollToBottom("smooth");
-                }
-                else {
-                    scrollToBottom("instant");
-                }
-                setIsAtBottom(true);
-                isAtBottomRef.current = true;
+                const container = scrollContainerRef.current;
+                if (!container)
+                    return;
+                const { scrollTop, scrollHeight, clientHeight } = container;
+                const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+                wasAtBottomRef.current = distanceFromBottom < 100;
             });
-        };
-        // Watch for DOM changes (new messages, content updates)
-        const mutationObserver = new MutationObserver(scrollIfNeeded);
-        mutationObserver.observe(container, {
-            childList: true,
-            subtree: true,
-            characterData: true,
-        });
-        // Watch for size changes (images loading, content expanding)
-        const resizeObserver = new ResizeObserver(scrollIfNeeded);
-        resizeObserver.observe(container);
-        // Also observe direct children for size changes
-        for (const child of Array.from(container.children)) {
-            resizeObserver.observe(child);
         }
-        // Initialize scroll height
-        lastScrollHeightRef.current = container.scrollHeight;
-        return () => {
-            mutationObserver.disconnect();
-            resizeObserver.disconnect();
-        };
-    }, [scrollToBottom]);
-    // Button click handler - smooth scroll and re-engage auto-scroll
-    const handleScrollToBottomClick = React.useCallback(() => {
-        setIsAtBottom(true);
-        isAtBottomRef.current = true;
-        scrollToBottom("smooth");
-    }, [scrollToBottom]);
-    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollToBottom && (_jsx("button", { type: "button", onClick: handleScrollToBottomClick, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", isAtBottom
-                    ? "pointer-events-none scale-0 opacity-0"
-                    : "pointer-events-auto scale-100 opacity-100"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
+    }, []);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto flex flex-col", className), onScroll: handleScroll, onWheel: handleUserInteraction, onTouchStart: handleUserInteraction, onKeyDown: handleKeyDown, tabIndex: 0, ...props, children: _jsx("div", { className: "mx-auto max-w-chat flex-1 w-full flex flex-col", children: children }) }), showScrollButton && (_jsx("button", { type: "button", onClick: () => scrollToBottom(true), className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "size-4" }) }))] }));
 });
 ChatLayoutMessages.displayName = "ChatLayout.Messages";
 const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
@@ -180,32 +256,63 @@ const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, r
     return (_jsx("div", { ref: ref, className: cn("border-r border-border bg-card w-64 overflow-y-auto", className), ...props, children: children }));
 });
 ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
-const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children, ...props }, ref) => {
+const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children }, ref) => {
     const { panelSize } = useChatLayoutContext();
-    const [minSizePercent, setMinSizePercent] = React.useState(28);
-    // Convert 450px minimum to percentage based on window width
-    React.useEffect(() => {
-        const updateMinSize = () => {
-            const minPixels = 450;
-            const minPercent = (minPixels / window.innerWidth) * 100;
-            setMinSizePercent(Math.max(minPercent, 28)); // Never less than 28% or 450px
-        };
-        updateMinSize();
-        window.addEventListener("resize", updateMinSize);
-        return () => {
-            window.removeEventListener("resize", updateMinSize);
-        };
-    }, []);
+    // State for committed width (persisted between renders)
+    const [committedWidth, setCommittedWidth] = React.useState(450);
+    // Motion value for real-time drag updates
+    const widthMotionValue = useMotionValue(committedWidth);
+    // Track if currently dragging for visual feedback
+    const [isDragging, setIsDragging] = React.useState(false);
+    // Track drag start position and width
+    const dragStartX = React.useRef(0);
+    const dragStartWidth = React.useRef(committedWidth);
     // Hidden state - don't render
-    if (panelSize === "hidden")
-        return null;
-    return (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true, className: "group-hover:opacity-100 opacity-0 transition-opacity" }), _jsx(ResizablePanel, { defaultSize: 30, minSize: minSizePercent, maxSize: 40, className: "group", children: _jsx("div", { ref: ref, className: cn(
-                    // Hidden by default, visible at breakpoint
-                    "hidden h-full border-l border-border bg-card overflow-y-auto transition-all duration-300", 
-                    // Breakpoint visibility
-                    breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
-                    // Size variants - width is now controlled by ResizablePanel
-                    className), ...props, children: children }) })] }));
+    const isVisible = panelSize !== "hidden";
+    // Sync motion value when committed width changes
+    React.useEffect(() => {
+        widthMotionValue.set(committedWidth);
+    }, [committedWidth, widthMotionValue]);
+    // Handle pointer down to start drag
+    const handlePointerDown = React.useCallback((e) => {
+        e.preventDefault();
+        setIsDragging(true);
+        dragStartX.current = e.clientX;
+        dragStartWidth.current = committedWidth;
+        // Capture pointer for smooth dragging
+        e.target.setPointerCapture(e.pointerId);
+    }, [committedWidth]);
+    // Handle pointer move during drag
+    const handlePointerMove = React.useCallback((e) => {
+        if (!isDragging)
+            return;
+        const deltaX = e.clientX - dragStartX.current;
+        const newWidth = Math.max(250, Math.min(800, dragStartWidth.current - deltaX));
+        widthMotionValue.set(newWidth);
+    }, [isDragging, widthMotionValue]);
+    // Handle pointer up to end drag
+    const handlePointerUp = React.useCallback((e) => {
+        if (!isDragging)
+            return;
+        const deltaX = e.clientX - dragStartX.current;
+        const newWidth = Math.max(250, Math.min(800, dragStartWidth.current - deltaX));
+        setCommittedWidth(newWidth);
+        widthMotionValue.set(newWidth);
+        setIsDragging(false);
+        // Release pointer capture
+        e.target.releasePointerCapture(e.pointerId);
+    }, [isDragging, widthMotionValue]);
+    return (_jsx(AnimatePresence, { initial: false, mode: "wait", children: isVisible && (_jsxs(motion.div, { ref: ref, layout: true, initial: { width: 0, opacity: 0 }, animate: { width: committedWidth, opacity: 1 }, exit: { width: 0, opacity: 0 }, transition: {
+                duration: 0.5,
+                ease: motionEasing.smooth,
+            }, style: {
+                // Use motion value during drag for instant updates
+                width: isDragging ? widthMotionValue : undefined,
+            }, className: cn(
+            // Hidden by default, visible at breakpoint
+            "hidden h-full border-l border-border bg-card overflow-hidden relative", 
+            // Breakpoint visibility
+            breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", className), children: [_jsx("div", { onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, className: cn("absolute left-0 inset-y-0 w-2 -ml-1 cursor-col-resize z-10", "group flex items-center justify-center", "hover:bg-primary/5 transition-colors delay-300", isDragging && "bg-primary/10") }), _jsx("div", { className: "h-full overflow-y-auto", style: { width: committedWidth }, children: children })] }, "aside-panel")) }));
 });
 ChatLayoutAside.displayName = "ChatLayout.Aside";
 /* -------------------------------------------------------------------------------------------------