@townco/ui 0.1.6 → 0.1.8

package/dist/gui/components/ChatInput.js

@@ -1,207 +1,220 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
+import { Mic, Paperclip, SquareSlash } from "lucide-react";
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useChatInput as useCoreChatInput } from "../../core/hooks/use-chat-input.js";
 import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./Button.js";
-
+import { ChatInputCommandMenu as ChatInputCommandMenuComponent, } from "./ChatInputCommandMenu.js";
 const ChatInputContext = React.createContext(undefined);
 const useChatInputContext = () => {
-	const context = React.useContext(ChatInputContext);
-	if (!context) {
-		throw new Error("ChatInput components must be used within ChatInput.Root");
-	}
-	return context;
+    const context = React.useContext(ChatInputContext);
+    if (!context) {
+        throw new Error("ChatInput components must be used within ChatInput.Root");
+    }
+    return context;
 };
-const ChatInputRoot = React.forwardRef(
-	(
-		{
-			client,
-			value: valueProp,
-			onChange: onChangeProp,
-			onSubmit: onSubmitProp,
-			disabled = false,
-			isSubmitting: isSubmittingProp,
-			submitOnEnter = true,
-			className,
-			children,
-			...props
-		},
-		ref,
-	) => {
-		const textareaRef = React.useRef(null);
-		// Always call hooks unconditionally (React rules)
-		const hookData = useCoreChatInput(client ?? null);
-		const storeIsStreaming = useChatStore((state) => state.isStreaming);
-		// Choose data source based on whether client is provided
-		const value = hookData ? hookData.value : valueProp || "";
-		const onChange = hookData ? hookData.onChange : onChangeProp || (() => {});
-		const onSubmit = hookData
-			? hookData.onSubmit
-			: onSubmitProp || (async () => {});
-		const isSubmitting = hookData
-			? hookData.isSubmitting || storeIsStreaming
-			: isSubmittingProp || false;
-		const handleSubmit = async (e) => {
-			e.preventDefault();
-			if (value.trim() && !isSubmitting && !disabled) {
-				await onSubmit();
-				// Restore focus to textarea after submit
-				setTimeout(() => {
-					textareaRef.current?.focus();
-				}, 0);
-			}
-		};
-		// Expose textarea ref to children via context
-		React.useEffect(() => {
-			const textarea = document.querySelector('textarea[name="chat-input"]');
-			if (textarea && textareaRef.current !== textarea) {
-				textareaRef.current = textarea;
-			}
-		}, []);
-		// Reset textarea height when value becomes empty (after submit)
-		React.useEffect(() => {
-			if (!value && textareaRef.current) {
-				textareaRef.current.style.height = "auto";
-				textareaRef.current.style.overflowY = "hidden";
-			}
-		}, [value]);
-		return _jsx(ChatInputContext.Provider, {
-			value: {
-				value,
-				onChange,
-				onSubmit,
-				disabled,
-				isSubmitting,
-				submitOnEnter,
-			},
-			children: _jsx("form", {
-				ref: ref,
-				onSubmit: handleSubmit,
-				className: cn(
-					"w-full divide-y overflow-hidden rounded-xl border bg-background shadow-sm",
-					className,
-				),
-				...props,
-				children: children,
-			}),
-		});
-	},
-);
+const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: onChangeProp, onSubmit: onSubmitProp, disabled = false, isSubmitting: isSubmittingProp, submitOnEnter = true, className, children, ...props }, ref) => {
+    const textareaRef = React.useRef(null);
+    // Always call hooks unconditionally (React rules)
+    const hookData = useCoreChatInput(client ?? null);
+    const storeIsStreaming = useChatStore((state) => state.isStreaming);
+    // Choose data source based on whether client is provided
+    const value = hookData ? hookData.value : valueProp || "";
+    const onChange = hookData ? hookData.onChange : onChangeProp || (() => { });
+    const onSubmit = hookData
+        ? hookData.onSubmit
+        : onSubmitProp || (async () => { });
+    const isSubmitting = hookData
+        ? hookData.isSubmitting || storeIsStreaming
+        : isSubmittingProp || false;
+    // Command menu state
+    const [showCommandMenu, setShowCommandMenu] = React.useState(false);
+    const [commandMenuQuery, setCommandMenuQuery] = React.useState("");
+    const [selectedMenuIndex, setSelectedMenuIndex] = React.useState(0);
+    const [menuItemCount, setMenuItemCount] = React.useState(0);
+    const [triggerCounter, setTriggerCounter] = React.useState(0);
+    const triggerMenuSelect = React.useCallback(() => {
+        setTriggerCounter((prev) => prev + 1);
+    }, []);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (value.trim() && !isSubmitting && !disabled) {
+            await onSubmit();
+            // Restore focus to textarea after submit
+            setTimeout(() => {
+                textareaRef.current?.focus();
+            }, 0);
+        }
+    };
+    // Expose textarea ref to children via context
+    React.useEffect(() => {
+        const textarea = document.querySelector('textarea[name="chat-input"]');
+        if (textarea && textareaRef.current !== textarea) {
+            textareaRef.current = textarea;
+        }
+    }, []);
+    // Reset textarea height when value becomes empty (after submit)
+    React.useEffect(() => {
+        if (!value && textareaRef.current) {
+            textareaRef.current.style.height = "auto";
+            textareaRef.current.style.overflowY = "hidden";
+        }
+    }, [value]);
+    return (_jsx(ChatInputContext.Provider, { value: {
+            value,
+            onChange,
+            onSubmit,
+            disabled,
+            isSubmitting,
+            submitOnEnter,
+            showCommandMenu,
+            setShowCommandMenu,
+            commandMenuQuery,
+            setCommandMenuQuery,
+            selectedMenuIndex,
+            setSelectedMenuIndex,
+            menuItemCount,
+            setMenuItemCount,
+            triggerMenuSelect,
+            triggerCounter,
+        }, children: _jsx("form", { ref: ref, onSubmit: handleSubmit, className: cn("relative w-full divide-y rounded-xl border bg-background shadow-md", className), ...props, children: children }) }));
+});
 ChatInputRoot.displayName = "ChatInput.Root";
-const ChatInputField = React.forwardRef(
-	({ asChild = false, className, onKeyDown, children, ...props }, ref) => {
-		const { value, onChange, onSubmit, disabled, isSubmitting, submitOnEnter } =
-			useChatInputContext();
-		const textareaRef = React.useRef(null);
-		const handleRef = React.useCallback(
-			(node) => {
-				textareaRef.current = node;
-				if (typeof ref === "function") {
-					ref(node);
-				} else if (ref) {
-					ref.current = node;
-				}
-			},
-			[ref],
-		);
-		const handleKeyDown = (e) => {
-			// Handle Enter without Shift - only submit if not already submitting
-			if (submitOnEnter && e.key === "Enter" && !e.shiftKey) {
-				// Only prevent default and submit if conditions are met
-				if (value.trim() && !isSubmitting && !disabled) {
-					e.preventDefault();
-					onSubmit();
-				} else if (isSubmitting || disabled) {
-					// Block Enter when submitting or disabled - don't add newline
-					e.preventDefault();
-				}
-			}
-			onKeyDown?.(e);
-		};
-		const handleChange = (e) => {
-			onChange(e.target.value);
-			// Auto-resize
-			const textarea = textareaRef.current;
-			if (!textarea) return;
-			textarea.style.height = "auto";
-			const newHeight = Math.min(textarea.scrollHeight, 164);
-			textarea.style.height = `${newHeight}px`;
-			if (textarea.scrollHeight > 164) {
-				textarea.style.overflowY = "auto";
-			} else {
-				textarea.style.overflowY = "hidden";
-			}
-		};
-		const fieldProps = {
-			ref: handleRef,
-			name: "chat-input",
-			value,
-			onChange: handleChange,
-			onKeyDown: handleKeyDown,
-			disabled: disabled,
-			...props,
-		};
-		if (asChild && React.isValidElement(children)) {
-			return React.cloneElement(children, fieldProps);
-		}
-		return _jsx("textarea", {
-			...fieldProps,
-			className: cn(
-				"w-full resize-none rounded-none border-none p-3 shadow-none",
-				"outline-none ring-0 field-sizing-content max-h-[6lh]",
-				"bg-transparent dark:bg-transparent focus-visible:ring-0",
-				"text-sm placeholder:text-muted-foreground",
-				"disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			),
-		});
-	},
-);
+const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown, children, ...props }, ref) => {
+    const { value, onChange, onSubmit, disabled, isSubmitting, submitOnEnter, showCommandMenu, setShowCommandMenu, setCommandMenuQuery, setSelectedMenuIndex, menuItemCount, triggerMenuSelect, } = useChatInputContext();
+    const textareaRef = React.useRef(null);
+    const handleRef = React.useCallback((node) => {
+        textareaRef.current = node;
+        if (typeof ref === "function") {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const handleKeyDown = (e) => {
+        // Handle arrow keys and Enter when command menu is open
+        if (showCommandMenu && menuItemCount > 0) {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setSelectedMenuIndex((prev) => (prev + 1) % menuItemCount);
+                return;
+            }
+            else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setSelectedMenuIndex((prev) => (prev - 1 + menuItemCount) % menuItemCount);
+                return;
+            }
+            else if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                triggerMenuSelect();
+                return;
+            }
+            else if (e.key === "Escape") {
+                e.preventDefault();
+                setShowCommandMenu(false);
+                setCommandMenuQuery("");
+                return;
+            }
+        }
+        // Handle Enter without Shift - only submit if not already submitting
+        if (submitOnEnter && e.key === "Enter" && !e.shiftKey) {
+            // Only prevent default and submit if conditions are met
+            if (value.trim() && !isSubmitting && !disabled) {
+                e.preventDefault();
+                onSubmit();
+            }
+            else if (isSubmitting || disabled) {
+                // Block Enter when submitting or disabled - don't add newline
+                e.preventDefault();
+            }
+        }
+        onKeyDown?.(e);
+    };
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        onChange(newValue);
+        // Check if user typed "/" at the start to trigger command menu
+        if (newValue.startsWith("/") && !newValue.includes("\n")) {
+            setShowCommandMenu(true);
+            // Extract search query (everything after "/")
+            const query = newValue.slice(1);
+            setCommandMenuQuery(query);
+        }
+        else {
+            setShowCommandMenu(false);
+            setCommandMenuQuery("");
+        }
+        // Auto-resize
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        textarea.style.height = "auto";
+        const newHeight = Math.min(textarea.scrollHeight, 164);
+        textarea.style.height = `${newHeight}px`;
+        if (textarea.scrollHeight > 164) {
+            textarea.style.overflowY = "auto";
+        }
+        else {
+            textarea.style.overflowY = "hidden";
+        }
+    };
+    const fieldProps = {
+        ref: handleRef,
+        name: "chat-input",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        disabled: disabled,
+        ...props,
+    };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, fieldProps);
+    }
+    return (_jsx("textarea", { ...fieldProps, className: cn("w-full resize-none rounded-none border-none p-4 shadow-none", "outline-none ring-0 field-sizing-content max-h-[6lh]", "bg-transparent dark:bg-transparent focus-visible:ring-0", "text-sm placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }));
+});
 ChatInputField.displayName = "ChatInput.Field";
-const ChatInputSubmit = React.forwardRef(
-	(
-		{ asChild = false, className, disabled: disabledProp, children, ...props },
-		ref,
-	) => {
-		const { value, disabled, isSubmitting } = useChatInputContext();
-		const isDisabled =
-			disabledProp || disabled || isSubmitting || !value.trim();
-		const Comp = asChild ? Slot : Button;
-		return _jsx(Comp, {
-			ref: ref,
-			type: "submit",
-			disabled: isDisabled,
-			size: "icon",
-			className: cn(
-				!asChild &&
-					"gap-1.5 rounded-lg bg-transparent text-foreground hover:bg-transparent",
-				className,
-			),
-			...props,
-			children: children,
-		});
-	},
-);
+const ChatInputSubmit = React.forwardRef(({ asChild = false, className, disabled: disabledProp, children, ...props }, ref) => {
+    const { value, disabled, isSubmitting } = useChatInputContext();
+    const isDisabled = disabledProp || disabled || isSubmitting || !value.trim();
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "submit", disabled: isDisabled, variant: !asChild ? "default" : undefined, size: "icon", className: cn(!asChild && "gap-1.5 rounded-full", className), ...props, children: children }));
+});
 ChatInputSubmit.displayName = "ChatInput.Submit";
-const ChatInputToolbar = React.forwardRef(
-	({ className, children, ...props }, ref) => {
-		return _jsx("div", {
-			ref: ref,
-			className: cn("flex items-center justify-between p-1", className),
-			...props,
-			children: children,
-		});
-	},
-);
+const ChatInputToolbar = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex items-center justify-between p-2", className), ...props, children: children }));
+});
 ChatInputToolbar.displayName = "ChatInput.Toolbar";
-/* -------------------------------------------------------------------------------------------------
- * Exports
- * -----------------------------------------------------------------------------------------------*/
-export {
-	ChatInputRoot as Root,
-	ChatInputField as Field,
-	ChatInputSubmit as Submit,
-	ChatInputToolbar as Toolbar,
-};
+const ChatInputActions = React.forwardRef(({ asChild = false, className, children, onClick, ...props }, ref) => {
+    const { value, onChange, setShowCommandMenu, setCommandMenuQuery } = useChatInputContext();
+    const handleClick = (e) => {
+        // Trigger command menu by setting "/" in the input
+        if (!value.startsWith("/")) {
+            onChange("/");
+            setShowCommandMenu(true);
+            setCommandMenuQuery("");
+        }
+        onClick?.(e);
+    };
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), onClick: handleClick, ...props, children: children || _jsx(SquareSlash, { className: "size-4" }) }));
+});
+ChatInputActions.displayName = "ChatInput.Actions";
+const ChatInputAttachment = React.forwardRef(({ asChild = false, className, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), ...props, children: children || _jsx(Paperclip, { className: "size-4" }) }));
+});
+ChatInputAttachment.displayName = "ChatInput.Attachment";
+const ChatInputVoiceInput = React.forwardRef(({ asChild = false, className, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, type: "button", variant: "ghost", size: "icon", className: cn("rounded-full", className), ...props, children: children || _jsx(Mic, { className: "size-4" }) }));
+});
+ChatInputVoiceInput.displayName = "ChatInput.VoiceInput";
+const ChatInputCommandMenu = React.forwardRef(({ commands = [], className, onChange: _, ...props }, ref) => {
+    const { showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, } = useChatInputContext();
+    return (_jsx(ChatInputCommandMenuComponent, { ref: ref, commands: commands, showCommandMenu: showCommandMenu, commandMenuQuery: commandMenuQuery, selectedMenuIndex: selectedMenuIndex, setSelectedMenuIndex: setSelectedMenuIndex, setMenuItemCount: setMenuItemCount, triggerCounter: triggerCounter, onChange: onChange, className: className, ...props }));
+});
+ChatInputCommandMenu.displayName = "ChatInput.CommandMenu";
+export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, ChatInputActions as Actions, ChatInputAttachment as Attachment, ChatInputVoiceInput as VoiceInput, ChatInputCommandMenu as CommandMenu, };

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface CommandMenuItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    category?: string;
+    onSelect: () => void;
+}
+export interface ChatInputCommandMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    commands?: CommandMenuItem[];
+    showCommandMenu: boolean;
+    commandMenuQuery: string;
+    selectedMenuIndex: number;
+    setSelectedMenuIndex: (index: number) => void;
+    setMenuItemCount: (count: number) => void;
+    triggerCounter: number;
+    onChange: (value: string) => void;
+}
+export declare const ChatInputCommandMenu: React.ForwardRefExoticComponent<ChatInputCommandMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/gui/components/ChatInputCommandMenu.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+/* -------------------------------------------------------------------------------------------------
+ * ChatInputCommandMenu
+ * -----------------------------------------------------------------------------------------------*/
+export const ChatInputCommandMenu = React.forwardRef(({ commands = [], showCommandMenu, commandMenuQuery, selectedMenuIndex, setSelectedMenuIndex, setMenuItemCount, triggerCounter, onChange, className, ...props }, ref) => {
+    // Fuzzy search implementation
+    const fuzzyMatch = React.useCallback((text, query) => {
+        const lowerText = text.toLowerCase();
+        const lowerQuery = query.toLowerCase();
+        if (!query)
+            return 1; // Show all when no query
+        if (lowerText.includes(lowerQuery)) {
+            // Exact substring match gets high score
+            return 1 - lowerQuery.length / lowerText.length;
+        }
+        // Fuzzy matching - check if all query chars appear in order
+        let queryIndex = 0;
+        for (let i = 0; i < lowerText.length && queryIndex < lowerQuery.length; i++) {
+            if (lowerText[i] === lowerQuery[queryIndex]) {
+                queryIndex++;
+            }
+        }
+        if (queryIndex === lowerQuery.length) {
+            // All chars found, score based on how spread out they are
+            return 0.5 - queryIndex / lowerText.length;
+        }
+        return 0; // No match
+    }, []);
+    // Filter and sort commands by relevance
+    const filteredCommands = React.useMemo(() => {
+        return commands
+            .map((cmd) => ({
+            ...cmd,
+            score: Math.max(fuzzyMatch(cmd.label, commandMenuQuery), cmd.description ? fuzzyMatch(cmd.description, commandMenuQuery) : 0),
+        }))
+            .filter((cmd) => cmd.score > 0)
+            .sort((a, b) => b.score - a.score);
+    }, [commands, commandMenuQuery, fuzzyMatch]);
+    // Update menu item count
+    React.useEffect(() => {
+        setMenuItemCount(filteredCommands.length);
+    }, [filteredCommands.length, setMenuItemCount]);
+    // Reset selected index when filtered results change
+    React.useEffect(() => {
+        setSelectedMenuIndex(0);
+    }, [setSelectedMenuIndex]);
+    // Handle selection when triggered
+    React.useEffect(() => {
+        if (triggerCounter > 0 && filteredCommands[selectedMenuIndex]) {
+            filteredCommands[selectedMenuIndex].onSelect();
+            // Clear the input after selection
+            onChange("");
+        }
+    }, [triggerCounter, filteredCommands, selectedMenuIndex, onChange]);
+    if (!showCommandMenu || filteredCommands.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { ref: ref, className: cn("absolute bottom-full left-0 z-50 mb-2 w-full max-w-md", "rounded-md border border-border bg-card p-2 shadow-lg", className), ...props, children: [_jsx("div", { className: "text-xs font-semibold text-muted-foreground px-2 py-1", children: "Commands" }), _jsx("div", { className: "max-h-64 overflow-y-auto", children: filteredCommands.map((command, index) => (_jsxs("button", { type: "button", onClick: () => command.onSelect(), className: cn("w-full rounded-sm px-2 py-2 text-left text-sm transition-colors", "flex items-start gap-2", "hover:bg-muted", index === selectedMenuIndex && "bg-muted"), children: [command.icon && (_jsx("span", { className: "shrink-0 mt-0.5", children: command.icon })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium", children: command.label }), command.description && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: command.description }))] })] }, command.id))) })] }));
+});
+ChatInputCommandMenu.displayName = "ChatInputCommandMenu";

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

@@ -2,81 +2,51 @@ import * as React from "react";
 type PanelSize = "hidden" | "small" | "large";
 type PanelTabType = "todo" | "files" | "database";
 interface ChatLayoutContextValue {
-	sidebarOpen: boolean;
-	setSidebarOpen: (open: boolean) => void;
-	panelSize: PanelSize;
-	setPanelSize: (size: PanelSize) => void;
-	activeTab: PanelTabType;
-	setActiveTab: (tab: PanelTabType) => void;
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    panelSize: PanelSize;
+    setPanelSize: (size: PanelSize) => void;
+    activeTab: PanelTabType;
+    setActiveTab: (tab: PanelTabType) => void;
 }
 declare const useChatLayoutContext: () => ChatLayoutContextValue;
-export interface ChatLayoutRootProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/** Initial sidebar open state */
-	defaultSidebarOpen?: boolean;
-	/** Initial panel size state */
-	defaultPanelSize?: PanelSize;
-	/** Initial active tab */
-	defaultActiveTab?: PanelTabType;
+export interface ChatLayoutRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Initial sidebar open state */
+    defaultSidebarOpen?: boolean;
+    /** Initial panel size state */
+    defaultPanelSize?: PanelSize;
+    /** Initial active tab */
+    defaultActiveTab?: PanelTabType;
 }
-declare const ChatLayoutRoot: React.ForwardRefExoticComponent<
-	ChatLayoutRootProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutHeaderProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-declare const ChatLayoutHeader: React.ForwardRefExoticComponent<
-	ChatLayoutHeaderProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutMainProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-declare const ChatLayoutMain: React.ForwardRefExoticComponent<
-	ChatLayoutMainProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutBodyProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/** Whether to show toaster */
-	showToaster?: boolean;
+declare const ChatLayoutRoot: React.ForwardRefExoticComponent<ChatLayoutRootProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-declare const ChatLayoutBody: React.ForwardRefExoticComponent<
-	ChatLayoutBodyProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutMessagesProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/** Callback when scroll position changes */
-	onScrollChange?: (isAtBottom: boolean) => void;
-	/** Whether to show scroll to bottom button */
-	showScrollToBottom?: boolean;
+declare const ChatLayoutHeader: React.ForwardRefExoticComponent<ChatLayoutHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutMainProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-declare const ChatLayoutMessages: React.ForwardRefExoticComponent<
-	ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutFooterProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-declare const ChatLayoutFooter: React.ForwardRefExoticComponent<
-	ChatLayoutFooterProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutSidebarProps
-	extends React.HTMLAttributes<HTMLDivElement> {}
-declare const ChatLayoutSidebar: React.ForwardRefExoticComponent<
-	ChatLayoutSidebarProps & React.RefAttributes<HTMLDivElement>
->;
-export interface ChatLayoutAsideProps
-	extends React.HTMLAttributes<HTMLDivElement> {
-	/** Show panel on these breakpoints (default: lg and above) */
-	breakpoint?: "md" | "lg" | "xl" | "2xl";
+declare const ChatLayoutMain: React.ForwardRefExoticComponent<ChatLayoutMainProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Whether to show toaster */
+    showToaster?: boolean;
 }
-declare const ChatLayoutAside: React.ForwardRefExoticComponent<
-	ChatLayoutAsideProps & React.RefAttributes<HTMLDivElement>
->;
-export {
-	ChatLayoutRoot as Root,
-	ChatLayoutHeader as Header,
-	ChatLayoutMain as Main,
-	ChatLayoutBody as Body,
-	ChatLayoutMessages as Messages,
-	ChatLayoutFooter as Footer,
-	ChatLayoutSidebar as Sidebar,
-	ChatLayoutAside as Aside,
-	useChatLayoutContext,
-};
+declare const ChatLayoutBody: React.ForwardRefExoticComponent<ChatLayoutBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutMessagesProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Callback when scroll position changes */
+    onScrollChange?: (isAtBottom: boolean) => void;
+    /** Whether to show scroll to bottom button */
+    showScrollToBottom?: boolean;
+}
+declare const ChatLayoutMessages: React.ForwardRefExoticComponent<ChatLayoutMessagesProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutFooter: React.ForwardRefExoticComponent<ChatLayoutFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const ChatLayoutSidebar: React.ForwardRefExoticComponent<ChatLayoutSidebarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChatLayoutAsideProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Show panel on these breakpoints (default: lg and above) */
+    breakpoint?: "md" | "lg" | "xl" | "2xl";
+}
+declare const ChatLayoutAside: React.ForwardRefExoticComponent<ChatLayoutAsideProps & React.RefAttributes<HTMLDivElement>>;
+export { ChatLayoutRoot as Root, ChatLayoutHeader as Header, ChatLayoutMain as Main, ChatLayoutBody as Body, ChatLayoutMessages as Messages, ChatLayoutFooter as Footer, ChatLayoutSidebar as Sidebar, ChatLayoutAside as Aside, useChatLayoutContext, };
 export type { PanelSize, PanelTabType };