feat(frontend): multiselect/artifact-gate/artifact widgets + linkage + no-limbo

2026-06-28 12:36:13 +02:00
parent 2b55e96608
commit be9e761e0a
8 changed files with 389 additions and 1 deletions
@@ -0,0 +1,59 @@
+import { useState } from "react";
+import type { WidgetProps } from "./types";
+
+export function MultiselectWidget({ descriptor, onRespond }: WidgetProps) {
+  const options = descriptor.options ?? [];
+  const initialChecked = new Set(options.filter((o) => o.selected).map((o) => o.id));
+  const [checked, setChecked] = useState<Set<string>>(initialChecked);
+
+  const allChecked = options.length > 0 && options.every((o) => checked.has(o.id));
+
+  function toggle(id: string) {
+    setChecked((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function selectAll() {
+    setChecked(new Set(options.map((o) => o.id)));
+  }
+
+  function deselectAll() {
+    setChecked(new Set());
+  }
+
+  const isDisabled = descriptor.allow_empty === false && checked.size === 0;
+
+  return (
+    <div className="space-y-2">
+      {descriptor.title && <p className="font-medium">{descriptor.title}</p>}
+      <div className="flex gap-2">
+        <button className="text-sm border rounded px-2 py-1" onClick={allChecked ? deselectAll : selectAll}>
+          {allChecked ? "Deseleziona tutti" : "Seleziona tutti"}
+        </button>
+      </div>
+      <div className="flex flex-col gap-1">
+        {options.map((o) => (
+          <label key={o.id} className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={checked.has(o.id)}
+              onChange={() => toggle(o.id)}
+            />
+            {o.label}
+          </label>
+        ))}
+      </div>
+      <button
+        className="border rounded px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
+        disabled={isDisabled}
+        onClick={() => onRespond({ id: descriptor.id, kind: "multiselect", choices: Array.from(checked) })}
+      >
+        Conferma
+      </button>
+    </div>
+  );
+}