@drawbridge/components 0.0.78 → 0.1.0

package/dist/dashboard/form-ai.mjs

@@ -0,0 +1,742 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { request } from "@drawbridge/drawbridge-utils/fetch";
+import { useForm, FormProvider, Controller } from "../shared/lib/form";
+import { useQueryClient } from "@tanstack/react-query";
+import { regex } from "@drawbridge/drawbridge-utils";
+import yup, { resolver } from "../shared/lib/yup";
+import Form from "../shared/form";
+import Fieldset from "../shared/fieldset";
+import InputGroup from "../input-group";
+import InputText from "../input-text";
+import InputUrl from "../shared/input-url";
+import InputResource from "./input-resource";
+import { InputFieldsCampaign, InputFieldsPage, schemas } from "./input-fields";
+import InputTextarea from "../input-textarea";
+import InputRadio from "./input-radio";
+import CardTask from "./card-task";
+import WrapperAI from "./wrapper-ai";
+import Accordion from "./accordion";
+import LinkBack from "./link-back";
+import Button from "../shared/button";
+const FormAiBrand = ({
+  disabled,
+  onError,
+  onSuccess,
+  values
+}) => {
+  const { control, formState, handleSubmit } = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        title: yup.string().label("Title").max(150).nullable(),
+        url: yup.string().label("Url").max(150).matches(regex.url, "Url must start with https").required().url()
+      })
+    ),
+    values
+  });
+  const onSubmit = async ({
+    title,
+    url
+  }) => {
+    try {
+      const args = {
+        body: {
+          title,
+          url
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/ai/brand",
+        method: "POST"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: /* @__PURE__ */ jsxs(WrapperAI, { children: [
+        /* @__PURE__ */ jsxs(
+          Fieldset,
+          {
+            ...{
+              className: "space-y-4",
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "title",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.title) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputText,
+                              {
+                                ...{
+                                  onChange,
+                                  placeholder: "Brand title",
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "Brand title"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "url",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            // As the campaign form below: without it a missing or
+                            // invalid url left Generate doing nothing, no message.
+                            error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.url) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputUrl,
+                              {
+                                ...{
+                                  onChange,
+                                  placeholder: "Enter a url to get started",
+                                  value: value || ""
+                                }
+                              }
+                            )
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit",
+                  variant: "ai"
+                },
+                children: "Generate"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+const FormAiCampaign = ({
+  disabled,
+  onError,
+  onSuccess,
+  values
+}) => {
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const methods = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        ...schemas.campaign({ typeEnum: app.enums.campaign.type.enum }),
+        url: yup.string().label("Url").max(150).matches(regex.url, "Url must start with https").required().url()
+      })
+    ),
+    values: {
+      type: "giveaway",
+      ...values
+    }
+  });
+  const { control, formState, handleSubmit } = methods;
+  const onSubmit = async ({
+    title,
+    type,
+    url
+  }) => {
+    try {
+      const args = {
+        body: {
+          title,
+          type,
+          url
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/ai/campaign",
+        method: "POST"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: /* @__PURE__ */ jsxs(WrapperAI, { children: [
+        /* @__PURE__ */ jsxs(
+          Fieldset,
+          {
+            ...{
+              className: "space-y-4",
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: [
+              /* @__PURE__ */ jsx(InputFieldsCampaign, {}),
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "url",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.url) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputUrl,
+                              {
+                                ...{
+                                  onChange,
+                                  placeholder: "Enter a url to get started",
+                                  value: value || ""
+                                }
+                              }
+                            )
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit",
+                  variant: "ai"
+                },
+                children: "Generate"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) });
+};
+const FormAiImage = ({
+  children,
+  disabled,
+  onError,
+  onSuccess,
+  values = {}
+}) => {
+  var _a;
+  const { control, formState, handleSubmit, setError } = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        prompt: yup.string().label("Prompt").required().max(300).min(3)
+      })
+    ),
+    values
+  });
+  const onSubmit = async ({
+    prompt
+  }) => {
+    try {
+      const args = {
+        body: {
+          ...values,
+          prompt: prompt.trim()
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/ai/image",
+        method: "POST"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      setError("generate", {
+        message: error == null ? void 0 : error.message
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        children,
+        ((_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.generate) && /* @__PURE__ */ jsx(
+          CardTask,
+          {
+            ...{
+              message: formState.errors.generate.message,
+              type: "error"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(WrapperAI, { children: [
+          /* @__PURE__ */ jsx(
+            Fieldset,
+            {
+              ...{
+                className: "space-y-4",
+                disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+              },
+              children: /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "prompt",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a2, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b = (_a2 = formState == null ? void 0 : formState.errors) == null ? void 0 : _a2.prompt) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputTextarea,
+                              {
+                                ...{
+                                  onChange,
+                                  placeholder: "Your image prompt...",
+                                  value: value || ""
+                                }
+                              }
+                            )
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Fieldset,
+            {
+              ...{
+                disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+              },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    loading: formState == null ? void 0 : formState.isSubmitting,
+                    type: "submit",
+                    variant: "ai"
+                  },
+                  children: "Generate"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+const FormAiPage = ({
+  canManageBrands,
+  disabled,
+  onError,
+  onSuccess,
+  values
+}) => {
+  const methods = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        ...schemas.page(),
+        brand: yup.object().label("Brand").nullable(),
+        url: yup.string().label("Url").max(150).matches(regex.url, "Url must start with https").required().url()
+      })
+    ),
+    values
+  });
+  const { control, formState, handleSubmit } = methods;
+  const onSubmit = async ({
+    brand,
+    title,
+    url
+  }) => {
+    try {
+      const args = {
+        body: {
+          brand: (brand == null ? void 0 : brand.id) ?? null,
+          title,
+          url
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/campaign/" + (values == null ? void 0 : values.campaign) + "/ai/page",
+        method: "POST"
+      };
+      const response = await request(args);
+      onSuccess(response);
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormProvider, { ...methods, children: /* @__PURE__ */ jsx(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: /* @__PURE__ */ jsxs(WrapperAI, { children: [
+        /* @__PURE__ */ jsxs(
+          Fieldset,
+          {
+            ...{
+              className: "space-y-4",
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: [
+              /* @__PURE__ */ jsx(InputFieldsPage, {}),
+              /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "url",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.url) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputUrl,
+                              {
+                                ...{
+                                  onChange,
+                                  placeholder: "Enter a url to get started",
+                                  value: value || ""
+                                }
+                              }
+                            ),
+                            label: "Url"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              ),
+              canManageBrands && /* @__PURE__ */ jsx(
+                Controller,
+                {
+                  ...{
+                    control,
+                    name: "brand",
+                    render: ({ field: { value, onChange } }) => {
+                      var _a, _b;
+                      return /* @__PURE__ */ jsx(
+                        InputGroup,
+                        {
+                          ...{
+                            error: (_b = (_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.brand) == null ? void 0 : _b.message,
+                            input: /* @__PURE__ */ jsx(
+                              InputResource,
+                              {
+                                ...{
+                                  endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/brands",
+                                  model: "brand",
+                                  onChange,
+                                  value
+                                }
+                              }
+                            ),
+                            label: "Brand"
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Fieldset,
+          {
+            ...{
+              disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+            },
+            children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                ...{
+                  loading: formState == null ? void 0 : formState.isSubmitting,
+                  type: "submit",
+                  variant: "ai"
+                },
+                children: "Generate"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) });
+};
+const FormAiText = ({
+  disabled,
+  onChange = () => {
+  },
+  values
+}) => {
+  var _a, _b, _c, _d;
+  const queryClient = useQueryClient();
+  const app = queryClient.getQueryData(["app"]);
+  const [response, setResponse] = useState(null);
+  const { control, formState, handleSubmit, setError } = useForm({
+    guard: false,
+    resolver: resolver(
+      yup.object({
+        context: yup.object().label("Context").required(),
+        value: yup.string().label("Value").required()
+      })
+    ),
+    values
+  });
+  const onSubmit = async ({
+    context,
+    value
+  }) => {
+    try {
+      const args = {
+        body: {
+          ...context,
+          limit: values == null ? void 0 : values.limit,
+          value
+        },
+        endpoint: "/organization/" + (values == null ? void 0 : values.organization) + "/ai/text",
+        method: "POST"
+      };
+      const { result } = await request(args);
+      setResponse(result);
+    } catch (error) {
+      setError(
+        "generated",
+        {
+          type: "custom",
+          error
+        }
+      );
+    }
+  };
+  const readOnlyInput = (props) => /* @__PURE__ */ jsx(
+    InputTextarea,
+    {
+      ...{
+        disabled: true,
+        readOnly: true,
+        ...props
+      }
+    }
+  );
+  if (response) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...{
+          className: "space-y-4 p-6"
+        },
+        children: /* @__PURE__ */ jsxs(WrapperAI, { children: [
+          /* @__PURE__ */ jsx(
+            LinkBack,
+            {
+              ...{
+                element: "button",
+                onClick: () => setResponse(null),
+                type: "button"
+              },
+              children: "Back"
+            }
+          ),
+          readOnlyInput({
+            value: response == null ? void 0 : response.content
+          }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...{
+                className: "space-y-4"
+              },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    onClick: () => onChange(response == null ? void 0 : response.content),
+                    variant: "ai"
+                  },
+                  children: "Use this response"
+                }
+              )
+            }
+          )
+        ] })
+      }
+    );
+  }
+  ;
+  return /* @__PURE__ */ jsxs(
+    Form,
+    {
+      ...{
+        className: "relative w-full space-y-6 p-6",
+        onSubmit: handleSubmit(onSubmit)
+      },
+      children: [
+        ((_a = formState == null ? void 0 : formState.errors) == null ? void 0 : _a.generated) && /* @__PURE__ */ jsx(
+          CardTask,
+          {
+            ...{
+              ...(_b = formState.errors.generated) == null ? void 0 : _b.error,
+              // An Error's message is not enumerable, so the spread above drops it.
+              message: (_d = (_c = formState.errors.generated) == null ? void 0 : _c.error) == null ? void 0 : _d.message,
+              type: "error"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(WrapperAI, { children: [
+          /* @__PURE__ */ jsxs(
+            Fieldset,
+            {
+              ...{
+                disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+              },
+              children: [
+                readOnlyInput({
+                  value: values == null ? void 0 : values.value
+                }),
+                /* @__PURE__ */ jsx(
+                  Controller,
+                  {
+                    ...{
+                      control,
+                      name: "context",
+                      render: ({ field: { value, onChange: onChange2 } }) => {
+                        var _a2;
+                        return (((_a2 = app == null ? void 0 : app.contexts) == null ? void 0 : _a2.list) || []).map(({ section, items }, key) => /* @__PURE__ */ jsx(
+                          Accordion,
+                          {
+                            ...{
+                              title: section
+                            },
+                            children: (items || []).map((item, i) => /* @__PURE__ */ jsx(
+                              InputRadio,
+                              {
+                                ...{
+                                  checked: Boolean(JSON.stringify(value) === JSON.stringify(item)),
+                                  id: "context-option-" + key + "-item-" + i,
+                                  label: item.title,
+                                  name: "method",
+                                  onChange: () => onChange2(item),
+                                  value: item
+                                }
+                              },
+                              "context-option-" + key + "-item-" + i
+                            ))
+                          },
+                          key
+                        ));
+                      }
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Fieldset,
+            {
+              ...{
+                disabled: disabled || (formState == null ? void 0 : formState.isSubmitting)
+              },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ...{
+                    loading: formState == null ? void 0 : formState.isSubmitting,
+                    type: "submit",
+                    variant: "ai"
+                  },
+                  children: "Generate"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+export {
+  FormAiBrand,
+  FormAiCampaign,
+  FormAiImage,
+  FormAiPage,
+  FormAiText
+};