@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/dist/modules/workflows/components/fields/ActivityConfigFields.js

@@ -0,0 +1,615 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
+import { IconButton } from "@open-mercato/ui/primitives/icon-button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { DurationInput } from "@open-mercato/ui/backend/inputs/DurationInput";
+import { EventPatternInput } from "@open-mercato/ui/backend/inputs/EventPatternInput";
+import { Plus, Trash2 } from "lucide-react";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import "../../lib/activity-registry-bootstrap.js";
+import { getActivityType } from "../../lib/activity-registry.js";
+import { CommandPicker } from "./CommandPicker.js";
+import { EndpointPicker } from "./EndpointPicker.js";
+import { FunctionPicker } from "./FunctionPicker.js";
+import { VariablePickerButton } from "./VariablePickerButton.js";
+import { ledgerDropTargetProps } from "./ledgerDropTarget.js";
+const TYPES_WITH_CONFIG_FORM = /* @__PURE__ */ new Set(["WAIT", "SEND_EMAIL", "CALL_WEBHOOK", "CALL_API", "EMIT_EVENT", "UPDATE_ENTITY", "EXECUTE_FUNCTION", "SET_VARIABLE", "INVOKE_AGENT"]);
+function hasActivityConfigForm(activityType) {
+  return TYPES_WITH_CONFIG_FORM.has(activityType) && getActivityType(activityType) != null;
+}
+const XOR_FIELD_GROUPS = {
+  WAIT: [["duration", "until"]]
+};
+const containsTemplate = (value) => value.includes("{{");
+function stringValue(value) {
+  return typeof value === "string" ? value : "";
+}
+function toDatetimeLocal(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const pad = (part) => String(part).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+function fromDatetimeLocal(value) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toISOString();
+}
+function objectToRows(value) {
+  if (value == null || typeof value !== "object" || Array.isArray(value)) return [];
+  return Object.entries(value).map(([key, entryValue]) => ({
+    key,
+    value: typeof entryValue === "string" ? entryValue : JSON.stringify(entryValue)
+  }));
+}
+function rowsToObject(rows) {
+  const result = {};
+  for (const row of rows) {
+    if (row.key.trim().length === 0) continue;
+    result[row.key] = row.value;
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+}
+function KeyValueRowsEditor({ idPrefix, label, value, onChange, disabled }) {
+  const t = useT();
+  const [rows, setRows] = React.useState(() => objectToRows(value));
+  const emittedRef = React.useRef(JSON.stringify(rowsToObject(objectToRows(value)) ?? {}));
+  React.useEffect(() => {
+    const external = value != null && typeof value === "object" && !Array.isArray(value) ? value : {};
+    const serialized = JSON.stringify(external);
+    if (serialized === emittedRef.current) return;
+    emittedRef.current = serialized;
+    setRows(objectToRows(value));
+  }, [value]);
+  const commit = (nextRows) => {
+    setRows(nextRows);
+    const nextObject = rowsToObject(nextRows);
+    emittedRef.current = JSON.stringify(nextObject ?? {});
+    onChange(nextObject);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    rows.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${idPrefix}-${rowIndex}-key`,
+          type: "text",
+          value: row.key,
+          onChange: (event) => commit(rows.map((entry, entryIndex) => entryIndex === rowIndex ? { ...entry, key: event.target.value } : entry)),
+          placeholder: t("workflows.fieldEditors.activities.keyValueKey"),
+          "aria-label": `${label} \u2014 ${t("workflows.fieldEditors.activities.keyValueKey")}`,
+          className: "text-xs",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${idPrefix}-${rowIndex}-value`,
+          type: "text",
+          value: row.value,
+          onChange: (event) => commit(rows.map((entry, entryIndex) => entryIndex === rowIndex ? { ...entry, value: event.target.value } : entry)),
+          placeholder: t("workflows.fieldEditors.activities.keyValueValue"),
+          "aria-label": `${label} \u2014 ${t("workflows.fieldEditors.activities.keyValueValue")}`,
+          className: "text-xs",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => commit(rows.filter((_, entryIndex) => entryIndex !== rowIndex)),
+          "aria-label": t("workflows.fieldEditors.activities.keyValueRemoveRow"),
+          disabled,
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+        }
+      )
+    ] }, rowIndex)),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: () => setRows([...rows, { key: "", value: "" }]),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-3 mr-1" }),
+          t("workflows.fieldEditors.activities.keyValueAddRow")
+        ]
+      }
+    )
+  ] });
+}
+function assignmentsToRows(value) {
+  if (!Array.isArray(value)) return [];
+  return value.map((entry) => {
+    const record = entry != null && typeof entry === "object" && !Array.isArray(entry) ? entry : {};
+    const path = typeof record.path === "string" ? record.path : "";
+    const rawValue = record.value;
+    if (typeof rawValue === "string") return { path, jsonMode: false, text: rawValue, invalid: false };
+    return {
+      path,
+      jsonMode: true,
+      text: rawValue === void 0 ? "" : JSON.stringify(rawValue, null, 2),
+      invalid: false
+    };
+  });
+}
+function parseAssignmentRowValue(row) {
+  if (!row.jsonMode) return { value: row.text, invalid: false };
+  if (row.text.trim().length === 0) return { value: void 0, invalid: false };
+  try {
+    return { value: JSON.parse(row.text), invalid: false };
+  } catch {
+    return { value: void 0, invalid: true };
+  }
+}
+function AssignmentRowsEditor({ idPrefix, label, value, onChange, disabled }) {
+  const t = useT();
+  const [rows, setRows] = React.useState(() => assignmentsToRows(value));
+  const emittedRef = React.useRef(JSON.stringify(Array.isArray(value) ? value : []));
+  React.useEffect(() => {
+    const serialized = JSON.stringify(Array.isArray(value) ? value : []);
+    if (serialized === emittedRef.current) return;
+    emittedRef.current = serialized;
+    setRows(assignmentsToRows(value));
+  }, [value]);
+  const commit = (nextRows) => {
+    const markedRows = nextRows.map((row) => ({ ...row, invalid: parseAssignmentRowValue(row).invalid }));
+    setRows(markedRows);
+    if (markedRows.some((row) => row.invalid)) return;
+    const assignments = [];
+    for (const row of markedRows) {
+      if (row.path.trim().length === 0) continue;
+      assignments.push({ path: row.path, value: parseAssignmentRowValue(row).value });
+    }
+    const next = assignments.length > 0 ? assignments : void 0;
+    emittedRef.current = JSON.stringify(next ?? []);
+    onChange(next);
+  };
+  const toggleJsonMode = (rowIndex) => {
+    commit(
+      rows.map((row, entryIndex) => {
+        if (entryIndex !== rowIndex) return row;
+        if (row.jsonMode) {
+          let nextText2 = row.text;
+          try {
+            const parsed = JSON.parse(row.text);
+            if (typeof parsed === "string") nextText2 = parsed;
+          } catch {
+            nextText2 = row.text;
+          }
+          return { ...row, jsonMode: false, text: nextText2 };
+        }
+        let nextText = row.text;
+        if (row.text.trim().length > 0) {
+          try {
+            JSON.parse(row.text);
+          } catch {
+            nextText = JSON.stringify(row.text);
+          }
+        }
+        return { ...row, jsonMode: true, text: nextText };
+      })
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    rows.map((row, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: `${idPrefix}-${rowIndex}-path`,
+          type: "text",
+          value: row.path,
+          onChange: (event) => commit(rows.map((entry, entryIndex) => entryIndex === rowIndex ? { ...entry, path: event.target.value } : entry)),
+          placeholder: t("workflows.fieldEditors.activities.assignmentPathPlaceholder"),
+          "aria-label": `${label} \u2014 ${t("workflows.fieldEditors.activities.assignmentPath")}`,
+          className: "text-xs",
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        row.jsonMode ? /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            id: `${idPrefix}-${rowIndex}-value`,
+            value: row.text,
+            onChange: (event) => commit(rows.map((entry, entryIndex) => entryIndex === rowIndex ? { ...entry, text: event.target.value } : entry)),
+            rows: 3,
+            placeholder: '{"key": "value"}',
+            "aria-label": `${label} \u2014 ${t("workflows.fieldEditors.activities.assignmentValue")}`,
+            "aria-invalid": row.invalid || void 0,
+            className: "text-xs font-mono",
+            disabled
+          }
+        ) : /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: `${idPrefix}-${rowIndex}-value`,
+            type: "text",
+            value: row.text,
+            onChange: (event) => commit(rows.map((entry, entryIndex) => entryIndex === rowIndex ? { ...entry, text: event.target.value } : entry)),
+            placeholder: t("workflows.fieldEditors.activities.assignmentValuePlaceholder"),
+            "aria-label": `${label} \u2014 ${t("workflows.fieldEditors.activities.assignmentValue")}`,
+            className: "text-xs",
+            disabled
+          }
+        ),
+        row.invalid && /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text mt-1", children: t("workflows.fieldEditors.activities.invalidJson") })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: row.jsonMode ? "secondary" : "ghost",
+          size: "sm",
+          onClick: () => toggleJsonMode(rowIndex),
+          "aria-pressed": row.jsonMode,
+          "aria-label": t("workflows.fieldEditors.activities.assignmentJsonToggle"),
+          disabled,
+          children: t("workflows.fieldEditors.activities.assignmentJsonToggle")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          variant: "ghost",
+          size: "sm",
+          onClick: () => commit(rows.filter((_, entryIndex) => entryIndex !== rowIndex)),
+          "aria-label": t("workflows.fieldEditors.activities.assignmentRemoveRow"),
+          disabled,
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+        }
+      )
+    ] }, rowIndex)),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: () => setRows([...rows, { path: "", jsonMode: false, text: "", invalid: false }]),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-3 mr-1" }),
+          t("workflows.fieldEditors.activities.assignmentAddRow")
+        ]
+      }
+    )
+  ] });
+}
+function JsonValueTextarea({ id, value, onChange, disabled }) {
+  const t = useT();
+  const serialized = React.useMemo(
+    () => value === void 0 ? "" : JSON.stringify(value, null, 2),
+    [value]
+  );
+  const [text, setText] = React.useState(serialized);
+  const [isInvalid, setIsInvalid] = React.useState(false);
+  const isFocusedRef = React.useRef(false);
+  const lastSerializedRef = React.useRef(serialized);
+  React.useEffect(() => {
+    if (serialized === lastSerializedRef.current) return;
+    lastSerializedRef.current = serialized;
+    if (isFocusedRef.current) return;
+    setText(serialized);
+    setIsInvalid(false);
+  }, [serialized]);
+  const handleChange = (event) => {
+    const nextText = event.target.value;
+    setText(nextText);
+    if (nextText.trim().length === 0) {
+      setIsInvalid(false);
+      onChange(void 0);
+      return;
+    }
+    try {
+      const parsed = JSON.parse(nextText);
+      setIsInvalid(false);
+      onChange(parsed);
+    } catch {
+      setIsInvalid(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        id,
+        value: text,
+        onChange: handleChange,
+        onFocus: () => {
+          isFocusedRef.current = true;
+        },
+        onBlur: () => {
+          isFocusedRef.current = false;
+          if (!isInvalid) setText(serialized);
+        },
+        placeholder: '{"key": "value"}',
+        rows: 3,
+        className: "text-xs font-mono",
+        "aria-invalid": isInvalid || void 0,
+        disabled
+      }
+    ),
+    isInvalid && /* @__PURE__ */ jsx("p", { className: "text-xs text-status-error-text mt-1", children: t("workflows.fieldEditors.activities.invalidJson") })
+  ] });
+}
+function ActivityConfigFields({ activityType, idPrefix, config, onChange, ledgerEntries, disabled }) {
+  const t = useT();
+  const entry = getActivityType(activityType);
+  if (!entry || entry.form.length === 0) return null;
+  const setField = (spec, nextValue) => {
+    const next = { ...config };
+    const isEmpty = nextValue === "" || nextValue === void 0;
+    if (isEmpty) {
+      delete next[spec.id];
+    } else {
+      next[spec.id] = nextValue;
+      for (const group of XOR_FIELD_GROUPS[activityType] ?? []) {
+        if (!group.includes(spec.id)) continue;
+        for (const sibling of group) {
+          if (sibling !== spec.id) delete next[sibling];
+        }
+      }
+    }
+    onChange(next);
+  };
+  const labelFor = (spec) => t(spec.labelKey ?? `workflows.activityConfig.${activityType}.${spec.id}`);
+  const renderControl = (spec) => {
+    const fieldId = `${idPrefix}-${spec.id}`;
+    const label = labelFor(spec);
+    const rawValue = config[spec.id];
+    switch (spec.component) {
+      case "duration":
+        return /* @__PURE__ */ jsx(
+          DurationInput,
+          {
+            id: fieldId,
+            value: stringValue(rawValue),
+            onChange: (nextValue) => setField(spec, nextValue),
+            "aria-label": label,
+            disabled
+          }
+        );
+      case "datetime": {
+        const current = stringValue(rawValue);
+        if (containsTemplate(current)) {
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id: fieldId,
+                type: "text",
+                value: current,
+                onChange: (event) => setField(spec, event.target.value),
+                className: "flex-1 text-xs",
+                disabled,
+                ...ledgerDropTargetProps({
+                  value: current,
+                  onValueChange: (nextValue) => setField(spec, nextValue),
+                  disabled
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              VariablePickerButton,
+              {
+                targetId: fieldId,
+                value: current,
+                onValueChange: (nextValue) => setField(spec, nextValue),
+                ledgerEntries,
+                disabled
+              }
+            )
+          ] });
+        }
+        return /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: fieldId,
+            type: "datetime-local",
+            value: toDatetimeLocal(current),
+            onChange: (event) => setField(spec, fromDatetimeLocal(event.target.value)),
+            className: "text-xs",
+            disabled
+          }
+        );
+      }
+      case "textarea":
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              id: fieldId,
+              value: stringValue(rawValue),
+              onChange: (event) => setField(spec, event.target.value),
+              rows: 4,
+              className: "flex-1 text-xs",
+              disabled,
+              ...ledgerDropTargetProps({
+                value: stringValue(rawValue),
+                onValueChange: (nextValue) => setField(spec, nextValue),
+                disabled
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            VariablePickerButton,
+            {
+              targetId: fieldId,
+              value: stringValue(rawValue),
+              onValueChange: (nextValue) => setField(spec, nextValue),
+              ledgerEntries,
+              disabled
+            }
+          )
+        ] });
+      case "eventName":
+        return /* @__PURE__ */ jsx(
+          EventPatternInput,
+          {
+            value: stringValue(rawValue),
+            onChange: (nextValue) => setField(spec, nextValue),
+            disabled
+          }
+        );
+      case "endpoint":
+        return /* @__PURE__ */ jsx(
+          EndpointPicker,
+          {
+            id: fieldId,
+            endpoint: stringValue(rawValue),
+            method: stringValue(config.method),
+            onApply: (patch) => {
+              const next = { ...config };
+              for (const [patchKey, patchValue] of Object.entries(patch)) {
+                if (patchValue === "" || patchValue === void 0) {
+                  delete next[patchKey];
+                } else {
+                  next[patchKey] = patchValue;
+                }
+              }
+              onChange(next);
+            },
+            ledgerEntries,
+            disabled
+          }
+        );
+      case "commandId":
+        return /* @__PURE__ */ jsx(
+          CommandPicker,
+          {
+            value: stringValue(rawValue),
+            onChange: (nextValue) => setField(spec, nextValue),
+            disabled
+          }
+        );
+      case "functionName":
+        return /* @__PURE__ */ jsx(
+          FunctionPicker,
+          {
+            value: stringValue(rawValue),
+            onChange: (nextValue) => setField(spec, nextValue),
+            disabled
+          }
+        );
+      case "assignments":
+        return /* @__PURE__ */ jsx(
+          AssignmentRowsEditor,
+          {
+            idPrefix: fieldId,
+            label,
+            value: rawValue,
+            onChange: (nextValue) => setField(spec, nextValue),
+            disabled
+          }
+        );
+      case "keyValue":
+        return /* @__PURE__ */ jsx(
+          KeyValueRowsEditor,
+          {
+            idPrefix: fieldId,
+            label,
+            value: rawValue,
+            onChange: (nextValue) => setField(spec, nextValue),
+            disabled
+          }
+        );
+      case "json":
+        return /* @__PURE__ */ jsx(
+          JsonValueTextarea,
+          {
+            id: fieldId,
+            value: rawValue,
+            onChange: (nextValue) => setField(spec, nextValue),
+            disabled
+          }
+        );
+      case "checkbox":
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              id: fieldId,
+              checked: rawValue === true,
+              onCheckedChange: (checked) => setField(spec, checked === true),
+              disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, className: "text-xs cursor-pointer", children: label })
+        ] });
+      default:
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: fieldId,
+              type: "text",
+              value: stringValue(rawValue),
+              onChange: (event) => setField(spec, event.target.value),
+              className: "flex-1 text-xs",
+              disabled,
+              ...ledgerDropTargetProps({
+                value: stringValue(rawValue),
+                onValueChange: (nextValue) => setField(spec, nextValue),
+                disabled
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            VariablePickerButton,
+            {
+              targetId: fieldId,
+              value: stringValue(rawValue),
+              onValueChange: (nextValue) => setField(spec, nextValue),
+              ledgerEntries,
+              disabled
+            }
+          )
+        ] });
+    }
+  };
+  const xorHintKey = XOR_FIELD_GROUPS[activityType] ? `workflows.activityConfig.${activityType}.xorHint` : null;
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    entry.form.map((spec) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...spec.component === "commandId" || spec.component === "functionName" ? { role: "group", "aria-labelledby": `${idPrefix}-${spec.id}-label` } : {},
+        children: [
+          spec.component !== "checkbox" && /* @__PURE__ */ jsxs(
+            Label,
+            {
+              id: `${idPrefix}-${spec.id}-label`,
+              ...spec.component === "commandId" || spec.component === "functionName" ? {} : { htmlFor: `${idPrefix}-${spec.id}` },
+              className: "text-xs font-medium mb-1",
+              children: [
+                labelFor(spec),
+                spec.required ? " *" : ""
+              ]
+            }
+          ),
+          renderControl(spec),
+          spec.descriptionKey && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: t(spec.descriptionKey) })
+        ]
+      },
+      spec.id
+    )),
+    xorHintKey && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t(xorHintKey) })
+  ] });
+}
+export {
+  ActivityConfigFields,
+  hasActivityConfigForm
+};
+//# sourceMappingURL=ActivityConfigFields.js.map