@townco/ui 0.1.0 → 0.1.6

package/dist/gui/components/ChatSidebar.js

@@ -1,23 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-const ChatSidebarRoot = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex h-full flex-col", className), ...props, children: children }));
-});
+
+const ChatSidebarRoot = React.forwardRef(
+	({ className, children, ...props }, ref) => {
+		return _jsx("div", {
+			ref: ref,
+			className: cn("flex h-full flex-col", className),
+			...props,
+			children: children,
+		});
+	},
+);
 ChatSidebarRoot.displayName = "ChatSidebar.Root";
-const ChatSidebarHeader = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("border-b border-border px-4 py-3", className), ...props, children: children }));
-});
+const ChatSidebarHeader = React.forwardRef(
+	({ className, children, ...props }, ref) => {
+		return _jsx("div", {
+			ref: ref,
+			className: cn("border-b border-border px-4 py-3", className),
+			...props,
+			children: children,
+		});
+	},
+);
 ChatSidebarHeader.displayName = "ChatSidebar.Header";
-const ChatSidebarContent = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("flex-1 overflow-y-auto p-4", className), ...props, children: children }));
-});
+const ChatSidebarContent = React.forwardRef(
+	({ className, children, ...props }, ref) => {
+		return _jsx("div", {
+			ref: ref,
+			className: cn("flex-1 overflow-y-auto p-4", className),
+			...props,
+			children: children,
+		});
+	},
+);
 ChatSidebarContent.displayName = "ChatSidebar.Content";
-const ChatSidebarFooter = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: cn("border-t border-border px-4 py-3", className), ...props, children: children }));
-});
+const ChatSidebarFooter = React.forwardRef(
+	({ className, children, ...props }, ref) => {
+		return _jsx("div", {
+			ref: ref,
+			className: cn("border-t border-border px-4 py-3", className),
+			...props,
+			children: children,
+		});
+	},
+);
 ChatSidebarFooter.displayName = "ChatSidebar.Footer";
 /* -------------------------------------------------------------------------------------------------
  * Exports
  * -----------------------------------------------------------------------------------------------*/
-export { ChatSidebarRoot as Root, ChatSidebarHeader as Header, ChatSidebarContent as Content, ChatSidebarFooter as Footer, };
+export {
+	ChatSidebarRoot as Root,
+	ChatSidebarHeader as Header,
+	ChatSidebarContent as Content,
+	ChatSidebarFooter as Footer,
+};

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

@@ -1,6 +1,8 @@
 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,38 +1,49 @@
-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/ChatView.d.ts

@@ -1,6 +1,8 @@
 import type { AcpClient } from "@agent-hub/sdk";
 export interface ChatViewProps {
-    client: AcpClient | null;
+	client: AcpClient | null;
 }
-export declare function ChatView({ client }: ChatViewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ChatView.d.ts.map
+export declare function ChatView({
+	client,
+}: ChatViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatView.d.ts.map

package/dist/gui/components/ChatView.js

@@ -1,13 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { StatusBar } from "./StatusBar.js";
-import { MessageList } from "./MessageList.js";
+import {
+	useChatInput,
+	useChatMessages,
+	useChatSession,
+} from "../../core/index.js";
 import { InputBox } from "./InputBox.js";
-import { useChatSession, useChatMessages, useChatInput, } from "../../core/index.js";
+import { MessageList } from "./MessageList.js";
+import { StatusBar } from "./StatusBar.js";
 export function ChatView({ client }) {
-    // Use headless hooks for business logic (same as TUI!)
-    const { connectionStatus, sessionId } = useChatSession(client);
-    const { messages, isStreaming } = useChatMessages(client);
-    const { value, isSubmitting, attachedFiles, onChange, onSubmit, onRemoveFile, } = useChatInput(client);
-    return (_jsxs("div", { className: "flex flex-col h-screen bg-gray-50", children: [_jsx(StatusBar, { connectionStatus: connectionStatus, sessionId: sessionId, isStreaming: isStreaming }), _jsx(MessageList, { messages: messages }), _jsx(InputBox, { value: value, isSubmitting: isSubmitting, attachedFiles: attachedFiles, onChange: onChange, onSubmit: onSubmit, onRemoveFile: onRemoveFile })] }));
+	// Use headless hooks for business logic (same as TUI!)
+	const { connectionStatus, sessionId } = useChatSession(client);
+	const { messages, isStreaming } = useChatMessages(client);
+	const {
+		value,
+		isSubmitting,
+		attachedFiles,
+		onChange,
+		onSubmit,
+		onRemoveFile,
+	} = useChatInput(client);
+	return _jsxs("div", {
+		className: "flex flex-col h-screen bg-gray-50",
+		children: [
+			_jsx(StatusBar, {
+				connectionStatus: connectionStatus,
+				sessionId: sessionId,
+				isStreaming: isStreaming,
+			}),
+			_jsx(MessageList, { messages: messages }),
+			_jsx(InputBox, {
+				value: value,
+				isSubmitting: isSubmitting,
+				attachedFiles: attachedFiles,
+				onChange: onChange,
+				onSubmit: onSubmit,
+				onRemoveFile: onRemoveFile,
+			}),
+		],
+	});
 }
-//# sourceMappingURL=ChatView.js.map
+//# sourceMappingURL=ChatView.js.map

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

@@ -1,16 +1,20 @@
 export interface ThemeConfig {
-    colorScheme: "light" | "dark";
-    accentColor: string;
-    typography: string;
-    fontSize: number;
-    thinkingDisplayStyle: "collapsible" | "inline";
+	colorScheme: "light" | "dark";
+	accentColor: string;
+	typography: string;
+	fontSize: number;
+	thinkingDisplayStyle: "collapsible" | "inline";
 }
 interface ConfigPanelProps {
-    config: ThemeConfig;
-    status: string;
-    onConfigChange: (config: ThemeConfig) => void;
-    onStatusChange: (status: string) => void;
+	config: ThemeConfig;
+	status: string;
+	onConfigChange: (config: ThemeConfig) => void;
+	onStatusChange: (status: string) => void;
 }
-export declare function ConfigPanel({ config, status, onConfigChange, onStatusChange, }: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ConfigPanel.d.ts.map
+export declare function ConfigPanel({
+	config,
+	status,
+	onConfigChange,
+	onStatusChange,
+}: ConfigPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ConfigPanel.d.ts.map

package/dist/gui/components/ConfigPanel.js

@@ -1,48 +1,225 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label } from "./Label.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./Select.js";
 import { Input } from "./Input.js";
+import { Label } from "./Label.js";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "./Select.js";
+
 const fontOptions = [
-    "Inter",
-    "Arial",
-    "Georgia",
-    "Courier New",
-    "Times New Roman",
-    "Verdana",
+	"Inter",
+	"Arial",
+	"Georgia",
+	"Courier New",
+	"Times New Roman",
+	"Verdana",
 ];
 const statusOptions = [
-    "v0.1.0",
-    "Connected",
-    "Syncing...",
-    "Ready",
-    "Processing",
-    "Online",
+	"v0.1.0",
+	"Connected",
+	"Syncing...",
+	"Ready",
+	"Processing",
+	"Online",
 ];
-export function ConfigPanel({ config, status, onConfigChange, onStatusChange, }) {
-    const handleColorSchemeChange = (newScheme) => {
-        onConfigChange({ ...config, colorScheme: newScheme });
-    };
-    const handleAccentColorChange = (e) => {
-        const newColor = e.target.value;
-        onConfigChange({ ...config, accentColor: newColor });
-    };
-    const handleTypographyChange = (newTypography) => {
-        onConfigChange({ ...config, typography: newTypography });
-    };
-    const handleFontSizeChange = (e) => {
-        const newSize = parseInt(e.target.value, 10);
-        if (!isNaN(newSize) && newSize > 0) {
-            onConfigChange({ ...config, fontSize: newSize });
-        }
-    };
-    const handleThinkingDisplayStyleChange = (newStyle) => {
-        onConfigChange({ ...config, thinkingDisplayStyle: newStyle });
-    };
-    const handleStatusChange = () => {
-        const currentIndex = statusOptions.indexOf(status);
-        const nextIndex = (currentIndex + 1) % statusOptions.length;
-        onStatusChange(statusOptions[nextIndex]);
-    };
-    return (_jsxs("div", { className: "h-full p-6 bg-[var(--color-surface)] border-r border-[var(--color-border)] overflow-y-auto", children: [_jsx("h2", { className: "text-2xl font-semibold mb-8 m-0 text-[var(--color-text)]", children: "Design Configuration" }), _jsxs("div", { className: "mb-6", children: [_jsx(Label, { htmlFor: "color-scheme", className: "mb-2 text-[var(--color-text)]", children: "Color Scheme" }), _jsxs(Select, { value: config.colorScheme, onValueChange: handleColorSchemeChange, children: [_jsx(SelectTrigger, { id: "color-scheme", className: "w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { className: "bg-[var(--color-bg)] border-[var(--color-border)]", children: [_jsx(SelectItem, { value: "light", children: "Light" }), _jsx(SelectItem, { value: "dark", children: "Dark" })] })] })] }), _jsxs("div", { className: "mb-6", children: [_jsx(Label, { htmlFor: "accent-color", className: "mb-2 text-[var(--color-text)]", children: "Accent Color" }), _jsxs("div", { className: "flex gap-2 items-center", children: [_jsx("input", { type: "color", id: "accent-color", value: config.accentColor, onChange: handleAccentColorChange, className: "w-[60px] h-10 border border-[var(--color-border)] rounded-md cursor-pointer bg-transparent" }), _jsx(Input, { type: "text", value: config.accentColor, onChange: handleAccentColorChange, pattern: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$", className: "flex-1 bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]" })] })] }), _jsxs("div", { className: "mb-6", children: [_jsx(Label, { htmlFor: "typography", className: "mb-2 text-[var(--color-text)]", children: "Typography" }), _jsxs(Select, { value: config.typography, onValueChange: handleTypographyChange, children: [_jsx(SelectTrigger, { id: "typography", className: "w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "bg-[var(--color-bg)] border-[var(--color-border)]", children: fontOptions.map((font) => (_jsx(SelectItem, { value: font, children: font }, font))) })] })] }), _jsxs("div", { className: "mb-6", children: [_jsx(Label, { htmlFor: "font-size", className: "mb-2 text-[var(--color-text)]", children: "Font Size (px)" }), _jsx(Input, { type: "number", id: "font-size", value: config.fontSize, onChange: handleFontSizeChange, min: "8", max: "32", className: "w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]" })] }), _jsxs("div", { className: "mb-6", children: [_jsx(Label, { htmlFor: "thinking-display-style", className: "mb-2 text-[var(--color-text)]", children: "Thinking Display Style" }), _jsxs(Select, { value: config.thinkingDisplayStyle || "collapsible", onValueChange: handleThinkingDisplayStyleChange, children: [_jsx(SelectTrigger, { id: "thinking-display-style", className: "w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { className: "bg-[var(--color-bg)] border-[var(--color-border)]", children: [_jsx(SelectItem, { value: "collapsible", children: "Collapsible Section" }), _jsx(SelectItem, { value: "inline", children: "Inline" })] })] })] }), _jsxs("div", { className: "mb-6", children: [_jsx(Label, { htmlFor: "status-test", className: "mb-2 text-[var(--color-text)]", children: "Chat Status" }), _jsxs("button", { onClick: handleStatusChange, className: "w-full px-4 py-2 rounded-lg bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity text-[var(--font-size)] font-[var(--font-family)]", children: ["Change Status: ", status] })] })] }));
+export function ConfigPanel({
+	config,
+	status,
+	onConfigChange,
+	onStatusChange,
+}) {
+	const handleColorSchemeChange = (newScheme) => {
+		onConfigChange({ ...config, colorScheme: newScheme });
+	};
+	const handleAccentColorChange = (e) => {
+		const newColor = e.target.value;
+		onConfigChange({ ...config, accentColor: newColor });
+	};
+	const handleTypographyChange = (newTypography) => {
+		onConfigChange({ ...config, typography: newTypography });
+	};
+	const handleFontSizeChange = (e) => {
+		const newSize = parseInt(e.target.value, 10);
+		if (!isNaN(newSize) && newSize > 0) {
+			onConfigChange({ ...config, fontSize: newSize });
+		}
+	};
+	const handleThinkingDisplayStyleChange = (newStyle) => {
+		onConfigChange({ ...config, thinkingDisplayStyle: newStyle });
+	};
+	const handleStatusChange = () => {
+		const currentIndex = statusOptions.indexOf(status);
+		const nextIndex = (currentIndex + 1) % statusOptions.length;
+		onStatusChange(statusOptions[nextIndex]);
+	};
+	return _jsxs("div", {
+		className:
+			"h-full p-6 bg-[var(--color-surface)] border-r border-[var(--color-border)] overflow-y-auto",
+		children: [
+			_jsx("h2", {
+				className: "text-2xl font-semibold mb-8 m-0 text-[var(--color-text)]",
+				children: "Design Configuration",
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "color-scheme",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Color Scheme",
+					}),
+					_jsxs(Select, {
+						value: config.colorScheme,
+						onValueChange: handleColorSchemeChange,
+						children: [
+							_jsx(SelectTrigger, {
+								id: "color-scheme",
+								className:
+									"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+								children: _jsx(SelectValue, {}),
+							}),
+							_jsxs(SelectContent, {
+								className: "bg-[var(--color-bg)] border-[var(--color-border)]",
+								children: [
+									_jsx(SelectItem, { value: "light", children: "Light" }),
+									_jsx(SelectItem, { value: "dark", children: "Dark" }),
+								],
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "accent-color",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Accent Color",
+					}),
+					_jsxs("div", {
+						className: "flex gap-2 items-center",
+						children: [
+							_jsx("input", {
+								type: "color",
+								id: "accent-color",
+								value: config.accentColor,
+								onChange: handleAccentColorChange,
+								className:
+									"w-[60px] h-10 border border-[var(--color-border)] rounded-md cursor-pointer bg-transparent",
+							}),
+							_jsx(Input, {
+								type: "text",
+								value: config.accentColor,
+								onChange: handleAccentColorChange,
+								pattern: "^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$",
+								className:
+									"flex-1 bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "typography",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Typography",
+					}),
+					_jsxs(Select, {
+						value: config.typography,
+						onValueChange: handleTypographyChange,
+						children: [
+							_jsx(SelectTrigger, {
+								id: "typography",
+								className:
+									"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+								children: _jsx(SelectValue, {}),
+							}),
+							_jsx(SelectContent, {
+								className: "bg-[var(--color-bg)] border-[var(--color-border)]",
+								children: fontOptions.map((font) =>
+									_jsx(SelectItem, { value: font, children: font }, font),
+								),
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "font-size",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Font Size (px)",
+					}),
+					_jsx(Input, {
+						type: "number",
+						id: "font-size",
+						value: config.fontSize,
+						onChange: handleFontSizeChange,
+						min: "8",
+						max: "32",
+						className:
+							"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "thinking-display-style",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Thinking Display Style",
+					}),
+					_jsxs(Select, {
+						value: config.thinkingDisplayStyle || "collapsible",
+						onValueChange: handleThinkingDisplayStyleChange,
+						children: [
+							_jsx(SelectTrigger, {
+								id: "thinking-display-style",
+								className:
+									"w-full bg-[var(--color-bg)] text-[var(--color-text)] border-[var(--color-border)] focus:border-[var(--color-accent)]",
+								children: _jsx(SelectValue, {}),
+							}),
+							_jsxs(SelectContent, {
+								className: "bg-[var(--color-bg)] border-[var(--color-border)]",
+								children: [
+									_jsx(SelectItem, {
+										value: "collapsible",
+										children: "Collapsible Section",
+									}),
+									_jsx(SelectItem, { value: "inline", children: "Inline" }),
+								],
+							}),
+						],
+					}),
+				],
+			}),
+			_jsxs("div", {
+				className: "mb-6",
+				children: [
+					_jsx(Label, {
+						htmlFor: "status-test",
+						className: "mb-2 text-[var(--color-text)]",
+						children: "Chat Status",
+					}),
+					_jsxs("button", {
+						onClick: handleStatusChange,
+						className:
+							"w-full px-4 py-2 rounded-lg bg-[var(--color-accent)] text-white font-medium hover:opacity-90 transition-opacity text-[var(--font-size)] font-[var(--font-family)]",
+						children: ["Change Status: ", status],
+					}),
+				],
+			}),
+		],
+	});
 }
-//# sourceMappingURL=ConfigPanel.js.map
+//# sourceMappingURL=ConfigPanel.js.map

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

@@ -3,18 +3,21 @@ 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>
+>;