11import { Transition } from '@headlessui/react' ;
22import { useRouter } from 'next/router' ;
3- import { useMemo } from 'react' ;
43
5- import { ConfigurationDrawerButton } from '@/components/ConfigurationDrawerButton' ;
6- import { Dot } from '@/components/Dot' ;
7- import IconButton from '@/components/IconButton' ;
4+ import { IconButton } from '@/components/IconButton' ;
85import { KebabMenu , KebabMenuItem } from '@/components/KebabMenu' ;
96import { Text } from '@/components/Shared' ;
7+ import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip' ;
108import { useIsDesktop } from '@/hooks/breakpoint' ;
11- import { useConversationActions } from '@/hooks/conversation' ;
129import { WelcomeGuideStep , useWelcomeGuideState } from '@/hooks/ftux' ;
13- import { useIsGroundingOn } from '@/hooks/grounding' ;
1410import {
1511 useCitationsStore ,
1612 useConversationStore ,
@@ -19,66 +15,58 @@ import {
1915} from '@/stores' ;
2016import { cn } from '@/utils' ;
2117
22- const useMenuItems = ( { conversationId } : { conversationId ?: string } ) => {
23- const { deleteConversation } = useConversationActions ( ) ;
18+ const useHeaderMenu = ( { conversationId } : { conversationId ?: string } ) => {
2419 const { resetConversation } = useConversationStore ( ) ;
2520 const { resetCitations } = useCitationsStore ( ) ;
21+
2622 const { settings, setSettings } = useSettingsStore ( ) ;
2723 const { resetFileParams } = useParamsStore ( ) ;
2824 const router = useRouter ( ) ;
2925 const { welcomeGuideState, progressWelcomeGuideStep, finishWelcomeGuide } =
3026 useWelcomeGuideState ( ) ;
31- const isGroundingOn = useIsGroundingOn ( ) ;
3227
33- const menuItems : KebabMenuItem [ ] = useMemo ( ( ) => {
34- if ( ! conversationId ) {
35- return [ ] ;
36- }
28+ const handleNewChat = ( ) => {
29+ const assistantId = router . query . assistantId ;
30+
31+ const url = assistantId ? `/?assistantId=${ assistantId } : '/' ;
32+ router . push ( url , undefined , { shallow : true } ) ;
33+ resetConversation ( ) ;
34+ resetCitations ( ) ;
35+ resetFileParams ( ) ;
36+ } ;
3737
38- return [
39- {
40- label : 'Tools' ,
41- icon : < Dot on = { isGroundingOn } /> ,
42- onClick : ( ) => {
43- setSettings ( { isConfigDrawerOpen : true } ) ;
38+ const handleOpenSettings = ( ) => {
39+ setSettings ( { isConfigDrawerOpen : true } ) ;
40+
41+ if ( welcomeGuideState === WelcomeGuideStep . ONE && router . pathname === '/' ) {
42+ progressWelcomeGuideStep ( ) ;
43+ } else if ( welcomeGuideState !== WelcomeGuideStep . DONE ) {
44+ finishWelcomeGuide ( ) ;
45+ }
46+ } ;
4447
45- if ( welcomeGuideState === WelcomeGuideStep . ONE && router . pathname === '/' ) {
46- progressWelcomeGuideStep ( ) ;
47- } else if ( welcomeGuideState !== WelcomeGuideStep . DONE ) {
48- finishWelcomeGuide ( ) ;
49- }
50- } ,
51- } ,
52- {
53- label : 'Delete chat' ,
54- iconName : 'trash' ,
55- onClick : ( ) => {
56- deleteConversation ( { id : conversationId } ) ;
57- } ,
58- className : 'text-danger-500' ,
59- } ,
60- {
61- label : 'New chat' ,
62- iconName : 'new-message' ,
63- onClick : ( ) => {
64- router . push ( '/' , undefined , { shallow : true } ) ;
65- resetConversation ( ) ;
66- resetCitations ( ) ;
67- resetFileParams ( ) ;
68- } ,
69- } ,
70- ] ;
71- } , [ conversationId , settings , isGroundingOn ] ) ;
48+ const menuItems : KebabMenuItem [ ] = [
49+ {
50+ label : 'Settings' ,
51+ iconName : 'settings' ,
52+ onClick : handleOpenSettings ,
53+ } ,
54+ {
55+ label : 'New chat' ,
56+ iconName : 'new-message' ,
57+ onClick : handleNewChat ,
58+ } ,
59+ ] ;
7260
73- return menuItems ;
61+ return { menuItems, handleNewChat , handleOpenSettings } ;
7462} ;
7563
7664type Props = {
7765 isStreaming ?: boolean ;
7866 conversationId ?: string ;
7967} ;
8068
81- export const Header : React . FC < Props > = ( { conversationId , isStreaming } ) => {
69+ export const Header : React . FC < Props > = ( { isStreaming } ) => {
8270 const {
8371 conversation : { id, name } ,
8472 } = useConversationStore ( ) ;
@@ -87,17 +75,13 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
8775 setSettings,
8876 setIsConvListPanelOpen,
8977 } = useSettingsStore ( ) ;
90- const isDesktop = useIsDesktop ( ) ;
91- const menuItems = useMenuItems ( { conversationId : id } ) ;
9278
93- const { deleteConversation } = useConversationActions ( ) ;
79+ const { welcomeGuideState } = useWelcomeGuideState ( ) ;
9480
95- const handleDelete = ( e : React . MouseEvent < HTMLButtonElement , MouseEvent > ) => {
96- e . stopPropagation ( ) ;
97- e . preventDefault ( ) ;
98- if ( ! id ) return ;
99- deleteConversation ( { id } ) ;
100- } ;
81+ const isDesktop = useIsDesktop ( ) ;
82+ const { menuItems, handleNewChat, handleOpenSettings } = useHeaderMenu ( {
83+ conversationId : id ,
84+ } ) ;
10185
10286 return (
10387 < div className = { cn ( 'flex h-header w-full min-w-0 items-center border-b' , 'border-marble-400' ) } >
@@ -139,20 +123,29 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
139123 </ Text >
140124 </ span >
141125 < span className = "flex items-center gap-x-2 py-4 pl-4 md:pl-0" >
142- < KebabMenu
143- className = { cn ( 'md:hidden' , { hidden : ! conversationId } ) }
144- items = { menuItems }
145- anchor = "left start"
146- />
126+ < KebabMenu className = "md:hidden" items = { menuItems } anchor = "left start" />
147127 < IconButton
148- iconName = "trash"
149- onClick = { handleDelete }
128+ tooltip = { { label : 'New chat' , placement : 'bottom-end' , size : 'md' } }
129+ className = "hidden md:flex"
130+ iconName = "new-message"
131+ onClick = { handleNewChat }
150132 disabled = { isStreaming }
151- className = { cn ( 'hidden' , { 'md:flex' : ! ! conversationId } ) }
152- />
153- < ConfigurationDrawerButton
154- className = { cn ( { flex : ! conversationId , 'hidden md:flex' : ! ! conversationId } ) }
155133 />
134+ < div className = "relative" >
135+ < IconButton
136+ tooltip = { { label : 'Settings' , placement : 'bottom-end' , size : 'md' } }
137+ className = "hidden md:flex"
138+ onClick = { handleOpenSettings }
139+ iconName = "settings"
140+ disabled = { isStreaming }
141+ />
142+ < WelcomeGuideTooltip
143+ step = { 1 }
144+ className = { cn ( 'right-0 top-full mt-9' , {
145+ 'delay-1000' : ! welcomeGuideState || welcomeGuideState === WelcomeGuideStep . ONE ,
146+ } ) }
147+ />
148+ </ div >
156149 </ span >
157150 </ div >
158151 </ div >
0 commit comments