@townco/ui 0.1.0 → 0.1.3

package/dist/gui/components/ChatInput.js

@@ -1,137 +1,207 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 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";
+
 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;
+		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,
+			}),
+		});
+	},
+);
 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 } =
+			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,
+			),
+		});
+	},
+);
 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,
+			size: "icon",
+			className: cn(
+				!asChild &&
+					"gap-1.5 rounded-lg bg-transparent text-foreground hover:bg-transparent",
+				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-1", className),
+			...props,
+			children: children,
+		});
+	},
+);
 ChatInputToolbar.displayName = "ChatInput.Toolbar";
 /* -------------------------------------------------------------------------------------------------
  * Exports
  * -----------------------------------------------------------------------------------------------*/
-export { ChatInputRoot as Root, ChatInputField as Field, ChatInputSubmit as Submit, ChatInputToolbar as Toolbar, };
+export {
+	ChatInputRoot as Root,
+	ChatInputField as Field,
+	ChatInputSubmit as Submit,
+	ChatInputToolbar as Toolbar,
+};

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

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

package/dist/gui/components/ChatInterface.js

@@ -1,50 +1,51 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
 import { ChevronDown } from "lucide-react";
-import { MessageList } from "./MessageList.js";
-import { ChatStatus } from "./ChatStatus.js";
+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 { ChatInput } from "./ChatInput.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",
-    },
+	{
+		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:
+	{
+		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.
@@ -79,54 +80,125 @@ You can make text **bold** or *italic*.
 |----------|----------|
 | 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,
-    },
+		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..." }) })] }));
+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
+//# sourceMappingURL=ChatInterface.js.map