@townco/ui 0.1.0 → 0.1.6

package/dist/gui/components/ChatPreview.js

@@ -1,164 +1,214 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-export function ChatPreview({ config, status, iframeSrc = "/chat-standalone", }) {
-    const iframeRef = useRef(null);
-    const containerRef = useRef(null);
-    const [dimensions, setDimensions] = useState({
-        width: 800,
-        height: 600,
-    });
-    const [isResizing, setIsResizing] = useState({
-        horizontal: false,
-        vertical: false,
-    });
-    const resizeStartRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
-    const isResizingRef = useRef({
-        horizontal: false,
-        vertical: false,
-    });
-    const resizeHandlersRef = useRef({ mouseMove: null, mouseUp: null, mouseLeave: null });
-    const sendConfigToIframe = (configToSend) => {
-        const iframe = iframeRef.current;
-        if (iframe?.contentWindow) {
-            iframe.contentWindow.postMessage({
-                type: "CONFIG_UPDATE",
-                config: configToSend,
-            }, "*");
-        }
-    };
-    const sendStatusToIframe = (statusToSend) => {
-        const iframe = iframeRef.current;
-        if (iframe?.contentWindow) {
-            iframe.contentWindow.postMessage({
-                type: "STATUS_UPDATE",
-                status: statusToSend,
-            }, "*");
-        }
-    };
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        if (!iframe)
-            return;
-        const handleMessage = (event) => {
-            if (event.data && event.data.type === "REQUEST_CONFIG") {
-                sendConfigToIframe(config);
-            }
-        };
-        window.addEventListener("message", handleMessage);
-        // Send initial config and status when iframe loads
-        const handleLoad = () => {
-            sendConfigToIframe(config);
-            sendStatusToIframe(status);
-        };
-        iframe.addEventListener("load", handleLoad);
-        return () => {
-            window.removeEventListener("message", handleMessage);
-            iframe.removeEventListener("load", handleLoad);
-        };
-    }, [config, status]);
-    // Update iframe when config changes (after initial load)
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        // Only send if iframe is already loaded
-        if (iframe?.contentWindow &&
-            iframe.contentDocument?.readyState === "complete") {
-            sendConfigToIframe(config);
-        }
-    }, [config]);
-    // Update iframe when status changes (after initial load)
-    useEffect(() => {
-        const iframe = iframeRef.current;
-        // Only send if iframe is already loaded
-        if (iframe?.contentWindow &&
-            iframe.contentDocument?.readyState === "complete") {
-            sendStatusToIframe(status);
-        }
-    }, [status]);
-    // Sync ref with state for UI updates
-    useEffect(() => {
-        isResizingRef.current = isResizing;
-    }, [isResizing]);
-    // Cleanup on unmount
-    useEffect(() => {
-        return () => {
-            stopResizing();
-        };
-    }, []);
-    const stopResizing = () => {
-        const handlers = resizeHandlersRef.current;
-        if (handlers.mouseMove) {
-            window.removeEventListener("mousemove", handlers.mouseMove);
-        }
-        if (handlers.mouseUp) {
-            window.removeEventListener("mouseup", handlers.mouseUp, true);
-        }
-        if (handlers.mouseLeave) {
-            document.removeEventListener("mouseleave", handlers.mouseLeave);
-        }
-        setIsResizing({ horizontal: false, vertical: false });
-        isResizingRef.current = { horizontal: false, vertical: false };
-        resizeHandlersRef.current = {
-            mouseMove: null,
-            mouseUp: null,
-            mouseLeave: null,
-        };
-    };
-    const handleResizeStart = (direction, e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        // Clean up any existing listeners first
-        stopResizing();
-        const resizeState = direction === "horizontal"
-            ? { horizontal: true, vertical: false }
-            : { horizontal: false, vertical: true };
-        setIsResizing(resizeState);
-        isResizingRef.current = resizeState;
-        resizeStartRef.current = {
-            x: e.clientX,
-            y: e.clientY,
-            width: dimensions.width,
-            height: dimensions.height,
-        };
-        const handleMouseMove = (e) => {
-            if (!isResizingRef.current.horizontal &&
-                !isResizingRef.current.vertical) {
-                return;
-            }
-            const deltaX = e.clientX - resizeStartRef.current.x;
-            const deltaY = e.clientY - resizeStartRef.current.y;
-            let newWidth = resizeStartRef.current.width;
-            let newHeight = resizeStartRef.current.height;
-            if (isResizingRef.current.horizontal) {
-                newWidth = Math.max(400, Math.min(1200, resizeStartRef.current.width + deltaX));
-            }
-            if (isResizingRef.current.vertical) {
-                newHeight = Math.max(300, Math.min(900, resizeStartRef.current.height + deltaY));
-            }
-            setDimensions({ width: newWidth, height: newHeight });
-        };
-        const handleMouseUp = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            stopResizing();
-        };
-        const handleMouseLeave = () => {
-            // If mouse leaves window during resize, stop resizing
-            stopResizing();
-        };
-        // Store handlers for cleanup
-        resizeHandlersRef.current = {
-            mouseMove: handleMouseMove,
-            mouseUp: handleMouseUp,
-            mouseLeave: handleMouseLeave,
-        };
-        // Use capture phase to ensure we catch events even if they bubble
-        window.addEventListener("mousemove", handleMouseMove);
-        window.addEventListener("mouseup", handleMouseUp, { capture: true });
-        document.addEventListener("mouseleave", handleMouseLeave);
-    };
-    return (_jsxs("div", { ref: containerRef, className: "relative rounded-xl overflow-visible bg-[var(--color-surface)] shadow-lg min-w-[400px] min-h-[300px]", style: {
-            width: `${dimensions.width}px`,
-            height: `${dimensions.height}px`,
-        }, children: [_jsx("iframe", { ref: iframeRef, src: iframeSrc, className: "w-full h-full rounded-xl border-1 border-[var(--color-border)] block", title: "Chat Preview" }), _jsx("div", { className: "absolute -right-4 top-1/2 -translate-y-1/2 w-1.5 h-10 rounded-full bg-black/20 cursor-ew-resize hover:opacity-80 transition-opacity", onMouseDown: (e) => handleResizeStart("horizontal", e) }), _jsx("div", { className: "absolute -bottom-4 left-1/2 -translate-x-1/2 w-10 h-1.5 rounded-full bg-black/20 cursor-ns-resize hover:opacity-80 transition-opacity", onMouseDown: (e) => handleResizeStart("vertical", e) })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ChatPreview({
+	config,
+	status,
+	iframeSrc = "/chat-standalone",
+}) {
+	const iframeRef = useRef(null);
+	const containerRef = useRef(null);
+	const [dimensions, setDimensions] = useState({
+		width: 800,
+		height: 600,
+	});
+	const [isResizing, setIsResizing] = useState({
+		horizontal: false,
+		vertical: false,
+	});
+	const resizeStartRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
+	const isResizingRef = useRef({
+		horizontal: false,
+		vertical: false,
+	});
+	const resizeHandlersRef = useRef({
+		mouseMove: null,
+		mouseUp: null,
+		mouseLeave: null,
+	});
+	const sendConfigToIframe = (configToSend) => {
+		const iframe = iframeRef.current;
+		if (iframe?.contentWindow) {
+			iframe.contentWindow.postMessage(
+				{
+					type: "CONFIG_UPDATE",
+					config: configToSend,
+				},
+				"*",
+			);
+		}
+	};
+	const sendStatusToIframe = (statusToSend) => {
+		const iframe = iframeRef.current;
+		if (iframe?.contentWindow) {
+			iframe.contentWindow.postMessage(
+				{
+					type: "STATUS_UPDATE",
+					status: statusToSend,
+				},
+				"*",
+			);
+		}
+	};
+	useEffect(() => {
+		const iframe = iframeRef.current;
+		if (!iframe) return;
+		const handleMessage = (event) => {
+			if (event.data && event.data.type === "REQUEST_CONFIG") {
+				sendConfigToIframe(config);
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		// Send initial config and status when iframe loads
+		const handleLoad = () => {
+			sendConfigToIframe(config);
+			sendStatusToIframe(status);
+		};
+		iframe.addEventListener("load", handleLoad);
+		return () => {
+			window.removeEventListener("message", handleMessage);
+			iframe.removeEventListener("load", handleLoad);
+		};
+	}, [config, status]);
+	// Update iframe when config changes (after initial load)
+	useEffect(() => {
+		const iframe = iframeRef.current;
+		// Only send if iframe is already loaded
+		if (
+			iframe?.contentWindow &&
+			iframe.contentDocument?.readyState === "complete"
+		) {
+			sendConfigToIframe(config);
+		}
+	}, [config]);
+	// Update iframe when status changes (after initial load)
+	useEffect(() => {
+		const iframe = iframeRef.current;
+		// Only send if iframe is already loaded
+		if (
+			iframe?.contentWindow &&
+			iframe.contentDocument?.readyState === "complete"
+		) {
+			sendStatusToIframe(status);
+		}
+	}, [status]);
+	// Sync ref with state for UI updates
+	useEffect(() => {
+		isResizingRef.current = isResizing;
+	}, [isResizing]);
+	// Cleanup on unmount
+	useEffect(() => {
+		return () => {
+			stopResizing();
+		};
+	}, []);
+	const stopResizing = () => {
+		const handlers = resizeHandlersRef.current;
+		if (handlers.mouseMove) {
+			window.removeEventListener("mousemove", handlers.mouseMove);
+		}
+		if (handlers.mouseUp) {
+			window.removeEventListener("mouseup", handlers.mouseUp, true);
+		}
+		if (handlers.mouseLeave) {
+			document.removeEventListener("mouseleave", handlers.mouseLeave);
+		}
+		setIsResizing({ horizontal: false, vertical: false });
+		isResizingRef.current = { horizontal: false, vertical: false };
+		resizeHandlersRef.current = {
+			mouseMove: null,
+			mouseUp: null,
+			mouseLeave: null,
+		};
+	};
+	const handleResizeStart = (direction, e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		// Clean up any existing listeners first
+		stopResizing();
+		const resizeState =
+			direction === "horizontal"
+				? { horizontal: true, vertical: false }
+				: { horizontal: false, vertical: true };
+		setIsResizing(resizeState);
+		isResizingRef.current = resizeState;
+		resizeStartRef.current = {
+			x: e.clientX,
+			y: e.clientY,
+			width: dimensions.width,
+			height: dimensions.height,
+		};
+		const handleMouseMove = (e) => {
+			if (
+				!isResizingRef.current.horizontal &&
+				!isResizingRef.current.vertical
+			) {
+				return;
+			}
+			const deltaX = e.clientX - resizeStartRef.current.x;
+			const deltaY = e.clientY - resizeStartRef.current.y;
+			let newWidth = resizeStartRef.current.width;
+			let newHeight = resizeStartRef.current.height;
+			if (isResizingRef.current.horizontal) {
+				newWidth = Math.max(
+					400,
+					Math.min(1200, resizeStartRef.current.width + deltaX),
+				);
+			}
+			if (isResizingRef.current.vertical) {
+				newHeight = Math.max(
+					300,
+					Math.min(900, resizeStartRef.current.height + deltaY),
+				);
+			}
+			setDimensions({ width: newWidth, height: newHeight });
+		};
+		const handleMouseUp = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			stopResizing();
+		};
+		const handleMouseLeave = () => {
+			// If mouse leaves window during resize, stop resizing
+			stopResizing();
+		};
+		// Store handlers for cleanup
+		resizeHandlersRef.current = {
+			mouseMove: handleMouseMove,
+			mouseUp: handleMouseUp,
+			mouseLeave: handleMouseLeave,
+		};
+		// Use capture phase to ensure we catch events even if they bubble
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp, { capture: true });
+		document.addEventListener("mouseleave", handleMouseLeave);
+	};
+	return _jsxs("div", {
+		ref: containerRef,
+		className:
+			"relative rounded-xl overflow-visible bg-[var(--color-surface)] shadow-lg min-w-[400px] min-h-[300px]",
+		style: {
+			width: `${dimensions.width}px`,
+			height: `${dimensions.height}px`,
+		},
+		children: [
+			_jsx("iframe", {
+				ref: iframeRef,
+				src: iframeSrc,
+				className:
+					"w-full h-full rounded-xl border-1 border-[var(--color-border)] block",
+				title: "Chat Preview",
+			}),
+			_jsx("div", {
+				className:
+					"absolute -right-4 top-1/2 -translate-y-1/2 w-1.5 h-10 rounded-full bg-black/20 cursor-ew-resize hover:opacity-80 transition-opacity",
+				onMouseDown: (e) => handleResizeStart("horizontal", e),
+			}),
+			_jsx("div", {
+				className:
+					"absolute -bottom-4 left-1/2 -translate-x-1/2 w-10 h-1.5 rounded-full bg-black/20 cursor-ns-resize hover:opacity-80 transition-opacity",
+				onMouseDown: (e) => handleResizeStart("vertical", e),
+			}),
+		],
+	});
 }
-//# sourceMappingURL=ChatPreview.js.map
+//# sourceMappingURL=ChatPreview.js.map

package/dist/gui/components/ChatSecondaryPanel.d.ts

@@ -6,15 +6,18 @@ import type { TodoItem } from "./TodoListItem.js";
  * 1. Hook-based: Pass `client` prop (future support when todos are in store)
  * 2. Prop-based: Pass `todos` prop directly
  */
-export interface ChatSecondaryPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * ACP Client for hook-based todo fetching (future support)
-     */
-    client?: AcpClient | null;
-    /**
-     * Todos to display (prop-based pattern)
-     * Either client or todos should be provided
-     */
-    todos?: TodoItem[];
+export interface ChatSecondaryPanelProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * ACP Client for hook-based todo fetching (future support)
+	 */
+	client?: AcpClient | null;
+	/**
+	 * Todos to display (prop-based pattern)
+	 * Either client or todos should be provided
+	 */
+	todos?: TodoItem[];
 }
-export declare const ChatSecondaryPanel: React.ForwardRefExoticComponent<ChatSecondaryPanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatSecondaryPanel: React.ForwardRefExoticComponent<
+	ChatSecondaryPanelProps & React.RefAttributes<HTMLDivElement>
+>;

package/dist/gui/components/ChatSecondaryPanel.js

@@ -1,44 +1,121 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
 import { TodoList } from "./TodoList.js";
-export const ChatSecondaryPanel = React.forwardRef(({ client, todos, className, ...props }, ref) => {
-    // For now, just use prop-based todos
-    // Future: Add hook to get todos from store when available
-    const todosToDisplay = todos || [];
-    const [activeTab, setActiveTab] = useState("todo");
-    const containerRef = useRef(null);
-    const activeTabElementRef = useRef(null);
-    useEffect(() => {
-        const updateClipPath = () => {
-            const container = containerRef.current;
-            if (activeTab && container) {
-                const activeTabElement = activeTabElementRef.current;
-                if (activeTabElement) {
-                    const containerRect = container.getBoundingClientRect();
-                    const tabRect = activeTabElement.getBoundingClientRect();
-                    const offsetLeft = tabRect.left - containerRect.left;
-                    const offsetWidth = tabRect.width;
-                    const clipLeftPercent = (offsetLeft / containerRect.width) * 100;
-                    const clipRightPercent = 100 - ((offsetLeft + offsetWidth) / containerRect.width) * 100;
-                    container.style.clipPath = `inset(0 ${clipRightPercent.toFixed(2)}% 0 ${clipLeftPercent.toFixed(2)}% round 999px)`;
-                }
-            }
-        };
-        // Small delay to ensure DOM is ready
-        const timeoutId = setTimeout(updateClipPath, 0);
-        return () => clearTimeout(timeoutId);
-    }, [activeTab]);
-    const tabs = [
-        { id: "todo", label: "To-Do List" },
-        { id: "files", label: "Files" },
-        { id: "database", label: "Database" },
-    ];
-    return (_jsx("div", { ref: ref, className: cn("select-none", className), ...props, children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [_jsxs("div", { className: "relative mb-4 border-border", children: [_jsx(TabsList, { className: "bg-transparent p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none", children: tab.label }, tab.id))) }), _jsx("div", { ref: containerRef, className: "absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none", style: {
-                                clipPath: "inset(0 100% 0 0% round 999px)",
-                                transition: "clip-path 0.25s ease-out",
-                            }, children: _jsx(TabsList, { className: "bg-secondary p-0 h-auto rounded-none w-full border-none", children: tabs.map((tab) => (_jsx(TabsTrigger, { value: tab.id, ref: activeTab === tab.id ? activeTabElementRef : null, className: "px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none", tabIndex: -1, children: tab.label }, tab.id))) }) })] }), _jsx(TabsContent, { value: "todo", children: _jsx(TodoList, { todos: todosToDisplay }) }), _jsx(TabsContent, { value: "files", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Files tab coming soon..." }) }), _jsx(TabsContent, { value: "database", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Database tab coming soon..." }) })] }) }));
-});
+export const ChatSecondaryPanel = React.forwardRef(
+	({ client, todos, className, ...props }, ref) => {
+		// For now, just use prop-based todos
+		// Future: Add hook to get todos from store when available
+		const todosToDisplay = todos || [];
+		const [activeTab, setActiveTab] = useState("todo");
+		const containerRef = useRef(null);
+		const activeTabElementRef = useRef(null);
+		useEffect(() => {
+			const updateClipPath = () => {
+				const container = containerRef.current;
+				if (activeTab && container) {
+					const activeTabElement = activeTabElementRef.current;
+					if (activeTabElement) {
+						const containerRect = container.getBoundingClientRect();
+						const tabRect = activeTabElement.getBoundingClientRect();
+						const offsetLeft = tabRect.left - containerRect.left;
+						const offsetWidth = tabRect.width;
+						const clipLeftPercent = (offsetLeft / containerRect.width) * 100;
+						const clipRightPercent =
+							100 - ((offsetLeft + offsetWidth) / containerRect.width) * 100;
+						container.style.clipPath = `inset(0 ${clipRightPercent.toFixed(2)}% 0 ${clipLeftPercent.toFixed(2)}% round 999px)`;
+					}
+				}
+			};
+			// Small delay to ensure DOM is ready
+			const timeoutId = setTimeout(updateClipPath, 0);
+			return () => clearTimeout(timeoutId);
+		}, [activeTab]);
+		const tabs = [
+			{ id: "todo", label: "To-Do List" },
+			{ id: "files", label: "Files" },
+			{ id: "database", label: "Database" },
+		];
+		return _jsx("div", {
+			ref: ref,
+			className: cn("select-none", className),
+			...props,
+			children: _jsxs(Tabs, {
+				value: activeTab,
+				onValueChange: setActiveTab,
+				className: "w-full",
+				children: [
+					_jsxs("div", {
+						className: "relative mb-4 border-border",
+						children: [
+							_jsx(TabsList, {
+								className:
+									"bg-transparent p-0 h-auto rounded-none w-full border-none",
+								children: tabs.map((tab) =>
+									_jsx(
+										TabsTrigger,
+										{
+											value: tab.id,
+											className:
+												"px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-foreground opacity-60 data-[state=active]:opacity-100 data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+											children: tab.label,
+										},
+										tab.id,
+									),
+								),
+							}),
+							_jsx("div", {
+								ref: containerRef,
+								className:
+									"absolute top-0 left-0 w-full overflow-hidden z-10 pointer-events-none",
+								style: {
+									clipPath: "inset(0 100% 0 0% round 999px)",
+									transition: "clip-path 0.25s ease-out",
+								},
+								children: _jsx(TabsList, {
+									className:
+										"bg-secondary p-0 h-auto rounded-none w-full border-none",
+									children: tabs.map((tab) =>
+										_jsx(
+											TabsTrigger,
+											{
+												value: tab.id,
+												ref: activeTab === tab.id ? activeTabElementRef : null,
+												className:
+													"px-3 py-1 text-sm font-[var(--font-family)] font-medium rounded-none text-primary bg-transparent data-[state=active]:shadow-none shadow-none",
+												tabIndex: -1,
+												children: tab.label,
+											},
+											tab.id,
+										),
+									),
+								}),
+							}),
+						],
+					}),
+					_jsx(TabsContent, {
+						value: "todo",
+						children: _jsx(TodoList, { todos: todosToDisplay }),
+					}),
+					_jsx(TabsContent, {
+						value: "files",
+						children: _jsx("div", {
+							className: "text-sm text-foreground opacity-60 italic",
+							children: "Files tab coming soon...",
+						}),
+					}),
+					_jsx(TabsContent, {
+						value: "database",
+						children: _jsx("div", {
+							className: "text-sm text-foreground opacity-60 italic",
+							children: "Database tab coming soon...",
+						}),
+					}),
+				],
+			}),
+		});
+	},
+);
 ChatSecondaryPanel.displayName = "ChatSecondaryPanel";

package/dist/gui/components/ChatSidebar.d.ts

@@ -1,14 +1,27 @@
 import * as React from "react";
-export interface ChatSidebarRootProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const ChatSidebarRoot: React.ForwardRefExoticComponent<ChatSidebarRootProps & React.RefAttributes<HTMLDivElement>>;
-export interface ChatSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const ChatSidebarHeader: React.ForwardRefExoticComponent<ChatSidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export interface ChatSidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const ChatSidebarContent: React.ForwardRefExoticComponent<ChatSidebarContentProps & React.RefAttributes<HTMLDivElement>>;
-export interface ChatSidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-}
-declare const ChatSidebarFooter: React.ForwardRefExoticComponent<ChatSidebarFooterProps & React.RefAttributes<HTMLDivElement>>;
-export { ChatSidebarRoot as Root, ChatSidebarHeader as Header, ChatSidebarContent as Content, ChatSidebarFooter as Footer, };
+export interface ChatSidebarRootProps
+	extends React.HTMLAttributes<HTMLDivElement> {}
+declare const ChatSidebarRoot: React.ForwardRefExoticComponent<
+	ChatSidebarRootProps & React.RefAttributes<HTMLDivElement>
+>;
+export interface ChatSidebarHeaderProps
+	extends React.HTMLAttributes<HTMLDivElement> {}
+declare const ChatSidebarHeader: React.ForwardRefExoticComponent<
+	ChatSidebarHeaderProps & React.RefAttributes<HTMLDivElement>
+>;
+export interface ChatSidebarContentProps
+	extends React.HTMLAttributes<HTMLDivElement> {}
+declare const ChatSidebarContent: React.ForwardRefExoticComponent<
+	ChatSidebarContentProps & React.RefAttributes<HTMLDivElement>
+>;
+export interface ChatSidebarFooterProps
+	extends React.HTMLAttributes<HTMLDivElement> {}
+declare const ChatSidebarFooter: React.ForwardRefExoticComponent<
+	ChatSidebarFooterProps & React.RefAttributes<HTMLDivElement>
+>;
+export {
+	ChatSidebarRoot as Root,
+	ChatSidebarHeader as Header,
+	ChatSidebarContent as Content,
+	ChatSidebarFooter as Footer,
+};