From 493830204a349e9b56be509df972d54e1e4232d3 Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Tue, 24 Mar 2026 13:56:33 +0530 Subject: [PATCH] [AI] Fix new chat button stacking side panel and auto-focus editor (#18875) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes https://discord.com/channels/1130383047699738754/1480984504737861853 https://discord.com/channels/1130383047699738754/1481210013950279740 Co-authored-by: Félix Malfait --- .../components/internal/AIChatEditorFocusEffect.tsx | 12 ++++++------ .../src/modules/ai/hooks/useCreateAgentChatThread.ts | 4 ++-- .../src/modules/ai/hooks/useSwitchToNewAIChat.ts | 4 +++- .../ai/states/focusEditorAfterMigrateState.ts | 6 ------ .../modules/ai/states/shouldFocusChatEditorState.ts | 6 ++++++ 5 files changed, 17 insertions(+), 15 deletions(-) delete mode 100644 packages/twenty-front/src/modules/ai/states/focusEditorAfterMigrateState.ts create mode 100644 packages/twenty-front/src/modules/ai/states/shouldFocusChatEditorState.ts diff --git a/packages/twenty-front/src/modules/ai/components/internal/AIChatEditorFocusEffect.tsx b/packages/twenty-front/src/modules/ai/components/internal/AIChatEditorFocusEffect.tsx index 3964c1f9f6..c1985c7269 100644 --- a/packages/twenty-front/src/modules/ai/components/internal/AIChatEditorFocusEffect.tsx +++ b/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; }; diff --git a/packages/twenty-front/src/modules/ai/hooks/useCreateAgentChatThread.ts b/packages/twenty-front/src/modules/ai/hooks/useCreateAgentChatThread.ts index af02575779..b40ee5783b 100644 --- a/packages/twenty-front/src/modules/ai/hooks/useCreateAgentChatThread.ts +++ b/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 { diff --git a/packages/twenty-front/src/modules/ai/hooks/useSwitchToNewAIChat.ts b/packages/twenty-front/src/modules/ai/hooks/useSwitchToNewAIChat.ts index 33184a8495..7e04751c38 100644 --- a/packages/twenty-front/src/modules/ai/hooks/useSwitchToNewAIChat.ts +++ b/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 }; diff --git a/packages/twenty-front/src/modules/ai/states/focusEditorAfterMigrateState.ts b/packages/twenty-front/src/modules/ai/states/focusEditorAfterMigrateState.ts deleted file mode 100644 index c24b44b0a1..0000000000 --- a/packages/twenty-front/src/modules/ai/states/focusEditorAfterMigrateState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { createAtomState } from '@/ui/utilities/state/jotai/utils/createAtomState'; - -export const focusEditorAfterMigrateState = createAtomState({ - key: 'ai/focusEditorAfterMigrateState', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/ai/states/shouldFocusChatEditorState.ts b/packages/twenty-front/src/modules/ai/states/shouldFocusChatEditorState.ts new file mode 100644 index 0000000000..b10abd89a5 --- /dev/null +++ b/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({ + key: 'ai/shouldFocusChatEditorState', + defaultValue: false, +});