@integry/sdk 4.6.39 → 4.6.40

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

@@ -0,0 +1,565 @@
+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;
+};
+
+const FunctionField = (props: FunctionFieldProps) => {
+  const { value, label, description, field } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  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>([]);
+  const [functionValue, setFunctionValue] = useState<any>(value);
+  const [formHasInvalidFields, setFormHasInvalidFields] = useState<boolean>(
+    false,
+  );
+  const [userFilledData, setUserFilledData] = useState<any>(
+    value?.default_arguments || {},
+  );
+
+  const modalRef = useRef<HTMLDivElement | null>(null);
+  const FUNCTIONS_LIST_URL = `https://api.integry.io/functions/list/`;
+
+  // Find the selected function from the saved value
+  useEffect(() => {
+    // if (value?.functionId) {
+    //   const func = FUNCTION_OPTIONS.find((f) => f.id === value.functionId);
+    //   if (func) {
+    //     setSelectedFunction(func);
+    //     setConfigValues(value.config || {});
+    //   }
+    // }
+  }, [value]);
+
+  // 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]);
+
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+  };
+
+  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;
+  };
+
+  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 functionId = (e.target as HTMLSelectElement).value;
+    // const func = FUNCTION_OPTIONS.find((f) => f.id === functionId);
+    // setSelectedFunction(func || null);
+    // setConfigValues({});
+  };
+
+  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;
+  };
+
+  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: {},
+      };
+      setFunctionValue(schema);
+      if (props.onChange) {
+        props.onChange(schema);
+      }
+      // onChange({
+      //   functionId: selectedFunction.id,
+      //   functionName: selectedFunction.name,
+      //   config: configValues,
+      // });
+      setIsOpen(false);
+    }
+  };
+
+  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 handleFunctionDeleted = () => {
+    setFunctionValue(null);
+    setFunctionDetails(null);
+    setSelectedFunction('');
+    setConnectedAccountId(null);
+  };
+
+  const handleCustomaSave = (customSaveResponse: any) => {
+    setFormHasInvalidFields(customSaveResponse.hasInvalidFields);
+    setUserFilledData(customSaveResponse.data);
+  };
+
+  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>
+        `}
+      </label>`}
+      ${functionValue?.meta?.id
+        ? html`
+            <div
+              class=${styles.functionFieldSummary || 'function-field-summary'}
+            >
+              <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();
+                      handleFunctionDeleted();
+                    }}
+                    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=${handleOpenModal}
+                  >
+                    Edit
+                  </button>
+                </div>
+              </div>
+            </div>
+          `
+        : html`
+            <button
+              type="button"
+              class=${styles.functionFieldAddBtn || 'function-field-add-btn'}
+              onClick=${handleOpenModal}
+            >
+              Add action
+            </button>
+          `}
+      ${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'}
+              >
+                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=${(val: string) => {
+                    handleFunctionSelect(val);
+                  }}
+                  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>
+                    <//>
+                  </div>
+
+                  <div
+                    class=${styles.functionFieldTabContent ||
+                    'function-field-tab-content'}
+                  >
+                    ${activeTab === 'authorization'
+                      ? html`
+                          <div
+                            class=${styles.functionFieldAuthContent ||
+                            'function-field-auth-content'}
+                          >
+                            ${loadingFunctionDetails
+                              ? html`
+                                  <div
+                                    class=${styles.loader ||
+                                    'function-field-loader'}
+                                  >
+                                    <${LargeLoader} />
+                                  </div>
+                                `
+                              : functionDetails &&
+                                html`<${AuthSelectorV2}
+                                  authorizations=${connectedAccounts}
+                                  appName=${functionDetails.meta.app.title}
+                                  apiHandler=${props.apiHandler}
+                                  onAuthSelected=${(authId: number) => {
+                                    setConnectedAccountId(authId);
+                                  }}
+                                  onAuthCreated=${handleAuthCreated}
+                                  onAuthDeleted=${handleAuthDeleted}
+                                  selectedAuthId=${connectedAccountId ||
+                                  functionDetails.meta.app.connected_accounts
+                                    .length > 0
+                                    ? functionDetails.meta.app
+                                        .connected_accounts[0]?.id
+                                    : null}
+                                  loginUrl=${functionDetails.meta.app.login_url}
+                                ><//>`}
+                          </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>
+              `}
+            </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>`}
+            ${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="${(e: any) => {
+                  setActiveTab('input');
+                }}"
+                disabled=${!selectedFunction || !connectedAccountId}
+              >
+                Next
+              </button>
+            </div>`}
+          </div>
+        </div>
+      `}
+    </div>
+  `;
+};
+
+export { FunctionField, FunctionFieldProps };