@mcp-b/char 0.0.0-beta-20260124143827

package/dist/FormToolUI-04m9zI5r.js

@@ -0,0 +1,619 @@
+import { c } from "react-compiler-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { AlertCircle, Check, ChevronDownIcon, ChevronUpIcon, FileText } from "lucide-react";
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import Ajv from "ajv";
+import { withTheme } from "@rjsf/core";
+import { Theme } from "@rjsf/shadcn";
+import validator from "@rjsf/validator-ajv8";
+
+//#region src/utils/cn.ts
+/**
+* Merges Tailwind CSS classes with proper precedence handling.
+* Combines clsx for conditional classes and tailwind-merge for deduplication.
+*/
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+//#region src/components/ui/button.tsx
+const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+			icon: "size-9",
+			"icon-sm": "size-8",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Button(t0) {
+	const $ = c(16);
+	let className;
+	let props;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({className, variant: t1, size: t2, asChild: t3, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		className = $[1];
+		props = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const variant = t1 === void 0 ? "default" : t1;
+	const size = t2 === void 0 ? "default" : t2;
+	const Comp = (t3 === void 0 ? false : t3) ? Slot : "button";
+	let t4;
+	if ($[6] !== className || $[7] !== size || $[8] !== variant) {
+		t4 = cn(buttonVariants({
+			variant,
+			size,
+			className
+		}));
+		$[6] = className;
+		$[7] = size;
+		$[8] = variant;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== Comp || $[11] !== props || $[12] !== size || $[13] !== t4 || $[14] !== variant) {
+		t5 = /* @__PURE__ */ jsx(Comp, {
+			"data-slot": "button",
+			"data-variant": variant,
+			"data-size": size,
+			className: t4,
+			...props
+		});
+		$[10] = Comp;
+		$[11] = props;
+		$[12] = size;
+		$[13] = t4;
+		$[14] = variant;
+		$[15] = t5;
+	} else t5 = $[15];
+	return t5;
+}
+
+//#endregion
+//#region src/components/ui/collapsible.tsx
+function Collapsible(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, {
+			"data-slot": "collapsible",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function CollapsibleTrigger(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleTrigger, {
+			"data-slot": "collapsible-trigger",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+function CollapsibleContent(t0) {
+	const $ = c(4);
+	let props;
+	if ($[0] !== t0) {
+		({...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+	} else props = $[1];
+	let t1;
+	if ($[2] !== props) {
+		t1 = /* @__PURE__ */ jsx(CollapsiblePrimitive.CollapsibleContent, {
+			"data-slot": "collapsible-content",
+			...props
+		});
+		$[2] = props;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+
+//#endregion
+//#region src/providers/ToolExecutionProvider.tsx
+const ToolExecutionContext = createContext(null);
+const ToolExecutionProvider = (t0) => {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(ToolExecutionContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+function useOptionalToolExecution() {
+	return useContext(ToolExecutionContext);
+}
+
+//#endregion
+//#region src/tools/FormToolUI.tsx
+const Form = withTheme(Theme);
+const ajv = new Ajv();
+/**
+* Normalize a JSON Schema to handle common model mistakes.
+* - Converts uppercase types (Gemini format) to lowercase (JSON Schema format)
+* - Recursively processes nested schemas
+*/
+function normalizeSchema(schema) {
+	if (!schema || typeof schema !== "object") return schema;
+	const obj = { ...schema };
+	if (typeof obj.type === "string") obj.type = obj.type.toLowerCase();
+	if (obj.properties && typeof obj.properties === "object") obj.properties = Object.fromEntries(Object.entries(obj.properties).map(([key, value]) => [key, normalizeSchema(value)]));
+	if (obj.items) if (Array.isArray(obj.items)) obj.items = obj.items.map(normalizeSchema);
+	else obj.items = normalizeSchema(obj.items);
+	if (obj.additionalProperties && typeof obj.additionalProperties === "object") obj.additionalProperties = normalizeSchema(obj.additionalProperties);
+	for (const keyword of [
+		"allOf",
+		"anyOf",
+		"oneOf"
+	]) if (Array.isArray(obj[keyword])) obj[keyword] = obj[keyword].map(normalizeSchema);
+	if (obj.not && typeof obj.not === "object") obj.not = normalizeSchema(obj.not);
+	return obj;
+}
+/**
+* Validate a JSON Schema using AJV's meta-schema validation.
+* Returns null if valid, or an error message string if invalid.
+*/
+function validateSchema(schema) {
+	if (ajv.validateSchema(schema)) return null;
+	return [
+		"Invalid JSON Schema:",
+		...(ajv.errors ?? []).map((err) => {
+			return `- ${err.instancePath || "root"}: ${err.message}`;
+		}),
+		"",
+		"Please fix the schema and try again."
+	].join("\n");
+}
+/**
+* Display component for schema validation errors
+*/
+function SchemaErrorDisplay(t0) {
+	const $ = c(16);
+	const { title, error } = t0;
+	const [isOpen, setIsOpen] = useState(true);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 text-destructive" }), /* @__PURE__ */ jsx(AlertCircle, { className: "absolute -bottom-0.5 -right-0.5 h-2 w-2 text-destructive" })]
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== title) {
+		t2 = /* @__PURE__ */ jsxs("span", {
+			className: "flex-grow text-xs font-medium text-destructive",
+			children: [title, " - Invalid Schema"]
+		});
+		$[1] = title;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== isOpen) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "inline-flex h-5 w-5 items-center justify-center p-0",
+			children: isOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3 text-destructive/70" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 text-destructive/70" })
+		});
+		$[3] = isOpen;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "flex w-full items-center gap-1.5 px-2 py-1.5 text-left transition-colors hover:bg-destructive/15",
+				children: [
+					t1,
+					t2,
+					t3
+				]
+			})
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== error) {
+		t5 = /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "border-t border-destructive/20 px-2 py-1.5",
+			children: /* @__PURE__ */ jsx("pre", {
+				className: "whitespace-pre-wrap text-[11px] text-foreground/70",
+				children: error
+			})
+		}) });
+		$[8] = error;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: "my-1 overflow-hidden rounded-lg bg-destructive/10 border border-destructive/20",
+			children: [t4, t5]
+		});
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	let t7;
+	if ($[13] !== isOpen || $[14] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Collapsible, {
+			open: isOpen,
+			onOpenChange: setIsOpen,
+			children: t6
+		});
+		$[13] = isOpen;
+		$[14] = t6;
+		$[15] = t7;
+	} else t7 = $[15];
+	return t7;
+}
+/**
+* Parse form result data, handling cases where it may be stringified
+*/
+function parseFormData(data) {
+	if (typeof data === "object" && data !== null) {
+		if (Object.keys(data).some((key) => isNaN(Number(key)))) return data;
+	}
+	if (typeof data === "string") try {
+		const parsed = JSON.parse(data);
+		if (typeof parsed === "object" && parsed !== null) return parsed;
+	} catch (error) {
+		console.warn("[FormToolUI] Failed to parse form data as JSON:", {
+			data: data.substring(0, 100),
+			error: error instanceof Error ? error.message : "Unknown parse error"
+		});
+		return { value: data };
+	}
+	return typeof data === "object" && data !== null ? data : { value: String(data) };
+}
+/**
+* Format a value for display
+*/
+function formatValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+/**
+* Display component for submitted form data - matches UnifiedToolFallback pattern
+*/
+function FormResultDisplay(t0) {
+	const $ = c(41);
+	const { title, data } = t0;
+	const [isOpen, setIsOpen] = useState(false);
+	let T0;
+	let T1;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	if ($[0] !== data || $[1] !== isOpen || $[2] !== title) {
+		const parsedData = parseFormData(data);
+		const entries = Object.entries(parsedData);
+		T1 = Collapsible;
+		t7 = isOpen;
+		t8 = setIsOpen;
+		t5 = "my-1 overflow-hidden rounded-lg bg-muted/50";
+		let t9$1;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t9$1 = /* @__PURE__ */ jsxs("div", {
+				className: "relative",
+				children: [/* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 text-muted-foreground" }), /* @__PURE__ */ jsx(Check, { className: "absolute -bottom-0.5 -right-0.5 h-2 w-2 text-muted-foreground" })]
+			});
+			$[13] = t9$1;
+		} else t9$1 = $[13];
+		let t10$1;
+		if ($[14] !== title) {
+			t10$1 = /* @__PURE__ */ jsx("span", {
+				className: "flex-grow text-xs font-medium text-foreground/80",
+				children: title
+			});
+			$[14] = title;
+			$[15] = t10$1;
+		} else t10$1 = $[15];
+		let t11$1;
+		if ($[16] !== isOpen) {
+			t11$1 = /* @__PURE__ */ jsx("span", {
+				className: "inline-flex h-5 w-5 items-center justify-center p-0",
+				children: isOpen ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3 text-muted-foreground/70" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3 text-muted-foreground/70" })
+			});
+			$[16] = isOpen;
+			$[17] = t11$1;
+		} else t11$1 = $[17];
+		if ($[18] !== t10$1 || $[19] !== t11$1) {
+			t6 = /* @__PURE__ */ jsx(CollapsibleTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "flex w-full items-center gap-1.5 px-2 py-1.5 text-left transition-colors hover:bg-muted/70",
+					children: [
+						t9$1,
+						t10$1,
+						t11$1
+					]
+				})
+			});
+			$[18] = t10$1;
+			$[19] = t11$1;
+			$[20] = t6;
+		} else t6 = $[20];
+		T0 = CollapsibleContent;
+		t3 = "border-t border-border px-2 py-1.5";
+		if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx("div", {
+				className: "mb-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70",
+				children: "Submitted data"
+			});
+			$[21] = t4;
+		} else t4 = $[21];
+		t1 = "rounded bg-muted/50 p-1.5 space-y-0.5";
+		t2 = entries.map(_temp);
+		$[0] = data;
+		$[1] = isOpen;
+		$[2] = title;
+		$[3] = T0;
+		$[4] = T1;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+		$[12] = t8;
+	} else {
+		T0 = $[3];
+		T1 = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
+		t5 = $[9];
+		t6 = $[10];
+		t7 = $[11];
+		t8 = $[12];
+	}
+	let t9;
+	if ($[22] !== t1 || $[23] !== t2) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[22] = t1;
+		$[23] = t2;
+		$[24] = t9;
+	} else t9 = $[24];
+	let t10;
+	if ($[25] !== t3 || $[26] !== t4 || $[27] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			children: [t4, t9]
+		});
+		$[25] = t3;
+		$[26] = t4;
+		$[27] = t9;
+		$[28] = t10;
+	} else t10 = $[28];
+	let t11;
+	if ($[29] !== T0 || $[30] !== t10) {
+		t11 = /* @__PURE__ */ jsx(T0, { children: t10 });
+		$[29] = T0;
+		$[30] = t10;
+		$[31] = t11;
+	} else t11 = $[31];
+	let t12;
+	if ($[32] !== t11 || $[33] !== t5 || $[34] !== t6) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: t5,
+			children: [t6, t11]
+		});
+		$[32] = t11;
+		$[33] = t5;
+		$[34] = t6;
+		$[35] = t12;
+	} else t12 = $[35];
+	let t13;
+	if ($[36] !== T1 || $[37] !== t12 || $[38] !== t7 || $[39] !== t8) {
+		t13 = /* @__PURE__ */ jsx(T1, {
+			open: t7,
+			onOpenChange: t8,
+			children: t12
+		});
+		$[36] = T1;
+		$[37] = t12;
+		$[38] = t7;
+		$[39] = t8;
+		$[40] = t13;
+	} else t13 = $[40];
+	return t13;
+}
+/**
+* FormToolUI - Renders a dynamic form from JSON Schema
+*
+* HITL Pattern (AI SDK v6):
+* - Model calls `form` tool with JSON Schema
+* - This UI renders the form using @rjsf/shadcn
+* - User fills out and submits form
+* - addToolOutput() sends data to backend via WebSocket + updates local UI state
+*
+* Schema Handling:
+* - Normalizes uppercase types (Gemini format) to lowercase (JSON Schema)
+* - Validates schema with AJV and sends errors back to model if invalid
+*/
+function _temp(t0) {
+	const [key, value] = t0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-2 text-[11px]",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "font-medium text-muted-foreground",
+			children: [key, ":"]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-foreground/70",
+			children: formatValue(value)
+		})]
+	}, key);
+}
+const FormToolUI = makeAssistantToolUI({
+	toolName: "form",
+	render: ({ args, result, status, addResult, toolCallId }) => {
+		const toolExecution = useOptionalToolExecution();
+		const errorSentRef = useRef(false);
+		const [schemaError, setSchemaError] = useState(null);
+		const isWaiting = status.type === "requires-action";
+		const normalizedSchema = args.schema && typeof args.schema === "object" ? normalizeSchema(args.schema) : null;
+		useEffect(() => {
+			if (!normalizedSchema || !isWaiting || errorSentRef.current || result) return;
+			const validationError = validateSchema(normalizedSchema);
+			if (validationError) {
+				errorSentRef.current = true;
+				setSchemaError(validationError);
+				if (toolExecution) toolExecution.addToolOutput({
+					toolCallId,
+					output: `Error: ${validationError}`
+				});
+				else console.error("[FormToolUI] Cannot send schema error: ToolExecution context not available");
+			}
+		}, [
+			normalizedSchema,
+			isWaiting,
+			result,
+			toolExecution,
+			toolCallId
+		]);
+		if (schemaError) return /* @__PURE__ */ jsx(SchemaErrorDisplay, {
+			title: args.title ?? "Form",
+			error: schemaError
+		});
+		if (result) return /* @__PURE__ */ jsx(FormResultDisplay, {
+			title: args.title ?? "Form",
+			data: result
+		});
+		const handleSubmit = ({ formData }) => {
+			if (!formData) return;
+			if (!toolExecution) {
+				console.error("[FormToolUI] Cannot submit form: ToolExecution context not available", { toolCallId });
+				return;
+			}
+			const outputValue = typeof formData === "object" ? JSON.stringify(formData) : String(formData);
+			toolExecution.addToolOutput({
+				toolCallId,
+				output: outputValue
+			});
+		};
+		if (!normalizedSchema) return /* @__PURE__ */ jsxs("div", {
+			className: "my-1 flex items-center gap-1.5 rounded-lg bg-muted/50 px-2 py-1.5 text-sm text-foreground/70",
+			children: [/* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 animate-pulse text-muted-foreground" }), /* @__PURE__ */ jsx("span", {
+				className: "text-xs",
+				children: "Loading form..."
+			})]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: "my-1 overflow-hidden rounded-lg bg-muted/50",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5 px-2 py-1.5 border-b border-border",
+				children: [/* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5 text-foreground/70" }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs font-medium text-foreground",
+					children: args.title ?? "Form"
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "px-2 py-2",
+				children: [args.description && /* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground mb-3",
+					children: args.description
+				}), /* @__PURE__ */ jsx(Form, {
+					schema: normalizedSchema,
+					validator,
+					onSubmit: handleSubmit,
+					disabled: !isWaiting,
+					className: "space-y-3",
+					uiSchema: { "ui:submitButtonOptions": { norender: true } },
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex justify-end pt-1",
+						children: /* @__PURE__ */ jsxs(Button, {
+							type: "submit",
+							disabled: !isWaiting,
+							size: "sm",
+							className: "h-7 px-3 text-xs",
+							children: [/* @__PURE__ */ jsx(Check, { className: "h-3 w-3 mr-1" }), args.submitLabel || "Submit"]
+						})
+					})
+				})]
+			})]
+		});
+	}
+});
+var FormToolUI_default = FormToolUI;
+
+//#endregion
+export { Collapsible as a, Button as c, useOptionalToolExecution as i, cn as l, FormToolUI_default as n, CollapsibleContent as o, ToolExecutionProvider as r, CollapsibleTrigger as s, FormToolUI as t };
+//# sourceMappingURL=FormToolUI-04m9zI5r.js.map