Abdul Rahman
e806d36099
## Summary Add Home/Chat tabs and a dedicated threads list in the navigation drawer. ## Changes - **Navbar tabs:** Tabs in the drawer to switch between Home and Chat (with “New chat” button). Shown on desktop when expanded and on mobile below the workspace selector. - **Navbar threads list:** New `NavigationDrawerAIChatThreadsList` for the Chat tab with date groups (Today / Yesterday / Older), thread rows as `NavigationDrawerItem` (IconComment, title, timestamp). Shared `useAIChatThreadClick` hook used by navbar and command menu; navbar passes `resetNavigationStack: true`. - **NavigationDrawerItem:** New `alwaysShowRightOptions` prop so the timestamp is always visible (no hover-only). --------- Co-authored-by: Etienne <45695613+etiennejouan@users.noreply.github.com> Co-authored-by: Félix Malfait <felix@twenty.com> Co-authored-by: Charles Bochet <charles@twenty.com>
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { NavigationDrawerAIChatThreadDateSection } from '@/ai/components/NavigationDrawerAIChatThreadDateSection';
|
|
import { AIChatSkeletonLoader } from '@/ai/components/internal/AIChatSkeletonLoader';
|
|
import { useAIChatThreadClick } from '@/ai/hooks/useAIChatThreadClick';
|
|
import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
|
|
import { groupThreadsByDate } from '@/ai/utils/groupThreadsByDate';
|
|
import { type DateGroupKey } from '@/ai/utils/dateGroupKey';
|
|
import { DATE_GROUP_KEYS } from '@/ai/utils/dateGroupKeys';
|
|
import { getDateGroupTitle } from '@/ai/utils/getDateGroupTitle';
|
|
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
|
|
import { useGetChatThreadsQuery } from '~/generated-metadata/graphql';
|
|
|
|
const StyledScrollableList = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: ${({ theme }) => theme.spacing(2, 0)};
|
|
width: ${({ theme }) => `calc(100% - ${theme.spacing(2)})`};
|
|
`;
|
|
|
|
export const NavigationDrawerAIChatThreadsList = () => {
|
|
const currentAIChatThread = useAtomStateValue(currentAIChatThreadState);
|
|
const { handleThreadClick } = useAIChatThreadClick({
|
|
resetNavigationStack: true,
|
|
});
|
|
|
|
const { data: { chatThreads = [] } = {}, loading } = useGetChatThreadsQuery();
|
|
const groupedThreads = groupThreadsByDate(chatThreads);
|
|
|
|
if (loading === true) {
|
|
return <AIChatSkeletonLoader />;
|
|
}
|
|
|
|
return (
|
|
<StyledScrollableList>
|
|
{DATE_GROUP_KEYS.map((key: DateGroupKey) => {
|
|
const threads = groupedThreads[key];
|
|
if (threads.length === 0) return null;
|
|
|
|
return (
|
|
<NavigationDrawerAIChatThreadDateSection
|
|
key={key}
|
|
title={getDateGroupTitle(key)}
|
|
threads={threads}
|
|
currentThreadId={currentAIChatThread}
|
|
onThreadClick={handleThreadClick}
|
|
/>
|
|
);
|
|
})}
|
|
</StyledScrollableList>
|
|
);
|
|
};
|