[AI] Fix new chat button stacking side panel and auto-focus editor (#18875)

closes
https://discord.com/channels/1130383047699738754/1480984504737861853
https://discord.com/channels/1130383047699738754/1481210013950279740

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

packages/twenty-front/src/modules/ai/components/internal/AIChatEditorFocusEffect.tsx

@@ -1,7 +1,7 @@
 import { type Editor } from '@tiptap/react';
 import { useEffect } from 'react';
 
-import { focusEditorAfterMigrateState } from '@/ai/states/focusEditorAfterMigrateState';
+import { shouldFocusChatEditorState } from '@/ai/states/shouldFocusChatEditorState';
 import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
 
 type AIChatEditorFocusEffectProps = {
@@ -11,24 +11,24 @@ type AIChatEditorFocusEffectProps = {
 export const AIChatEditorFocusEffect = ({
   editor,
 }: AIChatEditorFocusEffectProps) => {
-  const [focusEditorAfterMigrate, setFocusEditorAfterMigrate] = useAtomState(
-    focusEditorAfterMigrateState,
+  const [shouldFocusChatEditor, setShouldFocusChatEditor] = useAtomState(
+    shouldFocusChatEditorState,
   );
 
   useEffect(() => {
-    if (!focusEditorAfterMigrate || !editor) {
+    if (!shouldFocusChatEditor || !editor) {
       return;
     }
 
     const rafId = requestAnimationFrame(() => {
       editor.commands.focus('end');
-      setFocusEditorAfterMigrate(false);
+      setShouldFocusChatEditor(false);
     });
 
     return () => {
       cancelAnimationFrame(rafId);
     };
-  }, [focusEditorAfterMigrate, editor, setFocusEditorAfterMigrate]);
+  }, [shouldFocusChatEditor, editor, setShouldFocusChatEditor]);
 
   return null;
 };

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

@@ -8,7 +8,7 @@ import { agentChatInputState } from '@/ai/states/agentChatInputState';
 import { agentChatUsageState } from '@/ai/states/agentChatUsageState';
 import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
 import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
-import { focusEditorAfterMigrateState } from '@/ai/states/focusEditorAfterMigrateState';
+import { shouldFocusChatEditorState } from '@/ai/states/shouldFocusChatEditorState';
 import { hasTriggeredCreateForDraftState } from '@/ai/states/hasTriggeredCreateForDraftState';
 import { isCreatingChatThreadState } from '@/ai/states/isCreatingChatThreadState';
 import { isCreatingForFirstSendState } from '@/ai/states/isCreatingForFirstSendState';
@@ -60,7 +60,7 @@ export const useCreateAgentChatThread = () => {
           [newThreadId]: newDraft,
           [AGENT_CHAT_NEW_THREAD_DRAFT_KEY]: '',
         }));
-        store.set(focusEditorAfterMigrateState.atom, true);
+        store.set(shouldFocusChatEditorState.atom, true);
         store.set(skipMessagesSkeletonUntilLoadedState.atom, true);
         store.set(threadIdCreatedFromDraftState.atom, newThreadId);
       } else {

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

@@ -8,6 +8,7 @@ import { agentChatInputState } from '@/ai/states/agentChatInputState';
 import { agentChatUsageState } from '@/ai/states/agentChatUsageState';
 import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
 import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
+import { shouldFocusChatEditorState } from '@/ai/states/shouldFocusChatEditorState';
 import { hasTriggeredCreateForDraftState } from '@/ai/states/hasTriggeredCreateForDraftState';
 import { threadIdCreatedFromDraftState } from '@/ai/states/threadIdCreatedFromDraftState';
 import { useOpenAskAIPageInSidePanel } from '@/side-panel/hooks/useOpenAskAIPageInSidePanel';
@@ -48,7 +49,8 @@ export const useSwitchToNewAIChat = () => {
     setAgentChatInput(newChatDraft);
     setCurrentAIChatThreadTitle(null);
     setAgentChatUsage(null);
-    openAskAIPage({ resetNavigationStack: false });
+    openAskAIPage();
+    store.set(shouldFocusChatEditorState.atom, true);
   };
 
   return { switchToNewChat };

packages/twenty-front/src/modules/ai/states/focusEditorAfterMigrateState.ts

@@ -1,6 +0,0 @@
-import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
-
-export const focusEditorAfterMigrateState = createAtomState<boolean>({
-  key: 'ai/focusEditorAfterMigrateState',
-  defaultValue: false,
-});

packages/twenty-front/src/modules/ai/states/shouldFocusChatEditorState.ts

@@ -0,0 +1,6 @@
+import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState';
+
+export const shouldFocusChatEditorState = createAtomState<boolean>({
+  key: 'ai/shouldFocusChatEditorState',
+  defaultValue: false,
+});