@townco/ui 0.1.0 → 0.1.6

package/dist/gui/components/MessageContent.js

@@ -1,11 +1,16 @@
-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
@@ -13,92 +18,159 @@ 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/PlaygroundLayout.d.ts

@@ -1,10 +1,14 @@
 import { type ThemeConfig } from "./ConfigPanel.js";
 declare const DEFAULT_CONFIG: ThemeConfig;
 interface PlaygroundLayoutProps {
-    initialConfig?: ThemeConfig;
-    initialStatus?: string;
-    iframeSrc?: string;
+	initialConfig?: ThemeConfig;
+	initialStatus?: string;
+	iframeSrc?: string;
 }
-export declare function PlaygroundLayout({ initialConfig, initialStatus, iframeSrc, }: PlaygroundLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlaygroundLayout({
+	initialConfig,
+	initialStatus,
+	iframeSrc,
+}: PlaygroundLayoutProps): import("react/jsx-runtime").JSX.Element;
 export { DEFAULT_CONFIG };
-//# sourceMappingURL=PlaygroundLayout.d.ts.map
+//# sourceMappingURL=PlaygroundLayout.d.ts.map

package/dist/gui/components/PlaygroundLayout.js

@@ -1,18 +1,49 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { ConfigPanel } from "./ConfigPanel.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChatPreview } from "./ChatPreview.js";
+import { ConfigPanel } from "./ConfigPanel.js";
+
 const DEFAULT_CONFIG = {
-    colorScheme: "light",
-    accentColor: "#646cff",
-    typography: "Inter",
-    fontSize: 16,
-    thinkingDisplayStyle: "collapsible",
+	colorScheme: "light",
+	accentColor: "#646cff",
+	typography: "Inter",
+	fontSize: 16,
+	thinkingDisplayStyle: "collapsible",
 };
-export function PlaygroundLayout({ initialConfig = DEFAULT_CONFIG, initialStatus = "v0.1.0", iframeSrc, }) {
-    const [config, setConfig] = useState(initialConfig);
-    const [status, setStatus] = useState(initialStatus);
-    return (_jsx("div", { className: "w-full h-screen overflow-hidden", "data-theme": config.colorScheme, children: _jsxs("div", { className: "flex h-full w-full", children: [_jsx("div", { className: "w-[400px] flex-shrink-0 h-full overflow-hidden", children: _jsx(ConfigPanel, { config: config, status: status, onConfigChange: setConfig, onStatusChange: setStatus }) }), _jsx("div", { className: "flex-1 h-full overflow-hidden [background-image:radial-gradient(var(--color-border)_1px,var(--color-bg)_1px)] [background-size:20px_20px] flex items-center justify-center p-5", children: _jsx(ChatPreview, { config: config, status: status, iframeSrc: iframeSrc }) })] }) }));
+export function PlaygroundLayout({
+	initialConfig = DEFAULT_CONFIG,
+	initialStatus = "v0.1.0",
+	iframeSrc,
+}) {
+	const [config, setConfig] = useState(initialConfig);
+	const [status, setStatus] = useState(initialStatus);
+	return _jsx("div", {
+		className: "w-full h-screen overflow-hidden",
+		"data-theme": config.colorScheme,
+		children: _jsxs("div", {
+			className: "flex h-full w-full",
+			children: [
+				_jsx("div", {
+					className: "w-[400px] flex-shrink-0 h-full overflow-hidden",
+					children: _jsx(ConfigPanel, {
+						config: config,
+						status: status,
+						onConfigChange: setConfig,
+						onStatusChange: setStatus,
+					}),
+				}),
+				_jsx("div", {
+					className:
+						"flex-1 h-full overflow-hidden [background-image:radial-gradient(var(--color-border)_1px,var(--color-bg)_1px)] [background-size:20px_20px] flex items-center justify-center p-5",
+					children: _jsx(ChatPreview, {
+						config: config,
+						status: status,
+						iframeSrc: iframeSrc,
+					}),
+				}),
+			],
+		}),
+	});
 }
 export { DEFAULT_CONFIG };
-//# sourceMappingURL=PlaygroundLayout.js.map
+//# sourceMappingURL=PlaygroundLayout.js.map

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

@@ -4,28 +4,34 @@ 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 {};
+export declare const Reasoning: React.ForwardRefExoticComponent<
+	ReasoningProps & React.RefAttributes<HTMLDivElement>
+>;