@townco/ui 0.1.16 → 0.1.18

package/dist/gui/components/Button.js

@@ -1,46 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
-				outline:
-					"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
-		},
-	},
-);
-const Button = React.forwardRef(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : "button";
-		return _jsx(Comp, {
-			className: cn(buttonVariants({ variant, size, className })),
-			ref: ref,
-			...props,
-		});
-	},
-);
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-10 px-4 py-2",
+            sm: "h-9 rounded-md px-3",
+            lg: "h-11 rounded-md px-8",
+            icon: "h-10 w-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
 Button.displayName = "Button";
 export { Button, buttonVariants };

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

@@ -1,27 +1,8 @@
 import * as React from "react";
-declare const Card: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardHeader: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardTitle: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardDescription: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardContent: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-declare const CardFooter: React.ForwardRefExoticComponent<
-	React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
->;
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardDescription,
-	CardContent,
-};
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

package/dist/gui/components/Card.js

@@ -1,62 +1,16 @@
-import * as React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../lib/utils.js";
-
-const Card = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn(
-			"rounded-lg border bg-card text-card-foreground shadow-sm",
-			className,
-		),
-		...props,
-	}),
-);
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-lg border bg-card text-card-foreground shadow-sm", className), ...props })));
 Card.displayName = "Card";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn("flex flex-col space-y-1.5 p-6", className),
-		...props,
-	}),
-);
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn(
-			"text-2xl font-semibold leading-none tracking-tight",
-			className,
-		),
-		...props,
-	}),
-);
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn("text-sm text-muted-foreground", className),
-		...props,
-	}),
-);
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props }),
-);
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
 CardContent.displayName = "CardContent";
-const CardFooter = React.forwardRef(({ className, ...props }, ref) =>
-	_jsx("div", {
-		ref: ref,
-		className: cn("flex items-center p-6 pt-0", className),
-		...props,
-	}),
-);
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
 CardFooter.displayName = "CardFooter";
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardDescription,
-	CardContent,
-};
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, };

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

@@ -6,18 +6,29 @@ 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[];
+    /**
+     * Styling variant
+     * - 'animated': Clip-path animated tabs (original style)
+     * - 'pills': Simple pill-style tabs with background (Figma design)
+     */
+    variant?: "animated" | "pills";
+    /**
+     * Whether to show icons in tabs (for pills variant)
+     */
+    showIcons?: boolean;
+    /**
+     * Which tabs to show
+     */
+    visibleTabs?: ("todo" | "files" | "database")[];
 }
-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,121 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckSquare, Database, FileText } from "lucide-react";
 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 { FilesTabContent, TodoTabContent } from "./ChatPanelTabContent.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, variant = "animated", showIcons = false, visibleTabs = ["todo", "files", "database"], 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(visibleTabs[0] || "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 allTabs = [
+        {
+            id: "todo",
+            label: variant === "pills" ? "To-do" : "To-Do List",
+            icon: CheckSquare,
+        },
+        {
+            id: "files",
+            label: "Files",
+            icon: FileText,
+        },
+        {
+            id: "database",
+            label: "Database",
+            icon: Database,
+        },
+    ];
+    const tabs = allTabs.filter((tab) => visibleTabs.includes(tab.id));
+    return (_jsx("div", { ref: ref, className: cn("select-none", className), ...props, children: _jsxs(Tabs, { value: activeTab, onValueChange: setActiveTab, className: "w-full", children: [variant === "pills" ? (
+                // Pills variant - Simple background highlight (Figma design)
+                _jsx(TabsList, { className: cn("w-full justify-start bg-transparent p-0 h-auto", "gap-1"), children: tabs.map((tab) => {
+                        const Icon = tab.icon;
+                        return (_jsxs(TabsTrigger, { value: tab.id, className: cn("gap-2 px-3 py-1.5 rounded-lg text-sm font-medium", "data-[state=active]:bg-zinc-100 data-[state=active]:text-foreground", "data-[state=inactive]:text-muted-foreground"), children: [showIcons && Icon && _jsx(Icon, { className: "size-4" }), tab.label] }, tab.id));
+                    }) })) : (
+                // Animated variant - Clip-path animation (original style)
+                _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", className: variant === "pills" ? "mt-0" : "", children: variant === "pills" ? (_jsx(TodoTabContent, { todos: todosToDisplay })) : (_jsx(TodoList, { todos: todosToDisplay })) }), _jsx(TabsContent, { value: "files", className: variant === "pills" ? "mt-0" : "", children: _jsx(FilesTabContent, {}) }), _jsx(TabsContent, { value: "database", className: variant === "pills" ? "mt-0" : "", children: _jsx("div", { className: "text-sm text-foreground opacity-60 italic", children: "Database tab coming soon..." }) })] }) }));
+});
 ChatSecondaryPanel.displayName = "ChatSecondaryPanel";

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

@@ -1,8 +1,6 @@
 import * as React from "react";
 import { type ReactNode } from "react";
 export interface ChatStatusProps extends React.HTMLAttributes<HTMLSpanElement> {
-	children: ReactNode;
+    children: ReactNode;
 }
-export declare const ChatStatus: React.ForwardRefExoticComponent<
-	ChatStatusProps & React.RefAttributes<HTMLSpanElement>
->;
+export declare const ChatStatus: React.ForwardRefExoticComponent<ChatStatusProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/gui/components/ChatStatus.js

@@ -1,49 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useEffect, useRef, useState } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-export const ChatStatus = React.forwardRef(
-	({ children, className, ...props }, ref) => {
-		const [displayContent, setDisplayContent] = useState(children);
-		const [isTransitioning, setIsTransitioning] = useState(false);
-		const previousContentRef = useRef(children);
-		const isInitialMountRef = useRef(true);
-		useEffect(() => {
-			// Skip transition on initial mount
-			if (isInitialMountRef.current) {
-				isInitialMountRef.current = false;
-				previousContentRef.current = children;
-				return;
-			}
-			// Only transition if content actually changed
-			if (previousContentRef.current === children) {
-				return;
-			}
-			// Start transition out
-			setIsTransitioning(true);
-			// After fade out, update content and fade in
-			const timeoutId = setTimeout(() => {
-				setDisplayContent(children);
-				previousContentRef.current = children;
-				// Trigger fade in
-				requestAnimationFrame(() => {
-					setIsTransitioning(false);
-				});
-			}, 150); // Half of transition duration (300ms total)
-			return () => {
-				clearTimeout(timeoutId);
-			};
-		}, [children]);
-		return _jsx("span", {
-			ref: ref,
-			className: cn(
-				"text-sm text-foreground opacity-60 transition-opacity duration-300",
-				isTransitioning ? "opacity-0" : "opacity-60",
-				className,
-			),
-			...props,
-			children: displayContent,
-		});
-	},
-);
+export const ChatStatus = React.forwardRef(({ children, className, ...props }, ref) => {
+    const [displayContent, setDisplayContent] = useState(children);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const previousContentRef = useRef(children);
+    const isInitialMountRef = useRef(true);
+    useEffect(() => {
+        // Skip transition on initial mount
+        if (isInitialMountRef.current) {
+            isInitialMountRef.current = false;
+            previousContentRef.current = children;
+            return;
+        }
+        // Only transition if content actually changed
+        if (previousContentRef.current === children) {
+            return;
+        }
+        // Start transition out
+        setIsTransitioning(true);
+        // After fade out, update content and fade in
+        const timeoutId = setTimeout(() => {
+            setDisplayContent(children);
+            previousContentRef.current = children;
+            // Trigger fade in
+            requestAnimationFrame(() => {
+                setIsTransitioning(false);
+            });
+        }, 150); // Half of transition duration (300ms total)
+        return () => {
+            clearTimeout(timeoutId);
+        };
+    }, [children]);
+    return (_jsx("span", { ref: ref, className: cn("text-sm text-foreground opacity-60 transition-opacity duration-300", isTransitioning ? "opacity-0" : "opacity-60", className), ...props, children: displayContent }));
+});
 ChatStatus.displayName = "ChatStatus";

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

@@ -3,21 +3,18 @@ import * as React from "react";
  * Conversation component inspired by shadcn.io/ai
  * Auto-scrolling chat container that maintains scroll position during streaming
  */
-export interface ConversationProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/** Whether to auto-scroll to bottom on new messages */
-	autoScroll?: boolean;
-	/** Whether content is currently streaming */
-	isStreaming?: boolean;
-	/** Scroll behavior type */
-	scrollBehavior?: ScrollBehavior;
-	/** Threshold for considering user at bottom (px from bottom) */
-	scrollThreshold?: number;
-	/** Show scroll-to-bottom button when not at bottom */
-	showScrollButton?: boolean;
-	/** Custom scroll button */
-	scrollButton?: React.ReactNode;
+export interface ConversationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether to auto-scroll to bottom on new messages */
+    autoScroll?: boolean;
+    /** Whether content is currently streaming */
+    isStreaming?: boolean;
+    /** Scroll behavior type */
+    scrollBehavior?: ScrollBehavior;
+    /** Threshold for considering user at bottom (px from bottom) */
+    scrollThreshold?: number;
+    /** Show scroll-to-bottom button when not at bottom */
+    showScrollButton?: boolean;
+    /** Custom scroll button */
+    scrollButton?: React.ReactNode;
 }
-export declare const Conversation: React.ForwardRefExoticComponent<
-	ConversationProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Conversation: React.ForwardRefExoticComponent<ConversationProps & React.RefAttributes<HTMLDivElement>>;