@integry/sdk 4.6.39 → 4.6.41

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

@@ -0,0 +1,749 @@
+import { html } from 'htm/preact';
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { ListBox } from '@/components/MultipurposeField/Dropdown';
+import FunctionForm from '@/features/common/FunctionForm';
+import AuthSelectorV2 from '@/features/common/AuthSelectorV2';
+import { LargeLoader } from '@/components/LargeLoader';
+import { Hint } from '@/components/Tooltip';
+import styles from './styles.module.scss';
+
+// Types for our component
+type Authorization = {
+  id: number;
+  display_name: string;
+};
+
+type FunctionFieldProps = {
+  onChange: (value: any) => void;
+  value?: any;
+  label?: string;
+  name: string;
+  description?: string;
+  field: Record<string, any>;
+  apiHandler?: any;
+  isArray?: boolean; // New prop for array support
+};
+
+const FunctionField = (props: FunctionFieldProps) => {
+  const { value, label, description, field, isArray = false } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+  const [selectedFunction, setSelectedFunction] = useState<string>('');
+  const [activeTab, setActiveTab] = useState('authorization');
+  const [functionDetails, setFunctionDetails] = useState<any>(null);
+  const [loadingFunctionDetails, setLoadingFunctionDetails] = useState<boolean>(
+    false,
+  );
+  const [connectedAccountId, setConnectedAccountId] = useState<number | null>(
+    null,
+  );
+  const [connectedAccounts, setConnectedAccounts] = useState<any>([]);
+  const [visibleFields, setVisibleFields] = useState<any>([]);
+
+  // Modified to support array of values
+  const [functionValues, setFunctionValues] = useState<any[]>(() => {
+    if (isArray && Array.isArray(value)) {
+      return value;
+    }
+    if (value) {
+      return [value];
+    }
+    return [];
+  });
+
+  const [formHasInvalidFields, setFormHasInvalidFields] = useState<boolean>(
+    false,
+  );
+  const [userFilledData, setUserFilledData] = useState<any>({});
+
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const FUNCTIONS_LIST_URL = `https://api.integry.io/functions/list/`;
+
+  // Reset state when opening modal for a new action
+  const resetModalState = () => {
+    setSelectedFunction('');
+    setActiveTab('authorization');
+    setFunctionDetails(null);
+    setConnectedAccountId(null);
+    setUserFilledData({});
+    setFormHasInvalidFields(false);
+  };
+
+  // Handle clicking outside the modal to close it
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        modalRef.current &&
+        !modalRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  // Open modal for adding a new action
+  const handleOpenModal = () => {
+    resetModalState();
+    setEditingIndex(null);
+    setIsOpen(true);
+  };
+
+  const getVisibleFields = (properties: any[]) => {
+    const response: any[] = [];
+
+    Object.entries(properties).forEach(([key, property]) => {
+      if (property.meta?.ui?.is_visible) {
+        response.push({ key, ...property });
+      }
+    });
+
+    return response;
+  };
+
+  const getInvalidFields = (properties: any[]) => {
+    const response: any[] = [];
+
+    Object.entries(properties).forEach(([key, property]) => {
+      if (
+        property.meta?.ui?.is_visible &&
+        property.meta?.is_required &&
+        !userFilledData[key]
+      ) {
+        response.push({ key, ...property });
+      }
+    });
+
+    return response;
+  };
+
+  // Open modal for editing an existing action
+  const handleEditAction = (index: number) => {
+    const actionToEdit = functionValues[index];
+    setEditingIndex(index);
+    setSelectedFunction(actionToEdit?.json_schema?.function.name || '');
+    setUserFilledData(actionToEdit?.default_arguments || {});
+
+    // Load function details for the selected function
+    setLoadingFunctionDetails(true);
+    props.apiHandler
+      .getFunctionDetails(actionToEdit?.json_schema?.function.name, {})
+      .then((response: any) => {
+        setFunctionDetails(response);
+        setLoadingFunctionDetails(false);
+        setConnectedAccounts(response?.meta?.app?.connected_accounts || []);
+        setVisibleFields(
+          getVisibleFields(response?.parameters?.properties || []),
+        );
+        setFormHasInvalidFields(
+          getInvalidFields(response?.parameters?.properties || []).length > 0,
+        );
+        setConnectedAccountId(actionToEdit?.meta?.connected_account_id || null);
+        setActiveTab('authorization');
+      });
+
+    setIsOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+  };
+
+  const handleFunctionSelect = (val: any) => {
+    setSelectedFunction(val);
+    setActiveTab('authorization');
+    setLoadingFunctionDetails(true);
+    props.apiHandler.getFunctionDetails(val, {}).then((response: any) => {
+      setFunctionDetails(response);
+      setLoadingFunctionDetails(false);
+      setConnectedAccounts(response?.meta?.app?.connected_accounts || []);
+      setVisibleFields(
+        getVisibleFields(response?.parameters?.properties || []),
+      );
+      setFormHasInvalidFields(
+        getInvalidFields(response?.parameters?.properties || []).length > 0,
+      );
+      if (response && response.meta?.app?.connected_accounts?.length > 0) {
+        setConnectedAccountId(response.meta.app.connected_accounts[0].id);
+      } else {
+        setConnectedAccountId(null);
+      }
+    });
+  };
+
+  const removeMeta = (obj: any): any => {
+    if (Array.isArray(obj)) {
+      return obj.map(removeMeta);
+    }
+    if (typeof obj === 'object' && obj !== null) {
+      const newObj: any = {};
+      Object.keys(obj).forEach((key) => {
+        if (key !== 'meta') {
+          newObj[key] = removeMeta(obj[key]);
+        }
+      });
+      return newObj;
+    }
+    return obj;
+  };
+
+  // Modified to handle array of values
+  const handleSave = () => {
+    if (selectedFunction && functionDetails) {
+      const schema = {
+        json_schema: {
+          type: 'function',
+          function: removeMeta(functionDetails),
+        },
+        meta: {
+          id: functionDetails.meta.id,
+          version: functionDetails.meta.version,
+          connected_account_id: connectedAccountId,
+          form_page_machine_name: null,
+          name: functionDetails.name,
+          title: functionDetails.meta.ui.title,
+          app_name: functionDetails.meta.app.title,
+          app_icon_url: functionDetails.meta.app.icon_url,
+        },
+        default_arguments: userFilledData,
+        parameters_visible_to_user: {},
+      };
+
+      // Update or add the function value
+      let updatedValues;
+      if (editingIndex !== null) {
+        // Update existing action
+        updatedValues = [...functionValues];
+        updatedValues[editingIndex] = schema;
+      } else {
+        // Add new action
+        updatedValues = [...functionValues, schema];
+      }
+
+      setFunctionValues(updatedValues);
+
+      // Call onChange with the updated values
+      if (props.onChange) {
+        props.onChange(isArray ? updatedValues : updatedValues[0]);
+      }
+
+      setIsOpen(false);
+    }
+  };
+
+  // Delete a specific action from the array
+  const handleDeleteAction = (index: number) => {
+    const updatedValues = functionValues.filter((_, i) => i !== index);
+    setFunctionValues(updatedValues);
+
+    // Call onChange with the updated values
+    if (props.onChange) {
+      props.onChange(isArray ? updatedValues : updatedValues[0] || null);
+    }
+  };
+
+  const handleAuthCreated = (auth: Authorization) => {
+    setActiveTab('input');
+    const existingAuth = connectedAccounts.find(
+      (account: Authorization) => account.id === auth.id,
+    );
+    if (!existingAuth) {
+      setConnectedAccounts((prev: Authorization[]) => [...prev, auth]);
+      setConnectedAccountId(auth.id);
+    }
+  };
+
+  const handleAuthDeleted = (authId: number) => {
+    setConnectedAccounts((prev: Authorization[]) =>
+      prev.filter((account: Authorization) => account.id !== authId),
+    );
+    setConnectedAccountId(null);
+  };
+
+  const handleCustomaSave = (customSaveResponse: any) => {
+    setFormHasInvalidFields(customSaveResponse.hasInvalidFields);
+    setUserFilledData(customSaveResponse.data);
+  };
+
+  const handleNextTab = () => {
+    setActiveTab('input');
+  };
+
+  const loadAuthorizationTabContent = () => {
+    let content;
+
+    if (loadingFunctionDetails) {
+      content = html`
+        <div class=${styles.loader || 'function-field-loader'}>
+          <${LargeLoader} />
+        </div>
+      `;
+    } else if (functionDetails) {
+      const selectedAuthId =
+        connectedAccountId ||
+        (functionDetails.meta.app.connected_accounts.length > 0
+          ? functionDetails.meta.app.connected_accounts[0]?.id
+          : null);
+
+      content = html`
+        <${AuthSelectorV2}
+          authorizations=${connectedAccounts}
+          appName=${functionDetails.meta.app.title}
+          apiHandler=${props.apiHandler}
+          onAuthSelected=${(authId: number) => {
+            setConnectedAccountId(authId);
+          }}
+          onAuthCreated=${handleAuthCreated}
+          onAuthDeleted=${handleAuthDeleted}
+          selectedAuthId=${selectedAuthId}
+          loginUrl=${functionDetails.meta.app.login_url}
+        />
+      `;
+    }
+
+    return content;
+  };
+
+  return html`
+    <div class=${styles.functionFieldContainer || 'function-field-container'}>
+      ${label
+        ? html`
+            <label class=${styles.functionFieldLabel || 'function-field-label'}>
+              ${label}
+              ${description
+                ? html`
+                    <div
+                      class=${styles.functionFieldDescription ||
+                      'function-field-description'}
+                    >
+                      ${description}
+                    </div>
+                  `
+                : null}
+            </label>
+          `
+        : null}
+      ${isArray && functionValues.length > 0
+        ? html`
+            <div class=${styles.functionFieldArray || 'function-field-array'}>
+              ${functionValues.map(
+                (functionValue, index) => html`
+                  <div
+                    key=${index}
+                    class=${styles.functionFieldSummary ||
+                    'function-field-summary'}
+                    style="margin-bottom: 8px;"
+                  >
+                    <div
+                      class=${styles.functionFieldSelected ||
+                      'function-field-selected'}
+                    >
+                      <div
+                        class=${styles.functionFieldInfo ||
+                        'function-field-info'}
+                      >
+                        <img
+                          src=${functionValue?.meta?.app_icon_url}
+                          alt=${functionValue.meta?.app_name || 'App'}
+                          class=${styles.functionFieldAppIcon ||
+                          'function-field-app-icon'}
+                        />
+                        <div
+                          class=${styles.functionFieldNameContainer ||
+                          'function-field-name-container'}
+                        >
+                          <span
+                            class=${styles.functionFieldName ||
+                            'function-field-name'}
+                          >
+                            ${functionValue.meta?.title || 'Function'}
+                          </span>
+                          <span
+                            class=${styles.functionFieldAppName ||
+                            'function-field-app-name'}
+                          >
+                            ${functionValue.meta?.name || ''}
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        class=${styles.functionFieldActions ||
+                        'function-field-actions'}
+                      >
+                        <button
+                          type="button"
+                          class=${styles.functionFieldDeleteBtn ||
+                          'function-field-delete-btn'}
+                          onClick=${(e: any) => {
+                            e.stopPropagation();
+                            handleDeleteAction(index);
+                          }}
+                          aria-label="Delete"
+                        >
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M3 6H5H21"
+                              stroke="currentColor"
+                              stroke-width="2"
+                              stroke-linecap="round"
+                              stroke-linejoin="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"
+                            />
+                          </svg>
+                        </button>
+                        <button
+                          type="button"
+                          class=${styles.functionFieldEditBtn ||
+                          'function-field-edit-btn'}
+                          onClick=${() => handleEditAction(index)}
+                        >
+                          Edit
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                `,
+              )}
+            </div>
+          `
+        : null}
+      ${!isArray && functionValues.length > 0
+        ? html`
+            <div
+              class=${styles.functionFieldSummary || 'function-field-summary'}
+            >
+              <div
+                class=${styles.functionFieldSelected ||
+                'function-field-selected'}
+              >
+                <div class=${styles.functionFieldInfo || 'function-field-info'}>
+                  <img
+                    src=${functionValues[0]?.meta?.app_icon_url}
+                    alt=${functionValues[0].meta?.app_name || 'App'}
+                    class=${styles.functionFieldAppIcon ||
+                    'function-field-app-icon'}
+                  />
+                  <div
+                    class=${styles.functionFieldNameContainer ||
+                    'function-field-name-container'}
+                  >
+                    <span
+                      class=${styles.functionFieldName || 'function-field-name'}
+                    >
+                      ${functionValues[0].meta?.title || 'Function'}
+                    </span>
+                    <span
+                      class=${styles.functionFieldAppName ||
+                      'function-field-app-name'}
+                    >
+                      ${functionValues[0].meta?.name || ''}
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class=${styles.functionFieldActions ||
+                  'function-field-actions'}
+                >
+                  <button
+                    type="button"
+                    class=${styles.functionFieldDeleteBtn ||
+                    'function-field-delete-btn'}
+                    onClick=${(e: any) => {
+                      e.stopPropagation();
+                      handleDeleteAction(0);
+                    }}
+                    aria-label="Delete"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3 6H5H21"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="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"
+                      />
+                    </svg>
+                  </button>
+                  <button
+                    type="button"
+                    class=${styles.functionFieldEditBtn ||
+                    'function-field-edit-btn'}
+                    onClick=${() => handleEditAction(0)}
+                  >
+                    Edit
+                  </button>
+                </div>
+              </div>
+            </div>
+          `
+        : null}
+      ${isArray || functionValues.length === 0
+        ? html`
+            <div
+              class=${styles.functionFieldActions || 'function-field-actions'}
+              style="margin-top: ${functionValues.length > 0 ? '8px' : '0'}"
+            >
+              <button
+                type="button"
+                class=${styles.functionFieldAddBtn || 'function-field-add-btn'}
+                onClick=${handleOpenModal}
+              >
+                ${isArray && functionValues.length > 0
+                  ? 'Add another'
+                  : 'Add action'}
+              </button>
+            </div>
+          `
+        : null}
+      ${isOpen
+        ? html`
+            <div
+              class=${styles.functionFieldOverlay || 'function-field-overlay'}
+            >
+              <div
+                class=${styles.functionFieldModal || 'function-field-modal'}
+                ref=${modalRef}
+              >
+                <div
+                  class=${styles.functionFieldModalHeader ||
+                  'function-field-modal-header'}
+                >
+                  <h3
+                    class=${styles.functionFieldModalTitle ||
+                    'function-field-modal-title'}
+                  >
+                    ${editingIndex !== null ? 'Edit action' : 'Add action'}
+                  </h3>
+                  <p
+                    class=${styles.functionFieldModalDescription ||
+                    'function-field-modal-description'}
+                  >
+                    The AI will use this action
+                  </p>
+                  <button
+                    type="button"
+                    class=${styles.functionFieldCloseBtn ||
+                    'function-field-close-btn'}
+                    onClick=${handleCloseModal}
+                  >
+                    ×
+                  </button>
+                </div>
+
+                <div
+                  class=${styles.functionFieldModalBody ||
+                  'function-field-modal-body'}
+                >
+                  <div
+                    class=${styles.functionFieldInlineGroup ||
+                    'function-field-inline-group'}
+                  >
+                    <${ListBox}
+                      key=${field.activity_field?.id}
+                      fieldId=${field.activity_field?.id ||
+                      field.id ||
+                      field?.activity_field?.machine_name}
+                      title=${`Action`}
+                      placeholder=${`Select an action to use`}
+                      isRequired=${true}
+                      isHidden=${false}
+                      isSearchable=${true}
+                      value=${selectedFunction}
+                      onChange=${handleFunctionSelect}
+                      isDynamic=${true}
+                      endpointUrl=${FUNCTIONS_LIST_URL}
+                      endpointData=${`{"include": "meta"}`}
+                      apiHandler=${props.apiHandler}
+                      optionKeyPath=${`name`}
+                      valueKeyPath=${`meta.ui.title`}
+                      enableServerSideSearch=${true}
+                      serverSideSearchParamName=${`search`}
+                      iconKeyPath=${`meta.app.icon_url`}
+                      optionDescriptionKeyPath=${`description`}
+                    />
+                  </div>
+
+                  ${selectedFunction
+                    ? html`
+                <div class=${
+                  styles.functionFieldConfig || 'function-field-config'
+                }>
+                  <div class=${
+                    styles.functionFieldTabs || 'function-field-tabs'
+                  }>
+                    <button
+                      type="button"
+                      class=${`${
+                        styles.functionFieldTab || 'function-field-tab'
+                      } ${
+                        activeTab === 'authorization'
+                          ? styles.functionFieldTabActive ||
+                            'function-field-tab-active'
+                          : ''
+                      }`}
+                      onClick=${() => setActiveTab('authorization')}
+                    >
+                      Authorization
+                    </button>
+                    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
+                      <button
+                        data-hint=${
+                          connectedAccountId
+                            ? ''
+                            : `Please connect your account to proceed.`
+                        }
+                        type="button"
+                        class=${`${
+                          styles.functionFieldTab || 'function-field-tab'
+                        } ${
+                          activeTab === 'input'
+                            ? styles.functionFieldTabActive ||
+                              'function-field-tab-active'
+                            : ''
+                        } ${connectedAccountId ? '' : styles.disabled}`}
+                        onClick=${() => {
+                          if (connectedAccountId) {
+                            setActiveTab('input');
+                          }
+                        }}
+                      >
+                        Input
+                        ${
+                          visibleFields.length > 0
+                            ? ` (${visibleFields.length})`
+                            : ''
+                        }
+                      </button>
+                    </${Hint}>
+                  </div>
+
+                  <div class=${
+                    styles.functionFieldTabContent ||
+                    'function-field-tab-content'
+                  }>
+                    ${
+                      activeTab === 'authorization'
+                        ? html`
+                            <div
+                              class=${styles.functionFieldAuthContent ||
+                              'function-field-auth-content'}
+                            >
+                              ${html`${loadAuthorizationTabContent()}`}
+                            </div>
+                          `
+                        : html`
+                            <div
+                              class=${styles.functionFieldInputContent ||
+                              'function-field-input-content'}
+                            >
+                              <${FunctionForm}
+                                functionName=${selectedFunction}
+                                apiHandler=${props.apiHandler}
+                                functionArguments=${userFilledData}
+                                connectedAccountId=${connectedAccountId}
+                                customSaveCallback=${handleCustomaSave}
+                              />
+                            </div>
+                          `
+                    }
+                  </div>
+                </div>
+              `
+                    : null}
+                </div>
+
+                ${activeTab === 'input'
+                  ? html`
+                      <div
+                        class=${styles.functionFieldModalFooter ||
+                        'function-field-modal-footer'}
+                      >
+                        <button
+                          type="button"
+                          class=${styles.functionFieldCancelBtn ||
+                          'function-field-cancel-btn'}
+                          onClick=${handleCloseModal}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          class=${styles.functionFieldSaveBtn ||
+                          'function-field-save-btn'}
+                          onClick=${handleSave}
+                          disabled=${!selectedFunction ||
+                          formHasInvalidFields ||
+                          !connectedAccountId}
+                        >
+                          Save
+                        </button>
+                      </div>
+                    `
+                  : null}
+                ${activeTab === 'authorization' && selectedFunction
+                  ? html`
+                      <div
+                        class=${styles.functionFieldModalFooter ||
+                        'function-field-modal-footer'}
+                      >
+                        <button
+                          type="button"
+                          class=${styles.functionFieldCancelBtn ||
+                          'function-field-cancel-btn'}
+                          onClick=${handleCloseModal}
+                        >
+                          Cancel
+                        </button>
+                        <button
+                          type="button"
+                          class=${styles.functionFieldSaveBtn ||
+                          'function-field-save-btn'}
+                          onClick=${handleNextTab}
+                          disabled=${!selectedFunction || !connectedAccountId}
+                        >
+                          Next
+                        </button>
+                      </div>
+                    `
+                  : null}
+              </div>
+            </div>
+          `
+        : null}
+    </div>
+  `;
+};
+
+export { FunctionField, FunctionFieldProps };