@integry/sdk 4.7.39 → 4.7.41

package/src/features/common/FunctionForm/index.ts

@@ -1,1095 +0,0 @@
-'use client';
-
-/* eslint-disable no-nested-ternary */
-import { html, Component } from 'htm/preact';
-import { connect } from 'unistore/preact';
-import { useContext } from 'preact/hooks';
-// import DOMPurify from 'dompurify';
-import { ListBox } from '@/components/MultipurposeField/Dropdown';
-import { actionFunctions } from '@/store';
-import { Button } from '@/components/Button';
-import type { StoreType } from '@/types/store';
-import { MultipurposeField } from '@/components/MultipurposeField';
-import DynamicTypedField from '@/features/common/DynamicTypedField';
-import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
-import AppContext from '@/contexts/AppContext';
-import { ObjectField } from '@/components/form/ObjectField';
-import { LargeLoader } from '@/components/LargeLoader';
-import {
-  JSONToActivityOutputData,
-  JSONToDynamicFieldData,
-  arrayToNestedJSONWithFirstValue,
-} from '@/utils/ActivityOutputUtils';
-
-import styles from './styles.module.scss';
-
-interface FunctionFormPropsType extends StoreType {
-  functionName: string;
-  connectedAccountId: string;
-  functionArguments: any;
-  variables: any;
-  autoMapVars: boolean;
-  version?: string | null;
-  onClose: (response: any) => void;
-  apiHandler: any;
-  customSaveCallback?: (response: any) => void; // Optional callback: Helps the implementor to implement their own save button
-  showMappingMenu?: boolean; // Optional prop to show mapping menu
-  forceShowAllFields?: boolean; // Optional prop to show all fields including hidden fields
-  enableAIAssist?: boolean; // New prop for enabling AI assist feature
-  defaultAIAssistedFields?: string[]; // New prop for field IDs that should have AI assist enabled by default
-  onAIAssistToggle?: (
-    fieldId: string,
-    enabled: boolean,
-    allAIAssistedFields: string[],
-  ) => void; // Callback when AI assist toggle changes
-  allowWorkspaceConnectedAccounts?: boolean;
-}
-
-interface ActionFormStateType {
-  loading: boolean;
-  dynamicFieldDataState: any;
-  isSubmitting: boolean;
-  functionDetails: any;
-  invalidFields: any;
-  parentFields: any;
-  parentFieldsChanged: boolean;
-  aiAssistedFields: string[]; // New state to track fields with AI assist enabled
-  changedParentMachineName?: string; // New prop to track changes in parent machine name
-  parentChangeVersion?: number; // New prop to track changes in parent machine name
-}
-
-interface StepDataMapping {
-  [key: string]: any;
-}
-
-type Option = {
-  id: any;
-  value: string;
-};
-
-class FunctionForm extends Component<
-  FunctionFormPropsType,
-  ActionFormStateType
-> {
-  constructor(props: FunctionFormPropsType) {
-    super(props);
-    this.state = {
-      loading: false,
-      dynamicFieldDataState: {},
-      isSubmitting: false,
-      functionDetails: {},
-      invalidFields: [],
-      parentFields: [],
-      parentFieldsChanged: false,
-      aiAssistedFields: [], // Initialize empty array for AI assisted fields
-      changedParentMachineName: '',
-      parentChangeVersion: 0,
-    };
-  }
-
-  getMethod = () => 'POST';
-
-  getBaseUrl = () => 'https://api.integry.io/functions';
-
-  getHeaders = () => ({
-    'Content-Type': 'application/json',
-  });
-
-  componentDidMount() {
-    this.setState({ loading: true });
-    this.props.apiHandler
-      .getFunctionDetails(
-        this.props.functionName,
-        this.props.autoMapVars ? this.props.variables : {},
-        this.props.version,
-        this.props.allowWorkspaceConnectedAccounts,
-      )
-      .then((response: any) => {
-        this.setState({ functionDetails: response });
-
-        const { functionArguments } = this.props;
-        const predictedArguments = this.props.autoMapVars
-          ? response.arguments
-          : {};
-        const argumentsData = response.parameters.properties;
-        const args: { [key: string]: any } = {};
-
-        Object.keys(argumentsData).forEach((key: string) => {
-          args[key] =
-            predictedArguments[key] ||
-            functionArguments[key] ||
-            argumentsData[key].meta.ui.default_value ||
-            '';
-
-          // Only add to invalidFields if not AI assisted
-          if (argumentsData[key].meta.is_required && !args[key]) {
-            this.setState((prevState) => ({
-              invalidFields: prevState.invalidFields.includes(key)
-                ? prevState.invalidFields
-                : [...prevState.invalidFields, key],
-            }));
-          }
-          if (argumentsData[key].meta.ui.ui_field?.data_source?.body) {
-            // Extract all the keys in the body
-            const bodyKeys = Object.keys(
-              argumentsData[key].meta.ui.ui_field.data_source.body,
-            );
-
-            // Iterate through the keys and check if the value matches the format {parameters.<parent-field-name>}
-            bodyKeys.forEach((bodyKey) => {
-              const value =
-                argumentsData[key].meta.ui.ui_field.data_source.body[bodyKey];
-
-              // Check if the value matches the format {parameters.<parent-field-name>}
-              const match = value && value.match(/{parameters\.(.*?)}/);
-
-              if (match && match[1]) {
-                const parentField = match[1]; // Extract the parent field name
-
-                // Add the parent field to the parentFields array
-                this.setState((prevState) => ({
-                  parentFields: [...prevState.parentFields, parentField],
-                }));
-              }
-            });
-          }
-        });
-        this.setState({
-          dynamicFieldDataState: args,
-        });
-
-        // Enable AI assist for default fields if provided
-        if (
-          this.props.enableAIAssist &&
-          this.props.defaultAIAssistedFields &&
-          this.props.defaultAIAssistedFields.length > 0
-        ) {
-          const validFieldIds = Object.keys(response.parameters.properties);
-          const defaultAIFields = this.props.defaultAIAssistedFields.filter(
-            (fieldId) => validFieldIds.includes(fieldId),
-          );
-
-          if (defaultAIFields.length > 0) {
-            this.setState((prevState) => {
-              // Create new arrays to avoid mutating state directly
-              const newAIAssistedFields = [
-                ...prevState.aiAssistedFields,
-                ...defaultAIFields,
-              ];
-              const newInvalidFields = prevState.invalidFields.filter(
-                (fieldId: string) => !defaultAIFields.includes(fieldId),
-              );
-
-              // Notify parent component about the default AI assisted fields
-              if (this.props.onAIAssistToggle && defaultAIFields.length > 0) {
-                // Call once for each field to ensure proper tracking
-                defaultAIFields.forEach((fieldId) => {
-                  this.props.onAIAssistToggle!(
-                    fieldId,
-                    true,
-                    newAIAssistedFields,
-                  );
-                });
-              }
-
-              // If we have a custom save callback, notify it about the changes
-              if (this.props.customSaveCallback) {
-                // Get current data state but exclude AI assisted fields
-                this.props.customSaveCallback({
-                  hasInvalidFields: newInvalidFields.length > 0,
-                  data: args,
-                });
-              }
-
-              return {
-                aiAssistedFields: newAIAssistedFields,
-                invalidFields: newInvalidFields,
-              };
-            });
-          }
-        }
-
-        this.setState({ loading: false });
-      });
-  }
-
-  private removeLastIfEmpty = (arr: any) => {
-    if (
-      arr.length > 0 &&
-      (arr[arr.length - 1] === '' || arr[arr.length - 1] == null)
-    ) {
-      arr.pop(); // Remove the last item if it is empty or null
-    }
-    return arr;
-  };
-
-  private onSubmit = (
-    event: any,
-    returnResponse = false,
-    AIAssistFieldId = '',
-  ) => {
-    this.setState({ isSubmitting: true });
-    const { functionName } = this.props;
-    const { functionDetails } = this.state;
-    const args: { [key: string]: any } = {};
-    const { dynamicFieldDataState, aiAssistedFields } = this.state;
-
-    Object.keys(dynamicFieldDataState).forEach((key: string) => {
-      const fieldDetails = functionDetails.parameters.properties[key];
-      let value = dynamicFieldDataState[key] || '';
-
-      // If field is AI assisted, mark it in the submission
-      if (aiAssistedFields.includes(key) || key === AIAssistFieldId) {
-        return; // Skip further processing for this field
-      }
-
-      // Check for field type and cast value
-      if (fieldDetails) {
-        switch (fieldDetails.type) {
-          case 'boolean':
-            value =
-              value === 'true' ||
-              value === true ||
-              value === '1' ||
-              value === 1;
-            break;
-          case 'number':
-            break;
-          case 'string':
-            value = String(value);
-            break;
-          case 'array':
-            value = this.removeLastIfEmpty(value);
-            value = value === '' || value === '[]' ? [] : value;
-            if (fieldDetails.items && fieldDetails.items.type === 'number') {
-              value = value.map((item: string) => Number(item));
-            } else if (
-              fieldDetails.items &&
-              fieldDetails.items.type === 'string' &&
-              typeof value === 'string'
-            ) {
-              try {
-                value = JSON.parse(value);
-              } catch (e) {
-                value = [];
-              }
-            }
-
-            break;
-          case 'object':
-            if (typeof value === 'object' && value !== null) {
-              // If it's already an object, do nothing
-              break;
-            } else {
-              // If it's a string that can be parsed into an object
-              try {
-                value = JSON.parse(value);
-                // Ensure the parsed value is an object
-              } catch (e) {
-                if (typeof value === 'string') {
-                  value = {
-                    [fieldDetails.meta.title]: value,
-                  };
-                } else {
-                  value = {};
-                }
-              }
-            }
-            break;
-          default:
-            value = String(value);
-            break;
-        }
-      }
-
-      // Assign the correctly cast value to args
-      if (value) {
-        args[key] = value;
-      }
-    });
-
-    if (returnResponse) {
-      return args;
-    }
-
-    this.props.onClose(args);
-    return args;
-  };
-
-  parseJsonArray = (input: string): any[] => {
-    // First, try to parse the input as a JSON array
-    try {
-      const parsed = JSON.parse(input);
-      if (Array.isArray(parsed)) {
-        return parsed; // Return the valid array
-      }
-    } catch (error) {
-      // If parsing fails, continue to the next check
-    }
-
-    // If the input is a comma-separated string (e.g., "1,2,3")
-    let trimmedInput = '';
-    try {
-      trimmedInput = input.trim();
-    } catch (error) {
-      // If the input is not a string, return an empty array
-      trimmedInput = '';
-    }
-    if (trimmedInput.includes(',')) {
-      // Split by commas and return the values as an array
-      return trimmedInput.split(',').map((item) => item.trim());
-    }
-
-    // If the input is a single value (e.g., "yasir@integry.io" or "1")
-    return [trimmedInput];
-  };
-
-  onFieldChange = (
-    fieldId: string,
-    value: any,
-    dataType: string,
-    isRequired?: boolean,
-    parentFieldId?: string | null,
-    index = -1,
-    stopChangePropagation = false,
-  ) => {
-    this.setState((prevState) => {
-      const newState = { ...prevState.dynamicFieldDataState };
-
-      if (parentFieldId) {
-        // If parentFieldId is not empty, ensure the parent field exists
-        if (!newState[parentFieldId]) {
-          if (index !== -1) {
-            newState[parentFieldId] = [];
-            newState[parentFieldId][index] = {};
-          } else {
-            newState[parentFieldId] = {}; // Create an object if it doesn't exist
-          }
-        }
-        // Add the fieldId and value inside the parentFieldId
-        if (index !== -1) {
-          newState[parentFieldId] = value;
-        } else {
-          newState[parentFieldId][fieldId] = value;
-        }
-      } else if (
-        stopChangePropagation &&
-        dataType === 'array' &&
-        !Array.isArray(value)
-      ) {
-        newState[fieldId] = JSON.stringify([value]);
-      } else {
-        newState[fieldId] = value;
-      }
-
-      return {
-        dynamicFieldDataState: newState,
-      };
-    });
-
-    // Skip validation for AI assisted fields
-    if (this.state.aiAssistedFields.includes(fieldId)) {
-      return;
-    }
-
-    const isValid = true;
-    let hasInvalidFields = Object.keys(this.state.dynamicFieldDataState).some(
-      (key) =>
-        key !== fieldId &&
-        this.state.invalidFields.includes(key) &&
-        !this.state.aiAssistedFields.includes(key),
-    );
-
-    if (value && isValid) {
-      this.setState({
-        invalidFields: this.state.invalidFields.filter(
-          (field: string) => field !== fieldId,
-        ),
-      });
-    } else if (isRequired) {
-      hasInvalidFields = true;
-      this.setState((prevState) => ({
-        invalidFields: prevState.invalidFields.includes(fieldId)
-          ? prevState.invalidFields
-          : [...prevState.invalidFields, fieldId],
-      }));
-    }
-
-    // Check if the field is a parent field
-    if (this.state.parentFields.includes(fieldId)) {
-      this.setState({
-        changedParentMachineName: fieldId,
-        parentChangeVersion: Date.now(),
-      });
-    }
-
-    if (this.props.customSaveCallback) {
-      const currentDataState = this.onSubmit({}, true);
-      const updatedDataState = { ...currentDataState, [fieldId]: value };
-      this.props.customSaveCallback({
-        hasInvalidFields,
-        data: updatedDataState,
-      });
-    }
-  };
-
-  // New method to toggle AI assist for a field
-  toggleAIAssist = (fieldId: string, enabled: boolean) => {
-    this.setState((prevState) => {
-      let newAIAssistedFields = [...prevState.aiAssistedFields];
-      let newInvalidFields = [...prevState.invalidFields];
-
-      if (enabled) {
-        // Add to AI assisted fields if not already there
-        if (!newAIAssistedFields.includes(fieldId)) {
-          newAIAssistedFields.push(fieldId);
-        }
-        // Remove from invalid fields if it was there
-        newInvalidFields = newInvalidFields.filter(
-          (field) => field !== fieldId,
-        );
-      } else {
-        // Remove from AI assisted fields
-        newAIAssistedFields = newAIAssistedFields.filter(
-          (field) => field !== fieldId,
-        );
-
-        // Check if field should be marked as invalid
-        const fieldDetails =
-          prevState.functionDetails.parameters?.properties[fieldId];
-        const fieldValue = prevState.dynamicFieldDataState[fieldId];
-
-        if (
-          fieldDetails?.meta.is_required &&
-          (!fieldValue || fieldValue === '')
-        ) {
-          if (!newInvalidFields.includes(fieldId)) {
-            newInvalidFields.push(fieldId);
-          }
-        }
-      }
-
-      // Call the onAIAssistToggle callback if provided
-      if (this.props.onAIAssistToggle) {
-        this.props.onAIAssistToggle(fieldId, enabled, newAIAssistedFields);
-      }
-
-      if (this.props.customSaveCallback) {
-        // we have communciate back to the custom save callback with the updated state
-        const currentDataState = this.onSubmit({}, true, fieldId);
-        this.props.customSaveCallback({
-          hasInvalidFields: newInvalidFields.length > 0,
-          data: currentDataState,
-        });
-      }
-
-      return {
-        aiAssistedFields: newAIAssistedFields,
-        invalidFields: newInvalidFields,
-      };
-    });
-  };
-
-  replacePlaceholders = (
-    templateObj: { [key: string]: any },
-    dictionary: { [key: string]: any },
-  ): { [key: string]: any } => {
-    const updatedObj: { [key: string]: any } = {};
-
-    // Use Object.entries to iterate over keys and values
-    Object.entries(templateObj).forEach(([key, value]) => {
-      // If the value is a string and contains a placeholder, replace it
-      if (typeof value === 'string' && value.includes('{parameters.')) {
-        // Extract the placeholder key between `{parameters.}` and use it to replace with the dictionary value
-        const placeholderKey = value.match(/{parameters\.(.*?)}/);
-
-        if (placeholderKey && placeholderKey[1]) {
-          const keyToReplace = placeholderKey[1]; // Extract key name from the placeholder
-
-          // Replace the placeholder with the corresponding value from the dictionary
-          if (dictionary[keyToReplace] !== undefined) {
-            updatedObj[key] = value.replace(
-              placeholderKey[0],
-              dictionary[keyToReplace],
-            );
-          }
-        }
-      } else if (typeof value === 'string' && value) {
-        updatedObj[key] = value;
-      }
-    });
-
-    // Return the updated object containing only keys with replaced values
-    return updatedObj;
-  };
-
-  getRegex: any = (field: any) => {
-    if (field.type === 'boolean') {
-      return '^(true|false)$'; // Matches "true" or "false" as strings
-    }
-    if (field.type === 'number') {
-      return '^\\d+$'; // Matches numeric values only
-    }
-    if (
-      field.type === 'array' &&
-      field.items &&
-      field.items.type === 'number'
-    ) {
-      return '^\\d+$'; // Matches numeric values only
-    }
-
-    return ''; // Default to empty string
-  };
-
-  getRegexErrorMessage: any = (field: any) => {
-    if (field.type === 'boolean') {
-      return 'Please enter "true" or "false".'; // Error message for boolean fields
-    }
-    if (field.type === 'number') {
-      return 'Please enter a valid number.'; // Error message for number fields
-    }
-    if (
-      field.type === 'array' &&
-      field.items &&
-      field.items.type === 'number'
-    ) {
-      return 'Please enter a valid number.'; // Error message for number fields
-    }
-
-    return 'Invalid input.'; // Default error message
-  };
-
-  fetchDynamicData = (field: any) => {
-    const { functionDetails } = this.state;
-    const { connectedAccountId } = this.props;
-    const { properties } = functionDetails.parameters;
-    const { depends_on } = properties[field.id].meta.ui || [];
-
-    const data: { [key: string]: any } = {};
-
-    // Iterate through the dependsOn array and add the corresponding values to the data object
-    depends_on.forEach((fieldId: string) => {
-      data[fieldId] = this.state.dynamicFieldDataState[fieldId];
-    });
-    return data;
-  };
-
-  // Custom wrapper for ConfigureFieldWrapper to add AI assist toggle
-  renderFieldWrapper = (field: any, children: any) => {
-    const { enableAIAssist } = this.props;
-    const isAIAssisted = this.state.aiAssistedFields.includes(field.id);
-
-    if (!enableAIAssist) {
-      return html`<${ConfigureFieldWrapper} field=${field}>${children}<//>`;
-    }
-
-    // Add AI assist toggle to the field wrapper
-    return html`
-      <${ConfigureFieldWrapper} field=${field}>
-        <div class="${styles.fieldWrapperWithAIAssist}">
-          <div class="${styles.aiAssistToggleContainer}">
-            <label class="${styles.aiAssistToggleLabel}">
-              <span>AI assist</span>
-              <input
-                type="checkbox"
-                class="${styles.aiAssistToggle}"
-                checked=${isAIAssisted}
-                onChange=${(e: any) =>
-                  this.toggleAIAssist(field.id, e.target.checked)}
-              />
-            </label>
-          </div>
-          ${children}
-        </div>
-      <//>
-    `;
-  };
-
-  renderFields = (
-    properties: any,
-    functionArguments: any,
-    connectedAccount: string,
-    appName: string,
-    parentFieldId?: string,
-  ): any => {
-    const fields = Object.entries(properties).map(
-      ([fieldName, fieldDetails]: [string, any], index) => ({
-        id: fieldName, // assign unique id for each field
-        title: fieldDetails.meta.title,
-        type: fieldDetails.meta.ui.ui_field?.type || 'TEXTFIELD',
-        endpointURL:
-          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN' ||
-          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
-            ? fieldDetails.meta.ui.ui_field.data_source?.url || ''
-            : undefined, // Set endpoint URL for DYNAMIC_DROPDOWN
-        optionKeyPath:
-          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN'
-            ? fieldDetails.meta.ui.ui_field.option_key_path || ''
-            : undefined,
-        valueKeyPath:
-          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN'
-            ? fieldDetails.meta.ui.ui_field.value_key_path || ''
-            : undefined,
-        isMultiSelect:
-          fieldDetails?.meta?.ui?.ui_field?.is_multiselect || false,
-
-        idKeyPath:
-          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
-            ? fieldDetails.meta.ui.ui_field.id_key_path || ''
-            : undefined,
-        typeKeyPath:
-          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
-            ? fieldDetails.meta.ui.ui_field.type_key_path || ''
-            : undefined,
-        titleKeyPath:
-          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
-            ? fieldDetails.meta.ui.ui_field.title_key_path || ''
-            : undefined,
-        isRequiredKeyPath:
-          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
-            ? fieldDetails.meta.ui.ui_field.is_required_key_path || ''
-            : undefined,
-        dataSourceBody:
-          fieldDetails.meta.ui.ui_field?.type === 'DYNAMIC_DROPDOWN' ||
-          fieldDetails.meta.ui.ui_field?.type === 'CUSTOM_FIELDS'
-            ? fieldDetails.meta.ui.ui_field.data_source?.body || {}
-            : {}, // Set endpoint URL for DYNAMIC_DROPDOWN
-        defaultValue: functionArguments[fieldName] || '',
-        description:
-          fieldDetails.meta.description_for_users ||
-          fieldDetails.description ||
-          '',
-        is_required: fieldDetails.meta.is_required || false,
-        is_editable: true,
-        is_mappable: true,
-        regex: fieldDetails.meta.ui.regex || this.getRegex(fieldDetails),
-        regexErrorMessage:
-          fieldDetails.meta.ui.regex_error_message ||
-          this.getRegexErrorMessage(fieldDetails),
-        placeholder:
-          fieldDetails.meta.ui.placeholder ||
-          (['DYNAMIC_DROPDOWN', 'STATIC_DROPDOWN'].includes(
-            fieldDetails.meta.ui.ui_field?.type,
-          )
-            ? `Select or enter a value here...`
-            : `Enter value here...`),
-        dataType: fieldDetails.type,
-        options: fieldDetails.meta.ui.ui_field.options || [],
-        properties:
-          fieldDetails.type === 'array' && fieldDetails.items.type === 'object'
-            ? fieldDetails.items.properties || {}
-            : fieldDetails.properties || {},
-        dependsOn: fieldDetails.meta.ui?.depends_on || [],
-        isVisible: fieldDetails.meta.ui?.is_visible,
-      }),
-    );
-
-    // Render fields
-    return fields.map((field) => {
-      let fieldElement;
-      let isDynamic = false;
-      let fieldType = field.type;
-      if (field.type === 'DYNAMIC_DROPDOWN') {
-        fieldType = 'SELECT';
-      }
-      const options: Option[] = field.options.map((option: any) => ({
-        id: field.type === 'CHECKBOX' ? (option.id ? '1' : '0') : option.id, // Assign '1'/'0' only if field.type is 'CHECKBOX'
-        value: option.value,
-      }));
-
-      if (!field.isVisible && !this.props.forceShowAllFields) {
-        return null;
-      }
-
-      // Check if field has AI assist enabled
-      const isAIAssisted = this.state.aiAssistedFields.includes(field.id);
-      // Set placeholder text for AI assisted fields
-      const aiPlaceholder = isAIAssisted
-        ? field.placeholder
-        : field.placeholder;
-
-      switch (field.type) {
-        case 'TEXTFIELD':
-          fieldElement = html`
-            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
-              ${this.renderFieldWrapper(
-                field,
-                html`
-                  <${MultipurposeField}
-                    id="${field.id}"
-                    title="${field.title}"
-                    activityOutputData=${arrayToNestedJSONWithFirstValue(
-                      JSONToActivityOutputData(this.props.variables || {}),
-                      JSONToDynamicFieldData(this.props.variables || {}),
-                    )}
-                    activityOutputDataRaw=${JSONToActivityOutputData(
-                      this.props.variables || {},
-                    )}
-                    description="${field.description}"
-                    value=${this.state.dynamicFieldDataState[field.id]}
-                    placeholder="${aiPlaceholder}"
-                    regex=${field.regex}
-                    regexErrorMessage=${field.regexErrorMessage}
-                    isRequired="${field.is_required}"
-                    onChange=${(val: any) => {
-                      this.onFieldChange(
-                        field.id,
-                        val,
-                        field.dataType,
-                        field.is_required,
-                        parentFieldId,
-                      );
-                    }}
-                    type=${fieldType}
-                    isMappable=${this.props.variables &&
-                    Object.entries(this.props.variables).length > 0 &&
-                    field.dataType !== 'array'}
-                    isEditable=${true}
-                    isDisabled=${isAIAssisted}
-                    allowTagsInText=${this.props.variables}
-                    fieldId=${field.id}
-                    isArray=${field.dataType === 'array'}
-                    tagsTree=${this.props.showMappingMenu
-                      ? this.props.variables
-                      : null}
-                  ><//>
-                `,
-              )}
-            </div>
-          `;
-          break;
-        case 'TEXTAREA':
-          fieldElement = html`
-            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
-              ${this.renderFieldWrapper(
-                field,
-                html`
-                  <${MultipurposeField}
-                    id="${field.id}"
-                    title="${field.title}"
-                    activityOutputData=${arrayToNestedJSONWithFirstValue(
-                      JSONToActivityOutputData(this.props.variables || {}),
-                      JSONToDynamicFieldData(this.props.variables || {}),
-                    )}
-                    activityOutputDataRaw=${JSONToActivityOutputData(
-                      this.props.variables || {},
-                    )}
-                    description="${field.description}"
-                    value=${this.state.dynamicFieldDataState[field.id]}
-                    placeholder="${aiPlaceholder}"
-                    isRequired=${field.is_required}
-                    isDisabled="${isAIAssisted}"
-                    isEditable="${field.is_editable}"
-                    fieldId=${field.id}
-                    onChange=${(val: any) => {
-                      this.onFieldChange(
-                        field.id,
-                        val,
-                        field.dataType,
-                        field.is_required,
-                        parentFieldId,
-                      );
-                    }}
-                    regex=${field.regex}
-                    regexErrorMessage=${field.regexErrorMessage}
-                    type=${fieldType}
-                    isMappable=${this.props.variables &&
-                    Object.entries(this.props.variables).length > 0}
-                    allowTagsInText=${this.props.variables}
-                    tagsTree=${this.props.showMappingMenu
-                      ? this.props.variables
-                      : null}
-                  ><//>
-                `,
-              )}
-            </div>
-          `;
-          break;
-        case 'DYNAMIC_DROPDOWN':
-        case 'STATIC_DROPDOWN':
-        case 'CHECKBOX':
-          isDynamic = field.type === 'DYNAMIC_DROPDOWN';
-          fieldElement = html`
-            <div class="${styles.functionFieldWrap} integry-action-field-wrap">
-              ${this.renderFieldWrapper(
-                field,
-                html`
-                  <${ListBox}
-                    key=${field.id}
-                    fieldId=${field.id}
-                    apiHandler=${this.props.apiHandler}
-                    title=${field.title}
-                    description=${field.description}
-                    placeholder=${aiPlaceholder}
-                    isRequired=${field.is_required}
-                    value=${this.state.dynamicFieldDataState[field.id]}
-                    endpointUrl=${isDynamic
-                      ? field.endpointURL
-                      : JSON.stringify(options)}
-                    isDynamic=${isDynamic}
-                    optionKeyPath=${field.valueKeyPath}
-                    valueKeyPath=${field.optionKeyPath}
-                    endpointData=${field.dependsOn.length > 0
-                      ? JSON.stringify({
-                          authorization_id: `${connectedAccount}`,
-                          ...this.fetchDynamicData(field),
-                        })
-                      : null}
-                    type=${`${fieldType}`}
-                    isDisabled="${isAIAssisted}"
-                    isEditable=${field.type === 'DYNAMIC_DROPDOWN'}
-                    isSearchable=${true}
-                    isMappable=${this.props.showMappingMenu &&
-                    field.type !== 'DYNAMIC_DROPDOWN'}
-                    appName=${`${appName}`}
-                    isMultiSelect=${field.isMultiSelect}
-                    onChange=${(val: any, stopChangePropagation = false) => {
-                      this.onFieldChange(
-                        field.id,
-                        val,
-                        field.dataType,
-                        field.is_required,
-                        parentFieldId,
-                        -1,
-                        stopChangePropagation,
-                      );
-                    }}
-                    dataSourceBody=${this.replacePlaceholders(
-                      field.dataSourceBody,
-                      this.state.dynamicFieldDataState,
-                    )}
-                    selectedAuthId=${`${connectedAccount}`}
-                    tagsTree=${this.props.showMappingMenu
-                      ? this.props.variables
-                      : null}
-                    isReadOnly=${isAIAssisted}
-                    allowWorkspaceConnectedAccounts=${!!this.props
-                      .allowWorkspaceConnectedAccounts}
-                  ><//>
-                `,
-              )}
-            </div>
-          `;
-          break;
-
-        case 'CUSTOM_FIELDS':
-          if (!field.endpointURL) {
-            break;
-          }
-          fieldElement = html`
-            <div
-              key=${field.id}
-              class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
-            >
-              ${this.renderFieldWrapper(
-                field,
-                html`
-                  <${DynamicTypedField}
-                    dynamicField=${field}
-                    endpointData=${JSON.stringify({
-                      authorization_id: `${connectedAccount}`,
-                    })}
-                    placeHolder=${aiPlaceholder}
-                    appName=${`${appName}`}
-                    selectedAuthId=${`${connectedAccount}`}
-                    sourceFlowIntegrataionInvocationUrl=${field.endpointURL}
-                    isMappable=${Object.entries(this.props.variables || {})
-                      .length > 0}
-                    isDisabled=${isAIAssisted}
-                    isEditable=${false}
-                    allowTagsInText=${true}
-                    allowWorkspaceConnectedAccounts=${!!this.props
-                      .allowWorkspaceConnectedAccounts}
-                    apiHandler=${this.props.apiHandler}
-                    idKeyPath=${field.idKeyPath}
-                    typeKeyPath=${field.typeKeyPath}
-                    titleKeyPath=${field.titleKeyPath}
-                    isRequiredKeyPath=${field.isRequiredKeyPath}
-                    onChange=${(val: any) => {
-                      this.onFieldChange(field.id, val, field.dataType, false);
-                    }}
-                    dataSourceBody=${this.replacePlaceholders(
-                      field.dataSourceBody,
-                      this.state.dynamicFieldDataState,
-                    )}
-                    parentFieldsChanged=${field.dependsOn.length > 0 &&
-                    field.dependsOn.includes(
-                      this.state.changedParentMachineName,
-                    )
-                      ? this.state.parentChangeVersion
-                      : 0}
-                    activityOutputData=${arrayToNestedJSONWithFirstValue(
-                      JSONToActivityOutputData(this.props.variables || {}),
-                      JSONToDynamicFieldData(this.props.variables || {}),
-                    )}
-                    activityOutputDataRaw=${JSONToActivityOutputData(
-                      this.props.variables || {},
-                    )}
-                    value=${this.state.dynamicFieldDataState[field.id] || {}}
-                    isDisabled=${isAIAssisted}
-                    dependsOn=${field.dependsOn}
-                    isArray=${field.dataType === 'array'}
-                  />
-                `,
-              )}
-            </div>
-          `;
-
-          break;
-        case 'STANDARD_FIELDS':
-          // Recursively render fields for object type
-          if (field.properties) {
-            fieldElement = html`
-              <div
-                class="${styles.functionFieldWrap} integry-action-field-wrap"
-              >
-                ${this.renderFieldWrapper(
-                  field,
-                  html`
-                    <${ObjectField}
-                      field=${field}
-                      functionArguments=${functionArguments}
-                      connectedAccount=${connectedAccount}
-                      appName=${appName}
-                      onChange=${this.onFieldChange}
-                      apiHandler=${this.props.apiHandler}
-                      isArray=${field.dataType === 'array'}
-                      activityOutputData=${arrayToNestedJSONWithFirstValue(
-                        JSONToActivityOutputData(this.props.variables || {}),
-                        JSONToDynamicFieldData(this.props.variables || {}),
-                      )}
-                      activityOutputDataRaw=${JSONToActivityOutputData(
-                        this.props.variables || {},
-                      )}
-                      isDisabled=${isAIAssisted}
-                      objectValue=${this.state.dynamicFieldDataState[
-                        field.id
-                      ] || {}}
-                    />
-                  `,
-                )}
-              </div>
-            `;
-          }
-          break;
-
-        // You can add cases for other field types here
-        default:
-          fieldElement = html``;
-      }
-
-      return html`
-        <div class="${styles.functionFieldWrap} integry-action-field-wrap">
-          ${fieldElement}
-        </div>
-      `;
-    });
-  };
-
-  renderFunctionDetails = (
-    functionName: string,
-    functionDetails: any,
-    functionArguments: any,
-  ) => {
-    const context = useContext(AppContext);
-    if (!functionDetails || !functionDetails.parameters) return null;
-
-    const connectedAccount =
-      this.props.connectedAccountId ||
-      functionDetails.meta.app.connected_accounts.length > 0
-        ? functionDetails.meta.app.connected_accounts[0].id
-        : null;
-    return this.renderFields(
-      functionDetails.parameters.properties,
-      functionArguments,
-      connectedAccount,
-      functionDetails.meta.app.name,
-    );
-  };
-
-  render() {
-    const {
-      functionArguments,
-      functionName,
-      connectedAccountId,
-      onClose,
-    } = this.props;
-    const { functionDetails } = this.state;
-
-    return html`
-      ${this.state.loading
-        ? html`<div class="${styles.functionFormLoader}">
-            <${LargeLoader} />
-          </div>`
-        : functionDetails &&
-          functionDetails.meta &&
-          html`
-            <div class="${styles.functionFormWrap}">
-              <div class="${styles.functionHeader}">
-                <div class="${styles.name}">
-                  <div class="${styles.functionIcon}">
-                    <img
-                      src=${functionDetails.meta.app.icon_url}
-                      alt=${functionDetails.meta.app.name}
-                    />
-                  </div>
-                  <div class="${styles.text}">
-                    ${functionDetails.meta.ui.title}
-                  </div>
-                </div>
-              </div>
-              <div class="${styles.functionFormContainer}">
-                ${functionDetails.meta.app.connected_accounts.length > 0
-                  ? this.renderFunctionDetails(
-                      functionName,
-                      functionDetails,
-                      functionArguments,
-                    )
-                  : html`<div class="${styles.errorMessage}">
-                      Error: User authorization is missing.
-                    </div>`}
-              </div>
-
-              <div class="${styles.btnSubmit}">
-                <${Button}
-                  label="${functionDetails.meta.app.connected_accounts.length >
-                  0
-                    ? 'Submit'
-                    : 'Close'}"
-                  position="top-right"
-                  onClick=${this.onSubmit}
-                  isLoading=${this.state.isSubmitting}
-                  disabled=${this.state.invalidFields.length > 0}
-                  tooltip=${this.state.invalidFields.length > 0
-                    ? 'Please complete all required fields with valid data.'
-                    : ''}
-                />
-              </div>
-            </div>
-          `}
-    `;
-  }
-}
-
-export default connect<
-  FunctionFormPropsType,
-  ActionFormStateType,
-  StoreType,
-  unknown
->(
-  [
-    'stepState',
-    'stepMapping',
-    'stepDataMapping',
-    'parentChildMapping',
-    'fieldListMapping',
-    'conditionalFieldMapping',
-    'embedConfig',
-    'activityOutputData',
-    'genericData',
-    'userConfig',
-    'authMapping',
-    'showSetupModal',
-  ],
-  actionFunctions,
-)(FunctionForm);