From 92635b960b85371d0eac6d704daf4a31e4a29c9d Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Thu, 26 Mar 2026 19:50:48 +0530 Subject: [PATCH] [AI] Navigation panel scroll refactor + Non chat placeholder (#18999) CleanShot 2026-03-26 at 16 19 34 CleanShot 2026-03-26 at 16 19 20 https://github.com/user-attachments/assets/64a8ad9b-0030-414c-a67d-3817ac3dd6b0 --- ....tsx => NavigationDrawerAIChatContent.tsx} | 74 +++++++++++++------ .../components/MainNavigationDrawer.tsx | 4 +- .../MainNavigationDrawerAIChatContent.tsx | 18 ----- .../NavigationDrawerScrollableContent.tsx | 4 +- 4 files changed, 55 insertions(+), 45 deletions(-) rename packages/twenty-front/src/modules/ai/components/{NavigationDrawerAIChatThreadsList.tsx => NavigationDrawerAIChatContent.tsx} (52%) delete mode 100644 packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx diff --git a/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx b/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatContent.tsx similarity index 52% rename from packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx rename to packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatContent.tsx index a5963453fa..2f029a5746 100644 --- a/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatThreadsList.tsx +++ b/packages/twenty-front/src/modules/ai/components/NavigationDrawerAIChatContent.tsx @@ -1,4 +1,6 @@ import { styled } from '@linaria/react'; +import { useLingui } from '@lingui/react/macro'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; import { AIChatSkeletonLoader } from '@/ai/components/internal/AIChatSkeletonLoader'; import { NavigationDrawerAIChatThreadDateSection } from '@/ai/components/NavigationDrawerAIChatThreadDateSection'; @@ -10,25 +12,39 @@ import { DATE_GROUP_KEYS } from '@/ai/utils/dateGroupKeys'; import { getDateGroupTitle } from '@/ai/utils/getDateGroupTitle'; import { groupThreadsByDate } from '@/ai/utils/groupThreadsByDate'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; -const StyledScrollableList = styled.div` +const StyledContainer = styled.div` display: flex; - flex: 1; flex-direction: column; + height: 100%; min-height: 0; - overflow-y: auto; +`; + +const StyledThreadList = styled.div` + display: flex; + flex-direction: column; padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[0]}; width: calc(100% - ${themeCssVariables.spacing[2]}); `; +const StyledEmptyState = styled.div` + align-items: center; + color: ${themeCssVariables.font.color.light}; + display: flex; + flex: 1; + font-size: ${themeCssVariables.font.size.md}; + justify-content: center; +`; + const StyledFetchMoreTrigger = styled.div` height: 1px; min-height: 1px; width: 100%; `; -export const NavigationDrawerAIChatThreadsList = () => { +export const NavigationDrawerAIChatContent = () => { + const { t } = useLingui(); + const currentAIChatThread = useAtomStateValue(currentAIChatThreadState); const { handleThreadClick } = useAIChatThreadClick({ resetNavigationStack: true, @@ -39,26 +55,40 @@ export const NavigationDrawerAIChatThreadsList = () => { const groupedThreads = groupThreadsByDate(threads); if (loading && threads.length === 0) { - return ; + return ( + + + + ); + } + + if (threads.length === 0) { + return ( + + {t`No chat`} + + ); } return ( - - {DATE_GROUP_KEYS.map((key: DateGroupKey) => { - const threadsInGroup = groupedThreads[key]; - if (threadsInGroup.length === 0) return null; + + + {DATE_GROUP_KEYS.map((key: DateGroupKey) => { + const threadsInGroup = groupedThreads[key]; + if (threadsInGroup.length === 0) return null; - return ( - - ); - })} - {hasNextPage ? : null} - + return ( + + ); + })} + {hasNextPage ? : null} + + ); }; diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx index dc5989efb4..839402e886 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawer.tsx @@ -1,5 +1,5 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; -import { MainNavigationDrawerAIChatContent } from '@/navigation/components/MainNavigationDrawerAIChatContent'; +import { NavigationDrawerAIChatContent } from '@/ai/components/NavigationDrawerAIChatContent'; import { MainNavigationDrawerNavigationContent } from '@/navigation/components/MainNavigationDrawerNavigationContent'; import { MainNavigationDrawerTabsRow } from '@/navigation/components/MainNavigationDrawerTabsRow'; import { NavigationDrawer } from '@/ui/navigation/navigation-drawer/components/NavigationDrawer'; @@ -27,7 +27,7 @@ export const MainNavigationDrawer = ({ className }: { className?: string }) => { {navigationDrawerActiveTab === NAVIGATION_DRAWER_TABS.AI_CHAT_HISTORY ? ( - + ) : ( )} diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx deleted file mode 100644 index 00551ce48d..0000000000 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { styled } from '@linaria/react'; - -import { NavigationDrawerAIChatThreadsList } from '@/ai/components/NavigationDrawerAIChatThreadsList'; - -const StyledAIChatThreadsListWrapper = styled.div` - display: flex; - flex: 1; - flex-direction: column; - min-height: 0; -`; - -export const MainNavigationDrawerAIChatContent = () => { - return ( - - - - ); -}; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx index 1aec9eeecc..3d4e20ed1c 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerScrollableContent.tsx @@ -7,10 +7,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants'; const StyledItemsContainer = styled.div` display: flex; - flex: 1; flex-direction: column; - margin-bottom: auto; - overflow: hidden; + height: 100%; `; const StyledScrollableInnerContainer = styled.div<{ isMobile?: boolean }>`