@townco/ui 0.1.17 → 0.1.18

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>>;

package/dist/gui/components/Response.js

@@ -1,234 +1,95 @@
-import * as React from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "../lib/utils.js";
-export const Response = React.forwardRef(
-	(
-		{
-			content,
-			isStreaming = false,
-			showEmpty = true,
-			emptyMessage = "",
-			className,
-			...props
-		},
-		ref,
-	) => {
-		// Show empty state during streaming if no content yet
-		if (!content && isStreaming && showEmpty) {
-			return _jsx("div", {
-				ref: ref,
-				className: cn("opacity-70 italic text-sm", className),
-				...props,
-				children: emptyMessage,
-			});
-		}
-		if (!content) {
-			return null;
-		}
-		const components = {
-			// Table styling
-			table: ({ node, ...props }) =>
-				_jsx("div", {
-					className: "overflow-x-auto my-4",
-					children: _jsx("table", {
-						className:
-							"min-w-full border-collapse border border-border rounded-md",
-						...props,
-					}),
-				}),
-			thead: ({ node, ...props }) =>
-				_jsx("thead", {
-					className: "bg-card border-b border-border",
-					...props,
-				}),
-			tbody: ({ node, ...props }) => _jsx("tbody", { ...props }),
-			tr: ({ node, ...props }) =>
-				_jsx("tr", {
-					className: "border-b border-border hover:bg-card transition-colors",
-					...props,
-				}),
-			th: ({ node, ...props }) =>
-				_jsx("th", {
-					className:
-						"px-4 py-2 text-left font-semibold text-foreground border-r border-border last:border-r-0",
-					...props,
-				}),
-			td: ({ node, ...props }) =>
-				_jsx("td", {
-					className:
-						"px-4 py-2 text-foreground border-r border-border last:border-r-0",
-					...props,
-				}),
-			// Task list styling
-			input: ({ node, checked, ...props }) => {
-				if (props.type === "checkbox") {
-					return _jsx("input", {
-						type: "checkbox",
-						checked: checked || false,
-						disabled: true,
-						readOnly: true,
-						className: "mr-2 w-4 h-4 accent-[primary] cursor-not-allowed",
-						...props,
-					});
-				}
-				return _jsx("input", { ...props });
-			},
-			// Code block styling with enhanced shadows
-			code: ({ node, ...props }) => {
-				const inline = !props.className?.includes("language-");
-				if (inline) {
-					return _jsx("code", {
-						className:
-							"px-1.5 py-0.5 bg-card border border-border rounded text-sm font-mono text-foreground",
-						...props,
-					});
-				}
-				return _jsx("code", {
-					className:
-						"block p-4 bg-card border border-border rounded-md overflow-x-auto text-sm font-mono text-foreground shadow-sm",
-					...props,
-				});
-			},
-			pre: ({ node, ...props }) =>
-				_jsx("pre", { className: "my-4 rounded-lg", ...props }),
-			// Heading styling with improved hierarchy
-			h1: ({ node, ...props }) =>
-				_jsx("h1", {
-					className:
-						"text-2xl font-bold mt-6 mb-4 text-foreground border-b border-border pb-2",
-					...props,
-				}),
-			h2: ({ node, ...props }) =>
-				_jsx("h2", {
-					className:
-						"text-xl font-semibold mt-5 mb-3 text-foreground border-b border-border/50 pb-1.5",
-					...props,
-				}),
-			h3: ({ node, ...props }) =>
-				_jsx("h3", {
-					className: "text-lg font-semibold mt-4 mb-2 text-foreground",
-					...props,
-				}),
-			h4: ({ node, ...props }) =>
-				_jsx("h4", {
-					className: "text-base font-semibold mt-3 mb-2 text-foreground",
-					...props,
-				}),
-			// List styling
-			ul: ({ node, ...props }) => {
-				// Check if this is a task list by looking for checkbox inputs in children
-				const isTaskList = node?.children?.some(
-					(child) =>
-						typeof child === "object" &&
-						child !== null &&
-						"type" in child &&
-						child.type === "element" &&
-						"tagName" in child &&
-						child.tagName === "li" &&
-						"children" in child &&
-						Array.isArray(child.children) &&
-						child.children.some(
-							(grandChild) =>
-								typeof grandChild === "object" &&
-								grandChild !== null &&
-								"type" in grandChild &&
-								grandChild.type === "element" &&
-								"tagName" in grandChild &&
-								grandChild.tagName === "input" &&
-								"properties" in grandChild &&
-								typeof grandChild.properties === "object" &&
-								grandChild.properties !== null &&
-								"type" in grandChild.properties &&
-								grandChild.properties.type === "checkbox",
-						),
-				);
-				return _jsx("ul", {
-					className: cn(
-						"my-2 space-y-1 text-foreground",
-						isTaskList ? "list-none space-y-2" : "list-disc list-inside",
-					),
-					...props,
-				});
-			},
-			ol: ({ node, ...props }) =>
-				_jsx("ol", {
-					className: "list-decimal list-inside my-2 space-y-1 text-foreground",
-					...props,
-				}),
-			// List item styling
-			li: ({ node, ...props }) => {
-				// Check if this li contains a checkbox (task list item)
-				const isTaskListItem = node?.children?.some(
-					(child) =>
-						typeof child === "object" &&
-						child !== null &&
-						"type" in child &&
-						child.type === "element" &&
-						"tagName" in child &&
-						child.tagName === "input" &&
-						"properties" in child &&
-						typeof child.properties === "object" &&
-						child.properties !== null &&
-						"type" in child.properties &&
-						child.properties.type === "checkbox",
-				);
-				return _jsx("li", {
-					className: cn("flex items-start", isTaskListItem ? "gap-2" : "ml-2"),
-					...props,
-				});
-			},
-			// Link styling with hover effect
-			a: ({ node, ...props }) =>
-				_jsx("a", {
-					className:
-						"text-primary hover:underline decoration-2 underline-offset-2 transition-all",
-					target: "_blank",
-					rel: "noopener noreferrer",
-					...props,
-				}),
-			// Paragraph styling
-			p: ({ node, ...props }) =>
-				_jsx("p", {
-					className: "my-2 text-foreground leading-relaxed",
-					...props,
-				}),
-			// Blockquote styling with enhanced visual
-			blockquote: ({ node, ...props }) =>
-				_jsx("blockquote", {
-					className:
-						"border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2 rounded-r-md shadow-sm",
-					...props,
-				}),
-			// Horizontal rule
-			hr: ({ node, ...props }) =>
-				_jsx("hr", {
-					className: "my-6 border-t border-border opacity-50",
-					...props,
-				}),
-		};
-		return _jsxs("div", {
-			ref: ref,
-			className: cn(
-				"markdown-content prose prose-sm max-w-none dark:prose-invert",
-				className,
-			),
-			...props,
-			children: [
-				_jsx(ReactMarkdown, {
-					remarkPlugins: [remarkGfm],
-					components: components,
-					children: content,
-				}),
-				isStreaming &&
-					content &&
-					_jsx("span", {
-						className: "inline-block ml-1 animate-typing text-primary",
-						children: "...",
-					}),
-			],
-		});
-	},
-);
+export const Response = React.forwardRef(({ content, isStreaming = false, showEmpty = true, emptyMessage = "", className, ...props }, ref) => {
+    // Show empty state during streaming if no content yet
+    if (!content && isStreaming && showEmpty) {
+        return (_jsx("div", { ref: ref, className: cn("opacity-70 italic text-sm", className), ...props, children: emptyMessage }));
+    }
+    if (!content) {
+        return null;
+    }
+    const components = {
+        // Table styling
+        table: ({ node, ...props }) => (_jsx("div", { className: "overflow-x-auto my-4", children: _jsx("table", { className: "min-w-full border-collapse border border-border rounded-md", ...props }) })),
+        thead: ({ node, ...props }) => (_jsx("thead", { className: "bg-card border-b border-border", ...props })),
+        tbody: ({ node, ...props }) => _jsx("tbody", { ...props }),
+        tr: ({ node, ...props }) => (_jsx("tr", { className: "border-b border-border hover:bg-card transition-colors", ...props })),
+        th: ({ node, ...props }) => (_jsx("th", { className: "px-4 py-2 text-left font-semibold text-foreground border-r border-border last:border-r-0", ...props })),
+        td: ({ node, ...props }) => (_jsx("td", { className: "px-4 py-2 text-foreground border-r border-border last:border-r-0", ...props })),
+        // Task list styling
+        input: ({ node, checked, ...props }) => {
+            if (props.type === "checkbox") {
+                return (_jsx("input", { type: "checkbox", checked: checked || false, disabled: true, readOnly: true, className: "mr-2 w-4 h-4 accent-[primary] cursor-not-allowed", ...props }));
+            }
+            return _jsx("input", { ...props });
+        },
+        // Code block styling with enhanced shadows
+        code: ({ node, ...props }) => {
+            const inline = !props.className?.includes("language-");
+            if (inline) {
+                return (_jsx("code", { className: "px-1.5 py-0.5 bg-card border border-border rounded text-sm font-mono text-foreground", ...props }));
+            }
+            return (_jsx("code", { className: "block p-4 bg-card border border-border rounded-md overflow-x-auto text-sm font-mono text-foreground shadow-sm", ...props }));
+        },
+        pre: ({ node, ...props }) => (_jsx("pre", { className: "my-4 rounded-lg", ...props })),
+        // Heading styling with improved hierarchy
+        h1: ({ node, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-foreground border-b border-border pb-2", ...props })),
+        h2: ({ node, ...props }) => (_jsx("h2", { className: "text-xl font-semibold mt-5 mb-3 text-foreground border-b border-border/50 pb-1.5", ...props })),
+        h3: ({ node, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 mb-2 text-foreground", ...props })),
+        h4: ({ node, ...props }) => (_jsx("h4", { className: "text-base font-semibold mt-3 mb-2 text-foreground", ...props })),
+        // List styling
+        ul: ({ node, ...props }) => {
+            // Check if this is a task list by looking for checkbox inputs in children
+            const isTaskList = node?.children?.some((child) => typeof child === "object" &&
+                child !== null &&
+                "type" in child &&
+                child.type === "element" &&
+                "tagName" in child &&
+                child.tagName === "li" &&
+                "children" in child &&
+                Array.isArray(child.children) &&
+                child.children.some((grandChild) => typeof grandChild === "object" &&
+                    grandChild !== null &&
+                    "type" in grandChild &&
+                    grandChild.type === "element" &&
+                    "tagName" in grandChild &&
+                    grandChild.tagName === "input" &&
+                    "properties" in grandChild &&
+                    typeof grandChild.properties === "object" &&
+                    grandChild.properties !== null &&
+                    "type" in grandChild.properties &&
+                    grandChild.properties.type === "checkbox"));
+            return (_jsx("ul", { className: cn("my-2 space-y-1 text-foreground", isTaskList ? "list-none space-y-2" : "list-disc list-inside"), ...props }));
+        },
+        ol: ({ node, ...props }) => (_jsx("ol", { className: "list-decimal list-inside my-2 space-y-1 text-foreground", ...props })),
+        // List item styling
+        li: ({ node, ...props }) => {
+            // Check if this li contains a checkbox (task list item)
+            const isTaskListItem = node?.children?.some((child) => typeof child === "object" &&
+                child !== null &&
+                "type" in child &&
+                child.type === "element" &&
+                "tagName" in child &&
+                child.tagName === "input" &&
+                "properties" in child &&
+                typeof child.properties === "object" &&
+                child.properties !== null &&
+                "type" in child.properties &&
+                child.properties.type === "checkbox");
+            return (_jsx("li", { className: cn("flex items-start", isTaskListItem ? "gap-2" : "ml-2"), ...props }));
+        },
+        // Link styling with hover effect
+        a: ({ node, ...props }) => (_jsx("a", { className: "text-primary hover:underline decoration-2 underline-offset-2 transition-all", target: "_blank", rel: "noopener noreferrer", ...props })),
+        // Paragraph styling
+        p: ({ node, ...props }) => (_jsx("p", { className: "my-2 text-foreground leading-relaxed", ...props })),
+        // Blockquote styling with enhanced visual
+        blockquote: ({ node, ...props }) => (_jsx("blockquote", { className: "border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2 rounded-r-md shadow-sm", ...props })),
+        // Horizontal rule
+        hr: ({ node, ...props }) => (_jsx("hr", { className: "my-6 border-t border-border opacity-50", ...props })),
+    };
+    return (_jsxs("div", { ref: ref, className: cn("markdown-content prose prose-sm max-w-none dark:prose-invert", className), ...props, children: [_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }), isStreaming && content && (_jsx("span", { className: "inline-block ml-1 animate-typing text-primary", children: "..." }))] }));
+});
 Response.displayName = "Response";