[AI] Improve tools tab (#19221)

packages/twenty-front/src/modules/ai/graphql/queries/getToolIndex.ts

@@ -7,6 +7,7 @@ export const GET_TOOL_INDEX = gql`
       description
       category
       objectName
+      icon
     }
   }
 `;

packages/twenty-front/src/modules/ai/hooks/useGetToolIndex.ts

@@ -1,16 +1,7 @@
 import { GET_TOOL_INDEX } from '@/ai/graphql/queries/getToolIndex';
 import { useQuery } from '@apollo/client/react';
 
-type ToolIndexEntry = {
-  name: string;
-  description: string;
-  category: string;
-  objectName?: string;
-};
-
-type GetToolIndexQuery = {
-  getToolIndex: ToolIndexEntry[];
-};
+import { type GetToolIndexQuery } from '~/generated-metadata/graphql';
 
 export const useGetToolIndex = () => {
   const { data, loading, error } = useQuery<GetToolIndexQuery>(GET_TOOL_INDEX);

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -161,6 +161,12 @@ const SettingsAIUsageUserDetail = lazy(() =>
   })),
 );
 
+const SettingsToolDetail = lazy(() =>
+  import('~/pages/settings/ai/SettingsToolDetail').then((module) => ({
+    default: module.SettingsToolDetail,
+  })),
+);
+
 const SettingsApplications = lazy(() =>
   import('~/pages/settings/applications/SettingsApplications').then(
     (module) => ({
@@ -546,6 +552,10 @@ export const SettingsRoutes = ({ isAdminPageEnabled }: SettingsRoutesProps) => (
           path={SettingsPath.AIUsageUserDetail}
           element={<SettingsAIUsageUserDetail />}
         />
+        <Route
+          path={SettingsPath.AIToolDetail}
+          element={<SettingsToolDetail />}
+        />
         <Route
           path={SettingsPath.LogicFunctionDetail}
           element={<SettingsLogicFunctionDetail />}

packages/twenty-front/src/modules/logic-functions/hooks/useGetOneLogicFunction.ts

@@ -6,7 +6,10 @@ import {
   type LogicFunctionIdInput,
 } from '~/generated-metadata/graphql';
 
-export const useGetOneLogicFunction = ({ id }: LogicFunctionIdInput) => {
+export const useGetOneLogicFunction = ({
+  id,
+  skip,
+}: LogicFunctionIdInput & { skip?: boolean }) => {
   const { data, loading } = useQuery<
     FindOneLogicFunctionQuery,
     FindOneLogicFunctionQueryVariables
@@ -14,6 +17,7 @@ export const useGetOneLogicFunction = ({ id }: LogicFunctionIdInput) => {
     variables: {
       input: { id },
     },
+    skip,
   });
 
   return {

packages/twenty-front/src/modules/logic-functions/states/logicFunctionsSelector.ts

@@ -0,0 +1,12 @@
+import { metadataStoreState } from '@/metadata-store/states/metadataStoreState';
+import { type LogicFunction } from '@/logic-functions/types/LogicFunction';
+import { createAtomSelector } from '@/ui/utilities/state/jotai/utils/createAtomSelector';
+
+export const logicFunctionsSelector = createAtomSelector<LogicFunction[]>({
+  key: 'logicFunctionsSelector',
+  get: ({ get }) => {
+    const storeItem = get(metadataStoreState, 'logicFunctions');
+
+    return storeItem.current as LogicFunction[];
+  },
+});

packages/twenty-front/src/modules/logic-functions/types/LogicFunction.ts

@@ -0,0 +1,4 @@
+import { type FindManyLogicFunctionsQuery } from '~/generated-metadata/graphql';
+
+export type LogicFunction =
+  FindManyLogicFunctionsQuery['findManyLogicFunctions'][number];

packages/twenty-front/src/modules/metadata-store/hooks/useLoadStaleMetadataEntities.ts

@@ -5,10 +5,8 @@ import { splitPageLayoutWithRelated } from '@/metadata-store/utils/splitPageLayo
 import { splitViewWithRelated } from '@/metadata-store/utils/splitViewWithRelated';
 import { FIND_MANY_OBJECT_METADATA_ITEMS } from '@/object-metadata/graphql/queries';
 import { transformPageLayout } from '@/page-layout/utils/transformPageLayout';
-import { logicFunctionsState } from '@/settings/logic-functions/states/logicFunctionsState';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useApolloClient } from '@apollo/client/react';
-import { useStore } from 'jotai';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import {
@@ -56,7 +54,6 @@ const hasOverlap = (
 
 export const useLoadStaleMetadataEntities = () => {
   const client = useApolloClient();
-  const store = useStore();
   const { replaceDraft, applyChanges } = useUpdateMetadataStoreDraft();
   const isAiEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_AI_ENABLED);
 
@@ -166,10 +163,6 @@ export const useLoadStaleMetadataEntities = () => {
                 return;
               }
 
-              store.set(
-                logicFunctionsState.atom,
-                result.data.findManyLogicFunctions,
-              );
               replaceDraft(
                 'logicFunctions',
                 result.data.findManyLogicFunctions,
@@ -240,7 +233,7 @@ export const useLoadStaleMetadataEntities = () => {
       await Promise.all(fetchPromises);
       applyChanges();
     },
-    [client, store, replaceDraft, applyChanges, isAiEnabled],
+    [client, replaceDraft, applyChanges, isAiEnabled],
   );
 
   return { loadStaleMetadataEntities };

packages/twenty-front/src/modules/metadata-store/types/FlatLogicFunction.ts

@@ -1,3 +1,3 @@
-import { type LogicFunction } from '@/settings/logic-functions/states/logicFunctionsState';
+import { type LogicFunction } from '@/logic-functions/types/LogicFunction';
 
 export type FlatLogicFunction = LogicFunction;

packages/twenty-front/src/modules/settings/logic-functions/states/logicFunctionsState.ts

@@ -1,10 +0,0 @@
-import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
-import { type FindManyLogicFunctionsQuery } from '~/generated-metadata/graphql';
-
-export type LogicFunction =
-  FindManyLogicFunctionsQuery['findManyLogicFunctions'][number];
-
-export const logicFunctionsState = createAtomState<LogicFunction[]>({
-  key: 'logicFunctionsState',
-  defaultValue: [],
-});

packages/twenty-front/src/modules/side-panel/pages/workflow/action/components/SidePanelWorkflowSelectAction.tsx

@@ -1,5 +1,6 @@
 import { WorkflowActionMenuItems } from '@/side-panel/pages/workflow/action/components/WorkflowActionMenuItems';
-import { logicFunctionsState } from '@/settings/logic-functions/states/logicFunctionsState';
+import { logicFunctionsSelector } from '@/logic-functions/states/logicFunctionsSelector';
+import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
 import { SidePanelStepListContainer } from '@/workflow/workflow-steps/components/SidePanelWorkflowSelectStepContainer';
 import { SidePanelWorkflowSelectStepTitle } from '@/workflow/workflow-steps/components/SidePanelWorkflowSelectStepTitle';
@@ -10,7 +11,6 @@ import { HUMAN_INPUT_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/
 import { RECORD_ACTIONS } from '@/workflow/workflow-steps/workflow-actions/constants/RecordActions';
 import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useLingui } from '@lingui/react/macro';
 import { IconFunction } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
@@ -33,7 +33,7 @@ export const SidePanelWorkflowSelectAction = ({
 
   const { t } = useLingui();
 
-  const logicFunctions = useAtomStateValue(logicFunctionsState);
+  const logicFunctions = useAtomStateValue(logicFunctionsSelector);
 
   const toolFunctions = logicFunctions.filter((fn) => fn.isTool === true);