@townco/ui 0.1.6 → 0.1.7

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: "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 }));
+});
 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 {};

package/dist/gui/components/Reasoning.js

@@ -1,197 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
-
 /**
  * Reasoning component inspired by shadcn.io/ai
  * Displays AI thinking/reasoning process with auto-collapse support
  */
-const reasoningContainerVariants = cva(
-	"mb-3 rounded-lg bg-card border border-border transition-all",
-	{
-		variants: {
-			variant: {
-				default: "opacity-70",
-				subtle: "opacity-50",
-				prominent: "opacity-90 shadow-sm",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-const reasoningIconVariants = cva(
-	"w-4 h-4 text-foreground opacity-60 transition-transform duration-200",
-	{
-		variants: {
-			expanded: {
-				true: "rotate-180",
-				false: "",
-			},
-		},
-		defaultVariants: {
-			expanded: false,
-		},
-	},
-);
-export const Reasoning = React.forwardRef(
-	(
-		{
-			content,
-			isStreaming = false,
-			mode = "collapsible",
-			defaultExpanded = false,
-			autoExpand = false,
-			autoCollapse = true,
-			autoCollapseDelay = 2000,
-			label = "Thinking",
-			variant,
-			className,
-		},
-		ref,
-	) => {
-		const [isExpanded, setIsExpanded] = useState(
-			mode === "inline" ? true : defaultExpanded,
-		);
-		const [shouldAutoCollapse, setShouldAutoCollapse] = useState(false);
-		// Handle auto-collapse after streaming completes
-		useEffect(() => {
-			if (autoCollapse && !isStreaming && content && mode === "collapsible") {
-				const timer = setTimeout(() => {
-					setShouldAutoCollapse(true);
-					setIsExpanded(false);
-				}, autoCollapseDelay);
-				return () => clearTimeout(timer);
-			}
-			return undefined;
-		}, [isStreaming, content, autoCollapse, autoCollapseDelay, mode]);
-		// Auto-expand when streaming starts (only if autoExpand is enabled)
-		useEffect(() => {
-			if (
-				autoExpand &&
-				isStreaming &&
-				mode === "collapsible" &&
-				!shouldAutoCollapse
-			) {
-				setIsExpanded(true);
-			}
-		}, [autoExpand, isStreaming, mode, shouldAutoCollapse]);
-		if (!content && !isStreaming) {
-			return null;
-		}
-		// Inline mode - always visible
-		if (mode === "inline") {
-			return _jsxs("div", {
-				ref: ref,
-				className: cn(
-					reasoningContainerVariants({ variant }),
-					"p-3",
-					className,
-				),
-				children: [
-					_jsxs("div", {
-						className: "flex items-start gap-2 mb-2",
-						children: [
-							_jsx("span", {
-								className:
-									"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide",
-								children: label,
-							}),
-							isStreaming &&
-								_jsx("span", {
-									className:
-										"inline-block w-2 h-2 bg-primary rounded-full animate-pulse",
-								}),
-						],
-					}),
-					_jsxs("div", {
-						className:
-							"text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
-						children: [
-							content,
-							isStreaming &&
-								content &&
-								_jsx("span", {
-									className: "inline-block animate-typing text-primary",
-									children: "...",
-								}),
-						],
-					}),
-				],
-			});
-		}
-		// Collapsible mode
-		return _jsxs("div", {
-			ref: ref,
-			className: cn("mb-3", className),
-			children: [
-				_jsxs("button", {
-					type: "button",
-					onClick: () => {
-						setIsExpanded(!isExpanded);
-						setShouldAutoCollapse(false); // Disable auto-collapse on manual interaction
-					},
-					className:
-						"w-full flex items-center justify-between p-2.5 rounded-lg bg-card border border-border hover:bg-card/80 hover:shadow-sm transition-all text-left",
-					"aria-expanded": isExpanded,
-					"aria-label": `${isExpanded ? "Collapse" : "Expand"} reasoning`,
-					children: [
-						_jsxs("div", {
-							className: "flex items-center gap-2 flex-1 min-w-0",
-							children: [
-								_jsx("span", {
-									className:
-										"text-xs font-medium text-foreground opacity-60 uppercase tracking-wide shrink-0",
-									children: label,
-								}),
-								isStreaming &&
-									_jsx("span", {
-										className:
-											"inline-block w-2 h-2 bg-primary rounded-full animate-pulse shrink-0",
-									}),
-								!isExpanded &&
-									content &&
-									_jsxs("span", {
-										className: "text-xs text-foreground opacity-50 truncate",
-										children: [
-											content.substring(0, 60),
-											content.length > 60 && "...",
-										],
-									}),
-							],
-						}),
-						_jsx(ChevronDown, {
-							className: reasoningIconVariants({ expanded: isExpanded }),
-							"aria-hidden": "true",
-						}),
-					],
-				}),
-				isExpanded &&
-					_jsx("div", {
-						className: cn(
-							reasoningContainerVariants({ variant }),
-							"mt-2 p-3 animate-fadeIn",
-						),
-						children: _jsxs("div", {
-							className:
-								"text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap",
-							children: [
-								content,
-								isStreaming &&
-									content &&
-									_jsx("span", {
-										className: "inline-block animate-typing text-primary",
-										children: "...",
-									}),
-							],
-						}),
-					}),
-			],
-		});
-	},
-);
+const reasoningContainerVariants = cva("mb-3 rounded-lg bg-card border border-border transition-all", {
+    variants: {
+        variant: {
+            default: "opacity-70",
+            subtle: "opacity-50",
+            prominent: "opacity-90 shadow-sm",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const reasoningIconVariants = cva("w-4 h-4 text-foreground opacity-60 transition-transform duration-200", {
+    variants: {
+        expanded: {
+            true: "rotate-180",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        expanded: false,
+    },
+});
+export const Reasoning = React.forwardRef(({ content, isStreaming = false, mode = "collapsible", defaultExpanded = false, autoExpand = false, autoCollapse = true, autoCollapseDelay = 2000, label = "Thinking", variant, className, }, ref) => {
+    const [isExpanded, setIsExpanded] = useState(mode === "inline" ? true : defaultExpanded);
+    const [shouldAutoCollapse, setShouldAutoCollapse] = useState(false);
+    // Handle auto-collapse after streaming completes
+    useEffect(() => {
+        if (autoCollapse && !isStreaming && content && mode === "collapsible") {
+            const timer = setTimeout(() => {
+                setShouldAutoCollapse(true);
+                setIsExpanded(false);
+            }, autoCollapseDelay);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [isStreaming, content, autoCollapse, autoCollapseDelay, mode]);
+    // Auto-expand when streaming starts (only if autoExpand is enabled)
+    useEffect(() => {
+        if (autoExpand &&
+            isStreaming &&
+            mode === "collapsible" &&
+            !shouldAutoCollapse) {
+            setIsExpanded(true);
+        }
+    }, [autoExpand, isStreaming, mode, shouldAutoCollapse]);
+    if (!content && !isStreaming) {
+        return null;
+    }
+    // Inline mode - always visible
+    if (mode === "inline") {
+        return (_jsxs("div", { ref: ref, className: cn(reasoningContainerVariants({ variant }), "p-3", className), children: [_jsxs("div", { className: "flex items-start gap-2 mb-2", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide", children: label }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse" }))] }), _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [content, isStreaming && content && (_jsx("span", { className: "inline-block animate-typing text-primary", children: "..." }))] })] }));
+    }
+    // Collapsible mode
+    return (_jsxs("div", { ref: ref, className: cn("mb-3", className), children: [_jsxs("button", { type: "button", onClick: () => {
+                    setIsExpanded(!isExpanded);
+                    setShouldAutoCollapse(false); // Disable auto-collapse on manual interaction
+                }, className: "w-full flex items-center justify-between p-2.5 rounded-lg bg-card border border-border hover:bg-card/80 hover:shadow-sm transition-all text-left", "aria-expanded": isExpanded, "aria-label": `${isExpanded ? "Collapse" : "Expand"} reasoning`, children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx("span", { className: "text-xs font-medium text-foreground opacity-60 uppercase tracking-wide shrink-0", children: label }), isStreaming && (_jsx("span", { className: "inline-block w-2 h-2 bg-primary rounded-full animate-pulse shrink-0" })), !isExpanded && content && (_jsxs("span", { className: "text-xs text-foreground opacity-50 truncate", children: [content.substring(0, 60), content.length > 60 && "..."] }))] }), _jsx(ChevronDown, { className: reasoningIconVariants({ expanded: isExpanded }), "aria-hidden": "true" })] }), isExpanded && (_jsx("div", { className: cn(reasoningContainerVariants({ variant }), "mt-2 p-3 animate-fadeIn"), children: _jsxs("div", { className: "text-sm italic text-foreground opacity-80 leading-relaxed whitespace-pre-wrap", children: [content, isStreaming && content && (_jsx("span", { className: "inline-block animate-typing text-primary", children: "..." }))] }) }))] }));
+});
 Reasoning.displayName = "Reasoning";

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

@@ -4,15 +4,13 @@ import * as React from "react";
  * Streaming-optimized markdown renderer for AI-generated content
  */
 export interface ResponseProps extends React.HTMLAttributes<HTMLDivElement> {
-	/** The markdown content to render */
-	content: string;
-	/** Whether the content is currently streaming */
-	isStreaming?: boolean;
-	/** Show empty state when no content */
-	showEmpty?: boolean;
-	/** Custom empty state message */
-	emptyMessage?: string;
+    /** The markdown content to render */
+    content: string;
+    /** Whether the content is currently streaming */
+    isStreaming?: boolean;
+    /** Show empty state when no content */
+    showEmpty?: boolean;
+    /** Custom empty state message */
+    emptyMessage?: string;
 }
-export declare const Response: React.ForwardRefExoticComponent<
-	ResponseProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Response: React.ForwardRefExoticComponent<ResponseProps & React.RefAttributes<HTMLDivElement>>;