@townco/ui 0.1.8 → 0.1.10

package/dist/gui/components/Reasoning.js

@@ -1,70 +1,197 @@
-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/Reasoning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reasoning.js","sourceRoot":"","sources":["../../../src/gui/components/Reasoning.tsx"],"names":[],"mappings":"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"}

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

@@ -4,13 +4,15 @@ 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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Response.d.ts","sourceRoot":"","sources":["../../../src/gui/components/Response.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B;;;GAGG;AAEH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,sFA8NpB,CAAC"}

package/dist/gui/components/Response.js

@@ -1,95 +1,234 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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";

package/dist/gui/components/Response.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Response.js","sourceRoot":"","sources":["../../../src/gui/components/Response.tsx"],"names":[],"mappings":"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"}