@mastra/playground-ui 5.1.6-alpha.0 → 5.1.6-alpha.2

package/dist/index.cjs.js

@@ -8638,7 +8638,8 @@ const BooleanField = ({ field, label, id, inputProps, value }) => /* @__PURE__ *
         };
         inputProps.onChange(event);
       },
-      defaultChecked: field.default
+      defaultChecked: field.default,
+      disabled: inputProps.disabled || inputProps.readOnly
     }
   ),
   /* @__PURE__ */ jsxRuntime.jsxs(Txt, { as: "label", variant: "ui-sm", className: "text-icon3", htmlFor: id, children: [
@@ -9140,21 +9141,26 @@ const ShadcnUIComponents = {
   ArrayWrapper,
   ArrayElementWrapper
 };
-const ShadcnAutoFormFieldComponents = {
-  string: StringField,
-  number: NumberField,
-  boolean: BooleanField,
-  date: DateField,
-  select: SelectField,
-  record: RecordField
-};
-function AutoForm({ uiComponents, formComponents, ...props }) {
+function AutoForm({
+  uiComponents,
+  formComponents,
+  readOnly,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react$3.AutoForm,
     {
       ...props,
       uiComponents: { ...ShadcnUIComponents, ...uiComponents },
-      formComponents: { ...ShadcnAutoFormFieldComponents, ...formComponents }
+      formComponents: {
+        string: (props2) => /* @__PURE__ */ jsxRuntime.jsx(StringField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        number: (props2) => /* @__PURE__ */ jsxRuntime.jsx(NumberField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        boolean: (props2) => /* @__PURE__ */ jsxRuntime.jsx(BooleanField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        date: (props2) => /* @__PURE__ */ jsxRuntime.jsx(DateField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        select: (props2) => /* @__PURE__ */ jsxRuntime.jsx(SelectField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        record: (props2) => /* @__PURE__ */ jsxRuntime.jsx(RecordField, { ...props2, inputProps: { ...props2.inputProps, readOnly } }),
+        ...formComponents
+      }
     }
   );
 }
@@ -9251,7 +9257,8 @@ function DynamicForm({
   defaultValues,
   isSubmitLoading,
   submitButtonLabel,
-  className
+  className,
+  readOnly
 }) {
   if (!schema) {
     console.error("no form schema found");
@@ -9283,7 +9290,7 @@ function DynamicForm({
     },
     withSubmit: true
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(AutoForm, { ...formProps, readOnly });
 }
 
 function resolveSerializedZodOutput(obj) {
@@ -9962,9 +9969,55 @@ function WorkflowTrigger({
         ] });
       })
     ] }),
-    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result: restResult }) })
+    result && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 border-b-sm border-border1", children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowJsonDialog, { result: restResult }) }),
+    result && /* @__PURE__ */ jsxRuntime.jsx(WorkflowResultSection, { result, workflow })
   ] });
 }
+const WorkflowResultSection = ({ result, workflow }) => {
+  const workflowState = result.payload.workflowState;
+  const hasResult = Object.keys(workflowState.steps || {}).length > 0;
+  if (!hasResult) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: "Final Output" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "pt-4", children: Object.entries(workflowState.steps || {}).map(([stepId, stepResult]) => {
+      const stepDefinition = workflow.steps[stepId];
+      if (!stepDefinition) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
+        {
+          className: "border-b-sm border-dashed border-border1 last:border-b-0 py-4 first:pt-0 last:pb-0",
+          children: /* @__PURE__ */ jsxRuntime.jsx(WorkflowResultFinishedStep, { stepResult: stepResult.output, stepDefinition })
+        },
+        stepId
+      );
+    }) })
+  ] });
+};
+const WorkflowResultFinishedStep = ({ stepResult, stepDefinition }) => {
+  const id = React.useId();
+  try {
+    const zodObjectSchema = resolveSerializedZodOutput(jsonSchemaToZod(superjson.parse(stepDefinition.outputSchema)));
+    if (zodObjectSchema?._def?.typeName === "ZodString") {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, { className: "text-icon3" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Txt, { as: "label", htmlFor: id, variant: "ui-sm", className: "text-icon3", children: stepDefinition.description || stepDefinition.id })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Input, { id, defaultValue: stepResult, readOnly: true })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 pb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Footprints, { className: "text-icon3" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Txt, { variant: "ui-sm", className: "text-icon3", children: stepDefinition.description || stepDefinition.id })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DynamicForm, { schema: zodObjectSchema, defaultValues: stepResult, readOnly: true })
+    ] });
+  } catch (err) {
+    console.error("Error parsing output schema", err);
+    return /* @__PURE__ */ jsxRuntime.jsx(Txt, { children: "An error occured. Please open an issue on GitHub." });
+  }
+};
 const WorkflowJsonDialog = ({ result }) => {
   const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [