@integry/sdk 4.6.45 → 4.6.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.45",
+  "version": "4.6.46",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",

package/src/components/BasicSelect/index.ts

@@ -56,52 +56,61 @@ const Select = (props: SelectProps) => {
   const getSortedOptions = (): { label: string; key: string }[] => {
     if (options.length > 0) {
       const naturalSort = createNewSortInstance({
-        comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare,
+        comparer: new Intl.Collator(undefined, {
+          numeric: true,
+          sensitivity: 'base',
+        }).compare,
       });
       const sorted = naturalSort(options).asc((option) => option.label);
       return sorted;
     }
     return [];
-  }
+  };
 
   return html`
     <div class=${styles.selectWrapper}>
-     <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-     ${isReadOnly && html `<span class=${styles.readonlyHint} data-hint=${isReadOnly ? `Cannot modify user selection` : ''}></span>`}
-      <select
-        aria-label=${ariaLabel}
-        onchange=${handleInputChange}
-        class=${`${value && styles.selectedVal} ${isReadOnly ? styles.readonly: ''}`}
-        disabled=${isReadOnly}
-      >
-        ${showUnselectedValue &&
-        html` <option value="">${unselectedText}</option> `}
-        ${value === undefined &&
-        html`
-          <option value="" disabled selected hidden>${placeholder}</option>
-        `}
-        ${getSortedOptions().map(
-          (el) => html`
-            <option value=${el.key} selected=${value === el.key}>
-              ${el.label}
-            </option>
-          `,
-        )}
-      </select>
-      <svg
-        width="12"
-        height="8"
-        viewBox="0 0 12 8"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11 1.5L6 6.5L1 1.5"
-          stroke="#999999"
-          stroke-width="2"
-          stroke-linecap="round"
-        />
-      </svg>
+      <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+        ${isReadOnly &&
+        html`<span
+          class=${styles.readonlyHint}
+          data-hint=${isReadOnly ? `` : ''}
+        ></span>`}
+        <select
+          aria-label=${ariaLabel}
+          onchange=${handleInputChange}
+          class=${`${value && styles.selectedVal} ${
+            isReadOnly ? styles.readonly : ''
+          }`}
+          disabled=${isReadOnly}
+        >
+          ${showUnselectedValue &&
+          html` <option value="">${unselectedText}</option> `}
+          ${value === undefined &&
+          html`
+            <option value="" disabled selected hidden>${placeholder}</option>
+          `}
+          ${getSortedOptions().map(
+            (el) => html`
+              <option value=${el.key} selected=${value === el.key}>
+                ${el.label}
+              </option>
+            `,
+          )}
+        </select>
+        <svg
+          width="12"
+          height="8"
+          viewBox="0 0 12 8"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11 1.5L6 6.5L1 1.5"
+            stroke="#999999"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+        </svg>
       <//>
     </div>
     ${isRequired &&

package/src/components/Input/Input/index.ts

@@ -161,7 +161,7 @@ const Input = forwardRef((props: InputProps, ref) => {
           ${isReadOnly &&
           html`<span
             class=${styles.readonlyHint}
-            data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+            data-hint=${isReadOnly ? `` : ''}
           ></span>`}
           ${values.map((inputValue, index) => {
             const inputId = isArray ? `${id}-${index}` : id;

package/src/components/Input/Input/styles.module.scss

@@ -10,5 +10,7 @@
     height: -webkit-fill-available;
     z-index: 99;
     position: absolute;
+    background-color: #eee;
+    opacity: 0.5;
   }
 }

package/src/components/Listbox/index.ts

@@ -209,11 +209,16 @@ const ListBox = (props: ListBoxProps) => {
     }
   };
 
-  const setSortedFilteredItems = (data: { id: string, value: string }[]): void => {
+  const setSortedFilteredItems = (
+    data: { id: string; value: string }[],
+  ): void => {
     const naturalSort = createNewSortInstance({
-      comparer: new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' }).compare,
+      comparer: new Intl.Collator(undefined, {
+        numeric: true,
+        sensitivity: 'base',
+      }).compare,
     });
-    const sorted = naturalSort(data).asc(item => item.value);
+    const sorted = naturalSort(data).asc((item) => item.value);
     setFilteredItems(sorted);
   };
 
@@ -295,10 +300,12 @@ const ListBox = (props: ListBoxProps) => {
     return index > -1 ? items[index].value : 'Please Select...';
   }, [items, value]);
 
-  const getItemFromText = (textValue: string): ({
+  const getItemFromText = (
+    textValue: string,
+  ): {
     id: string;
     value: string;
-  }) => {
+  } => {
     let tempItem = {
       id: textValue,
       value: textValue,
@@ -319,7 +326,7 @@ const ListBox = (props: ListBoxProps) => {
       });
     }
     return tempItem;
-  }
+  };
 
   const updateValue = (e: InputEvent) => {
     if (e.currentTarget instanceof HTMLInputElement) {
@@ -330,9 +337,9 @@ const ListBox = (props: ListBoxProps) => {
         onChange(tempItem.id);
         setEditableTextValue(tempItem.value);
         setQuery(tempItem.value.trim());
-      } else if(newValue !== '') {
-          setQuery(newValue.trim());
-        }
+      } else if (newValue !== '') {
+        setQuery(newValue.trim());
+      }
     }
   };
 
@@ -344,7 +351,7 @@ const ListBox = (props: ListBoxProps) => {
       setQuery('');
       inputRef.current?.blur();
     }
-  }
+  };
 
   return html`
     <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
@@ -370,7 +377,7 @@ const ListBox = (props: ListBoxProps) => {
               ${isReadOnly &&
               html`<span
                 class=${styles.readonlyHint}
-                data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+                data-hint=${isReadOnly ? `` : ''}
               ></span>`}
               <div
                 class=${`${styles.customSelectTrigger} ${
@@ -395,7 +402,9 @@ const ListBox = (props: ListBoxProps) => {
                               ref=${inputRef}
                               class=${styles.searchInput}
                               placeholder=${placeholder ||
-                              (isEditable ? 'Please select or enter value...' : 'Please Select or Search...')}
+                              (isEditable
+                                ? 'Please select or enter value...'
+                                : 'Please Select or Search...')}
                               value=${isEditable ? editableTextValue : query}
                               oninput=${updateValue}
                               onclick=${onInputClicked}

package/src/components/MultipurposeField/Dropdown/index.tsx

@@ -978,7 +978,7 @@ const ListBox = (props: ListBoxProps) => {
               ${isReadOnly &&
               html`<span
                 class=${styles.readonlyHint}
-                data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+                data-hint=${isReadOnly ? `` : ''}
               ></span>`}
               <div
                 class=${`${styles.customSelectTrigger} ${

package/src/components/MultipurposeField/Dropdown/styles.module.scss

@@ -30,6 +30,8 @@
       height: 100%;
       z-index: 99;
       position: absolute;
+      background-color: #eee;
+      opacity: 0.5;
     }
   }
   .disabled {

package/src/components/MultipurposeField/index.tsx

@@ -55,6 +55,7 @@ interface MultipurposeFieldProps {
   buttonScriptRequiresAuthToken?: boolean;
   tagsComponent?: any;
   tagsTree?: any;
+  isDisabled?: boolean;
 }
 
 const MultipurposeField = (props: MultipurposeFieldProps) => {
@@ -89,6 +90,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
     buttonScriptRequiresAuthToken = false,
     tagsComponent = null,
     tagsTree = null,
+    isDisabled = false,
   } = props;
   const [showTagMenu, setShowTagMenu] = useState(false);
   const [currentValue, setCurrentValue] = useState(value);
@@ -550,7 +552,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
       <div class="${styles.multipurposeField}">
         ${type === 'TEXTAREA'
           ? html`
-              ${enableTagify && isMappable
+              ${enableTagify && isMappable && !isDisabled
                 ? html`
                     <${TextArea}
                       id="tagify_${fieldId}"
@@ -632,11 +634,12 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
                       isHidden=${isHidden}
                       fieldId=${fieldId}
                       labelTags=${labelTags}
+                      isReadOnly=${isDisabled}
                     />
                   `}
             `
           : html`
-              ${enableTagify && isMappable
+              ${enableTagify && isMappable && !isDisabled
                 ? html`
                     <${Input}
                       id="tagify_${fieldId}"
@@ -737,6 +740,7 @@ const MultipurposeField = (props: MultipurposeFieldProps) => {
                       onButtonClickScript=${onButtonClickScript}
                       buttonScriptRequiresAuthToken=${buttonScriptRequiresAuthToken}
                       apiHandler=${props.apiHandler}
+                      isReadOnly=${isDisabled}
                     />
                   `}
             `}

package/src/components/TextArea/index.ts

@@ -105,7 +105,7 @@ const TextArea = forwardRef((props: TextAreaProps, ref) => {
           ${isReadOnly &&
           html`<span
             class=${styles.readonlyHint}
-            data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
+            data-hint=${isReadOnly ? `` : ''}
           ></span>`}
           <div
             class=${`${styles.textareaInputWrapper} ${styles[className || '']}`}

package/src/components/TextArea/styles.module.scss

@@ -66,5 +66,7 @@
     height: -webkit-fill-available;
     z-index: 99;
     position: absolute;
+    background-color: #eee;
+    opacity: 0.5;
   }
 }

package/src/components/form/FunctionField/index.ts

@@ -41,6 +41,9 @@ const FunctionField = (props: FunctionFieldProps) => {
   const [connectedAccounts, setConnectedAccounts] = useState<any>([]);
   const [visibleFields, setVisibleFields] = useState<any>([]);
 
+  // Track AI-assisted fields
+  const [aiAssistedFields, setAIAssistedFields] = useState<string[]>([]);
+
   // Modified to support array of values
   const [functionValues, setFunctionValues] = useState<any[]>(() => {
     if (isArray && Array.isArray(value)) {
@@ -68,6 +71,7 @@ const FunctionField = (props: FunctionFieldProps) => {
     setConnectedAccountId(null);
     setUserFilledData({});
     setFormHasInvalidFields(false);
+    setAIAssistedFields([]); // Reset AI-assisted fields
   };
 
   // Handle clicking outside the modal to close it
@@ -114,7 +118,8 @@ const FunctionField = (props: FunctionFieldProps) => {
       if (
         property.meta?.ui?.is_visible &&
         property.meta?.is_required &&
-        !userFilledData[key]
+        !userFilledData[key] &&
+        !aiAssistedFields.includes(key) // Don't mark AI-assisted fields as invalid
       ) {
         response.push({ key, ...property });
       }
@@ -130,6 +135,13 @@ const FunctionField = (props: FunctionFieldProps) => {
     setSelectedFunction(actionToEdit?.json_schema?.function.name || '');
     setUserFilledData(actionToEdit?.default_arguments || {});
 
+    // Load AI-assisted fields from meta if available
+    if (actionToEdit?.meta?.ai_assisted_fields) {
+      setAIAssistedFields(actionToEdit.meta.ai_assisted_fields);
+    } else {
+      setAIAssistedFields([]);
+    }
+
     // Load function details for the selected function
     setLoadingFunctionDetails(true);
     props.apiHandler
@@ -193,7 +205,28 @@ const FunctionField = (props: FunctionFieldProps) => {
     return obj;
   };
 
-  // Modified to handle array of values
+  // Handle AI assist toggle changes
+  const handleAIAssistToggle = (
+    fieldId: string,
+    enabled: boolean,
+    allAIAssistedFields: string[],
+  ) => {
+    setAIAssistedFields(allAIAssistedFields);
+
+    // Update form validation since AI-assisted fields should not be marked as invalid
+    if (
+      functionDetails &&
+      functionDetails.parameters &&
+      functionDetails.parameters.properties
+    ) {
+      const invalidFields = getInvalidFields(
+        functionDetails.parameters.properties,
+      );
+      setFormHasInvalidFields(invalidFields.length > 0);
+    }
+  };
+
+  // Modified to handle array of values and include AI-assisted fields in meta
   const handleSave = () => {
     if (selectedFunction && functionDetails) {
       const schema = {
@@ -210,6 +243,7 @@ const FunctionField = (props: FunctionFieldProps) => {
           title: functionDetails.meta.ui.title,
           app_name: functionDetails.meta.app.title,
           app_icon_url: functionDetails.meta.app.icon_url,
+          ai_assisted_fields: aiAssistedFields, // Store AI-assisted fields in meta
         },
         default_arguments: userFilledData,
         parameters_visible_to_user: {},
@@ -275,6 +309,19 @@ const FunctionField = (props: FunctionFieldProps) => {
     setActiveTab('input');
   };
 
+  // Get default AI-assisted fields based on the current function
+  const getDefaultAIAssistedFields = () => {
+    // If editing an existing function, use the stored AI-assisted fields
+    if (
+      editingIndex !== null &&
+      functionValues[editingIndex]?.meta?.ai_assisted_fields
+    ) {
+      return functionValues[editingIndex].meta.ai_assisted_fields;
+    }
+
+    return [];
+  };
+
   const loadAuthorizationTabContent = () => {
     let content;
 
@@ -396,16 +443,16 @@ const FunctionField = (props: FunctionFieldProps) => {
                             <path
                               d="M3 6H5H21"
                               stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
                             />
                             <path
                               d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
                               stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
+                              strokeWidth="2"
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
                             />
                           </svg>
                         </button>
@@ -482,16 +529,16 @@ const FunctionField = (props: FunctionFieldProps) => {
                       <path
                         d="M3 6H5H21"
                         stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                       />
                       <path
                         d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
                         stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
                       />
                     </svg>
                   </button>
@@ -676,6 +723,9 @@ const FunctionField = (props: FunctionFieldProps) => {
                                 variables=${tagsTree}
                                 showMappingMenu=${true}
                                 forceShowAllFields=${true}
+                                enableAIAssist=${true}
+                                defaultAIAssistedFields=${getDefaultAIAssistedFields()}
+                                onAIAssistToggle=${handleAIAssistToggle}
                               />
                             </div>
                           `