@integry/sdk 4.6.44 → 4.6.46

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

@@ -1,3 +1,5 @@
+'use client';
+
 /* eslint-disable no-nested-ternary */
 import { html, Component } from 'htm/preact';
 import { connect } from 'unistore/preact';
@@ -6,11 +8,10 @@ import { useContext } from 'preact/hooks';
 import { ListBox } from '@/components/MultipurposeField/Dropdown';
 import { actionFunctions } from '@/store';
 import { Button } from '@/components/Button';
-import { StoreType } from '@/types/store';
+import type { StoreType } from '@/types/store';
 import { MultipurposeField } from '@/components/MultipurposeField';
 import DynamicTypedField from '@/features/common/DynamicTypedField';
 import ConfigureFieldWrapper from '@/components/ConfigureFieldWrapper';
-import { CheckboxGroup } from '@/components/CheckboxGroup';
 import AppContext from '@/contexts/AppContext';
 import { ObjectField } from '@/components/form/ObjectField';
 import { LargeLoader } from '@/components/LargeLoader';
@@ -33,6 +34,13 @@ interface FunctionFormPropsType extends StoreType {
   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
 }
 
 interface ActionFormStateType {
@@ -43,6 +51,7 @@ interface ActionFormStateType {
   invalidFields: any;
   parentFields: any;
   parentFieldsChanged: boolean;
+  aiAssistedFields: string[]; // New state to track fields with AI assist enabled
 }
 
 interface StepDataMapping {
@@ -68,6 +77,7 @@ class FunctionForm extends Component<
       invalidFields: [],
       parentFields: [],
       parentFieldsChanged: false,
+      aiAssistedFields: [], // Initialize empty array for AI assisted fields
     };
   }
 
@@ -103,6 +113,7 @@ class FunctionForm extends Component<
             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)
@@ -139,6 +150,57 @@ class FunctionForm extends Component<
           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 });
       });
   }
@@ -153,17 +215,26 @@ class FunctionForm extends Component<
     return arr;
   };
 
-  private onSubmit = (event: any, returnResponse = false) => {
+  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 } = this.state;
+    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) {
@@ -305,9 +376,17 @@ class FunctionForm extends Component<
       };
     });
 
+    // 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),
+      (key) =>
+        key !== fieldId &&
+        this.state.invalidFields.includes(key) &&
+        !this.state.aiAssistedFields.includes(key),
     );
 
     if (value && isValid) {
@@ -340,6 +419,63 @@ class FunctionForm extends Component<
     }
   };
 
+  // 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 },
@@ -424,6 +560,37 @@ class FunctionForm extends Component<
     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,
@@ -517,92 +684,107 @@ class FunctionForm extends Component<
         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">
-              <${ConfigureFieldWrapper} field=${field}>
-                <${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="${field.placeholder}"
-                  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}
-                  allowTagsInText=${this.props.variables}
-                  fieldId=${field.id}
-                  isArray=${field.dataType === 'array'}
-                  tagsTree=${this.props.showMappingMenu
-                    ? this.props.variables
-                    : null}
-                ><//>
-              <//>
+              ${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">
-              <${ConfigureFieldWrapper} field=${field}>
-                <${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="${field.placeholder}"
-                  isRequired=${field.is_required}
-                  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}
-                ><//>
-              <//>
+              ${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;
@@ -612,56 +794,61 @@ class FunctionForm extends Component<
           isDynamic = field.type === 'DYNAMIC_DROPDOWN';
           fieldElement = html`
             <div class="${styles.functionFieldWrap} integry-action-field-wrap">
-              <${ConfigureFieldWrapper} field=${field}>
-                <${ListBox}
-                  key=${field.id}
-                  fieldId=${field.id}
-                  apiHandler=${this.props.apiHandler}
-                  title=${field.title}
-                  description=${field.description}
-                  placeholder=${field.placeholder}
-                  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}`}
-                  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}
-                ><//>
-              <//>
+              ${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}
+                  ><//>
+                `,
+              )}
             </div>
           `;
           break;
@@ -675,40 +862,46 @@ class FunctionForm extends Component<
               key=${field.id}
               class=${`${styles.actionStepFieldWrap} integry-action-field-wrap`}
             >
-              <${DynamicTypedField}
-                dynamicField=${field}
-                endpointData=${JSON.stringify({
-                  authorization_id: `${connectedAccount}`,
-                })}
-                placeHolder=${field.placeholder}
-                appName=${`${appName}`}
-                selectedAuthId=${`${connectedAccount}`}
-                sourceFlowIntegrataionInvocationUrl=${field.endpointURL}
-                isMappable=${Object.entries(this.props.variables || {}).length >
-                0}
-                isEditable=${false}
-                allowTagsInText=${true}
-                apiHandler=${this.props.apiHandler}
-                idKeyPath=${field.idKeyPath}
-                typeKeyPath=${field.typeKeyPath}
-                titleKeyPath=${field.titleKeyPath}
-                onChange=${(val: any) => {
-                  this.onFieldChange(field.id, val, field.dataType, false);
-                }}
-                dataSourceBody=${this.replacePlaceholders(
-                  field.dataSourceBody,
-                  this.state.dynamicFieldDataState,
-                )}
-                parentFieldsChanged=${this.state.parentFieldsChanged}
-                activityOutputData=${arrayToNestedJSONWithFirstValue(
-                  JSONToActivityOutputData(this.props.variables || {}),
-                  JSONToDynamicFieldData(this.props.variables || {}),
-                )}
-                activityOutputDataRaw=${JSONToActivityOutputData(
-                  this.props.variables || {},
-                )}
-                value=${this.state.dynamicFieldDataState[field.id] || {}}
-              />
+              ${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}
+                    apiHandler=${this.props.apiHandler}
+                    idKeyPath=${field.idKeyPath}
+                    typeKeyPath=${field.typeKeyPath}
+                    titleKeyPath=${field.titleKeyPath}
+                    onChange=${(val: any) => {
+                      this.onFieldChange(field.id, val, field.dataType, false);
+                    }}
+                    dataSourceBody=${this.replacePlaceholders(
+                      field.dataSourceBody,
+                      this.state.dynamicFieldDataState,
+                    )}
+                    parentFieldsChanged=${this.state.parentFieldsChanged}
+                    activityOutputData=${arrayToNestedJSONWithFirstValue(
+                      JSONToActivityOutputData(this.props.variables || {}),
+                      JSONToDynamicFieldData(this.props.variables || {}),
+                    )}
+                    activityOutputDataRaw=${JSONToActivityOutputData(
+                      this.props.variables || {},
+                    )}
+                    value=${this.state.dynamicFieldDataState[field.id] || {}}
+                  />
+                `,
+              )}
             </div>
           `;
 
@@ -720,22 +913,27 @@ class FunctionForm extends Component<
               <div
                 class="${styles.functionFieldWrap} integry-action-field-wrap"
               >
-                <${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 || {},
-                  )}
-                />
+                ${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 || {},
+                      )}
+                    />
+                  `,
+                )}
               </div>
             `;
           }
@@ -748,7 +946,7 @@ class FunctionForm extends Component<
 
       return html`
         <div class="${styles.functionFieldWrap} integry-action-field-wrap">
-          <${ConfigureFieldWrapper} field=${field}> ${fieldElement} <//>
+          ${fieldElement}
         </div>
       `;
     });