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>
54 lines
1.9 KiB
TypeScript
54 lines
1.9 KiB
TypeScript
import { agentChatUsageState } from '@/ai/states/agentChatUsageState';
|
|
import { currentAIChatThreadState } from '@/ai/states/currentAIChatThreadState';
|
|
import { currentAIChatThreadTitleState } from '@/ai/states/currentAIChatThreadTitleState';
|
|
import { useOpenAskAIPageInCommandMenu } from '@/command-menu/hooks/useOpenAskAIPageInCommandMenu';
|
|
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
|
|
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { type AgentChatThread } from '~/generated-metadata/graphql';
|
|
|
|
export type UseAIChatThreadClickOptions = {
|
|
resetNavigationStack?: boolean;
|
|
};
|
|
|
|
export const useAIChatThreadClick = (
|
|
options: UseAIChatThreadClickOptions = {},
|
|
) => {
|
|
const { resetNavigationStack = false } = options;
|
|
const [, setCurrentAIChatThread] = useAtomState(currentAIChatThreadState);
|
|
const setCurrentAIChatThreadTitle = useSetAtomState(
|
|
currentAIChatThreadTitleState,
|
|
);
|
|
const setAgentChatUsage = useSetAtomState(agentChatUsageState);
|
|
const { openAskAIPage } = useOpenAskAIPageInCommandMenu();
|
|
|
|
const handleThreadClick = (thread: AgentChatThread) => {
|
|
setCurrentAIChatThread(thread.id);
|
|
setCurrentAIChatThreadTitle(thread.title ?? null);
|
|
|
|
const hasUsageData =
|
|
(thread.conversationSize ?? 0) > 0 &&
|
|
isDefined(thread.contextWindowTokens);
|
|
|
|
setAgentChatUsage(
|
|
hasUsageData
|
|
? {
|
|
lastMessage: null,
|
|
conversationSize: thread.conversationSize ?? 0,
|
|
contextWindowTokens: thread.contextWindowTokens ?? 0,
|
|
inputTokens: thread.totalInputTokens,
|
|
outputTokens: thread.totalOutputTokens,
|
|
inputCredits: thread.totalInputCredits,
|
|
outputCredits: thread.totalOutputCredits,
|
|
}
|
|
: null,
|
|
);
|
|
|
|
openAskAIPage({
|
|
resetNavigationStack,
|
|
});
|
|
};
|
|
|
|
return { handleThreadClick };
|
|
};
|