@townco/ui 0.1.7 → 0.1.9

package/dist/gui/components/ChatInput.js

@@ -1,10 +1,12 @@
 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 { 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);
@@ -27,6 +29,15 @@ const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: on
     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) {
@@ -58,11 +69,21 @@ const ChatInputRoot = React.forwardRef(({ client, value: valueProp, onChange: on
             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 }) }));
+            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 { 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;
@@ -74,6 +95,30 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
         }
     }, [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
@@ -89,7 +134,19 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
         onKeyDown?.(e);
     };
     const handleChange = (e) => {
-        onChange(e.target.value);
+        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)
@@ -116,22 +173,48 @@ const ChatInputField = React.forwardRef(({ asChild = false, className, onKeyDown
     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) }));
+    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 }));
+    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 }));
+    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/ChatInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.js","sourceRoot":"","sources":["../../../src/gui/components/ChatInput.tsx"],"names":[],"mappings":"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"}

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/ChatInterface.d.ts

@@ -0,0 +1,12 @@
+import { type DisplayMessage } from "./MessageList.js";
+interface ChatInterfaceProps {
+	initialMessages?: DisplayMessage[];
+	thinkingDisplayStyle?: "collapsible" | "inline";
+	status?: string;
+}
+export declare function ChatInterface({
+	initialMessages,
+	thinkingDisplayStyle,
+	status,
+}: ChatInterfaceProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChatInterface.d.ts.map

package/dist/gui/components/ChatInterface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInterface.d.ts","sourceRoot":"","sources":["../../../src/gui/components/ChatInterface.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQpE,UAAU,kBAAkB;IAC1B,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,oBAAoB,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2FD,wBAAgB,aAAa,CAAC,EAC5B,eAAiC,EACjC,oBAAoC,EACpC,MAAoB,GACrB,EAAE,kBAAkB,2CA+FpB"}

package/dist/gui/components/ChatInterface.js

@@ -0,0 +1,204 @@
+import { ChevronDown } from "lucide-react";
+import { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatInput } from "./ChatInput.js";
+import { ChatSecondaryPanel } from "./ChatSecondaryPanel.js";
+import { ChatStatus } from "./ChatStatus.js";
+import { HeightTransition } from "./HeightTransition.js";
+import { MessageList } from "./MessageList.js";
+
+const SAMPLE_TODOS = [
+	{
+		id: "1",
+		text: "Identify the last 25 Winter Olympics host countries",
+		status: "completed",
+	},
+	{
+		id: "2",
+		text: "For each host country, find the tallest mountain",
+		status: "in_progress",
+	},
+	{
+		id: "3",
+		text: "Gather key details for each mountain (name, elevation, location)",
+		status: "pending",
+	},
+	{
+		id: "4",
+		text: "Verify information using reliable sources (geographical databases, official records)",
+		status: "pending",
+	},
+	{
+		id: "5",
+		text: "Compile findings into a summary table or document",
+		status: "pending",
+	},
+];
+const SAMPLE_MESSAGES = [
+	{
+		id: "msg-1",
+		role: "user",
+		content: "Hello! Can you help me understand how to use markdown?",
+		timestamp: new Date().toISOString(),
+		isStreaming: false,
+	},
+	{
+		id: "msg-2",
+		role: "assistant",
+		content: `Sure! Markdown is a lightweight markup language. Here are some basics:
+
+## Headings
+Use \`#\` for headings. More \`#\` symbols make smaller headings.
+
+## Lists
+- Unordered lists use dashes
+- Or asterisks
+- Or plus signs
+
+1. Ordered lists
+2. Use numbers
+3. Like this
+
+## Code
+Inline code uses \`backticks\` and code blocks use triple backticks:
+
+\`\`\`javascript
+function hello() {
+  console.log("Hello world!");
+}
+\`\`\`
+
+## Links and emphasis
+[This is a link](https://example.com)
+
+You can make text **bold** or *italic*.
+
+> Blockquotes use the > character
+
+## Tables
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |`,
+		timestamp: new Date().toISOString(),
+		isStreaming: false,
+		metadata: {
+			thinking: "Let me provide a comprehensive overview of markdown syntax...",
+		},
+	},
+	{
+		id: "msg-3",
+		role: "user",
+		content: "That's really helpful, thank you!",
+		timestamp: new Date().toISOString(),
+		isStreaming: false,
+	},
+];
+export function ChatInterface({
+	initialMessages = SAMPLE_MESSAGES,
+	thinkingDisplayStyle = "collapsible",
+	status = "Connected",
+}) {
+	const [messages, setMessages] = useState(initialMessages);
+	const [currentStatus, setCurrentStatus] = useState(status);
+	const [config, setConfig] = useState(null);
+	const [isHeaderExpanded, setIsHeaderExpanded] = useState(false);
+	const [todos] = useState(SAMPLE_TODOS);
+	// Listen for config and status updates from parent window
+	useEffect(() => {
+		const handleMessage = (event) => {
+			if (event.data.type === "CONFIG_UPDATE") {
+				const newConfig = event.data.config;
+				setConfig(newConfig);
+				applyConfigToDocument(newConfig);
+			} else if (event.data.type === "STATUS_UPDATE") {
+				setCurrentStatus(event.data.status);
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		// Request config from parent on mount
+		if (window.parent !== window) {
+			window.parent.postMessage({ type: "REQUEST_CONFIG" }, "*");
+		}
+		return () => {
+			window.removeEventListener("message", handleMessage);
+		};
+	}, []);
+	const applyConfigToDocument = (cfg) => {
+		const root = document.documentElement;
+		root.setAttribute("data-theme", cfg.colorScheme);
+		root.style.setProperty("--color-accent", cfg.accentColor);
+		root.style.setProperty("--font-family", cfg.typography);
+		root.style.setProperty("--font-size", `${cfg.fontSize}px`);
+	};
+	return _jsxs("div", {
+		className:
+			"flex flex-col h-screen bg-[var(--color-bg)] text-[var(--color-text)]",
+		children: [
+			_jsxs("div", {
+				className:
+					"relative border-b border-[var(--color-border)] bg-[var(--color-surface)] z-10",
+				children: [
+					_jsxs("div", {
+						className: "flex items-center justify-between px-6 py-4",
+						children: [
+							_jsx("h1", {
+								className: "text-xl font-semibold m-0",
+								children: "Chat Interface",
+							}),
+							_jsxs("div", {
+								className: "flex items-center gap-3",
+								children: [
+									_jsx(ChatStatus, { children: currentStatus }),
+									_jsx("button", {
+										onClick: () => setIsHeaderExpanded(!isHeaderExpanded),
+										className:
+											"p-1 rounded hover:bg-[var(--color-bg)] transition-colors",
+										"aria-label": isHeaderExpanded
+											? "Collapse header"
+											: "Expand header",
+										children: _jsx(ChevronDown, {
+											className: `w-5 h-5 text-[var(--color-text)] transition-transform duration-200 ${isHeaderExpanded ? "rotate-180" : ""}`,
+										}),
+									}),
+								],
+							}),
+						],
+					}),
+					_jsx("div", {
+						className: "absolute top-full left-0 right-0 z-20",
+						children: _jsx(HeightTransition, {
+							children:
+								isHeaderExpanded &&
+								_jsx("div", {
+									className:
+										"bg-[var(--color-surface)] border-b border-[var(--color-border)] px-6 py-4 shadow-lg",
+									children: _jsx(ChatSecondaryPanel, { todos: todos }),
+								}),
+						}),
+					}),
+				],
+			}),
+			_jsx("div", {
+				className: "flex-1 overflow-y-auto py-4",
+				children: _jsx(MessageList, {
+					messages: messages,
+					thinkingDisplayStyle:
+						config?.thinkingDisplayStyle || thinkingDisplayStyle,
+				}),
+			}),
+			_jsx("div", {
+				className:
+					"border-t border-[var(--color-border)] px-6 py-4 bg-[var(--color-surface)]",
+				children: _jsx(ChatInput, {
+					value: "",
+					onChange: () => {},
+					onSubmit: () => {},
+					disabled: true,
+					placeholder: "Type a message...",
+				}),
+			}),
+		],
+	});
+}
+//# sourceMappingURL=ChatInterface.js.map

package/dist/gui/components/ChatInterface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInterface.js","sourceRoot":"","sources":["../../../src/gui/components/ChatInterface.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+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;
+}
+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;
+}
+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 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 };

package/dist/gui/components/ChatLayout.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils.js";
+import { Toaster } from "./Sonner.js";
+const ChatLayoutContext = React.createContext(undefined);
+const useChatLayoutContext = () => {
+    const context = React.useContext(ChatLayoutContext);
+    if (!context) {
+        throw new Error("ChatLayout components must be used within ChatLayout.Root");
+    }
+    return context;
+};
+const ChatLayoutRoot = React.forwardRef(({ defaultSidebarOpen = false, defaultPanelSize = "hidden", defaultActiveTab = "todo", className, children, ...props }, ref) => {
+    const [sidebarOpen, setSidebarOpen] = React.useState(defaultSidebarOpen);
+    const [panelSize, setPanelSize] = React.useState(defaultPanelSize);
+    const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+    return (_jsx(ChatLayoutContext.Provider, { value: {
+            sidebarOpen,
+            setSidebarOpen,
+            panelSize,
+            setPanelSize,
+            activeTab,
+            setActiveTab,
+        }, children: _jsx("div", { ref: ref, className: cn("flex h-screen flex-row bg-background text-foreground", className), ...props, children: children }) }));
+});
+ChatLayoutRoot.displayName = "ChatLayout.Root";
+const ChatLayoutHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("relative z-10 border-b border-border bg-card shrink-0", className), ...props, children: children }));
+});
+ChatLayoutHeader.displayName = "ChatLayout.Header";
+const ChatLayoutMain = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("flex flex-1 flex-col overflow-hidden", className), ...props, children: children }));
+});
+ChatLayoutMain.displayName = "ChatLayout.Main";
+const ChatLayoutBody = React.forwardRef(({ showToaster = true, className, children, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("relative flex flex-1 flex-col overflow-hidden", className), ...props, children: [children, showToaster && _jsx(Toaster, {})] }));
+});
+ChatLayoutBody.displayName = "ChatLayout.Body";
+const ChatLayoutMessages = React.forwardRef(({ className, children, onScrollChange, showScrollToBottom = true, ...props }, ref) => {
+    const [showScrollButton, setShowScrollButton] = React.useState(false);
+    const scrollContainerRef = React.useRef(null);
+    // Merge refs
+    React.useImperativeHandle(ref, () => scrollContainerRef.current);
+    // Check if user is at bottom of scroll
+    const checkScrollPosition = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+        const isAtBottom = distanceFromBottom < 100; // 100px threshold
+        setShowScrollButton(!isAtBottom && showScrollToBottom);
+        onScrollChange?.(isAtBottom);
+    }, [onScrollChange, showScrollToBottom]);
+    // Handle scroll events
+    const handleScroll = React.useCallback(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    // Scroll to bottom function
+    const scrollToBottom = React.useCallback(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        container.scrollTo({
+            top: container.scrollHeight,
+            behavior: "smooth",
+        });
+    }, []);
+    // Check scroll position on mount and when children change
+    React.useEffect(() => {
+        checkScrollPosition();
+    }, [checkScrollPosition]);
+    return (_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsx("div", { ref: scrollContainerRef, className: cn("h-full overflow-y-auto", className), onScroll: handleScroll, ...props, children: children }), showScrollButton && (_jsx("button", { type: "button", onClick: scrollToBottom, className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-10", "flex items-center justify-center p-2 rounded-full", "bg-card border border-border shadow-lg", "text-foreground", "hover:bg-accent hover:text-accent-foreground", "transition-all duration-200 ease-in-out", "animate-in fade-in slide-in-from-bottom-2"), "aria-label": "Scroll to bottom", children: _jsx(ArrowDown, { className: "h-4 w-4" }) }))] }));
+});
+ChatLayoutMessages.displayName = "ChatLayout.Messages";
+const ChatLayoutFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn("bg-linear-to-t from-background to-transparent px-4 pb-4", className), ...props, children: children }));
+});
+ChatLayoutFooter.displayName = "ChatLayout.Footer";
+const ChatLayoutSidebar = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { sidebarOpen } = useChatLayoutContext();
+    if (!sidebarOpen)
+        return null;
+    return (_jsx("div", { ref: ref, className: cn("border-r border-border bg-card w-64 overflow-y-auto", className), ...props, children: children }));
+});
+ChatLayoutSidebar.displayName = "ChatLayout.Sidebar";
+const ChatLayoutAside = React.forwardRef(({ breakpoint = "lg", className, children, ...props }, ref) => {
+    const { panelSize } = useChatLayoutContext();
+    // Hidden state - don't render
+    if (panelSize === "hidden")
+        return null;
+    return (_jsx("div", { ref: ref, className: cn(
+        // Hidden by default, visible at breakpoint
+        "hidden border-l border-border bg-card overflow-y-auto transition-all duration-300", 
+        // Breakpoint visibility
+        breakpoint === "md" && "md:block", breakpoint === "lg" && "lg:block", breakpoint === "xl" && "xl:block", breakpoint === "2xl" && "2xl:block", 
+        // Size variants
+        panelSize === "small" && "w-80", panelSize === "large" && "w-lg", className), ...props, children: children }));
+});
+ChatLayoutAside.displayName = "ChatLayout.Aside";
+/* -------------------------------------------------------------------------------------------------
+ * Exports
+ * -----------------------------------------------------------------------------------------------*/
+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, };