From 74536e6f9842b4157db606a00c88b4bca3cd82b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Mon, 27 Apr 2026 18:21:14 +0200 Subject: [PATCH] Gate AI chat navigation entries by AI_SETTINGS permission (#20089) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary The AI chat history tab in the navigation drawer (and the corresponding "New chat" icon in the mobile bottom bar) were rendered for every authenticated user, regardless of whether they had `AI_SETTINGS` permission. The actual chat content load is already gated — see `AgentChatThreadInitializationEffect` — but the entry points were not, so users without AI access saw a tab they could open and find empty. This regressed when the `IS_AI_ENABLED` feature flag was removed in #19916. The flag check was the only gate; nothing replaced it with a permission check. ## Fix Three small changes, all using `useHasPermissionFlag(PermissionFlagType.AI_SETTINGS)`: - **`MainNavigationDrawerTabsRow`** — return `null` when the user lacks AI access. This row only contains AI controls (the chat history tab pill + the "New chat" button), so without AI access there is nothing meaningful to render. - **`MainNavigationDrawer`** — only render `NavigationDrawerAiChatContent` when the user has AI access **and** the active tab is `AI_CHAT_HISTORY`. This is defensive: with the tabs row hidden the user can no longer switch to AI, but the active-tab atom could still carry `AI_CHAT_HISTORY` from a previous state (notably right after stopping impersonation of a user who had AI). Without this guard, the AI panel would briefly stay rendered. - **`MobileNavigationBar`** — drop the `newAiChat` item when the user lacks AI access. Surfaced by the same customer report that motivated #20088 (stop-impersonation state cleanup), but this is a separate, pre-existing bug — admins without AI permission see the tab regardless of impersonation. ## Test plan - [ ] As a user **with** `AI_SETTINGS` permission, verify the AI chat tab and "New chat" button still appear and work in both the desktop sidebar and mobile bottom bar - [ ] As a user **without** `AI_SETTINGS` permission, verify: - the tabs row at the top of the sidebar is gone (only the navigation menu shows below) - the "New chat" mobile bottom-bar icon is gone - the AI chat panel does not appear even after navigating away from a state where it was previously active 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.7 (1M context) --- .../components/MainNavigationDrawer.tsx | 12 +++++++-- .../MainNavigationDrawerTabsRow.tsx | 9 +++++++ .../components/MobileNavigationBar.tsx | 27 ++++++++++++------- 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx index 57bd1eaea7..a24046f696 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx @@ -2,18 +2,27 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; import { NavigationDrawerAiChatContent } from '@/ai/components/NavigationDrawerAiChatContent'; import { MainNavigationDrawerNavigationContent } from '@/navigation/components/MainNavigationDrawerNavigationContent'; import { MainNavigationDrawerTabsRow } from '@/navigation/components/MainNavigationDrawerTabsRow'; +import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag'; import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; import { NavigationDrawerFixedContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerFixedContent'; import { NavigationDrawerScrollableContent } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent'; import { navigationDrawerActiveTabState } from '@/ui/navigation/states/navigationDrawerActiveTabState'; import { NAVIGATION_DRAWER_TABS } from '@/ui/navigation/states/navigationDrawerTabs'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { PermissionFlagType } from '~/generated-metadata/graphql'; export const MainNavigationDrawer = ({ className }: { className?: string }) => { const navigationDrawerActiveTab = useAtomStateValue( navigationDrawerActiveTabState, ); const currentWorkspace = useAtomStateValue(currentWorkspaceState); + const hasAiSettingsPermission = useHasPermissionFlag( + PermissionFlagType.AI_SETTINGS, + ); + + const showAiChatContent = + hasAiSettingsPermission && + navigationDrawerActiveTab === NAVIGATION_DRAWER_TABS.AI_CHAT_HISTORY; return ( { - {navigationDrawerActiveTab === - NAVIGATION_DRAWER_TABS.AI_CHAT_HISTORY ? ( + {showAiChatContent ? ( ) : ( diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx index 0c53d35d0c..1650bf696e 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx @@ -12,6 +12,7 @@ import { useIsMobile } from 'twenty-ui/utilities'; import { useContext } from 'react'; import { useSwitchToNewAiChat } from '@/ai/hooks/useSwitchToNewAiChat'; +import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag'; import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper'; import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded'; import { navigationDrawerActiveTabState } from '@/ui/navigation/states/navigationDrawerActiveTabState'; @@ -22,6 +23,7 @@ import { import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState'; +import { PermissionFlagType } from '~/generated-metadata/graphql'; const StyledRow = styled.div<{ isExpanded: boolean }>` align-items: center; @@ -142,9 +144,16 @@ export const MainNavigationDrawerTabsRow = () => { const setIsNavigationDrawerExpanded = useSetAtomState( isNavigationDrawerExpandedState, ); + const hasAiSettingsPermission = useHasPermissionFlag( + PermissionFlagType.AI_SETTINGS, + ); const isExpanded = isNavigationDrawerExpanded || isMobile; + if (!hasAiSettingsPermission) { + return null; + } + const handleTabClick = (tab: NavigationDrawerActiveTab) => () => { setNavigationDrawerActiveTab(tab); }; diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index d07205b6ec..7e1430d92d 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -5,6 +5,7 @@ import { useDefaultHomePagePath } from '@/navigation/hooks/useDefaultHomePagePat import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage'; import { currentMobileNavigationDrawerState } from '@/navigation/states/currentMobileNavigationDrawerState'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; +import { useHasPermissionFlag } from '@/settings/roles/hooks/useHasPermissionFlag'; import { useOpenRecordsSearchPageInSidePanel } from '@/side-panel/hooks/useOpenRecordsSearchPageInSidePanel'; import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu'; import { isSidePanelOpenedState } from '@/side-panel/states/isSidePanelOpenedState'; @@ -20,6 +21,7 @@ import { IconSearch, } from 'twenty-ui/display'; import { NavigationBar } from 'twenty-ui/navigation'; +import { PermissionFlagType } from '~/generated-metadata/graphql'; type NavigationBarItemName = 'main' | 'search' | 'newAiChat'; @@ -37,6 +39,9 @@ export const MobileNavigationBar = () => { const { switchToNewChat } = useSwitchToNewAiChat(); const { alphaSortedActiveNonSystemObjectMetadataItems } = useFilteredObjectMetadataItems(); + const hasAiSettingsPermission = useHasPermissionFlag( + PermissionFlagType.AI_SETTINGS, + ); const setContextStoreCurrentObjectMetadataItemId = useSetAtomComponentState( contextStoreCurrentObjectMetadataItemIdComponentState, @@ -89,15 +94,19 @@ export const MobileNavigationBar = () => { openRecordsSearchPage(); }, }, - { - name: 'newAiChat' as const, - Icon: IconMessageCirclePlus, - onClick: () => { - setIsNavigationDrawerExpanded(false); - closeSidePanelMenu(); - switchToNewChat(); - }, - }, + ...(hasAiSettingsPermission + ? [ + { + name: 'newAiChat' as const, + Icon: IconMessageCirclePlus, + onClick: () => { + setIsNavigationDrawerExpanded(false); + closeSidePanelMenu(); + switchToNewChat(); + }, + }, + ] + : []), ]; return ;