@ai-gui/plugin-form 0.4.1 → 0.4.4

package/dist/index.cjs

@@ -94,7 +94,7 @@ function form(options) {
 		}
 		const output = {
 			kind: "mount",
-			mount: (host) => mountForm(host, parsed.data, options.actionRuntime)
+			mount: (host) => mountForm(host, parsed.data, options)
 		};
 		outputs.set(node, output);
 		return output;
@@ -303,13 +303,14 @@ function parseOptions(value, path, issues) {
 		}] : [];
 	});
 }
-function mountForm(host, definition, runtime) {
+function mountForm(host, definition, options) {
 	const instanceId = String(++nextFormInstanceId);
 	const instancePrefix = `aigui-form-${instanceId}-${definition.id}`;
 	const cardType = `form:${definition.id}:${instanceId}`;
 	const owner = {};
 	const controller = new AbortController();
 	let pending = false;
+	let submitted = options.submitted === true;
 	let disposed = false;
 	const formElement = document.createElement("form");
 	formElement.noValidate = true;
@@ -329,18 +330,28 @@ function mountForm(host, definition, runtime) {
 	actionError.hidden = true;
 	formElement.appendChild(actionError);
 	const submit = document.createElement("button");
-	submit.type = "submit";
+	submit.type = "button";
+	submit.setAttribute("data-aigui-form-submit", "");
 	submit.textContent = definition.submitLabel ?? "Submit";
 	formElement.appendChild(submit);
+	const markSubmitted = () => {
+		if (disposed) return;
+		pending = false;
+		submitted = true;
+		formElement.removeAttribute("aria-busy");
+		formElement.setAttribute("data-aigui-form-submitted", "");
+		for (const element of Array.from(formElement.elements)) if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLButtonElement || element instanceof HTMLFieldSetElement) element.disabled = true;
+		submit.textContent = options.submittedLabel ?? "Submitted";
+	};
+	if (submitted) markSubmitted();
 	const onInput = (event) => {
 		const control = event.target;
 		if (!(control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement || control instanceof HTMLSelectElement)) return;
 		clearFieldError(control.name, controls, errorElements);
 		actionError.hidden = true;
 	};
-	const onSubmit = (event) => {
-		event.preventDefault();
-		if (pending || disposed) return;
+	const onSubmit = () => {
+		if (pending || submitted || disposed) return;
 		const validation = validateFormValues(definition, readControls(definition, controls));
 		renderErrors(validation.errors, controls, errorElements);
 		actionError.hidden = true;
@@ -357,14 +368,14 @@ function mountForm(host, definition, runtime) {
 			submit.disabled = false;
 			formElement.removeAttribute("aria-busy");
 		};
-		runtime.dispatch({
+		options.actionRuntime.dispatch({
 			type: definition.submitAction,
 			params: validation.values,
 			cardType
 		}, {
 			owner,
 			signal: controller.signal
-		}).then(settle, (error) => {
+		}).then(markSubmitted, (error) => {
 			if (!disposed && !controller.signal.aborted) {
 				actionError.textContent = actionErrorMessage(error);
 				actionError.hidden = false;
@@ -372,16 +383,19 @@ function mountForm(host, definition, runtime) {
 			settle();
 		});
 	};
+	const preventImplicitSubmit = (event) => event.preventDefault();
 	formElement.addEventListener("input", onInput);
 	formElement.addEventListener("change", onInput);
-	formElement.addEventListener("submit", onSubmit);
+	formElement.addEventListener("submit", preventImplicitSubmit);
+	submit.addEventListener("click", onSubmit);
 	host.replaceChildren(formElement);
 	return () => {
 		disposed = true;
 		controller.abort();
 		formElement.removeEventListener("input", onInput);
 		formElement.removeEventListener("change", onInput);
-		formElement.removeEventListener("submit", onSubmit);
+		formElement.removeEventListener("submit", preventImplicitSubmit);
+		submit.removeEventListener("click", onSubmit);
 	};
 }
 function createField(formId, field) {

package/dist/index.d.cts

@@ -56,6 +56,10 @@ interface FormValidationResult {
 interface FormPluginOptions {
   /** Shared core runtime whose registry is the only allowlist for submitAction. */
   actionRuntime: ActionRuntime;
+  /** Mount forms as already submitted, useful when restoring persisted conversations. */
+  submitted?: boolean;
+  /** Label shown after a successful or restored submission. */
+  submittedLabel?: string;
 }
 declare function formPromptSpec(): string;
 declare function form(options: FormPluginOptions): AIGuiPlugin;

package/dist/index.d.ts

@@ -56,6 +56,10 @@ interface FormValidationResult {
 interface FormPluginOptions {
   /** Shared core runtime whose registry is the only allowlist for submitAction. */
   actionRuntime: ActionRuntime;
+  /** Mount forms as already submitted, useful when restoring persisted conversations. */
+  submitted?: boolean;
+  /** Label shown after a successful or restored submission. */
+  submittedLabel?: string;
 }
 declare function formPromptSpec(): string;
 declare function form(options: FormPluginOptions): AIGuiPlugin;

package/dist/index.js

@@ -70,7 +70,7 @@ function form(options) {
 		}
 		const output = {
 			kind: "mount",
-			mount: (host) => mountForm(host, parsed.data, options.actionRuntime)
+			mount: (host) => mountForm(host, parsed.data, options)
 		};
 		outputs.set(node, output);
 		return output;
@@ -279,13 +279,14 @@ function parseOptions(value, path, issues) {
 		}] : [];
 	});
 }
-function mountForm(host, definition, runtime) {
+function mountForm(host, definition, options) {
 	const instanceId = String(++nextFormInstanceId);
 	const instancePrefix = `aigui-form-${instanceId}-${definition.id}`;
 	const cardType = `form:${definition.id}:${instanceId}`;
 	const owner = {};
 	const controller = new AbortController();
 	let pending = false;
+	let submitted = options.submitted === true;
 	let disposed = false;
 	const formElement = document.createElement("form");
 	formElement.noValidate = true;
@@ -305,18 +306,28 @@ function mountForm(host, definition, runtime) {
 	actionError.hidden = true;
 	formElement.appendChild(actionError);
 	const submit = document.createElement("button");
-	submit.type = "submit";
+	submit.type = "button";
+	submit.setAttribute("data-aigui-form-submit", "");
 	submit.textContent = definition.submitLabel ?? "Submit";
 	formElement.appendChild(submit);
+	const markSubmitted = () => {
+		if (disposed) return;
+		pending = false;
+		submitted = true;
+		formElement.removeAttribute("aria-busy");
+		formElement.setAttribute("data-aigui-form-submitted", "");
+		for (const element of Array.from(formElement.elements)) if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLButtonElement || element instanceof HTMLFieldSetElement) element.disabled = true;
+		submit.textContent = options.submittedLabel ?? "Submitted";
+	};
+	if (submitted) markSubmitted();
 	const onInput = (event) => {
 		const control = event.target;
 		if (!(control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement || control instanceof HTMLSelectElement)) return;
 		clearFieldError(control.name, controls, errorElements);
 		actionError.hidden = true;
 	};
-	const onSubmit = (event) => {
-		event.preventDefault();
-		if (pending || disposed) return;
+	const onSubmit = () => {
+		if (pending || submitted || disposed) return;
 		const validation = validateFormValues(definition, readControls(definition, controls));
 		renderErrors(validation.errors, controls, errorElements);
 		actionError.hidden = true;
@@ -333,14 +344,14 @@ function mountForm(host, definition, runtime) {
 			submit.disabled = false;
 			formElement.removeAttribute("aria-busy");
 		};
-		runtime.dispatch({
+		options.actionRuntime.dispatch({
 			type: definition.submitAction,
 			params: validation.values,
 			cardType
 		}, {
 			owner,
 			signal: controller.signal
-		}).then(settle, (error) => {
+		}).then(markSubmitted, (error) => {
 			if (!disposed && !controller.signal.aborted) {
 				actionError.textContent = actionErrorMessage(error);
 				actionError.hidden = false;
@@ -348,16 +359,19 @@ function mountForm(host, definition, runtime) {
 			settle();
 		});
 	};
+	const preventImplicitSubmit = (event) => event.preventDefault();
 	formElement.addEventListener("input", onInput);
 	formElement.addEventListener("change", onInput);
-	formElement.addEventListener("submit", onSubmit);
+	formElement.addEventListener("submit", preventImplicitSubmit);
+	submit.addEventListener("click", onSubmit);
 	host.replaceChildren(formElement);
 	return () => {
 		disposed = true;
 		controller.abort();
 		formElement.removeEventListener("input", onInput);
 		formElement.removeEventListener("change", onInput);
-		formElement.removeEventListener("submit", onSubmit);
+		formElement.removeEventListener("submit", preventImplicitSubmit);
+		submit.removeEventListener("click", onSubmit);
 	};
 }
 function createField(formId, field) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-form",
-  "version": "0.4.1",
+  "version": "0.4.4",
   "description": "Safe interactive form blocks for AIGUI, backed by the core ActionRuntime.",
   "keywords": [
     "llm",
@@ -49,7 +49,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@ai-gui/core": "0.4.1"
+    "@ai-gui/core": "0.4.4"
   },
   "scripts": {
     "build": "tsdown",