@townco/ui 0.1.6 → 0.1.8

package/dist/gui/components/Message.js

@@ -1,54 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
 /**
  * Message wrapper component inspired by shadcn.io/ai
  * Provides role-based layout and styling for chat messages
  */
 const messageVariants = cva("flex animate-fadeIn", {
-	variants: {
-		role: {
-			user: "max-w-[80%] self-end ml-auto",
-			assistant: "self-start mr-auto",
-			system: "self-start mr-auto max-w-full",
-		},
-		layout: {
-			default: "",
-			full: "max-w-full",
-			compact: "max-w-[90%]",
-		},
-	},
-	defaultVariants: {
-		role: "assistant",
-		layout: "default",
-	},
+    variants: {
+        role: {
+            user: "max-w-[80%] self-end ml-auto mr-2",
+            assistant: "self-start mr-auto",
+            system: "self-start mr-auto max-w-full",
+        },
+        layout: {
+            default: "",
+            full: "max-w-full",
+            compact: "max-w-[90%]",
+        },
+    },
+    defaultVariants: {
+        role: "assistant",
+        layout: "default",
+    },
+});
+export const Message = React.forwardRef(({ message, role: roleProp, layout, className, children, messageId: messageIdProp, autoScroll, isLastMessage = false, ...props }, ref) => {
+    // Extract role and messageId from message if provided
+    const role = message ? message.role : roleProp || "assistant";
+    const messageId = message ? message.id : messageIdProp;
+    const messageRef = React.useRef(null);
+    const [minHeight, setMinHeight] = React.useState(undefined);
+    // Merge refs
+    React.useImperativeHandle(ref, () => messageRef.current);
+    // Calculate dynamic min-height for last assistant message following a user message
+    React.useEffect(() => {
+        if (!isLastMessage || role !== "assistant") {
+            setMinHeight(undefined);
+            return;
+        }
+        const calculateMinHeight = () => {
+            const messageElement = messageRef.current;
+            if (!messageElement)
+                return;
+            // Find the ChatLayout.Messages container (scrollable parent)
+            let scrollContainer = messageElement.parentElement;
+            while (scrollContainer &&
+                !scrollContainer.classList.contains("overflow-y-auto")) {
+                scrollContainer = scrollContainer.parentElement;
+            }
+            if (!scrollContainer)
+                return;
+            // Find the previous user message
+            const previousSibling = messageElement.previousElementSibling;
+            if (!previousSibling ||
+                previousSibling.getAttribute("aria-label") !== "user message") {
+                setMinHeight(undefined);
+                return;
+            }
+            // Calculate: containerHeight - previousUserMessageHeight - spacing
+            const containerHeight = scrollContainer.clientHeight;
+            const previousMessageHeight = previousSibling.offsetHeight;
+            const spacing = 32; // gap-4 = 16px
+            // Min height = container height - user message height - spacing
+            // This ensures the user message can scroll to the top
+            const calculatedMinHeight = Math.max(0, containerHeight - previousMessageHeight - spacing);
+            setMinHeight(calculatedMinHeight);
+        };
+        // Calculate on mount and recalculate on resize
+        calculateMinHeight();
+        const resizeObserver = new ResizeObserver(calculateMinHeight);
+        // Observe the message element and its parent container
+        if (messageRef.current) {
+            resizeObserver.observe(messageRef.current);
+            let scrollContainer = messageRef.current.parentElement;
+            while (scrollContainer &&
+                !scrollContainer.classList.contains("overflow-y-auto")) {
+                scrollContainer = scrollContainer.parentElement;
+            }
+            if (scrollContainer) {
+                resizeObserver.observe(scrollContainer);
+            }
+        }
+        return () => resizeObserver.disconnect();
+    }, [isLastMessage, role]);
+    // Auto-scroll for user messages when they first appear
+    React.useEffect(() => {
+        // Default to auto-scroll for user messages unless explicitly disabled
+        const shouldAutoScroll = autoScroll !== undefined ? autoScroll : role === "user";
+        if (shouldAutoScroll && messageRef.current) {
+            // Small delay to ensure the message is fully rendered
+            const timeoutId = setTimeout(() => {
+                messageRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "start",
+                    inline: "nearest",
+                });
+            }, 50);
+            return () => clearTimeout(timeoutId);
+        }
+        return undefined;
+    }, [role, autoScroll]);
+    return (_jsx("article", { ref: messageRef, "aria-label": `${role} message`, "data-message-id": messageId, className: cn(messageVariants({ role, layout }), className), style: {
+            minHeight: minHeight !== undefined ? `${minHeight}px` : undefined,
+        }, ...props, children: children }));
 });
-export const Message = React.forwardRef(
-	(
-		{
-			message,
-			role: roleProp,
-			layout,
-			className,
-			children,
-			messageId: messageIdProp,
-			...props
-		},
-		ref,
-	) => {
-		// Extract role and messageId from message if provided
-		const role = message ? message.role : roleProp || "assistant";
-		const messageId = message ? message.id : messageIdProp;
-		return _jsx("article", {
-			ref: ref,
-			"aria-label": `${role} message`,
-			"data-message-id": messageId,
-			className: cn(messageVariants({ role, layout }), className),
-			...props,
-			children: children,
-		});
-	},
-);
 Message.displayName = "Message";

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

@@ -1,33 +1,26 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import type { DisplayMessage } from "./MessageList.js";
-declare const messageContentVariants: (
-	props?:
-		| ({
-				role?: "user" | "assistant" | "system" | null | undefined;
-				variant?: "default" | "outline" | "ghost" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface MessageContentProps
-	extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
-		VariantProps<typeof messageContentVariants> {
-	/** Message role - determines styling */
-	role?: "user" | "assistant" | "system";
-	/** Visual variant */
-	variant?: "default" | "outline" | "ghost";
-	/** Whether the message is currently streaming */
-	isStreaming?: boolean;
-	/**
-	 * Message object for smart rendering (optional)
-	 * When provided, automatically renders thinking, waiting, and content
-	 */
-	message?: DisplayMessage;
-	/** Display style for thinking/reasoning blocks (when using smart rendering) */
-	thinkingDisplayStyle?: "collapsible" | "inline";
-	/** Custom content (overrides smart rendering) */
-	children?: React.ReactNode;
+declare const messageContentVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MessageContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof messageContentVariants> {
+    /** Message role - determines styling */
+    role?: "user" | "assistant" | "system";
+    /** Visual variant */
+    variant?: "default" | "outline" | "ghost";
+    /** Whether the message is currently streaming */
+    isStreaming?: boolean;
+    /**
+     * Message object for smart rendering (optional)
+     * When provided, automatically renders thinking, waiting, and content
+     */
+    message?: DisplayMessage;
+    /** Display style for thinking/reasoning blocks (when using smart rendering) */
+    thinkingDisplayStyle?: "collapsible" | "inline";
+    /** Custom content (overrides smart rendering) */
+    children?: React.ReactNode;
 }
-export declare const MessageContent: React.ForwardRefExoticComponent<
-	MessageContentProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const MessageContent: React.ForwardRefExoticComponent<MessageContentProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/gui/components/MessageContent.js

@@ -1,16 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Loader2Icon } from "lucide-react";
 import * as React from "react";
-import {
-	Fragment as _Fragment,
-	jsx as _jsx,
-	jsxs as _jsxs,
-} from "react/jsx-runtime";
 import { useChatStore } from "../../core/store/chat-store.js";
 import { cn } from "../lib/utils.js";
 import { Reasoning } from "./Reasoning.js";
 import { Response } from "./Response.js";
-
 /**
  * MessageContent component inspired by shadcn.io/ai
  * Provides the content container with role-based styling
@@ -18,159 +13,92 @@ import { Response } from "./Response.js";
  */
 // Synonyms of "thinking" in multiple languages
 const THINKING_WORDS = [
-	"Thinking",
-	"Pensando",
-	"Pensant",
-	"Denkend",
-	"Pensando",
-	"考えている",
-	"생각 중",
-	"思考中",
-	"Размышляя",
-	"Düşünüyor",
-	"Myślący",
-	"Tänkande",
-	"Pensando",
-	"Ajatellen",
-	"Σκεπτόμενος",
-	"חושב",
-	"सोच रहा है",
-	"Berpikir",
+    "Thinking",
+    "Pensando",
+    "Pensant",
+    "Denkend",
+    "Pensando",
+    "考えている",
+    "생각 중",
+    "思考中",
+    "Размышляя",
+    "Düşünüyor",
+    "Myślący",
+    "Tänkande",
+    "Pensando",
+    "Ajatellen",
+    "Σκεπτόμενος",
+    "חושב",
+    "सोच रहा है",
+    "Berpikir",
 ];
 const DOT_ANIMATIONS = ["...", "·..", ".·.", "..·", ".·.", "·.."];
 function WaitingElapsedTime({ startTime }) {
-	const [elapsed, setElapsed] = React.useState(0);
-	const [thinkingWord, setThinkingWord] = React.useState(
-		() => THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)],
-	);
-	const [dotIndex, setDotIndex] = React.useState(0);
-	React.useEffect(() => {
-		const interval = setInterval(() => {
-			const now = Date.now();
-			const elapsedMs = now - startTime;
-			setElapsed(elapsedMs);
-		}, 100);
-		return () => clearInterval(interval);
-	}, [startTime]);
-	React.useEffect(() => {
-		const wordInterval = setInterval(() => {
-			const randomIndex = Math.floor(Math.random() * THINKING_WORDS.length);
-			setThinkingWord(THINKING_WORDS[randomIndex]);
-		}, 1500);
-		return () => clearInterval(wordInterval);
-	}, []);
-	React.useEffect(() => {
-		const dotInterval = setInterval(() => {
-			setDotIndex((prev) => (prev + 1) % DOT_ANIMATIONS.length);
-		}, 100);
-		return () => clearInterval(dotInterval);
-	}, []);
-	const seconds = (elapsed / 1000).toFixed(1);
-	const animatedDots = DOT_ANIMATIONS[dotIndex];
-	return _jsxs("span", {
-		className: "text-muted-foreground text-sm",
-		children: [thinkingWord, animatedDots, " ", seconds, "s"],
-	});
+    const [elapsed, setElapsed] = React.useState(0);
+    const [thinkingWord, setThinkingWord] = React.useState(() => THINKING_WORDS[Math.floor(Math.random() * THINKING_WORDS.length)]);
+    const [dotIndex, setDotIndex] = React.useState(0);
+    React.useEffect(() => {
+        const interval = setInterval(() => {
+            const now = Date.now();
+            const elapsedMs = now - startTime;
+            setElapsed(elapsedMs);
+        }, 100);
+        return () => clearInterval(interval);
+    }, [startTime]);
+    React.useEffect(() => {
+        const wordInterval = setInterval(() => {
+            const randomIndex = Math.floor(Math.random() * THINKING_WORDS.length);
+            setThinkingWord(THINKING_WORDS[randomIndex]);
+        }, 1500);
+        return () => clearInterval(wordInterval);
+    }, []);
+    React.useEffect(() => {
+        const dotInterval = setInterval(() => {
+            setDotIndex((prev) => (prev + 1) % DOT_ANIMATIONS.length);
+        }, 100);
+        return () => clearInterval(dotInterval);
+    }, []);
+    const seconds = (elapsed / 1000).toFixed(1);
+    const animatedDots = DOT_ANIMATIONS[dotIndex];
+    return (_jsxs("span", { className: "text-muted-foreground text-sm", children: [thinkingWord, animatedDots, " ", seconds, "s"] }));
 }
-const messageContentVariants = cva(
-	"w-full px-4 py-3 rounded-xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words transition-colors",
-	{
-		variants: {
-			role: {
-				user: "bg-primary text-primary-foreground shadow-sm",
-				assistant: "bg-muted text-foreground",
-				system:
-					"bg-card border border-border text-foreground opacity-80 text-sm",
-			},
-			variant: {
-				default: "",
-				outline: "border border-border",
-				ghost: "bg-transparent",
-			},
-		},
-		defaultVariants: {
-			role: "assistant",
-			variant: "default",
-		},
-	},
-);
-export const MessageContent = React.forwardRef(
-	(
-		{
-			role: roleProp,
-			variant,
-			isStreaming: isStreamingProp,
-			message,
-			thinkingDisplayStyle = "collapsible",
-			className,
-			children,
-			...props
-		},
-		ref,
-	) => {
-		// Get streaming start time from store (when using smart rendering)
-		const streamingStartTime = useChatStore(
-			(state) => state.streamingStartTime,
-		);
-		// Use smart rendering if message is provided and no custom children
-		const useSmartRendering = message && !children;
-		// Derive props from message if using smart rendering
-		const role = useSmartRendering ? message.role : roleProp || "assistant";
-		const isStreaming = useSmartRendering
-			? message.isStreaming
-			: isStreamingProp;
-		let content = children;
-		if (useSmartRendering) {
-			// Extract thinking from metadata
-			const thinking = message.metadata?.thinking;
-			const hasThinking = !!thinking;
-			// Check if waiting (streaming but no content yet)
-			const isWaiting =
-				message.isStreaming && !message.content && message.role === "assistant";
-			content = _jsxs(_Fragment, {
-				children: [
-					message.role === "assistant" &&
-						hasThinking &&
-						_jsx(Reasoning, {
-							content: thinking,
-							isStreaming: message.isStreaming,
-							mode: thinkingDisplayStyle,
-							autoCollapse: true,
-						}),
-					isWaiting &&
-						streamingStartTime &&
-						_jsxs("div", {
-							className: "flex items-center gap-2 opacity-50",
-							children: [
-								_jsx(Loader2Icon, {
-									className: "size-4 animate-spin text-muted-foreground",
-								}),
-								_jsx(WaitingElapsedTime, { startTime: streamingStartTime }),
-							],
-						}),
-					message.role === "user"
-						? _jsx("div", {
-								className: "whitespace-pre-wrap",
-								children: message.content,
-							})
-						: _jsx(Response, {
-								content: message.content,
-								isStreaming: message.isStreaming,
-								showEmpty: false,
-							}),
-				],
-			});
-		}
-		return _jsx("div", {
-			ref: ref,
-			className: cn(
-				messageContentVariants({ role, variant }),
-				isStreaming && "animate-pulse-subtle",
-				className,
-			),
-			...props,
-			children: content,
-		});
-	},
-);
+const messageContentVariants = cva("w-full px-4 py-3 rounded-xl text-[var(--font-size)] font-[var(--font-family)] leading-relaxed break-words transition-colors", {
+    variants: {
+        role: {
+            user: "bg-primary text-primary-foreground shadow-sm",
+            assistant: "text-foreground",
+            system: "bg-card border border-border text-foreground opacity-80 text-sm",
+        },
+        variant: {
+            default: "",
+            outline: "border border-border",
+            ghost: "bg-transparent",
+        },
+    },
+    defaultVariants: {
+        role: "assistant",
+        variant: "default",
+    },
+});
+export const MessageContent = React.forwardRef(({ role: roleProp, variant, isStreaming: isStreamingProp, message, thinkingDisplayStyle = "collapsible", className, children, ...props }, ref) => {
+    // Get streaming start time from store (when using smart rendering)
+    const streamingStartTime = useChatStore((state) => state.streamingStartTime);
+    // Use smart rendering if message is provided and no custom children
+    const useSmartRendering = message && !children;
+    // Derive props from message if using smart rendering
+    const role = useSmartRendering ? message.role : roleProp || "assistant";
+    const isStreaming = useSmartRendering
+        ? message.isStreaming
+        : isStreamingProp;
+    let content = children;
+    if (useSmartRendering) {
+        // Extract thinking from metadata
+        const thinking = message.metadata?.thinking;
+        const hasThinking = !!thinking;
+        // Check if waiting (streaming but no content yet)
+        const isWaiting = message.isStreaming && !message.content && message.role === "assistant";
+        content = (_jsxs(_Fragment, { children: [message.role === "assistant" && hasThinking && (_jsx(Reasoning, { content: thinking, isStreaming: message.isStreaming, mode: thinkingDisplayStyle, autoCollapse: true })), isWaiting && streamingStartTime && (_jsxs("div", { className: "flex items-center gap-2 opacity-50", children: [_jsx(Loader2Icon, { className: "size-4 animate-spin text-muted-foreground" }), _jsx(WaitingElapsedTime, { startTime: streamingStartTime })] })), message.role === "user" ? (_jsx("div", { className: "whitespace-pre-wrap", children: message.content })) : (_jsx(Response, { content: message.content, isStreaming: message.isStreaming, showEmpty: false }))] }));
+    }
+    return (_jsx("div", { ref: ref, className: cn(messageContentVariants({ role, variant }), isStreaming && "animate-pulse-subtle", className), ...props, children: content }));
+});
 MessageContent.displayName = "MessageContent";

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

@@ -4,34 +4,28 @@ import * as React from "react";
  * Reasoning component inspired by shadcn.io/ai
  * Displays AI thinking/reasoning process with auto-collapse support
  */
-declare const reasoningContainerVariants: (
-	props?:
-		| ({
-				variant?: "default" | "subtle" | "prominent" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface ReasoningProps
-	extends VariantProps<typeof reasoningContainerVariants> {
-	/** The reasoning/thinking content */
-	content?: string;
-	/** Whether the content is currently streaming */
-	isStreaming?: boolean;
-	/** Display mode - collapsible or always visible */
-	mode?: "collapsible" | "inline";
-	/** Default expanded state (default: false - collapsed by default) */
-	defaultExpanded?: boolean;
-	/** Auto-expand when streaming starts (default: false) */
-	autoExpand?: boolean;
-	/** Auto-collapse after streaming completes */
-	autoCollapse?: boolean;
-	/** Delay before auto-collapsing (ms) */
-	autoCollapseDelay?: number;
-	/** Custom label */
-	label?: string;
-	/** Additional CSS class */
-	className?: string;
+declare const reasoningContainerVariants: (props?: ({
+    variant?: "default" | "subtle" | "prominent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ReasoningProps extends VariantProps<typeof reasoningContainerVariants> {
+    /** The reasoning/thinking content */
+    content?: string;
+    /** Whether the content is currently streaming */
+    isStreaming?: boolean;
+    /** Display mode - collapsible or always visible */
+    mode?: "collapsible" | "inline";
+    /** Default expanded state (default: false - collapsed by default) */
+    defaultExpanded?: boolean;
+    /** Auto-expand when streaming starts (default: false) */
+    autoExpand?: boolean;
+    /** Auto-collapse after streaming completes */
+    autoCollapse?: boolean;
+    /** Delay before auto-collapsing (ms) */
+    autoCollapseDelay?: number;
+    /** Custom label */
+    label?: string;
+    /** Additional CSS class */
+    className?: string;
 }
-export declare const Reasoning: React.ForwardRefExoticComponent<
-	ReasoningProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Reasoning: React.ForwardRefExoticComponent<ReasoningProps & React.RefAttributes<HTMLDivElement>>;
+export {};