@townco/ui 0.1.3 → 0.1.7

package/dist/gui/components/MarkdownRenderer.js

@@ -2,182 +2,85 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "../lib/utils.js";
-export function MarkdownRenderer({ content, className }) {
-	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
-		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",
-				...props,
-			});
-		},
-		pre: ({ node, ...props }) => _jsx("pre", { className: "my-4", ...props }),
-		// Heading styling
-		h1: ({ node, ...props }) =>
-			_jsx("h1", {
-				className: "text-2xl font-bold mt-6 mb-4 text-foreground",
-				...props,
-			}),
-		h2: ({ node, ...props }) =>
-			_jsx("h2", {
-				className: "text-xl font-semibold mt-5 mb-3 text-foreground",
-				...props,
-			}),
-		h3: ({ node, ...props }) =>
-			_jsx("h3", {
-				className: "text-lg font-semibold mt-4 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
-		a: ({ node, ...props }) =>
-			_jsx("a", {
-				className: "text-primary hover:underline",
-				target: "_blank",
-				rel: "noopener noreferrer",
-				...props,
-			}),
-		// Paragraph styling
-		p: ({ node, ...props }) =>
-			_jsx("p", {
-				className: "my-2 text-foreground leading-relaxed",
-				...props,
-			}),
-		// Blockquote styling
-		blockquote: ({ node, ...props }) =>
-			_jsx("blockquote", {
-				className:
-					"border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2",
-				...props,
-			}),
-	};
-	return _jsx("div", {
-		className: cn(
-			"markdown-content prose prose-sm max-w-none dark:prose-invert",
-			className,
-		),
-		children: _jsx(ReactMarkdown, {
-			remarkPlugins: [remarkGfm],
-			components: components,
-			children: content,
-		}),
-	});
+export function MarkdownRenderer({ content, className, }) {
+    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
+        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", ...props }));
+        },
+        pre: ({ node, ...props }) => _jsx("pre", { className: "my-4", ...props }),
+        // Heading styling
+        h1: ({ node, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-foreground", ...props })),
+        h2: ({ node, ...props }) => (_jsx("h2", { className: "text-xl font-semibold mt-5 mb-3 text-foreground", ...props })),
+        h3: ({ node, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 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
+        a: ({ node, ...props }) => (_jsx("a", { className: "text-primary hover:underline", target: "_blank", rel: "noopener noreferrer", ...props })),
+        // Paragraph styling
+        p: ({ node, ...props }) => (_jsx("p", { className: "my-2 text-foreground leading-relaxed", ...props })),
+        // Blockquote styling
+        blockquote: ({ node, ...props }) => (_jsx("blockquote", { className: "border-l-4 border-[primary] pl-4 italic my-4 text-foreground bg-card py-2", ...props })),
+    };
+    return (_jsx("div", { className: cn("markdown-content prose prose-sm max-w-none dark:prose-invert", className), children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: components, children: content }) }));
 }

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

@@ -5,29 +5,22 @@ import type { DisplayMessage } from "./MessageList.js";
  * Message wrapper component inspired by shadcn.io/ai
  * Provides role-based layout and styling for chat messages
  */
-declare const messageVariants: (
-	props?:
-		| ({
-				role?: "user" | "assistant" | "system" | null | undefined;
-				layout?: "default" | "full" | "compact" | null | undefined;
-		  } & import("class-variance-authority/types").ClassProp)
-		| undefined,
-) => string;
-export interface MessageProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof messageVariants> {
-	/**
-	 * Message object for smart rendering (optional)
-	 * When provided, automatically extracts role and id
-	 */
-	message?: DisplayMessage;
-	/** Message role - determines alignment and styling (fallback if message not provided) */
-	role?: "user" | "assistant" | "system";
-	/** Optional layout override */
-	layout?: "default" | "full" | "compact";
-	/** Optional message ID for accessibility (fallback if message not provided) */
-	messageId?: string;
+declare const messageVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+    layout?: "default" | "full" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface MessageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageVariants> {
+    /**
+     * Message object for smart rendering (optional)
+     * When provided, automatically extracts role and id
+     */
+    message?: DisplayMessage;
+    /** Message role - determines alignment and styling (fallback if message not provided) */
+    role?: "user" | "assistant" | "system";
+    /** Optional layout override */
+    layout?: "default" | "full" | "compact";
+    /** Optional message ID for accessibility (fallback if message not provided) */
+    messageId?: string;
 }
-export declare const Message: React.ForwardRefExoticComponent<
-	MessageProps & React.RefAttributes<HTMLDivElement>
->;
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/gui/components/Message.js

@@ -1,54 +1,33 @@
+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",
+            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, ...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 }));
 });
-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 {};