feat(auto-gen-form): accept image field in the auto-gen-form

packages/toolkit/src/lib/use-instill-form/components/common/FieldDescriptionTooltip.tsx

@@ -9,7 +9,7 @@ export const FieldDescriptionTooltip = ({
   description: Nullable<string>;
 }) => {
   return description ? (
-    <Tooltip.Provider>
+    <Tooltip.Provider delayDuration={300}>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <Icons.HelpCircle className="my-auto h-[14px] w-[14px] cursor-pointer stroke-semantic-fg-secondary" />

packages/toolkit/src/lib/use-instill-form/components/regular/ImageField.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import * as React from "react";
+import { Form } from "@instill-ai/design-system";
+import { AutoFormFieldBaseProps, Nullable } from "../../..";
+import { readFileToBinary } from "../../../../view";
+import { FileListItem } from "../trigger-request-form-fields/FileListItem";
+import { UploadFileInput } from "../trigger-request-form-fields/UploadFileInput";
+import { FieldDescriptionTooltip } from "../common";
+
+export const ImageField = ({
+  form,
+  path,
+  size,
+  title,
+  description,
+  shortDescription,
+  disabled,
+  isHidden,
+}: {
+  shortDescription?: string;
+  disabled?: boolean;
+} & AutoFormFieldBaseProps) => {
+  const [imageFile, setImageFile] = React.useState<Nullable<File>>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  return isHidden ? null : (
+    <Form.Field
+      key={path}
+      control={form.control}
+      name={path}
+      render={({ field }) => {
+        return (
+          <Form.Item className="w-full">
+            <div className="flex flex-row gap-x-2">
+              <Form.Label
+                className={size === "sm" ? "!product-body-text-4-medium" : ""}
+              >
+                {title}
+              </Form.Label>
+              <FieldDescriptionTooltip description={description} />
+            </div>
+            <div className="w-full">
+              {imageFile ? (
+                <img
+                  key={`${path}-${imageFile.name}`}
+                  src={URL.createObjectURL(imageFile)}
+                  alt={`${path}-${imageFile.name}`}
+                  className="h-[360px] w-full object-contain"
+                />
+              ) : (
+                <div
+                  key={`${path}-image-placeholder`}
+                  className="flex h-[260px] w-full items-center justify-center rounded-sm border border-semantic-bg-line bg-transparent"
+                ></div>
+              )}
+            </div>
+            <div className="flex">
+              <Form.Control>
+                <UploadFileInput
+                  keyPrefix={path}
+                  ref={inputRef}
+                  title="Upload image"
+                  fieldKey={path}
+                  accept="image/*"
+                  onChange={async (e) => {
+                    const file = e.target.files?.[0];
+                    if (file) {
+                      const binary = await readFileToBinary(file);
+                      field.onChange(binary);
+                      setImageFile(file);
+                    }
+                  }}
+                  disabled={disabled}
+                />
+              </Form.Control>
+            </div>
+            {imageFile ? (
+              <FileListItem
+                name={imageFile.name}
+                onDelete={() => {
+                  setImageFile(null);
+                  field.onChange(null);
+                  if (inputRef.current) {
+                    inputRef.current.value = "";
+                  }
+                }}
+              />
+            ) : null}
+            <Form.Description
+              className="nodrag nopan cursor-text select-text !text-xs"
+              text={shortDescription ?? null}
+            />
+            <Form.Message />
+          </Form.Item>
+        );
+      }}
+    />
+  );
+};

packages/toolkit/src/lib/use-instill-form/components/regular/index.ts

@@ -1,6 +1,7 @@
 import { BooleanField } from "./BooleanField";
 import { CollapsibleFormGroup } from "./CollapsibleFormGroup";
 import { CredentialTextField } from "./CredentialTextField";
+import { ImageField } from "./ImageField";
 import { OneOfConditionField } from "./OneOfConditionField";
 import { SingleSelectField } from "./SingleSelectField";
 import { TextAreaField } from "./TextAreaField";
@@ -10,6 +11,7 @@ export const RegularFields = {
   BooleanField,
   CollapsibleFormGroup,
   CredentialTextField,
+  ImageField,
   OneOfConditionField,
   SingleSelectField,
   TextAreaField,

packages/toolkit/src/lib/use-instill-form/pick/pickRegularFieldsFromInstillFormTree.tsx

@@ -267,6 +267,32 @@ export function pickRegularFieldsFromInstillFormTree(
     return null;
   }
 
+  // Deal with using the auto-gen-form structure to generate regular fields instead
+  // of the reference structure of pipeline-builder
+  if (
+    !tree.instillUpstreamTypes ||
+    (tree.instillUpstreamTypes.length === 1 &&
+      tree.instillUpstreamTypes[0] === "value")
+  ) {
+    if (tree.instillAcceptFormats) {
+      if (tree.instillAcceptFormats[0].includes("image")) {
+        return (
+          <RegularFields.ImageField
+            key={tree.path}
+            path={tree.path}
+            title={title}
+            form={form}
+            description={tree.description ?? null}
+            shortDescription={tree.instillShortDescription}
+            disabled={disabledAll}
+            size={size}
+            isHidden={tree.isHidden}
+          />
+        );
+      }
+    }
+  }
+
   if (tree.type === "boolean") {
     return (
       <RegularFields.BooleanField