@ai-gui/plugin-form 0.6.1 → 0.7.0

package/dist/index.cjs

@@ -318,22 +318,45 @@ function mountForm(host, definition, options) {
 	formElement.setAttribute("data-aigui-form-instance", instanceId);
 	const controls = new Map();
 	const errorElements = new Map();
+	const fieldContainers = new Map();
 	for (const field of definition.fields) {
 		const rendered = createField(instancePrefix, field);
 		formElement.appendChild(rendered.container);
 		controls.set(field.name, rendered.control);
 		errorElements.set(field.name, rendered.error);
+		fieldContainers.set(field.name, rendered.container);
 	}
 	const actionError = document.createElement("div");
 	actionError.setAttribute("data-aigui-form-action-error", "");
 	actionError.setAttribute("role", "alert");
 	actionError.hidden = true;
 	formElement.appendChild(actionError);
+	const outcomeMessage = document.createElement("div");
+	outcomeMessage.setAttribute("data-aigui-form-outcome-message", "");
+	outcomeMessage.setAttribute("aria-live", "polite");
+	outcomeMessage.hidden = true;
+	formElement.appendChild(outcomeMessage);
 	const submit = document.createElement("button");
 	submit.type = "button";
 	submit.setAttribute("data-aigui-form-submit", "");
 	submit.textContent = definition.submitLabel ?? "Submit";
 	formElement.appendChild(submit);
+	/**
+	* Show how the submission turned out, when the handler judged it.
+	*
+	* The result used to be discarded, so an app that knew the answer was wrong had no way to say so
+	* — the form simply disabled itself and read "Submitted" whether the answer was right or not.
+	*/
+	const applyOutcome = (result) => {
+		const outcome = (0, __ai_gui_core.actionOutcome)(result);
+		if (!outcome || disposed) return;
+		formElement.setAttribute("data-aigui-form-outcome", outcome.tone);
+		if (outcome.message) {
+			outcomeMessage.textContent = outcome.message;
+			outcomeMessage.hidden = false;
+		}
+		for (const [name, tone] of Object.entries(outcome.fields ?? {})) fieldContainers.get(name)?.setAttribute("data-aigui-form-field-outcome", tone);
+	};
 	const markSubmitted = () => {
 		if (disposed) return;
 		pending = false;
@@ -375,7 +398,10 @@ function mountForm(host, definition, options) {
 		}, {
 			owner,
 			signal: controller.signal
-		}).then(markSubmitted, (error) => {
+		}).then((result) => {
+			markSubmitted();
+			applyOutcome(result);
+		}, (error) => {
 			if (!disposed && !controller.signal.aborted) {
 				actionError.textContent = actionErrorMessage(error);
 				actionError.hidden = false;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ActionRuntimeError } from "@ai-gui/core";
+import { ActionRuntimeError, actionOutcome } from "@ai-gui/core";
 
 //#region src/index.ts
 const FIELD_TYPES = new Set([
@@ -294,22 +294,45 @@ function mountForm(host, definition, options) {
 	formElement.setAttribute("data-aigui-form-instance", instanceId);
 	const controls = new Map();
 	const errorElements = new Map();
+	const fieldContainers = new Map();
 	for (const field of definition.fields) {
 		const rendered = createField(instancePrefix, field);
 		formElement.appendChild(rendered.container);
 		controls.set(field.name, rendered.control);
 		errorElements.set(field.name, rendered.error);
+		fieldContainers.set(field.name, rendered.container);
 	}
 	const actionError = document.createElement("div");
 	actionError.setAttribute("data-aigui-form-action-error", "");
 	actionError.setAttribute("role", "alert");
 	actionError.hidden = true;
 	formElement.appendChild(actionError);
+	const outcomeMessage = document.createElement("div");
+	outcomeMessage.setAttribute("data-aigui-form-outcome-message", "");
+	outcomeMessage.setAttribute("aria-live", "polite");
+	outcomeMessage.hidden = true;
+	formElement.appendChild(outcomeMessage);
 	const submit = document.createElement("button");
 	submit.type = "button";
 	submit.setAttribute("data-aigui-form-submit", "");
 	submit.textContent = definition.submitLabel ?? "Submit";
 	formElement.appendChild(submit);
+	/**
+	* Show how the submission turned out, when the handler judged it.
+	*
+	* The result used to be discarded, so an app that knew the answer was wrong had no way to say so
+	* — the form simply disabled itself and read "Submitted" whether the answer was right or not.
+	*/
+	const applyOutcome = (result) => {
+		const outcome = actionOutcome(result);
+		if (!outcome || disposed) return;
+		formElement.setAttribute("data-aigui-form-outcome", outcome.tone);
+		if (outcome.message) {
+			outcomeMessage.textContent = outcome.message;
+			outcomeMessage.hidden = false;
+		}
+		for (const [name, tone] of Object.entries(outcome.fields ?? {})) fieldContainers.get(name)?.setAttribute("data-aigui-form-field-outcome", tone);
+	};
 	const markSubmitted = () => {
 		if (disposed) return;
 		pending = false;
@@ -351,7 +374,10 @@ function mountForm(host, definition, options) {
 		}, {
 			owner,
 			signal: controller.signal
-		}).then(markSubmitted, (error) => {
+		}).then((result) => {
+			markSubmitted();
+			applyOutcome(result);
+		}, (error) => {
 			if (!disposed && !controller.signal.aborted) {
 				actionError.textContent = actionErrorMessage(error);
 				actionError.hidden = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-gui/plugin-form",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "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.6.1"
+    "@ai-gui/core": "0.7.0"
   },
   "scripts": {
     "build": "tsdown",