Fix AI demo workspace skill (#18575)

This PR fixes what allows to have a working demo workspace skill.

- Skill updated many times into something that works
- Fixed infinite loop in AI chat by memoizing ai-sdk output
- Finished navigateToView implementation
- Increased MAX_STEPS to 300 so the chat don't quit in the middle of a
long running skill
- Added CreateManyRelationFields

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

@@ -24,6 +24,7 @@ import { mapDBMessagesToUIMessages } from '@/ai/utils/mapDBMessagesToUIMessages'
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
 
+import { useCallback, useMemo } from 'react';
 import {
   type GetChatThreadsQuery,
   GetChatThreadsDocument,
@@ -181,7 +182,11 @@ export const useAgentChatData = () => {
     },
   });
 
-  const isNewThread = currentAIChatThread === AGENT_CHAT_NEW_THREAD_DRAFT_KEY;
+  const isNewThread = useMemo(
+    () => currentAIChatThread === AGENT_CHAT_NEW_THREAD_DRAFT_KEY,
+    [currentAIChatThread],
+  );
+
   const { loading: messagesLoading, data } = useGetChatMessagesQuery({
     variables: { threadId: currentAIChatThread! },
     skip: !isDefined(currentAIChatThread) || isNewThread,
@@ -191,7 +196,7 @@ export const useAgentChatData = () => {
     },
   });
 
-  const ensureThreadForDraft = () => {
+  const ensureThreadForDraft = useCallback(() => {
     const current = store.get(currentAIChatThreadState.atom);
     if (current !== AGENT_CHAT_NEW_THREAD_DRAFT_KEY) {
       return;
@@ -218,9 +223,16 @@ export const useAgentChatData = () => {
     threadIdPromise.finally(() => {
       setPendingCreateFromDraftPromise(null);
     });
-  };
+  }, [
+    createChatThread,
+    setPendingCreateFromDraftPromise,
+    store,
+    setIsCreatingChatThread,
+  ]);
 
-  const ensureThreadIdForSend = async (): Promise<string | null> => {
+  const ensureThreadIdForSend = useCallback(async (): Promise<
+    string | null
+  > => {
     const current = store.get(currentAIChatThreadState.atom);
     if (current !== AGENT_CHAT_NEW_THREAD_DRAFT_KEY) {
       return current;
@@ -247,16 +259,33 @@ export const useAgentChatData = () => {
     } finally {
       setIsCreatingChatThread(false);
     }
-  };
+  }, [createChatThread, store, setIsCreatingChatThread]);
 
-  const uiMessages = mapDBMessagesToUIMessages(data?.chatMessages || []);
-  const isLoading = messagesLoading || threadsLoading;
+  const threadsLoadingMemoized = useMemo(
+    () => threadsLoading,
+    [threadsLoading],
+  );
+
+  const messagesLoadingMemoized = useMemo(
+    () => messagesLoading,
+    [messagesLoading],
+  );
+
+  const uiMessages = useMemo(
+    () => mapDBMessagesToUIMessages(data?.chatMessages || []),
+    [data?.chatMessages],
+  );
+
+  const isLoading = useMemo(
+    () => messagesLoadingMemoized || threadsLoadingMemoized,
+    [messagesLoadingMemoized, threadsLoadingMemoized],
+  );
 
   return {
     uiMessages,
     isLoading,
-    threadsLoading,
-    messagesLoading,
+    threadsLoading: threadsLoadingMemoized,
+    messagesLoading: messagesLoadingMemoized,
     ensureThreadForDraft,
     ensureThreadIdForSend,
   };

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

@@ -2,6 +2,7 @@ import { AI_CHAT_SCROLL_WRAPPER_ID } from '@/ai/constants/AiChatScrollWrapperId'
 import { useScrollWrapperHTMLElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperHTMLElement';
 import { scrollWrapperScrollBottomComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollBottomComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useCallback, useMemo } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 const SCROLL_BOTTOM_THRESHOLD_PX = 10;
@@ -16,9 +17,12 @@ export const useAgentChatScrollToBottom = () => {
     AI_CHAT_SCROLL_WRAPPER_ID,
   );
 
-  const isNearBottom = scrollWrapperScrollBottom <= SCROLL_BOTTOM_THRESHOLD_PX;
+  const isNearBottom = useMemo(
+    () => scrollWrapperScrollBottom <= SCROLL_BOTTOM_THRESHOLD_PX,
+    [scrollWrapperScrollBottom],
+  );
 
-  const scrollToBottom = () => {
+  const scrollToBottom = useCallback(() => {
     const { scrollWrapperElement } = getScrollWrapperElement();
     if (!isDefined(scrollWrapperElement)) {
       return;
@@ -27,7 +31,7 @@ export const useAgentChatScrollToBottom = () => {
     scrollWrapperElement.scrollTo({
       top: scrollWrapperElement.scrollHeight,
     });
-  };
+  }, [getScrollWrapperElement]);
 
   return { scrollToBottom, isNearBottom };
 };

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

@@ -80,9 +80,26 @@ export const useProcessUIToolCallMessage = () => {
 
           break;
         }
-        case 'navigateToView':
-          // TODO: implement
+        case 'navigateToView': {
+          const viewObjectNamePlural = objectMetadataItems.find(
+            (item) =>
+              item.nameSingular === navigateAppOutput.objectNameSingular,
+          )?.namePlural;
+
+          if (!isDefined(viewObjectNamePlural)) {
+            throw new Error(
+              `Object with singular name ${navigateAppOutput.objectNameSingular} not found, cannot navigate to view from chat.`,
+            );
+          }
+
+          navigateApp(
+            AppPath.RecordIndexPage,
+            { objectNamePlural: viewObjectNamePlural },
+            { viewId: navigateAppOutput.viewId },
+          );
+
           break;
+        }
         case 'wait': {
           await sleep(navigateAppOutput.durationMs);
           break;