Restructure agent chat messages with parts-based architecture (#14749)

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/command-menu/pages/ask-ai/components/CommandMenuAskAIPage.tsx

@@ -1,7 +1,16 @@
-import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { AIChatTab } from '@/ai/components/AIChatTab';
+import { currentAIChatThreadComponentState } from '@/ai/states/currentAIChatThreadComponentState';
+import { mapDBMessagesToUIMessages } from '@/ai/utils/mapDBMessagesToUIMessages';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import { useRecoilValue } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import {
+  useGetAgentChatMessagesQuery,
+  useGetAgentChatThreadsQuery,
+} from '~/generated-metadata/graphql';
 
 const StyledContainer = styled.div`
   height: 100%;
@@ -21,17 +30,45 @@ export const CommandMenuAskAIPage = () => {
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const agentId = currentWorkspace?.defaultAgent?.id;
 
-  if (!agentId) {
+  const [currentThreadId, setCurrentThreadId] = useRecoilComponentState(
+    currentAIChatThreadComponentState,
+    agentId,
+  );
+
+  const { loading: threadsLoading } = useGetAgentChatThreadsQuery({
+    variables: { agentId: agentId! },
+    skip: isDefined(currentThreadId) || !isDefined(agentId),
+    onCompleted: (data) => {
+      if (data.agentChatThreads.length > 0) {
+        setCurrentThreadId(data.agentChatThreads[0].id);
+      }
+    },
+  });
+
+  const { loading, data } = useGetAgentChatMessagesQuery({
+    variables: { threadId: currentThreadId as string },
+    skip: !isDefined(currentThreadId),
+  });
+
+  const isLoading = loading || !currentThreadId || threadsLoading;
+
+  if (!agentId || isLoading) {
     return (
       <StyledContainer>
-        <StyledEmptyState>No AI Agent found.</StyledEmptyState>
+        <StyledEmptyState>
+          {isLoading ? t`Loading...` : t`No AI Agent found.`}
+        </StyledEmptyState>
       </StyledContainer>
     );
   }
 
   return (
     <StyledContainer>
-      <AIChatTab agentId={agentId} />
+      <AIChatTab
+        agentId={agentId}
+        key={currentThreadId}
+        uiMessages={mapDBMessagesToUIMessages(data?.agentChatMessages || [])}
+      />
     </StyledContainer>
   );
 };