Feat: Agent chat multi thread support (#13216)

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com> Co-authored-by: neo773 <62795688+neo773@users.noreply.github.com> Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Félix Malfait <felix@twenty.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions <github-actions@twenty.com> Co-authored-by: MD Readul Islam <99027968+readul-islam@users.noreply.github.com> Co-authored-by: readul-islam <developer.readul@gamil.com> Co-authored-by: Thomas des Francs <tdesfrancs@gmail.com> Co-authored-by: Guillim <guillim@users.noreply.github.com> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: Jean-Baptiste Ronssin <65334819+jbronssin@users.noreply.github.com> Co-authored-by: kahkashan shaik <93042682+kahkashanshaik@users.noreply.github.com> Co-authored-by: martmull <martmull@hotmail.fr> Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com> Co-authored-by: bosiraphael <raphael.bosi@gmail.com> Co-authored-by: Naifer <161821705+omarNaifer12@users.noreply.github.com> Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>
2025-07-16 12:56:40 +05:30
parent ffcbfa6215
commit 8edf59a521
40 changed files with 944 additions and 79 deletions
@@ -0,0 +1,118 @@
+import { currentAIChatThreadComponentState } from '@/ai/states/currentAIChatThreadComponentState';
+import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAIPageInCommandMenu';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { IconSparkles } from 'twenty-ui/display';
+import { AgentChatThread } from '~/generated-metadata/graphql';
+
+const StyledThreadsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDateGroup = styled.div`
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledDateHeader = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: 600;
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledThreadItem = styled.div<{ isSelected?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(2)};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  transition: all 0.2s ease;
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  border-left: 3px solid transparent;
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing(1, 0.25)};
+  right: ${({ theme }) => theme.spacing(0.75)};
+  position: relative;
+  width: calc(100% + ${({ theme }) => theme.spacing(0.25)});
+
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+  }
+`;
+
+const StyledSparkleIcon = styled.div`
+  align-items: center;
+  background: ${({ theme }) => theme.background.transparent.blue};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(1)};
+  justify-content: center;
+`;
+
+const StyledThreadContent = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+const StyledThreadTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const AIChatThreadGroup = ({
+  threads,
+  title,
+  agentId,
+}: {
+  threads: AgentChatThread[];
+  agentId: string;
+  title: string;
+}) => {
+  const { t } = useLingui();
+  const theme = useTheme();
+  const [, setCurrentThreadId] = useRecoilComponentStateV2(
+    currentAIChatThreadComponentState,
+    agentId,
+  );
+  const { openAskAIPage } = useOpenAskAIPageInCommandMenu();
+
+  if (threads.length === 0) {
+    return null;
+  }
+
+  return (
+    <StyledDateGroup>
+      <StyledDateHeader>{title}</StyledDateHeader>
+      <StyledThreadsList>
+        {threads.map((thread) => (
+          <StyledThreadItem
+            onClick={() => {
+              setCurrentThreadId(thread.id);
+              openAskAIPage(thread.title);
+            }}
+            key={thread.id}
+          >
+            <StyledSparkleIcon>
+              <IconSparkles
+                size={theme.icon.size.md}
+                color={theme.color.blue}
+              />
+            </StyledSparkleIcon>
+            <StyledThreadContent>
+              <StyledThreadTitle>
+                {thread.title || t`Untitled`}
+              </StyledThreadTitle>
+            </StyledThreadContent>
+          </StyledThreadItem>
+        ))}
+      </StyledThreadsList>
+    </StyledDateGroup>
+  );
+};
@@ -0,0 +1,86 @@
+import styled from '@emotion/styled';
+
+import { AIChatThreadGroup } from '@/ai/components/AIChatThreadGroup';
+import { AIChatThreadsListEffect } from '@/ai/components/AIChatThreadsListEffect';
+import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread';
+import { groupThreadsByDate } from '@/ai/utils/groupThreadsByDate';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
+import { AIChatSkeletonLoader } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/components/AIChatSkeletonLoader';
+import { Key } from 'ts-key-enum';
+import { capitalize } from 'twenty-shared/utils';
+import { Button } from 'twenty-ui/input';
+import { getOsControlSymbol } from 'twenty-ui/utilities';
+import { useGetAgentChatThreadsQuery } from '~/generated-metadata/graphql';
+
+const StyledContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const StyledThreadsContainer = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledButtonsContainer = styled.div`
+  display: flex;
+  padding: ${({ theme }) => theme.spacing(2, 2.5)};
+  justify-content: flex-end;
+  border-top: 1px solid ${({ theme }) => theme.border.color.medium};
+`;
+
+export const AIChatThreadsList = ({ agentId }: { agentId: string }) => {
+  const { createAgentChatThread } = useCreateNewAIChatThread({ agentId });
+
+  const focusId = `${agentId}-threads-list`;
+
+  useHotkeysOnFocusedElement({
+    keys: [`${Key.Control}+${Key.Enter}`, `${Key.Meta}+${Key.Enter}`],
+    callback: () => createAgentChatThread(),
+    focusId,
+    dependencies: [createAgentChatThread, agentId],
+  });
+
+  const { data: { agentChatThreads = [] } = {}, loading } =
+    useGetAgentChatThreadsQuery({
+      variables: { agentId },
+    });
+
+  const groupedThreads = groupThreadsByDate(agentChatThreads);
+
+  if (loading === true) {
+    return <AIChatSkeletonLoader />;
+  }
+
+  return (
+    <>
+      <AIChatThreadsListEffect focusId={focusId} />
+      <StyledContainer>
+        <StyledThreadsContainer>
+          {Object.entries(groupedThreads).map(([title, threads]) => (
+            <AIChatThreadGroup
+              key={title}
+              title={capitalize(title)}
+              agentId={agentId}
+              threads={threads}
+            />
+          ))}
+        </StyledThreadsContainer>
+        <StyledButtonsContainer>
+          <Button
+            variant="primary"
+            accent="blue"
+            size="medium"
+            title="New chat"
+            onClick={() => createAgentChatThread()}
+            hotkeys={[getOsControlSymbol(), '⏎']}
+          />
+        </StyledButtonsContainer>
+      </StyledContainer>
+    </>
+  );
+};
@@ -0,0 +1,26 @@
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useEffect } from 'react';
+
+export const AIChatThreadsListEffect = ({ focusId }: { focusId: string }) => {
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
+
+  useEffect(() => {
+    pushFocusItemToFocusStack({
+      focusId,
+      component: {
+        type: FocusComponentType.SIDE_PANEL,
+        instanceId: focusId,
+      },
+    });
+
+    return () => {
+      removeFocusItemFromFocusStackById({ focusId });
+    };
+  }, [pushFocusItemToFocusStack, removeFocusItemFromFocusStackById, focusId]);
+
+  return <></>;
+};
@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const CREATE_AGENT_CHAT_THREAD = gql`
+  mutation CreateAgentChatThread($input: CreateAgentChatThreadInput!) {
+    createAgentChatThread(input: $input) {
+      id
+      agentId
+      title
+      createdAt
+      updatedAt
+    }
+  }
+`;
@@ -0,0 +1,21 @@
+import { gql } from '@apollo/client';
+
+export const GET_AGENT_CHAT_MESSAGES = gql`
+  query GetAgentChatMessages($threadId: String!) {
+    agentChatMessages(threadId: $threadId) {
+      id
+      threadId
+      role
+      content
+      createdAt
+      files {
+        id
+        name
+        fullPath
+        size
+        type
+        createdAt
+      }
+    }
+  }
+`;
@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const GET_AGENT_CHAT_THREADS = gql`
+  query GetAgentChatThreads($agentId: String!) {
+    agentChatThreads(agentId: $agentId) {
+      id
+      agentId
+      title
+      createdAt
+      updatedAt
+    }
+  }
+`;
@@ -0,0 +1,22 @@
+import { currentAIChatThreadComponentState } from '@/ai/states/currentAIChatThreadComponentState';
+import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAIPageInCommandMenu';
+import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
+import { useCreateAgentChatThreadMutation } from '~/generated-metadata/graphql';
+
+export const useCreateNewAIChatThread = ({ agentId }: { agentId: string }) => {
+  const [, setCurrentThreadId] = useRecoilComponentStateV2(
+    currentAIChatThreadComponentState,
+    agentId,
+  );
+
+  const { openAskAIPage } = useOpenAskAIPageInCommandMenu();
+  const [createAgentChatThread] = useCreateAgentChatThreadMutation({
+    variables: { input: { agentId } },
+    onCompleted: (data) => {
+      setCurrentThreadId(data.createAgentChatThread.id);
+      openAskAIPage();
+    },
+  });
+
+  return { createAgentChatThread };
+};
@@ -0,0 +1,10 @@
+import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+export const currentAIChatThreadComponentState = createComponentStateV2<
+  string | null
+>({
+  key: 'currentAIChatThreadComponentState',
+  defaultValue: null,
+  componentInstanceContext: CommandMenuPageComponentInstanceContext,
+});
@@ -0,0 +1,29 @@
+import { AgentChatThread } from '~/generated-metadata/graphql';
+
+export const groupThreadsByDate = (threads: AgentChatThread[]) => {
+  const today = new Date();
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  return threads.reduce<{
+    today: AgentChatThread[];
+    yesterday: AgentChatThread[];
+    older: AgentChatThread[];
+  }>(
+    (acc, thread) => {
+      const threadDate = new Date(thread.createdAt);
+      const threadDateString = threadDate.toDateString();
+
+      if (threadDateString === today.toDateString()) {
+        acc.today.push(thread);
+      } else if (threadDateString === yesterday.toDateString()) {
+        acc.yesterday.push(thread);
+      } else {
+        acc.older.push(thread);
+      }
+
+      return acc;
+    },
+    { today: [], yesterday: [], older: [] },
+  );
+};